Sudoku Dungeon Project Report
1. The Concept
Sudoku Dungeon is a portrait web game that turns classic Sudoku into a cute dungeon RPG. You do not fill numbers for their own sake — each correct cell is an attack. Elements on the board hit the foe; a wrong place costs a heart. Most rooms end when the monster’s HP hits zero, even if empty cells remain. The last boss, the Lich, is the exception: you must finish the whole board. Six foes wait in the dungeon (Slime, Golem, Imp, Wraith, Drake, Lich), each with a timer, a weakness, and a harder puzzle. The hook is simple: Sudoku that feels like a fight, in five to ten minutes, on a phone or a laptop.
2. The Stack
The Stack: TypeScript, Vite, vanilla DOM (no React), a Python + Pillow asset baker for the 1080×1920 UI, Web Audio for music and clicks, and a small tsx playtest script. The board, solver, and combat live in plain modules. The stage is one fixed canvas-like shell that scales to the real viewport. The AI Assist: Cursor (Grok) as a pair programmer — layout, hit-testing, audio, win flow, and device scaling were built in chat, then checked in the browser and with npm run playtest.
3. The 1 Day Sprint:
Morning (Hours 1–3): Locked the fantasy: one room, one foe, one board. Stood up Vite + TypeScript, generated valid Sudoku, and drew the portrait dungeon as baked WebP art so every button looked the same. Title, Guide, Foes, and the battle HUD existed as a single 1080×1920 stage. Afternoon (Hours 4–6): Wired combat: ten hearts, element damage, weakness bonus, per-foe countdown, pause / quit / retry. Added cute dungeon music (not horror), click SFX, and a mute toggle. Chrome inspect kept missing taps, so real HTML hit buttons sat under the art instead of relying on scaled images. The Finish Line (Hour 7-8): After a kill, a win popup with Next and Replay (same gold buttons as the rest of the UI). Unified live letters (timer, HP, “Foe defeated!”) with Noto Sans. Fitted the stage to phones, notched screens, landscape, and desktop so the game looks like one product everywhere.
4. The Roadblocks
Roadblocks: CSS transform: scale on the shell broke taps in Chrome device mode — pointerup dropped, overlapping Foes / Back fired the wrong screen, and pause Quit did not return home. Mixing CSS buttons with baked art made Next / Replay look like a different game. @font-face plus preload CORS left timer and HP on a fallback font until the faces were forced to load. Safe areas, the iOS URL bar, and tiny phones (iPhone SE) all wanted different scale math. Audio first sounded too scary for a cute slime dungeon and had to be rewritten.
5. Key Takeaways
Bake the chrome as images if you want identical UI on every device; keep live text only for numbers and names that change. Put invisible, real buttons on top of art when the whole stage is scaled — inspect and real phones then agree. One portrait stage plus visualViewport + safe-area insets beats rewriting CSS per phone. A tiny playtest script catches win / next / replay / timer / quit faster than clicking through six foes by hand. My final thought: Sudoku Dungeon works because the puzzle *is* the fight. One focused day was enough to ship a playable dungeon on phone and laptop — the lesson is to freeze the frame (1080×1920), freeze the look (baked UI + one font), and only then chase polish.