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 2D browser puzzle game titled “Pipeflow.” Use a dark navy full-screen page with a centered app panel (maximum width about 760px), system sans-serif typography, and a large rounded rectangular puzzle canvas. The header should show the title “Pipeflow,” the subtitle “Rotate every pipe and route the water to the tank.”, and a gold “Moves” counter starting at 0. The footer should contain a “New puzzle” button, a centered status message initially reading “Tap a tile to rotate it.”, and the hint “↻ clockwise”.

The core game is a 7-column by 6-row grid of rounded dark-blue pipe tiles, with visible spacing between tiles. Each tile has a softly rounded rectangle, a subtle offset dark shadow, and a cyan/turquoise pipe symbol drawn with thick rounded strokes: straight segments, elbows, T-junctions, and other multi-connection pieces. Represent each piece as a four-bit connection mask for up, right, down, and left. Clicking/tapping any tile rotates its mask 90 degrees clockwise and increments the Moves counter. Support pointer/touch input on the board and prevent page scrolling while interacting.

Generate a new puzzle procedurally on startup and whenever “New puzzle” is pressed. Build a guaranteed connected tree of pipe connections beginning at the source in row 3, column 1 (zero-based row 2, column 0), then ensure a route runs horizontally across row 3 toward the right edge and vertically down the final column to the tank in the bottom-right tile (row 6, column 7 in one-based terms). Randomly rotate every tile before play so the player must orient the pipes. The objective is reached when the source and tank become connected through matching neighboring pipe ends: a connection only propagates if the current tile has an opening toward its neighbor and that neighbor has the opposite opening. Use flood-fill connectivity from the source to determine which tiles are active.

Draw inactive pipe strokes in bright mint/cyan (#75d7d0) on the normal dark tile (#1c4563). Draw all currently source-connected/reached tiles with a brighter pale water color (#b8fff1), and slightly lighten their tile background (approximately #24617b), making the water route visibly propagate as the player solves the puzzle. The source tile is the leftmost tile of the third row: add a small bright blue dot and the label “SOURCE” near its upper-left area. The destination is the bottom-right tile: draw a gold rectangular tank outline inside the tile and the gold label “TANK” near its bottom. Use gold for the move count and tank, and mint for the solved status.

When the tank becomes reachable, stop accepting rotations, set the status to “Water reached the tank!” with an emphasized mint/green style, and animate a small glowing white/pale-water dot along the solved route/board area using a continuous requestAnimationFrame loop. Keep the animation subtle; the board remains playable-looking but solved state is locked until New puzzle is pressed. The canvas should resize responsively with device-pixel-ratio support, remain centered, fit portrait/mobile screens, and use a dark navy page background, rounded canvas border, and soft shadow. The game must be purely visual and interactive with no extra mechanics, enemies, timer, score, lives, or game-over system.