Pipeflow

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a responsive browser puzzle game titled “PIPEFLOW.” The player must rotate pipe tiles so water can travel through matching connections from the source/pump in the upper-left corner of a 6x6 grid to the tank in the lower-right corner. Use a dark, polished aquatic UI: the page background is near-black navy, with a centered app no wider than about 720px and a large rounded board container with a subtle blue radial-gradient glow, thin blue border, and shadow. At the top, show the title “PIPEFLOW” in large light blue-white uppercase lettering and the subtitle “Rotate every piece to send water from the pump to the tank.” On the right (or wrapping responsively), show pill-shaped HUD labels “Moves 0” and a live elapsed timer starting at “0:00,” plus a rounded “Restart” button. Below the board show the instruction/status message “Tap a tile to rotate it.” and a small legend indicating a glowing blue dot for “water path,” a gold dot for “tank,” and “⟳ tap tiles to rotate.”

The play area is a square 6x6 grid. Each cell has a very dark blue alternating tile fill, thin teal grid lines, and rounded corners around the overall canvas. Every tile contains a pipe network segment drawn in a muted blue-gray with a darker shadow/outer stroke and a lighter narrower inner stroke. Pipe endpoints extend almost to the cell edges and are rounded; the possible pieces are straight, corner, and multi-connection shapes as determined by their connection masks. Define connection bits as up=1, right=2, down=4, left=8, and rotate a tile 90 degrees clockwise on each pointer/touch click by cycling these bits. A click anywhere in a valid cell counts as one move and immediately redraws the board. Support mouse, touch, and pointer input.

Generate a fixed underlying solution layout containing a winding route from grid coordinate (row 0, column 0) through (0,1), (0,2), (1,2), (2,2), (2,3), (2,4), (3,4), (4,4), (4,5), to (5,5), plus disconnected decoy pipe shapes filling the other cells. Randomly rotate every tile by 0–3 quarter-turns when a new game starts, so the visible starting board is scrambled while preserving each tile’s shape. The source is at row 0, column 0 and the destination tank is at row 5, column 5. The route is considered connected only when adjacent tiles have reciprocal openings: an opening from one tile must meet the corresponding opening on its in-bounds neighbor. Use a flood-fill/BFS from the source to find all mutually connected tiles; when the tank becomes reachable, mark the puzzle solved.

Render the source as a prominent cyan/light-aqua circular pump marker centered over the pipe in the upper-left cell, with a darker inner circle. Render the destination as a small gold tank/container in the lower-right cell: a dark-gold rectangular body behind a brighter yellow-gold inset, a pale outline, and centered text “TANK” while empty and “FULL” once water reaches it. Before completion, connected pipe segments remain muted blue-gray; all tiles reached by the source flood-fill should instead glow bright cyan-blue with a darker teal shadow, including their center disks. The rest of the board remains unlit. The board’s background should be approximately #0b2230 with teal grid lines; use cyan around #27c8ff for flowing water, pale cyan for the source, and gold around #ffd86b for the tank.

On every move update the move counter and continuously update the timer in minutes and zero-padded seconds from game start. Once the tank is connected, stop accepting further tile rotations, keep the solved water path and FULL tank visible, and replace the status with “Tank filled in N moves — tap Restart to play again.” The Restart button must create a fresh scrambled board, reset moves to 0, reset the timer and solved state, and restore “Tap a tile to rotate it.” Make the layout responsive: center the square board in the available area, use viewport-aware sizing, preserve a touch-friendly minimum button height around 44px, and hide the subtitle/legend on especially short screens while retaining the game and HUD.