Overview

This phase was important even though it was short. I transitioned from basic static mockups to building a fully functional, real-time multiplayer lobby system. I resolved tricky logical bugs and fought port conflicts, I also expanded my knowledge on js and am probally going to need to take a break to really learn all of js and will soon watch a 22 hour tut.

Fixing the SPA Screen Switch (Lab 9)

I started by tackling the dynamic transition from the login screen (#landing-screen) to the lobby screen (#lobby-screen).

1. Space in HTML ID: I accidentally wrote id="landing screen" (with a space) in my HTML, which broke my JavaScript’s querySelector because IDs cannot have spaces.

Once I replaced the space with a dash (id="landing-screen") Now it works perfectly fine.

Port Conflicts

Right after getting the transitions working, my local server crashed on Port 3000. My terminal crashed and restored its history, leaving a Node process running in the background and locking the port i still dont know why it does that just looked on reddit and youtube.

To easily bypass this without fighting Windows process managers, I updated my server.js and local client connection to run on Port 3005. It started up instantly.

Designing the 3-Column Lobby (Lab 10)

With the screen switching working, I redesigned the lobby HTML to match the responsive 3-column layout of Richup.io [1]. I used Flexbox (flex: 1 and flex: 2 for the center) to align:

• Left Column: A placeholder invite link input and a scrollable chat area [1].
• Center Column: The player greeting, token color picker, and “Join Game” button [1].
• Right Column: Game settings (dropdowns for starting cash) [1].

Structuring this required a bit of tweaking but not to hard.

Interactive Color Picker & Socket Events (Lab 11)

Next, I tackled the token selection grid [1]. I styled four distinct color circles (Red, Blue, Green, Yellow) in CSS and set up a .selected class that applies a thick white border and a glowing shadow.

In client.js, I wrote a forEach loop that listens for clicks on each circle, removes the .selected class from all others, adds it to the active circle, and stores the selection in a global variable. On the server side, I set up a 'join-room' socket listener. Now, when a player selects a color and clicks “Join Game”, the client emits the color choice, and the backend successfully receives and logs it in the terminal [1].

Server-Side Multiplayer Sync (Lab 12)

The most exciting part and hard part today was implementing real-time state synchronization. I declared a global activePlayers dictionary on the server to keep track of active sessions.

• When a user logs in, they are registered in the dictionary.
• When they choose a color and click “Join Game”, their color is updated, and the server broadcasts the entire updated list to all active clients via io.emit("update-players") [1].
• On the client side, I wrote a listener that clears out the #player-list and dynamically rebuilds it, coloring each player’s username text to match their selected token color.
• I also handled the 'disconnect' socket event to delete players from the dictionary when they close it. You can see the messaged in the terminal and yes it is antigravity but i dont use the ai and have only used it to refractor my notes, so i dont even have tokens anymore cause of the amount of notes i had.

So i also decided i probally need to expand my file directory and iam thinking of using tailwind css or just using css and making custom icons using favicons and etc by using figma also i got approved for the Student github :).