Know the World

A browser geography game: draw countries freehand, place them on a world map, and get scored on how close your shape and position are to the real thing. Plus flag quizzes, a "rank the economies" mode, and a data explorer — all in vanilla HTML/CSS/JS with no build step.

Play it: https://geo.petterbuilds.com/

Game modes

• Daily Challenge — one deterministic country per day

• Quick 3 — 3 random countries (drawing three is a session; ten is a slog)

• Famous 5 — the 5 largest countries by area

• Speed Round — a 3-minute timer, as many as you can

• Streak — keep going until your score drops below 25

• Continents / World — all 7 continents, or every country

• Regions — Africa, Europe, Asia, N. America, S. America, Oceania

• Top 10 / Bottom 10 — pick the countries at the top (or bottom) of a ranking

Plus combinable toggles (Placement Only, Tweak, Blind, Explorer, Hard) and separate flag-guessing, flag-color-picker, rank-line, and data-explorer modes.

Running locally

It's a static site — just serve the folder over HTTP (the data loads via fetch, so opening index.html directly won't work):

python3 -m http.server 8080
# then open http://localhost:8080

How it works

• Canvas for all rendering; freehand drawing supports multiple shapes.
• Shapes are projected with a Mercator projection into a 1600×1100 world space.
• Scoring rasterizes your placed shape and the reference and computes intersection-over-union (IoU).
• Touch support on both canvases: one finger draws, moves and resizes; two fingers pinch-zoom the map.

Data

• Geometry — Natural Earth (public domain), projected into the game's Mercator space.
• Country stats — World Bank Open Data.
• All datasets join on the ISO 3166-1 alpha-2 country code. See docs/DATA.md for the regeneration pipeline.
• data-map.html — the pipeline, on the served site: which source feeds which script feeds which file feeds which module, plus the cross-file integrity checks, computed live from the committed data. Per-entity coverage lives in the app instead, under Data Explorer → Coverage (#/explore/coverage), where the Colors column checks each curated flag colour against the flag's own image.

Project layout

Path	What
index.html	All game screens
js/main.js	Central Game class / state machine
js/drawing-canvas.js, js/world-canvas.js, js/shape-handles.js	The two interactive canvases and their shared resize/rotate handles
js/scoring.js	Rasterized IoU scoring
js/geo-data.js, js/datasets.js	Data loading and reference shapes
data/	Country geometry, stats, flags
scripts/	Data regeneration (Node)