Devlog after ship

So after getting hella positive feedback regarding poorup which i highly appreciate my aim is to now make it have an even better user experience and etc.
why? cause from the feedback i got, there are 3 areas I need to tackle, UI, game logic which is to complex and the User experience including rules and etc,

Full redesign of the ingame lobby

So after getting feedback that the board was to smallwhich was kinda expected and that the whole game is just clutered which i also assumed would happen cause all the features dont fit into the game i have done the following.

I have redesigned the full ingame lobby with a new layout further inspired by richup(didnt want to do this but they have the most optimial layout)
I have also redone the whole entire admin window cause to be honest it was horrondous and hard to use, and also just some small changes all around

full redesign of modals

so after doing the lobby i have now decided to fully redo a lot of the modal to have a better layout and etc so they are way more user friendly and acttually easy to understand, this also included cutting alot of features from certain modals because they just made them to complex and hard to use

Cards and airpots

this was something i was orrignally planning to release in the last ship but i just decided to ship it with this one

i have finnaly added the option to buy new bank cards which you can use to get benefits like cashback of 10% on purchsees like rent payment suprise cards and other stuff, and I also added the option to use airpots to fly from one point to another and allow players to set the prices,

Bots

After reflecting a bit on my ai usage for the bots i decided to fully plug the whole programm into a repo which visualises it to see if it checks out with my mental map and I noticed so much slop which I would have never noticed before, this includes the whole Bot logic which i have probally never looked at cause i knew i wouldnt be able to code them. Though i probally should have cause this is the biggest slop i have ever seen and It introduced so many bugs which the ai couldnt find

Next steps

Right now all these changes are locally and not on github which are around +17000 lines of code and
my aim is to further clean this up and fully push it with a new domain which is alredy online but will be kept hidden. here are soem before and afters, the more clutterd ones are the befores and the simplifyed ones after

Poorup Redesign - Devlog #11 (FUCK MY LIFE)

I am geniunly so tired of this project and my life in general i was so busy in the last few days cause of school and after shool clubs. This phase was mainly about recoding the Bot engine by hand, and updating the stock market modal inside the game also added New Ui for theme chooser and music and also added more sound tracks. I also redid statistics tabs in profile by hand and added better match history tracking

Bot engine

To be honest to Bot engine was so much AI stuff that i genuinly didnt understand what it was build on and how that is why I decided to take some time to read and research all the papers its build on and how it works. I then rewrote large parts of it to improve it and also found mutipile bugs in the logic of how it works and how it assigns values

New account and preferences tab

I fully redid some parts of the accounts and prefences tab to now allow for easier choosing of themes and also worked on the music engine so the music loops and youre able to choose different music depending on the theme.

#Statsics tab
I redid the whole tab as I found it quite stacked with 12 boxes for statsics and decicd to now add internal tabs to make it look cleaner this was a quick 30 minute changes as I didnt change logic but just frontend

Next Steps

Hopefully shipping adding HCAI and testing the AI bots and further UI refinement on tablet UI and 1440px desktop cause these are 2 of the most weirdest sizes

https://poorup.jeremy-d.hackclub.app/
also if anybody wants to check it our but it is nowhere near finished so dont expect anything

Poorup Redesign - Devlog #10

Iam aware this phase is 30 hours this is just cause i used hella AI and didnt want to count it towards my payout. this phase mainly about finishing touches running mutipile tests suits playing some games and finishing some things also fixing Ui and redoing the Ui of the

Music

First of all I added music for each of the 6 theme with a secondary theme which you can select under account and preferences I also made it easier to spot the different themes as they were hella hidden to be honest.

Deactivation of palor patrol

Though i didnt want to this I needed to deactivate palor patrol as it was simply impossible to use I checked m code in detail used and really did everything but I couldnt find the bug which makes it unplayablle so as long as I cant manage to fix it I have to deacitvate it.

Next Phase

pushing everything on nest setting up a piepleine so nest automatticaly pulls everything I push onto main in my repo and finnaly realsing it with thhe bots for players to use.

Poorup Redesign - Devlog #9

this phase was mainly about adding some missing things fully balancing everything also used the new model jev from typesafe as it was a perfect fit for the task.

Admin Dashboard

I now added a section in the admin Dashboard fully centered around the Bots which allows for dropping in any provider and choosing the model and see the request if theyre failing or not and etc this took quite a while as I coded this myself again as I wanted to practice a bit though I still needed Ai help as Iam so trash at js

Removing TOS pages

As i mentioned in the last devlog i have now decided to remove the TOS pages as they were jst not good looking and not complete and not needed.

Music system

I decided to remove the music player and rather make it so 1 music track is there for each theme and my next step ix expanding the profile page to allow choosing another music track as 12 are available in total but only 6 are used rn. I also decided that I am going to move the Theme chooser somewhere else as people get no indicator rn to find it

New Idea for the Future

Also I had a great Idea which i can incoperate into this but after the next ship. Its training a custom ml model on all the matches played by people and then incoperating it in the game. Because essentialy it would be a custom AI/Bot that is able to play monopoly as good as possible

new features

I also added the option to download all the data cause i noticed its saved on the server and maybe smb wants to download it will then be in a json.

I also added the option to add an recovery email, because my plan is to allow people to sign up without email but they still need an option to recover data if needed

I also added the option to rovoke all otehr session tokens then the onnes youre logged into rn, so essentially log out of all other devices and server sessions

Next steps

Cleaning up Ai code and reading through it all, 1 or 2 adjustments in Ui for example the global event banner needs to be relocated or the graphs for match history need to remade. Also the ranking page needs a little redesing. The next one will be the LAST ONE cause i cant deal with stardance anymore all my projects are getting rejected for dumb reasons, so this will be the last devlog and if it does not get accepted iam relocating somewhere else.

Poorup Redesign - Devlog #8

this phase mainly about consolidating the backend and adding a New admin only dashboard which will allow to analyze things easier for balane patches and etc in the future. This Phase was written only by hand hence the long time, normally I would use AI to speed up the process but I wanted to get some practice in. Also added legal and TOS pages

Backend

I found mutipile bugs such as simple Game bugs to not so simple leackage problems and other stuff which took quite some time to fix by hand and this really shows how I will probally pause using AI for coding after this project for a while

Admin Dashboard

I created this Dashboard so I would be allowed to pracitally analyze everything from how certain things affect the game and for example analyze them to see if they need fixes, balances or even remove them entirly. I also added things like seeing a rough strucutre of where my player base is from. If anybody is abusing the game somehow or bot traffic.

Tos Pages

These took quite long and were quite the hassle but I did it. though i am debating jus tdeleting them as I couldnt fill them out entirley as certain information is needed which would then make them 100% fool proof

I forgot

I also updated the Snow Theme and added music for each theme with a small music player in the bottom left though I just noticed I placed the icons wrong should be a quick 2 line fix

Next Steps

do the last fixes finnaly test the AI bots as they are fully setup but not setup do some balancing and realese it The next post should really be the last. Hopefully.

Poorup Redesign - Devlog #7

This phase was mainly about doing a full audit over the game, fixing bugs which were still hidden inside the server and UI, and making the whole project easier to trust before the next merge. Finalising Bots, adding, themes adding new suprise features and more.

Themes

I decided to create 5 more themes which will fully change the look of the game, for the 5 i decided on 5 directions first of light mode, and then the 4 seasons so summer,autumm, winter, and spring.
These took quite some time to create but I think they came out quite decent though they still need cleaning up

Ranking Seasons

I have now added ranking seasons which are 1 month each if you manage to rank on the leaderbaord at the end of the season you get a special cosmetic(newly added system) and a special Title

Cosmetics

I added a full cosmetics system and the ranking system so you can now get cosmetics from 2 places, either by getting them at the end of the season form the leaderboard or by getting them from achievements

Card Upgrade

I also now added the features to upgrade your bank account, if you pay enough money you can upgrade your card for 1000$ this gives you a card with 5% cashback which is the Spaarkasse karte(german Bank) and the nex level is the amex black card wich give you 10$ cashback and amex points which you can use for flying.

Gambling UI

I also decided to now give the gambling UI an animation it now has the same kind of case opening animation as CS2 so the roulette which goes form right to left.

Plane station card

Also made it so that you can now use the airplanes to skip things so you can fly to another station but of course you will have to pay alot and you have to pay a landing fee. If a player owns an Airpot he can decide the flying fee himeslf and the landing fee which means he could extort people if he is smart enough

Quick Table

I did some changes to Quick Table as it used to create a new public room every time. It now checks the live public room directory first, joins the most suitable open table, retries if somebody fills it during the join, and only creates a new Standard-40 room when no table can be joined. Private room codes are never exposed and the server still makes the final decision.

Favicon

I also designed a quick little favicon which is Just a P with a box around it but it looks quite good

Music Candidates

I am now searching for new Music for each theme so music changes with the theme

Next Steps

Cleaning up the UI one final time trying everything out and finally realsing the Beta and promoting it on reddit.

Poorup Redesign - Devlog #6

This phase was mainly about adding more depth to the player interactions, improving the bot system, and making the rankings feel more alive.

Deal Negotiation

I redesigned the deal flow so trades, loans, equity, and hybrid deals all work in the same way. When you receive a deal, a modal appears with accept and negotiate. If you close it, the deal does not get declined and stays inside the Finance rail. Both players can now see the same deal collapsed in Finance. The receiver can negotiate, while the sender can adjust or cancel the deal. You can open a full read-only view, change the parameters, and send the new version back. The server also checks old deal IDs so an outdated modal cannot change a newer deal.

Sponsored Purchases

I also added sponsored purchases. If a player cannot afford a property, they can ask the table for help. Other players can reserve contributions, and once the full amount is available, the buyer accepts and is forced to buy that exact property. The money is automatically returned if the request is canceled, the property changes owner, or a player disconnects. It is not a loan and does not create equity.

Bots

I continued improving the AI and no-AI bots. The bots now receive more context about the board, current obligations, loans, events, opponents, future rent risk, expected cash flow, and their own previous decisions.AI bots can now also counter trades, negotiate player contracts, choose debt rescue actions, and make auction decisions. If the AI provider runs out of credits or fails, the no api key AI takes over

Rankings

I added recent trend indicators to the ranking rows, so you can see if a player is moving up, down, or staying flat. I also added a seasonal ranking scope based on the current calendar season.

Rules Fixes

I also fixed the Double GO setting so landing exactly on GO now pays the boosted amount, while simply passing GO still pays the normal amount.TestingI expanded the tests and ran long bot campaigns with auctions, loans, casino, market, global events, sponsorships, and negotiations. The latest regression suite passes and the longer 2,500-game campaign had zero stalled games.

Next Steps

The next major step is making the bots simulate several complete future turns and improving long-term negotiation behavior. After that I want to add deeper browser testing and seasonal ranking rewards.
Also to lazy to do screenshots of new UI so you will get everything in the next devpost

Poorup Redesign - Devlog #5

This phase was mainly about fixing all bugs still exisitng, refactoring further with codescene and letting AI run over my code, also fixed some small missing features and simple bugs myself.

Choosing Icon

I noticed a bug in which because of logic I made before setting up custom icons the programm mapped custom icons people created onto persets and blocked them so for example your icon had red in it, the game decided to map it onto the red preset in the backend blocking it but showing yours in game, this came because I never rewrote this section after introducing custom icons.

Ownership icon

Before this change owenship on board was only shown with a simple like quadrat in the top right corner of the tile in the color you picked this is also something left over from the old preset logic. I decided to make it so It shows a smaller version of the face of the player which makes it look a lot cleaner.

Missing Buttons

This was mainly because I let AI write to much of my code, the finical trading tab which is centered around equity and everything missed a dropdown to choose who you send the trade to and even the button to send the trade which was a dumb oversight on my end. I also added a simple backend system for the dropdown inside that modal to only show the propertys a person owns.

Bots

I also continued working on the bot system though this was mainly watching tutorials and brainstorming further

Next Steps

Fix last bugs, fully add bot system and make sure UI looks good to release the first beta test hopefully the next post will be the last

Poorup Redesign - Devlog #4

This phase was mainly about setting up codescene doing a full restructuing with the help of AI and fixing bugs and adding missing features. I also added a simple, gambling and stock market system.

Bots

I first started with setting up the initial idea of bots so to the UI and a bit of the backend logic for bots and how they will interact with the game iam nowhere finished and I havent tried it out yet.

Codescene

After checking out the github studentpack again after a while I saw codescene, which is a code reviewer similar to coderabbit. I struggled a bit with the Setup but after running an analysisi I noticed how abysmall my codebase really is and how its missing structure, archtiectuer and etc, for example sepearting certain getures from game logic.js and creating their own thread for it. I also setup a full pr pipieline which I can use with my AI agents which aim will be fixing my architecture, and finding bugs before i push them.

bugs

I ran Qwen 3.8 flash on my pr pipileine with codescene and let it work indepnedlty to full restructer my codebase so the results are better and I have better architectural design I also let it fix any bugs it found.

Bugs I found

While trying out the game i found mutipile BUGS
one of them affecting my secret minigame palor patrol. For some reason I was losing hearts for no appearent reason. The reason behind it was that even though UI was hidden the helicopters were still flying through. For some reason the heart bug still exists afterwards and even the AI isnt able to find out what it is so Iam completating making architecture changes to it.

#Gambling
I added a smile gambling system where you can bet money on a roulete on red, black, and green I didnt add any animation for it as I found it unecessary and I also made sure iam legally clear to make sth like this

Stock market

I created a simple stock market tab and backend which allows people to buy indexes of a property and made sure to connect it with global events so global events can affect the stock market but that is nowhere near usable.

Next Steps

Iam going to let my AI continue improving my codebase with codescene and continue the Stock market and afterwards add the bots.

Poorup Redesign – Devlog #3

This phase was about expanding the social side of Poorup, adding more depth to the game, and planning future systems that make every round feel more alive.

Social, Rankings, Achievements

I added a complete friend system. Players can search for unique usernames, send and accept friend requests, remove or block players, report users, invite friends to rooms, and view public profiles without leaving the lobby.

Profiles now include statistics such as wins, win rate, games played, average money, bankruptcies, achievements, and match history.

I also added global rankings for wins, win rate, games played, achievements, and other statistics. Rankings and Social are now independent tabs instead of modals, with wider layouts that use the available screen space more effectively.

Achievements now have custom pixel-art and SVG icons, rarity levels from Common to Mythical, filters, dates, categories, and clickable detail modals. Mythical achievements are extremely rare and can trigger a server-wide announcement for every player.

Easter Egg

I added the hidden Parlor Patrol minigame. Pressing CTRL + P on the home screen opens a secret mode where you shoot down police helicopters, planes, and drones. It includes custom explosions, animations, sounds, score tracking, and a secret achievement.

Global Events

Global Events are rare events that affect every player instead of only the person who landed on a tile. They can be triggered by round conditions or Surprise cards and can last several rounds.

Ideas include:

• Housing Bubble Pop
• Credit Freeze
• Inflation Spiral
• Bank Run
• Interest Rate Shock
• Airport Strike
• Energy Crisis
• Tax Scandal
• City Election
• Rent Control
• Tourism Boom
• Supply Chain Breakdown

Events can combine with each other, create unexpected situations, and unlock secret achievements. I also want a global-event setting that is simply on or off, while event strength and duration scale with the round length.

Rules Page

I added a complete Rules tab designed like a pixel-art game manual. It explains the board, movement, properties, loans, cards, achievements, global events, social features, and settings. It uses an internal book-style scroll so the main application does not become a long scrolling page.

Future Systems

I am also planning a casino system using virtual money, with red, black, and green bets where the odds are not equal.

Another planned feature is a fictional stock market connected to properties, countries, airports, utilities, and global events. Events could crash markets, increase rent values, affect airports, or create temporary investment opportunities.

I also want to add unethical and outrages bank loans with high interest, strict repayment rules, and serious consequences.

Music/sound icons

I also added simple music and sound icons for the buttons instead of having the music on/off text

Next Steps

The next phase will be making these systems work together while keeping the game balanced, and also adding AI bots which utilise AI like deepseek v4 and so on so they able to actually judge the situation and think of possible ways for them to win. The aim is to use hcai to power them. I will also add normal BOTS as a fallback if my usage runs out

Poorup Redesign – Devlog #2

This phase was about continuing the complete redesign of the website, deciding on a UI theme, and implementing a new feature that I had wanted from the start but was not advanced enough to create before.

New UI

I am very proud to announce a complete redesign of the application. I decided to fully embrace a pixelated theme, and I personally think it looks great. It is genuinely one of the best UI systems I have ever designed.

New Feature

I decided to expand the trading system. You can now give out loans in exchange for premiums, equity, money, and more. This allows you to create fully customizable loans, such as:

I give you $200 for 30% permanent equity in this spot.

This means that you have to pay 30% less rent when you land on it and gain 30% of all rent paid on that plot. This is a system I have never seen in a Monopoly game, and I wanted to implement it from the start when I first had the idea for Poorup.

New Feature #2

I have also decided to take the advice I was given and implement a room system. This allows players to join and create rooms, as well as make them public or private. I also added a quick-table feature that matches you with other people who have pressed the button, allowing you to play a quick round with random players.

New Feature #3

I have created a complete profile system. You can now create a profile, view your statistics, win percentage, average money, and more. You are also able to create custom 32×32 icons to use while playing the game.

New Feature #4

I also decided to add sounds and an open-source soundtrack I found called Pondering the Cosmos. which i think fits my new theme perfectly but maybe iam going to change it

Next Step AI Bots

The next Step will be adding bots but normal bots are boring they are just glofired search engines why i want to be a bit creative.

I will use hackclub ai provider and give the bot a brain by combinging them with an AI like deepseek v4 flash this means the bot will be able to check how is he performing what are the most logical steps sell buy properties and trade and if wanted even chat with the user to make a deal would anybody like that?

Poorup Redesign

So after my last ship i read through all the reviews and have decided to continue this project even though i really didnt plan for that. So there were 3 addition people wanted. A new UI, being able to join random people, better Animations and a Dev mode to test in solo player possibly with mods.

What did i do?

So i first started with thinking of a new design route so i asked chatgpt for some references of a good design. I decided on making the Whole Ui pixellated similar to the Arcade style and fully redesingen the SVG witth and now iam going to go over it and adjust it to fit ours. Of course this took like around 6 hours but I use figma on desktop and the browser tracking of hackatime doesnt seem to work how do you like the new svg?

Next Steps

Next Steps i redesignen the Full Ui to fit this pexelated style and making sure it looks good

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