knockoutwhistweb/app/model/sessions/UserSession.scala

@@ -47,11 +47,11 @@ class UserSession(val user: User, val host: Boolean, val gameLobby: GameLobby) e
         case "StartGame" =>
           gameLobby.startGame(user)
         case "PlayCard" =>
-          val maybeCardIndex: Option[Int] = (data \ "cardindex").asOpt[Int]
+          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.")
           }
@@ -69,7 +69,6 @@ class UserSession(val user: User, val host: Boolean, val gameLobby: GameLobby) e
     lock.unlock()
     if (result.isFailure) {
       val throwable = result.failed.get
-      throwable.printStackTrace()
       throw throwable
     }
   }

knockoutwhistweb/app/views/ingame/ingame.scala.html

@@ -112,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) {
@@ -142,4 +142,5 @@
     }
     waitForFunction("pollForUpdates").then(fn => fn('@gamelobby.id'));
     connectWebSocket()
+    canPlayCard = @gamelobby.logic.getCurrentPlayer.contains(player);
 </script>

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

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("PlayCard", payload).then(
         () => {
-            console.debug("play card successful")
+            card.parentElement.remove();
-            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}')`);
+                $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")
-            }
+            card.parentElement.animate(wiggleKeyframes, wiggleTiming);
-            alertMessage("You aren't allowed to play this card")
+            alertMessage(err.message)
         }
     )
 }