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

#76

Reviewed-on: #83

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;
@@ -39,8 +41,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 {
@@ -56,10 +58,10 @@ function setupSocketHandlers(socket) {
 
             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");
             }
         }
     };
@@ -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);
 }