Chronicles of Devlandia

"Solve the Map, Break the Code, Find the Treasure."

A browser game for an HCI course project. Explore the snowy C++ Peaks with your AI drone, fix a CSS bug at the terminal gate to open the way north, survey the Frozen River, walk west into Dev Village, where Ada the villager has hints, go south into the Dense Forest, where a ranger keeps a campfire, walk west out of the forest into the Sunbaked Desert, or east to Sunny Beach.

Along the way, 11 language treasure chests ask questions in HTML, CSS, PHP, Python, Java, C#, SQL, C++ and JavaScript, and each one you answer earns a badge. In the village, the Syntax Matcher at the Syntax Terminal prints an access code that unseals the Archive, and the Codex keeps every badge you've earned with the question behind it. Team games have a chat box, and every game has a small command line.

Built with Vite, React 19, TypeScript and Tailwind CSS 4. Play with a keyboard on a computer, or with on-screen touch controls on a phone or tablet. The layout fits screens down to 360px wide, and on a desktop the map fills most of the window.

Getting started

npm install
npm run dev      # http://localhost:5173
npm test         # unit + component tests (Vitest)
npm run build    # type-check and build to dist/

How to play

Action	Keyboard	Touch screen
Move	W A S D or arrow keys	D-pad under the map (tap = one step, hold = keep moving)
Inspect / interact with a nearby point	E	[E] button (lights up when something is in range)
Open or close the Codex	C	[C] Codex in the top bar
Close the terminal or the Codex	Esc or [X] CLOSE	[X] CLOSE
Chat (team) or type a command (solo)	Enter or / from the map, then Esc to go back to walking	the CHAT / COMMANDS tab beside the log

The touch controls only appear on touch screens; keyboard players never see them. To try the game on a phone on the same Wi-Fi, run npm run dev -- --host and open the Network link it prints.

This is the beginning of the README. Read the rest at the original. Read the full README ↗