+
+
-
+
+
@@ -499,18 +463,40 @@ const LobbyComponent = {
},
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';
@@ -518,77 +504,8 @@ function receiveGameStateChange(eventData) {
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 ? `
${user.name} (You)
- Remove` - : `${user.name}
-Remove
`
-
- newHtml += `
-
`
- })
- } else {
- players.forEach(user => {
-
- const inner = user.self ? `
-
-
-
-
- ${inner}
-
- ${user.name} (You)
` : `${user.name}
` - - newHtml += `
-
`
- })
- }
-
- 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!`)
+ //TODO: When alert is working, set an alert that shows how won the round and with how much tricks.
}
let playerHandApp = null;
let scoreBoardApp = null;
@@ -596,19 +513,7 @@ 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 ---
-
+ // Initializing PlayerHandComponent
const app = Vue.createApp(PlayerHandComponent);
playerHandApp = app;
@@ -622,7 +527,7 @@ globalThis.initGameVueComponents = function() {
console.error("FATAL ERROR: PlayerHandComponent mount failed. Check if #player-hand-container exists.");
}
- // --- 3. Initialize Scoreboard ---
+ // Initializing Scoreboard
if (scoreBoardApp) return
const app2 = Vue.createApp(ScoreBoardComponent)
@@ -638,7 +543,7 @@ globalThis.initGameVueComponents = function() {
} else {
console.error("FATAL ERROR: Scoreboard mount failed. Check if #score-table exists.");
}
- // --- 4. Initialize Gameinfo ---
+ // Initializing Gameinfo
if (gameInfoApp) return
const app3 = Vue.createApp(GameInfoComponent)
@@ -654,7 +559,7 @@ globalThis.initGameVueComponents = function() {
console.error("FATAL ERROR: GameInfo mount failed. Check if #score-table exists.");
}
- // -- 5. Initialize TrickCardContainer ---
+ // Initializing TrickCardContainer
if (trickDisplayApp) return;
const app4 = Vue.createApp(TrickDisplayComponent);
trickDisplayApp = app4;
@@ -669,7 +574,7 @@ globalThis.initGameVueComponents = function() {
console.error("FATAL ERROR: TrickDisplay mount failed. Check if #trick-cards-container exists.");
}
- // --- 6. Initialize TurnContainer ---
+ // Initializing TurnContainer
if (turnApp) return;
const app5 = Vue.createApp(TurnComponent)
turnApp = app5;
@@ -695,6 +600,7 @@ globalThis.initLobbyVueComponents = function(initialLobbyName, initialLobbyId, i
if (mountedLobby) {
mountedLobby.setInitialData(initialLobbyName, initialLobbyId);
+ //Damit beim erstmaligen Betreten der Lobby die Spieler etc. angezeigt werden.
mountedLobby.updateLobbyData({
host: initialIsHost,
maxPlayers: initialMaxPlayers,
@@ -702,9 +608,11 @@ globalThis.initLobbyVueComponents = function(initialLobbyName, initialLobbyId, i
});
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.");
@@ -740,8 +648,6 @@ function handleNewRoundEvent(eventData) {
}
onEvent("GameStateChangeEvent", receiveGameStateChange)
-onEvent("RequestCardEvent", requestCardEvent)
onEvent("LeftEvent", receiveGameStateChange)
-onEvent("KickEvent", receiveKickEvent)
-onEvent("SessionClosed", receiveSessionClosedEvent)
+onEvent("RequestCardEvent", requestCardEvent)
onEvent("RoundEndEvent", receiveRoundEndEvent)
\ No newline at end of file
diff --git a/knockoutwhistweb/public/javascripts/interact.js b/knockoutwhistweb/public/javascripts/interact.js
index 3b4e5ea..c4bba34 100644
--- a/knockoutwhistweb/public/javascripts/interact.js
+++ b/knockoutwhistweb/public/javascripts/interact.js
@@ -1,7 +1,7 @@
-/*
function handlePlayCard(cardidx) {
+ //TODO: Needs implementation
}
-*/
+
function handleSkipDogLife(button) {
// TODO needs implementation
}
-
-
-
-
- ${inner}
-
-