Project Update: Bug Fixes

Overview

This phase was all about polishing the user experience, squashing gameplay bugs, and adding new repository documentation. After getting feedback I decided to change The whole UI

Dynamic Theming & UI Improvements

One of the major frontend improvements in this sprint was fixing the player icon chooser button functionality in the web interface. Fully redesignen the Front-End and more.

I first of all started with replacing my .root with some new colors which are greenish. I also added some simple fade in/out animations to all Popups.

Another bug was that it couldn’t quite fit in a screen of the size 1980 x 1080. I fixed that by making it possible to scroll down so everything you need for the game is shown on your screen. The way i tested it is by local hosting it and then pressin F12 in the browser and then you could adjust the size of the Window which was pretty neat.

Also fixed a lot more of UI bugs such as weird buttons and more but this was the important stuff.

Squashing Gameplay Bugs

I knocked out two major bugs in this update:

• Trading System Fix:
  There was a bug where it wasnt possible for people to only request something without giving anything or make only money transactions so I fixed this.

• Special Property Popups: I resolved a rendering issue with the popups for special properties, specifically the Airports and Companies (Utilities). Now, when a player interacts with these tiles, the modal correctly pulls the specific data object and displays the unique rent calculations and purchase prices.

Documentation Revamp

• I updated the README.md to ensure the decumentation was on point for anyone cloning the repo.
• I refactored and renamed SHOWCASE.md to Instructions.md. This provides a much clearer, step-by-step guide on how the game operates and how to get the local server running instead of just showcasing the Repo more.

Conclusion

The feedback was essential and really showed me how sloppy I worked it should now work perfectly even though i couldnt test it for 4 people

Update: UI/UX Fixes, Auction System Fixes, and Property Manager Integration FInal

This update focused on providing a better user experience and just making it less buggy

Key Changes

1. UI/UX Improvements

• Refactored layout components to improve visual consistency.
• Updated navigation paths so it makes more sense for the User and is just more logical
• Adjusted CSS rules to improve the game across different screen sizes.

2. Auction System Fixes

• Addressed synchronization issues with the auction state.
• Fixed logical errors in bid processing and countdown timers.

3. Property Manager Integration

• Fixed the Property Manager feature, allowing users to track and organize their properties.
• Integrated the property database schema with the existing auction mechanisms.
• Created user views for listing and editing properties. So just new UI

4. General Bug Fixes & Stability

• Cleaned up left over parts of old system

Poorup — Production Ready

Over the past few days I’ve been doing a full production-readiness pass on Poorup.

Here’s what I worked on:

• Bug fixes — Fixed auction edge cases where a disconnecting player would leave a ghost bid, locking the game
• Memory leak prevention — Added a garbage collector on the server to clean up empty rooms after 10 minutes
• UI polish — Fixed text cut-off in buttons and settings toggles, improved layout consistency across screen sizes
• Layout centering — The game board is now properly centered vertically and horizontally in the viewport
• Accessibility — Added focus-visible styles for keyboard navigation
• New setting — Exposed the “Double rent” toggle in the UI (the rule already existed in the engine)
• Code quality — Added JSDoc comments to core server classes, removed dead code

The game is now polished and stable. Im shipping it

Overview

Today I worked on the front end an am basically finished with the easy stuff Iam now going to add the player icon and etc

Front End

I designed my front end and i think i can say that I am pretty good at basic JS/HTML/CSS and this project teached me alot Iam probally going to wrap it up in the next 2 post and focus on smth else.

Monopoly repo

After resarching a bit i found another open source monopoly game and my plan is now to copy some backend logic from it but i need to adjust it because his game is made to be playable localy and mine online so it will take same adjustment

#Backend

I added a Room system with the help of mutipile videos in which a random room code is generated and the server saves the generated room code making it possible for another use to insert it. The code will be if the round was ended.

Overview

Over the last few days, I’ve been triying to refactor my project, but i realised something I killed it i refactored it so often that i lost sight of the real goal and will proablly start from scratch restarting it from 0 i designed and svg file but just couldnt implement the right way.

Cleaning the SVG

My biggest headache was the game board. I designed a beautiful, detailed map in Figma, but exporting it as an SVG just made things difficult i tried making i clickable but i didnt know how to and i found no totorials regarding this so i will probally just create a board using html and css or maybe look for solution using ai

Current System Status

At the moment i have decided to refractor to vue by advice of some friends and ai because it makes the backend easier but i will proablly change back, because iam realising Iam making the project more complex than it has to be also.

Conclusion

I just wasted time trying to learn new stuff an refractoring and trying to not use ai. I would like for some adivice which ai I should use and if I should stick with vue or stay with or change back to default also this made me reflect on what kind of perfectionist iam an I will probally wrap up this project in the next few days because I realised front end is not for me I will continue learning it but will soon work on either python or C project after. I will just add the missing features with Ai

#Overview

So today i didnt really code just refactored again and went back to css and decided to design all design elements in figma. It was pretty easy and II am now qustoning why i didnt do that instead also i only copied these 2. I will make my own streets afterwards and i also decided to redesign the website because it realy just a copy and i dont want to be sued but the board will probally look the same just different countries and maybe prices need to look for balancing and how it is normally in monopoly. But this probally going to take 2 to 3 days cause i really dont got any time in the next few days.

Project Update: The Great Refactor & React Integration

📋 Overview

Damn this looks trash

just a small update and i jsut noticed tailwind actaully looks like trash are there any alternatives because i didnt expect it to look this bad in comparison to before and yes i do know its looks aigenrerated but i did myslef also tailwind is pretty easy if you get the hang of it just looks trash maybe going to watch some tuts cause i cant upload the final product like this.

Overview

This phase was a major point for the project. After successfully implementing the lobby chat and the 11x11 Monopoly board using Vanilla JS and CSS Grid, I realized that managing the game states (turns, money, properties, transactions) in Vanilla JS was going to lead to unmanageable spaghetti code and was way to hard.

To keep the project clean and professional, I decided to perform a complete “hard reset” and refactor the entire frontend into a modern React Single Page Application (SPA) utilizing Tailwind CSS v4 [1.1.1, 1.1.8].
I always though about using it but found it weird and dififult for a beginer

The Great Redesign

Instead of keeping duplicate file structures or nesting my React app in a subfolder, I decided to do a complete wipe of the repository and initialize Vite directly at the root of my Poorup folder [1.1.1].

My backend directory (server/) with the working Socket.io logic stays at the root level, sitting side-by-side with my brand-new React source directory (src/).Because i didnt want to rewrite that all

Tailwind v4 & Vite Setup (React Redesign - Lab 1)

I verified that the setup is 100% correct by creating a basic functional component in src/App.jsx and rendering a test heading styled in large, bold, violet text using Tailwind v4 utility classes [1.1.8]. It compiled instantly and loaded perfectly in the browser.

Next Steps

Now that the modern React + Tailwind ecosystem is up and running at the root, I am starting Lab Challenge 2 (React Redesign). I’ll be creating a dedicated <LandingScreen /> component, managing the nickname input using React useState hooks, and connecting Socket.io to React to emit player connection data back to the server [1.1.1, 1.2.6]. You know lab challenges for this i will watch some more videos leanr more js and learn react if possible

Conclusion

Deciding to start over from a blank folder was tough, but it was absolutely necessary. The codebase feels incredibly clean and changing to React will save me massive amounts of time as I start building out the actual Monopoly gameplay. But i now learned alot in the time i decided to atleast built the lobby and board in vanilla js,css and html. Also anybody knows an ki which is good in front end because i just realised iam trash in front end and ki is too

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 :).

Overview

Today was massive for Poorup. I officially made the first steps into the website, creating the backend for the hompage and creating the CSS..

Transitioning From HTML to CSS

I officially finished the basic HTML path on freeCodeCamp! It feels great to have the basic foundation down. I am still missing a lot of depth in semantic HTML and more advanced stuff, but I have enough of experienc to now build on it. I just need to learn some more js and CSS.

I then watched some video regarding CSS and worked on it. I realised that CSS is really simple but involes alot of googling to find certain functions . I did one rooky mistake which was having the css file not in the right folder so it wasnt loading correctly and i was quite suprised

Backend & Real-Time Socket.io Integration

This is where the real engineering started today. Since Poorup is a real-time multiplayer board game, I can’t just use standard HTTP requests where the browser has to reload every time a player moves. I needed a permanent, open connection between the browser and the server.

I set up a Node.js server with Express in server/server.js to serve my static folder. Then, I integrated Socket.io:

• Express Server: Serving the public folder on http://localhost:3000.
• Socket.io Setup: Wrapped the Express app in an HTTP server and configured the connection listeners.
• Client-Side JS: Wrote client.js to capture input data and handle form events.

The Struggle: I ran into a bug where clicking “Play” triggered the server connection even when the username field was completely empty, which bypassed my HTML required attribute. After digging into my event listeners, I realized I was listening to the click event on the button instead of the submit event on the form. Since the browser’s native validation only checks fields during a form submission, the click listener was bypassing it. Switching my listener to form.addEventListener("submit") fixed the empty-name validation instantly.

When I run node server/server.js now and type a name in the browser, the server terminal immediately logs the connection and prints the player’s name in real-time.

Next Steps & Screen Switching

Now that the backend is running and successfully communicating with the client, my next step is handling the UI transitions. Since we don’t want a full page reload (which would kill the WebSocket connection), I am working on setting up a Single Page Application (SPA) structure ,aksed ki what to do next by usign my earlier stated Lab approach in which i dont get code but how to do stuff and have to implement it.

I am currently working on Lab Challenge 9, where I will be wrapping the login screen in a #landing-screen div and the lobby in a #lobby-screen div. I’ll use JS to dynamically swap the .hidden class as soon as the server acknowledges that a player has successfully joined.

Conclusion

Overall, this phase was a huge step up from just writing static tags. I’m taking active notes on everything which you will later find in a second repo so you can build it your own with all the Lab challenges. I find it to be quite rewarding but now i have to lock in for school cause i got a vocabulary test in 2 days. I will probally upload a demo soon an do some major changes to color, theme, name and etc for copyright reasons

Stardance Progress Log: Poorup Development

Current Progress

• Learning Path: Almost completed the Basic HTML section on freeCodeCamp.

• Note-taking: Iam taking personal notes on semantic HTML, document structures, tags, and form elements.

My Learning Methodology (AI as a Mentor)

To make sure I actually understand every line of code I write, I am using a strict, self-guided approach to learning: First of all i have strictly said to the ai to never write code for me and never give me the answer and just show me how i could achieve it. Also the ai acts strictly as a mentor. It analyzes my goals and designs custom “Lab Challenges” formatted exactly like freeCodeCamp exercises (with Objectives, User Stories, and Test suites). Because i found this to be quite efective. Also i decided to install the live preview extenstion to see my code in person and debug it easiear.

What I’ve Built So Far

• Landing Page Structure: Created a solid textual game menu and lobby framework in public/index.html using headings (h1, h2), paragraphs, an unordered list for features, and an ordered list for instructions.
• Interactive Elements: Added call-to-action buttons for joining and creating lobbies.

Next Steps

• Currently working on Lab Challenge 2 given by the ai: The Player Registration Form to practice form validation, input types (text, radio, checkbox), and connecting labels with inputs via attributes.
• Once HTML basics are solid, I will start exploring basic CSS styling.

I have now started with creating the Github and also learning some HTML with free Code Camp. I also decided to take some notes in a md file reading through the guides