feat: Add method to show player disconnected in GameUI

- Added the `showPlayerDisconnected` method to the `GameUI` class in `game.js`.
- This method is responsible for displaying a disconnected player in the UI by applying a grayscale filter to their avatar image.
- The method takes the player ID as a parameter and retrieves the corresponding player element and avatar image.
- This enhancement improves the visual representation of disconnected players in the game UI.

public/js/game.js

@@ -737,6 +737,17 @@ class GameUI {
     playerAvatar.style.borderColor = rankColor[rank - 1] || "blue";
   }
 
+  /**
+   * Show player disconnected.
+   * @param {string} playerId - The player ID.
+   */
+  showPlayerDisconnected(playerId) {
+    const playerElement = document.getElementById(`game-player-${playerId}`);
+    const playerAvatar = playerElement.querySelector("img");
+
+    playerAvatar.style.filter = "grayscale(100%)";
+  }
+
   /**
    * Clear player rank.
    */
@@ -1809,6 +1820,10 @@ class Game {
       this.ui.showPlayerRank(playerId, rank);
     });
 
+    this.network.addListener("game-client:disconnected", (data) => {
+      this.ui.showPlayerDisconnected(data.player);
+    });
+
     this.network.addListener("game:end", (data) => {
       const reason = data.reason;
       const rankedPlayers = data.rankedPlayers;