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

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 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;
@@ -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);
 }