Pipuzzle

• 

  Win state after a successful water route and score update.

• 

  Mobile layout keeps controls readable and pixel art integer-scaled.

• 

  Leak inspection state with the rat inspector and highlighted pipe issue.

• 

  Desktop game board with the generated 32px pipe atlas scaled crisply.

• 

  Pressure test failure state showing flow feedback and retry context.

• 

  Expanded Reddit view running the Phaser game with final bitmap tile art.

• 

  Live Reddit post with lightweight Pipuzzle splash inside r/pipuzzle_dev.

Inspiration

The developer brief called for a compact sewer-repair puzzle with crisp pixel art, an 8x6 pipe board, and a rat inspector. I treated the Reddit post format as the main design constraint: the feed view has to stay lightweight, while the expanded view becomes the full game without sending players elsewhere.

What it does

Players open a Pipuzzle post, inspect suspicious cells, rotate or move pipe pieces, then run a water-pressure test. The shared simulation checks whether water can travel from the virtual inlet to the outlet, while the Phaser scene animates wet pipes, leaks, pressure failures, and completion states. Devvit Redis records clears, perfect flows, leak-finder badges, pressure badges, streaks, best scores, and a post-level leaderboard so each Reddit post can become its own small competition.

The hook is intentionally short: fix today's route, improve your score, and come back to keep the streak alive. The game now surfaces a daily route prompt and post leaderboard directly in the first play session.

How I built it

The app uses Devvit Web for the Reddit post entrypoints, Phaser for the expanded game scene, Hono for server routes, Devvit Redis for durable player state and leaderboards, and TypeScript shared logic for deterministic level simulation. The pixel art is not AI-generated: a repeatable local bitmap generator creates the pipe atlas, water frames, rat inspector, buttons, splash card, and 1024px app icon from the DOCX visual reference and a 32px logical tile system.

Challenges

The hardest part was keeping gameplay deterministic across client, server, and tests while still making the Phaser result feel animated. The other major challenge was visual: the DOCX reference implied roughly 96px displayed cells, so the game uses 32px source tiles with integer scaling only to avoid blur in Reddit's iframe.

Accomplishments

The build now has 10 authored levels, passing simulation and asset-reference tests, Redis-backed progression, daily route prompting, post leaderboards, generated manual pixel art, responsive desktop/mobile layouts, Devvit upload/playtest proof, and visual QA covering atlas, splash, desktop, mobile, leak, pressure, and win states.

What I learned

Devvit Web works best when the inline post is treated as a fast launch surface and the expanded view owns the heavier game runtime. A shared simulation module also makes puzzle authoring safer: every authored solution can be tested before Phaser renders it.

What's next

The natural next step is moderator-authored levels, richer public scoreboards, shareable result cards, and a judge-accessible public or reviewed/unlisted demo path.

Built With

• daily-challenge
• devvit
• hono
• leaderboards
• phaser.js
• pixelart
• reddit
• redis
• typescript
• vite