CivicSim

Inspiration

City planning affects everyone, but civic decision-making can feel distant, complicated, and difficult to explore safely. We wanted to make it understandable through play. CivicSim was inspired by the negotiation and resource strategy of games such as Catan and Risk, but replaces conquest with public leadership. Players still compete for influence and recognition, while depending on one another to prevent the city from failing.

Our goal was to create a game in which students and adults can experience the real tension behind public decisions: a proposal may improve housing while increasing costs, strengthen mobility while affecting the environment, or benefit one district while leaving another behind.

What it does

CivicSim is a real-time multiplayer civic strategy game set in the fictional city of Rivergate. Players choose complementary roles such as Mayor, Urban Planner, Environmental Advocate, or Community Organizer. Empty seats are filled by adviser bots, which also makes the game playable solo.

During each turn, players inspect districts, city metrics, shared resources, community needs, and the visible plan of the Rivergate Development Coalition. They draft location-specific proposals, optionally ask the AI Decision Coach to identify stakeholders, risks, opposition, and alternatives, and then choose a strategic approach: Build, Negotiate, or Campaign.

Every accepted action can change the map, city metrics, resources, buildings, district influence, personal Legacy Points, and the public timeline. Players compete to lead districts and earn individual awards, but they must cooperate to complete the Rivergate Compact and keep the city's weakest indicators above the collapse threshold. Flood warnings, expansion decisions, milestones, and a final Civic Summit turn every match into a shared civic story.

How we built it

CivicSim is organized as a TypeScript monorepo:

• React and Vite power the responsive interface, room flow, role selection, proposal tools, Council Arena, and Civic Summit.
• Phaser 3 renders the interactive Rivergate map, including districts, connections, buildings, overlays, pan and zoom controls, and map-state transformations.
• Express and Socket.IO provide real-time multiplayer rooms and server-authoritative game actions.
• A shared TypeScript package and Zod schemas keep client/server events, game state, and AI output consistent and validated.
• The optional OpenAI API generates decision-support language on the server. Deterministic rules, not generated text, control all game-state mutations.
• Scenario data defines Rivergate's districts, needs, faction behavior, crises, milestones, buildings, and balancing values.
• The frontend is deployed on Vercel, while the multiplayer server is deployed on Render.

React owns networking and passes authoritative snapshots into Phaser through a controlled state bridge. This keeps rendering separate from multiplayer rules and prevents the map from changing game state independently.

Challenges we ran into

The largest design challenge was making CivicSim cooperative and competitive at the same time. Too much competition encouraged selfish play, while too much cooperation removed tension. We addressed this with personal Legacy Points, district influence, contested leadership, shared resources, the Rivergate Compact, and a city-collapse floor that prevents a player from winning through sabotage.

Synchronizing a React interface, a Phaser canvas, Socket.IO rooms, bots, and staged animations was another major challenge. The server needed to remain authoritative while every connected player saw the same outcome. We also had to validate proposals, prevent duplicate turn submissions, clamp metric changes, and safely handle malformed AI responses.

Deployment introduced additional challenges because the project is a monorepo with separate frontend, backend, and shared packages. We configured independent Vercel and Render builds, environment variables, CORS, health checks, and production output paths.

Accomplishments that we're proud of

We are proud that CivicSim delivers a complete playable loop rather than only a visual prototype. Players can create or join a room, select roles, negotiate proposals, compete for influence, construct visible projects, respond to a crisis, unlock a new district, reach milestones, and finish with a scored Civic Summit.

Other accomplishments include:

• A server-authoritative multiplayer architecture with bots for solo and incomplete teams.
• An interactive Phaser map with five data overlays and accessible district controls.
• Competitive district control connected to a meaningful shared city objective.
• A visible AI faction whose intentions and results can be understood by players.
• Safe AI integration where generated language can advise players but cannot directly mutate the game.
• A balanced endgame with a City Legacy Score, contextual ending, awards, timeline, and printable debrief.
• Automated coverage for affordability, adjacency, influence, building placement, milestones, scoring, turn locks, and malformed AI output.

What we learned

We learned that civic systems become engaging when consequences are visible, immediate, and open to negotiation. A single score is not enough; players need to see who benefits, what was sacrificed, how the map changed, and why another player might oppose a proposal.

We also learned that competitive cooperation works best when individual success depends on a healthy shared system. Technical separation was equally important: React handles application state and networking, Phaser focuses on visualization, and the server validates every meaningful action. For AI features, structured validation and deterministic fallbacks are essential for reliability, fairness, and safe gameplay.

What's next for CivicSim

Next, we want to expand Rivergate with more scenarios, maps, crises, policies, faction personalities, buildings, and long-term consequences. We plan to add persistent player and classroom sessions, authentication, database-backed match history, teacher dashboards, standards-aligned lesson plans, and CSV/JSON learning exports.

On the game side, we want deeper alliances, negotiated trades, shared infrastructure contracts, secret role objectives, richer district control, building upgrades, restoration choices, animated map events, and additional Civic Summit paths. We also plan to improve mobile performance, accessibility, sound design, onboarding, and replayability so CivicSim can grow from a polished prototype into a classroom-ready civic learning platform.

Built With

• css3
• express.js
• github
• html5
• node.js
• openai
• phasor
• react
• render
• socket.io
• typescript
• vercel
• vite
• vitest
• zod