This is a submission for Weekend Challenge: Earth Day Edition
What I Built
Global Accord is a browser-based climate negotiation game inspired by the politics of a UN summit.
You step into a high-pressure diplomatic role and try to build a workable international climate accord across five fictional delegations:
- Ironvale — an industrial fossil-fuel economy focused on stability
- Solara — a clean-energy leader that wants others to move too
- Deltara — a fast-growing economy protecting development
- Nordreach — a cautious, technical, implementation-first nation
- Aqualis — a vulnerable nation already feeling the damage
Each country has its own internal state, including trust, openness, pressure, and a core political need. Over 10 turns, you choose how to move the room using four actions:
- Offer Subsidy
- Share Technology
- Apply Pressure
- Propose Agreement
The challenge is that every action is political. Helping one delegation can unsettle another. Pressuring one country might impress observers or harden them. Some actions are targeted, while others are chamber-wide, and all of them are visible to the room.
The goal is to secure enough commitments to form an accord, but the summit doesn’t just stop at the minimum. You can keep negotiating through all 10 rounds and aim for different endings:
- Narrow accord
- Strong coalition
- Historic consensus
- Stalled summit
- Collapse
The game also includes:
- a cinematic opening sequence
- an advisor who briefs you each turn
- one-speaker-at-a-time dialogue sequences
- cloud saves
- optional AI-generated diplomatic dialogue
- cinematic ending sequences based on the coalition you built
Demo
Live app: https://global-accord.netlify.app
Screen Shots
Demo
Code
Global Accord
A browser-based climate summit game built with React and Vite. You lead negotiations across five delegations over ten turns—balancing subsidies, technology sharing, pressure, and agreement votes—to secure enough commitments before the summit ends.
Features
- Turn-based diplomacy with per-country stats (trust, openness, pressure), political needs, and cross-country reactions
- Auth0 authentication for sign-in
- Firebase (Firestore) cloud saves—resume up to three in-progress games from the dashboard
- Google Gemini (optional) for AI-generated turn dialogue; falls back to handcrafted lines if the API is omitted or unavailable
- Intro and ending cinematics with branching outcomes based on how many delegations commit
Prerequisites
- Node.js 18+ recommended
- Accounts / keys for services you enable: Auth0, Firebase, and optionally Google AI (Gemini)
Quick start
git clone <your-repo-url> global-accord
cd global-accord
npm install
cp .env.example .env.local
Edit .env.local with your real values (see below), then:
npm run dev
Open the URL Vite prints…
Stack
- React + Vite
- Auth0 for login
- Firebase / Firestore for cloud saves
- Google Gemini for optional AI-generated dialogue
- custom CSS for the full game UI and cinematics
How I Built It
1. Core game simulation
The heart of the game is a deterministic negotiation system built in React.
Each turn:
- the player selects a country and an action
- the game updates country state
- needs and commitment thresholds are evaluated
- cross-country political reactions are applied
- dialogue is generated
- the advisor summarizes what changed
I wanted the room to feel political rather than mechanical, so countries do not behave like isolated meters. They react to:
- whether they were directly targeted
- whether another country was favored
- whether pressure created backlash
- whether support created goodwill
- whether room-wide momentum is building
That means a move can help one delegation while quietly damaging your relationship with another.
2. Targeted vs chamber-wide actions
One design decision that became important was clarifying the difference between actions that affect one country directly and actions that address the whole room.
- Subsidy and Pressure are targeted actions
- Technology and Agreement are chamber-wide actions
That distinction also drives the dialogue flow:
- for targeted actions, the target responds first and the rest of the room comments as observers
- for chamber-wide actions, countries respond as stakeholders in the broader negotiation
That made the summit feel much easier to read and more believable.
3. Advisor-driven interaction
I wanted the game to feel like a negotiation room, not a dashboard.
So instead of presenting everything as controls and stats, I built the main interaction around an advisor bar. The advisor gives short, context-aware briefings before each turn based on:
- the selected country
- recent actions
- current room status
- likely observer reactions
- whether momentum, backlash, or goodwill are active
This helped turn the game from “click buttons and watch numbers move” into something closer to “read the room, make a political call.”
4. Gemini-generated dialogue
One of the most interesting parts of the project was using Gemini for the summit dialogue.
I did not use AI for the game rules. The actual mechanics stay local and deterministic. Gemini is only used to generate the spoken diplomatic lines.
On each turn, the app can send Gemini:
- the selected action
- the target country
- the speaking order
- each country’s before and after state
- commitment changes
- room status effects
Gemini then returns tagged lines like:
ADVISOR_OPENINGIRONVALESOLARADELTARANORDREACHAQUALISADVISOR_SUMMARY
I originally tried structured JSON, but in practice the model would occasionally return malformed JSON under tight UI constraints. I switched to a tagged plain-text format, which ended up being much more reliable for a weekend build.
To keep the game stable:
- responses are tightly length-limited
- parsing is defensive
- if Gemini is unavailable or returns something unusable, the app falls back to hand-authored local dialogue
That fallback was important because it meant the game still worked 100% of the time.
5. Auth0 + Firestore saves
I wanted the game to feel like a real product rather than a one-session toy, so I added authentication and persistence.
- Auth0 handles sign-in
- Firestore stores saved summit states per user
- players can save and resume up to three in-progress games
The saved state includes:
- current turn
- country stats
- status effects
- recent actions
- commitments
- room state
This made it easy to return to a summit without losing the negotiation arc.
6. Cinematic presentation
A big part of the project was making it feel more like a political drama than a form-based simulator.
I built:
- an intro cinematic with country-specific scenes
- a semi-circular chamber layout
- an advisor-led dialogue flow
- ending cinematics tied to the final coalition
- layered image treatment for characters and backgrounds
The final presentation leans into a darker, warmer diplomatic palette instead of generic dashboard styling.
Challenges I Ran Into
AI output reliability
The biggest technical challenge was making Gemini dialogue feel useful without letting it break the UI.
I had to solve for:
- malformed JSON
- overly long responses
- inconsistent formatting
- keeping country voices distinct
- maintaining believable political tone
The final solution was to constrain the model heavily, use a simpler tagged output format, and always keep a local fallback path.
Balancing the game
Another challenge was pacing. Early on, some strategies snowballed too fast and could secure an accord in only a couple of moves.
I rebalanced the system by:
- raising commitment thresholds
- weakening early snowball effects
- making goodwill and momentum more controlled
- making observer reactions sharper
- letting the summit continue through all 10 turns so the player can aim for better endings, not just the minimum win
Making the room readable
A diplomacy game can feel confusing if players cannot tell why the room changed.
So a lot of iteration went into:
- advisor briefings
- action explanations
- tutorial flow
- stronger consequence summaries
- making each delegation’s worldview feel distinct
What I’m Proud Of
I’m especially happy with three things:
- the negotiation loop feels political rather than random
- the AI dialogue adds flavor without owning the game logic
- the UI now feels like a summit chamber, not just a debug panel
The countries also ended up with more personality than I expected. Ironvale, Solara, Deltara, Nordreach, and Aqualis now feel like they are reacting from different worldviews, not just different stat blocks.
Prize Categories
Best Use of Auth0 for Agents
Auth0 is used to gate access to the game dashboard and identify players for persistent saved games. It turns the app from a disposable browser session into a user-specific experience with resumable negotiations.
Best Use of Google Gemini
Gemini is used to generate turn-by-turn diplomatic dialogue from structured game state while leaving the core rules deterministic and local. The game includes tagged parsing, output constraints, and graceful fallback to local dialogue so AI improves immersion without becoming a single point of failure.
What’s Next
If I keep working on this, the next things I’d add are:
- more ending art and polish
- stronger sound design
- more visible “why this changed” indicators after each turn
- additional countries or scenarios
- a backend-verified save path for production instead of direct client persistence patterns
Final Thoughts
I wanted to build something for Earth Day that was not just about the climate crisis itself, but about the difficulty of agreement.
The point of Global Accord is not just “pick the right answer.” It is learning that every solution has political cost, every country moves for different reasons, and progress often depends on whether you can build enough trust before time runs out.






Top comments (0)