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