fix: show turn passed bubble after page refresh

Oliboy50 · Sep 11, 2022 · ce8b3a3 · ce8b3a3
1 parent f0dbf58
commit ce8b3a3
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 10 deletions.
diff --git a/velonimo.css b/velonimo.css
@@ -228,10 +228,13 @@ Board
     top: -15px;
 }
 .player-table-speech-bubble.speech-bubble-on-left {
-    right: 190px;
+    right: 185px;
 }
 .player-table-speech-bubble.speech-bubble-on-right {
-    left: 190px;
+    left: 185px;
+}
+.player-table-speech-bubble .turn-passed-bubble-content {
+    padding: 3px;
 }
 .player-table-speech-bubble::after {
     content: "";

diff --git a/velonimo.game.php b/velonimo.game.php
@@ -203,6 +203,7 @@ protected function setupNewGame($players, $options = []) {
     protected function getAllDatas() {
         $result = [];
         $currentPlayerId = (int) self::getCurrentPlayerId();
+        $activePlayerId = (int) self::getActivePlayerId();
         $players = $this->getPlayersFromDatabase();
 
         // Rounds
@@ -213,6 +214,7 @@ protected function getAllDatas() {
         // Players
         $result['players'] = $this->formatPlayersForClient($players);
         $result['currentPlayerId'] = $currentPlayerId;
+        $result['activePlayerId'] = $activePlayerId;
 
         // Cards
         $result['currentPlayerCards'] = $this->formatCardsForClient(

diff --git a/velonimo.js b/velonimo.js
@@ -247,7 +247,7 @@ function (dojo, declare) {
             this.players = gamedatas.players;
             const howManyPlayers = Object.keys(this.players).length;
             const playersPlace = PLAYERS_PLACES_BY_NUMBER_OF_PLAYERS[howManyPlayers];
-            this.sortPlayersToHaveTheCurrentPlayerFirstIfPresent(
+            this.sortPlayersToStartWithPlayerIdIfPresent(
                 this.sortPlayersByTurnOrderPosition(Object.entries(this.players).map((entry) => entry[1])),
                 gamedatas.currentPlayerId
             ).forEach((player, index) => {
@@ -264,7 +264,8 @@ function (dojo, declare) {
     <div id="player-table-${player.id}-finish-position" class="player-table-finish-position"></div>
     <div id="player-table-${player.id}-speech-bubble" class="${DOM_CLASS_SPEECH_BUBBLE} ${playerPosition.bubbleClass}" style="color: ${playerColorRGB};"></div>
 </div>`,
-                    DOM_ID_BOARD_CARPET);
+                    DOM_ID_BOARD_CARPET
+                );
             });
             this.setupPlayersFinishPosition();
 
@@ -344,6 +345,7 @@ function (dojo, declare) {
             );
             this.resetDisplayedNumberOfCardsByPlayerId();
             this.setupPlayersHiddenCards();
+            this.setupTurnPassedBubbles(gamedatas.playedCardsPlayerId, gamedatas.activePlayerId);
 
             // setup players score
             this.setupPlayersScore();
@@ -1456,16 +1458,16 @@ function (dojo, declare) {
         },
         /**
          * @param {Object[]} players
-         * @param {number} currentPlayerId
+         * @param {number} playerId
          * @returns {Object[]}
          */
-        sortPlayersToHaveTheCurrentPlayerFirstIfPresent: function (players, currentPlayerId) {
-            const currentPlayerIndex = players.findIndex((player) => player.id === currentPlayerId);
-            if (currentPlayerIndex <= 0) {
+        sortPlayersToStartWithPlayerIdIfPresent: function (players, playerId) {
+            const playerIndex = players.findIndex((player) => player.id === playerId);
+            if (playerIndex <= 0) {
                 return players;
             }
 
-            return [...players.slice(currentPlayerIndex), ...players.slice(0, currentPlayerIndex)];
+            return [...players.slice(playerIndex), ...players.slice(0, playerIndex)];
         },
         /**
          * @param {Object[]} cards
@@ -1703,11 +1705,33 @@ function (dojo, declare) {
             dojo.addClass(`cards-stack-${topOfStackCardId}`, DOM_CLASS_CARDS_STACK_PREVIOUS_PLAYED);
             this.slideToObject(`cards-stack-${topOfStackCardId}`, DOM_ID_PREVIOUS_LAST_PLAYED_CARDS).play();
         },
+        /**
+         * @param {number} lastPlayedCardsPlayerId
+         * @param {number} activePlayerId
+         */
+        setupTurnPassedBubbles: function (lastPlayedCardsPlayerId, activePlayerId) {
+            const sortedPlayers = this.sortPlayersToStartWithPlayerIdIfPresent(
+                this.sortPlayersByTurnOrderPosition(Object.entries(this.players).map((entry) => entry[1])),
+                lastPlayedCardsPlayerId
+            );
+
+            const activePlayerIndex = sortedPlayers.findIndex((player) => player.id === activePlayerId);
+            // if the active player is the first player after the last played cards player
+            // or if the last played cards player is the active player
+            // or if there is no active player among players (this may happen at the end of the game... maybe?)
+            if (activePlayerIndex <= 1) {
+                return;
+            }
+
+            for (let i = 1; i < activePlayerIndex; i++) {
+                this.showTurnPassedBubble(sortedPlayers[i].id);
+            }
+        },
         /**
          * @param {number} playerId
          */
         showTurnPassedBubble: function (playerId) {
-            $(`player-table-${playerId}-speech-bubble`).innerHTML = '<i class="fa fa-repeat"></i>';
+            $(`player-table-${playerId}-speech-bubble`).innerHTML = '<i class="fa fa-repeat turn-passed-bubble-content"></i>';
             dojo.addClass(`player-table-${playerId}-speech-bubble`, DOM_CLASS_PLAYER_SPEECH_BUBBLE_SHOW);
         },
         /**