Classic Estate

Inspiration

I wanted to build a complete, playable browser version of a classic property-trading board game: not just a visual demo, but something friends can open in a room and actually play together.

What it does

Classic Estate lets 2-6 players join online rooms and play a full server-authoritative property trading game with human players and AI opponents. It supports dice movement, opening turn-order rolls, buying properties, auctions, rent, railroads, utilities, color groups, houses, hotels, mortgages, bankruptcy, player trades, AI trade valuation, movement trails, map zoom/pan, ownership statistics, turn summaries, and a bilingual Chinese/English UI.

The latest version also includes an in-game rules sidebar in both languages, a prominent one-click language switch for new players, and compact house/hotel markers that remain visible on the mobile board.

How I built it

The app uses a Node.js server and a vanilla HTML/CSS/JavaScript frontend. The server owns the game state and validates every action, while the browser renders a responsive 2D board and sends player decisions through API calls. The AI uses heuristic valuation for auctions, trades, mortgages, unmortgaging, and asset protection.

I used responsive CSS, dynamic label fitting, and desktop/mobile end-to-end checks to keep the dense 40-space board readable across viewport sizes and browser font differences.

Challenges

The hardest parts were encoding the board-game rules consistently, keeping multiplayer state authoritative, and making AI decisions useful without letting AI trade requests become annoying. I also spent time tuning property, railroad, and utility valuations so auctions and trades felt closer to strategic play.

A separate UI challenge was preserving all important board information on phones. The mobile layout now uses compact visual building markers, removes unnecessary icon pressure from small cells, and keeps the rules and ownership information accessible in the sidebar.

Accomplishments

I am proud that Classic Estate is already playable online, supports mixed human and AI rooms, and includes details such as opening turn-order rolls, auction logic, mortgage recovery, trade cooldowns, movement trails, ownership statistics, mobile building markers, an in-game bilingual rules guide, and an obvious language switch.

The game has automated rule tests and responsive browser checks covering desktop and mobile layouts, both interface languages, trading, statistics, victory screens, and AI price quotes.

What I learned

I learned a lot about modeling turn-based game state, balancing heuristic AI, and designing a dense board-game interface that stays readable across browsers and screen sizes. I also learned how small onboarding details, such as showing the other language directly on the switch button, can make a bilingual app much easier to discover.

What's next

Next I would improve AI negotiation, add persistent rooms, support saved or replayable games, and make the deployment more production-ready.

Built With

• caddy
• css
• html
• javascript
• node.js
• playwright
• vanilla-js