feat: FRO-3 FRO-4 Added vue compontents to ingame and lobby (#100)
Added vue compontents to ingame and lobby. Co-authored-by: LQ63 <lkhermann@web.de> Reviewed-on: #100 Co-authored-by: lq64 <lq@blackhole.local> Co-committed-by: lq64 <lq@blackhole.local>
This commit is contained in:
@@ -8,123 +8,29 @@
|
||||
<div class="py-5 container-xxl">
|
||||
|
||||
<div class="row ms-4 me-4">
|
||||
<div class="col-4 mt-5 text-start">
|
||||
<h4 class="fw-semibold mb-1">Current Player</h4>
|
||||
@if(gamelobby.getLogic.getCurrentPlayer.isDefined) {
|
||||
<p class="fs-5 text-primary" id="current-player-name">@gamelobby.getLogic.getCurrentPlayer.get.name</p>
|
||||
}else {
|
||||
<p class="fs-5 text-primary" id="current-player-name">---</p>
|
||||
}
|
||||
@if(gamelobby.getLogic.getPlayerQueue.isDefined && gamelobby.getLogic.getCurrentMatch && !TrickUtil.isOver(gamelobby.getLogic.getCurrentMatch.get, gamelobby.getLogic.getPlayerQueue.get)) {
|
||||
<h4 class="fw-semibold mb-1" id="next-players-text">Next Players</h4>
|
||||
<div id="next-players-container">
|
||||
@for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) {
|
||||
<p class="fs-5 text-primary">@nextplayer @if(nextplayer.isInDogLife) {
|
||||
🐶
|
||||
}</p>
|
||||
}
|
||||
</div>
|
||||
} else {
|
||||
<h4 class="fw-semibold mb-1" style="display: none;" id="next-players-text">Next Players</h4>
|
||||
<div id="next-players-container">
|
||||
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="col-4 mt-5 text-start" id="turn-component"></div>
|
||||
|
||||
<div class="col-4 text-center">
|
||||
|
||||
<div class="score-table mt-5" id="score-table-body">
|
||||
<h4 class="fw-bold mb-3 text-black">Tricks Won</h4>
|
||||
|
||||
<div class="d-flex justify-content-between score-header pb-1">
|
||||
<div style="width: 50%">PLAYER</div>
|
||||
<div style="width: 50%">TRICKS</div>
|
||||
</div>
|
||||
|
||||
@if(gamelobby.getLogic.getPlayerQueue.isDefined) {
|
||||
@for(player <- gamelobby.getLogic.getPlayerQueue.get.toList.sortBy { p =>
|
||||
-(gamelobby.getLogic.getCurrentRound.get.tricklist.filter { trick => trick.winner.contains(p) }.size)
|
||||
}) {
|
||||
<div class="d-flex justify-content-between score-row pt-1">
|
||||
<div style="width: 50%" class="text-truncate">@player.name</div>
|
||||
<div style="width: 50%">
|
||||
@(gamelobby.getLogic.getCurrentRound.get.tricklist.filter { trick => trick.winner.contains(player) }.size)
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}else{
|
||||
<div class="d-flex justify-content-between score-row pt-1">
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
<div class="d-flex justify-content-center g-3 mb-5" id="trick-cards-container">
|
||||
@if(gamelobby.getLogic.getCurrentTrick.isEmpty || gamelobby.getLogic.getCurrentTrick.get.cards.isEmpty) {
|
||||
<div class="col-auto">
|
||||
</div>
|
||||
} else {
|
||||
@for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) {
|
||||
<div class="col-auto">
|
||||
<div class="card text-center shadow-sm border-0 bg-transparent" style="width: 7rem;
|
||||
backdrop-filter: blur(4px);">
|
||||
<div class="p-2">
|
||||
@util.WebUIUtils.cardtoImage(cardplayed) width="100%"/>
|
||||
</div>
|
||||
<div class="card-body p-2 bg-transparent">
|
||||
<small class="fw-semibold text-secondary">@player</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 mt-5 text-end">
|
||||
<h4 class="fw-semibold mb-1">Trumpsuit</h4>
|
||||
@if(gamelobby.getLogic.getCurrentRound.isEmpty) {
|
||||
<p class="fs-5 text-primary" id="trumpsuit">No Trumpsuit</p>
|
||||
}else {
|
||||
<p class="fs-5 text-primary" id="trumpsuit">@gamelobby.getLogic.getCurrentRound.get.trumpSuit</p>
|
||||
}
|
||||
<div id="score-table"></div>
|
||||
|
||||
|
||||
<div class="d-flex justify-content-center g-3 mb-5" id="trick-cards-container"></div>
|
||||
|
||||
<h5 class="fw-semibold mt-4 mb-1">First Card</h5>
|
||||
<div class="d-inline-block border rounded shadow-sm p-1 bg-light" id="first-card-container">
|
||||
@if(gamelobby.getLogic.getCurrentTrick.isDefined && gamelobby.getLogic.getCurrentTrick.get.firstCard.isDefined) {
|
||||
@util.WebUIUtils.cardtoImage(gamelobby.getLogic.getCurrentTrick.get.firstCard.get)
|
||||
width="80px"/>
|
||||
} else {
|
||||
@views.html.render.card.apply("images/cards/1B.png")("Blank Card") width="80px"/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-4 mt-5 text-end" id="game-info-component"></div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center g-2 mt-4 bottom-div" style="backdrop-filter: blur(4px);
|
||||
margin-left: 0;
|
||||
margin-right: 0;">
|
||||
<div class="row justify-content-center ingame-cards-slide @{
|
||||
!gamelobby.logic.getCurrentPlayer.contains(player) ? "inactive" |: ""
|
||||
}" id="card-slide">
|
||||
@if(player.currentHand().isEmpty || player.currentHand().get.cards.isEmpty) {
|
||||
|
||||
} else {
|
||||
@for(i <- player.currentHand().get.cards.indices) {
|
||||
<div class="col-auto handcard" style="border-radius: 6px">
|
||||
<div class="btn btn-outline-light p-0 border-0 shadow-none" data-card-id="@i" style="border-radius: 6px" onclick="handlePlayCard(this, '@player.isInDogLife')">
|
||||
@util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
|
||||
</div>
|
||||
@if(player.isInDogLife) {
|
||||
<div class="mt-2">
|
||||
<button class="btn btn-danger" onclick="handleSkipDogLife(this, '@gamelobby.id')">
|
||||
Skip Dog Life</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
<div id="player-hand-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -132,4 +38,5 @@
|
||||
<script>
|
||||
connectWebSocket()
|
||||
canPlayCard = @gamelobby.logic.getCurrentPlayer.contains(player);
|
||||
globalThis.initGameVueComponents()
|
||||
</script>
|
||||
|
||||
@@ -1,102 +1,38 @@
|
||||
@(user: Option[model.users.User], gamelobby: logic.game.GameLobby)
|
||||
@import play.api.libs.json._
|
||||
<div id="lobby-app-mount"></div>
|
||||
|
||||
<main class="lobby-background vh-100" id="lobbybackground">
|
||||
<!-- Kick Modal -->
|
||||
<div class="modal fade" data-backdrop="static" data-keyboard="false" data-focus="true" id="kickedModal" tabindex="-1" role="dialog" aria-labelledby="kickedModalTitle">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="kickedModalTitle">Kicked</h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>You've been kicked from the lobby.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Session Closed Modal -->
|
||||
<div class="modal fade" data-backdrop="static" data-keyboard="false" data-focus="true" id="sessionClosed" tabindex="-1" role="dialog" aria-labelledby="sessionClosedModalTitle">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="sessionClosedModalTitle">Session Closed</h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>The session was closed.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lobby -->
|
||||
<div class="container d-flex flex-column" style="height: calc(100vh - 1rem);">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="p-3 fs-1 d-flex align-items-center">
|
||||
<div class="text-center" style="flex-grow: 1;">
|
||||
Lobby-Name: @gamelobby.name
|
||||
</div>
|
||||
<div class="btn btn-danger ms-auto" onclick="leaveGame('@gamelobby.id')">Exit</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="p-3 text-center fs-4" id="playerAmount">
|
||||
Players: @gamelobby.getPlayers.size / @gamelobby.maxPlayers</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center align-items-center flex-grow-1">
|
||||
@if((gamelobby.getUserSession(user.get.id).host)) {
|
||||
<div id="players" class="justify-content-center align-items-center d-flex">
|
||||
@for(playersession <- gamelobby.getPlayers.values) {
|
||||
<div class="col-auto my-auto m-3">
|
||||
<div class="card" style="width: 18rem;">
|
||||
<img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
|
||||
<div class="card-body">
|
||||
@if(playersession.id == user.get.id) {
|
||||
<h5 class="card-title">@playersession.name (You)</h5>
|
||||
<a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Remove</a>
|
||||
} else {
|
||||
<h5 class="card-title">@playersession.name</h5>
|
||||
<div class="btn btn-danger" onclick="handleKickPlayer('@playersession.id')">
|
||||
Remove</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="col-12 text-center mb-5">
|
||||
<div class="btn btn-success" onclick="startGame()">Start Game</div>
|
||||
</div>
|
||||
} else {
|
||||
<div id="players" class="justify-content-center align-items-center d-flex">
|
||||
@for(playersession <- gamelobby.getPlayers.values) {
|
||||
<div class="col-auto my-auto m-3"> <div class="card" style="width: 18rem;">
|
||||
<img src="@routes.Assets.versioned("images/profile.png")" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
|
||||
<div class="card-body">
|
||||
@if(playersession.id == user.get.id) {
|
||||
<h5 class="card-title">@playersession.name (You)</h5>
|
||||
} else {
|
||||
<h5 class="card-title">@playersession.name</h5>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="col-12 text-center mt-3">
|
||||
<p class="fs-4">Waiting for the host to start the game...</p>
|
||||
<div class="spinner-border mt-1" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
connectWebSocket()
|
||||
// Initialisierung des momentanen Lobby Standes, welcher direkt gerendert werden muss.
|
||||
|
||||
const initialLobbyName = '@gamelobby.name';
|
||||
const initialLobbyId = '@gamelobby.id';
|
||||
|
||||
const initialIsHost = @{user.map(u => gamelobby.getUserSession(u.id)).exists(_.host)};
|
||||
const initialMaxPlayers = @{gamelobby.maxPlayers};
|
||||
|
||||
const initialPlayers = JSON.parse('@Html({
|
||||
val currentUserId = user.map(_.id).getOrElse(java.util.UUID.randomUUID())
|
||||
|
||||
val playerListForVue = gamelobby.getUsers.toSeq.map { u =>
|
||||
val isSelf = u.id == currentUserId
|
||||
val playerDogStatus = false
|
||||
|
||||
Json.obj(
|
||||
"id" -> u.id.toString,
|
||||
"name" -> u.name,
|
||||
"self" -> isSelf,
|
||||
"dog" -> playerDogStatus
|
||||
)
|
||||
}
|
||||
Json.stringify(Json.toJson(playerListForVue))
|
||||
})');
|
||||
connectWebSocket();
|
||||
globalThis.initLobbyVueComponents(
|
||||
initialLobbyName,
|
||||
initialLobbyId,
|
||||
initialIsHost,
|
||||
initialMaxPlayers,
|
||||
initialPlayers
|
||||
);
|
||||
</script>
|
||||
@@ -20,6 +20,7 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@@1.6.0/dist/confetti.browser.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script>
|
||||
<script src="@routes.JavaScriptRoutingController.javascriptRoutes()" type="text/javascript"></script>
|
||||
<script src="@routes.Assets.versioned("javascripts/websocket.js")" type="text/javascript"></script>
|
||||
<script src="@routes.Assets.versioned("javascripts/events.js")" type="text/javascript"></script>
|
||||
@@ -27,6 +28,7 @@
|
||||
<script src="@routes.Assets.versioned("javascripts/main.js")" type="text/javascript"></script>
|
||||
|
||||
<body class="d-flex flex-column min-vh-100" id="main-body">
|
||||
<div id="alerts-container"></div>
|
||||
@* And here's where we render the `Html` object containing
|
||||
* the page content. *@
|
||||
@content
|
||||
|
||||
@@ -1,170 +1,502 @@
|
||||
var canPlayCard = false;
|
||||
const PlayerHandComponent = {
|
||||
data() {
|
||||
return {
|
||||
hand: [],
|
||||
isDogPhase: false,
|
||||
isAwaitingResponse: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isHandInactive() {
|
||||
//TODO: Needs implementation
|
||||
}
|
||||
},
|
||||
template: `
|
||||
<div class="row justify-content-center g-2 mt-4 bottom-div"
|
||||
style="backdrop-filter: blur(4px); margin-left: 0; margin-right: 0;">
|
||||
|
||||
function alertMessage(message) {
|
||||
let newHtml = '';
|
||||
const alertId = `alert-${Date.now()}`;
|
||||
const fadeTime = 500;
|
||||
const duration = 5000;
|
||||
newHtml += `
|
||||
<div class="fixed-top d-flex justify-content-center mt-3" style="z-index: 1050;">
|
||||
<div
|
||||
id="${alertId}" class="alert alert-primary d-flex align-items-center p-2 mb-0 w-auto" role="alert" style="display: none;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
|
||||
<path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
|
||||
</svg>
|
||||
<div class="small">
|
||||
<small>${message}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
$('#main-body').prepend(newHtml);
|
||||
const $notice = $(`#${alertId}`);
|
||||
$notice.fadeIn(fadeTime);
|
||||
setTimeout(function() {
|
||||
$notice.fadeOut(fadeTime, function() {
|
||||
$(this).parent().remove();
|
||||
});
|
||||
}, duration);
|
||||
}
|
||||
function receiveHandEvent(eventData) {
|
||||
//Data
|
||||
const dog = eventData.dog;
|
||||
const hand = eventData.hand;
|
||||
<div id="card-slide" class="row justify-content-center ingame-cards-slide" :class="{'inactive': isHandInactive }">
|
||||
|
||||
const handElement = $('#card-slide');
|
||||
handElement.addClass('ingame-cards-slide')
|
||||
|
||||
let newHtml = '';
|
||||
|
||||
//Build Hand Container
|
||||
hand.forEach((card) => {
|
||||
//Data
|
||||
const idx = card.idx;
|
||||
const cardS = card.card;
|
||||
|
||||
const cardHtml = `
|
||||
<div class="col-auto handcard" style="border-radius: 6px">
|
||||
<div v-for="card in hand" :key="card.idx" class="col-auto handcard" style="border-radius: 6px">
|
||||
<div class="btn btn-outline-light p-0 border-0 shadow-none"
|
||||
data-card-id="${idx}"
|
||||
:data-card-id="card.idx"
|
||||
style="border-radius: 6px"
|
||||
onclick="handlePlayCard(this, '${dog}')">
|
||||
@click="handlePlayCard(card.idx)">
|
||||
|
||||
<img src="/assets/images/cards/${cardS}.png" width="120px" style="border-radius: 6px" alt="${cardS}"/>
|
||||
<img :src="getCardImagePath(card.card)" width="120px" style="border-radius: 6px" :alt="card.card"/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
newHtml += cardHtml;
|
||||
});
|
||||
|
||||
//Build dog if needed
|
||||
if (dog) {
|
||||
newHtml += `
|
||||
<div class="mt-2">
|
||||
<button class="btn btn-danger" onclick="handleSkipDogLife(this)">Skip Turn</button>
|
||||
<div v-if="isDogPhase" class="mt-2">
|
||||
<button class="btn btn-danger" @click="handleSkipDogLife()">Skip Turn</button>
|
||||
</div>
|
||||
`;
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
methods: {
|
||||
updateHand(eventData) {
|
||||
this.hand = eventData.hand.map(card => ({
|
||||
idx: parseInt(card.idx, 10),
|
||||
card: card.card
|
||||
}));
|
||||
this.isDogPhase = false;
|
||||
|
||||
console.log("Vue Data Updated. Hand size:", this.hand.length);
|
||||
|
||||
if (this.hand.length > 0) {
|
||||
console.log("First card path check:", this.getCardImagePath(this.hand[0].card));
|
||||
}
|
||||
handElement.html(newHtml);
|
||||
}
|
||||
function newRoundEvent(eventData) {
|
||||
const trumpsuit = eventData.trumpsuit;
|
||||
const players = eventData.players;
|
||||
|
||||
const tableElement = $('#score-table-body');
|
||||
},
|
||||
handlePlayCard(cardidx) {
|
||||
if(this.isAwaitingResponse) return
|
||||
if(!canPlayCard) return
|
||||
canPlayCard = false;
|
||||
this.isAwaitingResponse = true
|
||||
|
||||
|
||||
let tablehtml = `
|
||||
<h4 class="fw-bold mb-3 text-black">Tricks Won</h4>
|
||||
console.debug(`Playing card ${cardidx} from hand`)
|
||||
|
||||
<div class="d-flex justify-content-between score-header pb-1">
|
||||
<div style="width: 50%">PLAYER</div>
|
||||
<div style="width: 50%">TRICKS</div>
|
||||
</div>
|
||||
`;
|
||||
const wiggleKeyframes = [
|
||||
{ transform: 'translateX(0)' },
|
||||
{ transform: 'translateX(-5px)' },
|
||||
{ transform: 'translateX(5px)' },
|
||||
{ transform: 'translateX(-5px)' },
|
||||
{ transform: 'translateX(0)' }
|
||||
];
|
||||
|
||||
players.forEach(
|
||||
tablehtml += `
|
||||
<div class="d-flex justify-content-between score-row pt-1">
|
||||
<div style="width: 50%" class="text-truncate">'${players}'</div>
|
||||
<div style="width: 50%">
|
||||
0
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
tableElement.html(tablehtml);
|
||||
const wiggleTiming = {
|
||||
duration: 400,
|
||||
iterations: 1,
|
||||
easing: 'ease-in-out',
|
||||
fill: 'forwards'
|
||||
};
|
||||
const targetButton = this.$el.querySelector(`[data-card-id="${cardidx}"]`);
|
||||
const cardElement = targetButton ? targetButton.closest('.handcard') : null;
|
||||
|
||||
const trumpsuitClass = $('#trumpsuit');
|
||||
trumpsuitClass.html(trumpsuit);
|
||||
|
||||
}
|
||||
function trickEndEvent(eventData) {
|
||||
const winner = eventData.playerwon;
|
||||
const players = eventData.playersin;
|
||||
const tricklist = eventData.tricklist;
|
||||
|
||||
let newHtml = '';
|
||||
|
||||
let tricktable = $('#score-table-body');
|
||||
|
||||
newHtml += `
|
||||
<h4 class="fw-bold mb-3 text-black">Tricks Won</h4>
|
||||
|
||||
<div class="d-flex justify-content-between score-header pb-1">
|
||||
<div style="width: 50%">PLAYER</div>
|
||||
<div style="width: 50%">TRICKS</div>
|
||||
</div>
|
||||
`;
|
||||
let playercounts = new Map();
|
||||
|
||||
players.forEach( player => {
|
||||
playercounts.set(player, 0)
|
||||
});
|
||||
tricklist.forEach( player => {
|
||||
if ( player !== "Trick in Progress" && playercounts.has(player)) {
|
||||
playercounts.set(player, playercounts.get(player) + 1)
|
||||
const payload = {
|
||||
cardindex: cardidx.toString(),
|
||||
isDog: false
|
||||
}
|
||||
sendEventAndWait("PlayCard", payload).then(
|
||||
() => {
|
||||
this.hand = this.hand.filter(card => card.idx !== cardidx);
|
||||
|
||||
this.hand.forEach((card, index) => {
|
||||
card.idx = index;
|
||||
})
|
||||
this.isAwaitingResponse = false;
|
||||
}
|
||||
).catch(
|
||||
(err) => {
|
||||
if (cardElement) {
|
||||
cardElement.animate(wiggleKeyframes, wiggleTiming);
|
||||
} else {
|
||||
console.warn(`Could not find DOM element for card index ${cardidx} to wiggle.`);
|
||||
}
|
||||
this.isAwaitingResponse = false;
|
||||
canPlayCard = true;
|
||||
|
||||
}
|
||||
)
|
||||
const playerorder = players.sort((playerA, playerB) => {
|
||||
const countA = playercounts.get(playerA) || 0;
|
||||
const countB = playercounts.get(playerB) || 0;
|
||||
return countB - countA;
|
||||
});
|
||||
playerorder.forEach( player => {
|
||||
newHtml += `
|
||||
<div class="d-flex justify-content-between score-row pt-1">
|
||||
<div style="width: 50%" class="text-truncate">${player}</div>
|
||||
},
|
||||
handleSkipDogLife() {
|
||||
globalThis.handleSkipDogLife();
|
||||
},
|
||||
getCardImagePath(cardName) {
|
||||
return `/assets/images/cards/${cardName}.png`;
|
||||
}
|
||||
}
|
||||
};
|
||||
const ScoreBoardComponent = {
|
||||
data() {
|
||||
return {
|
||||
trumpsuit: 'N/A',
|
||||
playerScores: [],
|
||||
};
|
||||
},
|
||||
template: `
|
||||
<div class="score-table mt-5" id="score-table-container">
|
||||
<h4 class="fw-bold mb-3 text-black">Tricks Won</h4>
|
||||
|
||||
<div class="d-flex justify-content-between score-header pb-1">
|
||||
<div style="width: 50%">PLAYER</div>
|
||||
<div style="width: 50%">TRICKS</div>
|
||||
</div>
|
||||
|
||||
<div id="score-table-body">
|
||||
<div v-for="(player, index) in playerScores"
|
||||
:key="player.name"
|
||||
class="d-flex justify-content-between score-row pt-1">
|
||||
|
||||
<div style="width: 50%" class="text-truncate">
|
||||
{{ player.name }}
|
||||
</div>
|
||||
|
||||
<div style="width: 50%">
|
||||
${playercounts.get(player)}
|
||||
{{ player.tricks }}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
methods: {
|
||||
calculateNewScores(players, tricklist) {
|
||||
const playercounts = new Map();
|
||||
players.forEach(player => {
|
||||
playercounts.set(player, 0)
|
||||
});
|
||||
alertMessage(`${winner} won the trick!`)
|
||||
tricktable.html(newHtml);
|
||||
|
||||
tricklist.forEach(playerWonTrick => {
|
||||
if (playerWonTrick !== "Trick in Progress" && playercounts.has(playerWonTrick)) {
|
||||
playercounts.set(playerWonTrick, playercounts.get(playerWonTrick) + 1);
|
||||
}
|
||||
});
|
||||
|
||||
const newScores = players.map(name => ({
|
||||
name: name,
|
||||
tricks: playercounts.get(name) || 0,
|
||||
}));
|
||||
|
||||
newScores.sort((a, b) => b.tricks - a.tricks);
|
||||
|
||||
return newScores;
|
||||
},
|
||||
|
||||
updateNewRoundData(eventData) {
|
||||
console.log("Vue Scoreboard Data Update Triggered: New Round!");
|
||||
|
||||
this.playerScores = eventData.players.map(player => ({
|
||||
name: player,
|
||||
tricks: 0,
|
||||
}));
|
||||
},
|
||||
|
||||
updateTrickEndData(eventData) {
|
||||
const { playerwon, playersin, tricklist } = eventData;
|
||||
|
||||
console.log(`Vue Scoreboard Data Update Triggered: ${playerwon} won the trick!`);
|
||||
|
||||
this.playerScores = this.calculateNewScores(playersin, tricklist);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
const GameInfoComponent = {
|
||||
data() {
|
||||
return {
|
||||
trumpsuit: 'No Trumpsuit',
|
||||
firstCardImagePath: '/assets/images/cards/1B.png',
|
||||
};
|
||||
},
|
||||
|
||||
template: `
|
||||
<div>
|
||||
<h4 class="fw-semibold mb-1">Trumpsuit</h4>
|
||||
<p class="fs-5 text-primary" id="trumpsuit">{{ trumpsuit }}</p>
|
||||
|
||||
|
||||
<h5 class="fw-semibold mt-4 mb-1">First Card</h5>
|
||||
<div class="d-inline-block border rounded shadow-sm p-1 bg-light" id="first-card-container">
|
||||
|
||||
<img :src="firstCardImagePath" alt="First Card" width="80px" style="border-radius: 6px"/>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
methods: {
|
||||
resetFirstCard(eventData) {
|
||||
console.log("GameInfoComponent: Resetting First Card to placeholder.");
|
||||
this.firstCardImagePath = '/assets/images/cards/1B.png';
|
||||
},
|
||||
updateFirstCard(eventData) {
|
||||
const firstCardId = eventData.firstCard;
|
||||
console.log("GameInfoComponent: Updating First Card to:", firstCardId);
|
||||
|
||||
let imageSource;
|
||||
if (firstCardId === "BLANK" || !firstCardId) {
|
||||
imageSource = "/assets/images/cards/1B.png";
|
||||
} else {
|
||||
imageSource = `/assets/images/cards/${firstCardId}.png`;
|
||||
}
|
||||
this.firstCardImagePath = imageSource;
|
||||
},
|
||||
updateTrumpsuit(eventData) {
|
||||
this.trumpsuit = eventData.trumpsuit;
|
||||
}
|
||||
}
|
||||
};
|
||||
const TrickDisplayComponent = {
|
||||
data() {
|
||||
return {
|
||||
playedCards: [],
|
||||
};
|
||||
},
|
||||
|
||||
template: `
|
||||
<div class="d-flex justify-content-center g-3" id="trick-cards-content">
|
||||
<div v-for="(play, index) in playedCards" :key="index" class="col-auto">
|
||||
<div class="card text-center shadow-sm border-0 bg-transparent" style="width: 7rem;
|
||||
backdrop-filter: blur(4px);">
|
||||
<div class="p-2">
|
||||
<img :src="getCardImagePath(play.cardId)" width="100%" style="border-radius: 6px"/>
|
||||
</div>
|
||||
<div class="card-body p-2 bg-transparent">
|
||||
<small class="fw-semibold text-secondary">{{ play.player }}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
|
||||
methods: {
|
||||
getCardImagePath(cardId) {
|
||||
return `/assets/images/cards/${cardId}.png`;
|
||||
},
|
||||
|
||||
clearPlayedCards() {
|
||||
console.log("TrickDisplayComponent: Clearing played cards.");
|
||||
this.playedCards = [];
|
||||
},
|
||||
|
||||
updatePlayedCards(eventData) {
|
||||
console.log("TrickDisplayComponent: Updating played cards.");
|
||||
|
||||
this.playedCards = eventData.playedCards;
|
||||
}
|
||||
}
|
||||
};
|
||||
function formatPlayerName(player) {
|
||||
let name = player.name;
|
||||
if (player.dog) {
|
||||
name += " 🐶";
|
||||
}
|
||||
return name;
|
||||
}
|
||||
function newTrickEvent() {
|
||||
const firstCardContainer = $('#first-card-container');
|
||||
const emptyHtml = '';
|
||||
let newHtml = '';
|
||||
newHtml += `
|
||||
<img src="/assets/images/cards/1B.png" alt="Blank Card" width="80px" style="border-radius: 6px"/>
|
||||
`;
|
||||
firstCardContainer.html(newHtml);
|
||||
const playedCardsContainer = $('#trick-cards-container')
|
||||
playedCardsContainer.html(emptyHtml)
|
||||
}
|
||||
|
||||
const TurnComponent = {
|
||||
data() {
|
||||
return {
|
||||
currentPlayerName: 'Waiting...',
|
||||
nextPlayers: [],
|
||||
};
|
||||
},
|
||||
|
||||
template: `
|
||||
<div class="turn-tracker-container">
|
||||
<h4 class="fw-semibold mb-1">Current Player</h4>
|
||||
<p class="fs-3 fw-bold text-success" id="current-player-name">{{ currentPlayerName }}</p>
|
||||
|
||||
<div v-if="nextPlayers.length > 0">
|
||||
<h5 class="fw-semibold mt-4 mb-1" id="next-players-text">Next Players</h5>
|
||||
<div id="next-players-container">
|
||||
<p v-for="name in nextPlayers" :key="name" class="fs-5 text-primary">{{ name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
methods: {
|
||||
updateTurnData(eventData) {
|
||||
console.log("TurnComponent: Updating turn data.");
|
||||
const { currentPlayer, nextPlayers } = eventData;
|
||||
|
||||
this.currentPlayerName = formatPlayerName(currentPlayer);
|
||||
|
||||
this.nextPlayers = nextPlayers.map(player => formatPlayerName(player));
|
||||
}
|
||||
}
|
||||
};
|
||||
const LobbyComponent = {
|
||||
data() {
|
||||
return {
|
||||
lobbyName: 'Loading...',
|
||||
lobbyId: 'default',
|
||||
isHost: false,
|
||||
maxPlayers: 0,
|
||||
players: [],
|
||||
showKickedModal: false,
|
||||
kickedEventData: null,
|
||||
showSessionClosedModal: false,
|
||||
sessionClosedEventData: null,
|
||||
};
|
||||
},
|
||||
|
||||
template: `
|
||||
<main class="lobby-background vh-100" id="lobbybackground">
|
||||
|
||||
<div v-if="showKickedModal" class="modal fade show d-block"
|
||||
tabindex="-1"
|
||||
role="dialog"
|
||||
aria-labelledby="kickedModalTitle"
|
||||
aria-modal="true"
|
||||
style="background-color: rgba(0,0,0,0.5);">
|
||||
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="kickedModalTitle">Kicked</h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>You've been kicked from the lobby.</p>
|
||||
<p class="text-muted small">You'll get redirected to the mainmenu in 5 seconds...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div v-if="showSessionClosedModal" class="modal fade show d-block"
|
||||
tabindex="-1"
|
||||
role="dialog"
|
||||
aria-labelledby="sessionClosedModalTitle"
|
||||
aria-modal="true"
|
||||
style="background-color: rgba(0,0,0,0.5);">
|
||||
<div class="modal-dialog modal-dialog-centered" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="sessionClosedModalTitle">Session Closed</h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>The session was closed.</p>
|
||||
<p class="text-muted small">You'll get redirected to the mainmenu in 5 seconds...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container d-flex flex-column" style="height: calc(100vh - 1rem);">
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="p-3 fs-1 d-flex align-items-center">
|
||||
<div class="text-center" style="flex-grow: 1;">
|
||||
Lobby-Name: {{ lobbyName }}
|
||||
</div>
|
||||
<div class="btn btn-danger ms-auto" @click="leaveGame(lobbyId)">Exit</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="p-3 text-center fs-4" id="playerAmount">
|
||||
Players: {{ players.length }} / {{ maxPlayers }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row justify-content-center align-items-center flex-grow-1">
|
||||
|
||||
<template v-if="isHost">
|
||||
<div id="players" class="justify-content-center align-items-center d-flex flex-wrap">
|
||||
<div v-for="player in players" :key="player.id" class="col-auto my-auto m-3">
|
||||
<div class="card" style="width: 18rem;">
|
||||
<img src="/assets/images/profile.png" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
{{ player.name }} <span v-if="player.self">(You)</span>
|
||||
</h5>
|
||||
|
||||
<template v-if="player.self">
|
||||
<a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Remove</a>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="btn btn-danger" @click="handleKickPlayer(player.id)">Remove</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 text-center mb-5">
|
||||
<div class="btn btn-success" @click="startGame()">Start Game</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div id="players" class="justify-content-center align-items-center d-flex flex-wrap">
|
||||
<div v-for="player in players" :key="player.id" class="col-auto my-auto m-3">
|
||||
<div class="card" style="width: 18rem;">
|
||||
<img src="/assets/images/profile.png" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
{{ player.name }} <span v-if="player.self">(You)</span>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 text-center mt-3">
|
||||
<p class="fs-4">Waiting for the host to start the game...</p>
|
||||
<div class="spinner-border mt-1" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
`,
|
||||
|
||||
methods: {
|
||||
updateLobbyData(eventData) {
|
||||
console.log("LobbyComponent: Received Lobby Update Event.");
|
||||
|
||||
this.isHost = eventData.host;
|
||||
this.maxPlayers = eventData.maxPlayers;
|
||||
this.players = eventData.players;
|
||||
},
|
||||
|
||||
setInitialData(name, id) {
|
||||
this.lobbyName = name;
|
||||
this.lobbyId = id;
|
||||
},
|
||||
startGame() {
|
||||
globalThis.startGame()
|
||||
},
|
||||
leaveGame(gameId) {
|
||||
//TODO: Needs implementation
|
||||
},
|
||||
handleKickPlayer(playerId) {
|
||||
globalThis.handleKickPlayer(playerId)
|
||||
},
|
||||
showKickModal(eventData) {
|
||||
this.showKickedModal = true;
|
||||
setTimeout(() => {
|
||||
this.kickedEventData = eventData;
|
||||
this.showKickedModal = false;
|
||||
|
||||
if (typeof globalThis.receiveGameStateChange === 'function') {
|
||||
globalThis.receiveGameStateChange(this.kickedEventData);
|
||||
} else {
|
||||
console.error("FATAL: receiveGameStateChange ist nicht global definiert.");
|
||||
}
|
||||
}, 5000);
|
||||
},
|
||||
showSessionClosedModal(eventData) {
|
||||
this.sessionClosedEventData = eventData;
|
||||
this.showSessionClosedModal = true;
|
||||
|
||||
setTimeout(() => {
|
||||
this.showSessionClosedModal = false;
|
||||
|
||||
if (typeof globalThis.receiveGameStateChange === 'function') {
|
||||
globalThis.receiveGameStateChange(this.sessionClosedEventData);
|
||||
} else {
|
||||
console.error("FATAL: receiveGameStateChange ist nicht global definiert.");
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function requestCardEvent(eventData) {
|
||||
const player = eventData.player;
|
||||
const handElement = $('#card-slide')
|
||||
handElement.removeClass('inactive');
|
||||
canPlayCard = true;
|
||||
//TODO: Needs correct implementation of setting the inactive class in the PlayerHandComponent
|
||||
}
|
||||
|
||||
|
||||
function receiveGameStateChange(eventData) {
|
||||
const content = eventData.content;
|
||||
const title = eventData.title || 'Knockout Whist';
|
||||
@@ -172,162 +504,150 @@ function receiveGameStateChange(eventData) {
|
||||
|
||||
exchangeBody(content, title, url);
|
||||
}
|
||||
function receiveCardPlayedEvent(eventData) {
|
||||
const firstCard = eventData.firstCard;
|
||||
const playedCards = eventData.playedCards;
|
||||
|
||||
const trickCardsContainer = $('#trick-cards-container');
|
||||
const firstCardContainer = $('#first-card-container')
|
||||
|
||||
let trickHTML = '';
|
||||
playedCards.forEach(cardCombo => {
|
||||
trickHTML += `
|
||||
<div class="col-auto">
|
||||
<div class="card text-center shadow-sm border-0 bg-transparent" style="width: 7rem; backdrop-filter: blur(4px);">
|
||||
<div class="p-2">
|
||||
<img src="/assets/images/cards/${cardCombo.cardId}.png" width="100%" alt="${cardCombo.cardId}"/>
|
||||
</div>
|
||||
<div class="card-body p-2 bg-transparent">
|
||||
<small class="fw-semibold text-secondary">${cardCombo.player}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
trickCardsContainer.html(trickHTML);
|
||||
|
||||
let altText;
|
||||
let imageSrc;
|
||||
if (firstCard === "BLANK") {
|
||||
imageSrc = "/assets/images/cards/1B.png";
|
||||
altText = "Blank Card";
|
||||
} else {
|
||||
imageSrc = `/assets/images/cards/${firstCard}.png`;
|
||||
altText = `Card ${firstCard}`;
|
||||
}
|
||||
|
||||
const newFirstCardHTML = `
|
||||
<img src="${imageSrc}" alt="${altText}" width="80px" style="border-radius: 6px"/>
|
||||
`;
|
||||
firstCardContainer.html(newFirstCardHTML);
|
||||
}
|
||||
function receiveLobbyUpdateEvent(eventData) {
|
||||
const host = eventData.host;
|
||||
const maxPlayers = eventData.maxPlayers;
|
||||
const players = eventData.players;
|
||||
|
||||
const lobbyPlayersContainer = $('#players');
|
||||
const playerAmountBox = $('#playerAmount');
|
||||
|
||||
let newHtml = ''
|
||||
|
||||
if (host) {
|
||||
players.forEach(user => {
|
||||
|
||||
const inner = user.self ? `<h5 class="card-title">${user.name} (You)</h5>
|
||||
<a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Remove</a>`
|
||||
: ` <h5 class="card-title">${user.name}</h5>
|
||||
<div class="btn btn-danger" onclick="handleKickPlayer('${user.id}')">Remove</div>`
|
||||
|
||||
newHtml += `<div class="col-auto my-auto m-3">
|
||||
<div class="card" style="width: 18rem;">
|
||||
<img src="/assets/images/profile.png" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
|
||||
<div class="card-body">
|
||||
${inner}
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
} else {
|
||||
players.forEach(user => {
|
||||
|
||||
const inner = user.self ? `<h5 class="card-title">${user.name} (You)</h5>` : ` <h5 class="card-title">${user.name}</h5>`
|
||||
|
||||
newHtml += `<div class="col-auto my-auto m-3">
|
||||
<div class="card" style="width: 18rem;">
|
||||
<img src="/assets/images/profile.png" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
|
||||
<div class="card-body">
|
||||
${inner}
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
}
|
||||
|
||||
lobbyPlayersContainer.html(newHtml);
|
||||
playerAmountBox.text(`Players: ${players.length} / ${maxPlayers}`);
|
||||
|
||||
}
|
||||
function receiveKickEvent(eventData) {
|
||||
$('#kickedModal').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
}).modal('show');
|
||||
|
||||
setTimeout(() => {
|
||||
receiveGameStateChange(eventData)
|
||||
}, 5000);
|
||||
}
|
||||
function receiveSessionClosedEvent(eventData) {
|
||||
$('#sessionClosed').modal({
|
||||
backdrop: 'static',
|
||||
keyboard: false
|
||||
}).modal('show');
|
||||
|
||||
setTimeout(() => {
|
||||
receiveGameStateChange(eventData)
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
|
||||
function receiveTurnEvent(eventData) {
|
||||
const currentPlayer = eventData.currentPlayer;
|
||||
const nextPlayers = eventData.nextPlayers;
|
||||
|
||||
const currentPlayerNameContainer = $('#current-player-name');
|
||||
const nextPlayersContainer = $('#next-players-container');
|
||||
const nextPlayerText = $('#next-players-text');
|
||||
|
||||
let currentPlayerName = currentPlayer.name;
|
||||
if (currentPlayer.dog) {
|
||||
currentPlayerName += " 🐶";
|
||||
}
|
||||
currentPlayerNameContainer.text(currentPlayerName);
|
||||
|
||||
if (nextPlayers.length === 0) {
|
||||
nextPlayerText.hide();
|
||||
nextPlayersContainer.html('');
|
||||
} else {
|
||||
console.log("Length"+nextPlayers.length);
|
||||
nextPlayerText.show();
|
||||
let nextPlayersHtml = '';
|
||||
nextPlayers.forEach((player) => {
|
||||
let playerName = player.name;
|
||||
if (player.dog) {
|
||||
playerName += " 🐶";
|
||||
}
|
||||
nextPlayersHtml += `<p class="fs-5 text-primary">${playerName}</p>`;
|
||||
});
|
||||
nextPlayersContainer.html(nextPlayersHtml);
|
||||
}
|
||||
}
|
||||
function receiveRoundEndEvent(eventData) {
|
||||
const player = eventData.player
|
||||
const tricks = eventData.tricks
|
||||
alertMessage(`${player} won this round with ${tricks} tricks!`)
|
||||
//TODO: When alert is working, set an alert that shows how won the round and with how much tricks.
|
||||
}
|
||||
onEvent("ReceivedHandEvent", receiveHandEvent)
|
||||
onEvent("GameStateChangeEvent", receiveGameStateChange)
|
||||
onEvent("NewRoundEvent", newRoundEvent)
|
||||
onEvent("TrickEndEvent", trickEndEvent)
|
||||
onEvent("NewTrickEvent", newTrickEvent)
|
||||
onEvent("RequestCardEvent", requestCardEvent)
|
||||
onEvent("CardPlayedEvent", receiveCardPlayedEvent)
|
||||
onEvent("LobbyUpdateEvent", receiveLobbyUpdateEvent)
|
||||
onEvent("LeftEvent", receiveGameStateChange)
|
||||
onEvent("KickEvent", receiveKickEvent)
|
||||
onEvent("SessionClosed", receiveSessionClosedEvent)
|
||||
onEvent("TurnEvent", receiveTurnEvent)
|
||||
onEvent("RoundEndEvent", receiveRoundEndEvent)
|
||||
let playerHandApp = null;
|
||||
let scoreBoardApp = null;
|
||||
let gameInfoApp = null;
|
||||
let trickDisplayApp = null;
|
||||
let turnApp = null;
|
||||
globalThis.initGameVueComponents = function() {
|
||||
// Initializing PlayerHandComponent
|
||||
const app = Vue.createApp(PlayerHandComponent);
|
||||
|
||||
globalThis.alertMessage = alertMessage
|
||||
playerHandApp = app;
|
||||
const mountedHand = app.mount('#player-hand-container');
|
||||
|
||||
if (mountedHand && mountedHand.updateHand) {
|
||||
globalThis.updatePlayerHand = mountedHand.updateHand;
|
||||
onEvent("ReceivedHandEvent", globalThis.updatePlayerHand);
|
||||
console.log("PLAYER HAND SYSTEM: updatePlayerHand successfully exposed.");
|
||||
} else {
|
||||
console.error("FATAL ERROR: PlayerHandComponent mount failed. Check if #player-hand-container exists.");
|
||||
}
|
||||
|
||||
// Initializing Scoreboard
|
||||
if (scoreBoardApp) return
|
||||
|
||||
const app2 = Vue.createApp(ScoreBoardComponent)
|
||||
scoreBoardApp = app2
|
||||
const mountedHand2 = app2.mount('#score-table')
|
||||
if (mountedHand2) {
|
||||
globalThis.updateNewRoundData = mountedHand2.updateNewRoundData;
|
||||
onEvent("NewRoundEvent", handleNewRoundEvent);
|
||||
|
||||
globalThis.updateTrickEndData = mountedHand2.updateTrickEndData;
|
||||
onEvent("TrickEndEvent", globalThis.updateTrickEndData);
|
||||
console.log("SCOREBOARD: updateNewRoundData successfully exposed.");
|
||||
} else {
|
||||
console.error("FATAL ERROR: Scoreboard mount failed. Check if #score-table exists.");
|
||||
}
|
||||
// Initializing Gameinfo
|
||||
if (gameInfoApp) return
|
||||
|
||||
const app3 = Vue.createApp(GameInfoComponent)
|
||||
gameInfoApp = app3
|
||||
const mountedGameInfo = app3.mount('#game-info-component')
|
||||
if(mountedGameInfo) {
|
||||
globalThis.resetFirstCard = mountedGameInfo.resetFirstCard;
|
||||
globalThis.updateFirstCard = mountedGameInfo.updateFirstCard;
|
||||
globalThis.updateTrumpsuit = mountedGameInfo.updateTrumpsuit
|
||||
onEvent("NewTrickEvent", handleNewTrickEvent);
|
||||
console.log("GameInfo: resetFirstCard successfully exposed.");
|
||||
} else {
|
||||
console.error("FATAL ERROR: GameInfo mount failed. Check if #score-table exists.");
|
||||
}
|
||||
|
||||
// Initializing TrickCardContainer
|
||||
if (trickDisplayApp) return;
|
||||
const app4 = Vue.createApp(TrickDisplayComponent);
|
||||
trickDisplayApp = app4;
|
||||
const mountedTrickDisplay = app4.mount('#trick-cards-container');
|
||||
|
||||
if (mountedTrickDisplay) {
|
||||
globalThis.clearPlayedCards = mountedTrickDisplay.clearPlayedCards;
|
||||
globalThis.updatePlayedCards = mountedTrickDisplay.updatePlayedCards;
|
||||
onEvent("CardPlayedEvent", handleCardPlayedEvent)
|
||||
console.log("TRICK DISPLAY: Handlers successfully exposed (clearPlayedCards, updatePlayedCards).");
|
||||
} else {
|
||||
console.error("FATAL ERROR: TrickDisplay mount failed. Check if #trick-cards-container exists.");
|
||||
}
|
||||
|
||||
// Initializing TurnContainer
|
||||
if (turnApp) return;
|
||||
const app5 = Vue.createApp(TurnComponent)
|
||||
turnApp = app5;
|
||||
const mountedTurnApp = app5.mount('#turn-component')
|
||||
|
||||
if(mountedTurnApp) {
|
||||
globalThis.updateTurnData = mountedTurnApp.updateTurnData;
|
||||
onEvent("TurnEvent", globalThis.updateTurnData);
|
||||
console.log("TURN DISPLAY: Handlers successfully exposed (clearPlayedCards, updatePlayedCards).");
|
||||
} else {
|
||||
console.error("FATAL ERROR: TURNAPP mount failed. Check if #trick-cards-container exists.");
|
||||
}
|
||||
}
|
||||
let lobbyApp = null;
|
||||
globalThis.initLobbyVueComponents = function(initialLobbyName, initialLobbyId, initialIsHost, initialMaxPlayers, initialPlayers) {
|
||||
|
||||
if (lobbyApp) return;
|
||||
|
||||
const appLobby = Vue.createApp(LobbyComponent);
|
||||
lobbyApp = appLobby;
|
||||
const mountedLobby = appLobby.mount('#lobby-app-mount');
|
||||
|
||||
if (mountedLobby) {
|
||||
mountedLobby.setInitialData(initialLobbyName, initialLobbyId);
|
||||
|
||||
//Damit beim erstmaligen Betreten der Lobby die Spieler etc. angezeigt werden.
|
||||
mountedLobby.updateLobbyData({
|
||||
host: initialIsHost,
|
||||
maxPlayers: initialMaxPlayers,
|
||||
players: initialPlayers
|
||||
});
|
||||
|
||||
globalThis.updateLobbyData = mountedLobby.updateLobbyData;
|
||||
globalThis.showKickModal = mountedLobby.showKickModal;
|
||||
globalThis.showSessionClosedModal = mountedLobby.showSessionClosedModal;
|
||||
onEvent("LobbyUpdateEvent", globalThis.updateLobbyData);
|
||||
onEvent("KickEvent", globalThis.showKickModal);
|
||||
onEvent("SessionClosed", globalThis.showSessionClosedModal);
|
||||
console.log("LobbyComponent successfully mounted and registered events.");
|
||||
} else {
|
||||
console.error("FATAL ERROR: LobbyComponent mount failed.");
|
||||
}
|
||||
}
|
||||
function handleCardPlayedEvent(eventData) {
|
||||
console.log("CardPlayedEvent received. Updating Game Info and Trick Display.");
|
||||
|
||||
if (typeof globalThis.updateFirstCard === 'function') {
|
||||
globalThis.updateFirstCard(eventData);
|
||||
}
|
||||
|
||||
if (typeof globalThis.updatePlayedCards === 'function') {
|
||||
globalThis.updatePlayedCards(eventData);
|
||||
}
|
||||
}
|
||||
function handleNewTrickEvent(eventData) {
|
||||
if (typeof globalThis.resetFirstCard === 'function') {
|
||||
globalThis.resetFirstCard(eventData);
|
||||
}
|
||||
|
||||
if (typeof globalThis.clearPlayedCards === 'function') {
|
||||
globalThis.clearPlayedCards();
|
||||
}
|
||||
}
|
||||
function handleNewRoundEvent(eventData) {
|
||||
if (typeof globalThis.updateNewRoundData === 'function') {
|
||||
globalThis.updateNewRoundData(eventData);
|
||||
}
|
||||
if (typeof globalThis.updateTrumpsuit === 'function') {
|
||||
globalThis.updateTrumpsuit(eventData);
|
||||
}
|
||||
}
|
||||
|
||||
onEvent("GameStateChangeEvent", receiveGameStateChange)
|
||||
onEvent("LeftEvent", receiveGameStateChange)
|
||||
onEvent("RequestCardEvent", requestCardEvent)
|
||||
onEvent("RoundEndEvent", receiveRoundEndEvent)
|
||||
@@ -1,59 +1,5 @@
|
||||
function handlePlayCard(card, dog) {
|
||||
|
||||
if(!canPlayCard) return
|
||||
canPlayCard = false;
|
||||
|
||||
const cardId = card.dataset.cardId;
|
||||
|
||||
console.debug(`Playing card ${cardId} from hand`)
|
||||
|
||||
const wiggleKeyframes = [
|
||||
{ transform: 'translateX(0)' },
|
||||
{ transform: 'translateX(-5px)' },
|
||||
{ transform: 'translateX(5px)' },
|
||||
{ transform: 'translateX(-5px)' },
|
||||
{ transform: 'translateX(0)' }
|
||||
];
|
||||
|
||||
const wiggleTiming = {
|
||||
duration: 400,
|
||||
iterations: 1,
|
||||
easing: 'ease-in-out',
|
||||
fill: 'forwards'
|
||||
};
|
||||
|
||||
|
||||
const cardslide = $('#card-slide')
|
||||
|
||||
const payload = {
|
||||
cardindex: cardId,
|
||||
isDog: dog
|
||||
}
|
||||
sendEventAndWait("PlayCard", payload).then(
|
||||
() => {
|
||||
card.parentElement.remove();
|
||||
cardslide.find('.handcard').each(function(newIndex) {
|
||||
|
||||
const $innerButton = $(this).find('.btn');
|
||||
$innerButton.attr('data-card-id', newIndex);
|
||||
|
||||
const isInDogLife = $innerButton.attr('onclick').includes("'true'") ? 'true' : 'false';
|
||||
$innerButton.attr('onclick', `handlePlayCard(this, '${isInDogLife}')`);
|
||||
|
||||
console.debug(`Re-indexed card: Old index was ${$innerButton.attr('data-card-id')}, New index is ${newIndex}`);
|
||||
});
|
||||
|
||||
cardslide.addClass("inactive")
|
||||
}
|
||||
).catch(
|
||||
(err) => {
|
||||
canPlayCard = true;
|
||||
const cardslide = $('#card-slide')
|
||||
cardslide.removeClass("inactive")
|
||||
card.parentElement.animate(wiggleKeyframes, wiggleTiming);
|
||||
alertMessage(err.message)
|
||||
}
|
||||
)
|
||||
function handlePlayCard(cardidx) {
|
||||
//TODO: Needs implementation
|
||||
}
|
||||
|
||||
function handleSkipDogLife(button) {
|
||||
@@ -80,3 +26,8 @@ function handleKickPlayer(playerId) {
|
||||
function handleReturnToLobby() {
|
||||
sendEvent("ReturnToLobby")
|
||||
}
|
||||
|
||||
globalThis.startGame = startGame
|
||||
globalThis.handleTrumpSelection = handleTrumpSelection
|
||||
globalThis.handleKickPlayer = handleKickPlayer
|
||||
globalThis.handleReturnToLobby = handleReturnToLobby
|
||||
Reference in New Issue
Block a user