740 lines
27 KiB
JavaScript
740 lines
27 KiB
JavaScript
var canPlayCard = false;
|
|
var isInitialized = false;
|
|
const AlertsComponent = {
|
|
template: `
|
|
<div class="fixed-top d-flex flex-column align-items-center mt-3" style="z-index: 1050; pointer-events: none;">
|
|
<div v-for="alert in alerts" :key="alert.id" class="alert-item">
|
|
<div
|
|
class="alert alert-primary d-flex align-items-center p-2 mb-2 w-auto shadow-sm"
|
|
role="alert"
|
|
style="width: 25rem; pointer-events: all;">
|
|
|
|
<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>{{ alert.message }}</small>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
`,
|
|
data() {
|
|
return {
|
|
alerts: []
|
|
};
|
|
},
|
|
methods: {
|
|
alertMessage(message) {
|
|
const alertData = {
|
|
id: Date.now(),
|
|
message: message,
|
|
isVisible: true,
|
|
};
|
|
this.alerts.push(alertData);
|
|
|
|
setTimeout(() => {
|
|
this.removeAlert(alertData.id);
|
|
}, 5000);
|
|
},
|
|
removeAlert(id) {
|
|
const index = this.alerts.findIndex(alert => alert.id === id);
|
|
if (index !== -1) {
|
|
this.alerts.splice(index, 1);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
|
|
const PlayerHandComponent = {
|
|
data() {
|
|
return {
|
|
hand: [],
|
|
isDogPhase: false,
|
|
isAwaitingResponse: false,
|
|
};
|
|
},
|
|
computed: {
|
|
isHandInactive() {
|
|
console.log("isHandInactive got executed" + !canPlayCard)
|
|
return !canPlayCard
|
|
}
|
|
},
|
|
template: `
|
|
<div class="row justify-content-center g-2 mt-4 bottom-div"
|
|
style="backdrop-filter: blur(4px); margin-left: 0; margin-right: 0;">
|
|
|
|
<div id="card-slide" class="row justify-content-center ingame-cards-slide" :class="{'inactive': isHandInactive }">
|
|
|
|
<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="card.idx"
|
|
style="border-radius: 6px"
|
|
@click="handlePlayCard(card.idx)">
|
|
|
|
<img :src="getCardImagePath(card.card)" width="120px" style="border-radius: 6px" :alt="card.card"/>
|
|
</div>
|
|
</div>
|
|
|
|
<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));
|
|
}
|
|
},
|
|
handlePlayCard(cardidx) {
|
|
if(this.isAwaitingResponse) return
|
|
if(!canPlayCard) return
|
|
canPlayCard = false;
|
|
this.isAwaitingResponse = true
|
|
|
|
|
|
console.debug(`Playing card ${cardidx} 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 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) => {
|
|
this.isAwaitingResponse = false;
|
|
canPlayCard = true;
|
|
}
|
|
)
|
|
},
|
|
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%">
|
|
{{ player.tricks }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
|
|
methods: {
|
|
calculateNewScores(players, tricklist) {
|
|
const playercounts = new Map();
|
|
players.forEach(player => {
|
|
playercounts.set(player, 0)
|
|
});
|
|
|
|
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);
|
|
|
|
if (typeof globalThis.alertMessage === 'function') {
|
|
globalThis.alertMessage(`${playerwon} won the trick!`);
|
|
} else {
|
|
console.error("ALERT MESSAGE FAILED: globalThis.alertMessage is NOT a function.");
|
|
}
|
|
}
|
|
}
|
|
};
|
|
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;
|
|
}
|
|
|
|
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: [],
|
|
};
|
|
},
|
|
|
|
template: `
|
|
<main class="lobby-background vh-100" id="lobbybackground">
|
|
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<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)
|
|
}
|
|
}
|
|
};
|
|
|
|
function requestCardEvent(eventData) {
|
|
const player = eventData.player;
|
|
const handElement = $('#card-slide')
|
|
handElement.removeClass('inactive');
|
|
canPlayCard = true;
|
|
}
|
|
|
|
|
|
function receiveGameStateChange(eventData) {
|
|
const content = eventData.content;
|
|
const title = eventData.title || 'Knockout Whist';
|
|
const url = eventData.url || null;
|
|
|
|
exchangeBody(content, title, url);
|
|
}
|
|
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 receiveRoundEndEvent(eventData) {
|
|
const player = eventData.player
|
|
const tricks = eventData.tricks
|
|
alertMessage(`${player} won this round with ${tricks} tricks!`)
|
|
}
|
|
let playerHandApp = null;
|
|
let scoreBoardApp = null;
|
|
let gameInfoApp = null;
|
|
let trickDisplayApp = null;
|
|
let turnApp = null;
|
|
globalThis.initGameVueComponents = function() {
|
|
// --- 1. CLEANUP (If already initialized) ---
|
|
if (playerHandApp) {
|
|
console.log("Updating Hand View. Unmounting previous instance.");
|
|
|
|
playerHandApp.unmount();
|
|
|
|
globalThis.updatePlayerHand = undefined;
|
|
|
|
onEvent("ReceivedHandEvent", null);
|
|
}
|
|
|
|
// --- 2. INITIALIZATION/RE-INITIALIZATION ---
|
|
|
|
const app = Vue.createApp(PlayerHandComponent);
|
|
|
|
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.");
|
|
}
|
|
|
|
// --- 3. Initialize 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.");
|
|
}
|
|
// --- 4. Initialize 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.");
|
|
}
|
|
|
|
// -- 5. Initialize 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.");
|
|
}
|
|
|
|
// --- 6. Initialize 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);
|
|
|
|
mountedLobby.updateLobbyData({
|
|
host: initialIsHost,
|
|
maxPlayers: initialMaxPlayers,
|
|
players: initialPlayers
|
|
});
|
|
|
|
globalThis.updateLobbyData = mountedLobby.updateLobbyData;
|
|
|
|
onEvent("LobbyUpdateEvent", globalThis.updateLobbyData);
|
|
|
|
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("RequestCardEvent", requestCardEvent)
|
|
onEvent("LeftEvent", receiveGameStateChange)
|
|
onEvent("KickEvent", receiveKickEvent)
|
|
onEvent("SessionClosed", receiveSessionClosedEvent)
|
|
onEvent("RoundEndEvent", receiveRoundEndEvent) |