Demo · 8 September 2026

Moon Courier Crisis

Moon Courier Crisis separates domain simulation from presentation. SimulationEngine accepts commands and produces events and snapshots; a seeded RNG makes runs reproducible. React/Zustand manage mission UI while Phaser renders the current state as a projection.

Demo ↗Documentation →Source code ↗
Retained stage history: August 2026; development start is unknown. Demo published: 7 September 2026.Version b6b24e1215 interface screenshots

Mission selection; the frame captures the player's action, simulation state and resulting interface change.

01 / The task

Browser game in React and Phaser

The task was to build a short but complete game with routing, limited visibility, events and replay. Domain logic had to remain independent of canvas and UI components.

Use case: A browser game with route controls.

Work done

  • Connected the React interface to Phaser game scenes.
  • Routes, events, briefing, radio panel and mission restart.
  • Build, asset checks and mobile layout for the pre-game screens.

02 / Implementation

What sets the implementation apart

Routes use Dijkstra over visible nodes, events change visibility, and Zod validates content before launch. Commands and snapshots allow mission outcomes to be tested without a browser; Phaser owns no game rules and can be rebuilt from state.

Screenshots

Screens, forms, errors

Screenshots, diagrams and source evidence retain their original language; captions and descriptions are translated.

03 / Technology

Stack

TypeScript simulation / domain 35.9%React / Zustand 22.9%TypeScript / Zod content 22.1%Phaser 19.1%

Shares use Git application-file bytes at pinned revisions. Each file belongs to one subsystem under scripts/generate-stack-share.mjs rules; tests, assets, dependencies and generated files are excluded. Rounded to 0.1%. This describes code composition, not proficiency.

React

Briefing, panels, hints and mission result.

Phaser

Canvas, game loop, scenes, routes and objects.

TypeScript / Vite

Game model, production build and asset checks.

04 / Decisions

How the project works

  • React handles the interface; Phaser handles the canvas and game loop.
  • Level selection, briefing, mission and result are separate states.
  • After a defeat, replay returns to the briefing; a new shift starts through an explicit action.
Components of the published demo
Components of the published demo

05 / Verification

Demo workflows

  1. Choose a level and read the briefing.
  2. Start a shift, select a courier and assign a route.
  3. Open the radio panel and follow a mission event.
  4. Wait for the result, select replay and start a new shift from the briefing.

Check results

  • 15 meaningful screenshots of the actual interface retained.
  • Each screenshot includes its date, scenario and code revision.
  • No separate backend process runs on the VPS: Nginx serves static files. Shared Nginx resources cannot fairly be attributed to a single site.
  • 6 scenario repetitions measured; median 61.0 ms, maximum 1770 ms. Timing includes the browser and HTTPS; methodology and limitations are included.

Limitations

  • Route control is designed for a mouse and keyboard. Mobile screens are responsive, but full touch-based routing is not claimed.
  • The first available commit is a baseline of an already completed stage, so it does not establish when development began.
  • No external integrations or server database: the mission runs in the browser.

Technical notes

Modules, API, data model, setup and check results.

Documentation →Materials ↓
1 / 15 · Moon Courier Crisis
Mission selection; the frame captures the player's action, simulation state and resulting interface change.
Mission selection; the frame captures the player's action, simulation state and resulting interface change.

2026-09-07T01:05:40.267729+00:00 · version b6b24e12 · Full size ↗