PM New build is live: "Build the first version of Stripes & Suspects: generator, grid, and animated Algorithm X solver". Reload the game to play it. · 8d
▶ 2 plays · 0.5 min average
From arXiv: “From Natural Language to Exact Cover: A Neuro-Symbolic Approach to Zebra Puzzles”
Initial build as a single self-contained HTML page with no external assets. It has: - A 4x4 zebra puzzle generator: a random solution, clues from templates (same-house, not-same, left-of/next-to, at/not-at position N), clues added until the puzzle has a unique solution, then unneeded clues pruned, all in under 1s. - A tappable clue list with strike-through. - A standard elimination grid that cycles blank → ✗ → ✓, with optional auto-elimination and big touch targets. - A win check with a success banner, plus a Check button that marks wrong ✓ in red. - A timer that starts on the first move. - A Show Solver panel that encodes the puzzle as exact cover and animates Algorithm X. Covered columns dim, the chosen row turns green and backtracking flashes red. It has a speed slider, pause/step controls, and a step counter and solver time next to the player's time. - A New Puzzle button. - Flat pastel art with striped house icons. Implementation note: the relational clues (left-of, next-to) can't be expressed as plain exact-cover columns. Rows should be house-attribute assignments allowed by the single-house clues. The relational clues are then checked as extra conditions during the search, so the solver backtracks when one fails. The generator and the animation must use the same solver.
A single self-contained HTML page with no external assets. 1. Generator: pick a random 4x4 solution (4 houses × color/pet/drink/job, 4 values each). Make clues from templates (same-house, not-same, left-of/next-to, at position N, not at position N). Keep adding clues until the Algorithm X solver finds exactly one solution, then prune clues that aren't needed. Puzzle must be solved by the generator in under 1s. 2. Clue list: plain-English clues the player can tap to strike through. 3. Elimination grid: the standard logic-grid layout of category pairs (house vs each category, plus category vs category). Click/tap cycles blank → ✗ → ✓. A ✓ auto-fills ✗ in the rest of its row and column (toggleable). Big touch targets on mobile. 4. Win check: when the ✓ marks match the solution, show a success banner with the time. A "Check" button marks wrong ✓ in red. 5. Timer that starts on first move. 6. "Show Solver" button: encode the puzzle as exact cover (rows = house-attribute assignments allowed by the clues, columns = constraints) and animate Algorithm X. Show a compact matrix panel where covered columns dim, the chosen row highlights green, and backtracking flashes red. Speed slider plus pause/step. Show the step counter and solver time next to the player's time. 7. "New Puzzle" button. Acceptance: every generated puzzle has exactly one solution; the grid works with mouse and touch; the solver animation ends on the right answer; no console errors. The original idea, in the owner's words: “Who Owns the Zebra?: Solve randomly generated zebra logic puzzles on a grid, then watch an exact-cover solver crack the same one step by step. Generator for 4x4 zebra puzzles with clues, a clickable elimination grid, and a 'show solver' button that animates Algorithm X covering rows and columns. Includes a timer comparing you to the solver.”
This is a clear spec, so it's ready to build as the first version. One technical point: clues like "directly left of" and "next to" don't fit as plain exact-cover columns. The solver will check them during the search and backtrack when one fails. The generator will use that same solver to confirm each puzzle has exactly one solution, so the animation will always end on the correct answer. Queued for implementation in an isolated workspace. I’ll report the checks and a pull request here.
Implemented in pull request #1. The project build and tests passed in the isolated workspace. I've built Stripes & Suspects as a single `dist/index.html` (330 KB). It has no external requests and inlines all icons, styles and music. `npm run build` and `npm test` both run clean: **12 of 12 tests pass**. Nothing is committed; the platform does that. **What's in it** - **Generator and solver** (`src/engine.js`): each puzzle starts from a random 4-house solution (color, pet, drink, job) and builds clues from all six templates. Clues are added until there's exactly one solution, then unneeded ones are removed. Over 500 seeds, the slowest generation took 10 ms. - **Algorithm X:** each matrix row puts one value in one house, keeping only rows the "in house N" / "not in house N" clues allow. There are 32 columns. The relational clues (same house, not same, left of, next to) are checked after each pick. Rows that can no longer satisfy a clue are ruled out, and the search backtracks when a clue breaks. The generator and the animation use the same `solve()` function. - **Grid:** the standard layout with 10 category blocks. Each cell cycles blank → ✗ → ✓, and the Auto-✗ toggle fills ✗ across a ✓'s row and column. Undo is also included. A "Your street" preview fills the empty corner of the grid. - **Mobile grid:** on phones the whole grid would be too small to tap, so you see one block zoomed in (about 46px cells) plus a tappable mini-map to switch blocks. - **Clues, timer, Check, win:** clues are plain English and strike through on tap. The timer starts on your first move. Check turns wrong ✓ red. You win once every house's color, pet, drink and job is ✓ with no wrong ✓ anywhere; the banner shows your time and the rest of the grid fills in. - **Show Solver:** covered columns dim, the chosen row flashes green, backtracking flashes red, and rows ruled out by a clue are hatched yellow. The clue that breaks is highlighted in the list. It has a speed slider and Pause/Step/Restart. The step count and solver time appear next to your time in the header and in the panel. - **Sound and saves:** sound effects are synthesized in code, and a 30-second lo-fi jazz music loop starts after your first click; music and effects have separate mute buttons. Progress saves through `window.hallway` when it's available, and the game still works without it. **What the tests check** - **Engine (300 seeds):** each puzzle is generated in under 1s and has exactly one solution, which matches the hidden one. Removing any single clue leaves more than one solution. Every template appears and clue text reads correctly. The recorded animation always ends on the hidden solution. - **Browser (Chromium):** a full desktop session covering mouse cycling, the Auto-✗ toggle, the timer, Check, the win banner, solver pause/step/speed and New Puzzle. Also a red backtrack flash, tapping on a 390px phone (cells at least 40px, no sideways overflow), and save/restore on reload. No console errors, no network requests. **Screenshots I reviewed:** start, mid-game and win at 1440×900, plus 1280, 1024 and phone views. I fixed what I saw: clipped labels, the solver panel overflowing, a phone layout 62px too wide, the mobile header overlapping, and the finished matrix turning all grey. The cover image is saved as `/tmp/projex-shots/cover-1440x900.png`, showing a game in progress with the solver mid-search. I couldn't listen to the audio; the sound design is conventional and the music was described as gentle and unobtrusive. Verification and merge follow the project’s auto-merge setting. You can follow the pull request in the Code tab.
Auto-merged pull request #1 after a fresh build and test run against the latest main branch. Automatic publishing will follow when enabled and hosting is connected; the live release status appears here.
Published: https://projex.fly.dev/play/project_5fdf65b5-8cd — fresh build and tests passed, stored content verified, commit 09476d6. This is the platform-built version.
Log in to add to the discussion.