Integrate local tournament logic with frontend and game engine

[trsctr]

Branch: feature/055-local-tournament-integration

Description

Integrate local tournament logic into the existing codebase by creating a separate JavaScript file for the tournament functionality. Ensure that a function is created in the new file which can be called by the game engine to send game results. Update index.html as necessary to support any new UI components, and ensure index.js or any other .js files interacting with tournament functions import and use them correctly.

Tasks

• [x] Create Tournament Logic File:

  • Create tournamentLogic.js:
  • Move all tournament-specific logic into tournamentLogic.js.
  • Export functions necessary for tournament initialization and result handling that could be called from outside the scope of tournamentLogic.js.

• [x] Update index.js:

  • Import Tournament Functions:
  • Import necessary functions from tournamentLogic.js.
  • Integrate these functions into the existing frontend logic within index.js.

• [x] Update index.html:

  • Link JavaScript Files:
  • Ensure index.html correctly includes index.js and excludes any unnecessary JavaScript files.
  • Add/Update Modals and UI Components:
  • Assess if additional modals or UI components are needed for tournament functionality.
  • Update or add modals as necessary to handle tournament state and interactions.

• [x] Implement Result Handling Function:

  • Create a Result Parsing Function in tournamentLogic.js:
  • Implement a function to be called by the game engine when a game ends. This function should:
    • Receive Game Results: Accept results data from the game engine in JSON format.
    • Parse Results: Process the results to determine the game winner and update the tournament state.

• [x] Modify gameStart to take in the callback function as an argument

  • Ensure this function is called in the end of game

• [x] Ensure Integration with Game Engine:

  • Verify Function Call: Ensure the game engine correctly calls the result handling function from tournamentLogic.js.
  • Validate Results Handling: Confirm that the function processes results and updates the tournament state correctly.

• [ ] Game Session and UI/UX Flow:

  • Ensure UI Reflection: Ensure that the user interface accurately reflects the tournament state and handles interactions smoothly.
  • Validate Modals: Ensure modals open, close, and display information correctly.
  • Three.js Scene Management: Ensure the Three.js scene is cleared from memory after each game.

• [ ] Testing:

  • Test Functionality: Test the integration of tournament functions with index.js to ensure they work as expected.
  • Validate Flow: Confirm the entire tournament flow, including game initialization, result parsing, and UI updates.

• [ ] Documentation:

  • Update Documentation: Reflect changes in the project structure and JavaScript functionality.
  • Provide Instructions: Include instructions on using new tournament features and handling results.

Additional Notes

• Project Structure: Ensure the integration of tournamentLogic.js maintains code modularity and clarity.
• UI/UX: Ensure a seamless user experience with clear feedback and intuitive interfaces.

Possible Issues to Watch For:

• Ensure correct import and usage of tournamentLogic.js.
• Verify correct function calls from the game engine and proper data parsing.
• Confirm the correct functionality of modals and UI components.
• Ensure proper memory management with Three.js.