pikachu companion: move mark-all to toolbar, make order settings visible, fix back-view block framing

- replace #completeBox overlay with compact #markAllBtn toolbar toggle
- block-order change re-indexes and re-frames the current block
- draw inter-cluster hop lines in front view so route order is visible
- gotoBlock mirrors columns in back view; flip keeps the same cells in view

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

Author: tmck-code

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

@@ -57,9 +57,9 @@ export function blockIsCompleteForColour(br, bc, v){
  *    left on odd block-rows (boustrophedon), so consecutive blocks are
  *    always adjacent.
  */
-export function blockOrderList(v){
+export function blockOrderList(v, order = state.settings.blockOrder){
   const blocks = blocksForColour(v); // already row-major by br,bc
-  if(state.settings.blockOrder === 'row-major') return blocks;
+  if(order === 'row-major') return blocks;
   const byRow = new Map();
   for(const b of blocks){
     if(!byRow.has(b.br)) byRow.set(b.br, []);
@@ -84,7 +84,10 @@ export function gotoBlock(br, bc){
   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;
+  // back view mirrors columns (screenX = tx + N*s - c*s), so centre on the
+  // mirrored column position — same block, seen from behind
+  const colMid = bc*BLOCK_SIZE + BLOCK_SIZE/2;
+  const cx = (view.backView ? N - colMid : colMid) * s;
   const cy = (br*BLOCK_SIZE + BLOCK_SIZE/2) * s;
   view.tx = w/2 - cx;
   view.ty = h/2 - cy;

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

@@ -2,6 +2,7 @@
 // legend drag-to-scroll.
 
 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 { markDirty } from './persistence.js';
 import { refreshUI, getBlockIdx, setBlockIdx, updatePosReadout } from './ui.js';
@@ -39,6 +40,10 @@ const flipBtn = document.getElementById('flipBtn');
 const viewLabel = document.getElementById('viewLabel');
 flipBtn.addEventListener('click', ()=>{
   view.backView = !view.backView;
+  // keep the same cells in view: the grid is mirrored about its own centre,
+  // so the pan offset mirrors about the stage width
+  view.tx = stage.clientWidth - view.tx - N*view.base*view.scale;
+  clampView();
   flipBtn.classList.toggle('on', view.backView);
   flipBtn.setAttribute('aria-pressed', String(view.backView));
   viewLabel.textContent = view.backView ? 'Back' : 'Front';
@@ -147,7 +152,7 @@ const pts=new Map();
 let lastDist=0,lastMid=null,lastTap=0;
 stage.addEventListener('pointerdown',e=>{
   // only the canvas takes pan/zoom/marking gestures — other stage children
-  // (#completeBox, #miniMap, …) keep their own pointer/click behaviour
+  // (#miniMap, #blockCelebrate, …) keep their own pointer/click behaviour
   if (e.target && e.target.id !== 'cv') return;
   try { stage.setPointerCapture(e.pointerId); } catch(_) {}
   pts.set(e.pointerId,{x:e.clientX,y:e.clientY});

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

@@ -181,6 +181,17 @@ export function draw(){
         });
         ctx.stroke();
       }
+      // hop lines: exit of one cluster -> entry of the next, so the visit
+      // order (which settings like confetti-first reorder) is visible
+      ctx.lineWidth=Math.max(0.8,s*0.04);
+      ctx.setLineDash([s*0.2, s*0.15]);
+      for (const hop of route.hops){
+        const fx=colOf(hop.from)*s+s/2, fy=rowOf(hop.from)*s+s/2;
+        const tx=colOf(hop.to)*s+s/2, ty=rowOf(hop.to)*s+s/2;
+        ctx.strokeStyle = hop.kind==='carry' ? 'rgba(244,241,255,0.35)' : 'rgba(253,233,73,0.3)';
+        ctx.beginPath(); ctx.moveTo(fx,fy); ctx.lineTo(tx,ty); ctx.stroke();
+      }
+      ctx.setLineDash([]);
       // hop markers: carry vs tie-off, distinct colour/shape
       for (const hop of route.hops){
         const tx=colOf(hop.to)*s+s/2, ty=rowOf(hop.to)*s+s/2;

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

@@ -1,4 +1,4 @@
-// ui.js - legend chip construction, refreshUI(), #doneCheck handler,
+// ui.js - legend chip construction, refreshUI(), #markAllBtn handler,
 // #resetBtn wiring.
 
 import { COLORS, TOTAL, CELL_COUNT, N } from './pattern.js';
@@ -30,19 +30,20 @@ COLORS.forEach((c,i)=>{
 });
 
 /* ---------- complete toggle + progress ---------- */
-const box = document.getElementById('completeBox');
-const check = document.getElementById('doneCheck');
-const clabel = document.getElementById('completeLabel');
-check.addEventListener('change', ()=>{
+// toolbar "mark all" toggle: marks every cell of the selected colour as
+// stitched (or, when the colour is already complete, unmarks them all).
+const markAllBtn = document.getElementById('markAllBtn');
+markAllBtn.addEventListener('click', ()=>{
   if (state.selected==null) return;
   const v = state.selected;
+  const on = !isColourComplete(v);
   const cellsToToggle = [];
   for (let i=0;i<CELL_COUNT;i++){
-    if (colourAt(i)===v && isStitched(i)!==check.checked) cellsToToggle.push(i);
+    if (colourAt(i)===v && isStitched(i)!==on) cellsToToggle.push(i);
   }
-  cellsToToggle.forEach(i=>setStitched(i, check.checked));
-  logEvent({kind:'bulk', c:v, cells:cellsToToggle, unmark: !check.checked});
-  if (check.checked && isColourComplete(v)) celebrateBulk('Colour finished!');
+  cellsToToggle.forEach(i=>setStitched(i, on));
+  logEvent({kind:'bulk', c:v, cells:cellsToToggle, unmark: !on});
+  if (on && isColourComplete(v)) celebrateBulk('Colour finished!');
   refreshUI(); draw();
 });
 // cheap reuse of input.js's celebration banner for the bulk "mark all" path (4.6)
@@ -68,12 +69,22 @@ export function refreshUI(){
   });
   if (state.selected!=null){
     const c = COLORS[state.selected-1];
-    clabel.textContent = `Mark all of DMC ${c[0]} · ${c[1]} as stitched`;
-    check.checked = isColourComplete(state.selected);
-    box.classList.add('show');
+    const complete = isColourComplete(state.selected);
+    const lbl = complete
+      ? `Unmark all of DMC ${c[0]} · ${c[1]}`
+      : `Mark all of DMC ${c[0]} · ${c[1]} as stitched`;
+    markAllBtn.disabled = false;
+    markAllBtn.classList.toggle('on', complete);
+    markAllBtn.setAttribute('aria-pressed', String(complete));
+    markAllBtn.setAttribute('aria-label', lbl);
+    markAllBtn.title = lbl;
     document.getElementById('chip'+state.selected)
       .scrollIntoView({behavior:'smooth',inline:'center',block:'nearest'});
-  } else box.classList.remove('show');
+  } else {
+    markAllBtn.disabled = true;
+    markAllBtn.classList.remove('on');
+    markAllBtn.setAttribute('aria-pressed','false');
+  }
   const doneCount = state.stitchedCount.reduce((s,n)=>s+n,0);
   const pct = Math.round(doneCount/TOTAL*100);
   document.getElementById('pctNum').textContent = pct;
@@ -265,13 +276,25 @@ heatmapBtn.addEventListener('click', ()=>{
 // fresh one (6.3). The remaining settings (railroading, topLegDirection,
 // blockOrder) only affect drawing/labels or blockOrderList, so they just
 // redraw + refresh.
+let prevBlockOrder = state.settings.blockOrder;
 const ROUTE_AFFECTING_KEYS = new Set([
   'maxCarry', 'threadLength', 'fabricCount', 'strands',
   'origin', 'darkCarryGuard', 'confettiFirst',
 ]);
 
 function applySettingChange(key){
   markDirty();
+  if (key==='blockOrder' && state.selected!=null){
+    // keep the block currently in view, but re-index it into the new order so
+    // prev/next walk the newly chosen sequence from here
+    const oldList = blockOrderList(state.selected, prevBlockOrder);
+    const cur = oldList[blockIdx];
+    const newList = blockOrderList(state.selected);
+    const ni = cur ? newList.findIndex(b=>b.br===cur.br && b.bc===cur.bc) : -1;
+    blockIdx = ni>=0 ? ni : 0;
+    const b = newList[blockIdx]; if (b) gotoBlock(b.br, b.bc);
+  }
+  prevBlockOrder = state.settings.blockOrder;
   if (ROUTE_AFFECTING_KEYS.has(key)){
     invalidateAllRoutes();
     if (state.selected!=null) requestRoute(state.selected);
@@ -297,6 +320,7 @@ const conservativeCarryBtn = document.getElementById('conservativeCarryBtn');
 
 function fillSettingsForm(){
   const s = state.settings;
+  prevBlockOrder = s.blockOrder; // settings may have been loaded from storage after module init
   setFabricCount.value = s.fabricCount;
   setStrands.value = s.strands;
   setMaxCarry.value = s.maxCarry;

pages/pikachu-stitch-companion/pikachu-stitch-companion.css

@@ -101,22 +101,6 @@
     pointer-events:none;transition:opacity .6s;
   }
 
-  /* complete toggle */
-  #completeBox{
-    position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
-    display:none;align-items:center;gap:10px;
-    background:var(--panel-2);
-    border:1.5px solid var(--glow);
-    border-radius:14px;
-    padding:10px 16px;
-    font-size:13px;font-weight:700;
-    cursor:pointer;
-    box-shadow:0 4px 24px rgba(0,0,0,.5), 0 0 18px rgba(253,233,73,.12);
-  }
-  #completeBox.show{display:flex}
-  #completeBox input{
-    width:20px;height:20px;accent-color:var(--done);cursor:pointer;
-  }
 
   /* mini-map (4.5) - overlays the stage, top-right, touch target only on itself */
   #miniMap{

pages/pikachu-stitch-companion/pikachu-stitch-companion.html

@@ -17,10 +17,6 @@ <h1><span class="spark">⚡</span> Glowing Pikachu</h1>
   <div id="stage">
     <canvas id="cv"></canvas>
     <div id="zoomHint">drag to pan · double-tap to zoom</div>
-    <label id="completeBox">
-      <input type="checkbox" id="doneCheck">
-      <span id="completeLabel"></span>
-    </label>
     <canvas id="miniMap" width="150" height="150"></canvas>
     <div id="blockCelebrate"></div>
   </div>
@@ -52,6 +48,10 @@ <h3>Cluster anchors</h3>
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/></svg>
       <span class="lbl">Undo</span>
     </button>
+    <button id="markAllBtn" class="tbtn" type="button" disabled aria-label="Mark all of this colour as stitched" title="Mark all of this colour as stitched" aria-pressed="false">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="3"/><polyline points="7,12.5 10.5,16 17,8.5"/></svg>
+      <span class="lbl">Mark all</span>
+    </button>
     <button id="setStartBtn" class="tbtn" type="button" disabled aria-label="Set start point" title="Set start point" aria-pressed="false">
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="7"/><line x1="12" y1="1" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="1" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="23" y2="12"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></svg>
       <span class="lbl">Set start</span>