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

CHANGELOG.md

@@ -133,3 +133,12 @@
 ### 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))

knockoutwhistweb/app/model/sessions/UserWebsocketActor.scala

@@ -87,7 +87,7 @@ class UserWebsocketActor(
   }
 
   def transmitEventToClient(event: SimpleEvent): Unit = {
-    val jsonString = WebsocketEventMapper.toJsonString(event)
+    val jsonString = WebsocketEventMapper.toJson(event)
     out ! jsonString
   }
 

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,10 @@
 package util
 
 import de.knockoutwhist.utils.events.SimpleEvent
+import play.api.libs.json.{JsValue, Json}
 import tools.jackson.databind.json.JsonMapper
 import tools.jackson.module.scala.ScalaModule
+import util.mapper.{ReceivedHandEventMapper, SimpleEventMapper}
 
 object WebsocketEventMapper {
 
@@ -13,8 +15,24 @@ object WebsocketEventMapper {
 
   private val mapper = JsonMapper.builder().addModule(scalaModule).build()
 
-  def toJsonString(obj: SimpleEvent): String = {
+  private var customMappers: Map[String,SimpleEventMapper[SimpleEvent]] = Map()
-    mapper.writeValueAsString(obj)
+
+  private def registerCustomMapper[T <: SimpleEvent](mapper: SimpleEventMapper[T]): Unit = {
+    customMappers = customMappers + (mapper.id -> mapper.asInstanceOf[SimpleEventMapper[SimpleEvent]])
+  }
+  
+  // Register all custom mappers here
+  registerCustomMapper(ReceivedHandEventMapper)
+  
+  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,
+      "data" -> data
+    )
   }
 
 }

knockoutwhistweb/app/util/mapper/ReceivedHandEventMapper.scala

@@ -0,0 +1,16 @@
+package util.mapper
+
+import de.knockoutwhist.events.player.ReceivedHandEvent
+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): JsObject = {
+    Json.obj(
+      "dog" -> event.player.isInDogLife,
+      "hand" -> event.player.currentHand().map(hand => WebUIUtils.handToJson(hand))
+    )
+  }
+}

knockoutwhistweb/app/util/mapper/SimpleEventMapper.scala

@@ -0,0 +1,11 @@
+package util.mapper
+
+import de.knockoutwhist.utils.events.SimpleEvent
+import play.api.libs.json.JsObject
+
+trait SimpleEventMapper[T <: SimpleEvent] {
+  
+  def id: String
+  def toJson(event: T): JsObject
+
+}

knockoutwhistweb/app/views/main.scala.html

@@ -26,6 +26,8 @@
     <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>

knockoutwhistweb/public/javascripts/events.js

@@ -0,0 +1,42 @@
+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);
+}
+
+onEvent("ReceivedHandEvent", receiveHandEvent)

knockoutwhistweb/public/javascripts/interact.js

@@ -0,0 +1,7 @@
+function handlePlayCard(card, dog) {
+  // TODO needs implementation
+}
+
+function handleSkipDogLife(button) {
+  // TODO needs implementation
+}

knockoutwhistweb/public/javascripts/websocket.js

@@ -1,7 +1,9 @@
+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 pending: Map<string, any> = new Map(); // id -> { resolve, reject, timer }
-const handlers = new Map(); // eventType -> handler(data) -> (value|Promise)
+const handlers: Map<string, EventHandler> = new Map(); // eventType -> handler(data) -> (value|Promise)
 
 
 let timer = null;
@@ -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);
 }
 

versions.env

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