Flow Free Clone

Build a polished web clone of Flow Free, the pipe-connecting puzzle game, in React + TypeScript + Tailwind with the board drawn on a canvas: connect matching coloured dots with pipe, fill the whole board, earn a Perfect.

It is Flow Free on screen: its name, the lowercase "flow" wordmark with each letter in a pipe colour (f red, l green, o blue, w yellow) plus a small (R), pure black backgrounds with huge dim pipe pieces floating behind every screen, light Helvetica Neue type and all-lowercase words ("free play" style: "play", "daily puzzles", "time trial", "settings", "how to play", "level 12 5x5", "flows: 4/5", "moves: 4", "best: -", "pipe: 95%", "Perfect!", "Level Complete!", "You completed the level in 7 moves.", "next level", "share"). Pipe colours in Flow's order: red #FF0000, green #008D00, blue #1A2CFF, yellow #EAE000, orange #FB8A00, cyan, magenta, maroon, purple, white, gray, lime, tan, navy, teal, pink.

SHELL
Phone-width column centred on a black page (works on desktop and mobile). Opens on the menu: no splash, login, ads or paywall. Routes: /, /levels, /levels/:pack, /play/:pack/:n, /daily, /daily/:day/:n, /time-trial, /settings, /how-to-play.

SCREENS
1. Menu: the big wordmark, then the five menu words; "daily puzzles" shows today's progress (2/6) in red.
2. levels: rainbow "levels" title; rows with the pack name in its colour, a grey subtitle and "37 / 150" (star when all perfect, lock when closed): Daily Puzzles (red, "3 day streak! New puzzles available!"), Regular Pack (yellow, 5x5 to 9x9 boards), Bonus Pack (blue), 6x6 Mania (green, "All 6x6, all the time!"), 7x7 Mania (magenta), 8x8 Mania (tan), 9x9 Mania (red, "Solve 40 levels to unlock"), 10x10 Mania (blue, unlock at 80).
3. Level select: pack name header, pages of 30 ("5x5", "6x6"... or "1 - 30" for Mania) with arrows and page dots, a 6x5 grid of numbered squares, each row in the next pipe colour: solved = solid colour with a check, perfect = star, open = dark tint, locked = grey lock. Levels open up to 3 past your furthest solve; a white ring marks the next one.
4. Play: header "(<-) level 38 6x6" in the pack colour (star/check at right once solved); HUD "flows: 0/7  moves: 0  best: -  pipe: 0%"; the square board with thin grid lines in the pack's grid colour, dots 2/3 of a cell, thick round pipes, cells under a pipe tinted 24% of its colour, a big translucent finger circle while dragging, a ring pulse on both dots when a flow connects. Bottom bar of white outline circles: settings | previous, undo, restart, next | "3 x (?)" hints. Keyboard: Z undo, R restart, arrows prev/next.
5. Win: a bright wave sweeps over the board, then a thin white-bordered box: "(star) Perfect!" (or "Level Complete!"), "You completed the level in 7 moves.", "next level", "share", an x to close.
6. Daily Puzzles: "Today" + date, "2 / 6" and "3 day streak!", six tiles (5x5, 6x6, 7x7, 8x8, 9x9, 9x9) with a mini preview of the board (solved ones show their pipes), then a month calendar: red disc = all six solved, red ring = started, tap a past day to play it.
7. Time Trial: pick board size (5x5-9x9) and time (30 sec, 1/2/4 min), "best: 4 solved", start; boards come back to back with "time: 0:42" in the HUD and "solved: 3" in the header; "Time's up!" box with play again / change mode.
8. Settings: sound, vibration, colorblind mode (letters on dots), levels solved, hints left, reset progress / restore demo progress (confirm dialog). How to play: Flow's three rule lines and a 5x5 board that solves itself on a loop.

RULES
Drag from a dot to draw; reach its twin to connect. Grab any pipe to continue from that point; tapping a dot restarts that pipe. A pipe you drag across another cuts it, and the cut pipe comes back if you back off within the same drag. Moves count each time you start changing a different flow than last time. A level is solved only when every pair is connected AND pipe is 100% (otherwise show "Connect every pair and fill the whole board."). Perfect = moves no more than the number of flows. Hints lay down one correct pipe (start with 3, earn one every 10 levels). Undo restores the board before your last drag. Short synthesized tones on connect and win, vibration on phones. Progress, best moves, stars, hints, streaks and trial bests save in localStorage.

LEVELS
Generate them, never hand-type: join random single-cell pipes end to end only when the pipe never runs alongside itself, splice leftovers into neighbours, reject any pipe that fills a 2x2 square, and keep a board only if a solver (grow each pipe from one dot, most constrained first, prune dead-end cells, unreachable partners and orphan regions) proves exactly one solution. Ship 1,050 levels (Regular and Bonus 30 per size 5x5-9x9; Mania packs 150 each) as JSON [w, h, dots, solution], easiest first within a size. Daily puzzles are generated in the browser from the date so everyone gets the same six.

DEMO DATA
A sample player a few weeks in, re-dated to today on every boot until the visitor solves something: Regular 37/150 (mostly stars), Bonus 12, 6x6 Mania 7, 7x7 Mania 3, ten past daily days plus today's first two, a 3 day streak, trial bests. ?reset=1 wipes progress; ?demo=1 runs an attract mode where a pretend finger opens Regular Pack and solves two levels.

REMIX-READY
theme/brand.ts (name, wordmark, colours, words, hint and unlock rules), data/packs.ts (packs), data/levels/*.json, a DOM-free game/ folder (board rules, solver, generator, renderer), one file per screen, scripts/gen-levels.ts to regenerate packs, files under 300 lines, README with a file map.