About the Project

UBHACKOPOLY is a campus-themed, web-based spin on Monopoly. You pick a piece, roll dice, move around a custom board image, buy properties, and watch your cash update in real time. I aimed to make it feel like a physical board game: piece-by-piece movement, pop-up messages for Chance/Community Chest, and a clean, glowing UI.

Inspiration

I love board games and wanted a hands-on way to practice full-stack basics. Monopoly was perfect: familiar rules, lots of state, and plenty of UI feedback. Re-skinning it with campus locations (Baird, Baldy, Davis, etc.) kept me excited to polish details like the overlay board image and the player tokens.

What I Learned

How a browser talks to a server using JSON over HTTP (JavaScript fetch ↔ Flask routes).
Structuring game state with Python classes (Player, Property, Board) instead of a pile of globals.
Animating movement one tile at a time so it looks like a real board piece moving.
Mapping human-readable tile labels to internal keys (important for buying and rent logic).
Enforcing turn rules (only one roll per turn, reset flags on end turn).

A little math I used for testing dice outcomes:

[ P(S=s)=\frac{#{(i,j)\in{1,\dots,6}^2 : i+j=s}}{36}, \quad s\in{2,\dots,12}. ]

This reminded me why 7 shows up so often (6 combinations), which helped me simulate lots of “pass GO” cases quickly.

How I Built It

Backend (Flask/Python):
- Routes for /state, /roll, /buy, /end_turn, and /reset.
- Classes model money, ownership, movement, and tile coordinates.
- Simple in-memory state while the server runs.
Frontend (HTML/CSS/JS):
- Three-panel layout: Players (left), Board (center), Actions (right).
- The board is a transparent overlay with my custom PNG underneath; tokens are absolutely positioned so they “move on the image.”
- Dice rolls animate step-by-step with a delay; Chance/Community Chest pop-ups linger longer so you can read them.
- One-roll-per-turn is enforced by a small turn flag reset on “End Turn.”
- Player names and pieces come from sessionStorage (page 2 → page 3).

Challenges I Faced

Name mismatches: UI labels (“O’Brian”) vs. backend keys ("O'Brian"). I fixed this with a small mapping so purchases and ownership remain correct.
Responsive alignment: Making tokens land at the right place regardless of window size. I compute positions from the board image’s bounding box and use a scale factor.
Keeping UI and state in sync: After every action I re-fetch /state and re-render balances, active player highlighting, and owned properties.
Game feel: Teleporting looked wrong, so I implemented timed stepping (and longer popups for special tiles) to make turns feel deliberate.