feat(api): Implemented card played event via websocket

knockoutwhistweb/app/util/WebsocketEventMapper.scala

@@ -6,7 +6,7 @@ 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}
+import util.mapper.{CardPlayedEventMapper, GameStateEventMapper, ReceivedHandEventMapper, SimpleEventMapper}
 
 object WebsocketEventMapper {
 
@@ -26,6 +26,7 @@ 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)) {

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/public/javascripts/events.js

@@ -45,6 +45,45 @@ function receiveGameStateChange(eventData) {
 
     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("GameStateChangeEvent", receiveGameStateChange)
+onEvent("CardPlayedEvent", receiveCardPlayedEvent)