How this game is built
A tour for people learning to code. Each part says what it does in plain words, then gives a "director's cut" with something a little deeper. Play the game while you read.
The big picture
The game is written in TypeScript (JavaScript with types), built with Vite, drawn on an HTML canvas, and has no runtime libraries. It runs entirely in your browser.
Director's cut: "no runtime dependencies" means nothing extra is downloaded to play, which keeps it fast and removes a whole class of supply-chain risk. Types are checked before the game is built, so many mistakes are caught before anyone plays.
The simulation (src/sim)
The rules of the game live apart from the drawing. Given the same starting seed and the same commands, the simulation always produces the same match. The map is a hex grid, and units find their way with an A* search.
Director's cut: this is called determinism. It is what lets a computer play thousands of test matches to check the game is balanced, and it is the basis for replays and, one day, online play. The random numbers come from a seeded generator, not Math.random().
The game loop
The game updates in fixed small steps and draws after. The update never depends on how fast your phone is.
Director's cut: a fixed time step means a slow phone and a fast phone run the same rules, just drawn at different smoothness.
Sound without sound files
Most sound effects and the built-in music are made live with the browser's Web Audio API: oscillators, noise and filters.
Director's cut: synthesising sound means tiny downloads and the sound can react to the game, for example snapping to a beat. The soundtrack tracks themselves are real audio files by the artists.
Hosting and safety
The pages are served by small Cloudflare Workers. Strict headers (a Content-Security-Policy, HSTS) tell browsers what each page may and may not do.
Tests
Unit tests, browser tests that really play the game on a phone-sized screen, and a "balance smoke" check that runs computer-vs-computer matches. Nothing ships unless they pass.
Next: how to read the source of any page and the glossary. Learn more at MDN: Learn web development.