update

Author: tmck-code

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

@@ -2,7 +2,7 @@
 // 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 { state, idxOf, rowOf, colOf, colourAt, isStitched, isOmitted, isMissed } from './state.js';
 import { view, clampView, draw, stage } from './render.js';
 import { getRoute } from './planner.js';
 
@@ -40,7 +40,7 @@ export function blocksForColour(v){
   const nb = blockCount();
   for(let br=0; br<nb; br++){
     for(let bc=0; bc<nb; bc++){
-      if(blockCells(br,bc).some(i => colourAt(i)===v && !isStitched(i))) out.push({br,bc});
+      if(blockCells(br,bc).some(i => colourAt(i)===v && !isStitched(i) && !isOmitted(i))) out.push({br,bc});
     }
   }
   return out;
@@ -53,7 +53,13 @@ export function blocksForColour(v){
  * (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));
+  return !blockCells(br,bc).some(i => colourAt(i)===v && !isStitched(i) && !isOmitted(i));
+}
+
+/** blockHasMissedForColour(br, bc, v) -> true when the block holds at least
+ *  one cell of colour v flagged as missed (drives the mini-map highlight). */
+export function blockHasMissedForColour(br, bc, v){
+  return blockCells(br,bc).some(i => colourAt(i)===v && isMissed(i));
 }
 
 /**
@@ -64,7 +70,7 @@ export function blockIsCompleteForColour(br, bc, v){
 const lastKnownStart = new Map(); // colour -> cell; survives route invalidation
 export function startCellFor(v){
   const sp = state.startPoints[v];
-  if (sp!=null && colourAt(sp)===v && !isStitched(sp)){ lastKnownStart.set(v, sp); return sp; }
+  if (sp!=null && colourAt(sp)===v && !isStitched(sp) && !isOmitted(sp)){ lastKnownStart.set(v, sp); return sp; }
   const route = getRoute(v);
   if (route && route.start!=null){ lastKnownStart.set(v, route.start); return route.start; }
   // route is being re-planned (e.g. right after a mark) — keep the previous

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

@@ -3,7 +3,7 @@
 
 import { stage, view, applyZoom, clampView, draw, fit, cellAtClient, setSymbolsOn, symbolsOn } from './render.js';
 import { N } from './pattern.js';
-import { state, colourAt, isStitched, setStitched, hasTieOff, setTieOff, logEvent } from './state.js';
+import { state, colourAt, isStitched, isMissed, isOmitted, setStitched, setMissed, setOmitted, hasTieOff, setTieOff, logEvent } from './state.js';
 import { markDirty } from './persistence.js';
 import { refreshUI, getBlockIdx, setBlockIdx, updatePosReadout } from './ui.js';
 import { invalidateRoute, requestRoute, getRoute, routeCells, markRoutePrefix } from './planner.js';
@@ -14,7 +14,7 @@ let markMode = false;
 const markToggle = document.getElementById('markToggle');
 markToggle.addEventListener('click', ()=>{
   markMode = !markMode;
-  if (markMode){ disarmSetStart(); disarmUpToHere(); }
+  if (markMode){ disarmSetStart(); disarmUpToHere(); disarmMissedPaint(); }
   markToggle.classList.toggle('on', markMode);
   markToggle.setAttribute('aria-pressed', String(markMode));
 });
@@ -30,7 +30,7 @@ function disarmSetStart(){
 setStartBtn.addEventListener('click', ()=>{
   if (state.selected==null) return;
   setStartArmed = !setStartArmed;
-  if (setStartArmed){ markMode = false; markToggle.classList.remove('on'); markToggle.setAttribute('aria-pressed','false'); disarmUpToHere(); }
+  if (setStartArmed){ markMode = false; markToggle.classList.remove('on'); markToggle.setAttribute('aria-pressed','false'); disarmUpToHere(); disarmMissedPaint(); }
   setStartBtn.classList.toggle('on', setStartArmed);
   setStartBtn.setAttribute('aria-pressed', String(setStartArmed));
 });
@@ -48,7 +48,7 @@ upToHereBtn.addEventListener('click', ()=>{
   upToHereArmed = !upToHereArmed;
   if (upToHereArmed){
     markMode = false; markToggle.classList.remove('on'); markToggle.setAttribute('aria-pressed','false');
-    disarmSetStart();
+    disarmSetStart(); disarmMissedPaint();
   }
   upToHereBtn.classList.toggle('on', upToHereArmed);
   upToHereBtn.setAttribute('aria-pressed', String(upToHereArmed));
@@ -77,6 +77,41 @@ function markUpToCell(i){
   return true;
 }
 
+/* ---------- missed / omit paint mode ---------- */
+// The "Missed" sheet (ui.js) owns the range form; this owns the paint
+// gesture it hands off to. Armed from #missedPaintBtn, it reuses the
+// ordinary marking gesture below but writes the missed/omitted flag chosen
+// in #missedAction instead of F_STITCHED — including the drag-to-paint and
+// paint-again-to-clear behaviour.
+let missedPaintArmed = false;      // false | 'missed' | 'omit'
+const missedBtn = document.getElementById('missedBtn');
+const missedPaintBtn = document.getElementById('missedPaintBtn');
+const missedActionSel = document.getElementById('missedAction');
+function disarmMissedPaint(){
+  missedPaintArmed = false;
+  delete missedBtn.dataset.painting;
+  missedBtn.classList.remove('on');
+  missedBtn.setAttribute('aria-pressed','false');
+}
+missedPaintBtn.addEventListener('click', ()=>{
+  missedPaintArmed = missedActionSel.value;
+  markMode = false; markToggle.classList.remove('on'); markToggle.setAttribute('aria-pressed','false');
+  disarmSetStart(); disarmUpToHere();
+  missedBtn.dataset.painting = '1';   // ui.js reads this: a tap on #missedBtn
+  missedBtn.classList.add('on');      // stops painting instead of reopening
+  missedBtn.setAttribute('aria-pressed','true');
+  document.getElementById('missedSheet').classList.remove('show');
+  celebrate(missedPaintArmed==='missed'
+    ? 'Paint the squares you missed · tap Missed again to stop'
+    : 'Paint the squares to drop from the design · tap Missed again to stop');
+});
+// ui.js owns the button's click (it opens the sheet) and hands the stop back
+// here as an event, rather than both modules racing listeners on one element
+missedBtn.addEventListener('missed:stop', ()=>{
+  disarmMissedPaint();
+  celebrate('Done painting');
+});
+
 /* ---------- flip (front/back view) + symbol overlay toggles ---------- */
 const flipBtn = document.getElementById('flipBtn');
 const viewLabel = document.getElementById('viewLabel');
@@ -159,13 +194,20 @@ 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
+  if (i<0) return;
+  const flag = missedPaintArmed;
+  // paint mode works on any colour when none is isolated; ordinary marking
+  // stays scoped to the selected colour as before
+  if (flag){ if (colourAt(i)===0 || (state.selected!=null && colourAt(i)!==state.selected)) return; }
+  else if (colourAt(i)!==state.selected) return;
+  const isOn = flag==='missed' ? isMissed : flag==='omit' ? isOmitted : isStitched;
+  const dir = !isOn(i);   // paint unless the cell is already in that state
   gesture = {
     startX:e.clientX, startY:e.clientY,
-    startCell:i, dir, touched:new Set(), moved:false,
+    startCell:i, dir, flag, touched:new Set(), prev:[], moved:false,
   };
   toggleCell(i, dir);
+  if (flag) return;       // long-press tie-off is a stitching gesture only
   gesture.longPressTimer = setTimeout(()=>{
     if (!gesture || gesture.moved) return;
     fireTieOff(gesture.startCell);
@@ -174,6 +216,11 @@ function beginGesture(e){
 function toggleCell(i, dir){
   if (gesture.touched.has(i)) return;
   gesture.touched.add(i);
+  if (gesture.flag){
+    gesture.prev.push({m: isMissed(i), o: isOmitted(i), s: isStitched(i)});
+    if (gesture.flag==='missed') setMissed(i, dir); else setOmitted(i, dir);
+    return;
+  }
   setStitched(i, dir);
 }
 function fireTieOff(i){
@@ -188,10 +235,22 @@ function commitGesture(){
   clearTimeout(gesture.longPressTimer);
   const touched = [...gesture.touched];
   const dir = gesture.dir;
+  const flag = gesture.flag;
+  const prev = gesture.prev;
+  gesture = null;
+  if (touched.length && flag){
+    // one journey entry per paint stroke, carrying the per-cell snapshots
+    // undoLast needs to put the cells back exactly as they were
+    const colours = new Set(touched.map(colourAt));
+    logEvent({ kind: flag==='missed' ? 'missed' : 'omit', c: colours.size===1 ? [...colours][0] : 0, cells: touched, prev });
+    colours.forEach(v => invalidateRoute(v));
+    if (state.selected!=null) requestRoute(state.selected);
+    markDirty(); refreshUI(); draw();
+    return;
+  }
   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);
 }
@@ -233,7 +292,12 @@ 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));
+  const flag = gesture.flag;
+  [...gesture.touched].reverse().forEach(i=>{
+    if (flag==='missed') setMissed(i, !gesture.dir);
+    else if (flag==='omit') setOmitted(i, !gesture.dir);
+    else setStitched(i, !gesture.dir);
+  });
   gesture = null;
   refreshUI(); draw();
 }
@@ -273,6 +337,8 @@ stage.addEventListener('pointerdown',e=>{
         setBlockIdx(0); // block order is anchored at the start point, so restart the walk
         refreshUI(); draw();
       }
+    } else if (missedPaintArmed){
+      beginGesture(e);
     } else if (markMode && state.selected!=null){
       beginGesture(e);
     } else {
@@ -309,7 +375,10 @@ stage.addEventListener('pointermove',e=>{
         clearTimeout(gesture.longPressTimer);
       }
       const i = cellAtClient(e.clientX, e.clientY);
-      if (i>=0 && colourAt(i)===state.selected) toggleCell(i, gesture.dir);
+      const paintable = i>=0 && (gesture.flag
+        ? colourAt(i)!==0 && (state.selected==null || colourAt(i)===state.selected)
+        : colourAt(i)===state.selected);
+      if (paintable) toggleCell(i, gesture.dir);
       return; // suppress the pan branch while a marking gesture is active
     }
     if (pivotDown && Math.hypot(e.clientX-pivotDown.x, e.clientY-pivotDown.y)>MOVE_THRESH){

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

@@ -1,7 +1,7 @@
 // persistence.js - localStorage save/load of stitching progress.
 // load() is exported but NOT invoked here; main.js calls it at bootstrap.
 
-import { COLORS, CELL_COUNT, F_STITCHED } from './pattern.js';
+import { COLORS, CELL_COUNT, F_STITCHED, F_OMITTED } from './pattern.js';
 import { state, DEFAULT_SETTINGS, colourAt } from './state.js';
 import { refreshUI } from './ui.js';
 import { draw } from './render.js';
@@ -30,7 +30,7 @@ export function decodeFlags(str){
 export function save(){
   try{
     const data = {
-      v: 1,
+      v: 2,
       flags: encodeFlags(),
       log: state.journey,
       settings: state.settings,
@@ -40,18 +40,22 @@ export function save(){
     state.dirty = false;
   }catch(e){ /* ignore quota / serialization errors */ }
 }
+// v1 saves have no missed/omitted bits set, so the same rebuild works for
+// both schema versions — the counts simply come out zero.
 export function rebuildStitchedCount(){
   state.stitchedCount = new Int32Array(COLORS.length+1);
+  state.omittedCount = new Int32Array(COLORS.length+1);
   for (let i=0;i<CELL_COUNT;i++){
-    if (state.stitchFlags[i] & F_STITCHED){
-      const v = colourAt(i);
-      if (v) state.stitchedCount[v]++;
-    }
+    const v = colourAt(i);
+    if (!v) continue;
+    if (state.stitchFlags[i] & F_STITCHED) state.stitchedCount[v]++;
+    if (state.stitchFlags[i] & F_OMITTED) state.omittedCount[v]++;
   }
 }
 export function freshState(){
   state.stitchFlags = new Uint8Array(CELL_COUNT);
   state.stitchedCount = new Int32Array(COLORS.length+1);
+  state.omittedCount = new Int32Array(COLORS.length+1);
   state.journey = [];
   state.settings = Object.assign({}, DEFAULT_SETTINGS);
   state.startPoints = {};
@@ -61,7 +65,7 @@ export function load(){
     const raw = localStorage.getItem(STORE_KEY);
     if (!raw) { freshState(); return; }
     const data = JSON.parse(raw);
-    if (!data || data.v !== 1) { freshState(); return; }
+    if (!data || (data.v !== 1 && data.v !== 2)) { freshState(); return; }
     const flags = decodeFlags(data.flags);
     if (flags.length !== CELL_COUNT) { freshState(); return; }
     state.stitchFlags = flags;

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

@@ -3,13 +3,17 @@
 // segmentation and cached, idle-scheduled route computation.
 
 import { N, COLORS, cells } from './pattern.js';
-import { state, idxOf, rowOf, colOf, colourAt, isStitched } from './state.js';
+import { state, idxOf, rowOf, colOf, colourAt, isStitched, isMissed, isOmitted } from './state.js';
 import { draw } from './render.js';
 
 /* ---------------- 3.1 clustering ---------------- */
 
 // Iterative 8-connectivity flood fill over unstitched cells of colour v.
 // Explicit stack, no recursion (largest colour cluster ~1.5k cells).
+// Cells omitted from the design (F_OMITTED) are skipped exactly like
+// stitched ones: they are not stitching work, so they neither seed nor
+// extend a cluster. Cells flagged missed are ordinary unstitched work that
+// additionally sets cluster.missed, which orderClusters routes to first.
 export function clusterColour(v){
   const seen = new Uint8Array(N*N);
   const clusters = [];
@@ -18,15 +22,17 @@ export function clusterColour(v){
       if (cells[r0][c0] !== v) continue;
       const start = idxOf(r0,c0);
       if (seen[start]) continue;
-      if (isStitched(start)) { seen[start]=1; continue; }
+      if (isStitched(start) || isOmitted(start)) { seen[start]=1; continue; }
       const stack = [start];
       seen[start] = 1;
       const cellsOut = [];
+      let missed = 0;
       let minR=r0, maxR=r0, minC=c0, maxC=c0, sumR=0, sumC=0;
       while (stack.length){
         const i = stack.pop();
         const r = rowOf(i), c = colOf(i);
         cellsOut.push(i);
+        if (isMissed(i)) missed++;
         sumR += r; sumC += c;
         if (r<minR) minR=r; if (r>maxR) maxR=r;
         if (c<minC) minC=c; if (c>maxC) maxC=c;
@@ -39,7 +45,7 @@ export function clusterColour(v){
             const ni = idxOf(nr,nc);
             if (seen[ni]) continue;
             seen[ni] = 1;
-            if (isStitched(ni)) continue;
+            if (isStitched(ni) || isOmitted(ni)) continue;
             stack.push(ni);
           }
         }
@@ -48,6 +54,7 @@ export function clusterColour(v){
         cells: cellsOut,
         centroid: { r: sumR/cellsOut.length, c: sumC/cellsOut.length },
         bbox: { minR, maxR, minC, maxC },
+        missed,
       });
     }
   }
@@ -60,6 +67,18 @@ const PATTERN_CENTRE = { r: 75, c: 75 };
 
 export function suggestStart(v, clusters){
   if (!clusters.length) return null;
+  // backfill: when cells have been flagged as missed, the route starts at
+  // the missed work rather than wherever the normal heuristic would land,
+  // so the stitcher is sent straight back to the gap.
+  if (state.settings.backfillFirst){
+    const withMissed = clusters.filter(cl => cl.missed);
+    if (withMissed.length){
+      let best = withMissed[0];
+      for (const cl of withMissed) if (cl.missed > best.missed) best = cl;
+      const missedCells = best.cells.filter(isMissed);
+      if (missedCells.length) return missedCells[0];
+    }
+  }
   if (state.settings.origin === 'page'){
     // top-left-most cluster: smallest (minR, then minC); then its
     // top-left-most cell within that cluster.
@@ -134,9 +153,15 @@ const CONFETTI_MAX_CELLS = 2;
 export function orderClusters(clusters, startIdx){
   if (clusters.length <= 1) return clusters.slice();
   const startPt = { r: rowOf(startIdx), c: colOf(startIdx) };
-  const isolated = clusters.filter(cl => cl.cells.length <= CONFETTI_MAX_CELLS);
-  const large = clusters.filter(cl => cl.cells.length > CONFETTI_MAX_CELLS);
-  const groups = state.settings.confettiFirst ? [isolated, large] : [large, isolated];
+  // backfill partition (settings.backfillFirst): clusters holding cells the
+  // stitcher flagged as missed are visited before anything else, ahead of
+  // the confetti split, so a forgotten patch is caught up on first rather
+  // than waiting for the tour to wander back.
+  const backfill = state.settings.backfillFirst ? clusters.filter(cl => cl.missed) : [];
+  const rest = backfill.length ? clusters.filter(cl => !cl.missed) : clusters;
+  const isolated = rest.filter(cl => cl.cells.length <= CONFETTI_MAX_CELLS);
+  const large = rest.filter(cl => cl.cells.length > CONFETTI_MAX_CELLS);
+  const groups = state.settings.confettiFirst ? [backfill, isolated, large] : [backfill, large, isolated];
   const deadline = Date.now() + 200; // shared 200ms 2-opt budget across both partitions
   let fromPt = startPt;
   let full = [];
@@ -467,9 +492,14 @@ export function planRoute(v){
     return { colour: v, start: null, legs: [], hops: [], lengths: [] };
   }
   const existingStart = state.startPoints[v];
-  const start = (existingStart!=null && colourAt(existingStart)===v && !isStitched(existingStart))
-    ? existingStart
-    : suggestStart(v, clusters);
+  // a pinned start point is honoured unless backfill work is outstanding and
+  // the pin isn't part of it — the whole point of flagging missed cells is
+  // to be sent back to them, so they override a stale pin.
+  const backfillPending = state.settings.backfillFirst && clusters.some(cl => cl.missed);
+  const pinUsable = existingStart!=null && colourAt(existingStart)===v
+    && !isStitched(existingStart) && !isOmitted(existingStart)
+    && (!backfillPending || isMissed(existingStart));
+  const start = pinUsable ? existingStart : suggestStart(v, clusters);
 
   const ordered = orderClusters(clusters, start);