Maze generator & solver · mimo-v2.6-flash

Let me build the maze generator and solver visualization. I'll write a single index.html file.

Plan:
- Canvas-based maze 25x15 cells.
- Randomized recursive backtracking generation with animated carving (step per frame).
- BFS solver animated after generation.
- Buttons: New Maze, Replay Solver.
- Legend for styles.

Let me write the file.

Details:
- Cell walls: store per cell walls [top, right, bottom, left] booleans.
- Carving: iterative stack-based DFS, animate one carve step per frame (or a few ms per step). 25*15 = 375 cells, 374 carves. At ~16ms each that's ~6 seconds. Maybe do 2-3 steps per frame for faster. Let's do steps per frame based on speed, maybe 1 step per 12ms → ~4.5s. Fine.
- After generation, auto-start solver BFS.
- BFS animation: expand frontier step by step (per frame, maybe several nodes per frame). Show visited cells, frontier, then path highlight.
- Replay Solver: re-run BFS on existing maze.
- New Maze: cancel RAF loops, reset, regenerate.

Styles:
- Start: green cell, Finish: red/gold cell.
- Exploration: visited cells light blue fill, frontier cells brighter.
- Solution: orange/yellow thick line through centers.
- Walls: dark lines.

Also draw start/finish markers.

Path must cross open passages — since BFS follows open passages, that's automatic. Draw path as polyline through cell centers, crossing only openings.

Legend: small HTML legend with colored swatches.

Let me write code carefully.

Canvas size: cell size ~ 40px? 25 cells wide → 1000px + walls. 15 tall → 600. Viewport 1200x800. Let's use cell = 40, canvas 1000x600 plus margins. Actually wall thickness 3. Let's make canvas width = cols*cell, height = rows*cell, with walls drawn inside. cell=40 → 1000x600. Good with legend and buttons.

Maze data: walls array rows x cols, each with 4 booleans: N,E,S,W. Initially all true.

Carving animation: I'll animate by revealing carved passages step-by-step. Each step: pick from stack, standard recursive backtracker.

Implementation:

```
function generateSteps(){
  // returns array of steps? Better: generator state object
}
```

I'll implement an animatable generator with state: stack, visited. Each tick: standard algorithm iteration:

```
current = stack[stack.length-1]
neighbors = unvisited neighbors of current
if none: stack.pop() (this is backtracking — visually maybe draw current differently)
else: pick random, remove wall between, mark visited, push.
```

Each tick does one operation. To make progress visible and reasonably fast, run N ops per frame based on elapsed time: opsPerSecond ~ 300? 374 carves + backtracks total ops maybe ~800. At 300/s → 2.7s. Let's do speed where each carve step takes ~10-14ms. I'll use a time accumulator: stepInterval = 8ms, max 6 ops per frame... Actually 800 ops * 8ms = 6.4s. Hmm, a bit long but shows progress. Let's use 5ms → 4s. Reasonable. Or do per-frame: run enough ops to advance time*opsPerSec.

Simpler: track `lastTime`, accumulate dt, while(acc >= interval) doOp(); acc -= interval. interval = 6ms. With ~900 ops → 5.4 s. Maybe 4ms → 3.6s. Let's target ~3 seconds total: interval ≈ 3000/900 ≈ 3.3ms. I'll use 4ms.

Hmm but with 60fps, per frame we do dt/interval ops ≈ 16.7/4 ≈ 4 ops per frame. Fine.

Draw during carving: draw all cells (unvisited = white/gray), visited cells slightly filled, current cell highlighted, and walls drawn only where they exist. Actually drawing all walls initially: unvisited region walls... The standard approach: draw all walls initially (all cells walled), then as carving removes walls, redraw. That looks good: fully walled grid being carved.

Also highlight the carved passages: when a wall is removed, could flash. Keep it simple: fill visited cells with light color so carving trail visible.

Draw:
- background for cells: visited cells fill #eaf4ff (light blue), unvisited #ffffff... Actually let's do: unvisited cells white, visited cells light blue-ish (#dceeff), current cell bright yellow (#ffe066), stack cells (path) medium.
- Draw walls: for each cell, if wall N exists draw line top; W exists draw left; plus last row bottom, last col right.

Wall color #1f2a37, lineWidth 3 (for interior use 2? draw at half-pixel offsets). Use lineWidth 3, crisp: coordinates at cell boundaries; with device pixel ratio scaling.

Solver BFS:
- After generation completes, start BFS animation with delay ~400ms.
- BFS state: queue, visitedSet, order.
- Each frame advance several nodes (time-based, e.g., 60 nodes/sec → 375 nodes ≈ 6s; too slow maybe. Use 120/s → 3s). Let's do expand nodes based on time: nodeInterval = 8ms → 375*8 = 3s. Good.
- Visited cells fill: visited = #bfe3ff? Let's use visited fill #cfe8ff with a dot, frontier fill #59a8ff.
- Exploration style: draw explored cells with blue fill; frontier (currently discovered, in queue) with lighter blue ring.
- When BFS reaches finish, stop expanding, then animate path drawing: progressively draw polyline over ~700ms.
- Solution style: thick orange (#ff8c00) line with round caps, plus glow.

Order of visual layers: cell fills, then walls, then path, then start/finish markers, then explored dots maybe above walls? Fills below walls is fine.

Start marker: green cell fill #2ecc71 with "S" text or a circle. Finish: #e74c3c with "F". Legend explains.

Buttons: New Maze, Replay Solver. Also maybe status text (Generating… / Solving… / Done).

New Maze cancels previous animation: set flags, cancel RAF, reset state, start new generation.

Replay Solver: if maze exists and generation finished, cancel solver animation, rerun BFS. If generation in progress, disable button? Requirement says "Replay Solver uses the existing maze without changing its walls." If generation is in progress, we could ignore or finish instantly. I'll disable during generation (or if clicked during generation, do nothing / ignore). Simpler: disable buttons appropriately: during generation, Replay disabled; during solving, New Maze enabled, Replay enabled (restarts).

Let's also handle the verification: request New Maze while animation active → cancels and generates fresh.

devicePixelRatio handling: set canvas.width = w*dpr, style width = w px, ctx.scale(dpr,dpr). Redraw on resize not needed if fixed size; but responsive scale via CSS max-width. Keep canvas fixed logical size and let CSS scale it (max-width:100%). Coordinates only used for drawing, no clicking needed. Fine.

Let me write the code.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Maze Generator & Solver</title>
<style> ... </style>
</head>
<body>
<div class="app">
  <header>...
  <div class="controls"> buttons + status </div>
  <canvas id="maze"></canvas>
  <div class="legend"> ... </div>
</div>
<script> ... </script>
</body>
</html>
```

CSS: dark-ish theme? Let's do a clean light theme with a card. Legend items with swatch.

Now JS in detail.

```js
const COLS=25, ROWS=15, CELL=40;
const canvas=document.getElementById('maze');
const ctx=canvas.getContext('2d');
const W=COLS*CELL, H=ROWS*CELL;
const dpr=Math.min(window.devicePixelRatio||1,2);
canvas.width=W*dpr; canvas.height=H*dpr;
canvas.style.width=W+'px'; canvas.style.height=H+'px';
ctx.scale(dpr,dpr);
```

Wait if I ctx.scale once at start, subsequent draws fine as long as I don't reset transform. I'll use setTransform at start of each draw: ctx.setTransform(dpr,0,0,dpr,0,0).

Maze state:

```js
let walls, visited, orderStack...
let gen = null; // {stack, visited(bool array), ops, done}
let solver = null;
let animId = null;
let phase = 'idle'; // 'generating' | 'solving' | 'path' | 'done'
```

Generation:

```js
function initMaze(){
  walls = Array.from({length:ROWS},()=>Array.from({length:COLS},()=>[true,true,true,true])); // N,E,S,W
  visited = Array.from({length:ROWS},()=>Array(COLS).fill(false));
}
```

dirs: N:(-1,0) wallIndex 0, E:(0,1) 1, S:(1,0) 2, W:(0,-1) 3. Opposite: i^2 (0<->2, 1<->3). Nice.

genState = {stack:[[0,0]], visited[0][0]=true, ops:0, current:[0,0], finished:false}

step():
```
const [r,c] = stack[stack.length-1];
// gather unvisited neighbors
let opts=[];
for d in 0..3: nr,nc in bounds && !visited[nr][nc] → opts.push(d)
if(opts.length===0){ stack.pop(); if(stack.length===0) → finished; return; }
d = random pick
remove walls[r][c][d] and walls[nr][nc][opp]
visited[nr][nc]=true; stack.push([nr,nc])
```

Animation loop:

```js
let last=0, acc=0;
function loop(t){
  animId=requestAnimationFrame(loop);
  if(!last) last=t;
  let dt=Math.min(t-last,100); last=t;
  if(phase==='generating'){
    acc+=dt;
    while(acc>=GEN_INTERVAL && gen && !gen.finished){ step(); acc-=GEN_INTERVAL; }
    if(gen.finished){ phase='transition'; transitionT=0; acc=0; }
  } else if(phase==='transition'){
    transitionT+=dt; if(transitionT>=SOLVE_DELAY){ startSolver(); }
  } else if(phase==='solving'){
    acc+=dt;
    while(acc>=BFS_INTERVAL && solver && !solver.finished){ bfsStep(); acc-=BFS_INTERVAL; }
    if(solver.finished) { if path found: phase='path'; pathT=0; else phase='done' }
  } else if(phase==='path'){
    pathT+=dt; if(pathT>=PATH_DURATION){pathT=PATH_DURATION; phase='done';}
  }
  draw();
}
```

Hmm, careful: `bfsStep` when finished sets solver.finished. Let me structure BFS:

solver = {queue:[start], head:0, visited:Set, parent:Map, order:[], reached:false, finished:false, path:[]}

bfsStep:
```
if(head>=queue.length){ finished=true; return; }
const cell = queue[head++]; order.push(cell);
if(cell is finish){ reached=true; buildPath(); finished=true; return; }
for each dir: neighbor in bounds, wall open, not visited → visited.add, parent.set, queue.push
```

Note: cells get "discovered" when pushed to queue (frontier) vs "explored" when popped. For visual: discovered = light blue, explored (popped) = stronger blue. Draw frontier as queue[head..end].

Path drawing progress: pathT/PATH_DURATION fraction of polyline length.

Draw function:

```js
function draw(){
  ctx.setTransform(dpr,0,0,dpr,0,0);
  ctx.clearRect(0,0,W,H);
  // cell backgrounds
  for r,c: fill color:
    base = '#ffffff'
    if visited(gen) → '#e8f2fd'  (carved area tint)
  // solver overlays
  if solver: discovered → '#cfe6ff'; explored → '#79b8ff'... 
  // current gen cell highlight
  // walls
  // solution path
  // start/finish markers
}
```

Ordering: fills → solution path line (over fills) → walls (over path? path crosses open passages so walls don't overlap anyway; drawing walls after path is fine) → markers.

Actually path line through centers crossing open passages: walls are at cell edges; line passes through openings so no overlap with wall segments (walls not drawn there). Either order works. I'll draw walls after fills, then path, then markers.

Wall drawing:

```js
ctx.strokeStyle='#22303f'; ctx.lineWidth=3; ctx.lineCap='round'? 
```
For crisp grid, use lineWidth 2.5 and coordinates exactly at boundaries. With dpr scaling, half-pixel offsets may blur slightly. Use standard: for interior boundaries draw lines at exact coords; line centered on coordinate covers ±1.25px. Fine.

Draw:
```
for r,c:
  const x=c*CELL, y=r*CELL;
  if(walls[r][c][0]) line(x,y,x+CELL,y);   // N
  if(walls[r][c][3]) line(x,y,x,y+CELL);   // W
  if(r===ROWS-1 && walls[r][c][2]) line(x,y+CELL,x+CELL,y+CELL);
  if(c===COLS-1 && walls[r][c][1]) line(x+CELL,y,x+CELL,y+CELL);
```
This draws each interior wall once (each interior vertical wall is right wall of left cell; drawn only if that cell's E wall true — both cells share state so consistent).

Also outer border: cells at edges always keep outer walls? In recursive backtracker we never remove out-of-bounds walls so border stays. Good.

During generation, drawing walls of unvisited/unconnected cells is fine.

Start/finish markers: fill cell with color, then draw a small rounded rect or circle with letter. Let's fill entire cell with green (#27ae60) for start and red (#c0392b) for finish, draw white letter "S"/"F" bold. But solver exploration fills also cover start cell — draw markers last, always. Good.

Also during generation, start cell visible.

Legend HTML:
- Start (green swatch)
- Finish (red swatch)
- Carved/visited area during generation (light tint)
- Explored by solver (blue)
- Frontiers/discovered (light blue outline)
- Solution path (orange line)

Status text: "Generating maze… (37%)", "Solving… (explored 120 cells)", "Solution: 42 steps".

Buttons disabled states: Replay disabled when phase !== done? Requirement: Replay Solver uses existing maze. If generation in progress, disable replay. If solving, replay restarts solving (allowed). I'll disable replay only when no completed maze.

New Maze always enabled.

Edge: New Maze during 'path' or 'done' → cancel and regenerate.

Let me also make sure `gen.finished` detection: after step pops until stack empty → finished. The initial state: stack=[[0,0]], visited[0][0]=true.

Also I should record carving trail: visited during generation = gen.visited. Keep separate array `carved`.

Now BFS start: phase transition delay 500ms so user sees completed maze.

Let's also add subtle "visited during generation" tint persisting after? After solver starts, solver fills override. Keep gen tint as base (light), solver overlays stronger.

Speed controls? Not required. Skip.

Let me write the file now.

Status/percent during generation: carved count / (ROWS*COLS).

Path length display: number of cells in path.

Also "highlight the complete path" — after path animation completes, keep it drawn (phase done keeps pathT at duration).

Also ensure path crosses only open passages: build path by walking parent links from finish to start; between adjacent cells we check... parent links are only created through open walls by construction. Good. But to be safe, verify during drawing: skip if wall between? Not necessary.

Edge case: start === finish? Not with 25x15.

Buttons and keyboard shortcuts maybe (N, R). Nice-to-have; add.

Let me now write the code fully.

CSS design: page background gradient light gray, centered card, header with title, toolbar with buttons, canvas with border radius and shadow, legend below in a flex wrap.

Canvas size 1000x600 may overflow on 1200 viewport with padding — it's fine (1200 wide viewport). Wrap canvas in a container with max-width:100%; canvas { max-width:100%; height:auto; }.

Now write.

For accurate status updates, update DOM text only when changed (each frame fine, cheap).

Let me write out full script.

```js
'use strict';
const COLS = 25, ROWS = 15, CELL = 40;
const GEN_INTERVAL = 4;   // ms per carving/backtracking step
const BFS_INTERVAL = 7;   // ms per BFS expansion step
const SOLVE_DELAY = 550;  // ms pause after maze completes
const PATH_DURATION = 900;

let dpr = Math.min(window.devicePixelRatio || 1, 2);
...
```

Draw functions with helper `fillCell(r,c,color)`, `strokePath`.

I'll write it now.

One more consideration: "animate generation so carving progress is visible" — with gen interval 4ms and ~900 ops → 3.6s, plus visible trail. Good.

Number of ops: each carve = 1 op, backtracks = pops. Total ops = carves + pops ≈ 374 + 374ish ≈ 750. OK.

Actually the step function does one op (either pop or carve). Pops happen quickly at the end (all pops in a row → 374 pops * 4ms = 1.5s of just popping, which visually shows backtracking trail retreating — nice actually, but may look slow). Alternative: pops could be done faster. It's fine — visually shows the DFS unwinding. But maybe during pops, the "current" cell highlight jumps back along stack. That's a nice effect. Keep.

Hmm, but total time ~750*4 = 3s. Good.

Frontier color: cells in stack (path) highlight? Current cell = #ffd54a. Stack cells (ancestors) could be tinted #fff3c4. Let's include: draw stack cells with amber tint before solver. That shows recursion path. Nice.

Draw during generation:
- unvisited cells: #ffffff
- carved cells: #eaf3fc
- stack cells: #dcecff? Hmm current = #ffd54a.

Let's finalize colors:
- bg page: #eef1f6
- card: #fff
- walls: #1d2b3a
- unvisited: #ffffff
- carved: #e9f3fd
- stack path: #cfe4fb
- current: #ffcf3f
- discovered (BFS queue): #ffe9a8? No — discovered should be distinguishable from explored: discovered #b3d9ff, explored #4d9de0? Let's do:
  - discovered (in queue, not yet expanded): #bcd9f7
  - explored (expanded): #5b9bd5? Something clearly blue: #63a4e8
  Actually explored with a deeper blue: #4a90d9. And discovered lighter #cfe6fb.
- solution: #ff7a1a (orange), lineWidth 6, round caps, with white casing underneath (lineWidth 10 white semi-transparent) for contrast.
- start: #1fae5b green; finish: #d64545 red.

Legend swatches match.

Text on markers: white bold "S"/"F", font 16px.

Alright, write the file.

Also add a subtle draw of explored dots? Not needed.

Status bar phases text:
- generating: `Generating… ${pct}%`
- transition: `Maze ready. Solver starting…`
- solving: `Solving (BFS)… explored ${exploredCount}/${total}`
- path: `Path found — length ${len} cells`
- done: same as path final.

Buttons: New Maze, Replay Solver. Add `aria` etc.

Handle rapid New Maze clicks: cancelAnimationFrame, reset acc/last, restart. Keep one RAF loop running all the time from init; New Maze just resets state and phase. That's simplest: single loop started once; phase determines behavior. Cancel previous animation = set phase to generating with new gen state (previous solver discarded). The requirement "New Maze cancels the previous animation" — with single RAF, old gen/solver objects are replaced so effectively cancelled. But to be explicit, I'll call cancelAnimationFrame on the old loop and start a fresh one in startGeneration(). That literally cancels. Let's do: loopId; function cancelAnim(){ if(loopId) cancelAnimationFrame(loopId); loopId=null; last=0; acc=0; } and startLoop() starts it.

Write now.

BFS path reconstruction:
```
function buildPath(){
  const path=[]; let cur = finishKey;
  while(cur){ path.push(keyToCell(cur)); cur = parent.get(cur); }
  path.reverse();
  return path;
}
```
parent of start = null. Use string keys "r,c".

Ensure parent set for start as null: parent.set(startKey, null)? Then while(cur) loop: start's parent null → after pushing start, cur=null ends. Set parent only for non-start; check `if(parent.has(cur))` else break. I'll set parent.set(startKey, null) explicitly and use `cur = parent.get(cur)` with `while(cur!==null && cur!==undefined)`.

Order: build path from finish backwards gives finish→start; reverse → start→finish. Draw progressive from start.

Let's write the whole HTML.

Also handle `phase==='path'` when solver.reached false → phase 'done' with no path; status "No path found (shouldn't happen)".

Drawing during 'done' keeps everything.

Let me write file.

Also add `prefers-reduced-motion`? Not needed.

Progress: also draw a "generation front" — current cell marker suffices.

Let's write it.

I'll write the code and then test with the browser tool.

drawWalls line join: use ctx.lineJoin='miter'.

For interior wall drawing efficiency: 375 cells * up to 4 lines, fine at 60fps.

Now also consider: while generating, unvisited cells are fully walled individually so you see a grid of small squares; as carving proceeds walls vanish. Good visual.

Code writing time.

function drawFills():
```
for r... for c...
  let color = carved[r][c] ? C.carved : '#ffffff';
  if (gen && stackHas[r][c]) color = C.stack;   // only during generating
  if (solver) {
    if (explored.has(key)) color = C.explored;
    else if (discovered.has(key)) color = C.discovered;
  }
  ctx.fillStyle=color; ctx.fillRect(c*CELL, r*CELL, CELL, CELL);
```
discovered = set of keys pushed to queue but not yet expanded. Maintain `discovered` Set added on push; explored = expanded set. Since visited==discovered for BFS, I can use visited set for discovered and expanded set for explored.

Draw current gen cell highlight after fills: fillStyle amber over current cell.

Path drawing:
```
if(pathPoints && phase is path/done){
  const pts = path cells centers;
  compute cumulative lengths; target = frac*total;
  draw polyline up to target.
}
```

Also maybe pulse start/finish? Keep static.

OK writing.

Let me draft full HTML now.

Also add small "cells visited during generation" trail persists — after generation completes and solver starts, carved tint stays as base; solver colors override for visited cells. Fine.

Legend HTML items with classes for swatches.

Let me write it.

const C = {
  wall:'#1d2b3a', unvisited:'#ffffff', carved:'#e9f3fd', stack:'#cfe4fb', current:'#ffcf3f',
  discovered:'#cfe6fb', explored:'#4a90d9', start:'#1fae5b', finish:'#d64545', path:'#ff7a1a'
};

Explored cells with white text? No text.

Contrast between explored (#4a90d9) and start green: markers drawn on top, fine.

Solution line over explored blue: orange on blue = good contrast with white casing.

Now write.

Buttons markup:
```html
<div class="toolbar">
  <button id="newMaze" class="btn primary">New Maze</button>
  <button id="replay" class="btn">Replay Solver</button>
  <div id="status" class="status">Ready</div>
</div>
```

Legend:
```html
<div class="legend">
  <span class="item"><i class="sw" style="background:#1fae5b"></i>Start</span>
  <span class="item"><i class="sw" style="background:#d64545"></i>Finish</span>
  <span class="item"><i class="sw" style="background:#e9f3fd;border:1px solid #b9cde0"></i>Carved area</span>
  <span class="item"><i class="sw" style="background:#cfe6fb;border:1px solid #9dc4e8"></i>Discovered</span>
  <span class="item"><i class="sw" style="background:#4a90d9"></i>Explored (BFS)</span>
  <span class="item"><i class="sw path"></i>Solution path</span>
  <span class="item"><i class="sw" style="background:#ffcf3f;border:1px solid #d9ad1f"></i>Carving head</span>
</div>
```

Now let's write the final file.

Keyboard: 'n' → new maze, 'r' → replay.

Write it.

I'll now compose the file.

For the status update, I'll update on each draw.

Potential perf: fine.

Let me write.

function newMaze():
```
cancelAnim();
initMaze();
gen = {stack:[[0,0]], ...};
solver=null; pathPts=null; pathFrac=0;
phase='generating';
updateButtons();
startLoop();
```

replay():
```
if(!mazeComplete) return;
cancelAnim();
startSolver();  // phase='solving' after setting solver, acc=0
```
Actually startSolver sets solver and phase='solving' directly (no delay) when called from replay; when called from generation completion, use transition phase with delay then startSolver.

Buttons: replay.disabled = !mazeComplete (i.e., gen not finished). During generation replay disabled. newMaze always enabled.

Status values.

Also requirement: "New Maze cancels the previous animation and generates a fresh maze" — yes.

Now finalize code. Let me write it.

Also careful: `cancelAnim` + `startLoop` sets last=0, acc=0.

Loop:

```js
function loop(t){
  loopId = requestAnimationFrame(loop);
  if(!lastT) lastT = t;
  const dt = Math.min(t-lastT, 120); lastT = t;
  ...
}
```

OK. Writing file now.

BFS neighbors order: let's randomize? No — deterministic order fine (or shuffle for aesthetic). Order: N,E,S,W or shuffle for nicer visuals. I'll use fixed order but maybe rotate start dir randomly per run. Keep fixed: [0,1,2,3] but that gives rectangular wavefront. Could shuffle dir order once per solve for organic look. I'll shuffle dirOrder at solver start.

Also, early-exit BFS when reaching finish: the queue may still contain items; we stop expanding. Visually fine.

Write file.

One more: at the start of solving, clear generation highlights (stack/current)? Yes: when phase transitions to transition/solving, set gen.current=null and stack tint off. I'll set gen=null after generation? But carved array needed for tint. Keep carved, set `genActive=false` so stack/current not drawn.

Let me write the code.

Also should the solver clear the carved tint for unexplored cells? Keep light tint — distinguishable legend "carved area". OK.

Final code:

```js
// ---------- maze generation ----------
function initGrid(){
  carved = Array.from({length:ROWS},()=>new Array(COLS).fill(false));
  walls = Array.from({length:ROWS},()=>Array.from({length:COLS},()=>[true,true,true,true]));
  carved[0][0]=true;
}
```

stepGen():
```js
function stepGen(){
  const s = gen.stack;
  const [r,c] = s[s.length-1];
  const opts=[];
  for(let d=0; d<4; d++){
    const nr=r+DR[d], nc=c+DC[d];
    if(nr>=0&&nr<ROWS&&nc>=0&&nc<COLS&&!carved[nr][nc]) opts.push(d);
  }
  if(opts.length===0){
    s.pop();
    if(s.length===0) gen.finished=true;
    return;
  }
  const d = opts[(Math.random()*opts.length)|0];
  const nr=r+DR[d], nc=c+DC[d];
  walls[r][c][d]=false;
  walls[nr][nc][d^2]=false;
  carved[nr][nc]=true;
  s.push([nr,nc]);
}
```

DR=[-1,0,1,0], DC=[0,1,0,-1].

BFS:
```js
function startSolver(){
  solver = {
    queue:[[0,0]], head:0,
    discovered:new Set(['0,0']), expanded:new Set(),
    parent:new Map([['0,0', null]]),
    reached:false, finished:false, path:[]
  };
  phase='solving'; acc=0; lastT=0;
}
```
Wait lastT=0 in the middle of loop is fine? In loop I do `if(!lastT) lastT=t;` — setting lastT=0 mid-loop then continuing is fine because next frame dt computed from t. Actually if I set lastT=0 inside loop after computing dt, next frame `if(!lastT) lastT=t` sets it, dt=0 for that frame. Minor. Fine.

bfsStep():
```js
function bfsStep(){
  const sv=solver;
  if(sv.head>=sv.queue.length){ sv.finished=true; return; }
  const [r,c]=sv.queue[sv.head++];
  const key=r+','+c;
  sv.expanded.add(key);
  if(r===ROWS-1&&c===COLS-1){ sv.reached=true; sv.finished=true; sv.path=buildPath(); return; }
  for(const d of shuffle? dirOrder){
    const nr=r+DR[d], nc=c+DC[d];
    if(...) continue;
    if(walls[r][c][d]) continue;
    const nk=nr+','+nc;
    if(sv.discovered.has(nk)) continue;
    sv.discovered.add(nk); sv.parent.set(nk,key); sv.queue.push([nr,nc]);
  }
}
```

buildPath uses parent chain.

Path draw fraction: phase 'path' → pathFrac = min(1, pathT/PATH_DURATION); phase 'done' → 1.

But BFS reaches finish then path animates. If solver finished without reached (impossible in perfect maze) → phase done, path empty.

Now drawing path points: cell centers (c*CELL+CELL/2, r*CELL+CELL/2).

Draw progressive:
```js
function drawPath(frac){
  const pts=solver.path.map(([r,c])=>[c*CELL+CELL/2, r*CELL+CELL/2]);
  if(pts.length<2) return;
  const total = cumulative;
  const target = total*frac;
  build partial polyline.
  // casing then stroke
}
```

For partial: iterate segments, add until accumulated >= target, add interpolated endpoint.

Simple implementation:
```js
const seg=[]; let remaining=target;
seg.push(pts[0]);
for(let i=1;i<pts.length;i++){
  const [x0,y0]=pts[i-1], [x1,y1]=pts[i];
  const len=Math.hypot(x1-x0,y1-y0);
  if(remaining>=len){ seg.push([x1,y1]); remaining-=len; }
  else { const t=remaining/len; seg.push([x0+(x1-x0)*t, y0+(y1-y0)*t]); break; }
}
```

Stroke casing: white, lineWidth 9, then orange lineWidth 5.5. Round caps/joins.

Also draw a marker dot at path head? optional.

Start/finish markers drawn last: fillRect cell, then stroke border? Let's draw rounded rect inset 3px, plus text.

```js
function drawMarker(r,c,color,label){
  ctx.fillStyle=color;
  ctx.fillRect(c*CELL, r*CELL, CELL, CELL);
  ctx.fillStyle='#fff'; ctx.font='bold 17px system-ui,sans-serif'; ctx.textAlign='center'; ctx.textBaseline='middle';
  ctx.fillText(label, c*CELL+CELL/2, r*CELL+CELL/2+1);
}
```
Draw after walls so walls around remain? Filling whole cell covers wall lines at cell edges partially (fillRect covers up to boundary; wall line width 3 centered on boundary → half inside cell → covered). To keep walls crisp, draw markers BEFORE walls? But then exploration fills... markers are for start/finish only, drawn before walls is fine since fills happen first anyway. Order: fills → markers? But then solver explored fill would cover markers... no, if markers drawn after fills but before walls. Let's do: fills → start/finish cell fills (only the cell background + label) → walls → path → done.

Hmm but path passes through start/finish cell center and would draw over the letter. Path starts at start center... The orange line would cross the letter. Draw markers (letters) after path then: fills → walls → path → marker fills+letters. But marker fill would then cover walls at cell edges.

Alternative: draw marker fill before walls (so walls on top), and draw the letter after path. Let's do:
1. cell fills (incl. start/finish colored fill)
2. gen current highlight
3. walls
4. path
5. letters S/F (with slight shadow)

Letters on top of path start — path starts at center of start cell, letter "S" at center → overlapping. Give letter a dark text with white outline? Or offset: draw path starting from center; letter drawn over it with white stroke halo. I'll draw text with white stroke (lineWidth 3) and colored fill → readable over orange line.

Actually simpler: make start/finish fills colored and draw a white circle in center with letter, after path. White circle radius 11, letter colored. That reads well. Let's do that: after path, draw white circle + letter at start and finish.

OK.

Legend swatch for start green square etc.

Now write final file. Then test in browser: reload, screenshot at intervals, click New Maze mid-generation, check.

Let's write.

Also console errors check via browser inspect.

I'll write the file with `write` tool.

Regarding fonts: use system-ui stack, no external.

Let me write everything.

Status during generating shows percent — update DOM in draw.

Let me write the file now. I'll be careful with syntax.

Also add `mazeComplete` flag = gen && gen.finished.

updateButtons(): replay.disabled = !(gen && gen.finished).

Called at phase changes.

Edge: clicking Replay during 'transition' (maze complete, solver about to start) → cancels delay, starts solver immediately. That's fine.

Now write.

Also add a title header and short description.

Total time budget: fine.

Write file.