Bar rack blocks: store 50 bars each, F lets them out oldest first (t1)

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

src/render/machines.js

@@ -76,6 +76,7 @@ function drawMachines() {
     ctx.restore();
   }
   drawProcBlocks();
+  drawRackBlocks();
 }
 // Crushing rollers and saw blades sit over the shared steel housings in both looks.
 function drawProcBlocks() {
@@ -210,3 +211,32 @@ function drawSiloPixel(ctx, mm, sx, sy, zp) {
     ctx.restore();
   }
 }
+
+// Shelves show each block's fill and materials; the bottom gate belongs to the column.
+function drawRackBlocks() {
+  const ctx = R.ctx;
+  for (const [b, s] of rackState) {
+    const x = (b % BW) * BS, y = ((b / BW) | 0) * BS;
+    const [sx, sy, sw] = cellRect(x, y, BS, BS);
+    if (sx > R.canvas.width || sy > R.canvas.height || sx + sw < 0 || sy + sw < 0) continue;
+    if (SET.fog && fogSeen(x + 2, y + 2) < 64) continue;
+    ctx.save();
+    ctx.fillStyle = '#202831'; ctx.fillRect(sx + sw * 0.1, sy + sw * 0.1, sw * 0.8, sw * 0.8);
+    ctx.fillStyle = '#a5adb5';
+    for (let row = 0; row < 2; row++) ctx.fillRect(sx + sw * 0.1, sy + sw * (0.47 + row * 0.4), sw * 0.8, sw * 0.05);
+    const slots = Math.ceil(s.n / 5);
+    let run = 0, count = 0;
+    for (let k = 0; k < slots; k++) {
+      while (run + 1 < s.q.length && k * 5 >= count + s.q[run][1]) count += s.q[run++][1];
+      const m = s.q[run][0];
+      ctx.fillStyle = `rgb(${COLR[m]},${COLG[m]},${COLB[m]})`;
+      ctx.fillRect(sx + sw * (0.14 + k % 5 * 0.145), sy + sw * (0.71 - Math.floor(k / 5) * 0.4), sw * 0.12, sw * 0.12);
+    }
+    if (b + BW >= NB || blockP[b + BW] !== BP_RACK) {
+      ctx.fillStyle = s.open ? '#e0b43c' : '#c9d1d8';
+      ctx.fillRect(sx + sw * 0.1, sy + sw * 0.94, sw * (s.open ? 0.2 : 0.8), sw * 0.06);
+      if (s.open) ctx.fillRect(sx + sw * 0.7, sy + sw * 0.94, sw * 0.2, sw * 0.06);
+    }
+    ctx.restore();
+  }
+}

src/render/world.js

@@ -115,7 +115,7 @@ function drawWorld() {
         }
         else if (m === GATE) { if ((x & 1) === 0 && (y & 3) !== 0) { r -= 40; g -= 24; b -= 20; } }
         else if (m === CUTST) { const lx = x & 3, ly = y & 3; if (ly === 1 || ly === 3 || lx === (ly < 2 ? 3 : 1)) { r -= 34; g -= 33; b -= 30; } else if (ly === 0 || ly === 2) { r += 10; g += 10; b += 9; } }
-        else if (m === GRINDER || m === SAWB || m === PRESSB) {
+        else if (m === GRINDER || m === SAWB || m === PRESSB || m === RACKB) {
           const lx = x & 3, ly = y & 3, frame = lx === 0 || lx === 3 || ly === 0 || ly === 3;
           r = frame ? 96 : 38; g = frame ? 102 : 42; b = frame ? 112 : 50;
         }