feat: Implement Next Player UI Component

- Added a new UI component to display the next player in the game.
- Created HTML structure for the next player display with player avatar and name.
- Implemented `showNextPlayer` method to update and show the next player’s information.
- Implemented `hideNextPlayer` method to hide the next player’s display.
- Updated player order handling in the network listener to reflect changes in the UI.

The new component provides a clear indication of the upcoming player with their avatar and name, enhancing the game's user experience.

public/js/game.js

@@ -822,6 +822,30 @@ class GameUI {
     playerAvatar.style.backgroundImage = "none";
   }
 
+  /**
+   * Show next player.
+   * @param {Object} player - The player.
+   */
+  showNextPlayer(player) {
+    const nextPlayerElement = document.getElementById("game-next-player");
+    const nextPlayerAvatar = document.getElementById("game-next-player-avatar");
+    const nextPlayerName = document.getElementById("game-next-player-name");
+
+    nextPlayerAvatar.src = player.avatar || "/img/default-avatar.png";
+    nextPlayerAvatar.alt = player.name;
+    nextPlayerName.innerText = player.name;
+
+    nextPlayerElement.style.display = "flex";
+  }
+
+  /**
+   * Hide next player.
+   */
+  hideNextPlayer() {
+    const nextPlayerElement = document.getElementById("game-next-player");
+    nextPlayerElement.style.display = "none";
+  }
+
   /**
    * Show player rank.
    * @param {string} playerId - The player ID.
@@ -1659,6 +1683,7 @@ class Game {
     this.network = network;
     this.ui = ui;
     this.players = [];
+    this.playersOrder = [];
     this.pieces = [];
     this.availablePositions = [];
 
@@ -1743,6 +1768,10 @@ class Game {
       this.ui.showGamePhase(`Round ${data.round} Start`, 2000);
     });
 
+    this.network.addListener("game:playersOrder", (data) => {
+      this.playersOrder = data.order;
+    });
+
     this.network.addListener("game:tossStart", (data) => {
       const playerId = data.player;
 
@@ -1870,6 +1899,15 @@ class Game {
 
       this.ui.showGamePhase("Turn Start", 2000);
 
+      this.ui.showNextPlayer(
+        this.players.find(
+          (player) =>
+            player.id ===
+            (this.playersOrder[this.playersOrder.indexOf(playerId) + 1] ||
+              this.playersOrder[0])
+        )
+      );
+
       this.network.addListenerOnce("game:timeRemaining", (data) => {
         this.ui.startPlayerTurn(playerId, data.timeRemaining * 1000);
 
@@ -1918,6 +1956,7 @@ class Game {
 
     this.network.addListener("game:turnEnd", (data) => {
       this.ui.endPlayerTurn(data.player);
+      this.ui.hideNextPlayer();
       this.ui.hideTossButton();
       this.ui.hideTrade();
       this.ui.hideTradeRequest();

views/components/game/game.ejs

@@ -2,6 +2,13 @@
     <span class="font-bold text-2xl text-center drop-shadow" style="text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.7);"></span>
 </div>
 <div id="game-players" class="fixed top-5 left-5 flex space-x-4"></div>
+<div id="game-next-player" class="hidden fixed top-5 right-5 flex flex-col items-center space-x-2">
+    <span class="text-white text-sm font-semibold mb-1">Next Player</span>
+    <div class="relative">
+        <img id="game-next-player-avatar" src="" alt="Next Player" class="w-16 h-16 rounded-full border-4 border-gray-300">
+    </div>
+    <span id="game-next-player-name" class="absolute bottom-0 right-0 bg-white text-gray-800 text-xs px-1 w-50 rounded-full truncate text-center"></span>
+</div>
 <div class="flex items-center justify-center min-h-screen">
     <div class="flex flex-col items-center justify-center space-y-4">
         <div class="aspect-square w-full h-full max-w-full max-h-full">