refactor: Optimize GameUI showGamePhase method for multiple message h…

…andling

- Improved the `showGamePhase` method by clearing existing timers to ensure multiple messages fade out properly.
- This prevents overlapping text errors by resetting the phase display timer before showing a new phase.

public/js/game.js

@@ -578,27 +578,18 @@ class GameUI {
    */
   showGamePhase(phase, timeout) {
     const gamePhaseElement = document.getElementById("game-phase");
-    const gamePhaseText = document.createElement("span");
+    const gamePhaseText = gamePhaseElement.querySelector("span");
 
     gamePhaseText.innerText = phase;
-    gamePhaseText.classList.add(
-      "font-bold",
-      "text-2xl",
-      "text-center",
-      "drop-shadow"
-    );
     gamePhaseElement.style.display = "block";
 
     gamePhaseElement.style.opacity = 1;
     gamePhaseElement.style.transition = "opacity 0.5s ease-in-out";
 
-    gamePhaseElement.innerHTML = "";
-    gamePhaseElement.appendChild(gamePhaseText);
-
     clearTimeout(this.gamePhaseTimeout);
     this.gamePhaseTimeout = setTimeout(() => {
       gamePhaseElement.style.opacity = 0;
-      setTimeout(() => {
+      this.gamePhaseTimeout = setTimeout(() => {
         gamePhaseElement.style.display = "none";
       }, 500);
     }, timeout);

views/components/game/game.ejs

@@ -1,2 +1,4 @@
-<div id="game-phase" class="hidden fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center justify-center space-y-4 z-10"></div>
+<div id="game-phase" class="hidden fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex flex-col items-center justify-center space-y-4 z-10">
+    <span class="font-bold text-2xl text-center drop-shadow"></span>
+</div>
 <div id="game-players" class="fixed top-5 left-5 flex space-x-4"></div>