BlockClaim

About BlockClaim

Inspiration

The idea behind BlockClaim comes from The Four Wishes by MINDZERO (https://www.youtube.com/@MINDZEROstudio). In the show, contestants must commit to a goal before attempting it — a bold claim followed by high-stakes execution. That tension between confidence and ability felt like the perfect foundation for a puzzle game.

How It Works

BlockClaim is a competitive puzzle game built as a Reddit (Devvit) app. Each round presents players with a grid and a set of polyomino blocks — ranging from simple monominoes to tricky pentominoes. The game unfolds in two phases:

1. Claim — Study the board and declare how many blocks you can place. Claim fast for bonus points, but overcommit and you score zero.
2. Execute — Place your claimed blocks on the grid by dragging them into position, racing against the clock.

Scoring heavily rewards the number of blocks you actually place, with smaller bonuses for speed and a perfect bonus if you match the optimal solution. A live leaderboard lets players in each post compete head-to-head.

How I Built It

The app runs on Devvit with a React frontend served inside a webview iframe. The backend uses Hono and tRPC for type-safe API communication, with Redis handling game state, puzzle storage, and leaderboards. Puzzles are generated via seeded randomness tied to each post, so every thread gets a unique challenge. Moderators can also design custom puzzles through a built-in editor with solution validation.

Key tech: TypeScript end-to-end, Tailwind CSS for styling, Vite for builds, and Vitest for testing.

Challenges

• Fitting the game in a webview — Devvit's iframe has limited viewport real estate. Getting the grid, controls, and block previews to fit without scrolling required dynamic cell sizing based on viewport dimensions and careful spacing tradeoffs.
• Drag-to-place on touch devices — Translating pointer coordinates to grid cells while supporting rotation, ghost previews, and pointer capture across both mouse and touch took several iterations to get right.
• Scoring balance — Early versions let speed bonuses overshadow actual puzzle skill. Tuning the formula so blocks placed dominates while still rewarding fast claims and execution was a back-and-forth process.
• Puzzle fairness — Seeded generation ensures every player in a post sees the same puzzle, but making sure the generated block sets are solvable and interesting required careful shape selection and validation logic.

Built With

• devvit
• react
• tailwind
• typescript
• vite