2026 · Archive · Geography game
Atlas
A drag-and-drop geography game: 17 country cards dropped onto their capitals on a Middle East map I drew.
- React 18
- @dnd-kit/core
- CRA 5
- inline SVG
- country cards to place
- 17
- of inline SVG in the map
- 1.36 MB
- useState calls hold the whole game
- 2
- px where two positioning systems meet
- 1024
What I walked into
A game on a map I drew, whose drop zones had to line up with the artwork at any size.
The archive had no touch support and none of the SEO and PWA layer.
What I changed, and why
The map is a component
The map is inline SVG rather than an image, so the drop zones live in the artwork’s own coordinate space.
Two useState calls
The entire game state is held in two useState calls.
Two positioning systems
Touch support uses SVG-relative fractions below 1024 px, while the original hand-tuned pixel sets stay above.
The map scales losslessly, without a second request.
Where it landed
The game works with touch, and the map scales losslessly without a second request.
The 2026 pass added the SEO and PWA layer the archive never had.