add colour journey to pikachu stitch companion

Per-cell stitch state with localStorage persistence, route planner
(clustering, serpentine, carry-vs-tie-off costing, thread-length
segments), block leafing, front/back flip, symbol overlay, heatmap,
stats and settings. Split into html + css + js modules.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: tmck-code

pages/pikachu-stitch-companion/js/blocks.js

@@ -0,0 +1,93 @@
+// blocks.js - 10x10 block navigation helpers: block field, colour-scoped
+// block ordering, and camera framing for a given block.
+
+import { N } from './pattern.js';
+import { state, idxOf, rowOf, colOf, colourAt, isStitched } from './state.js';
+import { view, clampView, draw, stage } from './render.js';
+
+export const BLOCK_SIZE = 10;
+export const BLOCKS = N / BLOCK_SIZE; // 15 blocks per axis (150/10)
+
+/** blockOf(idx) -> {br, bc} block row/col containing cell idx. */
+export function blockOf(idx){
+  return { br: Math.floor(rowOf(idx)/BLOCK_SIZE), bc: Math.floor(colOf(idx)/BLOCK_SIZE) };
+}
+
+/** blockCells(br, bc) -> array of cell indices (row-major) in that 10x10 block. */
+export function blockCells(br, bc){
+  const out = [];
+  const r0 = br*BLOCK_SIZE, c0 = bc*BLOCK_SIZE;
+  for(let r=r0; r<r0+BLOCK_SIZE; r++){
+    for(let c=c0; c<c0+BLOCK_SIZE; c++) out.push(idxOf(r,c));
+  }
+  return out;
+}
+
+/**
+ * blocksForColour(v) -> [{br, bc}, ...] blocks (in row-major scan order,
+ * br then bc ascending) that still contain at least one unstitched cell of
+ * colour v. Use blockOrderList(v) to get these in navigation order.
+ */
+export function blocksForColour(v){
+  const out = [];
+  for(let br=0; br<BLOCKS; br++){
+    for(let bc=0; bc<BLOCKS; bc++){
+      if(blockCells(br,bc).some(i => colourAt(i)===v && !isStitched(i))) out.push({br,bc});
+    }
+  }
+  return out;
+}
+
+/**
+ * blockIsCompleteForColour(br, bc, v) -> true if the block has no
+ * unstitched cells of colour v left (i.e. that colour is fully done in
+ * this block). Exported for the later block-complete-celebration wave
+ * (task 4.6): call this after a stitch toggle to detect completion.
+ */
+export function blockIsCompleteForColour(br, bc, v){
+  return !blockCells(br,bc).some(i => colourAt(i)===v && !isStitched(i));
+}
+
+/**
+ * blockOrderList(v) -> blocksForColour(v) reordered per
+ * state.settings.blockOrder:
+ *  - 'row-major': left-to-right, top-to-bottom throughout (bc ascending
+ *    every row).
+ *  - 'serpentine' (default): left-to-right on even block-rows, right-to-
+ *    left on odd block-rows (boustrophedon), so consecutive blocks are
+ *    always adjacent.
+ */
+export function blockOrderList(v){
+  const blocks = blocksForColour(v); // already row-major by br,bc
+  if(state.settings.blockOrder === 'row-major') return blocks;
+  const byRow = new Map();
+  for(const b of blocks){
+    if(!byRow.has(b.br)) byRow.set(b.br, []);
+    byRow.get(b.br).push(b);
+  }
+  const out = [];
+  for(const br of [...byRow.keys()].sort((a,b)=>a-b)){
+    const row = byRow.get(br);
+    if(br % 2 === 1) row.reverse();
+    out.push(...row);
+  }
+  return out;
+}
+
+/**
+ * gotoBlock(br, bc) - pans/zooms the view so the 10x10 block (br,bc) fills
+ * the stage, then clamps and redraws.
+ */
+export function gotoBlock(br, bc){
+  const w = stage.clientWidth, h = stage.clientHeight;
+  const blockPx = BLOCK_SIZE * view.base; // css px spanned by the block at scale 1
+  const fit = Math.min(w,h) * 0.96 / blockPx;
+  view.scale = fit;
+  const s = view.base * view.scale; // effective cell size at the new scale
+  const cx = (bc*BLOCK_SIZE + BLOCK_SIZE/2) * s;
+  const cy = (br*BLOCK_SIZE + BLOCK_SIZE/2) * s;
+  view.tx = w/2 - cx;
+  view.ty = h/2 - cy;
+  clampView();
+  draw();
+}

pages/pikachu-stitch-companion/js/input.js

@@ -0,0 +1,226 @@
+// input.js - pointer/wheel pan-zoom handlers, colour marking gestures, and
+// legend drag-to-scroll.
+
+import { stage, view, applyZoom, clampView, draw, fit, cellAtClient, setSymbolsOn, symbolsOn } from './render.js';
+import { state, colourAt, isStitched, setStitched, hasTieOff, setTieOff, logEvent } from './state.js';
+import { markDirty } from './persistence.js';
+import { refreshUI, getBlockIdx, setBlockIdx } from './ui.js';
+import { invalidateRoute, requestRoute } from './planner.js';
+import { blockOf, blockOrderList, blockIsCompleteForColour, gotoBlock } from './blocks.js';
+
+/* ---------- marking mode toggle ---------- */
+let markMode = false;
+const markToggle = document.getElementById('markToggle');
+markToggle.addEventListener('click', ()=>{
+  markMode = !markMode;
+  if (markMode) disarmSetStart();
+  markToggle.classList.toggle('on', markMode);
+});
+
+/* ---------- set-start mode (3.11) ---------- */
+let setStartArmed = false;
+const setStartBtn = document.getElementById('setStartBtn');
+function disarmSetStart(){ setStartArmed = false; setStartBtn.classList.remove('on'); }
+setStartBtn.addEventListener('click', ()=>{
+  if (state.selected==null) return;
+  setStartArmed = !setStartArmed;
+  if (setStartArmed){ markMode = false; markToggle.classList.remove('on'); }
+  setStartBtn.classList.toggle('on', setStartArmed);
+});
+
+/* ---------- flip (front/back view) + symbol overlay toggles ---------- */
+const flipBtn = document.getElementById('flipBtn');
+const viewLabel = document.getElementById('viewLabel');
+flipBtn.addEventListener('click', ()=>{
+  view.backView = !view.backView;
+  flipBtn.classList.toggle('on', view.backView);
+  flipBtn.firstChild.textContent = view.backView ? 'Back ' : 'Front ';
+  viewLabel.textContent = view.backView ? '(stitching side)' : '(tap to flip)';
+  draw();
+});
+
+const symbolsBtn = document.getElementById('symbolsBtn');
+symbolsBtn.addEventListener('click', ()=>{
+  setSymbolsOn(!symbolsOn);
+  symbolsBtn.classList.toggle('on', symbolsOn);
+  draw();
+});
+
+/* ---------- marking gesture state ---------- */
+let gesture = null; // {startCell, dir, touched:Set, longPressTimer, moved}
+const LONG_PRESS_MS = 500;
+const MOVE_THRESH = 8;
+
+function beginGesture(e){
+  const i = cellAtClient(e.clientX, e.clientY);
+  if (i<0 || colourAt(i)!==state.selected) return;
+  const dir = !isStitched(i); // mark unless already stitched
+  gesture = {
+    startX:e.clientX, startY:e.clientY,
+    startCell:i, dir, touched:new Set(), moved:false,
+  };
+  toggleCell(i, dir);
+  gesture.longPressTimer = setTimeout(()=>{
+    if (!gesture || gesture.moved) return;
+    fireTieOff(gesture.startCell);
+  }, LONG_PRESS_MS);
+}
+function toggleCell(i, dir){
+  if (gesture.touched.has(i)) return;
+  gesture.touched.add(i);
+  setStitched(i, dir);
+}
+function fireTieOff(i){
+  setTieOff(i, !hasTieOff(i));
+  logEvent({kind:'tieoff', c:colourAt(i), tieOff:i});
+  // setTieOff already invalidates the colour's cached route internally.
+  refreshUI(); draw();
+}
+function commitGesture(){
+  if (!gesture) return;
+  clearTimeout(gesture.longPressTimer);
+  const touched = [...gesture.touched];
+  const dir = gesture.dir;
+  if (touched.length){
+    logEvent({ kind: dir ? 'mark' : 'unmark', c: state.selected, cells: touched });
+  }
+  gesture = null;
+  markDirty(); refreshUI(); draw();
+  if (dir && touched.length) checkBlockComplete(touched, state.selected);
+}
+
+/* ---------- block-complete celebration + auto-advance (4.6) ---------- */
+const celebrateEl = document.getElementById('blockCelebrate');
+let celebrateTimer = null;
+function checkBlockComplete(touchedCells, v){
+  if (v==null) return;
+  const seen = new Set();
+  for (const i of touchedCells){
+    const {br,bc} = blockOf(i);
+    const key = br+','+bc;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    if (!blockIsCompleteForColour(br,bc,v)) continue;
+    const list = blockOrderList(v);
+    const idx = getBlockIdx();
+    const next = list[idx+1];
+    if (next){
+      celebrate('Block done! Moving on…');
+      setBlockIdx(idx+1);
+      gotoBlock(next.br, next.bc);
+    } else {
+      celebrate(list.length ? 'Block done!' : 'Colour finished!');
+    }
+    return; // one celebration per gesture is enough
+  }
+}
+function celebrate(msg){
+  celebrateEl.textContent = msg;
+  celebrateEl.classList.add('show');
+  clearTimeout(celebrateTimer);
+  celebrateTimer = setTimeout(()=>celebrateEl.classList.remove('show'), 1800);
+}
+function abortGesture(){
+  if (!gesture) return;
+  clearTimeout(gesture.longPressTimer);
+  // revert cells already toggled by this gesture, in reverse order
+  [...gesture.touched].reverse().forEach(i=>setStitched(i, !gesture.dir));
+  gesture = null;
+  refreshUI(); draw();
+}
+
+/* ---------- pan / zoom (pointer events) ---------- */
+const pts=new Map();
+let lastDist=0,lastMid=null,lastTap=0;
+stage.addEventListener('pointerdown',e=>{
+  stage.setPointerCapture(e.pointerId);
+  pts.set(e.pointerId,{x:e.clientX,y:e.clientY});
+  if(pts.size===2){
+    if (gesture) abortGesture();
+    const [a,b]=[...pts.values()];
+    lastDist=Math.hypot(a.x-b.x,a.y-b.y);
+    lastMid={x:(a.x+b.x)/2,y:(a.y+b.y)/2};
+  } else if (pts.size===1){
+    if (setStartArmed && state.selected!=null){
+      const i = cellAtClient(e.clientX, e.clientY);
+      if (i>=0 && colourAt(i)===state.selected){
+        state.startPoints[state.selected] = i;
+        markDirty();
+        invalidateRoute(state.selected);
+        requestRoute(state.selected);
+        disarmSetStart();
+        refreshUI(); draw();
+      }
+    } else if (markMode && state.selected!=null){
+      beginGesture(e);
+    } else {
+      const now=Date.now();
+      if(now-lastTap<300){ zoomAt(e.clientX,e.clientY, view.scale<4?2:0.25); }
+      lastTap=now;
+    }
+  }
+});
+stage.addEventListener('pointermove',e=>{
+  if(!pts.has(e.pointerId))return;
+  const prev=pts.get(e.pointerId);
+  pts.set(e.pointerId,{x:e.clientX,y:e.clientY});
+  if(pts.size===1){
+    if (gesture){
+      const dx=e.clientX-gesture.startX, dy=e.clientY-gesture.startY;
+      if (!gesture.moved && Math.hypot(dx,dy)>MOVE_THRESH){
+        gesture.moved = true;
+        clearTimeout(gesture.longPressTimer);
+      }
+      const i = cellAtClient(e.clientX, e.clientY);
+      if (i>=0 && colourAt(i)===state.selected) toggleCell(i, gesture.dir);
+      return; // suppress the pan branch while a marking gesture is active
+    }
+    view.tx+=e.clientX-prev.x; view.ty+=e.clientY-prev.y;
+    clampView(); draw();
+  } else if(pts.size===2){
+    const [a,b]=[...pts.values()];
+    const dist=Math.hypot(a.x-b.x,a.y-b.y);
+    const mid={x:(a.x+b.x)/2,y:(a.y+b.y)/2};
+    if(lastDist>0){
+      const f=dist/lastDist;
+      applyZoom(mid.x,mid.y,f);
+      view.tx+=mid.x-lastMid.x; view.ty+=mid.y-lastMid.y;
+      clampView(); draw();
+    }
+    lastDist=dist; lastMid=mid;
+  }
+});
+function endPt(e){
+  pts.delete(e.pointerId);
+  lastDist=0;
+  if (gesture) commitGesture();
+}
+stage.addEventListener('pointerup',endPt);
+stage.addEventListener('pointercancel',endPt);
+stage.addEventListener('wheel',e=>{
+  e.preventDefault();
+  applyZoom(e.clientX,e.clientY, Math.exp(-e.deltaY*0.0018));
+  clampView(); draw();
+},{passive:false});
+function zoomAt(cx,cy,f){ applyZoom(cx,cy,f); clampView(); draw(); }
+
+stage.addEventListener('touchmove',e=>e.preventDefault(),{passive:false});
+window.addEventListener('resize',fit);
+
+/* legend drag-to-scroll (mouse) */
+const legend = document.getElementById('legend');
+let lgDown=false,lgX=0,lgScroll=0,lgMoved=false;
+legend.addEventListener('pointerdown',e=>{
+  if(e.pointerType!=='mouse')return;
+  lgDown=true;lgMoved=false;lgX=e.clientX;lgScroll=legend.scrollLeft;
+});
+legend.addEventListener('pointermove',e=>{
+  if(!lgDown)return;
+  const dx=e.clientX-lgX;
+  if(Math.abs(dx)>4){lgMoved=true;legend.classList.add('dragging');}
+  legend.scrollLeft=lgScroll-dx;
+});
+['pointerup','pointerleave'].forEach(ev=>legend.addEventListener(ev,()=>{
+  lgDown=false;
+  setTimeout(()=>legend.classList.remove('dragging'),0);
+}));