ci: bump version to v4.9.0

Reviewed-on: #102
Co-authored-by: Janis <janis.e.20@gmx.de>
Co-committed-by: Janis <janis.e.20@gmx.de>

.gitmodules

@@ -2,3 +2,8 @@
 	path = knockoutwhist
 	branch = main
 	url = https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist.git
+
+[submodule "knockoutwhistfrontend"]
+	path = knockoutwhistfrontend
+	branch = main
+	url = https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Frontend.git

CHANGELOG.md

@@ -149,3 +149,73 @@
 
 * **api:** Implement received hand event handling and UI updates ([#83](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/83)) ([52e5033](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/52e5033afca344ae40a644196555a9655913710a)), closes [#76](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/76)
 * **base:** Fixed logic for websockets and added GameStateEvent. Might've caused instability on other feature branches! ([#84](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/84)) ([b81bb3d](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/b81bb3d0aeb8500a9d7417a10e24e7f8a17d71d2))
+##  (2025-11-26)
+
+### Features
+
+* **api:** Implemented card played event via websocket ([#85](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/85)) ([3c0828f](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/3c0828fdbeb507706b86f1662476c46e760533e4))
+##  (2025-11-26)
+
+### Features
+
+* **api:** Implemented session closed and kick event via websocket ([#87](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/87)) ([1ef5e8a](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/1ef5e8a72fdf8a3d1ae624c8c3d7c6595017bc6f))
+##  (2025-12-01)
+
+### Features
+
+* **api:** Implemented turn event via websocket ([#86](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/86)) ([2aee79b](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/2aee79bb6887008397aa0780d1d74ce96af1c202))
+* GameState to Title Mapping BAC-1 ([#92](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/92)) ([6e17328](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/6e17328846745375482c97383b143d86a86e7f32))
+* **ui:** Implement countless feature using the SJWP ([#89](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/89)) ([1f96290](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/1f962903712163543fd4f98e696be5e7e29d88a6))
+* **ui:** Popups ([#91](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/91)) ([0037820](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/003782090509bca1c5022c308231b7560dd9b23d))
+
+### Bug Fixes
+
+* **api:** Fixed websocket routing ([#88](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/88)) ([46c96d4](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/46c96d4ceb935ac91fc515a1fdaef195e5ebc0a7))
+* **api:** fixes - reimplemented animations ([#90](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/90)) ([cfcd967](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/cfcd967ce08ecf07f3f06826c337f684eb3b0c5f))
+##  (2025-12-01)
+
+### Features
+
+* **api:** BAC-10 Websockets - Kick Users ([#93](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/93)) ([0541bb5](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/0541bb58d19efd98d134b3d0412f39b4b1001783))
+##  (2025-12-01)
+
+### Features
+
+* **api:** BAC-11 Websocket - Return to Lobby ([#94](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/94)) ([fd2467a](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/fd2467a9ea22dca64d5152a5a3e6db86d9a6f345))
+##  (2025-12-01)
+
+### Bug Fixes
+
+* **api:** BAC-23 Remove old polling code ([#95](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/95)) ([a55f0b4](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/a55f0b4b6164a47e3524422650ed99d10f9c8b0d))
+##  (2025-12-01)
+
+### Bug Fixes
+
+* FRO-6 Websocket Close Handle ([#96](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/96)) ([3585566](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/358556612ec74601c8b31125e4e65f750abf8c4c))
+##  (2025-12-03)
+
+### Features
+
+* **ui:** FRO-7 Endscreen ([#97](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/97)) ([d57e6ef](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/d57e6efa985ca07c32f9f54595fe7393dbdf4d8a))
+##  (2025-12-03)
+##  (2025-12-03)
+##  (2025-12-04)
+
+### Bug Fixes
+
+* BAC-25 Race Condition: Websocket Promises ([#99](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/99)) ([f847424](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/f847424b9cea423ace5661d1efb6e4f01483c655))
+##  (2025-12-04)
+
+### Features
+
+* FRO-3 FRO-4 Added vue compontents to ingame and lobby ([#100](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/100)) ([194df56](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/194df5691ccda1c21ebe9157c4396a4a21aa921d))
+##  (2025-12-05)
+
+### Bug Fixes
+
+* BAC-29 Implement Mappers for Common Classes ([#101](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/101)) ([270f44c](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/270f44cc1f3447ffcc33fb19a47c52391c69972b))
+##  (2025-12-06)
+
+### Features
+
+* BAC-30 Implement Jackson Mapping via DTOs ([#102](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/102)) ([8d697fd](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/8d697fd311478cf792b4631377de4522ecbda9f7))

knockoutwhistweb/app/assets/stylesheets/main.less

@@ -219,10 +219,10 @@ body {
 
 }
 
-#nextPlayers {
+#next-players-container {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   height: 0;
 
   p {
@@ -231,10 +231,6 @@ body {
   }
 }
 
-#invisible {
-  visibility: hidden;
-}
-
 #selecttrumpsuit {
   display: flex;
   flex-direction: column;

knockoutwhistweb/app/controllers/IngameController.scala

@@ -12,6 +12,7 @@ import play.api.*
 import play.api.libs.json.{JsValue, Json}
 import play.api.mvc.*
 import play.twirl.api.Html
+import util.GameUtil
 
 import java.util.UUID
 import javax.inject.*
@@ -33,7 +34,7 @@ class IngameController @Inject()(
           IngameController.returnInnerHTML(g, g.logic.getCurrentState, request.user)
         }
         if (results.isSuccess) {
-          Ok(views.html.main("In-Game - Knockout Whist")(results.get))
+          Ok(views.html.main("Knockout Whist - " + GameUtil.stateToTitle(g.logic.getCurrentState))(results.get))
         } else {
           InternalServerError(results.failed.get.getMessage)
         }
@@ -89,7 +90,7 @@ class IngameController @Inject()(
     val game = PodManager.getGame(gameId)
     val playerToKickUUID = UUID.fromString(playerToKick)
     val result = Try {
-      game.get.leaveGame(playerToKickUUID)
+      game.get.leaveGame(playerToKickUUID, true)
     }
     if (result.isSuccess) {
       Ok(Json.obj(
@@ -107,7 +108,7 @@ class IngameController @Inject()(
   def leaveGame(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
     val game = PodManager.getGame(gameId)
     val result = Try {
-      game.get.leaveGame(request.user.id)
+      game.get.leaveGame(request.user.id, false)
     }
     if (result.isSuccess) {
       Ok(Json.obj(

knockoutwhistweb/app/dto/GameInfoDTO.scala

@@ -0,0 +1,35 @@
+package dto
+
+import dto.subDTO.*
+import logic.game.GameLobby
+import model.users.User
+
+import scala.util.Try
+
+case class GameInfoDTO(
+                      gameId: String,
+                      self: Option[PlayerDTO],
+                      hand: Option[HandDTO],
+                      playerQueue: PlayerQueueDTO,
+                      currentTrick: Option[TrickDTO],
+                      currentRound: Option[RoundDTO]
+                      )
+
+object GameInfoDTO {
+
+  def apply(lobby: GameLobby, user: User): GameInfoDTO = {
+    val selfPlayer = Try {
+      Some(lobby.getPlayerByUser(user))
+    }.getOrElse(None)
+    
+    GameInfoDTO(
+      gameId = lobby.id,
+      self = selfPlayer.map(PlayerDTO(_)),
+      hand = selfPlayer.flatMap(_.currentHand()).map(HandDTO(_)),
+      playerQueue = PlayerQueueDTO(lobby.logic),
+      currentTrick = lobby.logic.getCurrentTrick.map(TrickDTO(_)),
+      currentRound = lobby.logic.getCurrentRound.map(RoundDTO(_))
+    )
+  }
+
+}

knockoutwhistweb/app/dto/LobbyInfoDTO.scala

@@ -0,0 +1,21 @@
+package dto
+
+import dto.subDTO.UserDTO
+import logic.game.GameLobby
+import model.users.User
+
+case class LobbyInfoDTO(users: List[UserDTO], self: UserDTO, maxPlayers: Int)
+
+object LobbyInfoDTO {
+
+  def apply(lobby: GameLobby, user: User): LobbyInfoDTO = {
+    val session = lobby.getUserSession(user.id)
+    
+    LobbyInfoDTO(
+      users = lobby.getPlayers.values.map(user => UserDTO(user)).toList,
+      self = UserDTO(session),
+      maxPlayers = lobby.maxPlayers,
+    )
+  }
+
+}

knockoutwhistweb/app/dto/TieInfoDTO.scala

@@ -0,0 +1,26 @@
+package dto
+
+import dto.subDTO.PlayerDTO
+import logic.game.GameLobby
+import model.users.User
+
+import scala.util.Try
+
+case class TieInfoDTO(currentPlayer: Option[PlayerDTO], self: Option[PlayerDTO], tiedPlayers: Seq[PlayerDTO], highestAmount: Int)
+
+object TieInfoDTO {
+
+  def apply(lobby: GameLobby, user: User): TieInfoDTO = {
+    val selfPlayer = Try {
+      Some(lobby.getPlayerByUser(user))
+    }.getOrElse(None)
+
+    TieInfoDTO(
+      currentPlayer = lobby.logic.playerTieLogic.currentTiePlayer().map(PlayerDTO.apply),
+      self = selfPlayer.map(PlayerDTO.apply),
+      tiedPlayers = lobby.logic.playerTieLogic.getTiedPlayers.map(PlayerDTO.apply),
+      highestAmount = lobby.logic.playerTieLogic.highestAllowedNumber()
+    )
+  }
+  
+}

knockoutwhistweb/app/dto/TrumpInfoDTO.scala

@@ -0,0 +1,29 @@
+package dto
+
+import dto.subDTO.{HandDTO, PlayerDTO}
+import logic.game.GameLobby
+import model.users.User
+
+import scala.util.Try
+
+case class TrumpInfoDTO(
+                       chooser: Option[PlayerDTO],
+                       self: Option[PlayerDTO],
+                       selfHand: Option[HandDTO],
+                       )
+
+object TrumpInfoDTO {
+
+  def apply(lobby: GameLobby, user: User): TrumpInfoDTO = {
+    val selfPlayer = Try {
+      Some(lobby.getPlayerByUser(user))
+    }.getOrElse(None)
+
+    TrumpInfoDTO(
+      chooser = lobby.logic.getTrumpPlayer.map(PlayerDTO(_)),
+      self = selfPlayer.map(PlayerDTO(_)),
+      selfHand = selfPlayer.flatMap(_.currentHand()).map(HandDTO(_))
+    )
+  }
+
+}

knockoutwhistweb/app/dto/WonInfoDTO.scala

@@ -0,0 +1,32 @@
+package dto
+
+import dto.subDTO.PodiumPlayerDTO
+import logic.game.GameLobby
+import model.users.User
+
+case class WonInfoDTO(
+                     winner: Option[PodiumPlayerDTO],
+                     allPlayers: Seq[PodiumPlayerDTO]
+                     )
+
+object WonInfoDTO {
+
+  def apply(lobby: GameLobby, user: User): WonInfoDTO = {
+    val matchImpl = lobby.logic.getCurrentMatch
+    if (matchImpl.isEmpty) {
+      throw new IllegalStateException("No current match available in game logic")
+    }
+    val allPlayersDTO: Seq[PodiumPlayerDTO] = matchImpl.get.totalplayers.map { player =>
+      PodiumPlayerDTO(lobby.logic, player)
+    }
+
+    val selfPlayerDTO = lobby.getPlayerByUser(user)
+    val winnerDTO = lobby.logic.getWinner
+
+    WonInfoDTO(
+      winner = winnerDTO.map(player => PodiumPlayerDTO(lobby.logic, player)),
+      allPlayers = allPlayersDTO
+    )
+  }
+
+}

knockoutwhistweb/app/dto/subDTO/CardDTO.scala

@@ -0,0 +1,23 @@
+package dto.subDTO
+
+import de.knockoutwhist.cards.Card
+import util.WebUIUtils
+
+case class CardDTO(identifier: String, path: String, idx: Int) {
+  
+  def toCard: Card = {
+    WebUIUtils.stringToCard(identifier)
+  }
+  
+}
+
+object CardDTO {
+  
+  def apply(card: Card, index: Int = 0): CardDTO = {
+    CardDTO(
+      identifier = WebUIUtils.cardtoString(card),
+      path = WebUIUtils.cardToPath(card),
+      idx = index
+    )
+  }
+}

knockoutwhistweb/app/dto/subDTO/HandDTO.scala

@@ -0,0 +1,15 @@
+package dto.subDTO
+
+import de.knockoutwhist.cards.Hand
+
+case class HandDTO(card: List[CardDTO])
+
+object HandDTO {
+  
+  def apply(hand: Hand): HandDTO = {
+    HandDTO(
+      card = hand.cards.zipWithIndex.map { case (card, idx) => CardDTO(card, idx) }
+    )
+  }
+  
+}

knockoutwhistweb/app/dto/subDTO/PlayerDTO.scala

@@ -0,0 +1,17 @@
+package dto.subDTO
+
+import de.knockoutwhist.player.AbstractPlayer
+
+case class PlayerDTO(id: String, name: String, dogLife: Boolean) 
+
+object PlayerDTO {
+  
+  def apply(player: AbstractPlayer): PlayerDTO = {
+    PlayerDTO(
+      id = player.id.toString,
+      name = player.name,
+      dogLife = player.isInDogLife
+    )
+  }
+  
+}

knockoutwhistweb/app/dto/subDTO/PlayerQueueDTO.scala

@@ -0,0 +1,19 @@
+package dto.subDTO
+
+import de.knockoutwhist.control.GameLogic
+
+case class PlayerQueueDTO(currentPlayer: Option[PlayerDTO], queue: Seq[PlayerDTO])
+
+object PlayerQueueDTO {
+
+  def apply(logic: GameLogic): PlayerQueueDTO = {
+    val currentPlayerDTO = logic.getCurrentPlayer.map(PlayerDTO(_))
+    val queueDTO = logic.getPlayerQueue.map(_.duplicate().flatMap(player => Some(PlayerDTO(player))).toSeq)
+    if (queueDTO.isEmpty) {
+      PlayerQueueDTO(currentPlayerDTO, Seq.empty)
+    } else {
+      PlayerQueueDTO(currentPlayerDTO, queueDTO.get)
+    }
+  }
+
+}

knockoutwhistweb/app/dto/subDTO/PodiumPlayerDTO.scala

@@ -0,0 +1,47 @@
+package dto.subDTO
+
+import de.knockoutwhist.control.GameLogic
+import de.knockoutwhist.player.AbstractPlayer
+import de.knockoutwhist.rounds.Match
+
+case class PodiumPlayerDTO(
+                          player: PlayerDTO,
+                          position: Int,
+                          roundsWon: Int,
+                          tricksWon: Int
+                          )
+
+object PodiumPlayerDTO {
+
+  def apply(gameLogic: GameLogic, player: AbstractPlayer): PodiumPlayerDTO = {
+    val matchImplOpt = gameLogic.getCurrentMatch
+    if (matchImplOpt.isEmpty) {
+      throw new IllegalStateException("No current match available in game logic")
+    }
+    val matchImpl: Match = matchImplOpt.get
+    var roundsWon = 0
+    var tricksWon = 0
+    for (round <- matchImpl.roundlist) {
+      if (round.winner.contains(player)) {
+        roundsWon += 1
+      }
+      for (trick <- round.tricklist) {
+        if (trick.winner.contains(player)) {
+          tricksWon += 1
+        }
+      }
+    }
+
+    PodiumPlayerDTO(
+      player = PlayerDTO(player),
+      position = if (gameLogic.getWinner.contains(player)) {
+        1
+      } else {
+        2
+      },
+      roundsWon = roundsWon,
+      tricksWon = tricksWon
+    )
+  }
+
+}

knockoutwhistweb/app/dto/subDTO/RoundDTO.scala

@@ -0,0 +1,18 @@
+package dto.subDTO
+
+import de.knockoutwhist.cards.Card
+import de.knockoutwhist.cards.CardValue.Ace
+
+case class RoundDTO(trumpSuit: CardDTO, firstRound: Boolean, tricklist: List[TrickDTO])
+
+object RoundDTO {
+
+  def apply(round: de.knockoutwhist.rounds.Round): RoundDTO = {
+    RoundDTO(
+      trumpSuit = CardDTO(Card(Ace, round.trumpSuit)),
+      firstRound = round.firstRound,
+      tricklist = round.tricklist.map(trick => TrickDTO(trick))
+    )
+  }
+
+}

knockoutwhistweb/app/dto/subDTO/TrickDTO.scala

@@ -0,0 +1,17 @@
+package dto.subDTO
+
+import de.knockoutwhist.rounds.Trick
+
+case class TrickDTO(cards: Map[PlayerDTO, CardDTO], firstCard: Option[CardDTO], winner: Option[PlayerDTO])
+
+object TrickDTO {
+
+  def apply(trick: Trick): TrickDTO = {
+    TrickDTO(
+      cards = trick.cards.map { case (card, player) => PlayerDTO(player) -> CardDTO(card) },
+      firstCard = trick.firstCard.map(card => CardDTO(card)),
+      winner = trick.winner.map(player => PlayerDTO(player))
+    )
+  }
+
+}

knockoutwhistweb/app/dto/subDTO/UserDTO.scala

@@ -0,0 +1,17 @@
+package dto.subDTO
+
+import model.sessions.UserSession
+
+case class UserDTO(id: String, username: String, host: Boolean = false)
+
+object UserDTO {
+
+  def apply(user: UserSession): UserDTO = {
+    UserDTO(
+      id = user.id.toString,
+      username = user.name,
+      host = user.host
+    )
+  }
+
+}

knockoutwhistweb/app/events/KickEvent.scala

@@ -0,0 +1,9 @@
+package events
+
+import model.users.User
+
+case class KickEvent(user: User) extends UserEvent(user) {
+  
+  override def id: String = "KickEvent"
+
+}

knockoutwhistweb/app/events/LeftEvent.scala

@@ -0,0 +1,9 @@
+package events
+
+import model.users.User
+
+case class LeftEvent(user: User) extends UserEvent(user) {
+
+  override def id: String = "LeftEvent"
+  
+}

knockoutwhistweb/app/events/LobbyUpdateEvent.scala

@@ -0,0 +1,9 @@
+package events
+
+import de.knockoutwhist.utils.events.SimpleEvent
+
+case class LobbyUpdateEvent() extends SimpleEvent {
+
+  override def id: String = "LobbyUpdateEvent"
+  
+}

knockoutwhistweb/app/events/UserEvent.scala

@@ -0,0 +1,12 @@
+package events
+
+import de.knockoutwhist.utils.events.SimpleEvent
+import model.users.User
+
+import java.util.UUID
+
+abstract class UserEvent(user: User) extends SimpleEvent {
+
+  def userId: UUID = user.id
+  
+}

knockoutwhistweb/app/logic/game/GameLobby.scala

@@ -10,15 +10,17 @@ import de.knockoutwhist.player.Playertype.HUMAN
 import de.knockoutwhist.player.{AbstractPlayer, PlayerFactory}
 import de.knockoutwhist.rounds.{Match, Round, Trick}
 import de.knockoutwhist.utils.events.{EventListener, SimpleEvent}
+import events.{KickEvent, LeftEvent, LobbyUpdateEvent, UserEvent}
 import exceptions.*
 import logic.PodManager
 import model.sessions.{InteractionType, UserSession}
 import model.users.User
 import play.api.libs.json.{JsObject, Json}
 
-import java.util.UUID
+import java.util.{Timer, TimerTask, UUID}
 import scala.collection.mutable
 import scala.collection.mutable.ListBuffer
+import scala.util.Try
 
 class GameLobby private(
                          val logic: GameLogic,
@@ -44,7 +46,7 @@ class GameLobby private(
     )
     users += (user.id -> userSession)
     PodManager.registerUserToGame(user, id)
-    //TODO : transmit Lobby Update transmitToAll()
+    logic.invoke(LobbyUpdateEvent())
     userSession
   }
 
@@ -52,6 +54,8 @@ class GameLobby private(
     event match {
       case event: PlayerEvent =>
         users.get(event.playerId).foreach(session => session.updatePlayer(event))
+      case event: UserEvent =>
+        users.get(event.userId).foreach(session => session.updatePlayer(event))
       case event: GameStateChangeEvent =>
         if (event.oldState == MainMenu && event.newState == Lobby) {
           return
@@ -93,8 +97,9 @@ class GameLobby private(
    * Remove the user from the game lobby.
    *
    * @param user the user who wants to leave the game.
+   * @param kicked whether the user was kicked or left voluntarily.
    */
-  def leaveGame(userId: UUID): Unit = {
+  def leaveGame(userId: UUID, kicked: Boolean): Unit = {
     val sessionOpt = users.get(userId)
     if (sessionOpt.isEmpty) {
       throw new NotInThisGameException("You are not in this game!")
@@ -105,16 +110,14 @@ class GameLobby private(
       PodManager.removeGame(id)
       return
     }
-    sessionOpt.get.websocketActor.foreach(act => act.transmitJsonToClient(Json.obj(
+    if (kicked) {
-      "id" -> "-1",
+      logic.invoke(KickEvent(sessionOpt.get.user))
-      "event" -> "SessionClosed",
+    } else {
-      "data" -> Json.obj(
+      logic.invoke(LeftEvent(sessionOpt.get.user))
-        "reason" -> "You left the game (or got kicked)."
+    }
-      )
-    )))
     users.remove(userId)
     PodManager.unregisterUserFromGame(sessionOpt.get.user)
-    //TODO: transmit Lobby Update transmitToAll()
+    logic.invoke(LobbyUpdateEvent())
   }
 
   /**
@@ -275,6 +278,37 @@ class GameLobby private(
   def getUsers: Set[User] = {
     users.values.map(d => d.user).toSet
   }
+  def getFinalRanking: List[(String, (Int, Int))] = {
+    Try {
+      val match1 = getMatch
+      if (!match1.isOver) {
+        List.empty
+      } else {
+        val winnerName = logic.getWinner.get.name
+
+        val allPlayerNames = match1.totalplayers.map(_.name)
+        val roundlist = match1.roundlist
+
+        val playerMetrics: Map[String, (Int, Int)] = allPlayerNames.map { name =>
+          val roundsWon = roundlist.count { round =>
+            round.winner.exists(_.name == name)
+          }
+          val totalTricksWon = roundlist.flatMap(_.tricklist).count { trick =>
+            trick.winner.exists(_.name == name)
+          }
+          name -> (roundsWon, totalTricksWon)
+        }.toMap
+
+        val winnerMetrics = playerMetrics(winnerName)
+        val remainingPlayersMetrics = playerMetrics.view.filterKeys(_ != winnerName).toList
+
+        val sortedRemainingPlayers = remainingPlayersMetrics.sortBy { case (_, (rounds, tricks)) =>
+          (-rounds, -tricks)
+        }
+        (winnerName, winnerMetrics) :: sortedRemainingPlayers
+      }
+    }.getOrElse(List())
+  }
 
   private def transmitToAll(event: JsObject): Unit = {
     users.values.foreach(session => {

knockoutwhistweb/app/model/sessions/UserSession.scala

@@ -4,7 +4,7 @@ import de.knockoutwhist.events.player.{RequestCardEvent, RequestTieChoiceEvent,
 import de.knockoutwhist.utils.events.SimpleEvent
 import logic.game.GameLobby
 import model.users.User
-import play.api.libs.json.JsObject
+import play.api.libs.json.{JsObject, JsValue}
 
 import java.util.UUID
 import java.util.concurrent.locks.ReentrantLock
@@ -26,6 +26,7 @@ class UserSession(val user: User, val host: Boolean, val gameLobby: GameLobby) e
         else canInteract = Some(InteractionType.Card)
       case _ =>
     }
+    websocketActor.foreach(_.solveRequests())
     websocketActor.foreach(_.transmitEventToClient(event))
   }
 
@@ -38,15 +39,42 @@ class UserSession(val user: User, val host: Boolean, val gameLobby: GameLobby) e
   }
 
   def handleWebResponse(eventType: String, data: JsObject): Unit = {
-    lock.lock()
-    Try {
     eventType match {
-        case "Ping" =>
+      case "ping" =>
         // No action needed for Ping
         ()
+      case "StartGame" =>
+        gameLobby.startGame(user)
+      case "PlayCard" =>
+        val maybeCardIndex: Option[String] = (data \ "cardindex").asOpt[String]
+        maybeCardIndex match {
+          case Some(index) =>
+            val session = gameLobby.getUserSession(user.id)
+            gameLobby.playCard(session, index.toInt)
+          case None =>
+            println("Card Index not found or is not a number.")
         }
+      case "PickTrumpsuit" =>
+        val maybeSuitIndex: Option[Int] = (data \ "suitIndex").asOpt[Int]
+        maybeSuitIndex match {
+          case Some(index) =>
+            val session = gameLobby.getUserSession(user.id)
+            gameLobby.selectTrump(session, index)
+          case None =>
+            println("Card Index not found or is not a number.")
+        }
+      case "KickPlayer" =>
+        val maybePlayerId: Option[String] = (data \ "playerId").asOpt[String]
+        maybePlayerId match {
+          case Some(id) =>
+            val playerUUID = UUID.fromString(id)
+            gameLobby.leaveGame(playerUUID, true)
+          case None =>
+            println("Player ID not found or is not a valid UUID.")
+        }
+      case "ReturnToLobby" =>
+        gameLobby.returnToLobby(this)
     }
-    lock.unlock()
   }
 
 }

knockoutwhistweb/app/model/sessions/UserWebsocketActor.scala

@@ -5,6 +5,7 @@ import org.apache.pekko.actor.{Actor, ActorRef}
 import play.api.libs.json.{JsObject, JsValue, Json}
 import util.WebsocketEventMapper
 
+import scala.collection.mutable
 import scala.util.{Failure, Success, Try}
 
 class UserWebsocketActor(
@@ -12,6 +13,8 @@ class UserWebsocketActor(
                           session: UserSession
                         ) extends Actor {
 
+  private val requests: mutable.Map[String, String] = mutable.Map()
+
   {
     session.lock.lock()
     if (session.websocketActor.isDefined) {
@@ -48,12 +51,14 @@ class UserWebsocketActor(
   }
 
   private def handle(json: JsValue): Unit = {
+    session.lock.lock()
     val idOpt = (json \ "id").asOpt[String]
     if (idOpt.isEmpty) {
       transmitJsonToClient(Json.obj(
         "status" -> "error",
         "error" -> "Missing 'id' field"
       ))
+      session.lock.unlock()
       return
     }
     val id = idOpt.get
@@ -65,17 +70,25 @@ class UserWebsocketActor(
         "status" -> "error",
         "error" -> "Missing 'event' field"
       ))
+      session.lock.unlock()
       return
     }
     val statusOpt = (json \ "status").asOpt[String]
     if (statusOpt.isDefined) {
+      session.lock.unlock()
       return
     }
     val event = eventOpt.get
     val data = (json \ "data").asOpt[JsObject].getOrElse(Json.obj())
+    requests += (id -> event)
     val result = Try {
       session.handleWebResponse(event, data)
     }
+    if (!requests.contains(id)) {
+      session.lock.unlock()
+      return
+    }
+    requests -= id
     if (result.isSuccess) {
       transmitJsonToClient(Json.obj(
         "id" -> id,
@@ -90,6 +103,7 @@ class UserWebsocketActor(
         "error" -> result.failed.get.getMessage
       ))
     }
+    session.lock.unlock()
   }
 
   def transmitJsonToClient(jsonObj: JsValue): Unit = {
@@ -100,4 +114,20 @@ class UserWebsocketActor(
     transmitJsonToClient(WebsocketEventMapper.toJson(event, session))
   }
 
+  def solveRequests(): Unit = {
+    if (!session.lock.isHeldByCurrentThread)
+      return;
+    if (requests.isEmpty)
+      return;
+    val pendingRequests = requests.toMap
+    requests.clear()
+    pendingRequests.foreach { case (id, event) =>
+      transmitJsonToClient(Json.obj(
+        "id" -> id,
+        "event" -> event,
+        "status" -> "success"
+      ))
+    }
+  }
+
 }

knockoutwhistweb/app/model/users/User.scala

@@ -1,5 +1,6 @@
 package model.users
 
+
 import java.util.UUID
 
 case class User(
@@ -16,5 +17,4 @@ case class User(
   private def withPasswordHash(newPasswordHash: String): User = {
     this.copy(passwordHash = newPasswordHash)
   }
-
 }

knockoutwhistweb/app/util/GameUtil.scala

@@ -1,5 +1,8 @@
 package util
 
+import de.knockoutwhist.control.GameState
+import de.knockoutwhist.control.GameState.{FinishedMatch, InGame, Lobby, MainMenu, SelectTrump, TieBreak}
+
 import scala.util.Random
 
 object GameUtil {
@@ -26,4 +29,15 @@ object GameUtil {
     code.toString()
   }
   
+  def stateToTitle(gameState: GameState): String = {
+    gameState match {
+      case Lobby => "Lobby"
+      case MainMenu => "Main Menu"
+      case InGame => "In Game"
+      case SelectTrump => "Select Trump"
+      case TieBreak => "Tie Break"
+      case FinishedMatch => "Finished Match"
+    }
+  }
+
 }

knockoutwhistweb/app/util/WebUIUtils.scala

@@ -1,18 +1,22 @@
 package util
 
-import de.knockoutwhist.cards.{Card, Hand}
 import de.knockoutwhist.cards.CardValue.*
 import de.knockoutwhist.cards.Suit.{Clubs, Diamonds, Hearts, Spades}
+import de.knockoutwhist.cards.{Card, Hand}
 import play.api.libs.json.{JsArray, Json}
 import play.twirl.api.Html
 import scalafx.scene.image.Image
 
 object WebUIUtils {
   def cardtoImage(card: Card): Html = {
-    views.html.render.card.apply(f"images/cards/${cardtoString(card)}.png")(card.toString)
+    views.html.render.card.apply(cardToPath(card))(card.toString)
   }
   
-  def cardtoString(card: Card) = {
+  def cardToPath(card: Card): String = {
+    f"images/cards/${cardtoString(card)}.png"
+  }
+
+  def cardtoString(card: Card): String = {
     val s = card.suit match {
       case Spades => "S"
       case Hearts => "H"
@@ -37,6 +41,31 @@ object WebUIUtils {
     f"$cv$s"
   }
   
+  def stringToCard(cardStr: String): Card = {
+    val cv = cardStr.charAt(0) match {
+      case 'A' => Ace
+      case 'K' => King
+      case 'Q' => Queen
+      case 'J' => Jack
+      case 'T' => Ten
+      case '9' => Nine
+      case '8' => Eight
+      case '7' => Seven
+      case '6' => Six
+      case '5' => Five
+      case '4' => Four
+      case '3' => Three
+      case '2' => Two
+    }
+    val s = cardStr.charAt(1) match {
+      case 'S' => Spades
+      case 'H' => Hearts
+      case 'C' => Clubs
+      case 'D' => Diamonds
+    }
+    Card(cv, s)
+  }
+
   /**
    * Map a Hand to a JsArray of cards
    * Per card it has the string and the index in the hand

knockoutwhistweb/app/util/WebsocketEventMapper.scala

@@ -1,46 +1,76 @@
 package util
 
+import de.knockoutwhist.control.GameState
+import de.knockoutwhist.control.GameState.{FinishedMatch, InGame, Lobby, SelectTrump, TieBreak}
 import de.knockoutwhist.utils.events.SimpleEvent
-import logic.game.GameLobby
+import dto.subDTO.{CardDTO, HandDTO, PlayerDTO, PlayerQueueDTO, PodiumPlayerDTO, RoundDTO, TrickDTO, UserDTO}
+import dto.{GameInfoDTO, LobbyInfoDTO, TieInfoDTO, TrumpInfoDTO, WonInfoDTO}
 import model.sessions.UserSession
-import play.api.libs.json.{JsValue, Json}
+import play.api.libs.json.{JsValue, Json, OFormat}
 import tools.jackson.databind.json.JsonMapper
 import tools.jackson.module.scala.ScalaModule
-import util.mapper.{GameStateEventMapper, ReceivedHandEventMapper, SimpleEventMapper}
+import util.mapper.*
 
 object WebsocketEventMapper {
 
-  private val scalaModule = ScalaModule.builder()
+  implicit val cardFormat: OFormat[CardDTO] = Json.format[CardDTO]
-    .addAllBuiltinModules()
+  implicit val handFormat: OFormat[HandDTO] = Json.format[HandDTO]
-    .supportScala3Classes(true)
+  implicit val playerFormat: OFormat[PlayerDTO] = Json.format[PlayerDTO]
-    .build()
+  implicit val queueFormat: OFormat[PlayerQueueDTO] = Json.format[PlayerQueueDTO]
+  implicit val podiumPlayerFormat: OFormat[PodiumPlayerDTO] = Json.format[PodiumPlayerDTO]
+  implicit val roundFormat: OFormat[RoundDTO] = Json.format[RoundDTO]
+  implicit val trickFormat: OFormat[TrickDTO] = Json.format[TrickDTO]
+  implicit val userFormat: OFormat[UserDTO] = Json.format[UserDTO]
 
-  private val mapper = JsonMapper.builder().addModule(scalaModule).build()
+  implicit val gameInfoDTOFormat: OFormat[GameInfoDTO] = Json.format[GameInfoDTO]
+  implicit val lobbyFormat: OFormat[LobbyInfoDTO] = Json.format[LobbyInfoDTO]
+  implicit val tieInfoFormat: OFormat[TieInfoDTO] = Json.format[TieInfoDTO]
+  implicit val trumpInfoFormat: OFormat[TrumpInfoDTO] = Json.format[TrumpInfoDTO]
+  implicit val wonInfoDTOFormat: OFormat[WonInfoDTO] = Json.format[WonInfoDTO]
   
-  private var customMappers: Map[String,SimpleEventMapper[SimpleEvent]] = Map()
+  private var specialMappers: Map[String,SimpleEventMapper[SimpleEvent]] = Map()
 
   private def registerCustomMapper[T <: SimpleEvent](mapper: SimpleEventMapper[T]): Unit = {
-    customMappers = customMappers + (mapper.id -> mapper.asInstanceOf[SimpleEventMapper[SimpleEvent]])
+    specialMappers = specialMappers + (mapper.id -> mapper.asInstanceOf[SimpleEventMapper[SimpleEvent]])
   }
   
   // Register all custom mappers here
   registerCustomMapper(ReceivedHandEventMapper)
   registerCustomMapper(GameStateEventMapper)
+  registerCustomMapper(CardPlayedEventMapper)
+  registerCustomMapper(NewRoundEventMapper)
+  registerCustomMapper(NewTrickEventMapper)
+  registerCustomMapper(TrickEndEventMapper)
+  registerCustomMapper(RequestCardEventMapper)
+  registerCustomMapper(LobbyUpdateEventMapper)
+  registerCustomMapper(LeftEventMapper)
+  registerCustomMapper(KickEventMapper)
+  registerCustomMapper(SessionClosedMapper)
+  registerCustomMapper(TurnEventMapper)
 
   def toJson(obj: SimpleEvent, session: UserSession): JsValue = {
-    val data: Option[JsValue] = if (customMappers.contains(obj.id)) {
+    val data: Option[JsValue] = if (specialMappers.contains(obj.id)) {
-      Some(customMappers(obj.id).toJson(obj, session))
+      Some(specialMappers(obj.id).toJson(obj, session))
     }else {
       None
     }
-    if (data.isEmpty) {
-      return Json.obj()
-    }
     Json.obj(
       "id" -> ("request-" + java.util.UUID.randomUUID().toString),
       "event" -> obj.id,
+      "state" -> toJson(session),
       "data" -> data
     )
   }
 
+  def toJson(session: UserSession): JsValue = {
+    session.gameLobby.getLogic.getCurrentState match {
+      case Lobby => Json.toJson(LobbyInfoDTO(session.gameLobby, session.user))
+      case InGame => Json.toJson(GameInfoDTO(session.gameLobby, session.user))
+      case SelectTrump => Json.toJson(TrumpInfoDTO(session.gameLobby, session.user))
+      case TieBreak => Json.toJson(TieInfoDTO(session.gameLobby, session.user))
+      case FinishedMatch => Json.toJson(WonInfoDTO(session.gameLobby, session.user))
+      case _ => Json.obj()
+    }
+  }
+
 }

knockoutwhistweb/app/util/mapper/CardPlayedEventMapper.scala

@@ -0,0 +1,20 @@
+package util.mapper
+
+import de.knockoutwhist.events.global.CardPlayedEvent
+import model.sessions.UserSession
+import play.api.libs.json.{JsArray, JsObject, Json}
+import util.WebUIUtils
+
+object CardPlayedEventMapper extends SimpleEventMapper[CardPlayedEvent]{
+
+  override def id: String = "CardPlayedEvent"
+
+  override def toJson(event: CardPlayedEvent, session: UserSession): JsObject = {
+    Json.obj(
+      "firstCard" -> (if (event.trick.firstCard.isDefined) WebUIUtils.cardtoString(event.trick.firstCard.get) else "BLANK"),
+      "playedCards" -> JsArray(event.trick.cards.map { case (card, player) =>
+        Json.obj("cardId" -> WebUIUtils.cardtoString(card), "player" -> player.name)
+      }.toList)
+    )
+  }
+}

knockoutwhistweb/app/util/mapper/GameStateEventMapper.scala

@@ -4,6 +4,7 @@ import controllers.IngameController
 import de.knockoutwhist.events.global.GameStateChangeEvent
 import model.sessions.UserSession
 import play.api.libs.json.{JsObject, Json}
+import util.GameUtil
 
 object GameStateEventMapper extends SimpleEventMapper[GameStateChangeEvent] {
 
@@ -11,7 +12,7 @@ object GameStateEventMapper extends SimpleEventMapper[GameStateChangeEvent] {
 
   override def toJson(event: GameStateChangeEvent, session: UserSession): JsObject = {
     Json.obj(
-      //Title
+      "title" -> ("Knockout Whist - " + GameUtil.stateToTitle(event.newState)),
       "content" -> IngameController.returnInnerHTML(session.gameLobby, event.newState, session.user).toString
     )
   }

knockoutwhistweb/app/util/mapper/KickEventMapper.scala

@@ -0,0 +1,19 @@
+package util.mapper
+
+import controllers.routes
+import events.KickEvent
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object KickEventMapper extends SimpleEventMapper[KickEvent] {
+
+  override def id: String = "KickEvent"
+
+  override def toJson(event: KickEvent, session: UserSession): JsObject = {
+    Json.obj(
+      "url" -> routes.MainMenuController.mainMenu().url,
+      "content" -> views.html.mainmenu.creategame(Some(session.user)).toString,
+    )
+  }
+
+}

knockoutwhistweb/app/util/mapper/LeftEventMapper.scala

@@ -0,0 +1,19 @@
+package util.mapper
+
+import controllers.routes
+import events.{KickEvent, LeftEvent}
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object LeftEventMapper extends SimpleEventMapper[LeftEvent] {
+
+  override def id: String = "LeftEvent"
+
+  override def toJson(event: LeftEvent, session: UserSession): JsObject = {
+    Json.obj(
+      "url" -> routes.MainMenuController.mainMenu().url,
+      "content" -> views.html.mainmenu.creategame(Some(session.user)).toString
+    )
+  }
+
+}

knockoutwhistweb/app/util/mapper/LobbyUpdateEventMapper.scala

@@ -0,0 +1,25 @@
+package util.mapper
+
+import events.LobbyUpdateEvent
+import model.sessions.UserSession
+import play.api.libs.json.{JsArray, JsObject, Json}
+
+object LobbyUpdateEventMapper extends SimpleEventMapper[LobbyUpdateEvent] {
+
+  override def id: String = "LobbyUpdateEvent"
+
+  override def toJson(event: LobbyUpdateEvent, session: UserSession): JsObject = {
+    Json.obj(
+      "host" -> session.host,
+      "maxPlayers" -> session.gameLobby.maxPlayers,
+      "players" -> JsArray(session.gameLobby.getPlayers.values.map(player => {
+        Json.obj(
+          "id" -> player.id,
+          "name" -> player.name,
+          "self" -> (player.id == session.user.id)
+        )
+      }).toList)
+    )
+  }
+
+}

knockoutwhistweb/app/util/mapper/NewRoundEventMapper.scala

@@ -0,0 +1,18 @@
+package util.mapper
+
+import de.knockoutwhist.events.global.NewRoundEvent
+import logic.game.GameLobby
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object NewRoundEventMapper extends SimpleEventMapper[NewRoundEvent]{
+  override def id: String = "NewRoundEvent"
+
+  override def toJson(event: NewRoundEvent, session: UserSession): JsObject = {
+    val gameLobby = session.gameLobby
+    Json.obj(
+      "trumpsuit" -> gameLobby.getLogic.getCurrentRound.get.trumpSuit.toString,
+      "players" -> gameLobby.getLogic.getCurrentMatch.get.playersIn.map(player => player.toString)
+    )
+  }
+}

knockoutwhistweb/app/util/mapper/NewTrickEventMapper.scala

@@ -0,0 +1,14 @@
+package util.mapper
+
+import de.knockoutwhist.events.global.NewTrickEvent
+import logic.game.GameLobby
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object NewTrickEventMapper extends SimpleEventMapper[NewTrickEvent]{
+  override def id: String = "NewTrickEvent"
+
+  override def toJson(event: NewTrickEvent, session: UserSession): JsObject = {
+    Json.obj()
+  }
+}

knockoutwhistweb/app/util/mapper/RequestCardEventMapper.scala

@@ -0,0 +1,16 @@
+package util.mapper
+
+import de.knockoutwhist.events.player.RequestCardEvent
+import logic.game.GameLobby
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object RequestCardEventMapper extends SimpleEventMapper[RequestCardEvent]{
+  override def id: String = "RequestCardEvent"
+
+  override def toJson(event: RequestCardEvent, session: UserSession): JsObject = {
+    Json.obj(
+      "player" -> event.player.name
+    )
+  }
+}

knockoutwhistweb/app/util/mapper/RoundEndEventMapper.scala

@@ -0,0 +1,20 @@
+package util.mapper
+
+import controllers.routes
+import de.knockoutwhist.events.global.RoundEndEvent
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object RoundEndEventMapper extends SimpleEventMapper[RoundEndEvent] {
+
+  override def id: String = "RoundEndEvent"
+
+  override def toJson(event: RoundEndEvent, session: UserSession): JsObject = {
+
+    Json.obj(
+      "player" -> event.winner.name,
+      "tricks" -> event.amountOfTricks
+    )
+  }
+
+}

knockoutwhistweb/app/util/mapper/SessionClosedMapper.scala

@@ -0,0 +1,19 @@
+package util.mapper
+
+import controllers.routes
+import de.knockoutwhist.events.global.SessionClosed
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object SessionClosedMapper extends SimpleEventMapper[SessionClosed] {
+
+  override def id: String = "SessionClosed"
+
+  override def toJson(event: SessionClosed, session: UserSession): JsObject = {
+    Json.obj(
+      "url" -> routes.MainMenuController.mainMenu().url,
+      "content" -> views.html.mainmenu.creategame(Some(session.user)).toString,
+    )
+  }
+
+}

knockoutwhistweb/app/util/mapper/TrickEndEventMapper.scala

@@ -0,0 +1,20 @@
+package util.mapper
+
+import de.knockoutwhist.events.global.TrickEndEvent
+import de.knockoutwhist.rounds.Trick
+import logic.game.GameLobby
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+
+object TrickEndEventMapper extends SimpleEventMapper[TrickEndEvent]{
+  override def id: String = "TrickEndEvent"
+
+  override def toJson(event: TrickEndEvent, session: UserSession): JsObject = {
+    val gameLobby = session.gameLobby
+    Json.obj(
+      "playerwon" -> event.winner.name,
+      "playersin" -> gameLobby.getLogic.getCurrentMatch.get.playersIn.map(player => player.name),
+      "tricklist" -> gameLobby.getLogic.getCurrentRound.get.tricklist.map(trick => trick.winner.map(player => player.name).getOrElse("Trick in Progress"))
+    )
+  }
+}

knockoutwhistweb/app/util/mapper/TurnEventMapper.scala

@@ -0,0 +1,35 @@
+package util.mapper
+
+import de.knockoutwhist.events.global.TurnEvent
+import de.knockoutwhist.player.AbstractPlayer
+import model.sessions.UserSession
+import play.api.libs.json.{JsArray, JsObject, Json}
+
+object TurnEventMapper extends SimpleEventMapper[TurnEvent] {
+
+  override def id: String = "TurnEvent"
+
+  override def toJson(event: TurnEvent, session: UserSession): JsObject = {
+    val nextPlayers = if (session.gameLobby.logic.getPlayerQueue.isEmpty) {
+      Json.arr()
+    } else {
+      val queue = session.gameLobby.logic.getPlayerQueue.get
+      JsArray(
+        queue.duplicate().map(player => mapPlayer(player)).toList
+      )
+    }
+    
+    Json.obj(
+      "currentPlayer" -> mapPlayer(event.player),
+      "nextPlayers" -> nextPlayers
+    )
+  }
+
+  private def mapPlayer(player: AbstractPlayer): JsObject = {
+    Json.obj(
+      "name" -> player.name,
+      "dog" -> player.isInDogLife
+    )
+  }
+
+}

knockoutwhistweb/app/views/ingame/finishedMatch.scala.html

@@ -1,38 +1,108 @@
 @(user: Option[model.users.User], gamelobby: logic.game.GameLobby)
 
-<main class="lobby-background vh-100" id="lobbybackground">
+<div class="lobby-background vh-100 d-flex align-items-start justify-content-center pt-5">
-    <div class="container d-flex flex-column" style="height: calc(100vh - 1rem);">
+<div class="container py-5">
-        <div class="row">
+        <div class="row justify-content-center">
-            <div class="col">
+            <div class="col-lg-8 col-xl-6">
-                <div class="p-3 text-center fs-4">Winner: @gamelobby.getLogic.getWinner</div>
+                <div class="card shadow-lg mb-5 text-center bg-white border-0 rounded-4">
+                    <div class="card-body p-4 p-md-5">
+                        <h1 class="card-title display-5 fw-bold text-success mb-3">Match Over!</h1>
+                        <p class="fs-4 text-muted">Congratulations to the winner:</p>
+                        <h2 class="display-3 fw-bolder mb-4 text-primary">
+                            @gamelobby.getLogic.getWinner.get.name
+                        </h2>
                     </div>
                 </div>
-        <div class="row justify-content-center align-items-center flex-grow-1">
+
-        @if((gamelobby.getUserSession(user.get.id).host)) {
+                <div class="card shadow mb-5 border-0 rounded-4 overflow-hidden">
-            <div class="col-12 text-center mb-5">
+                    <div class="card-header bg-dark text-white text-center fs-5 fw-semibold">
-                <div class="btn btn-success" onclick="backToLobby('@gamelobby.id')">Return to lobby</div>
+                        Final Standings
+                    </div>
+                    <div class="d-flex justify-content-between align-items-center p-2 text-uppercase fw-bold border-bottom bg-light">
+                        <div class="d-flex align-items-center">
+                            Player
+                        </div>
+                        <div class="d-flex flex-row gap-3">
+                            <span class="fs-6 text-dark text-center" style="width: 5rem;">Rounds won</span>
+                            <span class="fs-6 text-dark text-center" style="width: 5rem;">Tricks won</span>
+                        </div>
+                    </div>
+                    <div>
+                    @gamelobby.getFinalRanking.zipWithIndex.map { case ((playerName, (wonRounds, tricksWon)), index) =>
+                        @defining(index + 1) { rank =>
+                            <div class="d-flex justify-content-between align-items-center p-3 border-bottom @if(rank == 1){bg-success-subtle fw-bold}">
+                                <div class="d-flex align-items-center">
+                                    <span class="badge @if(rank == 1){bg-warning text-dark fs-6} else {bg-secondary} rounded-pill me-3">#@rank</span>
+                                    @playerName
+                                </div>
+                                <div class="d-flex flex-row gap-3">
+                                    <span class="fs-6 text-muted text-center" style="width: 5rem;">@wonRounds</span>
+                                    <span class="fs-6 text-muted text-center" style="width: 5rem;">@tricksWon</span>
+                                </div>
+                            </div>
+                        }
+                    }
+                    </div>
+                    @if(gamelobby.getFinalRanking.isEmpty) {
+                        <div class="p-3 text-center text-muted">No final scores available.</div>
+                    }
+                </div>
+
+
+                @if(user.isDefined && gamelobby.getUserSession(user.get.id).host) {
+                    <div class="col-12 text-center mt-4">
+                        <div class="btn btn-success btn-lg shadow" onclick="handleReturnToLobby()">
+                            Return to Lobby
+                        </div>
                     </div>
                 } else {
-            <div class="col-12 text-center mt-3">
+                    <div class="col-12 text-center mt-4">
-                <div class="spinner-border mt-1" role="status">
+                        <div class="text-primary">
+                            <div class="spinner-grow text-primary mt-1" role="status">
                                 <span class="visually-hidden">Loading...</span>
                             </div>
+                            <p class="mt-3 fs-6 fw-semibold">
+                                Waiting for the Host to continue...
+                            </p>
+                        </div>
                     </div>
                 }
             </div>
         </div>
-</main>
+    </div>
+</div>
 <script>
-        function waitForFunction(name, checkInterval = 100) {
+    function fireConfetti() {
-            return new Promise(resolve => {
+        let duration = 3 * 1000;
-                const timer = setInterval(() => {
+        let animationEnd = Date.now() + duration;
-                    if (typeof window[name] === "function") {
+        let defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 };
-                        clearInterval(timer);
+
-                        resolve(window[name]);
+        function randomInRange(min, max) {
+            return Math.random() * (max - min) + min;
         }
-                }, checkInterval);
+
-            });
+        let interval = setInterval(function() {
+            let timeLeft = animationEnd - Date.now();
+
+            if (timeLeft <= 0) {
+                return clearInterval(interval);
             }
-        waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
+
-    connectWebSocket()
+            let particleCount = 50 * (timeLeft / duration);
+
+            // Left burst
+            confetti(Object.assign({}, defaults, {
+                particleCount,
+                origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 }
+            }));
+
+            // Right burst
+            confetti(Object.assign({}, defaults, {
+                particleCount,
+                origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 }
+            }));
+        }, 250);
+    }
+    connectWebSocket();
+    fireConfetti();
 </script>

knockoutwhistweb/app/views/ingame/ingame.scala.html

@@ -8,129 +8,35 @@
         <div class="py-5 container-xxl">
 
             <div class="row ms-4 me-4">
-                <div class="col-4 mt-5 text-start">
+                <div class="col-4 mt-5 text-start" id="turn-component"></div>
-                    <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">Next Player</h4>
-                        @for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) {
-                            <p class="fs-5 text-primary" id="next-player-name">@nextplayer</p>
-                        }
-                    }
-                </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 id="score-table"></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 class="d-flex justify-content-center g-3 mb-5" id="trick-cards-container"></div>
-                            </div>
-                        } else {
-                            @for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) {
-                                <div class="col-auto">
-                                    <div class="card text-center shadow-sm border-0 bg-transparent" style="width: 7rem;
-                                        backdrop-filter: blur(4px);">
-                                        <div class="p-2">
-                                            @util.WebUIUtils.cardtoImage(cardplayed) width="100%"/>
-                                        </div>
-                                        <div class="card-body p-2 bg-transparent">
-                                            <small class="fw-semibold text-secondary">@player</small>
-                                        </div>
-                                    </div>
-                                </div>
-                            }
-                        }
-                    </div>
-                </div>
-                <div class="col-4 mt-5 text-end">
-                    <h4 class="fw-semibold mb-1">Trumpsuit</h4>
-                    @if(gamelobby.getLogic.getCurrentRound.isEmpty) {
-                        <p class="fs-5 text-primary" id="trumpsuit">No Trumpsuit</p>
-                    }else {
-                        <p class="fs-5 text-primary" id="trumpsuit">@gamelobby.getLogic.getCurrentRound.get.trumpSuit</p>
-                    }
 
-                    <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 @{
+                <div id="player-hand-container"></div>
-                    !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, '@gamelobby.id', '@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>
         </div>
     </main>
 </div>
 <script>
-        function waitForFunction(name, checkInterval = 100) {
-            return new Promise(resolve => {
-                const timer = setInterval(() => {
-                    if (typeof window[name] === "function") {
-                        clearInterval(timer);
-                        resolve(window[name]);
-                    }
-                }, checkInterval);
-            });
-        }
-        waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
     connectWebSocket()
+    canPlayCard = @gamelobby.logic.getCurrentPlayer.contains(player);
+    globalThis.initGameVueComponents()
 </script>

knockoutwhistweb/app/views/ingame/selecttrump.scala.html

@@ -18,25 +18,25 @@
 
                                     <div class="row justify-content-center col-auto mb-5">
                                         <div class="col-auto handcard">
-                                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="0" style="border-radius: 6px" onclick="handleTrumpSelection(this, '@gamelobby.id')">
+                                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="0" style="border-radius: 6px" onclick="handleTrumpSelection(this)">
                                                 @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Spades))
                                                 width="120px" style="border-radius: 6px"/>
                                             </div>
                                         </div>
                                         <div class="col-auto handcard">
-                                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="1" style="border-radius: 6px" onclick="handleTrumpSelection(this, '@gamelobby.id')">
+                                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="1" style="border-radius: 6px" onclick="handleTrumpSelection(this)">
                                                 @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Hearts))
                                                 width="120px" style="border-radius: 6px"/>
                                             </div>
                                         </div>
                                         <div class="col-auto handcard">
-                                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="2" style="border-radius: 6px" onclick="handleTrumpSelection(this, '@gamelobby.id')">
+                                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="2" style="border-radius: 6px" onclick="handleTrumpSelection(this)">
                                                 @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Diamonds))
                                                 width="120px" style="border-radius: 6px"/>
                                             </div>
                                         </div>
                                         <div class="col-auto handcard">
-                                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="3" style="border-radius: 6px" onclick="handleTrumpSelection(this, '@gamelobby.id')">
+                                            <div class="btn btn-outline-light p-0 border-0 shadow-none" data-trump="3" style="border-radius: 6px" onclick="handleTrumpSelection(this)">
                                                 @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Clubs))
                                                 width="120px" style="border-radius: 6px"/>
                                             </div>
@@ -64,16 +64,5 @@
     </div>
 </div>
 <script>
-        function waitForFunction(name, checkInterval = 100) {
-            return new Promise(resolve => {
-                const timer = setInterval(() => {
-                    if (typeof window[name] === "function") {
-                        clearInterval(timer);
-                        resolve(window[name]);
-                    }
-                }, checkInterval);
-            });
-        }
-        waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
     connectWebSocket()
 </script>

knockoutwhistweb/app/views/ingame/tie.scala.html

@@ -20,7 +20,7 @@
                                 </p>
                             </div>
 
-                            @if(player.equals(gamelobby.logic.playerTieLogic.currentTiePlayer())) {
+                            @if(gamelobby.logic.playerTieLogic.currentTiePlayer().contains(player)) {
                                 @defining(gamelobby.logic.playerTieLogic.highestAllowedNumber()) { maxNum =>
                                     <div class="alert alert-info" role="alert" aria-live="polite">
                                         Pick a number between 1 and @{
@@ -71,7 +71,7 @@
                                 }
                             } else {
                                 <div class="alert alert-warning" role="alert" aria-live="polite">
-                                    <strong>@gamelobby.logic.playerTieLogic.currentTiePlayer()</strong>
+                                    <strong>@gamelobby.logic.playerTieLogic.currentTiePlayer().get</strong>
                                     is currently picking a number for the cut.
                                 </div>
 
@@ -110,16 +110,5 @@
     </div>
 </div>
 <script>
-        function waitForFunction(name, checkInterval = 100) {
-            return new Promise(resolve => {
-                const timer = setInterval(() => {
-                    if (typeof window[name] === "function") {
-                        clearInterval(timer);
-                        resolve(window[name]);
-                    }
-                }, checkInterval);
-            });
-        }
-        waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
     connectWebSocket()
 </script>

knockoutwhistweb/app/views/lobby/lobby.scala.html

@@ -1,84 +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">
-    <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">
-                    Playeramount: @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="removePlayer('@gamelobby.id', '@playersession.id')">
-                                Remove</div>
-                        }
-                        </div>
-                    </div>
-                </div>
-            }
-            </div>
-            <div class="col-12 text-center mb-5">
-                <div class="btn btn-success" onclick="startGame('@gamelobby.id')">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>
-        function waitForFunction(name, checkInterval = 100) {
+    // Initialisierung des momentanen Lobby Standes, welcher direkt gerendert werden muss.
-            return new Promise(resolve => {
+
-                const timer = setInterval(() => {
+    const initialLobbyName = '@gamelobby.name';
-                    if (typeof window[name] === "function") {
+    const initialLobbyId = '@gamelobby.id';
-                        clearInterval(timer);
+
-                        resolve(window[name]);
+    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
+            )
         }
-                }, checkInterval);
+        Json.stringify(Json.toJson(playerListForVue))
-            });
+    })');
-        }
+    connectWebSocket();
-        waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
+    globalThis.initLobbyVueComponents(
-    connectWebSocket()
+    initialLobbyName,
+    initialLobbyId,
+    initialIsHost,
+    initialMaxPlayers,
+    initialPlayers
+    );
 </script>

knockoutwhistweb/app/views/main.scala.html

@@ -17,9 +17,10 @@
         <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")">
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
     </head>
-
+    <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

knockoutwhistweb/public/javascripts/events.js

@@ -1,50 +1,653 @@
-function receiveHandEvent(eventData) {
+var canPlayCard = false;
-    //Data
+const PlayerHandComponent = {
-    const dog = eventData.dog;
+    data() {
-    const hand = eventData.hand;
+        return {
+            hand: [],
+            isDogPhase: false,
+            isAwaitingResponse: false,
+        };
+    },
+    computed: {
+        isHandInactive() {
+            //TODO: Needs implementation
+        }
+    },
+    template: `
+        <div class="row justify-content-center g-2 mt-4 bottom-div" 
+             style="backdrop-filter: blur(4px); margin-left: 0; margin-right: 0;">
             
-    const handElement = $('#card-slide');
+            <div id="card-slide" class="row justify-content-center ingame-cards-slide" :class="{'inactive': isHandInactive }">
-    handElement.addClass('ingame-cards-slide')
                 
-    let newHtml = '';
+                <div v-for="card in hand" :key="card.idx" class="col-auto handcard" style="border-radius: 6px">
-
-    //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}" 
+                         :data-card-id="card.idx" 
                          style="border-radius: 6px" 
-                                 onclick="handlePlayCard(this, '${dog}')">
+                         @click="handlePlayCard(card.idx)">
                         
-                                <img src="/assets/images/cards/${cardS}.png" width="120px" style="border-radius: 6px" alt="${cardS}"/>
+                        <img :src="getCardImagePath(card.card)" width="120px" style="border-radius: 6px" :alt="card.card"/>
                     </div>
                 </div>
-                    `;
+
-        newHtml += cardHtml;
+                <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 targetButton = this.$el.querySelector(`[data-card-id="${cardidx}"]`);
+            const cardElement = targetButton ? targetButton.closest('.handcard') : null;
+
+            const payload = {
+                cardindex: cardidx.toString(),
+                isDog: false
+            }
+            sendEventAndWait("PlayCard", payload).then(
+                () => {
+                    this.hand = this.hand.filter(card => card.idx !== cardidx);
+
+                    this.hand.forEach((card, index) => {
+                        card.idx = index;
+                    })
+                    this.isAwaitingResponse = false;
+                }
+            ).catch(
+                (err) => {
+                    if (cardElement) {
+                        cardElement.animate(wiggleKeyframes, wiggleTiming);
+                    } else {
+                        console.warn(`Could not find DOM element for card index ${cardidx} to wiggle.`);
+                    }
+                    this.isAwaitingResponse = false;
+                    canPlayCard = true;
+
+                }
+            )
+        },
+        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)
             });
 
-    //Build dog if needed
+            tricklist.forEach(playerWonTrick => {
-    if (dog) {
+                if (playerWonTrick !== "Trick in Progress" && playercounts.has(playerWonTrick)) {
-        newHtml += `
+                    playercounts.set(playerWonTrick, playercounts.get(playerWonTrick) + 1);
-                        <div class="mt-2">
-                            <button class="btn btn-danger" onclick="handleSkipDogLife(this)">Skip Turn</button>
-                        </div>
-                    `;
                 }
-    handElement.html(newHtml);
+            });
+
+            const newScores = players.map(name => ({
+                name: name,
+                tricks: playercounts.get(name) || 0,
+            }));
+
+            newScores.sort((a, b) => b.tricks - a.tricks);
+
+            return newScores;
+        },
+
+        updateNewRoundData(eventData) {
+            console.log("Vue Scoreboard Data Update Triggered: New Round!");
+
+            this.playerScores = eventData.players.map(player => ({
+                name: player,
+                tricks: 0,
+            }));
+        },
+
+        updateTrickEndData(eventData) {
+            const { playerwon, playersin, tricklist } = eventData;
+
+            console.log(`Vue Scoreboard Data Update Triggered: ${playerwon} won the trick!`);
+
+            this.playerScores = this.calculateNewScores(playersin, tricklist);
+
+
+        }
+    }
+};
+const GameInfoComponent = {
+    data() {
+        return {
+            trumpsuit: 'No Trumpsuit',
+            firstCardImagePath: '/assets/images/cards/1B.png',
+        };
+    },
+
+    template: `
+        <div>
+            <h4 class="fw-semibold mb-1">Trumpsuit</h4>
+            <p class="fs-5 text-primary" id="trumpsuit">{{ trumpsuit }}</p>
+
+
+            <h5 class="fw-semibold mt-4 mb-1">First Card</h5>
+            <div class="d-inline-block border rounded shadow-sm p-1 bg-light" id="first-card-container">
+
+                <img :src="firstCardImagePath" alt="First Card" width="80px" style="border-radius: 6px"/>
+            </div>
+        </div>
+    `,
+
+    methods: {
+        resetFirstCard(eventData) {
+            console.log("GameInfoComponent: Resetting First Card to placeholder.");
+            this.firstCardImagePath = '/assets/images/cards/1B.png';
+        },
+        updateFirstCard(eventData) {
+            const firstCardId = eventData.firstCard;
+            console.log("GameInfoComponent: Updating First Card to:", firstCardId);
+
+            let imageSource;
+            if (firstCardId === "BLANK" || !firstCardId) {
+                imageSource = "/assets/images/cards/1B.png";
+            } else {
+                imageSource = `/assets/images/cards/${firstCardId}.png`;
+            }
+            this.firstCardImagePath = imageSource;
+        },
+        updateTrumpsuit(eventData) {
+            this.trumpsuit = eventData.trumpsuit;
+        }
+    }
+};
+const TrickDisplayComponent = {
+    data() {
+        return {
+            playedCards: [],
+        };
+    },
+
+    template: `
+        <div class="d-flex justify-content-center g-3" id="trick-cards-content">
+            <div v-for="(play, index) in playedCards" :key="index" class="col-auto">
+                <div class="card text-center shadow-sm border-0 bg-transparent" style="width: 7rem;
+                    backdrop-filter: blur(4px);">
+                    <div class="p-2">
+                        <img :src="getCardImagePath(play.cardId)" width="100%" style="border-radius: 6px"/>
+                    </div>
+                    <div class="card-body p-2 bg-transparent">
+                        <small class="fw-semibold text-secondary">{{ play.player }}</small>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `,
+
+    methods: {
+        getCardImagePath(cardId) {
+            return `/assets/images/cards/${cardId}.png`;
+        },
+
+        clearPlayedCards() {
+            console.log("TrickDisplayComponent: Clearing played cards.");
+            this.playedCards = [];
+        },
+
+        updatePlayedCards(eventData) {
+            console.log("TrickDisplayComponent: Updating played cards.");
+
+            this.playedCards = eventData.playedCards;
+        }
+    }
+};
+function formatPlayerName(player) {
+    let name = player.name;
+    if (player.dog) {
+        name += " 🐶";
+    }
+    return name;
 }
 
+const TurnComponent = {
+    data() {
+        return {
+            currentPlayerName: 'Waiting...',
+            nextPlayers: [],
+        };
+    },
+
+    template: `
+        <div class="turn-tracker-container">
+            <h4 class="fw-semibold mb-1">Current Player</h4>
+            <p class="fs-3 fw-bold text-success" id="current-player-name">{{ currentPlayerName }}</p>
+
+            <div v-if="nextPlayers.length > 0">
+                <h5 class="fw-semibold mt-4 mb-1" id="next-players-text">Next Players</h5>
+                <div id="next-players-container">
+                    <p v-for="name in nextPlayers" :key="name" class="fs-5 text-primary">{{ name }}</p>
+                </div>
+            </div>
+        </div>
+    `,
+    methods: {
+        updateTurnData(eventData) {
+            console.log("TurnComponent: Updating turn data.");
+            const { currentPlayer, nextPlayers } = eventData;
+
+            this.currentPlayerName = formatPlayerName(currentPlayer);
+
+            this.nextPlayers = nextPlayers.map(player => formatPlayerName(player));
+        }
+    }
+};
+const LobbyComponent = {
+    data() {
+        return {
+            lobbyName: 'Loading...',
+            lobbyId: 'default',
+            isHost: false,
+            maxPlayers: 0,
+            players: [],
+            showKickedModal: false,
+            kickedEventData: null,
+            showSessionClosedModal: false,
+            sessionClosedEventData: null,
+        };
+    },
+
+    template: `
+        <main class="lobby-background vh-100" id="lobbybackground">
+            
+            <div v-if="showKickedModal" class="modal fade show d-block" 
+                 tabindex="-1" 
+                 role="dialog" 
+                 aria-labelledby="kickedModalTitle" 
+                 aria-modal="true" 
+                 style="background-color: rgba(0,0,0,0.5);">
+                
+                <div class="modal-dialog modal-dialog-centered" role="document">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title" id="kickedModalTitle">Kicked</h5>
+                        </div>
+                        <div class="modal-body">
+                            <p>You've been kicked from the lobby.</p>
+                            <p class="text-muted small">You'll get redirected to the mainmenu in 5 seconds...</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+            <div v-if="showSessionClosedModal" class="modal fade show d-block" 
+                 tabindex="-1" 
+                 role="dialog" 
+                 aria-labelledby="sessionClosedModalTitle" 
+                 aria-modal="true" 
+                 style="background-color: rgba(0,0,0,0.5);">
+                <div class="modal-dialog modal-dialog-centered" role="document">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title" id="sessionClosedModalTitle">Session Closed</h5>
+                        </div>
+                        <div class="modal-body">
+                            <p>The session was closed.</p>
+                            <p class="text-muted small">You'll get redirected to the mainmenu in 5 seconds...</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="container d-flex flex-column" style="height: calc(100vh - 1rem);">
+                
+                <div class="row">
+                    <div class="col">
+                        <div class="p-3 fs-1 d-flex align-items-center">
+                            <div class="text-center" style="flex-grow: 1;">
+                                Lobby-Name: {{ lobbyName }}
+                            </div>
+                            <div class="btn btn-danger ms-auto" @click="leaveGame(lobbyId)">Exit</div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="row">
+                    <div class="col">
+                        <div class="p-3 text-center fs-4" id="playerAmount">
+                            Players: {{ players.length }} / {{ maxPlayers }}
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="row justify-content-center align-items-center flex-grow-1">
+                    
+                    <template v-if="isHost">
+                        <div id="players" class="justify-content-center align-items-center d-flex flex-wrap">
+                            <div v-for="player in players" :key="player.id" class="col-auto my-auto m-3">
+                                <div class="card" style="width: 18rem;">
+                                    <img src="/assets/images/profile.png" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
+                                    <div class="card-body">
+                                        <h5 class="card-title">
+                                            {{ player.name }} <span v-if="player.self">(You)</span>
+                                        </h5>
+                                        
+                                        <template v-if="player.self">
+                                            <a href="#" class="btn btn-danger disabled" aria-disabled="true" tabindex="-1">Remove</a>
+                                        </template>
+                                        <template v-else>
+                                            <div class="btn btn-danger" @click="handleKickPlayer(player.id)">Remove</div>
+                                        </template>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="col-12 text-center mb-5">
+                            <div class="btn btn-success" @click="startGame()">Start Game</div>
+                        </div>
+                    </template>
+                    
+                    <template v-else>
+                        <div id="players" class="justify-content-center align-items-center d-flex flex-wrap">
+                            <div v-for="player in players" :key="player.id" class="col-auto my-auto m-3"> 
+                                <div class="card" style="width: 18rem;">
+                                    <img src="/assets/images/profile.png" alt="Profile" class="card-img-top w-50 mx-auto mt-3" />
+                                    <div class="card-body">
+                                        <h5 class="card-title">
+                                            {{ player.name }} <span v-if="player.self">(You)</span>
+                                        </h5>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="col-12 text-center mt-3">
+                            <p class="fs-4">Waiting for the host to start the game...</p>
+                            <div class="spinner-border mt-1" role="status">
+                                <span class="visually-hidden">Loading...</span>
+                            </div>
+                        </div>
+                    </template>
+                    
+                </div>
+            </div>
+        </main>
+    `,
+
+    methods: {
+        updateLobbyData(eventData) {
+            console.log("LobbyComponent: Received Lobby Update Event.");
+
+            this.isHost = eventData.host;
+            this.maxPlayers = eventData.maxPlayers;
+            this.players = eventData.players;
+        },
+
+        setInitialData(name, id) {
+            this.lobbyName = name;
+            this.lobbyId = id;
+        },
+        startGame() {
+            globalThis.startGame()
+        },
+        leaveGame(gameId) {
+            //TODO: Needs implementation
+        },
+        handleKickPlayer(playerId) {
+            globalThis.handleKickPlayer(playerId)
+        },
+        showKickModal(eventData) {
+            this.showKickedModal = true;
+            setTimeout(() => {
+                this.kickedEventData = eventData;
+                this.showKickedModal = false;
+
+                if (typeof globalThis.receiveGameStateChange === 'function') {
+                    globalThis.receiveGameStateChange(this.kickedEventData);
+                } else {
+                    console.error("FATAL: receiveGameStateChange ist nicht global definiert.");
+                }
+            }, 5000);
+        },
+        showSessionClosedModal(eventData) {
+            this.sessionClosedEventData = eventData;
+            this.showSessionClosedModal = true;
+
+            setTimeout(() => {
+                this.showSessionClosedModal = false;
+
+                if (typeof globalThis.receiveGameStateChange === 'function') {
+                    globalThis.receiveGameStateChange(this.sessionClosedEventData);
+                } else {
+                    console.error("FATAL: receiveGameStateChange ist nicht global definiert.");
+                }
+            }, 5000);
+        }
+    }
+};
+
+function requestCardEvent(eventData) {
+    //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';
+    const url = eventData.url || null;
 
-    exchangeBody(content, title);
+    exchangeBody(content, title, url);
+}
+function receiveRoundEndEvent(eventData) {
+    //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;
+let gameInfoApp = null;
+let trickDisplayApp = null;
+let turnApp = null;
+globalThis.initGameVueComponents = function() {
+        // Initializing PlayerHandComponent
+        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.");
+        }
+
+        // Initializing Scoreboard
+        if (scoreBoardApp) return
+
+        const app2 = Vue.createApp(ScoreBoardComponent)
+        scoreBoardApp = app2
+        const mountedHand2 = app2.mount('#score-table')
+        if (mountedHand2) {
+            globalThis.updateNewRoundData = mountedHand2.updateNewRoundData;
+            onEvent("NewRoundEvent", handleNewRoundEvent);
+
+            globalThis.updateTrickEndData = mountedHand2.updateTrickEndData;
+            onEvent("TrickEndEvent", globalThis.updateTrickEndData);
+            console.log("SCOREBOARD: updateNewRoundData successfully exposed.");
+        } else {
+            console.error("FATAL ERROR: Scoreboard mount failed. Check if #score-table exists.");
+        }
+        // Initializing Gameinfo
+        if (gameInfoApp) return
+
+        const app3 = Vue.createApp(GameInfoComponent)
+        gameInfoApp = app3
+        const mountedGameInfo = app3.mount('#game-info-component')
+        if(mountedGameInfo) {
+            globalThis.resetFirstCard = mountedGameInfo.resetFirstCard;
+            globalThis.updateFirstCard = mountedGameInfo.updateFirstCard;
+            globalThis.updateTrumpsuit = mountedGameInfo.updateTrumpsuit
+            onEvent("NewTrickEvent", handleNewTrickEvent);
+            console.log("GameInfo: resetFirstCard successfully exposed.");
+        } else {
+            console.error("FATAL ERROR: GameInfo mount failed. Check if #score-table exists.");
+        }
+
+        // Initializing TrickCardContainer
+        if (trickDisplayApp) return;
+        const app4 = Vue.createApp(TrickDisplayComponent);
+        trickDisplayApp = app4;
+        const mountedTrickDisplay = app4.mount('#trick-cards-container');
+
+        if (mountedTrickDisplay) {
+            globalThis.clearPlayedCards = mountedTrickDisplay.clearPlayedCards;
+            globalThis.updatePlayedCards = mountedTrickDisplay.updatePlayedCards;
+            onEvent("CardPlayedEvent", handleCardPlayedEvent)
+            console.log("TRICK DISPLAY: Handlers successfully exposed (clearPlayedCards, updatePlayedCards).");
+        } else {
+            console.error("FATAL ERROR: TrickDisplay mount failed. Check if #trick-cards-container exists.");
+        }
+
+        // Initializing TurnContainer
+        if (turnApp) return;
+        const app5 = Vue.createApp(TurnComponent)
+        turnApp = app5;
+        const mountedTurnApp = app5.mount('#turn-component')
+
+        if(mountedTurnApp) {
+            globalThis.updateTurnData = mountedTurnApp.updateTurnData;
+            onEvent("TurnEvent", globalThis.updateTurnData);
+            console.log("TURN DISPLAY: Handlers successfully exposed (clearPlayedCards, updatePlayedCards).");
+        } else {
+            console.error("FATAL ERROR: TURNAPP mount failed. Check if #trick-cards-container exists.");
+        }
+}
+let lobbyApp = null;
+globalThis.initLobbyVueComponents = function(initialLobbyName, initialLobbyId, initialIsHost, initialMaxPlayers, initialPlayers) {
+
+    if (lobbyApp) return;
+
+    const appLobby = Vue.createApp(LobbyComponent);
+    lobbyApp = appLobby;
+    const mountedLobby = appLobby.mount('#lobby-app-mount');
+
+    if (mountedLobby) {
+        mountedLobby.setInitialData(initialLobbyName, initialLobbyId);
+
+        //Damit beim erstmaligen Betreten der Lobby die Spieler etc. angezeigt werden.
+        mountedLobby.updateLobbyData({
+            host: initialIsHost,
+            maxPlayers: initialMaxPlayers,
+            players: initialPlayers
+        });
+
+        globalThis.updateLobbyData = mountedLobby.updateLobbyData;
+        globalThis.showKickModal = mountedLobby.showKickModal;
+        globalThis.showSessionClosedModal = mountedLobby.showSessionClosedModal;
+        onEvent("LobbyUpdateEvent", globalThis.updateLobbyData);
+        onEvent("KickEvent", globalThis.showKickModal);
+        onEvent("SessionClosed", globalThis.showSessionClosedModal);
+        console.log("LobbyComponent successfully mounted and registered events.");
+    } else {
+        console.error("FATAL ERROR: LobbyComponent mount failed.");
+    }
+}
+function handleCardPlayedEvent(eventData) {
+    console.log("CardPlayedEvent received. Updating Game Info and Trick Display.");
+
+    if (typeof globalThis.updateFirstCard === 'function') {
+        globalThis.updateFirstCard(eventData);
+    }
+
+    if (typeof globalThis.updatePlayedCards === 'function') {
+        globalThis.updatePlayedCards(eventData);
+    }
+}
+function handleNewTrickEvent(eventData) {
+    if (typeof globalThis.resetFirstCard === 'function') {
+        globalThis.resetFirstCard(eventData);
+    }
+
+    if (typeof globalThis.clearPlayedCards === 'function') {
+        globalThis.clearPlayedCards();
+    }
+}
+function handleNewRoundEvent(eventData) {
+    if (typeof globalThis.updateNewRoundData === 'function') {
+        globalThis.updateNewRoundData(eventData);
+    }
+    if (typeof globalThis.updateTrumpsuit === 'function') {
+        globalThis.updateTrumpsuit(eventData);
+    }
 }
 
-onEvent("ReceivedHandEvent", receiveHandEvent)
 onEvent("GameStateChangeEvent", receiveGameStateChange)
+onEvent("LeftEvent", receiveGameStateChange)
+onEvent("RequestCardEvent", requestCardEvent)
+onEvent("RoundEndEvent", receiveRoundEndEvent)

knockoutwhistweb/public/javascripts/interact.js

@@ -1,7 +1,33 @@
-function handlePlayCard(card, dog) {
+function handlePlayCard(cardidx) {
-  // TODO needs implementation
+    //TODO: Needs implementation
 }
 
 function handleSkipDogLife(button) {
     // TODO needs implementation
 }
+function startGame() {
+    sendEvent("StartGame")
+}
+
+function handleTrumpSelection(object) {
+    const $button = $(object);
+    const trumpIndex = parseInt($button.data('trump'));
+    const payload = {
+        suitIndex: trumpIndex
+    }
+    sendEvent("PickTrumpsuit", payload)
+
+}
+function handleKickPlayer(playerId) {
+    sendEvent("KickPlayer", {
+        playerId: playerId
+    })
+}
+function handleReturnToLobby() {
+    sendEvent("ReturnToLobby")
+}
+
+globalThis.startGame = startGame
+globalThis.handleTrumpSelection = handleTrumpSelection
+globalThis.handleKickPlayer = handleKickPlayer
+globalThis.handleReturnToLobby = handleReturnToLobby

knockoutwhistweb/public/javascripts/websocket.js

@@ -87,11 +87,17 @@ function setupSocketHandlers(socket) {
         } else {
             console.warn('Connection died unexpectedly.');
         }
+        location.href = "/mainmenu";
     };
 }
 
 // connect/disconnect helpers
-function connectWebSocket(url = "ws://localhost:9000/websocket") {
+function connectWebSocket(url = null) {
+    if (!url) {
+        const loc = window.location;
+        const protocol = loc.protocol === "https:" ? "wss:" : "ws:";
+        url = protocol + "//" + loc.host + "/websocket";
+    }
     if (ws && ws.readyState === WebSocket.OPEN) return Promise.resolve();
     if (ws && ws.readyState === WebSocket.CONNECTING) {
         // already connecting - return a promise that resolves on open

versions.env

@@ -1,3 +1,3 @@
 MAJOR=4
-MINOR=1
+MINOR=9
 PATCH=0