Test and Optimize Game Performance and Compatibility Across Different Browsers

[TKanX]

Description:

To ensure a seamless and consistent gameplay experience for all users, it is crucial to test and optimize the game’s performance and compatibility across various web browsers. This issue involves verifying functionality, performance, and user experience on a range of browsers to address any discrepancies and ensure high-quality gameplay.

Browsers to Test:

• [x] Google Chrome (latest stable version)
• [x] Mozilla Firefox (latest stable version)
• [x] Apple Safari (latest stable version, including iOS Safari)
• [x] Microsoft Edge (latest stable version)
• [x] Opera (latest stable version)

Additional Browsers (if needed):

• [x] Internet Explorer (for legacy support, particularly IE11, if there are users with this browser)
• [x] Brave (Chromium-based browser for compatibility with Chromium engine)
• [x] Vivaldi (Chromium-based browser for additional Chromium variant testing)

Testing Objectives:

1. Cross-Browser Functionality:

• Verify that all game features and functionalities work correctly across the listed browsers.
• Document and address any issues related to browser-specific functionality.

2. Performance Optimization:

• Measure and analyze game performance metrics such as loading times, frame rates, and responsiveness on each browser.
• Implement optimizations to ensure smooth gameplay and efficient performance.

3. Compatibility Issues:

• Identify and resolve any compatibility issues related to JavaScript, CSS, and browser-specific features.
• Ensure that the game behaves consistently and reliably across different browsers.

4. User Experience Consistency:

• Check that the game’s user interface and interactions remain consistent and functional across all tested browsers.
• Address any layout or design inconsistencies that impact the user experience.

@tedhyu

[TKanX]

Refactored GameUI methods for readability and performance

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

• Refactored constructor to use Object.assign for cleaner style updates.
• Replaced section validation in _getSection with a Set for efficiency.
• Used object mapping in _getDisplayGameMode and _getGameModePlayerCount to simplify logic.
• Combined _showSection and _hideSection into _toggleSectionVisibility for reusability.

Optimized UI rendering methods for clarity and efficiency

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

• Refactored showSection to use _toggleSectionVisibility for section management.
• Consolidated player rendering logic into a reusable _renderPlayers method.
• Simplified button event handling and DOM updates in showRoom, showGameReady, and showGame.
• Reduced redundant DOM manipulation and improved performance by minimizing multiple element access.

Optimized game results and error display methods for clarity and performance

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

• Refactored showGameResults to modularize table creation into _createTableHeader and _createTableCell methods.
• Enhanced performance by using DocumentFragment for efficient DOM updates and reduced redundant DOM manipulation.
• Simplified conditional logic in showError by implementing _manageElement to handle element visibility and content updates.
• Improved code readability and maintainability with extracted helper functions for common operations.

Optimized game UI methods for better performance and readability

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

• Refactored startQueueWaitingTime to use String.prototype.padStart for consistent time formatting.
• Simplified playerJoinedRoom by consolidating DOM manipulation and element creation into a single step.
• Improved playerLeftRoom with conditional checks to avoid errors from null references and streamlined the logic for updating the room status.
• Enhanced startPlayerTurn to ensure progress percentage does not exceed 100% and optimized endPlayerTurn for cleaner style reset.
• Simplified showPlayerRank with a more straightforward color assignment and improved showPlayerDisconnected for clarity.
• Used querySelectorAll in clearPlayerRank to reduce redundancy in clearing player rank styles.
• Improved showGamePhase with efficient use of setTimeout for smoother phase transition animations and visibility management.

These changes improve the overall performance and maintainability of the game UI components.

Enhanced piece selection and button visibility methods for improved performance

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

• Refactored showPieceSelection to use Array.prototype.forEach for iterating over pieces and consolidated DOM manipulation for better readability.
• Optimized hidePieceSelection by removing unnecessary style resets and ensuring the piece list is cleared efficiently.
• Improved showTossButton to directly set button visibility and add event listener in a simplified manner.
• Updated hideTossButton to remove event listeners more effectively by replacing the button element.

These updates streamline the piece selection and button visibility functionalities, enhancing performance and code maintainability.

Optimized trade initialization, display, and request handling

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

• Refactored initTrade to consolidate DOM updates and simplify player list rendering, improving performance and readability.
• Enhanced showTrade to use forEach for iterating over pieces, optimized event listener management, and streamlined trade button visibility logic.
• Updated hideTrade to efficiently clear player piece elements and reset state variables.
• Improved showTradeRequest to directly update trade request elements and attach event handlers in a more concise manner.
• Simplified hideTradeRequest to hide the trade request modal efficiently.

These improvements boost the performance of trade-related functionalities and enhance overall code clarity.

Optimized round summary display and hiding

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

• Refactored showRoundSummary to build the table rows in a single template string and set innerHTML once, reducing DOM manipulation and improving performance.
• Simplified the hideRoundSummary function to efficiently hide the summary and clear table content.
• Improved overall code readability and performance by consolidating DOM operations.

These changes enhance the efficiency of displaying and hiding round summaries, resulting in smoother performance and cleaner code.

Simplify socket event handling and reduce code duplication

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

• Added a private _sendEvent method to centralize socket event emission and response handling.
• Updated authenticate, joinQueue, leaveQueue, createRoom, joinRoom, startRoom, and leaveRoom methods to use _sendEvent, improving consistency and readability.
• Simplified trade method to handle optional parameters more effectively.
• Enhanced code clarity and reduced repetition across socket event handling methods.

These changes streamline the class implementation and improve maintainability.

[TKanX]

Optimized click handling by reducing redundant canvas clearing

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

• Added a preliminary check for transparent pixels using getImageData to avoid unnecessary processing.
• If the pixel at the click position is not transparent, the click handler is invoked and the piece index is returned.
• This optimization reduces performance overhead, especially when multiple pieces are present, potentially improving efficiency by up to 90%.