From 5eb0eac39e7582b7e32ae3d35ec00f1e7a45a4ea Mon Sep 17 00:00:00 2001
From: LQ63 <lkhermann@web.de>
Date: Thu, 4 Dec 2025 01:32:17 +0100
Subject: [PATCH 1/4] feat(api): Vue

Changed ingame JQuery to Vue Components, Started changing lobby to vue components
---
 .../app/views/ingame/ingame.scala.html        | 117 +--
 .../app/views/lobby/lobby.scala.html          | 132 +--
 knockoutwhistweb/app/views/main.scala.html    |   2 +
 knockoutwhistweb/public/javascripts/events.js | 868 +++++++++++++-----
 .../public/javascripts/interact.js            |  68 +-
 5 files changed, 693 insertions(+), 494 deletions(-)

diff --git a/knockoutwhistweb/app/views/ingame/ingame.scala.html b/knockoutwhistweb/app/views/ingame/ingame.scala.html
index 7c342e2..b2b39b8 100644
--- a/knockoutwhistweb/app/views/ingame/ingame.scala.html
+++ b/knockoutwhistweb/app/views/ingame/ingame.scala.html
@@ -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 id="score-table"></div>
+
+
+                    <div class="d-flex justify-content-center g-3 mb-5" id="trick-cards-container"></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>
-                    }
 
-                    <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>
diff --git a/knockoutwhistweb/app/views/lobby/lobby.scala.html b/knockoutwhistweb/app/views/lobby/lobby.scala.html
index 769f3e8..e9f90a8 100644
--- a/knockoutwhistweb/app/views/lobby/lobby.scala.html
+++ b/knockoutwhistweb/app/views/lobby/lobby.scala.html
@@ -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>
\ No newline at end of file
diff --git a/knockoutwhistweb/app/views/main.scala.html b/knockoutwhistweb/app/views/main.scala.html
index a24d416..c7e35ec 100644
--- a/knockoutwhistweb/app/views/main.scala.html
+++ b/knockoutwhistweb/app/views/main.scala.html
@@ -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
diff --git a/knockoutwhistweb/public/javascripts/events.js b/knockoutwhistweb/public/javascripts/events.js
index 09af240..e968857 100644
--- a/knockoutwhistweb/public/javascripts/events.js
+++ b/knockoutwhistweb/public/javascripts/events.js
@@ -1,162 +1,498 @@
 var canPlayCard = false;
-
-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>
+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>
-    </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;
+    `,
+    data() {
+        return {
+            alerts: []
+        };
+    },
+    methods: {
+        alertMessage(message) {
+            const alertData = {
+                id: Date.now(),
+                message: message,
+                isVisible: true,
+            };
+            this.alerts.push(alertData);
 
-    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 class="btn btn-outline-light p-0 border-0 shadow-none" 
-                                 data-card-id="${idx}" 
-                                 style="border-radius: 6px" 
-                                 onclick="handlePlayCard(this, '${dog}')">
-                                
-                                <img src="/assets/images/cards/${cardS}.png" width="120px" style="border-radius: 6px" alt="${cardS}"/>
-                            </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>
-                    `;
-    }
-    handElement.html(newHtml);
-}
-function newRoundEvent(eventData) {
-    const trumpsuit = eventData.trumpsuit;
-    const players = eventData.players;
-
-    const tableElement = $('#score-table-body');
-
-
-    let tablehtml = `
-        <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>
-    `;
-
-    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 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)
+            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 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>
-                                    <div style="width: 50%">
-                                    ${playercounts.get(player)}
+    }
+};
+
+
+
+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>
-        `
-    });
-    alertMessage(`${winner} won the trick!`)
-    tricktable.html(newHtml);
+                            </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() {
+
+        }
+    }
+};
 
-}
-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)
-}
 function requestCardEvent(eventData) {
     const player = eventData.player;
     const handElement = $('#card-slide')
@@ -172,45 +508,6 @@ 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;
@@ -278,56 +575,163 @@ function receiveSessionClosedEvent(eventData) {
         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!`)
 }
-onEvent("ReceivedHandEvent", receiveHandEvent)
+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("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)
-
-globalThis.alertMessage = alertMessage
\ No newline at end of file
+onEvent("RoundEndEvent", receiveRoundEndEvent)
\ No newline at end of file
diff --git a/knockoutwhistweb/public/javascripts/interact.js b/knockoutwhistweb/public/javascripts/interact.js
index 59cdc4c..0876720 100644
--- a/knockoutwhistweb/public/javascripts/interact.js
+++ b/knockoutwhistweb/public/javascripts/interact.js
@@ -1,61 +1,6 @@
-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) {}
+*/
 function handleSkipDogLife(button) {
     // TODO needs implementation
 }
@@ -79,4 +24,9 @@ function handleKickPlayer(playerId) {
 }
 function handleReturnToLobby() {
     sendEvent("ReturnToLobby")
-}
\ No newline at end of file
+}
+
+globalThis.startGame = startGame
+globalThis.handleTrumpSelection = handleTrumpSelection
+globalThis.handleKickPlayer = handleKickPlayer
+globalThis.handleReturnToLobby = handleReturnToLobby
\ No newline at end of file
-- 
2.52.0


From 717bec80ac39017334b530cb1a73e600a5a3ea41 Mon Sep 17 00:00:00 2001
From: LQ63 <lkhermann@web.de>
Date: Thu, 4 Dec 2025 01:42:35 +0100
Subject: [PATCH 2/4] feat(api): Vue

Added functionality to Lobby in Vue
---
 knockoutwhistweb/public/javascripts/events.js   | 7 +++++--
 knockoutwhistweb/public/javascripts/interact.js | 3 ++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/knockoutwhistweb/public/javascripts/events.js b/knockoutwhistweb/public/javascripts/events.js
index e968857..80eb8e6 100644
--- a/knockoutwhistweb/public/javascripts/events.js
+++ b/knockoutwhistweb/public/javascripts/events.js
@@ -487,8 +487,11 @@ const LobbyComponent = {
         startGame() {
             globalThis.startGame()
         },
-        leaveGame() {
-
+        leaveGame(gameId) {
+            //TODO: Needs implementation
+        },
+        handleKickPlayer(playerId) {
+            globalThis.handleKickPlayer(playerId)
         }
     }
 };
diff --git a/knockoutwhistweb/public/javascripts/interact.js b/knockoutwhistweb/public/javascripts/interact.js
index 0876720..3b4e5ea 100644
--- a/knockoutwhistweb/public/javascripts/interact.js
+++ b/knockoutwhistweb/public/javascripts/interact.js
@@ -1,5 +1,6 @@
 /*
-function handlePlayCard(cardidx) {}
+function handlePlayCard(cardidx) {
+}
 */
 function handleSkipDogLife(button) {
     // TODO needs implementation
-- 
2.52.0


From ecb9d91991bac0d207b2b0c6dd6085c497753924 Mon Sep 17 00:00:00 2001
From: LQ63 <lkhermann@web.de>
Date: Thu, 4 Dec 2025 01:53:25 +0100
Subject: [PATCH 3/4] feat(ui): Vue

Added wiggle animation when you want to play a card that you aren't allowed to.
---
 knockoutwhistweb/public/javascripts/events.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/knockoutwhistweb/public/javascripts/events.js b/knockoutwhistweb/public/javascripts/events.js
index 80eb8e6..7836265 100644
--- a/knockoutwhistweb/public/javascripts/events.js
+++ b/knockoutwhistweb/public/javascripts/events.js
@@ -59,8 +59,7 @@ const PlayerHandComponent = {
     },
     computed: {
         isHandInactive() {
-            console.log("isHandInactive got executed" + !canPlayCard)
-            return !canPlayCard
+            //TODO: Needs implementation
         }
     },
     template: `
@@ -122,6 +121,8 @@ const PlayerHandComponent = {
                 easing: 'ease-in-out',
                 fill: 'forwards'
             };
+            const targetButton = this.$el.querySelector(`[data-card-id="${cardidx}"]`);
+            const cardElement = targetButton ? targetButton.closest('.handcard') : null;
 
             const payload = {
                 cardindex: cardidx.toString(),
@@ -138,8 +139,14 @@ const PlayerHandComponent = {
                 }
             ).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;
+
                 }
             )
         },
-- 
2.52.0


From 2bd5feaaab778d9d88590b85c820a34ed148001d Mon Sep 17 00:00:00 2001
From: LQ63 <lkhermann@web.de>
Date: Thu, 4 Dec 2025 02:26:02 +0100
Subject: [PATCH 4/4] feat(ui): Modals vue

Readded modals with vue syntax. Removed not working alert component. Cleaned up.
---
 knockoutwhistweb/public/javascripts/events.js | 216 +++++-------------
 .../public/javascripts/interact.js            |   4 +-
 2 files changed, 63 insertions(+), 157 deletions(-)

diff --git a/knockoutwhistweb/public/javascripts/events.js b/knockoutwhistweb/public/javascripts/events.js
index 7836265..7a3de21 100644
--- a/knockoutwhistweb/public/javascripts/events.js
+++ b/knockoutwhistweb/public/javascripts/events.js
@@ -1,54 +1,4 @@
 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 {
@@ -230,11 +180,7 @@ const ScoreBoardComponent = {
 
             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.");
-            }
+
         }
     }
 };
@@ -370,13 +316,23 @@ const LobbyComponent = {
             isHost: false,
             maxPlayers: 0,
             players: [],
+            showKickedModal: false,
+            kickedEventData: null,
+            showSessionClosedModal: false,
+            sessionClosedEventData: null,
         };
     },
 
     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 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">
@@ -384,12 +340,19 @@ const LobbyComponent = {
                         </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 class="modal fade" data-backdrop="static" data-keyboard="false" data-focus="true" id="sessionClosed" tabindex="-1" role="dialog" aria-labelledby="sessionClosedModalTitle">
+
+            <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">
@@ -397,6 +360,7 @@ const LobbyComponent = {
                         </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>
@@ -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 ? `<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!`)
+    //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
 }
-- 
2.52.0