Shared drag placement; drags snap one block to join a diagonal (t67 phases 3-4)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/ui/actions.js

@@ -166,11 +166,9 @@ function primaryRelease(shift) {
     return;
   }
   if (t === 'build' && GAME.drag) {
-    const P = piece(), b = aimBlock(), code = pieceCode(P, b);
-    const list = shift && !lineOnly(code) ? blockRect(GAME.drag.bx, GAME.drag.by, b.bx, b.by) : blockLine(GAME.drag.bx, GAME.drag.by, b.bx, b.by, isWall(code) || isSlopeBelt(code) || code === BP_SCREW);
-    const dd = dragDirFor(P, GAME.drag, b);
-    if (dd >= 0) GAME.pieceDir[P.id] = dd;
-    const v = pieceV(P), ex = pieceExtra(P);
+    const P = piece(), plan = dragPlan(P, GAME.drag, aimBlock(), shift), { code, v, cells: list } = plan;
+    if (plan.dd >= 0) GAME.pieceDir[P.id] = plan.dd;
+    const ex = pieceExtra(P);
     // blocks past the bot's reach become ghosts it builds when it gets close, so a line can be any length
     const near = list.filter(([bx, by]) => blockInReach(bx, by)), far = list.filter(([bx, by]) => !blockInReach(bx, by));
     let ghosts = 0;

src/ui/previews.js

@@ -98,19 +98,17 @@ function drawPreviews() {
       if (reachOk && (blowing || GAME.lmb)) drawAirStreaks(ax, ay, p, r, blowing);
     }
   } else if (t === 'build') {
-    const P = piece(), b = aimBlock(), code = pieceCode(P, b);
+    const P = piece(), b = aimBlock(), plan = P.kind === 'block' ? dragPlan(P, GAME.drag, b, modShift()) : null;
+    const code = plan ? plan.code : pieceCode(P, b);
     if (GAME.previewCode !== code) { GAME.previewCode = code; hudDirty = true; }
     drawGrid(b.bx, b.by, 9);
     let cells = [], col = '120,200,190';
     if (P.kind === 'block') {
-      const v = pieceV(P);
+      const { v, dd, dir: dIdx, planned } = plan;
       col = previewColor(code, v);
-      cells = GAME.drag ? (modShift() && !lineOnly(code) ? blockRect(GAME.drag.bx, GAME.drag.by, b.bx, b.by) : blockLine(GAME.drag.bx, GAME.drag.by, b.bx, b.by, isWall(code) || isSlopeBelt(code) || code === BP_SCREW)) : [[b.bx, b.by]];
-      const dd = GAME.drag ? dragDirFor(P, GAME.drag, b) : -1;
+      cells = plan.cells;
       if (dd !== GAME.dragDir) { GAME.dragDir = dd; hudDirty = true; }
-      const dIdx = dd >= 0 ? dd : (GAME.pieceDir[P.id] || 0);
       const afford = canAfford(pieceCostNow(P), cells.length);
-      const planned = code === BP_SCREW || isSlopeBelt(code) ? new Map(cells.map(([x, y]) => [y * BW + x, [code, isFilter(code) ? v : dIdx]])) : null;
       for (const [bx, by] of cells) {
         const err = canPlaceBlock(bx, by, code), rb = by * BW + bx;
         const swap = GAME.replace && !!blockP[rb] && /already built/.test(err) && !blockIs(rb, code, v, pieceExtra(P));

src/ui/selection.js

@@ -87,6 +87,17 @@ function pieceV(P) {
   if (P.filter) return filterVariant(pieceCode(P), (GAME.pieceDir[P.id] || 0) << 7);
   return GAME.pieceDir[P.id] || 0;
 }
+// One drag for the build tool and its preview: code, direction, variant, blocks, and the planned
+// blocks the join rule sees. A line that joins one block up or down snaps there (joinSnap).
+function dragPlan(P, a, b, shift) {
+  const code = pieceCode(P, b), dd = a ? dragDirFor(P, a, b) : -1, dir = dd >= 0 ? dd : (GAME.pieceDir[P.id] || 0);
+  const v = isWall(P.code) ? GAME.wallMat : P.filter ? filterVariant(code, dir << 7) : dir;
+  let cells = !a ? [[b.bx, b.by]] : shift && !lineOnly(code) ? blockRect(a.bx, a.by, b.bx, b.by)
+    : blockLine(a.bx, a.by, b.bx, b.by, isWall(code) || isSlopeBelt(code) || code === BP_SCREW);
+  const snap = lineOnly(code) ? joinSnap(code, v, cells) : 0;
+  if (snap) cells = cells.map(([x, y]) => [x, y + snap]);
+  return { code, dd, dir, v, cells, snap, planned: new Map(cells.map(([x, y]) => [y * BW + x, [code, v]])) };
+}
 function pieceExtra(P) { return P.filter ? { m: GAME.filterCfg.m.slice(), inv: GAME.filterCfg.inv } : undefined; }
 function filterBlockAt(x, y) { if (x < 0 || y < 0 || x >= W || y >= H) return -1; const b = ((y / BS) | 0) * BW + ((x / BS) | 0); return isFilter(blockP[b]) ? b : -1; }
 function chipCost(cost) { const ok = canAfford(cost, 1); return `<span class="chip ${ok ? 'ok' : 'bad'}">${esc(costText(cost, 1))}</span>`; }