fix(ui): Websocket

Fixed startGame to be correctly implemented

CHANGELOG.md

@@ -142,3 +142,10 @@
 ### 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))

build.sbt

@@ -40,7 +40,7 @@ lazy val knockoutwhistweb = project.in(file("knockoutwhistweb"))
     libraryDependencies += "de.mkammerer" % "argon2-jvm" % "2.12",
     libraryDependencies += "com.auth0" % "java-jwt" % "4.5.0",
     libraryDependencies += "com.github.ben-manes.caffeine" % "caffeine" % "3.2.3",
-    libraryDependencies += "tools.jackson.module" %% "jackson-module-scala" % "3.0.2",
+    libraryDependencies += "com.fasterxml.jackson.module" %% "jackson-module-scala" % "2.16.1",
     JsEngineKeys.engineType := JsEngineKeys.EngineType.Node
   )
 

knockoutwhistweb/app/controllers/IngameController.scala

@@ -1,6 +1,7 @@
 package controllers
 
 import auth.{AuthAction, AuthenticatedRequest}
+import de.knockoutwhist.control.GameState
 import de.knockoutwhist.control.GameState.*
 import exceptions.*
 import logic.PodManager
@@ -29,7 +30,7 @@ class IngameController @Inject()(
     game match {
       case Some(g) =>
         val results = Try {
-          returnInnerHTML(g, request.user)
+          IngameController.returnInnerHTML(g, g.logic.getCurrentState, request.user)
         }
         if (results.isSuccess) {
           Ok(views.html.main("In-Game - Knockout Whist")(results.get))
@@ -41,34 +42,6 @@ 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 {
@@ -83,7 +56,7 @@ class IngameController @Inject()(
       Ok(Json.obj(
         "status" -> "success",
         "redirectUrl" -> routes.IngameController.game(gameId).url,
-        "content" -> returnInnerHTML(game.get, request.user).toString()
+        "content" -> IngameController.returnInnerHTML(game.get, game.get.logic.getCurrentState, request.user).toString()
       ))
     } else {
       val throwable = result.failed.get
@@ -436,3 +409,35 @@ 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}")
+    }
+  }
+  
+}

knockoutwhistweb/app/controllers/MainMenuController.scala

@@ -16,8 +16,7 @@ import javax.inject.*
 @Singleton
 class MainMenuController @Inject()(
                                     val controllerComponents: ControllerComponents,
-                                    val authAction: AuthAction,
-                                    val ingameController: IngameController
+                                    val authAction: AuthAction
                                   ) extends BaseController {
 
   // Pass the request-handling function directly to authAction (no nested Action)
@@ -46,7 +45,7 @@ class MainMenuController @Inject()(
       Ok(Json.obj(
         "status" -> "success",
         "redirectUrl" -> routes.IngameController.game(gameLobby.id).url,
-        "content" -> ingameController.returnInnerHTML(gameLobby, request.user).toString
+        "content" -> IngameController.returnInnerHTML(gameLobby, gameLobby.logic.getCurrentState, request.user).toString
       ))
     } else {
       BadRequest(Json.obj(
@@ -70,7 +69,7 @@ class MainMenuController @Inject()(
           Ok(Json.obj(
             "status" -> "success",
             "redirectUrl" -> routes.IngameController.game(g.id).url,
-            "content" -> ingameController.returnInnerHTML(g, request.user).toString
+            "content" -> IngameController.returnInnerHTML(g, g.logic.getCurrentState, request.user).toString
           ))
         case None =>
           NotFound(Json.obj(

knockoutwhistweb/app/logic/game/GameLobby.scala

@@ -2,7 +2,7 @@ package logic.game
 
 import de.knockoutwhist.cards.{Hand, Suit}
 import de.knockoutwhist.control.GameLogic
-import de.knockoutwhist.control.GameState.{Lobby, MainMenu}
+import de.knockoutwhist.control.GameState.{InGame, Lobby, MainMenu}
 import de.knockoutwhist.control.controllerBaseImpl.sublogic.util.{MatchUtil, PlayerUtil}
 import de.knockoutwhist.events.global.{GameStateChangeEvent, SessionClosed}
 import de.knockoutwhist.events.player.PlayerEvent
@@ -56,6 +56,9 @@ class GameLobby private(
         if (event.oldState == MainMenu && event.newState == Lobby) {
           return
         }
+        if (event.oldState == Lobby && event.newState == InGame) {
+          println("RECEIVED GAMESTATEEVENT")
+        }
         users.values.foreach(session => session.updatePlayer(event))
       case event: SimpleEvent =>
         users.values.foreach(session => session.updatePlayer(event))
@@ -68,6 +71,7 @@ class GameLobby private(
    * @param user the user who wants to start the game.
    */
   def startGame(user: User): Unit = {
+    println("STARTED GAME IN LOGIC")
     val sessionOpt = users.get(user.id)
     if (sessionOpt.isEmpty) {
       throw new NotInThisGameException("You are not in this game!")

knockoutwhistweb/app/model/sessions/UserSession.scala

@@ -2,9 +2,11 @@ package model.sessions
 
 import de.knockoutwhist.events.player.{RequestCardEvent, RequestTieChoiceEvent, RequestTrumpSuitEvent}
 import de.knockoutwhist.utils.events.SimpleEvent
+import logic.PodManager
 import logic.game.GameLobby
 import model.users.User
-import play.api.libs.json.JsObject
+import play.api.libs.json.Format.GenericFormat
+import play.api.libs.json.{JsError, JsObject, JsResult, JsSuccess, JsValue}
 
 import java.util.UUID
 import java.util.concurrent.locks.ReentrantLock
@@ -26,6 +28,7 @@ class UserSession(val user: User, val host: Boolean, val gameLobby: GameLobby) e
         else canInteract = Some(InteractionType.Card)
       case _ =>
     }
+    websocketActor.foreach(_.transmitEventToClient(event, gameLobby))
   }
 
   override def id: UUID = user.id
@@ -36,13 +39,16 @@ class UserSession(val user: User, val host: Boolean, val gameLobby: GameLobby) e
     canInteract = None
   }
 
-  def handleWebResponse(eventType: String, data: JsObject): Unit = {
+  def handleWebResponse(eventType: String, data: JsObject, user: User, gameLobby: GameLobby): Unit = {
     lock.lock()
     Try {
       eventType match {
         case "Ping" =>
           // No action needed for Ping
           ()
+        case "Start Game" =>
+          println("INSIDE HANDLE WEB RESPONSE" + data)
+          gameLobby.startGame(user)
       }
     }
     lock.unlock()

knockoutwhistweb/app/model/sessions/UserWebsocketActor.scala

@@ -12,12 +12,18 @@ class UserWebsocketActor(
                           session: UserSession
                         ) extends Actor {
 
+  {
+    session.lock.lock()
     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)
+      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.")
     }
+    session.websocketActor = Some(this)
+    session.lock.unlock()
+  }
+
 
   override def receive: Receive = {
     case msg: String =>
@@ -61,10 +67,14 @@ 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 {
-      session.handleWebResponse(event, data)
+      session.handleWebResponse(event, data, session.user, session.gameLobby)
     }
     if (result.isSuccess) {
       transmitJsonToClient(Json.obj(
@@ -82,13 +92,12 @@ class UserWebsocketActor(
     }
   }
 
-  def transmitJsonToClient(jsonObj: JsObject): Unit = {
-    out ! jsonObj.toString()
+  def transmitJsonToClient(jsonObj: JsValue): Unit = {
+    transmitTextToClient(jsonObj.toString())
   }
 
   def transmitEventToClient(event: SimpleEvent): Unit = {
-    val jsonString = WebsocketEventMapper.toJsonString(event)
-    out ! jsonString
+    transmitJsonToClient(WebsocketEventMapper.toJson(event, session))
   }
 
 }

knockoutwhistweb/app/model/users/User.scala

@@ -1,5 +1,7 @@
 package model.users
 
+import play.api.libs.json.{Format, Json}
+
 import java.util.UUID
 
 case class User(
@@ -16,5 +18,4 @@ case class User(
   private def withPasswordHash(newPasswordHash: String): User = {
     this.copy(passwordHash = newPasswordHash)
   }
-
 }

knockoutwhistweb/app/util/WebUIUtils.scala

@@ -1,8 +1,9 @@
 package util
 
-import de.knockoutwhist.cards.Card
+import de.knockoutwhist.cards.{Card, Hand}
 import de.knockoutwhist.cards.CardValue.*
 import de.knockoutwhist.cards.Suit.{Clubs, Diamonds, Hearts, Spades}
+import play.api.libs.json.{JsArray, Json}
 import play.twirl.api.Html
 import scalafx.scene.image.Image
 
@@ -36,4 +37,22 @@ object WebUIUtils {
     f"$cv$s"
   }
 
+  /**
+   * Map a Hand to a JsArray of cards
+   * Per card it has the string and the index in the hand
+   * @param hand
+   * @return
+   */
+  def handToJson(hand: Hand): JsArray = {
+    val cards = hand.cards
+    JsArray(
+      cards.zipWithIndex.map { case (card, index) =>
+        Json.obj(
+          "idx" -> index,
+          "card" -> cardtoString(card)
+        )
+      }
+    )
+  }
+
 }

knockoutwhistweb/app/util/WebsocketEventMapper.scala

@@ -1,8 +1,12 @@
 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.{GameStateEventMapper, ReceivedHandEventMapper, SimpleEventMapper}
 
 object WebsocketEventMapper {
 
@@ -13,8 +17,34 @@ object WebsocketEventMapper {
 
   private val mapper = JsonMapper.builder().addModule(scalaModule).build()
 
-  def toJsonString(obj: SimpleEvent): String = {
-    mapper.writeValueAsString(obj)
+  private var customMappers: Map[String,SimpleEventMapper[SimpleEvent]] = Map()
+
+  private def registerCustomMapper[T <: SimpleEvent](mapper: SimpleEventMapper[T]): Unit = {
+    customMappers = customMappers + (mapper.id -> mapper.asInstanceOf[SimpleEventMapper[SimpleEvent]])
+  }
+  
+  // Register all custom mappers here
+  registerCustomMapper(ReceivedHandEventMapper)
+  registerCustomMapper(GameStateEventMapper)
+  registerCustomMapper(NewRoundEventMapper)
+  registerCustomMapper(NewTrickEventMapper)
+  registerCustomMapper(TrickEndEventMapper)
+  registerCustomMapper(RequestCardEventMapper)
+
+  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()
+    }
+    Json.obj(
+      "id" -> ("request-" + java.util.UUID.randomUUID().toString),
+      "event" -> obj.id,
+      "data" -> data
+    )
   }
 
 }

knockoutwhistweb/app/util/mapper/GameStateChangeEventMapper.scala

@@ -0,0 +1,18 @@
+package util.mapper
+
+import de.knockoutwhist.events.global.GameStateChangeEvent
+import logic.game.GameLobby
+import play.api.libs.json.{JsObject, Json}
+
+object GameStateChangeEventMapper extends SimpleEventMapper[GameStateChangeEvent]{
+  override def id: String = "GameStateChangeEvent"
+
+  override def toJson(event: GameStateChangeEvent, gameLobby: GameLobby): JsObject = {
+    println("CALLED toJSON FOR GAMESTATECHANGE")
+    Json.obj(
+      "oldState" -> event.oldState.toString,
+      "newState" -> event.newState.toString,
+      "gameLobby" -> gameLobby.id
+    )
+  }
+}

knockoutwhistweb/app/util/mapper/GameStateEventMapper.scala

@@ -0,0 +1,18 @@
+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
+    )
+  }
+}

knockoutwhistweb/app/util/mapper/NewRoundEventMapper.scala

@@ -0,0 +1,16 @@
+package util.mapper
+
+import de.knockoutwhist.events.global.NewRoundEvent
+import logic.game.GameLobby
+import play.api.libs.json.{JsObject, Json}
+
+object NewRoundEventMapper extends SimpleEventMapper[NewRoundEvent]{
+  override def id: String = "NewRoundEvent"
+
+  override def toJson(event: NewRoundEvent, gameLobby: GameLobby): JsObject = {
+    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,13 @@
+package util.mapper
+
+import de.knockoutwhist.events.global.NewTrickEvent
+import logic.game.GameLobby
+import play.api.libs.json.{JsObject, Json}
+
+object NewTrickEventMapper extends SimpleEventMapper[NewTrickEvent]{
+  override def id: String = "NewTrickEvent"
+
+  override def toJson(event: NewTrickEvent, gameLobby: GameLobby): JsObject = {
+    Json.obj()
+  }
+}

knockoutwhistweb/app/util/mapper/ReceivedHandEventMapper.scala

@@ -0,0 +1,17 @@
+package util.mapper
+
+import de.knockoutwhist.events.player.ReceivedHandEvent
+import model.sessions.UserSession
+import play.api.libs.json.{JsObject, Json}
+import util.WebUIUtils
+
+object ReceivedHandEventMapper extends SimpleEventMapper[ReceivedHandEvent] {
+
+  override def id: String = "ReceivedHandEvent"
+  override def toJson(event: ReceivedHandEvent, session: UserSession): JsObject = {
+    Json.obj(
+      "dog" -> event.player.isInDogLife,
+      "hand" -> event.player.currentHand().map(hand => WebUIUtils.handToJson(hand))
+    )
+  }
+}

knockoutwhistweb/app/util/mapper/RequestCardEventMapper.scala

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

knockoutwhistweb/app/util/mapper/SimpleEventMapper.scala

@@ -0,0 +1,13 @@
+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
+
+}

knockoutwhistweb/app/util/mapper/TrickEndEventMapper.scala

@@ -0,0 +1,18 @@
+package util.mapper
+
+import de.knockoutwhist.events.global.TrickEndEvent
+import de.knockoutwhist.rounds.Trick
+import logic.game.GameLobby
+import play.api.libs.json.{JsObject, Json}
+
+object TrickEndEventMapper extends SimpleEventMapper[TrickEndEvent]{
+  override def id: String = "TrickEndEvent"
+
+  override def toJson(event: TrickEndEvent, gameLobby: GameLobby): JsObject = {
+    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/views/ingame/ingame.scala.html

@@ -10,8 +10,12 @@
             <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>
-                    @if(!TrickUtil.isOver(gamelobby.getLogic.getCurrentMatch.get, gamelobby.getLogic.getPlayerQueue.get)) {
+                    }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>
@@ -29,6 +33,7 @@
                             <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)
                             }) {
@@ -39,9 +44,18 @@
                                     </div>
                                 </div>
                             }
+                        }else{
+                            <div class="d-flex justify-content-between score-row pt-1">
+                            </div>
+                        }
+
 
                     </div>
                     <div class="d-flex justify-content-center g-3 mb-5" id="trick-cards-container">
+                        @if(gamelobby.getLogic.getCurrentTrick.isEmpty || gamelobby.getLogic.getCurrentTrick.get.cards.isEmpty) {
+                            <div class="col-auto">
+                            </div>
+                        } else {
                             @for((cardplayed, player) <- gamelobby.getLogic.getCurrentTrick.get.cards) {
                                 <div class="col-auto">
                                     <div class="card text-center shadow-sm border-0 bg-transparent" style="width: 7rem;
@@ -55,15 +69,20 @@
                                     </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.get.firstCard.isDefined) {
+                    @if(gamelobby.getLogic.getCurrentTrick.isDefined && gamelobby.getLogic.getCurrentTrick.get.firstCard.isDefined) {
                         @util.WebUIUtils.cardtoImage(gamelobby.getLogic.getCurrentTrick.get.firstCard.get)
                         width="80px"/>
                     } else {
@@ -79,6 +98,9 @@
                 <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')">
@@ -92,6 +114,7 @@
                                 }
                             </div>
                         }
+                    }
                 </div>
             </div>
         </div>

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

@@ -10,6 +10,7 @@
                             <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.
@@ -54,6 +55,7 @@
                                         is choosing a trumpsuit. The new round will start once a suit is picked.
                                     </div>
                                 }
+                            }
                         </div>
                     </div>
                 </div>

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

@@ -40,7 +40,7 @@
             }
             </div>
             <div class="col-12 text-center mb-5">
-                <div class="btn btn-success" onclick="startGame('@gamelobby.id')">Start Game</div>
+                <div class="btn btn-success" onclick="startGame('@gamelobby.id', '@user.get.id', '@user.get.name','@user.get.passwordHash', @user.get.internalId)">Start Game</div>
             </div>
         } else {
             <div id="players" class="justify-content-center align-items-center d-flex">
@@ -69,6 +69,7 @@
     </div>
 </main>
 <script>
+/*
         function waitForFunction(name, checkInterval = 100) {
             return new Promise(resolve => {
                 const timer = setInterval(() => {
@@ -80,5 +81,6 @@
             });
         }
         waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
+*/
     connectWebSocket()
 </script>

knockoutwhistweb/app/views/main.scala.html

@@ -18,14 +18,17 @@
         <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="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>

knockoutwhistweb/app/views/mainmenu/creategame.scala.html

@@ -30,4 +30,4 @@
 </main>
 <script>
             disconnectWebSocket();
-    </script>
+</script>

knockoutwhistweb/public/javascripts/events.js

@@ -0,0 +1,176 @@
+function alertMessage(message) {
+    let newHtml = '';
+    const alertId = `alert-${Date.now()}`;
+    const fadeTime = 500;
+    const duration = 5000;
+    newHtml += `
+        <div class="fixed-top d-flex justify-content-center mt-3" style="z-index: 1050;">
+        <div
+        id="${alertId}" class="alert alert-primary d-flex align-items-center p-2 mb-0 w-auto" role="alert" style="display: none;">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
+                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+            </svg>
+            <div class="small">
+                <small>${message}</small>
+            </div>
+        </div>
+    </div>
+    `;
+    $('#main-body').prepend(newHtml);
+    const $notice = $(`#${alertId}`);
+    $notice.fadeIn(fadeTime);
+    setTimeout(function() {
+        $notice.fadeOut(fadeTime, function() {
+            $(this).parent().remove();
+        });
+    }, duration);
+}
+function receiveHandEvent(eventData) {
+    //Data
+    const dog = eventData.dog;
+    const hand = eventData.hand;
+
+    const handElement = $('#card-slide');
+    handElement.addClass('ingame-cards-slide')
+
+    let newHtml = '';
+
+    //Build Hand Container
+    hand.forEach((card) => {
+        //Data
+        const idx = card.idx
+        const cardS = card.card;
+
+        const cardHtml = `
+                        <div class="col-auto handcard" style="border-radius: 6px">
+                            <div class="btn btn-outline-light p-0 border-0 shadow-none" 
+                                 data-card-id="${idx}" 
+                                 style="border-radius: 6px" 
+                                 onclick="handlePlayCard(this, '${dog}')">
+                                
+                                <img src="/assets/images/cards/${cardS}.png" width="120px" style="border-radius: 6px" alt="${cardS}"/>
+                            </div>
+                        </div>
+                    `;
+        newHtml += cardHtml;
+    });
+
+    //Build dog if needed
+    if (dog) {
+        newHtml += `
+                        <div class="mt-2">
+                            <button class="btn btn-danger" onclick="handleSkipDogLife(this)">Skip Turn</button>
+                        </div>
+                    `;
+    }
+    handElement.html(newHtml);
+}
+function newRoundEvent(eventData) {
+    const trumpsuit = eventData.trumpsuit;
+    const players = eventData.players;
+
+    const tableElement = $('#score-table-body');
+
+
+    let tablehtml = `
+        <h4 class="fw-bold mb-3 text-black">Tricks Won</h4>
+
+                        <div class="d-flex justify-content-between score-header pb-1">
+                            <div style="width: 50%">PLAYER</div>
+                            <div style="width: 50%">TRICKS</div>
+                        </div>
+    `;
+
+    players.forEach(
+        tablehtml += `
+            <div class="d-flex justify-content-between score-row pt-1">
+                                <div style="width: 50%" class="text-truncate">'${players}'</div>
+                                <div style="width: 50%">
+                                    0
+                                </div>
+                            </div>
+        `
+    );
+    tableElement.html(tablehtml);
+
+    const trumpsuitClass = $('#trumpsuit');
+    trumpsuitClass.html(trumpsuit);
+
+}
+function trickEndEvent(eventData) {
+    const winner = eventData.playerwon;
+    const players = eventData.playersin;
+    const tricklist = eventData.tricklist;
+
+    let newHtml = '';
+
+    let tricktable = $('#score-table-body');
+
+    newHtml += `
+        <h4 class="fw-bold mb-3 text-black">Tricks Won</h4>
+
+                        <div class="d-flex justify-content-between score-header pb-1">
+                            <div style="width: 50%">PLAYER</div>
+                            <div style="width: 50%">TRICKS</div>
+                        </div>
+    `;
+    let playercounts = new Map();
+
+    players.forEach( player => {
+            playercounts.set(player, 0)
+    });
+    tricklist.forEach( player => {
+            if ( player !== "Trick in Progress" && playercounts.has(player)) {
+                playercounts.set(player, playercounts.get(player) + 1)
+            }
+        }
+    )
+    const playerorder = players.sort((playerA, playerB) => {
+        const countA = playercounts.get(playerA.name) || 0;
+        const countB = playercounts.get(playerB.name) || 0;
+        return countB - countA;
+    });
+    playerorder.forEach( player => {
+        newHtml += `
+            <div class="d-flex justify-content-between score-row pt-1">
+                                    <div style="width: 50%" class="text-truncate">'${player}'</div>
+                                    <div style="width: 50%">
+                                    '${playercounts.get(player)}'
+                                    </div>
+                                </div>
+        `
+    });
+    tricktable.html(newHtml);
+}
+function newTrickEvent() {
+    const firstCardContainer = $('first-card-container');
+
+    let newHtml = '';
+
+    newHtml += `
+        <img src="images/cards/1B.png" alt="Blank Card" width="80px"/>
+    `;
+
+    firstCardContainer.html(newHtml);
+}
+function requestCardEvent(eventData) {
+    const player = eventData.player;
+    const handElement = $('#card-slide')
+    handElement.removeClass('inactive');
+}
+//alertMessage("It worked!")
+
+
+function receiveGameStateChange(eventData) {
+    const content = eventData.content;
+    const title = eventData.title || 'Knockout Whist';
+
+    exchangeBody(content, title);
+}
+
+onEvent("ReceivedHandEvent", receiveHandEvent)
+onEvent("GameStateChangeEvent", receiveGameStateChange)
+onEvent("NewRoundEvent", newRoundEvent)
+onEvent("TrickEndEvent", trickEndEvent)
+onEvent("NewTrickEvent", newTrickEvent)
+onEvent("RequestCardEvent", requestCardEvent)

knockoutwhistweb/public/javascripts/interact.js

@@ -0,0 +1,11 @@
+function handlePlayCard(card, dog) {
+  // TODO needs implementation
+}
+
+function handleSkipDogLife(button) {
+  // TODO needs implementation
+}
+function startGame() {
+    console.log("CLICKED START GAME, SENDING EVENT...")
+    sendEvent("Start Game")
+}

knockoutwhistweb/public/javascripts/main.js

@@ -217,3 +217,6 @@ function navSpa(page, title) {
     });
     return false
 }
+
+
+globalThis.exchangeBody = exchangeBody;

knockoutwhistweb/public/javascripts/websocket.js

@@ -3,7 +3,6 @@ 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)
 
-
 let timer = null;
 
 // helper to attach message/error/close handlers to a socket
@@ -39,8 +38,8 @@ function setupSocketHandlers(socket) {
 
         if (id && eventType) {
             const handler = handlers.get(eventType);
-            const sendResponse = (respData) => {
-                const response = {id: id, event: eventType, data: respData === undefined ? {} : respData};
+            const sendResponse = (result) => {
+                const response = {id: id, event: eventType, status: result};
                 if (socket && socket.readyState === WebSocket.OPEN) {
                     socket.send(JSON.stringify(response));
                 } else {
@@ -50,16 +49,17 @@ 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(result => sendResponse(result))
-                    .catch(err => sendResponse({error: err?.message ? err.message : String(err)}));
+                    .then(_ => sendResponse("success"))
+                    .catch(_ => sendResponse("error"));
             } catch (err) {
-                sendResponse({error: err?.message ? err.message : String(err)});
+                sendResponse("error");
             }
         }
     };

versions.env

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