Implement Game Page and Logic

[TKanX]

Description:

Create a comprehensive game page that users are directed to after matching or joining custom rooms. This includes the waiting interface for game matching, the custom room interface, and the game-ready interface. The game page will encompass various components such as board rendering, piece vector conversion, network requests (using socket.io), and essential UI elements like buttons and controls.

Requirements:

• [x] #13
• [x] #14
• [x] #15
• [x] #16
• [x] #17
• [x] #18

[TKanX]

Added game route and pages for game functionality

https://github.com/tridecco/game-client-web/commit/cd2be2e6c3be1aae83358a5634a33de8359b9b3f

• Added a new route for the game page in the index.js file.
• Created new EJS templates for the game components: game.ejs, queue.ejs, room.ejs.
• Included the necessary JavaScript file (game.js) in the game.ejs template.
• Updated the game.ejs template with HTML structure and content.
• Added meta tags and a title to the game.ejs template for SEO optimization.

[TKanX]

Added GameUI class and update game page

https://github.com/tridecco/game-client-web/commit/5bfb0ea679eeb394bd31c56755b4c5ae1d57a729

• Added GameUI class to manage visibility of game sections (queue, room, game).
• Updated game.js to use GameUI for showing and hiding sections.
• Implemented script to handle game start parameters from the URL and show appropriate sections.

[TKanX]

Added error component to game page

https://github.com/tridecco/game-client-web/commit/fc17726fb40ec381f31cf48bdf066e02af156237

• Added an error component to the game page to handle and display error messages.
• Included the necessary HTML and CSS code for the error component.
• Updated the game.ejs file to include the error component.
• Added the error.ejs file to the components/game directory to define the error component's structure and content.

[TKanX]

Added error handling to GameUI and modify section management

https://github.com/tridecco/game-client-web/commit/33d46bebcd8274d29ab3acf9af266056bb0ae261

• Added error section handling in the GameUI class.
• Updated the _getSection method to include the "error" section.
• Updated the showSection method to handle the "error" section.
• Added showError method to display error messages with optional title, message, input, and button.

[TKanX]

Added error handling for single active session

https://github.com/tridecco/game-client-web/commit/84e4b0a9416328ade311427d495d4d7f821d4910

• Added error handling to check if a user can only have one active session.
• Display error message when a user tries to start a new game session while already having an active session.
• Redirect user to home page with a button click after showing the error message.

[TKanX]

Added disconnect event listener to handle server disconnections

https://github.com/tridecco/game-client-web/commit/167c81bd2c0c2e327d0252adfc345b94b4d9d9ab

Added a disconnect event listener to the GameNetwork class in game.ejs. This listener displays an error message when the user is disconnected from the server and provides an option to go back to the home page. This improves the user experience by gracefully handling disconnections.

[TKanX]

Added ready section to GameUI and modify section management

https://github.com/tridecco/game-client-web/commit/4034c7ba7d936287e5cdbd45ab8bdc36ba44ad3f

• Added new ready.ejs section to display the game ready interface.
• Added "ready" section to the GameUI class in game.js.
• Updated showSection method to handle the "ready" section.
• Added showGameReady method to the GameUI class to display the game ready state with player avatars and a start button.
• Ensured the "ready" section supports multiple players with avatars wrapping correctly on narrow screens.

[TKanX]

Corrected variable name in showGameReady method and fix DOM element updates

https://github.com/tridecco/game-client-web/commit/fbf765d8c7541670fab2e70b2fa081ba4cfc02aa

• Fixed incorrect variable name from players to playersElement in showGameReady method.
• Corrected the handling of the players' list and appending player elements.

[TKanX]

Resolved type errors in showGameReady method

https://github.com/tridecco/game-client-web/commit/444affd9b23662d5c0958a3609ee035adc8df494

• Corrected type errors in the showGameReady method of GameUI class.
• Replaced const with let for playersElement to allow for modification.
• Replaced playersElement.appendChild with playersElement.innerHTML += to properly handle HTML content.

[TKanX]

Fixed player avatar alt text in GameUI class

https://github.com/tridecco/game-client-web/commit/ef6c1f555fdc033d2a44c8582b5ce1f84bb140d8

• Removed duplicate "alt" attribute in the player avatar element.
• The alt text now correctly displays the player's name.

[TKanX]

Added ID to player element in GameUI class

https://github.com/tridecco/game-client-web/commit/4ecf4360fd442e2adc871e8d0dbbe1bdc972f0ed

• Added an ID attribute to the player element in the GameUI class.
• This allows for easier targeting and manipulation of individual player elements.

[TKanX]

Added playerReady method to GameNetwork and GameUI classes

https://github.com/tridecco/game-client-web/commit/1779c6248a2156ca250789d7a4b55bce1966099e

• Added playerReady method to the GameNetwork class to emit a "game-client:ready" event.
• Added playerReady method to the GameUI class to update the player's ready status in the UI.

[TKanX]

Enhanced showGameReady to disable start button on click

https://github.com/tridecco/game-client-web/commit/2efd2606f30e2a3a8bf21e82aefb054faf3e9c1f

• Updated showGameReady to disable the start button and show a "Ready..." message when clicked.
• Ensured the button becomes non-clickable by adding the "cursor-not-allowed" class.

[TKanX]

Added game ready event handling and UI integration

https://github.com/tridecco/game-client-web/commit/0bb7089747aa4a62c8286ef83730075f15dd2891

• Enhanced game setup to handle "gameReady" event and display the game ready UI component.
• Updated gameNetwork to listen for "game:players" event and display player avatars in the ready state.
• Added a click handler to send player ready event when players indicate readiness.
• Implemented player ready status updates upon receiving "game-client:ready" event.

[TKanX]

Enhanced showRoom method for improved room management

https://github.com/tridecco/game-client-web/commit/95b20990e1a8970bc752287bdbbd5aba6a32a136

• Updated showRoom method to include roomId, gameMode, players, isHost, and startGameHandler parameters.
• Implemented playerJoinedRoom and playerLeftRoom methods for dynamic player management in the room.
• Incorporated logic to display room ID and game mode, with dynamic updates to player list and room status.
• Added support for handling host-specific functionality, including showing and enabling the start game button.
• Implemented player count management and adjusted the room status message based on current player count.
• Added private methods _getDisplayGameMode and _getGameModePlayerCount for better handling of game modes.
• Updated showQueue to use _getDisplayGameMode for setting the game mode display.

[TKanX]

Improved start game button behavior in GameUI class

https://github.com/tridecco/game-client-web/commit/f88e1d11a62da1fe27ca6e7be2d873e2f17d73ed

• Enable/disable the start game button based on the current room status.
• Add visual feedback to indicate when the button is disabled.
• Update the button text to reflect the current state.

[TKanX]

Added leaveRoom method to GameNetwork class

https://github.com/tridecco/game-client-web/commit/d4197dc84c479ae0db171a28ad9f83d2f66e4fb9

[TKanX]

Updated room component with exit and copy functionality

https://github.com/tridecco/game-client-web/commit/544fe40894a94364fc7d9d3affaef73ad33b591a

• Added event listener for the "exit-room" button to handle room exit and redirect to the homepage.
• Implemented functionality for the "copy-room-id" button to copy the room ID to clipboard.

[TKanX]

Enhanced room functionality for joining and creating rooms

https://github.com/tridecco/game-client-web/commit/b79596af7c4fcc8dfa803a6a6a42347a952a460f

• Refactored the game.ejs page to improve the logic for joining and creating rooms.
• Added functionality to join an existing room, including error handling and displaying room details.
• Implemented the ability to create a new room, with error handling and displaying room details.

[TKanX]

Replaced currentRoomPlayersCount with currentRoomPlayers array

https://github.com/tridecco/game-client-web/commit/cfb8845f55c0dc2f201767ca0981a6fba8f89a05

• Refactored showRoom method to use currentRoomPlayers array instead of currentRoomPlayersCount.
• Updated player management logic to handle players as an array.
• Updated playerJoinedRoom and playerLeftRoom methods to manipulate currentRoomPlayers array.
• Updated UI logic to reflect the changes in player counting and handling.

[TKanX]

Added current player detection in room player list

https://github.com/tridecco/game-client-web/commit/8a1207b1ef0e5a900cd068ed40c594f6b1b99925

• Enhanced player mapping logic to identify and flag the current player.
• Updated player objects to include an isCurrentPlayer property.

[TKanX]

Implemented host transfer functionality

https://github.com/tridecco/game-client-web/commit/e82eb40e84285801ee56f760d5da602b1acb1f6e

• Enhanced playerLeftRoom method to assign host role to the second player when the current host leaves.
• Updated UI handling to display the start button for the new host.

[TKanX]

Added startRoom method to GameNetwork class

https://github.com/tridecco/game-client-web/commit/c809e4bc1b4cb51c71f75fc321fa44f6542f24ea

• Implement the startRoom method in the GameNetwork class to allow the host to start the game in a custom room.
• Emit the "startCustomRoom" event to the server and handle the response to resolve or reject the promise.

[TKanX]

Moved game start logic to the Game class

https://github.com/tridecco/game-client-web/commit/845add80e773aef07dd03c3704e1d4c55cfa64b4

• Extracted and encapsulated the game start logic into a new Game class.
• Simplified the start process by handling player readiness and game initialization within the Game class.
• Reduced duplication of code across different game start types (queue, join, create) by centralizing common logic.