feat(ui): Websocket

Started implementing functionality to the Websocket

knockoutwhistweb/public/javascripts/events.js

@@ -133,9 +133,9 @@ function trickEndEvent(eventData) {
     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%" class="text-truncate">${player}</div>
                                     <div style="width: 50%">
-                                    '${playercounts.get(player)}'
+                                    ${playercounts.get(player)}
                                     </div>
                                 </div>
         `
@@ -143,22 +143,23 @@ function trickEndEvent(eventData) {
     tricktable.html(newHtml);
 }
 function newTrickEvent() {
-    const firstCardContainer = $('first-card-container');
+    const firstCardContainer = $('#first-card-container');
 
     let newHtml = '';
-
     newHtml += `
-        <img src="images/cards/1B.png" alt="Blank Card" width="80px"/>
+        <img src="/assets/images/cards/1B.png" alt="Blank Card" width="80px" style="border-radius: 6px"/>
     `;
-
+    console.log("NEW TRICK EVENT")
     firstCardContainer.html(newHtml);
 }
 function requestCardEvent(eventData) {
     const player = eventData.player;
     const handElement = $('#card-slide')
+    console.log("PLAY A CARD")
     handElement.removeClass('inactive');
 }
-//alertMessage("It worked!")
+//alertMessage("JANIS DU DUMMER WICHSER")
+//alertMessage("NOCHMAL DUMMER WICHSER")
 
 
 function receiveGameStateChange(eventData) {
@@ -212,4 +213,6 @@ onEvent("NewRoundEvent", newRoundEvent)
 onEvent("TrickEndEvent", trickEndEvent)
 onEvent("NewTrickEvent", newTrickEvent)
 onEvent("RequestCardEvent", requestCardEvent)
-onEvent("CardPlayedEvent", receiveCardPlayedEvent)
+onEvent("CardPlayedEvent", receiveCardPlayedEvent)
+
+globalThis.alertMessage = alertMessage

knockoutwhistweb/public/javascripts/interact.js

@@ -1,5 +1,40 @@
-function handlePlayCard(card, dog) {
-  // TODO needs implementation
+function handlePlayCard(cardIndex, dog) {
+    const cardslide = $('#card-slide')
+    cardslide.addClass("inactive")
+
+    const payload = {
+        cardindex: cardIndex,
+        isDog: dog
+    }
+    sendEventAndWait("play Card", payload).then(
+        () => {
+            console.debug("play card successful")
+            const datacardid = $(`#${cardIndex}`)
+            datacardid.parent('.handcard').remove();
+            cardslide.find('.handcard').each(function(newIndex) {
+
+                const $innerButton = $(this).find('.btn');
+
+                $innerButton.attr('id', newIndex);
+                $innerButton.attr('data-card-id', newIndex);
+
+                const isInDogLife = $innerButton.attr('onclick').includes("'true'") ? 'true' : 'false';
+                $innerButton.attr('onclick', `handlePlayCard(${newIndex}, '${isInDogLife}')`);
+
+                console.debug(`Re-indexed card: Old index was ${$innerButton.attr('data-card-id')}, New index is ${newIndex}`);
+            });
+        }
+    ).catch(
+        (err) => {
+            const cardslide = $('#card-slide')
+            console.log("EERROOOORRR PLAYING CARD" + (err.toString() === "You can't play this card!") + err.message)
+            console.warn("play card was not successful")
+            if (err.message === "You can't play this card!") {
+                cardslide.removeClass("inactive")
+            }
+            alertMessage("You aren't allowed to play this card")
+        }
+    )
 }
 
 function handleSkipDogLife(button) {
@@ -8,4 +43,15 @@ function handleSkipDogLife(button) {
 function startGame() {
     console.log("CLICKED START GAME, SENDING EVENT...")
     sendEvent("Start Game")
+}
+
+function handleTrumpSelection(object) {
+    const $button = $(object);
+    const trumpIndex = parseInt($button.data('trump'));
+    const payload = {
+        suitIndex: trumpIndex
+    }
+    console.log("SENDING TRUMP SUIT SELECTION:", payload);
+    sendEvent("Picked Trumpsuit", payload)
+
 }

knockoutwhistweb/public/javascripts/websocket.js

@@ -31,7 +31,7 @@ function setupSocketHandlers(socket) {
             if (status === "success") {
                 entry.resolve(data === undefined ? {} : data);
             } else {
-                entry.reject(new Error(msg.error || "Server returned error"));
+                entry.reject(new Error(msg.error  || "Server returned error"));
             }
             return;
         }