feat(api): Implement received hand event handling and UI updates

2025-11-23 17:39:36 +01:00
18 changed files with 145 additions and 304 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -133,24 +133,3 @@
 ### Bug Fixes

 * **api:** Fixed a bug where the game would reload on game start ([#81](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/81)) ([9738a04](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/9738a04b7a3c63c8cd1450e563ec04823fb3c35a))
-##  (2025-11-23)
-
-### ⚠ BREAKING CHANGES
-
-* **websocket:** Implement WebSocket connection and event handling (#82)
-
-### Features
-
-* **websocket:** Implement WebSocket connection and event handling ([#82](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/issues/82)) ([8ca909d](https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/commit/8ca909db522dd7108a3e40ce84811eaf8695eaa5))
-##  (2025-11-24)
-##  (2025-11-26)
-
-### Features
-
-* **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))
--- a/2
+++ b/2
--- a/knockoutwhistweb/app/controllers/IngameController.scala
+++ b/knockoutwhistweb/app/controllers/IngameController.scala
@@ -1,7 +1,6 @@
 package controllers

 import auth.{AuthAction, AuthenticatedRequest}
-import de.knockoutwhist.control.GameState
 import de.knockoutwhist.control.GameState.*
 import exceptions.*
 import logic.PodManager
@@ -30,7 +29,7 @@ class IngameController @Inject()(
    game match {
      case Some(g) =>
        val results = Try {
-          IngameController.returnInnerHTML(g, g.logic.getCurrentState, request.user)
+          returnInnerHTML(g, request.user)
        }
        if (results.isSuccess) {
          Ok(views.html.main("In-Game - Knockout Whist")(results.get))
@@ -42,6 +41,34 @@ class IngameController @Inject()(
    }
  }

+  def returnInnerHTML(gameLobby: GameLobby, user: User): Html = {
+    gameLobby.logic.getCurrentState match {
+      case Lobby => views.html.lobby.lobby(Some(user), gameLobby)
+      case InGame =>
+        views.html.ingame.ingame(
+          gameLobby.getPlayerByUser(user),
+          gameLobby
+        )
+      case SelectTrump =>
+        views.html.ingame.selecttrump(
+          gameLobby.getPlayerByUser(user),
+          gameLobby
+        )
+      case TieBreak =>
+        views.html.ingame.tie(
+          gameLobby.getPlayerByUser(user),
+          gameLobby
+        )
+      case FinishedMatch =>
+        views.html.ingame.finishedMatch(
+          Some(user),
+          gameLobby
+        )
+      case _ =>
+        throw new IllegalStateException(s"Invalid game state for in-game view. GameId: ${gameLobby.id}" + s" State: ${gameLobby.logic.getCurrentState}")
+    }
+  }
+
  def startGame(gameId: String): Action[AnyContent] = authAction { implicit request: AuthenticatedRequest[AnyContent] =>
    val game = PodManager.getGame(gameId)
    val result = Try {
@@ -56,7 +83,7 @@ class IngameController @Inject()(
      Ok(Json.obj(
        "status" -> "success",
        "redirectUrl" -> routes.IngameController.game(gameId).url,
-        "content" -> IngameController.returnInnerHTML(game.get, game.get.logic.getCurrentState, request.user).toString()
+        "content" -> returnInnerHTML(game.get, request.user).toString()
      ))
    } else {
      val throwable = result.failed.get
@@ -409,35 +436,3 @@ class IngameController @Inject()(
  }

 }
-
-object IngameController {
-
-  def returnInnerHTML(gameLobby: GameLobby, gameState: GameState, user: User): Html = {
-    gameState match {
-      case Lobby => views.html.lobby.lobby(Some(user), gameLobby)
-      case InGame =>
-        views.html.ingame.ingame(
-          gameLobby.getPlayerByUser(user),
-          gameLobby
-        )
-      case SelectTrump =>
-        views.html.ingame.selecttrump(
-          gameLobby.getPlayerByUser(user),
-          gameLobby
-        )
-      case TieBreak =>
-        views.html.ingame.tie(
-          gameLobby.getPlayerByUser(user),
-          gameLobby
-        )
-      case FinishedMatch =>
-        views.html.ingame.finishedMatch(
-          Some(user),
-          gameLobby
-        )
-      case _ =>
-        throw new IllegalStateException(s"Invalid game state for in-game view. GameId: ${gameLobby.id}" + s" State: ${gameLobby.logic.getCurrentState}")
-    }
-  }
-  
-}
--- a/knockoutwhistweb/app/controllers/MainMenuController.scala
+++ b/knockoutwhistweb/app/controllers/MainMenuController.scala
@@ -16,7 +16,8 @@ import javax.inject.*
@Singleton
 class MainMenuController @Inject()(
                                    val controllerComponents: ControllerComponents,
-                                    val authAction: AuthAction
+                                    val authAction: AuthAction,
+                                    val ingameController: IngameController
                                  ) extends BaseController {

  // Pass the request-handling function directly to authAction (no nested Action)
@@ -45,7 +46,7 @@ class MainMenuController @Inject()(
      Ok(Json.obj(
        "status" -> "success",
        "redirectUrl" -> routes.IngameController.game(gameLobby.id).url,
-        "content" -> IngameController.returnInnerHTML(gameLobby, gameLobby.logic.getCurrentState, request.user).toString
+        "content" -> ingameController.returnInnerHTML(gameLobby, request.user).toString
      ))
    } else {
      BadRequest(Json.obj(
@@ -69,7 +70,7 @@ class MainMenuController @Inject()(
          Ok(Json.obj(
            "status" -> "success",
            "redirectUrl" -> routes.IngameController.game(g.id).url,
-            "content" -> IngameController.returnInnerHTML(g, g.logic.getCurrentState, request.user).toString
+            "content" -> ingameController.returnInnerHTML(g, request.user).toString
          ))
        case None =>
          NotFound(Json.obj(
--- a/knockoutwhistweb/app/model/sessions/UserSession.scala
+++ b/knockoutwhistweb/app/model/sessions/UserSession.scala
@@ -26,7 +26,6 @@ class UserSession(val user: User, val host: Boolean, val gameLobby: GameLobby) e
        else canInteract = Some(InteractionType.Card)
      case _ =>
    }
-    websocketActor.foreach(_.transmitEventToClient(event))
  }

  override def id: UUID = user.id
--- a/knockoutwhistweb/app/model/sessions/UserWebsocketActor.scala
+++ b/knockoutwhistweb/app/model/sessions/UserWebsocketActor.scala
@@ -12,19 +12,13 @@ class UserWebsocketActor(
                          session: UserSession
                        ) extends Actor {

-  {
-    session.lock.lock()
-    if (session.websocketActor.isDefined) {
-      val otherWebsocket = session.websocketActor.get
-      otherWebsocket.transmitTextToClient("Error: Multiple websocket connections detected. Closing your connection.")
-      context.stop(otherWebsocket.self)
-      transmitTextToClient("Previous websocket connection closed. You are now connected.")
-    }
+  if (session.websocketActor.isDefined) {
+    session.websocketActor.foreach(actor => actor.transmitTextToClient("Error: Multiple websocket connections detected. Closing this connection."))
+    context.stop(self)
+  } else {
    session.websocketActor = Some(this)
-    session.lock.unlock()
  }

-
  override def receive: Receive = {
    case msg: String =>
      val jsonObject = Try {
@@ -67,10 +61,6 @@ class UserWebsocketActor(
      ))
      return
    }
-    val statusOpt = (json \ "status").asOpt[String]
-    if (statusOpt.isDefined) {
-      return
-    }
    val event = eventOpt.get
    val data = (json \ "data").asOpt[JsObject].getOrElse(Json.obj())
    val result = Try {
@@ -92,12 +82,13 @@ class UserWebsocketActor(
    }
  }

-  def transmitJsonToClient(jsonObj: JsValue): Unit = {
-    transmitTextToClient(jsonObj.toString())
+  def transmitJsonToClient(jsonObj: JsObject): Unit = {
+    out ! jsonObj.toString()
  }

  def transmitEventToClient(event: SimpleEvent): Unit = {
-    transmitJsonToClient(WebsocketEventMapper.toJson(event, session))
+    val jsonString = WebsocketEventMapper.toJson(event)
+    out ! jsonString
  }

 }
--- a/knockoutwhistweb/app/util/WebsocketEventMapper.scala
+++ b/knockoutwhistweb/app/util/WebsocketEventMapper.scala
@@ -1,12 +1,10 @@
 package util

 import de.knockoutwhist.utils.events.SimpleEvent
-import logic.game.GameLobby
-import model.sessions.UserSession
 import play.api.libs.json.{JsValue, Json}
 import tools.jackson.databind.json.JsonMapper
 import tools.jackson.module.scala.ScalaModule
-import util.mapper.{CardPlayedEventMapper, GameStateEventMapper, ReceivedHandEventMapper, SimpleEventMapper}
+import util.mapper.{ReceivedHandEventMapper, SimpleEventMapper}

 object WebsocketEventMapper {

@@ -25,18 +23,11 @@ object WebsocketEventMapper {
  
  // Register all custom mappers here
  registerCustomMapper(ReceivedHandEventMapper)
-  registerCustomMapper(GameStateEventMapper)
-  registerCustomMapper(CardPlayedEventMapper)
  
-  def toJson(obj: SimpleEvent, session: UserSession): JsValue = {
-    val data: Option[JsValue] = if (customMappers.contains(obj.id)) {
-      Some(customMappers(obj.id).toJson(obj, session))
-    }else {
-      None
-    }
-    if (data.isEmpty) {
-      return Json.obj()
-    }
+  def toJson(obj: SimpleEvent): JsValue = {
+    val data = if (customMappers.contains(obj.id)) {
+      return customMappers(obj.id).toJson(obj)
+    }else Json.parse(mapper.writeValueAsString(obj))
    Json.obj(
      "id" -> ("request-" + java.util.UUID.randomUUID().toString),
      "event" -> obj.id,
--- a/knockoutwhistweb/app/util/mapper/CardPlayedEventMapper.scala
+++ b/knockoutwhistweb/app/util/mapper/CardPlayedEventMapper.scala
@@ -1,20 +0,0 @@
-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)
-    )
-  }
-}
--- a/knockoutwhistweb/app/util/mapper/GameStateEventMapper.scala
+++ b/knockoutwhistweb/app/util/mapper/GameStateEventMapper.scala
@@ -1,18 +0,0 @@
-package util.mapper
-
-import controllers.IngameController
-import de.knockoutwhist.events.global.GameStateChangeEvent
-import model.sessions.UserSession
-import play.api.libs.json.{JsObject, Json}
-
-object GameStateEventMapper extends SimpleEventMapper[GameStateChangeEvent] {
-
-  override def id: String = "GameStateChangeEvent"
-
-  override def toJson(event: GameStateChangeEvent, session: UserSession): JsObject = {
-    Json.obj(
-      //Title
-      "content" -> IngameController.returnInnerHTML(session.gameLobby, event.newState, session.user).toString
-    )
-  }
-}
--- a/knockoutwhistweb/app/util/mapper/ReceivedHandEventMapper.scala
+++ b/knockoutwhistweb/app/util/mapper/ReceivedHandEventMapper.scala
@@ -1,14 +1,13 @@
 package util.mapper

 import de.knockoutwhist.events.player.ReceivedHandEvent
-import model.sessions.UserSession
-import play.api.libs.json.{JsObject, Json}
+import play.api.libs.json.{JsArray, JsObject, Json}
 import util.WebUIUtils

 object ReceivedHandEventMapper extends SimpleEventMapper[ReceivedHandEvent] {

  override def id: String = "ReceivedHandEvent"
-  override def toJson(event: ReceivedHandEvent, session: UserSession): JsObject = {
+  override def toJson(event: ReceivedHandEvent): JsObject = {
    Json.obj(
      "dog" -> event.player.isInDogLife,
      "hand" -> event.player.currentHand().map(hand => WebUIUtils.handToJson(hand))
--- a/knockoutwhistweb/app/util/mapper/SimpleEventMapper.scala
+++ b/knockoutwhistweb/app/util/mapper/SimpleEventMapper.scala
@@ -1,13 +1,11 @@
 package util.mapper

 import de.knockoutwhist.utils.events.SimpleEvent
-import logic.game.GameLobby
-import model.sessions.UserSession
 import play.api.libs.json.JsObject

 trait SimpleEventMapper[T <: SimpleEvent] {
  
  def id: String
-  def toJson(event: T, session: UserSession): JsObject
+  def toJson(event: T): JsObject

 }
--- a/knockoutwhistweb/app/views/ingame/ingame.scala.html
+++ b/knockoutwhistweb/app/views/ingame/ingame.scala.html
@@ -10,12 +10,8 @@
            <div class="row ms-4 me-4">
                <div class="col-4 mt-5 text-start">
                    <h4 class="fw-semibold mb-1">Current Player</h4>
-                    @if(gamelobby.getLogic.getCurrentPlayer.isDefined) {
-                        <p class="fs-5 text-primary" id="current-player-name">@gamelobby.getLogic.getCurrentPlayer.get.name</p>
-                    }else {
-                        <p class="fs-5 text-primary" id="current-player-name">---</p>
-                    }
-                    @if(gamelobby.getLogic.getPlayerQueue.isDefined && gamelobby.getLogic.getCurrentMatch && !TrickUtil.isOver(gamelobby.getLogic.getCurrentMatch.get, gamelobby.getLogic.getPlayerQueue.get)) {
+                    <p class="fs-5 text-primary" id="current-player-name">@gamelobby.getLogic.getCurrentPlayer.get.name</p>
+                    @if(!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>
@@ -33,56 +29,41 @@
                            <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{
+                        @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>
                        }

-
                    </div>
                    <div class="d-flex justify-content-center g-3 mb-5" id="trick-cards-container">
-                        @if(gamelobby.getLogic.getCurrentTrick.isEmpty || gamelobby.getLogic.getCurrentTrick.get.cards.isEmpty) {
-                            <div class="col-auto">
-                            </div>
-                        } else {
-                            @for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) {
-                                <div class="col-auto">
-                                    <div class="card text-center shadow-sm border-0 bg-transparent" style="width: 7rem;
-                                        backdrop-filter: blur(4px);">
-                                        <div class="p-2">
-                                            @util.WebUIUtils.cardtoImage(cardplayed) width="100%"/>
-                                        </div>
-                                        <div class="card-body p-2 bg-transparent">
-                                            <small class="fw-semibold text-secondary">@player</small>
-                                        </div>
-                                    </div>
+                    @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>
-                    }
+                    <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) {
+                    @if(gamelobby.getLogic.getCurrentTrick.get.firstCard.isDefined) {
                        @util.WebUIUtils.cardtoImage(gamelobby.getLogic.getCurrentTrick.get.firstCard.get)
                        width="80px"/>
                    } else {
@@ -98,23 +79,19 @@
                <div class="row justify-content-center ingame-cards-slide @{
                    !gamelobby.logic.getCurrentPlayer.contains(player) ? "inactive" |: ""
                }" id="card-slide">
-                    @if(player.currentHand().isEmpty || player.currentHand().get.cards.isEmpty) {
-
-                    } else {
-                        @for(i <- player.currentHand().get.cards.indices) {
-                            <div class="col-auto handcard" style="border-radius: 6px">
-                                <div class="btn btn-outline-light p-0 border-0 shadow-none" data-card-id="@i" style="border-radius: 6px" onclick="handlePlayCard(this, '@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>
-                                }
+                @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>
--- a/knockoutwhistweb/app/views/ingame/selecttrump.scala.html
+++ b/knockoutwhistweb/app/views/ingame/selecttrump.scala.html
@@ -10,51 +10,49 @@
                            <h3 class="mb-0">Select Trump Suit</h3>
                        </div>
                        <div class="card-body">
-                            @if(gamelobby.logic.getCurrentMatch.isDefined) {
-                                @if(player.equals(gamelobby.logic.getCurrentMatch.get.roundlist.last.winner.get)) {
-                                    <div class="alert alert-info" role="alert" aria-live="polite">
-                                        You (@player.toString) won the last round. Choose the trump suit for the next round.
-                                    </div>
+                            @if(player.equals(gamelobby.logic.getCurrentMatch.get.roundlist.last.winner.get)) {
+                                <div class="alert alert-info" role="alert" aria-live="polite">
+                                    You (@player.toString) won the last round. Choose the trump suit for the next round.
+                                </div>

-                                    <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')">
-                                                @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')">
-                                                @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')">
-                                                @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')">
-                                                @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Clubs))
-                                                width="120px" style="border-radius: 6px"/>
-                                            </div>
+                                <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')">
+                                            @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="row justify-content-center ingame-cards-slide" id="card-slide">
-                                    @for(i <- player.currentHand().get.cards.indices) {
-                                        <div class="col-auto" style="border-radius: 6px">
-                                            @util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
+                                    <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')">
+                                            @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>
-                                } else {
-                                    <div class="alert alert-warning" role="alert" aria-live="polite">
-                                        @gamelobby.logic.getCurrentMatch.get.roundlist.last.winner.get.name
-                                        is choosing a trumpsuit. The new round will start once a suit is picked.
+                                    <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')">
+                                            @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')">
+                                            @util.WebUIUtils.cardtoImage(de.knockoutwhist.cards.Card(de.knockoutwhist.cards.CardValue.Ace, de.knockoutwhist.cards.Suit.Clubs))
+                                            width="120px" style="border-radius: 6px"/>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="row justify-content-center ingame-cards-slide" id="card-slide">
+                                @for(i <- player.currentHand().get.cards.indices) {
+                                    <div class="col-auto" style="border-radius: 6px">
+                                        @util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
                                    </div>
                                }
+                                </div>
+                            } else {
+                                <div class="alert alert-warning" role="alert" aria-live="polite">
+                                    @gamelobby.logic.getCurrentMatch.get.roundlist.last.winner.get.name
+                                    is choosing a trumpsuit. The new round will start once a suit is picked.
+                                </div>
                            }
                        </div>
                    </div>
--- a/knockoutwhistweb/app/views/main.scala.html
+++ b/knockoutwhistweb/app/views/main.scala.html
@@ -18,17 +18,16 @@
        <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/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="@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>
-    <script src="@routes.Assets.versioned("javascripts/interact.js")" type="text/javascript"></script>
-    <script src="@routes.Assets.versioned("javascripts/main.js")" type="text/javascript"></script>
-
    <body class="d-flex flex-column min-vh-100" id="main-body">
        @* And here's where we render the `Html` object containing
        * the page content. *@
        @content
    </body>
+    <script src="@routes.JavaScriptRoutingController.javascriptRoutes()" type="text/javascript"></script>
+    <script src="@routes.Assets.versioned("javascripts/main.js")" type="text/javascript"></script>
+    <script src="@routes.Assets.versioned("../../public/javascripts/websocket.js")" type="text/javascript"></script>
+    <script src="@routes.Assets.versioned("../../public/javascripts/events.js")" type="text/javascript"></script>
+    <script src="@routes.Assets.versioned("../../public/javascripts/interact.js")" type="text/javascript"></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>
 </html>
--- a/knockoutwhistweb/public/javascripts/events.js
+++ b/knockoutwhistweb/public/javascripts/events.js
@@ -39,51 +39,4 @@ function receiveHandEvent(eventData) {
    handElement.html(newHtml);
 }

-function receiveGameStateChange(eventData) {
-    const content = eventData.content;
-    const title = eventData.title || 'Knockout Whist';
-
-    exchangeBody(content, title);
-}
-function receiveCardPlayedEvent(eventData) {
-    const firstCard = eventData.firstCard;
-    const playedCards = eventData.playedCards;
-
-    const trickCardsContainer = $('#trick-cards-container');
-    const firstCardContainer = $('#first-card-container')
-
-    let trickHTML = '';
-    playedCards.forEach(cardCombo => {
-        trickHTML += `
-                            <div class="col-auto">
-                                <div class="card text-center shadow-sm border-0 bg-transparent" style="width: 7rem; backdrop-filter: blur(4px);">
-                                    <div class="p-2">
-                                        <img src="/assets/images/cards/${cardCombo.cardId}.png" width="100%" alt="${cardCombo.cardId}"/>
-                                    </div>
-                                    <div class="card-body p-2 bg-transparent">
-                                        <small class="fw-semibold text-secondary">${cardCombo.player}</small>
-                                    </div>
-                                </div>
-                            </div>
-                        `;
-    });
-    trickCardsContainer.html(trickHTML);
-
-    let altText;
-    let imageSrc;
-    if (firstCard === "BLANK") {
-        imageSrc = "/assets/images/cards/1B.png";
-        altText = "Blank Card";
-    } else {
-        imageSrc = `/assets/images/cards/${firstCard}.png`;
-        altText = `Card ${firstCard}`;
-    }
-
-    const newFirstCardHTML = `
-                        <img src="${imageSrc}" alt="${altText}" width="80px" style="border-radius: 6px"/>
-                    `;
-    firstCardContainer.html(newFirstCardHTML);
-}
 onEvent("ReceivedHandEvent", receiveHandEvent)
-onEvent("GameStateChangeEvent", receiveGameStateChange)
-onEvent("CardPlayedEvent", receiveCardPlayedEvent)
--- a/knockoutwhistweb/public/javascripts/main.js
+++ b/knockoutwhistweb/public/javascripts/main.js
@@ -217,6 +217,3 @@ function navSpa(page, title) {
    });
    return false
 }
-
-
-globalThis.exchangeBody = exchangeBody;
--- a/knockoutwhistweb/public/javascripts/websocket.js
+++ b/knockoutwhistweb/public/javascripts/websocket.js
@@ -1,7 +1,10 @@
+type EventHandler = (data: any) => any | Promise<any>;
+
 // javascript
 let ws = null; // will be created by connectWebSocket()
-const pending = new Map(); // id -> { resolve, reject, timer }
-const handlers = new Map(); // eventType -> handler(data) -> (value|Promise)
+const pending: Map<string, any> = new Map(); // id -> { resolve, reject, timer }
+const handlers: Map<string, EventHandler> = new Map(); // eventType -> handler(data) -> (value|Promise)
+

 let timer = null;

@@ -38,8 +41,8 @@ function setupSocketHandlers(socket) {

        if (id && eventType) {
            const handler = handlers.get(eventType);
-            const sendResponse = (result) => {
-                const response = {id: id, event: eventType, status: result};
+            const sendResponse = (respData) => {
+                const response = {id: id, event: eventType, data: respData === undefined ? {} : respData};
                if (socket && socket.readyState === WebSocket.OPEN) {
                    socket.send(JSON.stringify(response));
                } else {
@@ -49,17 +52,16 @@ function setupSocketHandlers(socket) {

            if (!handler) {
                // no handler: respond with an error object in data so server can fail it
-                console.warn("No handler for event:", eventType);
                sendResponse({error: "No handler for event: " + eventType});
                return;
            }

            try {
                Promise.resolve(handler(data === undefined ? {} : data))
-                    .then(_ => sendResponse("success"))
-                    .catch(_ => sendResponse("error"));
+                    .then(result => sendResponse(result))
+                    .catch(err => sendResponse({error: err?.message ? err.message : String(err)}));
            } catch (err) {
-                sendResponse("error");
+                sendResponse({error: err?.message ? err.message : String(err)});
            }
        }
    };
@@ -180,7 +182,7 @@ function sendEventAndWait(eventType, eventData, timeoutMs = 10000) {
    return p;
 }

-function onEvent(eventType, handler) {
+function onEvent(eventType: string, handler: EventHandler) {
    handlers.set(eventType, handler);
 }

--- a/versions.env
+++ b/versions.env
@@ -1,3 +1,3 @@
-MAJOR=4
-MINOR=2
-PATCH=0
+MAJOR=3
+MINOR=0
+PATCH=1