From bbcf6e778fb10652f1278f885a82c271528d296e Mon Sep 17 00:00:00 2001
From: Tony Kan <tianchengkan@gmail.com>
Date: Sun, 8 Sep 2024 17:25:39 -0700
Subject: [PATCH] fix: Correct player trade initialization order

Reverted the initialization logic of the `initTrade` function to ensure that the current player's pieces and descriptions are displayed before other players' sections. Adjusted the DOM insertion order to maintain the required sequence:
- "Your Pieces" and related elements for the current player
- Divider
- "Other Players' Pieces" and related elements

This change restores the correct display order of player trade information as per the original functionality.
---
 public/js/game.js | 78 ++++++++++++++++++++++++++++-------------------
 1 file changed, 46 insertions(+), 32 deletions(-)

diff --git a/public/js/game.js b/public/js/game.js
index 461a9ec..9a5dab9 100644
--- a/public/js/game.js
+++ b/public/js/game.js
@@ -981,7 +981,6 @@ class GameUI {
     this.currentPlayerId = currentPlayerId;
 
     const gameTradePlayers = document.getElementById("game-trade-players");
-    gameTradePlayers.innerHTML = "";
 
     players.forEach((player) => {
       player.avatar = player.avatar || "/img/default-avatar.png";
@@ -989,45 +988,60 @@ class GameUI {
       const playerElement = document.createElement("div");
       playerElement.id = `game-trade-player-${player.id}`;
       playerElement.className = "flex flex-col space-y-2 border-b pb-4";
-
       playerElement.innerHTML = `
-      <div class="flex items-center space-x-4">
-        <img src="${player.avatar}" alt="${player.name}" class="w-12 h-12 object-cover rounded-full">
-        <div>
-          <p class="font-semibold">${player.name}</p>
-        </div>
-      </div>
-      <div id="game-trade-pieces-${player.id}" class="flex space-x-2"></div>
-    `;
-
+            <div class="flex items-center space-x-4">
+                <img src="${player.avatar}" alt="${player.name}" class="w-12 h-12 object-cover rounded-full">
+                <div>
+                    <p class="font-semibold">${player.name}</p>
+                </div>
+            </div>
+            <div id="game-trade-pieces-${player.id}" class="flex space-x-2"></div>
+          `;
       if (player.id === this.currentPlayerId) {
-        const elements = [
-          { text: "Your Pieces", class: "text-lg font-semibold mt-4" },
-          {
-            text: "Select a piece to trade with another player.",
-            class: "text-sm text-gray-500",
-          },
-          { text: "Other Players Pieces", class: "text-lg font-semibold mt-4" },
-          {
-            text: "Select a piece to trade with you.",
-            class: "text-sm text-gray-500",
-          },
-        ];
+        const currentPlayerTitle = document.createElement("p");
+        currentPlayerTitle.innerText = "Your Pieces";
+        currentPlayerTitle.classList.add("text-lg", "font-semibold", "mt-4");
 
-        elements.reverse().forEach(({ text, class: className }) => {
-          const p = document.createElement("p");
-          p.innerText = text;
-          p.className = className;
-          gameTradePlayers.insertBefore(p, gameTradePlayers.firstChild);
-        });
+        const currentPlayerDescription = document.createElement("p");
+        currentPlayerDescription.innerText =
+          "Select a piece to trade with another player.";
+        currentPlayerDescription.classList.add("text-sm", "text-gray-500");
+
+        const hrElement = document.createElement("hr");
+        hrElement.classList.add("my-4");
+
+        const otherPlayerTitle = document.createElement("p");
+        otherPlayerTitle.innerText = "Other Players Pieces";
+        otherPlayerTitle.classList.add("text-lg", "font-semibold", "mt-4");
 
+        const otherPlayerDescription = document.createElement("p");
+        otherPlayerDescription.innerText = "Select a piece to trade with you.";
+        otherPlayerDescription.classList.add("text-sm", "text-gray-500");
+
+        gameTradePlayers.insertBefore(
+          otherPlayerDescription,
+          gameTradePlayers.firstChild
+        );
+        gameTradePlayers.insertBefore(
+          otherPlayerTitle,
+          gameTradePlayers.firstChild
+        );
+        gameTradePlayers.insertBefore(hrElement, gameTradePlayers.firstChild);
+        gameTradePlayers.insertBefore(
+          playerElement,
+          gameTradePlayers.firstChild
+        );
+        gameTradePlayers.insertBefore(
+          currentPlayerDescription,
+          gameTradePlayers.firstChild
+        );
         gameTradePlayers.insertBefore(
-          document.createElement("hr"),
+          currentPlayerTitle,
           gameTradePlayers.firstChild
         );
+      } else {
+        gameTradePlayers.appendChild(playerElement);
       }
-
-      gameTradePlayers.appendChild(playerElement);
     });
   }