fix(api): fixes - reimplemented animations (#90)

Reviewed-on: #90
2025-11-27 09:52:00 +01:00
parent 1f96290371
commit cfcd967ce0
6 changed files with 76 additions and 51 deletions
--- a/2
+++ b/2
--- a/knockoutwhistweb/app/assets/stylesheets/main.less
+++ b/knockoutwhistweb/app/assets/stylesheets/main.less
@@ -219,10 +219,10 @@ body {

 }

-#nextPlayers {
+#next-players-container {
  display: flex;
  flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
  height: 0;

  p {
@@ -231,10 +231,6 @@ body {
  }
 }

-#invisible {
-  visibility: hidden;
-}
-
 #selecttrumpsuit {
  display: flex;
  flex-direction: column;
--- a/knockoutwhistweb/app/model/sessions/UserSession.scala
+++ b/knockoutwhistweb/app/model/sessions/UserSession.scala
@@ -41,21 +41,21 @@ class UserSession(val user: User, val host: Boolean, val gameLobby: GameLobby) e
    lock.lock()
    val result = Try {
      eventType match {
-        case "Ping" =>
+        case "ping" =>
          // No action needed for Ping
          ()
-        case "Start Game" =>
+        case "StartGame" =>
          gameLobby.startGame(user)
-        case "play Card" =>
-          val maybeCardIndex: Option[Int] = (data \ "cardindex").asOpt[Int]
+        case "PlayCard" =>
+          val maybeCardIndex: Option[String] = (data \ "cardindex").asOpt[String]
          maybeCardIndex match {
            case Some(index) =>
              val session = gameLobby.getUserSession(user.id)
-              gameLobby.playCard(session, index)
+              gameLobby.playCard(session, index.toInt)
            case None =>
              println("Card Index not found or is not a number.")
          }
-        case "Picked Trumpsuit" =>
+        case "PickTrumpsuit" =>
          val maybeSuitIndex: Option[Int] = (data \ "suitIndex").asOpt[Int]
          maybeSuitIndex match {
            case Some(index) =>
--- a/knockoutwhistweb/app/views/ingame/ingame.scala.html
+++ b/knockoutwhistweb/app/views/ingame/ingame.scala.html
@@ -15,16 +15,21 @@
                    }else {
                        <p class="fs-5 text-primary" id="current-player-name">---</p>
                    }
-                    <h4 class="fw-semibold mb-1" style="display: none;" id="next-players-text">Next Players</h4>
-                    <div id="next-players-container">
-                        @if(gamelobby.getLogic.getPlayerQueue.isDefined && gamelobby.getLogic.getCurrentMatch && !TrickUtil.isOver(gamelobby.getLogic.getCurrentMatch.get, gamelobby.getLogic.getPlayerQueue.get)) {
+                    @if(gamelobby.getLogic.getPlayerQueue.isDefined && gamelobby.getLogic.getCurrentMatch && !TrickUtil.isOver(gamelobby.getLogic.getCurrentMatch.get, gamelobby.getLogic.getPlayerQueue.get)) {
+                        <h4 class="fw-semibold mb-1" id="next-players-text">Next Players</h4>
+                        <div id="next-players-container">
                            @for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) {
                                <p class="fs-5 text-primary">@nextplayer @if(nextplayer.isInDogLife) {
                                    🐶
                                }</p>
                            }
-                        }
-                    </div>
+                        </div>
+                    } else {
+                        <h4 class="fw-semibold mb-1" style="display: none;" id="next-players-text">Next Players</h4>
+                        <div id="next-players-container">
+
+                        </div>
+                    }
                </div>

                <div class="col-4 text-center">
@@ -107,7 +112,7 @@
                    } else {
                        @for(i <- player.currentHand().get.cards.indices) {
                            <div class="col-auto handcard" style="border-radius: 6px">
-                                <div class="btn btn-outline-light p-0 border-0 shadow-none" id="@i" data-card-id="@i" style="border-radius: 6px" onclick="handlePlayCard(@i, '@player.isInDogLife')">
+                                <div class="btn btn-outline-light p-0 border-0 shadow-none" data-card-id="@i" style="border-radius: 6px" onclick="handlePlayCard(this, '@player.isInDogLife')">
                                    @util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
                                </div>
                                @if(player.isInDogLife) {
@@ -125,16 +130,17 @@
    </main>
 </div>
 <script>
-        function waitForFunction(name, checkInterval = 100) {
-            return new Promise(resolve => {
-                const timer = setInterval(() => {
-                    if (typeof window[name] === "function") {
-                        clearInterval(timer);
-                        resolve(window[name]);
-                    }
-                }, checkInterval);
-            });
-        }
-        waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
+    function waitForFunction(name, checkInterval = 100) {
+        return new Promise(resolve => {
+            const timer = setInterval(() => {
+                if (typeof window[name] === "function") {
+                    clearInterval(timer);
+                    resolve(window[name]);
+                }
+            }, checkInterval);
+        });
+    }
+    waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
    connectWebSocket()
+    canPlayCard = @gamelobby.logic.getCurrentPlayer.contains(player);
 </script>
--- a/knockoutwhistweb/public/javascripts/events.js
+++ b/knockoutwhistweb/public/javascripts/events.js
@@ -1,3 +1,5 @@
+var canPlayCard = false;
+
 function alertMessage(message) {
    let newHtml = '';
    const alertId = `alert-${Date.now()}`;
@@ -38,7 +40,7 @@ function receiveHandEvent(eventData) {
    //Build Hand Container
    hand.forEach((card) => {
        //Data
-        const idx = card.idx
+        const idx = card.idx;
        const cardS = card.card;

        const cardHtml = `
@@ -157,6 +159,7 @@ function requestCardEvent(eventData) {
    const player = eventData.player;
    const handElement = $('#card-slide')
    handElement.removeClass('inactive');
+    canPlayCard = true;
 }


@@ -281,7 +284,7 @@ function receiveTurnEvent(eventData) {

    const currentPlayerNameContainer = $('#current-player-name');
    const nextPlayersContainer = $('#next-players-container');
-    const nextPlayerText = $('#next-players-section');
+    const nextPlayerText = $('#next-players-text');

    let currentPlayerName = currentPlayer.name;
    if (currentPlayer.dog) {
@@ -293,6 +296,7 @@ function receiveTurnEvent(eventData) {
        nextPlayerText.hide();
        nextPlayersContainer.html('');
    } else {
+        console.log("Length"+nextPlayers.length);
        nextPlayerText.show();
        let nextPlayersHtml = '';
        nextPlayers.forEach((player) => {
@@ -300,7 +304,7 @@ function receiveTurnEvent(eventData) {
            if (player.dog) {
                playerName += " 🐶";
            }
-            nextPlayersHtml += `<p className="fs-5 text-primary">${playerName}</p>`;
+            nextPlayersHtml += `<p class="fs-5 text-primary">${playerName}</p>`;
        });
        nextPlayersContainer.html(nextPlayersHtml);
    }
--- a/knockoutwhistweb/public/javascripts/interact.js
+++ b/knockoutwhistweb/public/javascripts/interact.js
@@ -1,37 +1,57 @@
-function handlePlayCard(cardIndex, dog) {
+function handlePlayCard(card, dog) {
+
+    if(!canPlayCard) return
+    canPlayCard = false;
+
+    const cardId = card.dataset.cardId;
+
+    console.debug(`Playing card ${cardId} from hand`)
+
+    const wiggleKeyframes = [
+        { transform: 'translateX(0)' },
+        { transform: 'translateX(-5px)' },
+        { transform: 'translateX(5px)' },
+        { transform: 'translateX(-5px)' },
+        { transform: 'translateX(0)' }
+    ];
+
+    const wiggleTiming = {
+        duration: 400,
+        iterations: 1,
+        easing: 'ease-in-out',
+        fill: 'forwards'
+    };
+
+
    const cardslide = $('#card-slide')
-    cardslide.addClass("inactive")

    const payload = {
-        cardindex: cardIndex,
+        cardindex: cardId,
        isDog: dog
    }
-    sendEventAndWait("play Card", payload).then(
+    sendEventAndWait("PlayCard", payload).then(
        () => {
-            console.debug("play card successful")
-            const datacardid = $(`#${cardIndex}`)
-            datacardid.parent('.handcard').remove();
+            card.parentElement.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}')`);
+                $innerButton.attr('onclick', `handlePlayCard(this, '${isInDogLife}')`);

                console.debug(`Re-indexed card: Old index was ${$innerButton.attr('data-card-id')}, New index is ${newIndex}`);
            });
+
+            cardslide.addClass("inactive")
        }
    ).catch(
        (err) => {
+            canPlayCard = true;
            const cardslide = $('#card-slide')
-            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")
+            cardslide.removeClass("inactive")
+            card.parentElement.animate(wiggleKeyframes, wiggleTiming);
+            alertMessage(err.message)
        }
    )
 }
@@ -40,7 +60,7 @@ function handleSkipDogLife(button) {
    // TODO needs implementation
 }
 function startGame() {
-    sendEvent("Start Game")
+    sendEvent("StartGame")
 }

 function handleTrumpSelection(object) {
@@ -49,8 +69,7 @@ function handleTrumpSelection(object) {
    const payload = {
        suitIndex: trumpIndex
    }
-    console.log("SENDING TRUMP SUIT SELECTION:", payload);
-    sendEvent("Picked Trumpsuit", payload)
+    sendEvent("PickTrumpsuit", payload)

 }
 function handleKickPlayer(playerId) {