arcadeMonopoly
Create a responsive, single-page web-based **Monopoly game** using modern HTML5,…
“Create a responsive, single-page web-based **Monopoly game** using modern HTML5, CSS3 (or Tailwind CSS), and vanilla JavaScript (or React/TypeScript). The game should deliver a clean, modern tabletop aesthetic with smooth piece animations, clear turn-based flow, and robust rule enforcement. --- ### Core Architecture & State Management * **Game State:** Track `players` (name, cash balance, board index, owned properties, in-jail status, turns in jail), `currentPlayerIndex`, `diceRoll` (two 6-sided dice), `deckStates` (Chance, Community Chest), and `gamePhase` (`ROLL`, `ACTION`, `END_TURN`). * **Board Layout:** Build a standard 40-tile square board using CSS Grid/Flexbox. Each tile must contain properties like `name`, `type` (`property`, `railroad`, `utility`, `corner`, `tax`, `card`), `cost`, `rentTiers` (base, houses 1–4, hotel), and owner indicators. * **Turn Lifecycle:** 1. Roll dice (detect doubles; 3 consecutive doubles send player to Jail). 2. Animate token movement tile-by-tile. 3. Resolve tile action (purchase unowned property, pay rent, draw card, go to jail). 4. Allow optional management actions (trade, build houses, mortgage). 5. End turn and transfer control to the next active player. --- ### Key Mechanics to Implement * **Property Transactions:** Unowned tiles display a modal with "Buy" or "Pass" (triggers an auction among players if passed). * **Rent Calculation:** Implement full color-group rent doubling, graduated house/hotel multipliers, railroad scaling ($25/$50/$100/$200), and utility dice multipliers ($4\times$ or $10\times$). * **Jail Logic:** 3 ways out: roll doubles, pay $50 fine, or use a "Get Out of Jail Free" card. Max 3 turns before mandatory payout. * **Bankruptcy Engine:** If a player cannot cover debts after liquidating assets (mortgaging, selling buildings at 50% cost), declare bankruptcy and transfer remaining assets to the creditor or bank. --- ### UI & UX Requirements * **Center Control Hub:** The board interior hosts the dice roller, interactive action buttons, a scrolling action log (e.g., *"Player 1 paid $50 rent to Player 2"*), and active trade prompts. * **Player Dashboards:** Display color-coded player cards showing net worth, cash, and property cards grouped by color. * **Visual Polish:** Highlight active tiles, display house/hotel tokens directly on tile borders, and show pawn markers with distinct CSS badges or SVG icons. Deliver the code in modular files (`index.html`, `styles.css`, `game.js`) with clean separation between the state logic, rendering engine, and event handlers.”
