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,14 +143,12 @@ 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"/>
     `;
-
     firstCardContainer.html(newHtml);
 }
 function requestCardEvent(eventData) {
@@ -158,7 +156,6 @@ function requestCardEvent(eventData) {
     const handElement = $('#card-slide')
     handElement.removeClass('inactive');
 }
-//alertMessage("It worked!")
 
 
 function receiveGameStateChange(eventData) {
@@ -207,37 +204,6 @@ function receiveCardPlayedEvent(eventData) {
                     `;
     firstCardContainer.html(newFirstCardHTML);
 }
-function receiveTurnEvent(eventData) {
-    const currentPlayer = eventData.currentPlayer;
-    const nextPlayers = eventData.nextPlayers;
-
-    const currentPlayerNameContainer = $('#current-player-name');
-    const nextPlayersContainer = $('#next-players-container');
-    const nextPlayerText = $('#next-players-section');
-
-    let currentPlayerName = currentPlayer.name;
-    if (currentPlayer.dog) {
-        currentPlayerName += " 🐶";
-    }
-    currentPlayerNameContainer.text(currentPlayerName);
-
-    if (nextPlayers.length === 0) {
-        nextPlayerText.hide();
-        nextPlayersContainer.html('');
-    } else {
-        nextPlayerText.show();
-        let nextPlayersHtml = '';
-        nextPlayers.forEach((player) => {
-            let playerName = player.name;
-            if (player.dog) {
-                playerName += " 🐶";
-            }
-            nextPlayersHtml += `<p className="fs-5 text-primary">${playerName}</p>`;
-        });
-        nextPlayersContainer.html(nextPlayersHtml);
-    }
-}
-
 function receiveLobbyUpdateEvent(eventData) {
     const host = eventData.host;
     const maxPlayers = eventData.maxPlayers;
@@ -349,4 +315,6 @@ onEvent("LobbyUpdateEvent", receiveLobbyUpdateEvent)
 onEvent("LeftEvent", receiveGameStateChange)
 onEvent("KickEvent", receiveKickEvent)
 onEvent("SessionClosed", receiveSessionClosedEvent)
-onEvent("TurnEvent", receiveTurnEvent)
+onEvent("TurnEvent", receiveTurnEvent)
+
+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,6 +43,17 @@ function handleSkipDogLife(button) {
 function startGame() {
     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)
+
+}
 function handleKickPlayer(playerId) {
     // TODO needs implementation
 }

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