Honeycomb Lights-Out

// Honeycomb hex grid lights-out:
// Click a hex to advance its color (mod 3); the click also advances each of
// its 6 neighbors. Smooth color blends + per-hex flash trail surface large
// coherent patches that grow and dissolve as you play.

const COLS = 30;
const ROWS = 20;
const N = COLS * ROWS;

// pointy-top hex axial coords, offset rows (odd-row shifted right)
let cells;       // Uint8Array of 0/1/2 — current color
let prev;        // Uint8Array — color before last flip (for crossfade)
let flash;       // Float32Array — 1.0 at flip, decays to 0
let centers;     // Float32Array[2*N] — pixel centers (recomputed on resize)
let neighbors;   // Int32Array[6*N] — precomputed neighbor indices (-1 = none)

let W = 0, H = 0;
let size = 18;   // hex circumradius in px (recomputed on resize)
let originX = 0, originY = 0;

// palette — three soft, distinguishable hues
const PAL = [
  [ 70, 140, 255], // blue
  [255, 170,  70], // amber
  [120, 220, 150], // mint
];

function neighborsOf(i) {
  // pointy-top, odd-row offset (rows shift right for odd r)
  const r = (i / COLS) | 0;
  const c = i - r * COLS;
  const odd = r & 1;
  const out = [-1, -1, -1, -1, -1, -1];
  // 6 directions: E, W, NE, NW, SE, SW
  const dirs = odd
    ? [[ 1, 0], [-1, 0], [ 1,-1], [ 0,-1], [ 1, 1], [ 0, 1]]
    : [[ 1, 0], [-1, 0], [ 0,-1], [-1,-1], [ 0, 1], [-1, 1]];
  for (let k = 0; k < 6; k++) {
    const nc = c + dirs[k][0];
    const nr = r + dirs[k][1];
    if (nc < 0 || nc >= COLS || nr < 0 || nr >= ROWS) continue;
    out[k] = nr * COLS + nc;
  }
  return out;
}

function recomputeLayout(width, height) {
  W = width; H = height;
  // pointy-top hex: w = sqrt(3)*s, h = 2*s; vert spacing = 1.5*s, horiz = sqrt(3)*s
  // fit COLS+0.5 across (offset rows extend half a hex) and ROWS*1.5+0.5 down
  const sx = width  / ((COLS + 0.5) * Math.sqrt(3));
  const sy = height / (ROWS * 1.5 + 0.5);
  size = Math.min(sx, sy);
  const gridW = (COLS + 0.5) * Math.sqrt(3) * size;
  const gridH = (ROWS * 1.5 + 0.5) * size;
  originX = (width  - gridW) * 0.5 + (Math.sqrt(3) * size) * 0.5;
  originY = (height - gridH) * 0.5 + size;
  if (!centers || centers.length !== 2 * N) centers = new Float32Array(2 * N);
  const w = Math.sqrt(3) * size;
  for (let r = 0; r < ROWS; r++) {
    const odd = r & 1;
    for (let c = 0; c < COLS; c++) {
      const i = r * COLS + c;
      centers[2 * i    ] = originX + c * w + (odd ? w * 0.5 : 0);
      centers[2 * i + 1] = originY + r * size * 1.5;
    }
  }
}

function pixelToCell(px, py) {
  // brute-force nearest center; with 600 hexes this is < 0.05ms and is exact
  let best = -1, bd = Infinity;
  const r2 = size * size;
  for (let i = 0; i < N; i++) {
    const dx = px - centers[2 * i];
    const dy = py - centers[2 * i + 1];
    const d = dx * dx + dy * dy;
    if (d < bd) { bd = d; best = i; }
  }
  // reject clicks outside any hex
  if (bd > r2 * 1.2) return -1;
  return best;
}

function flip(i) {
  prev[i] = cells[i];
  cells[i] = (cells[i] + 1) % 3;
  flash[i] = 1;
  const nb = neighbors;
  const base = i * 6;
  for (let k = 0; k < 6; k++) {
    const j = nb[base + k];
    if (j < 0) continue;
    prev[j] = cells[j];
    cells[j] = (cells[j] + 1) % 3;
    flash[j] = 1;
  }
}

function init({ canvas, ctx, width, height }) {
  cells = new Uint8Array(N);
  prev  = new Uint8Array(N);
  flash = new Float32Array(N);
  neighbors = new Int32Array(6 * N);
  for (let i = 0; i < N; i++) {
    cells[i] = (Math.random() * 3) | 0;
    prev[i]  = cells[i];
    const nb = neighborsOf(i);
    for (let k = 0; k < 6; k++) neighbors[i * 6 + k] = nb[k];
  }
  recomputeLayout(width, height);
}

function hexPath(ctx, cx, cy, s) {
  // pointy-top: vertices at angles 30, 90, 150, 210, 270, 330
  ctx.beginPath();
  for (let k = 0; k < 6; k++) {
    const a = (Math.PI / 3) * k + Math.PI / 6;
    const x = cx + s * Math.cos(a);
    const y = cy + s * Math.sin(a);
    if (k === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
  }
  ctx.closePath();
}

function lerp(a, b, t) { return a + (b - a) * t; }
function mix(p, q, t) {
  return [
    lerp(p[0], q[0], t) | 0,
    lerp(p[1], q[1], t) | 0,
    lerp(p[2], q[2], t) | 0,
  ];
}

let hoverIdx = -1;

function tick({ ctx, dt, time, width, height, input }) {
  if (width !== W || height !== H) recomputeLayout(width, height);

  // handle clicks
  for (const c of input.consumeClicks()) {
    const i = pixelToCell(c.x, c.y);
    if (i >= 0) flip(i);
  }
  hoverIdx = pixelToCell(input.mouseX, input.mouseY);

  // background — subtle dark wash
  ctx.fillStyle = "#0a0d14";
  ctx.fillRect(0, 0, W, H);

  const s = size;
  const inner = s * 0.92;
  const dec = Math.exp(-dt * 3.2); // flash decay

  for (let i = 0; i < N; i++) {
    const cx = centers[2 * i];
    const cy = centers[2 * i + 1];
    const f = flash[i];
    const cur = PAL[cells[i]];
    const pv  = PAL[prev[i]];
    const col = mix(pv, cur, 1 - f); // f=1 -> pv, f=0 -> cur
    const wob = 1 + 0.04 * f;        // tiny pulse on flip
    ctx.fillStyle = `rgb(${col[0]},${col[1]},${col[2]})`;
    hexPath(ctx, cx, cy, inner * wob);
    ctx.fill();

    // flash highlight ring while f > 0
    if (f > 0.02) {
      ctx.strokeStyle = `rgba(255,255,255,${(f * 0.7).toFixed(3)})`;
      ctx.lineWidth = 2;
      ctx.stroke();
    }
    flash[i] = f * dec;
  }

  // hover ring
  if (hoverIdx >= 0) {
    const cx = centers[2 * hoverIdx];
    const cy = centers[2 * hoverIdx + 1];
    hexPath(ctx, cx, cy, inner * 1.02);
    ctx.strokeStyle = "rgba(255,255,255,0.55)";
    ctx.lineWidth = 1.5;
    ctx.stroke();
  }

  // HUD: tally of each color
  let n0 = 0, n1 = 0, n2 = 0;
  for (let i = 0; i < N; i++) {
    if (cells[i] === 0) n0++;
    else if (cells[i] === 1) n1++;
    else n2++;
  }
  const pad = 10;
  ctx.fillStyle = "rgba(0,0,0,0.55)";
  ctx.fillRect(pad, pad, 168, 70);
  ctx.font = "12px monospace";
  ctx.textBaseline = "alphabetic";
  ctx.textAlign = "left";
  const bar = (n, k, y) => {
    const c = PAL[k];
    ctx.fillStyle = `rgb(${c[0]},${c[1]},${c[2]})`;
    ctx.fillRect(pad + 8, y - 9, 10, 10);
    ctx.fillStyle = "#fff";
    ctx.fillText(`${n.toString().padStart(3)} / ${N}`, pad + 26, y);
  };
  bar(n0, 0, pad + 22);
  bar(n1, 1, pad + 40);
  bar(n2, 2, pad + 58);

  // tip in bottom-left
  ctx.fillStyle = "rgba(255,255,255,0.55)";
  ctx.font = "11px monospace";
  ctx.fillText("click a hex — it and its 6 neighbors advance color", pad, H - pad);
}