Fog of war: underground is black until the bot has seen it (t8)

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

src/manifest.json

@@ -10,6 +10,7 @@
     "sim/economy.js",
     "sim/progress.js",
     "sim/world.js",
+    "sim/fog.js",
     "sim/cells.js",
     "sim/heat.js",
     "sim/machines.js",

src/render/overlays.js

@@ -11,7 +11,7 @@ function drawRain() {
   ctx.beginPath();
   let snow = false;
   for (const f of flyers) {
-    if (!f.rain || f.x < x0 || f.x > x1 || f.y < y0 || f.y > y1) continue;
+    if ((SET.fog && fogSeen(f.x, f.y) < 64) || !f.rain || f.x < x0 || f.x > x1 || f.y < y0 || f.y > y1) continue;
     if (f.m !== WATER) { snow = true; continue; }
     const a = worldToScreenPx(f.x, f.y), len = Math.max(1.5, Math.hypot(f.vx, f.vy) * 3.2);
     ctx.moveTo(a.x, a.y); ctx.lineTo(a.x - f.vx / Math.max(0.2, f.vy) * len * zp * 0.5, a.y - len * zp);
@@ -20,7 +20,7 @@ function drawRain() {
   if (snow) {
     ctx.fillStyle = 'rgba(244,247,252,0.9)';
     for (const f of flyers) {
-      if (!f.rain || f.m === WATER || f.x < x0 || f.x > x1 || f.y < y0 || f.y > y1) continue;
+      if ((SET.fog && fogSeen(f.x, f.y) < 64) || !f.rain || f.m === WATER || f.x < x0 || f.x > x1 || f.y < y0 || f.y > y1) continue;
       const a = worldToScreenPx(f.x + Math.sin(f.age * 0.07 + f.x) * 0.6, f.y), r = Math.max(1, zp * 0.42);
       ctx.beginPath(); ctx.arc(a.x, a.y, r, 0, Math.PI * 2); ctx.fill();
     }
@@ -220,6 +220,7 @@ function drawParticles() {
       p.x += p.vx; p.y += p.vy; p.vy += 0.04; p.life--;
       if (p.life <= 0) { ps.splice(k, 1); continue; }
     }
+    if (SET.fog && fogSeen(p.x, p.y) < 64) continue;
     const s = worldToScreenPx(p.x, p.y);
     ctx.fillStyle = `rgba(${p.r | 0},${p.g | 0},${p.b | 0},${Math.min(1, p.life / 10)})`;
     const sz = p.spark ? Math.max(1, zp * 0.5) : p.suck ? zp : Math.max(1, zp * 0.7);

src/render/world.js

@@ -1,3 +1,5 @@
+// Scale colour without changing the smooth-look class.
+function fogColor(c, k) { return (c & 0xff000000) | (((c >>> 16 & 255) * k) << 16) | (((c >>> 8 & 255) * k) << 8) | ((c & 255) * k); }
 // drawWorld: the per-grain pixel buffer (pixel look), also the input of the smooth look.
 // ---------- World pixels ----------
 // smooth-look class of a screw tube cell by direction: 9 up, 10 right, 11 down, 12 left
@@ -20,6 +22,7 @@ function drawWorld() {
       for (const i of moldCellsAt(mo.kind, mo.x, mo.y).walls) { const sx = (i % W) - vx0, sy = ((i / W) | 0) - vy0; if (sx >= 0 && sy >= 0 && sx < bw && sy < bh) mmask[sy * bw + sx] = 1; }
     }
   }
+  const useFog = SET.fog;
   const OUT = sm ? 0x040a0a0c : 0xff0a0a0c;
   const lighting = SET.lighting !== 'off' && !R.lens;
   if (lighting && (R.frame % SET.lightEvery === 0 || !R.lw)) computeLight();
@@ -33,12 +36,20 @@ function drawWorld() {
     const y = vy0 + by;
     const row = by * bw;
     if (y < 0 || y >= H) { for (let bx = 0; bx < bw; bx++) { px[row + bx] = OUT; if (sm) { bpx[row + bx] = 0x000a0a0c; tpx[row + bx] = 0; fpx[row + bx] = 0xff; } } continue; }
+    const fy = y / FOG, fj = Math.floor(fy), ft = fy - fj, fr = fj * FW, fn = Math.min(FH - 1, fj + 1) * FW;
     const yw = y * W;
     let skr = SKY_R[y], skg = SKY_G[y], skb = SKY_B[y];
     if (rk > 0.01) { const gy = (skr + skg + skb) / 3 * 0.82; skr += (gy - skr) * rk * 0.7; skg += (gy - skg) * rk * 0.7; skb += (gy - skb) * rk * 0.65; }
     for (let bx = 0; bx < bw; bx++) {
       const x = vx0 + bx;
       if (x < 0 || x >= W) { px[row + bx] = OUT; if (sm) { bpx[row + bx] = 0x000a0a0c; tpx[row + bx] = 0; fpx[row + bx] = 0xff; } continue; }
+      let fv = 255;
+      if (useFog) {
+        const fx = x / FOG, j = Math.floor(fx), t = fx - j, j1 = Math.min(FW - 1, j + 1);
+        const a = fog[fr + j], b = fog[fr + j1], c = fog[fn + j], d = fog[fn + j1];
+        if ((a & b & c & d) !== 255) fv = (a + (b - a) * t) * (1 - ft) + (c + (d - c) * t) * ft;
+        if (!fv) { px[row + bx] = OUT; if (sm) { bpx[row + bx] = 0x000a0a0c; tpx[row + bx] = 0; fpx[row + bx] = 0xff; } continue; }
+      }
       const i = yw + x, m = mat[i], nz = noiseB[i] - 128;
       const T = temp[i];
       let r, g, b;
@@ -48,6 +59,7 @@ function drawWorld() {
         else { const v = (COLR[m] + COLG[m] + COLB[m]) / 3 * 0.25; r = tl[ti] * 0.78 + v; g = tl[ti + 1] * 0.78 + v; b = tl[ti + 2] * 0.78 + v; }
         const p = part[i];
         if (p && ((x + y) & 1)) { r = r * 0.7 + 40; g = g * 0.7 + 40; b = b * 0.7 + 40; }
+        if (fv < 255) { r *= fv / 255; g *= fv / 255; b *= fv / 255; }
         px[row + bx] = 0xff000000 | ((b > 255 ? 255 : b) << 16) | ((g > 255 ? 255 : g) << 8) | (r > 255 ? 255 : r);
         continue;
       }
@@ -167,7 +179,7 @@ function drawWorld() {
       if (T > 450 && m !== EMPTY && incand) {
         const gi = glowIndex(PH[m] === PH_SOLID ? T + nz * 0.9 : m === MAGMA ? T + Math.sin(x * 0.19 + y * 0.11 + anim * 0.03 + nz * 0.04) * 55 - 30 : T), w = GLOW_W[gi];
         r = r * (1 - w) + GLOW_R[gi] * w; g = g * (1 - w) + GLOW_G[gi] * w; b = b * (1 - w) + GLOW_B[gi] * w;
-        if (glowOn && w > 0.3 && ((bx | by) & 1) === 0) {
+        if (glowOn && fv >= 128 && w > 0.3 && ((bx | by) & 1) === 0) {
           const gk = (by >> 1) * gw + (bx >> 1), s = (w - 0.3) * 1.4;
           gpx[gk] = 0xff000000 | (Math.min(255, GLOW_B[gi] * s) << 16) | (Math.min(255, GLOW_G[gi] * s) << 8) | Math.min(255, GLOW_R[gi] * s);
         }
@@ -198,11 +210,19 @@ function drawWorld() {
         top = cl << 24;
         fpx[row + bx] = (tb ? 0xff000000 : 0) | (cl === 5 ? 0xff0000 : 0) | (cl === 3 ? 0xff00 : 0) | (cl === 1 || cl === 4 || cl === 6 ? 0xff : 0);
       }
+      if (fv < 255) {
+        const k = fv / 255; r *= k; g *= k; b *= k;
+        if (sm) {
+          const c = bpx[row + bx], t = tpx[row + bx];
+          bpx[row + bx] = fogColor(c, k); tpx[row + bx] = fogColor(t, k);
+        }
+      }
       px[row + bx] = top | ((b > 255 ? 255 : b) << 16) | ((g > 255 ? 255 : g) << 8) | (r > 255 ? 255 : r);
     }
   }
   // bars and other loose objects
   if (!lens) for (const e of ents) {
+    if (useFog && fogSeen(e.ix, e.iy) < 64) continue;
     const ex = e.ix - vx0, ey = e.iy - vy0;
     if (ex + BAR_W < 0 || ey + BAR_H < 0 || ex >= bw || ey >= bh) continue;
     const m = e.m;
@@ -219,7 +239,7 @@ function drawWorld() {
   }
   // grains in flight from the vacuum nozzle, a tube or a belt (rain and snow are drawn over the top, see drawRain)
   if (!lens) for (const f of flyers) {
-    if (f.rain) continue;
+    if (f.rain || (useFog && fogSeen(f.x, f.y) < 64)) continue;
     const sx = Math.floor(f.x) - vx0, sy = Math.floor(f.y) - vy0;
     if (sx < 0 || sy < 0 || sx >= bw || sy >= bh) continue;
     const m = f.m, v = ((sx * 7 + sy * 13) & 15) - 8;

src/sim/fog.js

@@ -0,0 +1,35 @@
+// Exploration only: never changes grains or the random stream.
+const FOG = 2;
+let fog, FW, FH;
+function fogAlloc() { FW = Math.ceil(W / FOG); FH = Math.ceil(H / FOG); fog = new Uint8Array(FW * FH); }
+function fogMark(x, y, v) {
+  if (x < 0 || y < 0 || x >= W || y >= H) return;
+  const i = Math.floor(y / FOG) * FW + Math.floor(x / FOG);
+  if (v > fog[i]) fog[i] = v;
+}
+function fogSeen(x, y) {
+  if (x < 0 || y < 0 || x >= W || y >= H) return 255;
+  return fog[Math.floor(y / FOG) * FW + Math.floor(x / FOG)];
+}
+function fogInit() {
+  for (let x = 0; x < W; x++) for (let y = 0; y < Math.min(H, surfY[x] + 8); y++) fogMark(x, y, y <= surfY[x] ? 255 : (surfY[x] + 8 - y) * 255 / 8);
+}
+function fogLook(cx, cy) {
+  for (let a = 0; a < 256; a++) {
+    const dx = Math.cos(a * Math.PI / 128), dy = Math.sin(a * Math.PI / 128);
+    let hit = -1;
+    for (let d = 0; d < 48; d++) {
+      const x = Math.floor(cx + dx * d), y = Math.floor(cy + dy * d);
+      if (x < 0 || y < 0 || x >= W || y >= H) break;
+      const ph = PH[mat[y * W + x]];
+      if (hit < 0 && (ph === PH_SOLID || ph === PH_POWDER)) hit = d;
+      const v = Math.min(255, (48 - d) * 255 / 8, hit < 0 ? 255 : (4 - d + hit) * 255 / 4);
+      if (v <= 0) break;
+      fogMark(x, y, v);
+    }
+  }
+}
+function fogRevealAround(x, y, r) {
+  for (let yy = Math.max(0, Math.floor(y - r)); yy <= Math.min(H - 1, y + r); yy++) for (let xx = Math.max(0, Math.floor(x - r)); xx <= Math.min(W - 1, x + r); xx++) if ((xx - x) ** 2 + (yy - y) ** 2 <= r * r) fogMark(xx, yy, 255);
+}
+function fogRevealAll() { fog.fill(255); }

src/sim/save.js

@@ -25,7 +25,7 @@ function serializeWorld() {
     pipes: (() => { if (pipesDirty) rebuildPipes(); return pipeNets.filter(pn => pn.n > 0).map(pn => [pn.blocks[0], pn.m, pn.n, Math.round(pn.T)]); })(),
     cols: { surfY: Array.from(surfY), dirtY: Array.from(dirtY), graniteY: Array.from(graniteY), basaltY: Array.from(basaltY), magmaY: Array.from(magmaY) },
   };
-  return { meta, buffers: { mat: mat.slice(), temp: t16, life: life.slice(), flags: flags.slice(), part: part.slice(), blockP: blockP.slice(), blockV: blockV.slice(), bgm: bgm.slice() } };
+  return { meta, buffers: { fog: fog.slice(), mat: mat.slice(), temp: t16, life: life.slice(), flags: flags.slice(), part: part.slice(), blockP: blockP.slice(), blockV: blockV.slice(), bgm: bgm.slice() } };
 }
 function deserializeWorld(meta, buffers) {
   if (meta.v !== SAVE_VERSION) throw new Error('This world was saved by an older version of the game and cannot be loaded.');
@@ -108,5 +108,13 @@ function deserializeWorld(meta, buffers) {
   if (!meta.specks) clearHardSpecks(true); // older saves: tidy away tiny specks of too-hard rock once
   rebuildPipes();
   for (const [b, m, n, T] of meta.pipes || []) { const id = pipeNetAt[b]; if (id >= 0) { const pn = pipeNets[id]; pn.m = m; pn.n = Math.min(n, pn.cap); pn.T = T; } }
+  if (buffers.fog && buffers.fog.length === fog.length) fog.set(buffers.fog);
+  else {
+    fogInit();
+    for (let b = 0; b < NB; b++) if (blockP[b]) fogRevealAround((b % BW) * BS + BS / 2, ((b / BW) | 0) * BS + BS / 2, 12);
+    for (const m of machines) if (m) for (let y = m.y; y < m.y + m.h; y += BS) for (let x = m.x; x < m.x + m.w; x += BS) fogRevealAround(x, y, 12);
+    for (const mo of molds) for (const i of moldCellsAt(mo.kind, mo.x, mo.y).walls) fogRevealAround(i % W, (i / W) | 0, 12);
+  }
+  fogLook(bot.x + bot.w / 2, bot.y + bot.h / 2);
   EV.length = 0;
 }

src/sim/tick.js

@@ -22,4 +22,5 @@ function simTick() {
   if (tick % 60 === 17) { marketTick(); ordersTick(); }
   if (tick % 30 === 11 && saplings.length) saplingTick();
   ghostTick();
+  if (tick % 4 === 0) fogLook(bot.x + bot.w / 2, bot.y + bot.h / 2);
 }

src/sim/world.js

@@ -39,6 +39,7 @@ function discover(m, x, y, from, how, T) {
 
 function alloc(w, h) {
   W = w; H = h; N = w * h;
+  fogAlloc();
   CW = Math.ceil(w / 32); CH = Math.ceil(h / 32); NCH = CW * CH;
   mat = new Uint8Array(N); temp = new Float32Array(N); life = new Uint8Array(N); flags = new Uint8Array(N);
   stamp = new Uint8Array(N); part = new Uint8Array(N); mach = new Uint16Array(N); digp = new Uint8Array(N);

src/sim/worldgen.js

@@ -311,5 +311,6 @@ function generateWorld(seedIn, w, h, onProgress) {
   seen = new Uint8Array(NMAT); ledger = {};
   stats.dug = stats.moved = stats.placed = stats.ignitions = stats.cast = stats.bars = 0;
   EV.length = 0;
+  fogInit(); fogLook(bot.x + bot.w / 2, bot.y + bot.h / 2);
   if (onProgress) onProgress(1);
 }

src/ui/info.js

@@ -76,6 +76,7 @@ function reactionsOf(m, forNotebook) {
 // What is under the cursor: t1 is the name, t2 the details, warn a short problem
 // (too hard, out of reach) for the label next to the cursor.
 function hoverInfo(ax, ay) {
+  if (SET.fog && fogSeen(ax, ay) < 64) return { t1: 'Unexplored', t2: [], t3: [] };
   if (ax < 0 || ay < 0 || ax >= W || ay >= H) return { t1: '', t2: ['Outside the world'], warn: '', air: true };
   const i = ay * W + ax, m = mat[i];
   let warn = '';

src/ui/settings.js

@@ -45,6 +45,7 @@ const SET_TABS = {
     { html: () => controlsHtml() },
   ],
   Game: [
+    { k: 'fog', label: 'Fog of war', d: 'Places you have not seen yet are black. Off shows the whole world.', type: 'toggle' },
     { k: 'cardSeconds', label: 'Discovery cards', d: 'How long a card stays when you find or make something new. Everything is also in the notebook.', type: 'select', opts: [[0, 'Off'], [5, '5 seconds'], [9, '9 seconds'], [15, '15 seconds'], [-1, 'Until I close them']] },
     { k: 'autosave', label: 'Autosave', type: 'select', opts: [[0, 'Off'], [1, 'Every minute'], [3, 'Every 3 minutes'], [5, 'Every 5 minutes'], [10, 'Every 10 minutes']] },
     { k: 'save', label: 'Save', d: 'Saves to this browser.', type: 'button', text: 'Save now', fn: () => saveWorld('main'), ingame: true },

src/ui/state.js

@@ -5,7 +5,7 @@
 const SET_DEFAULT = {
   zoom: 12, integerScale: true, renderScale: 1, uiScale: 1, fpsCap: 0, showPerf: false, shake: true, cameraSmooth: 0.7, cameraLead: true,
   look: 'smooth', lighting: 'full', lightEvery: 1, ambient: 0.12, daylight: 1, glow: 'low', grain: 1, incandescence: true, particles: true,
-  thermalPalette: 'inferno', simSpeed: 1, maxSteps: 3,
+  fog: true, thermalPalette: 'inferno', simSpeed: 1, maxSteps: 3,
   volMaster: 0.8, volMusic: 0.5, volSfx: 0.8, muted: false, muteUnfocused: true,
   deadzone: 0.18, aimSpeed: 1, autosave: 3, cardSeconds: 9, cursorLabel: true, sv: 2,
 };