• 

  Snoo puzzle Arena

Snoo Puzzle Arena

Inspiration

Reddit's own mascot, Snoo, combined with the classic sliding tile puzzle ("15 puzzle") idea gave us the starting point: we wanted a simple, instantly understandable mini-game that needs no account or sign-up, and can be played directly in the feed without opening a separate app.

What it does

A 3x3 sliding tile puzzle that appears directly inline in the subreddit feed. Players can choose between two pictures (Snoo, or an original space/planet scene) and slide tiles into the empty slot to reassemble the picture. The game counts moves and keeps a separate personal best for each picture, stored in the player's browser. The expanded view adds a bonus "Snoo Clicker" mini-game. Moderators get a menu command to create a new puzzle post.

How we built it

Built on Reddit's Devvit platform, using the Devvit Web template: a React 19 + TypeScript client (two entrypoints — splash.html for the fast, inline puzzle view, and game.html for the expanded view), Tailwind CSS for styling, Vite for bundling, and Hono on the server side (moderator menu, forms, triggers). The Devvit CLI (playtest, upload, publish) was used for live testing and for submitting the app to Reddit's review process.

Challenges we ran into

• Guaranteeing a solvable puzzle: a naive random shuffle would produce an unsolvable board about half the time, so we wrote a shuffle algorithm that only ever performs valid, reversible moves starting from the solved state.
• TypeScript's strict indexed-access checking (noUncheckedIndexedAccess) flagged several array accesses in the tile-swap logic as possibly undefined; we resolved these with real runtime guards instead of unsafe casts.
• Windows vs. Unix shell compatibility: the lint script's glob pattern used single quotes, which work fine in bash but aren't stripped by the Windows cmd shell, breaking npm run lint/deploy on Windows — switching to double quotes fixed it on both platforms.
• Migrating saved data: when best-score storage changed from a single number to a per-picture map, we had to make sure returning players didn't lose their previously saved record.

Accomplishments that we're proud of

A fully working, live-tested game running on Reddit, with guaranteed-solvable puzzle generation and per-picture personal bests — successfully submitted to Reddit's official app review.

What we learned

How Devvit's dual-entrypoint model works (fast "splash" view vs. heavier "expanded" view) and its constraints; that Devvit's Payments API is still experimental and tied to the older public-api trigger context, so it isn't ready to build real monetization on yet; and practical Windows/Unix shell-quoting gotchas in npm scripts.

What's next for Snoo Puzzle Arena

More pictures (possibly community-submitted), a leaderboard (would require server-side/Redis storage instead of the current local-only best scores), and revisiting paid picture packs once Devvit's payments API matures out of its experimental status.

Built With

• css
• devvit
• hono
• html5
• javascript
• node.js
• react
• vite