A special terrain tile explains itself on a tap, and 活性源石 is one material on both boards (GitHub #184) (#185)

Tapping a 活性源石 / 沼泽 / 深水区 / 排气格栅 / gate / teleport tile opens a read-only card with that stage's own terrain numbers (the boss-prep board picks the board tile once, through prepXf.toBoard); the 2D atlas cell and the 3D shader now share one 活性源石 palette and recipe and draw to the tile edge. Contributed by @Convey123.

public/js/render/app.js

@@ -35,6 +35,8 @@
 //        pieceDragStart { uid, piece, from } · pieceDrop { uid, piece, from, target } · pieceDragEnd {uid, dropped}
 //        pieceClick { uid, piece, button, detail, clientX, clientY } (battle units: { unitId, uid, unit, … })
 //        pieceDetail (right-click / long-press) · pieceHover { uid } | { uid: null } (battle: + unitId, unit)
+//        tileClick { row, col, x, y } — the ground itself was tapped and nothing stands there (GitHub issue #184:
+//        a special terrain tile's own tip; the screen resolves it with gameLogic.terrainInfo)
 //        tileHover { row, col, area, idx } | null (while dragging: the drop target — the tile under the pointer)
 //   view.pieceScreenRect(uid) → { left, top, right, bottom, width, height, x, y } (client px: the drawn body) | null
 // Picking (user playtest #4 item 1: the ground is drawn as tiles — a press on a tile is a press on the unit standing
@@ -1338,6 +1340,21 @@ export async function createFieldView(host, options = {}) {
     return hit ? hit.ref : null;
   }
 
+  /**
+   * The ground itself was tapped: nothing stands there, so the TILE explains itself — a special terrain tile (活性源石,
+   * 沼泽, 排气格栅, 深水区, 红/蓝门, 传送) opens its own card (GitHub issue #184; screens/game.js `tileClick` →
+   * gameLogic.terrainInfo, which says nothing about an ordinary floor / road / wall tile).
+   * The tile is picked as a BOARD tile (`pickBoardTile`, i.e. through `prepXf.toBoard`): on a Final Assault / Hidden Core
+   * PREP the board draws the boss field's own rows (stage 2–5 as board 9–12), and the screen maps board → stage once more
+   * with `gameLogic.fieldTile` — reporting the DRAWN tile here would be converted twice and explain the wrong tile
+   * (review on #185).
+   */
+  function emitTileClick(ev, e) {
+    const t = pickBoardTile(ev.x, ev.y);
+    if (!t || !(t.row >= 0) || !(t.col >= 0)) return;    // outside the board this field draws
+    emit('tileClick', { row: t.row, col: t.col, button: e.button, clientX: e.clientX, clientY: e.clientY });
+  }
+
   const onPointerDown = (e) => {
     if (destroyed) return;
     const ev = evPayload(e);
@@ -1348,18 +1365,20 @@ export async function createFieldView(host, options = {}) {
         const payload = { unitId: v.id, uid: info?.uid ?? null, unit: info, button: e.button, detail: e.button === 2, clientX: e.clientX, clientY: e.clientY };
         emit('pieceClick', payload);
         if (e.button === 2) emit('pieceDetail', payload);
-      } else if (penViews.size) {
-        const pv = penUnitAt(ev.x, ev.y);
-        if (pv) emitPenClick(pv, e);
+        return;
       }
+      const pv = penViews.size ? penUnitAt(ev.x, ev.y) : null;
+      if (pv) emitPenClick(pv, e);
+      else emitTileClick(ev, e);
       return;
     }
     if (drag.pointerDown(ev)) { try { canvas.setPointerCapture(e.pointerId); } catch { /* ignore */ } return; }
     if (mode === 'prep') { const lv = leaderAt(ev.x, ev.y); if (lv) { emitPenClick(lv, e); return; } }
     if (penViews.size && mode === 'prep') {
       const pv = penUnitAt(ev.x, ev.y);
-      if (pv) emitPenClick(pv, e);
+      if (pv) { emitPenClick(pv, e); return; }
     }
+    emitTileClick(ev, e);
   };
   const onPointerMove = (e) => {
     if (destroyed) return;

public/js/render/board3d/materials.js

@@ -12,6 +12,8 @@
 // (a soft world-space falloff), so the active field reads like the original's lit board without re-building
 // geometry when the camera moves.
 
+import { ORIGINIUM } from '../style.js';
+
 /** Shared focus uniforms (one object for every lit material). */
 export function focusUniforms(THREE) {
   return {
@@ -275,7 +277,17 @@ export function mireMaterial(THREE, tex, focus) {
   });
 }
 
-/** Infection (活性源石): dark originium crust patches with glowing, pulsing orange veins over the concrete. */
+/**
+ * 活性源石 (infection): dark originium crust patches with glowing, pulsing orange veins over the concrete. The palette
+ * (`style.js ORIGINIUM`) and the recipe are the ones `render/textures.js originiumOverlay` draws on the 2D board —
+ * two octaves of noise for the crust, the ridge of the fine one for the veins, a third for the crystal grains — so both
+ * boards show ONE material (GitHub #184).
+ * The noise is world-space, so the crust carries on into the neighbouring tile: there is deliberately NO per-tile edge
+ * fade (the old `edge` term faded every tile out at its own border, which made a field of 活性源石 read as separate
+ * patches instead of one floor).
+ */
+const V3 = (c) => `vec3(${c.map((v) => Number(v).toFixed(3)).join(', ')})`;
+
 export function infectionMaterial(THREE, tex, focus) {
   const uniforms = { uTime: { value: 0 }, uNoise: { value: tex.noise || null }, ...focus };
   return new THREE.ShaderMaterial({
@@ -288,15 +300,17 @@ export function infectionMaterial(THREE, tex, focus) {
       'void main() {',
       '  float n = texture2D(uNoise, vWorld.xy * 0.55).r;',
       '  float n2 = texture2D(uNoise, vWorld.xy * 1.3 + 0.37).r;',
+      '  float n3 = texture2D(uNoise, vWorld.xy * 3.1 + 0.11).r;',
       '  float crust = smoothstep(0.38, 0.62, n * 0.7 + n2 * 0.45);',
       '  float vein = smoothstep(0.86, 0.98, 1.0 - abs(n2 * 2.0 - 1.0)) * (0.35 + 0.65 * crust);',
+      '  float grain = smoothstep(0.93, 1.0, n3) * crust;',
       '  float pulse = 0.6 + 0.4 * sin(uTime * 2.2 + n * 9.0);',
-      '  vec2 e = min(vUv, 1.0 - vUv);',
-      '  float edge = smoothstep(0.0, 0.1, min(e.x, e.y));',
-      '  vec3 base = mix(vec3(0.16, 0.05, 0.05), vec3(0.3, 0.1, 0.07), n2);',
-      '  vec3 glow = vec3(1.0, 0.46, 0.18) * (1.2 + 0.8 * pulse);',
-      '  vec3 c = mix(base, glow, vein) * focusMask(vWorld.xy);',
-      '  float a = clamp(crust * 0.72 + vein, 0.0, 1.0) * edge;',
+      `  vec3 base = mix(${V3(ORIGINIUM.base)}, ${V3(ORIGINIUM.crust)}, n2);`,
+      `  vec3 glow = ${V3(ORIGINIUM.vein)} * (1.2 + 0.8 * pulse);`,
+      '  vec3 c = mix(base, glow, vein);',
+      `  c = mix(c, ${V3(ORIGINIUM.spec)} * (1.0 + 0.6 * pulse), grain);`,
+      '  c *= focusMask(vWorld.xy);',
+      '  float a = clamp(crust * 0.72 + vein, 0.0, 1.0);',
       '  gl_FragColor = vec4(c, a);',
       '  #include <colorspace_fragment>',
       '}',

public/js/render/style.js

@@ -70,6 +70,37 @@ export const COLORS = Object.freeze({
 export const TIER_COLORS = Object.freeze([0x9aa5a0, 0x9aa5a0, 0x7fd37a, 0x52b6ff, 0xb98cff, 0xffc600, 0xff6b3d]);
 export const ENEMY_FRAME = Object.freeze({ normal: 0xc84a3c, elite: 0xff7a33, boss: 0xff2d55 });
 
+/**
+ * 活性源石 (infection) — the ONE palette of that tile, shared by the two boards (GitHub #184: the 2D atlas cell and the
+ * 3D shader used to be two different materials — a beveled brick with crystal clusters against a world-space crust).
+ * The values are the 3D board's own working colours (`render/board3d/materials.js` writes them into its shaders, which
+ * end in `#include <colorspace_fragment>`, i.e. they are LINEAR); `textures.js` converts them for its canvas with
+ * `linearToHex`, so both renderers show the same colour.
+ *   base — the crust's dark side, crust — its lit side, vein — the glowing veins, spec — the bright crystal grains.
+ */
+export const ORIGINIUM = Object.freeze({
+  base: Object.freeze([0.16, 0.05, 0.05]),
+  crust: Object.freeze([0.3, 0.1, 0.07]),
+  vein: Object.freeze([1.0, 0.46, 0.18]),
+  spec: Object.freeze([1.0, 0.78, 0.52]),
+  glow: 0xff6a3d,        // the additive pulse the 2D board tints per tile
+});
+
+/**
+ * One channel of a working (linear) colour as the 0–255 sRGB value a canvas stores — the shaders' `#include
+ * <colorspace_fragment>` does this for the 3D board, the canvas has to do it itself.
+ */
+export function linearToSrgb255(v) {
+  const k = Number(v);
+  const s = k <= 0.0031308 ? k * 12.92 : 1.055 * Math.pow(Math.max(0, k), 1 / 2.4) - 0.055;
+  return Math.max(0, Math.min(255, Math.round(s * 255)));
+}
+
+/** A working (linear) `ORIGINIUM` colour as the `#rrggbb` sRGB string of the canvas (`textures.js originiumCanvas`). */
+export function linearToHex(rgb) {
+  return `#${rgb.map((v) => linearToSrgb255(v).toString(16).padStart(2, '0')).join('')}`;
+}
+
 export const DMG_STYLE = Object.freeze({
   phys: { font: 'sp-dmg-phys', fill: ['#fffbe8', '#ffb35c'], stroke: '#3b1400' },
   arts: { font: 'sp-dmg-arts', fill: ['#fbe8ff', '#c77dff'], stroke: '#2a0b45' },

public/js/render/textures.js

@@ -11,7 +11,7 @@
 // Everything procedural is deterministic (seeded noise) and generated lazily on first use. Requires
 // globalThis.PIXI and a DOM canvas at call time (never at import time).
 
-import { statusIconKey } from './style.js';
+import { statusIconKey, ORIGINIUM, linearToSrgb255 } from './style.js';
 
 const PIXI = () => globalThis.PIXI;
 
@@ -50,7 +50,7 @@ const PROC_UNIT = 112;
 export const MATERIALS = [
   'road', 'road2', 'road3', 'roadN', 'roadN2', 'floor', 'floor2', 'preview', 'wall', 'wallSide', 'forbid', 'forbid2', 'forbidSide',
   'sep', 'sepSide', 'fence', 'fenceSide', 'start', 'end', 'telin', 'telout', 'hand', 'temp', 'benchSide', 'benchSideTemp', 'mire',
-  'smog', 'deepsea', 'infection', 'cliff', 'blank', 'lowSide', 'margin',
+  'smog', 'deepsea', 'infection', 'infection2', 'cliff', 'blank', 'lowSide', 'margin',
   // high-ground plates by connectivity (horizontal strip L/M/R, vertical strip B(near)/VM/T(far); 'wall' = single)
   'wallL', 'wallM', 'wallR', 'wallB', 'wallVM', 'wallT',
   // textured props
@@ -62,6 +62,11 @@ export const MATERIALS = [
 /** Art layers of materials the crop table (tiles.json) may not describe yet: the board atlas' glass hatch + a glaze. */
 const DEFAULT_ART_LAYERS = Object.freeze({
   penGlass: Object.freeze([Object.freeze({ src: 'D', rect: [549, 1787, 255, 256] }), Object.freeze({ proc: 'glass' })]),
+  // 活性源石 (GitHub #184): the official concrete slab the 3D board lays its crust on (`board3d/atlas.js concrete`), plus
+  // the same crust as a procedural layer — so with the board art installed the 2D tile is composed exactly like the 3D
+  // one, and `MAT_DRAW.infection` is only the no-art fallback.
+  infection: Object.freeze([Object.freeze({ src: 'D', rect: [256, 512, 256, 256] }), Object.freeze({ proc: 'originium' })]),
+  infection2: Object.freeze([Object.freeze({ src: 'D', rect: [256, 512, 256, 256] }), Object.freeze({ proc: 'originium2' })]),
 });
 
 function speckle(ctx, x, y, w, h, r, n, colors, size = [0.6, 1.8]) {
@@ -91,6 +96,97 @@ function bevelTile(ctx, x, y, s, o) {
   ctx.fillRect(x + s - m - bw, y + m, bw, s - 2 * m);
 }
 
+/**
+ * Toroidal value noise on an `n × n` grid: `(u, v) ∈ [0, 1)` wraps, so a cell that is repeated over the board joins
+ * itself without a seam (the knobs of 活性源石's crust line up across neighbouring tiles).
+ */
+function noiseField(n, seed) {
+  const r = rng(seed);
+  const g = new Float32Array(n * n);
+  for (let i = 0; i < g.length; i++) g[i] = r();
+  const smooth = (t) => t * t * (3 - 2 * t);
+  return (u, v) => {
+    const x = u * n, y = v * n;
+    const x0 = Math.floor(x), y0 = Math.floor(y);
+    const i0 = ((x0 % n) + n) % n, j0 = ((y0 % n) + n) % n;
+    const i1 = (i0 + 1) % n, j1 = (j0 + 1) % n;
+    const sx = smooth(x - x0), sy = smooth(y - y0);
+    const a = g[j0 * n + i0], b = g[j0 * n + i1], c = g[j1 * n + i0], d = g[j1 * n + i1];
+    return (a * (1 - sx) + b * sx) * (1 - sy) + (c * (1 - sx) + d * sx) * sy;
+  };
+}
+
+const ORIGINIUM_RES = 256;   // the crust's own resolution (scaled into the atlas cell)
+
+const smoothstep = (a, b, t) => {
+  const k = Math.max(0, Math.min(1, (t - a) / (b - a)));
+  return k * k * (3 - 2 * k);
+};
+
+/**
+ * 活性源石 (infection) — the dark originium crust with thin glowing veins, drawn with the palette and the recipe the 3D
+ * board's shader uses (`render/board3d/materials.js infectionMaterial`, the same octaves and thresholds over its own
+ * world-space noise), so the two boards show ONE material (GitHub #184). Two octaves make the crust mask, the ridge of
+ * the fine octave its veins (brightened where the crust is), the rare top of a third one the crystal grains; the crust
+ * reaches the tile's edges, so a field of 活性源石 carries on into the neighbouring tile instead of ending in a frame.
+ * `mirrored` draws the second variant (`infection2`; `render/tiles.js variantMat` picks between them by tile).
+ */
+const _originiumCells = new Map();
+
+/**
+ * 活性源石's crust, rendered once per variant into `size × size` pixels (cached: the atlas rebuilds on every board art
+ * change, the pattern does not). `mirrored` is the second variant (see `originiumOverlay`).
+ */
+function originiumCanvas(size, mirrored) {
+  const key = `${size}:${mirrored ? 1 : 0}`;
+  const hit = _originiumCells.get(key);
+  if (hit) return hit;
+  const canvas = makeCanvas(size, size);
+  const ctx = canvas.getContext('2d');
+  const crustN = noiseField(16, 9137), fineN = noiseField(32, 4421), grainN = noiseField(64, 733);
+  const img = ctx.createImageData(size, size);
+  const d = img.data;
+  const base = ORIGINIUM.base, crust = ORIGINIUM.crust, vein = ORIGINIUM.vein, spec = ORIGINIUM.spec;
+  for (let py = 0; py < size; py++) {
+    const v = (py + 0.5) / size;
+    for (let px = 0; px < size; px++) {
+      const u = mirrored ? 1 - (px + 0.5) / size : (px + 0.5) / size;
+      const n1 = crustN(u, v), n2 = fineN(u, v), n3 = grainN(u, v);
+      const crustM = smoothstep(0.38, 0.62, n1 * 0.7 + n2 * 0.45);
+      const ridge = smoothstep(0.86, 0.98, 1 - Math.abs(n2 * 2 - 1)) * (0.35 + 0.65 * crustM);
+      const grain = smoothstep(0.93, 1, n3) * crustM;
+      const alpha = Math.min(1, crustM * 0.72 + ridge);
+      if (alpha <= 0.004 && grain <= 0.01) continue;
+      const i = (py * size + px) * 4;
+      for (let c = 0; c < 3; c++) {
+        const lit = base[c] * (1 - n2) + crust[c] * n2;          // the crust's own shading
+        const vc = lit * (1 - ridge) + vein[c] * ridge;          // …and the vein over it
+        // the mixing happens in the shaders' working (linear) space; the canvas stores sRGB (the 3D board's
+        // colorspace_fragment does the same conversion at the end of its fragment shader)
+        d[i + c] = linearToSrgb255(Math.max(0, Math.min(1, vc * (1 - grain) + spec[c] * grain)));
+      }
+      d[i + 3] = Math.round(alpha * 255);
+    }
+  }
+  ctx.putImageData(img, 0, 0);
+  _originiumCells.set(key, canvas);
+  return canvas;
+}
+
+/**
+ * 活性源石 (infection) — the dark originium crust with thin glowing veins, drawn with the palette and the recipe the 3D
+ * board's shader uses (`render/board3d/materials.js infectionMaterial`: the same octaves and thresholds over its own
+ * world-space noise), so the two boards show ONE material (GitHub #184: this cell used to be a beveled brick with random
+ * crystal clusters while the 3D quad carried the crust). Two octaves make the crust mask, the ridge of the fine octave
+ * its veins (brightened where the crust is), the rare top of a third one the crystal grains; the crust reaches the
+ * tile's edges, so a field of 活性源石 carries on into the neighbouring tile instead of ending in a frame — the noise
+ * wraps, so a repeated cell joins itself. Drawn through `drawImage`, so the callers' transform (the procedura draw path
+ * scales a 112 px cell up to the atlas cell) applies; `putImageData` would ignore it.
+ */
+function originiumOverlay(ctx, x, y, s, mirrored = false) {
+  ctx.drawImage(originiumCanvas(ORIGINIUM_RES, mirrored), x, y, s, s);
+}
+
 function cracks(ctx, x, y, s, r, n, color) {
   ctx.strokeStyle = color;
   ctx.lineWidth = 1;
@@ -285,23 +381,8 @@ const MAT_DRAW = {
     }
     speckle(ctx, x, y, s, s, r, 60, ['rgba(200,255,255,0.12)']);
   },
-  infection(ctx, x, y, s, r) {
-    bevelTile(ctx, x, y, s, { light: '#3a2a33', dark: '#241a20', seamColor: '#140e11', hi: 'rgba(255,140,90,0.14)' });
-    for (let i = 0; i < 7; i++) {
-      const cx = x + 16 + r() * (s - 32), cy = y + 16 + r() * (s - 32), rr = 5 + r() * 10, a = r() * Math.PI;
-      const g = ctx.createRadialGradient(cx, cy, 0, cx, cy, rr * 2.2);
-      g.addColorStop(0, 'rgba(255,110,60,0.45)'); g.addColorStop(1, 'rgba(255,110,60,0)');
-      ctx.fillStyle = g; ctx.beginPath(); ctx.arc(cx, cy, rr * 2.2, 0, Math.PI * 2); ctx.fill();
-      ctx.fillStyle = i % 2 ? '#ff7a45' : '#ffb070';
-      ctx.beginPath();
-      for (let k = 0; k < 5; k++) {
-        const aa = a + (k / 5) * Math.PI * 2, rad = k % 2 ? rr * 0.45 : rr;
-        ctx.lineTo(cx + Math.cos(aa) * rad, cy + Math.sin(aa) * rad);
-      }
-      ctx.closePath(); ctx.fill();
-    }
-    cracks(ctx, x, y, s, r, 4, 'rgba(255,120,70,0.45)');
-  },
+  infection(ctx, x, y, s, r) { floorBase(ctx, x, y, s, r); originiumOverlay(ctx, x, y, s, false); },
+  infection2(ctx, x, y, s, r) { floorBase(ctx, x, y, s, r); originiumOverlay(ctx, x, y, s, true); },
   cliff(ctx, x, y, s) {
     const g = ctx.createLinearGradient(x, y, x, y + s);
     g.addColorStop(0, 'rgba(70,80,86,1)'); g.addColorStop(0.08, 'rgba(38,45,49,1)'); g.addColorStop(1, 'rgba(10,13,14,0)');
@@ -439,6 +520,9 @@ const _atlases = new Map();   // art key → atlas
 
 /** Procedural finishing layers usable in tiles.json (`{ proc: 'rim' }`): a bevelled block edge. */
 const PROC_LAYERS = {
+  /** 活性源石's crust over the official concrete (DEFAULT_ART_LAYERS.infection); the second variant is mirrored. */
+  originium(ctx, x, y, s) { originiumOverlay(ctx, x, y, s, false); },
+  originium2(ctx, x, y, s) { originiumOverlay(ctx, x, y, s, true); },
   /** A glossy glass pane over the inner square of a hatch: sky-lit gradient, soft cloud reflections, a highlight. */
   glass(ctx, x, y, s) {
     const i = s * 0.135, w = s - i * 2;

public/js/render/tiles.js

@@ -31,7 +31,7 @@
 // are built; switching back (WebGL context lost, art missing) rebuilds the 2D board.
 
 import { tileAtlas, fxAtlas, rng, groundTexture } from './textures.js';
-import { GLYPH, TILEKEY_GLYPH, TILE_H, COLORS } from './style.js';
+import { GLYPH, TILEKEY_GLYPH, TILE_H, COLORS, ORIGINIUM } from './style.js';
 import { parsePenRect, PEN_RECT } from './pen.js';
 
 /**
@@ -193,6 +193,9 @@ function variantMat(t) {
     case 'roadN': return h < 4 ? 'roadN' : 'roadN2';
     case 'floor': return h < 4 ? 'floor' : 'floor2';
     case 'forbid': return h < 4 ? 'forbid' : 'forbid2';
+    // 活性源石: the same material twice (the second mirrored), so a field of it does not repeat one pattern
+    // (textures.js originiumOverlay — the palette and recipe match the 3D board's shader, GitHub #184)
+    case 'infection': return h < 4 ? 'infection' : 'infection2';
     default: return t.mat;
   }
 }
@@ -650,7 +653,7 @@ export class TileField {
       switch (t.glyph) {
         case 'g': add('smog', 'smoke', P.BLEND_MODES.NORMAL, 0xb8c4c0, 2); break;
         case 'd': add('sea', 'soft', P.BLEND_MODES.ADD, 0x5fe0ff, 1); break;
-        case 'i': add('infect', 'glow', P.BLEND_MODES.ADD, 0xff6a3d, 1); break;
+        case 'i': add('infect', 'glow', P.BLEND_MODES.ADD, ORIGINIUM.glow, 1); break;
         case 'm': add('mire', 'dot', P.BLEND_MODES.ADD, 0xc8d890, 2); break;
         case 'I': case 'O': add('tel', 'ring', P.BLEND_MODES.ADD, 0xb36bff, 1); break;
         case 'S': if (r <= 12) add('gateGlow', 'glow', P.BLEND_MODES.ADD, COLORS.gateRed, 1); break;