From cfcd967ce08ecf07f3f06826c337f684eb3b0c5f Mon Sep 17 00:00:00 2001 From: Janis Date: Thu, 27 Nov 2025 09:52:00 +0100 Subject: [PATCH] fix(api): fixes - reimplemented animations (#90) Reviewed-on: https://git.janis-eccarius.de/KnockOutWhist/KnockOutWhist-Web/pulls/90 --- knockoutwhist | 2 +- .../app/assets/stylesheets/main.less | 8 +-- .../app/model/sessions/UserSession.scala | 12 ++-- .../app/views/ingame/ingame.scala.html | 40 ++++++++------ knockoutwhistweb/public/javascripts/events.js | 10 +++- .../public/javascripts/interact.js | 55 +++++++++++++------ 6 files changed, 76 insertions(+), 51 deletions(-) diff --git a/knockoutwhist b/knockoutwhist index c5dd02a..d833932 160000 --- a/knockoutwhist +++ b/knockoutwhist @@ -1 +1 @@ -Subproject commit c5dd02a5e826eaa6a6fa07c0847f94f9868709a6 +Subproject commit d833932f1652554db5a49d77033d3016051d23f9 diff --git a/knockoutwhistweb/app/assets/stylesheets/main.less b/knockoutwhistweb/app/assets/stylesheets/main.less index b321c74..83f8431 100644 --- 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; diff --git a/knockoutwhistweb/app/model/sessions/UserSession.scala b/knockoutwhistweb/app/model/sessions/UserSession.scala index 1547826..0c1608f 100644 --- 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) => diff --git a/knockoutwhistweb/app/views/ingame/ingame.scala.html b/knockoutwhistweb/app/views/ingame/ingame.scala.html index 8d437e7..45fe957 100644 --- a/knockoutwhistweb/app/views/ingame/ingame.scala.html +++ b/knockoutwhistweb/app/views/ingame/ingame.scala.html @@ -15,16 +15,21 @@ }else {

---

} - -
- @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)) { +

Next Players

+
@for(nextplayer <- gamelobby.getLogic.getPlayerQueue.get.duplicate()) {

@nextplayer @if(nextplayer.isInDogLife) { 🐶 }

} - } -
+
+ } else { + +
+ +
+ }
@@ -107,7 +112,7 @@ } else { @for(i <- player.currentHand().get.cards.indices) {
-
+
@util.WebUIUtils.cardtoImage(player.currentHand().get.cards(i)) width="120px" style="border-radius: 6px"/>
@if(player.isInDogLife) { @@ -125,16 +130,17 @@
diff --git a/knockoutwhistweb/public/javascripts/events.js b/knockoutwhistweb/public/javascripts/events.js index 19a0658..ea88b70 100644 --- 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 += `

${playerName}

`; + nextPlayersHtml += `

${playerName}

`; }); nextPlayersContainer.html(nextPlayersHtml); } diff --git a/knockoutwhistweb/public/javascripts/interact.js b/knockoutwhistweb/public/javascripts/interact.js index 84ec6aa..16eb2b6 100644 --- 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) {