feat: matchmaking game api

[Cyebukayire]

Player Controls & Game Start Updates

✅ Summary

This PR implements Joining Player 1 and Player 2, ensuring:

• - Player 1 creates a game with an invite code.
• - Player 2 joins using an invite code and username.
• - Player 1's UI updates when Player 2 joins.
• - Game status on the backend transitions correctly (waiting → paired → in_progress).
• - Player 1 can start the game and is redirected to game-play-screen.html.

🔨 Changes Made

• Game creation & invite code generation.
• When Player 2 joins, the backend updates successfully.
• Implemented WebSocket for realtime UI updates
• Game start button enables when both players are present.
• Game status updates correctly on backend.

🛠️ Remaining Fix

• - Player 2 is not redirected to game-play-screen.html after game starts.
• - WebSocket START_GAME event needs to trigger Player 2’s navigation.

🔍 How to Test

1. Player 1 creates a game → Invite code appears.
2. Player 2 on another browser tab joins with a username & invite code → Player 1 sees Player 2.
3. Player 1 starts the game
4. Verify game status updates to in_progress in the backend.

Next Steps

• Fix WebSocket redirection issue for Player 2.
• Ensure both players sync correctly upon game start.

[Tofudog]

I made some comments that want to be addressed. That being said, I will write more. Good progress!

[Tofudog]

Small thing, but the elo is an integer and would almost never exceed 4000, so change to:
type: Int16Array

[Cyebukayire]

That's a good catch. The elo is currently commented out, I think when the backend gets set up for recording scoring, then that change will be kept in mind.

[Tofudog]

Looks like there's two code_generator.js files- one here and another in utils. There should only be one.

[Cyebukayire]

Will fix that! Thank you!

[Cyebukayire]

Fix Done!

[Tofudog]

Could you put these lines right before the following lines:

let back_to_main_button_from_join = document.getElementById("back-to-main-screen-from-join");
if (back_to_main_button_from_join) {
    back_to_main_button_from_join.addEventListener("click", function () {
        window.location.href = "main-screen.html"; // Navigate back to main screen
    });
}

That way, a user that just created a team will be able to go back to main screen (and maybe join team instead).

Of course, we should probably delete the game with the previous game code as it may use lots of memory doing a bunch of create teams. OR, a user could exit out of the extension and do a million clicks on create team, so query for whether a user is already part of an active game (add something to userController.js).

Currently, we can check whether a game has a particular user, but NOT vice-versa.

[Cyebukayire]

That's a good idea to think about, if the player 1 leaves the created team, do we delete their game? Or can they still join their game using the join button? Or what do we do if the player 2 is trying to join the abandoned game?

This is interesting, since I have quite a lot going on this week, I can work on this part next Sunday!
If these changes are required, then this Pull request will be delayed, but no rush, because it also requires everyone to have backend setup. We can first let everyone setup backend server.

[Tofudog]

Small thing: could you change the comment above to:

// If waiting for Player 2, start polling for game status

because it looks like every 1.5 seconds, we're querying for whether player 2 has joined a game made by player 1.

[Cyebukayire]

That's exactly what's happening, the WebSocket is handling multiple backend calls to check if player 2 has joined or not

[Tofudog]

Ah ok. Then it looks good!

[Tofudog]

Port 3000 could be running the background already (e.g. someone did npm run for a react project), so maybe check for other available ports.

[Cyebukayire]

That's a just a test! In production, the backend API never changes. So for now if you run the backend on a different port, just modify the ports manually. Or to make things simple, I can setup a .env file for frontend in another Pull Request for someone to modify the port on frontend easily without having to update every single line that calls backend.

[Cyebukayire]

That's a just a test! In production, the backend API never changes. So for now if you run the backend on a different port, just modify the ports manually. Or to make things simple, I can setup a .env file for frontend later in another PR for someone to modify the port on frontend easily without having to update every single line that calls backend.

[Tofudog]

Looks good for now!

[calebj04]

Looks great!

[sunghokim128]

Good!