STATE OF PLAY

Real headlines become playable crises. Decide from one nation's chair, inherit the consequences from another, and experience both sides.

Comment

Inspiration

I have always been fascinated by the way strategy games can make distant systems feel understandable. Age of Empires made history feel like a world you could enter rather than a sequence of facts you had to memorize. XCOM made every interface element feel consequential: a map was not decoration, a briefing was not filler, and pressing a button meant accepting responsibility for what followed. Those games did not inspire me to copy their mechanics or assets. They showed me that information becomes memorable when a player has a role, limited resources, competing priorities, and something at stake.

At the same time, I kept thinking about how people encounter real events today. Wars, sanctions, elections, climate shocks, economic decisions, and humanitarian crises arrive through the same feeds as entertainment. A major story can affect fuel prices, public safety, migration, or international relations, yet disappear with the next swipe before its causes and consequences are understood.

The Reuters Institute's 2025 Digital News Report found that 40% of respondents across markets sometimes or often avoid the news. Younger respondents were more likely to describe news as hard to follow, irrelevant to their lives, or connected to a feeling of powerlessness. That does not mean people do not care. It suggests that access to more information has not automatically created meaningful contact with it.

Education technology often responds with a shorter explanation, a chatbot, or a recall quiz. These can all be useful, but they usually leave the learner outside the event. They explain what a leader did after the decision was made. They rarely let the learner confront the same constraints, choose what to sacrifice, or discover why an action that looks responsible from one capital can look threatening from another.

That became the starting question for STATE OF PLAY:

What if reading the headline were only the beginning?

What STATE OF PLAY does

STATE OF PLAY is an AI-assisted geopolitical strategy game that turns real, sourced headlines into playable crisis simulations.

The current MVP focuses on one shared US and Venezuela scenario. The player begins in Washington. A real headline appears as a crisis on an interactive map. Opening it reveals a nation-specific intelligence briefing, four national indicators, two advisors with conflicting priorities, and three possible responses.

The player commits a decision. The order is stamped EXECUTED. National meters move, a consequence enters the event feed, the turn advances, and the decision becomes persistent state rather than a disposable answer in a chat window.

Then the central mechanic appears: the player crosses the table and enters Caracas.

The same event is presented from Venezuela's chair, but the simulation does not reset. Venezuela inherits what the United States actually chose. Its briefing explicitly states the causal connection. Its meters reflect transferred pressure. Its advisors and options are reframed around Venezuelan sovereignty, public morale, reconstruction, and foreign support.

For example, a US decision to ease sanctions can improve reconstruction access and foreign support while also creating domestic accusations that Caracas traded sovereignty for Washington's approval. The Venezuelan player must now respond to the consequences created during the US turn.

At the end, both decisions become one shared timeline. The player receives a transparent Legacy Score and compares the simulated path with a documented historical fact. The score is calculated from deterministic game state, not from an LLM secretly judging the player's politics.

The experience has a six-turn objective and explicit failure conditions for both nations. The United States can lose through removal from office, economic collapse, or war. Venezuela can lose through loss of sovereignty, public uprising, failed reconstruction, or total isolation. This gives every decision stakes while keeping the system readable.

Why it is different

STATE OF PLAY is not presented as a political prediction engine, and it does not claim that an AI-generated consequence is historical truth. Its contribution is an interaction model:

  1. Begin with a real event.
  2. Place the learner inside a constrained role.
  3. Make competing priorities visible.
  4. Preserve the learner's decision as state.
  5. Transfer its consequences across national perspectives.
  6. Reconnect the resulting timeline to evidence and history.

Many AI learning products help people receive information more quickly. STATE OF PLAY explores whether AI can also create a practical layer between information and understanding. Instead of only asking, "What happened?", the learner must ask, "What would I choose, who would carry the cost, and how would that decision look from the other side?"

The cross-nation callback is the most important distinction. Perspective taking is not delivered as another paragraph. It becomes a problem the player must inhabit. One nation cannot act without changing the conditions faced by the other.

This MVP does not prove improved learning outcomes. It proves that the interaction can be built, played, and discussed. Educational efficacy, factual accuracy, accessibility, and bias across perspectives need direct evaluation with teachers and learners.

How I built it

STATE OF PLAY is a React 19 single-page application built with Vite and TypeScript. Leaflet renders the interactive map using CARTO tiles. Framer Motion drives the perspective transition, panel movement, and decision cinematics. Howler.js supplies ambient communication audio and action feedback. React CountUp and segmented CSS gauges make world-state changes visible.

The visual direction combines a readable geographic map with an XCOM-inspired situation-room interface: notched HUD panels, terminal chrome, classified labels, scanlines, targeting markers, crisis pulses, advisor channels, and an EXECUTED stamp. The goal was to make the player feel responsible without turning a serious event into spectacle.

The client uses one shared game engine rather than separate US and Venezuela implementations. A typed reducer maintains:

  • Separate national meters and turn state
  • Active crises and selected briefings
  • Decision and consequence history
  • The shared cross-nation timeline
  • Win and loss conditions
  • Legacy Scores and local personal bests

The state persists in browser localStorage, which allows decisions made in Washington to remain available when the player switches to Caracas.

Three Vercel serverless endpoints support the experience:

  • /api/news combines GDELT, keyless public YouTube Atom feeds, optional SerpAPI discovery, and bundled seed headlines.
  • /api/llm produces strict-schema, nation-specific briefings, advisor lines, locations, and decision options.
  • /api/consequence produces strict-schema narratives, bounded meter changes, and an optional follow-on crisis.

The AI layer supports two server-side provider routes. A direct OpenAI route is ready for GPT-5.6 structured output, while OpenRouter can serve openai/gpt-oss-120b:free. Keys never enter the browser bundle. Runtime validation rejects malformed structured output. Responses are cached by provider, model, nation, crisis, headline, and decision where applicable. A per-instance daily call ceiling prevents a public demo from exhausting a small credit balance.

Resilience became a product requirement rather than an afterthought. If a news source fails, the endpoint merges the remaining sources. If all live sources fail, bundled seed headlines keep the map populated. If no AI key exists, a provider fails, output violates the schema, or the call budget is exhausted, deterministic nation-aware briefings and consequences keep the complete loop playable.

How Codex and GPT-5.6 helped

Codex with GPT-5.6 Sol served as my engineering collaborator throughout Build Week. I did not use it as a one-prompt application generator. The work happened as a sequence of staged specifications, implementation sessions, audits, tests, and corrections.

I used Codex to:

  1. Turn the original concept into a staged build plan, beginning with the smallest map and serverless skeleton.
  2. Establish the design tokens and situation-room interface before introducing game logic.
  3. Build typed briefing and consequence contracts shared by the client and server.
  4. Implement persistent national state, bounded meters, decision history, scoring, and run conditions.
  5. Reuse one crisis engine for both nations instead of creating two systems that would drift apart.
  6. Carry US decisions into Venezuela's version of the same event through an explicit causal callback.
  7. Add strict validation, deterministic fallbacks, provider routing, caching, and budget controls.
  8. Diagnose Vercel build and module-resolution failures and verify the production build after each correction.
  9. Audit whether features were genuinely connected rather than accepting visual prototypes as complete.

That final point changed the project. At one stage, the interface appeared to have decision buttons and a perspective switch, but inspection showed that the core consequence loop was not connected and the perspective change was only cosmetic. Codex helped trace the actual state flow, replace inert interface elements with real actions, connect the consequence endpoint, update the meters and event log, switch active national state, and then verify those paths against the repository.

Codex accelerated movement across product design, React, game-state architecture, serverless APIs, AI safety, testing, documentation, and deployment. I still made the central decisions: preserve one shared engine, make causality explicit, keep the map dominant, treat fallbacks as first-class behavior, and avoid presenting generated outcomes as facts. Codex made it possible to test those decisions quickly enough to build a coherent product within the week.

Challenges I faced

Turning a compelling interface into a real game loop

The earliest versions looked convincing before they were mechanically complete. Options existed visually, but did not yet apply consequences. The perspective wipe looked cinematic, but did not initially change the active nation. The solution was to stop trusting the surface, inspect the state and endpoint code, and verify every promise end to end: click, request, response, reducer action, meter movement, event history, persistence, and rival callback.

Representing two perspectives without building two games

Parallel US and Venezuela implementations would have duplicated logic and made shared causality fragile. I instead modeled nation configuration separately from the crisis engine. Each nation supplies its own meters, failure conditions, advisors, visual theme, and prompt context while using the same briefing, decision, consequence, and persistence pipeline.

Making AI optional without making the experience feel broken

I could not assume that every judge or classroom would have paid API access, a healthy news service, or a warm serverless cache. The fallback path therefore had to be a complete product path, not an error message. This led to bundled seed events, deterministic briefings, safe consequence deltas, provider-aware caches, and a hard call budget.

Live news is not automatically safe educational material

A headline is a starting point, not a complete lesson. Sources can fail, repeat stories, omit context, or introduce bias. The MVP labels sources and reconnects the player to a historical fact in the debrief, but a classroom version needs educator-authored source packets, primary documents, review tools, and clearer provenance for every claim.

Deployment exposed different problems from local development

The Vite client built locally while Vercel's serverless environment exposed TypeScript and ESM module-resolution issues. Fixing these required separating browser and server assumptions, correcting server imports, and testing the production deployment rather than treating a local build as sufficient proof.

Balancing gravity with play

The first interface became so serious and dark that it risked feeling like a control panel rather than a game. A brighter map improved geographic readability, but initially damaged the XCOM-inspired identity. The final direction keeps the tactical HUD and cinematic feedback while giving the map enough color and clarity to remain inviting.

What I learned

I learned that AI is most interesting in education when it changes what a learner can do, not only how quickly they receive an answer.

I also learned that persistence can matter more than conversational fluency. A beautifully written response disappears when the next prompt starts. A recorded decision that changes another nation's briefing creates causality the player can inspect.

Technically, I learned to treat structured output as an untrusted boundary, not a guarantee. JSON schemas, runtime validation, bounded deltas, caching, call ceilings, and deterministic recovery are what turn model output into a dependable game contract.

Most importantly, I learned the value of auditing the difference between "it appears to work" and "the complete state transition works." That discipline improved both the code and the honesty of the submission.

What I am proud of

I am proud that the MVP is more than a themed chatbot. A player can enter a real event, commit a response, watch national state change, cross into the rival chair, and see the first choice explicitly shape the second perspective.

I am also proud that the experience remains playable without credentials. Live integrations improve variety, but they are not allowed to hold the demonstration or learning loop hostage.

Finally, I am proud of the restraint in the current scope. STATE OF PLAY does not pretend to simulate the entire world. It uses one geopolitical relationship to prove one complete mechanic: a decision made in one seat of power becomes the reality inherited by another.

Research basis

STATE OF PLAY is an experimental MVP, not a completed educational study. These findings support the direction without proving the effectiveness of this implementation:

  • The Reuters Institute reports that 40% of surveyed audiences across markets sometimes or often avoid news, with overload, relevance, difficulty, and powerlessness among the concerns discussed. Digital News Report 2025
  • Freeman et al. synthesized 225 undergraduate STEM studies and found improved performance and lower failure rates under active learning compared with traditional lecturing. This supports asking learners to act rather than only receive an explanation. PNAS, 2014
  • Chernikova et al. reviewed 145 simulation-based learning studies and found a large positive overall effect on complex skills. This informed the use of decisions, consequences, roles, and scaffolding. Review of Educational Research, 2020
  • Wouters et al. found learning and retention advantages for serious games, but no statistically significant general motivation advantage. That caution matters: dramatic presentation alone is not evidence of learning. Journal of Educational Psychology, 2013

The responsible claim is therefore modest: well-scaffolded, active simulations can complement teachers, primary sources, and discussion. They should not replace them.

What comes next

The US and Venezuela scenario is the first proof. The longer-term platform could support:

  • Teacher-authored scenarios aligned with a syllabus and clear learning objectives
  • Historical sagas played from several governments, communities, and institutions
  • Primary-source packets, maps, timelines, and citations attached to every decision
  • Classroom sessions where teams represent stakeholders and negotiate in real time
  • Age-appropriate modes for schools, universities, museums, and independent learners
  • Localization for learners and events around the world
  • Assessment based on evidence use, recognition of tradeoffs, and reflection rather than recall alone
  • Private classroom analytics and leaderboards focused on learning progress
  • Scenarios beyond geopolitics, including economics, public health, climate policy, civics, and business history

The next serious step is not simply adding more crises. It is working with educators and learners to test whether the experience improves perspective taking, evidence use, historical reasoning, and retention. The product should earn those claims through evaluation.

STATE OF PLAY begins with a simple belief: AI should not only help people know more. It can help them slow down, inhabit a difficult decision, encounter another perspective, and understand why history was never as easy as hindsight makes it appear.

Testing instructions

  1. Open the clean judging run: https://state-of-play-nine.vercel.app/?demo=1
  2. Select Respond to this crisis.
  3. Open a crisis over Caracas.
  4. Review the two advisors and choose one of the three responses.
  5. Watch the consequence, meter changes, and event feed.
  6. Switch perspective to Venezuela.
  7. Look for the explicit Because the US chose... callout and changed Venezuelan state.
  8. Complete the opposite-chair response and open the shared debrief.

No account, payment, or API key is required. The fallback path is intentionally a complete judging path.

Built With

Share this project:

Updates