moshcode 0.40.0 → 0.41.0

package/src/games-pacman.mjs

@@ -0,0 +1,205 @@
+// Pac-Man, arcade-sized. One maze, 240-odd dots, four power pellets and three
+// ghosts that are not quite as clever as the ones in 1980 — on purpose. This is
+// a game you can win on a coffee break.
+import { acid, amber, ash, dim, rgb } from "./ui.mjs";
+
+/**
+ * `#` wall · `.` dot · `o` power pellet · `P` where pac starts · `G` the pen.
+ *
+ * Symmetric, fully connected, and small enough that the whole board fits above
+ * the pit's prompt without scrolling.
+ */
+export const MAZE = [
+  "###################",
+  "#........#........#",
+  "#o##.###.#.###.##o#",
+  "#.................#",
+  "#.##.#.#####.#.##.#",
+  "#....#...G...#....#",
+  "####.##.###.##.####",
+  "#........P........#",
+  "#.##.####.####.##.#",
+  "#o...............o#",
+  "###################",
+];
+
+export const WIDTH = MAZE[0].length;
+export const HEIGHT = MAZE.length;
+
+const WALL = ash("██");
+const DOT = dim("· ");
+const POWER = amber("✳ ");
+const PAC = acid("● ");
+const BLANK = "  ";
+const GHOST_COLORS = [rgb(255, 77, 61), rgb(255, 120, 180), rgb(90, 220, 250)];
+const SCARED = rgb(90, 140, 255);
+
+const DIRS = { up: [0, -1], down: [0, 1], left: [-1, 0], right: [1, 0] };
+const OPPOSITE = { up: "down", down: "up", left: "right", right: "left" };
+const FRIGHT_TICKS = 40;
+
+export const isWall = (x, y) => MAZE[y]?.[x] === "#" || MAZE[y]?.[x] === undefined;
+const cellKey = (x, y) => `${x},${y}`;
+const distance = (a, b) => Math.abs(a.x - b.x) + Math.abs(a.y - b.y);
+
+/** Every dot and pellet in the maze, as a fresh map. */
+export function pellets() {
+  const map = new Map();
+  for (let y = 0; y < HEIGHT; y++) {
+    for (let x = 0; x < WIDTH; x++) {
+      const cell = MAZE[y][x];
+      if (cell === "." || cell === "o") map.set(cellKey(x, y), cell);
+    }
+  }
+  return map;
+}
+
+function find(char) {
+  for (let y = 0; y < HEIGHT; y++) {
+    const x = MAZE[y].indexOf(char);
+    if (x >= 0) return { x, y };
+  }
+  return { x: 1, y: 1 };
+}
+
+/** Where everything stands at the start of a life. */
+function positions() {
+  const pen = find("G");
+  const pac = find("P");
+  return {
+    pac: { ...pac, dir: "left", want: "left" },
+    // Three ghosts abreast in the pen — the two beside it are open corridor in
+    // this maze, which is what keeps them from stepping on each other at spawn.
+    ghosts: [
+      { x: pen.x, y: pen.y },
+      { x: pen.x - 1, y: pen.y },
+      { x: pen.x + 1, y: pen.y },
+    ].map((g, i) => ({ ...g, home: { x: g.x, y: g.y }, dir: "up", color: i })),
+  };
+}
+
+/** Directions a ghost may take from where it stands. */
+export function options(ghost, { allowReverse = false } = {}) {
+  const open = Object.entries(DIRS)
+    .filter(([name, [dx, dy]]) => !isWall(ghost.x + dx, ghost.y + dy)
+      && (allowReverse || name !== OPPOSITE[ghost.dir]));
+  // A dead end is the one place reversing is the only move there is.
+  return open.length ? open : Object.entries(DIRS).filter(([, [dx, dy]]) => !isWall(ghost.x + dx, ghost.y + dy));
+}
+
+/**
+ * One ghost step. Chases by Manhattan distance, flees while you are lit up,
+ * and takes a random legal turn one time in five so the three of them do not
+ * arrive in a single-file line.
+ */
+export function moveGhost(ghost, pac, { frightened = false, rng = Math.random } = {}) {
+  const open = options(ghost);
+  if (!open.length) return ghost;
+  const scored = open.map(([name, [dx, dy]]) => ({
+    name,
+    dx,
+    dy,
+    d: distance({ x: ghost.x + dx, y: ghost.y + dy }, pac),
+  }));
+  let choice;
+  if (rng() < 0.2) choice = scored[Math.floor(rng() * scored.length) % scored.length];
+  else {
+    const sorted = scored.slice().sort((a, b) => (frightened ? b.d - a.d : a.d - b.d));
+    choice = sorted[0];
+  }
+  ghost.dir = choice.name;
+  ghost.x += choice.dx;
+  ghost.y += choice.dy;
+  return ghost;
+}
+
+function caught(state) {
+  const hits = state.ghosts.filter((g) => g.x === state.pac.x && g.y === state.pac.y);
+  if (!hits.length) return false;
+  if (state.fright > 0) {
+    for (const g of hits) {
+      state.score += 200;
+      Object.assign(g, { x: g.home.x, y: g.home.y, dir: "up" });
+    }
+    return false;
+  }
+  state.lives--;
+  if (state.lives <= 0) { state.over = "game over"; return true; }
+  Object.assign(state, positions(), { fright: 0 });
+  return true;
+}
+
+export const PACMAN = {
+  key: "pacman",
+  aliases: ["pac", "pacmam", "puckman"],
+  title: "PAC-MAN",
+  blurb: "eat the dots, dodge the ghosts, ✳ makes them edible",
+  keys: "← ↑ ↓ → steer · q quit",
+  tickMs: 150,
+
+  create({ rng = Math.random } = {}) {
+    return { ...positions(), dots: pellets(), score: 0, lives: 3, fright: 0, frame: 0, over: null, rng };
+  },
+
+  tick(state) {
+    state.frame++;
+    const pac = state.pac;
+    // A turn is remembered until it becomes legal, which is what makes a corner
+    // feel like a corner rather than a keypress you have to time.
+    const wanted = DIRS[pac.want];
+    if (wanted && !isWall(pac.x + wanted[0], pac.y + wanted[1])) pac.dir = pac.want;
+    const [dx, dy] = DIRS[pac.dir];
+    if (!isWall(pac.x + dx, pac.y + dy)) { pac.x += dx; pac.y += dy; }
+
+    const here = state.dots.get(cellKey(pac.x, pac.y));
+    if (here) {
+      state.dots.delete(cellKey(pac.x, pac.y));
+      state.score += here === "o" ? 50 : 10;
+      if (here === "o") state.fright = FRIGHT_TICKS;
+    }
+    if (!state.dots.size) { state.over = "maze cleared 🤘"; return state; }
+    if (caught(state)) return state;
+
+    // Ghosts move at half speed, and slower still while they are running away.
+    const beat = state.fright > 0 ? 3 : 2;
+    if (state.frame % beat === 0) {
+      for (const ghost of state.ghosts) {
+        moveGhost(ghost, pac, { frightened: state.fright > 0, rng: state.rng });
+      }
+      caught(state);
+    }
+    if (state.fright > 0) state.fright--;
+    return state;
+  },
+
+  onKey(state, pressed) {
+    if (DIRS[pressed]) state.pac.want = pressed;
+    return state;
+  },
+
+  status(state) {
+    const left = state.dots.size;
+    if (state.over) return `${state.over} · ${state.score} points`;
+    return `score ${state.score} · lives ${"●".repeat(Math.max(0, state.lives))} · dots ${left}`
+      + (state.fright > 0 ? " · RUN" : "");
+  },
+
+  render(state) {
+    const rows = [];
+    for (let y = 0; y < HEIGHT; y++) {
+      let row = "";
+      for (let x = 0; x < WIDTH; x++) {
+        const ghost = state.ghosts.find((g) => g.x === x && g.y === y);
+        if (state.pac.x === x && state.pac.y === y) row += PAC;
+        else if (ghost) row += (state.fright > 0 ? SCARED : GHOST_COLORS[ghost.color])("▲ ");
+        else if (MAZE[y][x] === "#") row += WALL;
+        else {
+          const pellet = state.dots.get(cellKey(x, y));
+          row += pellet === "o" ? POWER : pellet === "." ? DOT : BLANK;
+        }
+      }
+      rows.push(row);
+    }
+    return rows;
+  },
+};

package/src/games-snake.mjs

@@ -0,0 +1,111 @@
+// Snake. The cheapest game in the arcade and the hardest to stop playing.
+import { acid, amber, dim, rgb } from "./ui.mjs";
+
+export const WIDTH = 28;
+export const HEIGHT = 14;
+
+const HEAD = acid("█");
+const BODY = rgb(120, 190, 40)("▓");
+const FOOD = amber("✳");
+const EMPTY = dim("·");
+
+const DIRS = {
+  up: [0, -1],
+  down: [0, 1],
+  left: [-1, 0],
+  right: [1, 0],
+};
+
+const same = (a, b) => a[0] === b[0] && a[1] === b[1];
+
+/** A cell nothing is standing on, so the food never lands under the snake. */
+export function placeFood(snake, rng) {
+  const free = [];
+  for (let y = 0; y < HEIGHT; y++) {
+    for (let x = 0; x < WIDTH; x++) {
+      if (!snake.some((s) => same(s, [x, y]))) free.push([x, y]);
+    }
+  }
+  if (!free.length) return null; // the board is snake — that is a win
+  return free[Math.floor(rng() * free.length) % free.length];
+}
+
+/**
+ * One step. Returns the state; sets `over` when the head meets a wall or
+ * itself. Kept separate from the game object so a test can walk a snake into
+ * its own tail on purpose.
+ */
+export function step(state) {
+  const [dx, dy] = DIRS[state.dir];
+  const head = [state.snake[0][0] + dx, state.snake[0][1] + dy];
+  if (head[0] < 0 || head[0] >= WIDTH || head[1] < 0 || head[1] >= HEIGHT) {
+    state.over = "into the wall";
+    return state;
+  }
+  // The tail cell is about to move out from under the head, so it is only a
+  // collision when the snake is about to grow into it.
+  const eating = state.food && same(head, state.food);
+  const body = eating ? state.snake : state.snake.slice(0, -1);
+  if (body.some((s) => same(s, head))) {
+    state.over = "ate itself";
+    return state;
+  }
+  state.snake = [head, ...body];
+  if (eating) {
+    state.score += 10;
+    state.food = placeFood(state.snake, state.rng);
+    if (!state.food) state.over = "the whole board — no notes";
+  }
+  state.turned = false;
+  return state;
+}
+
+export const SNAKE = {
+  key: "snake",
+  aliases: ["worm", "nibbles"],
+  title: "SNAKE",
+  blurb: "eat, grow, and try not to eat yourself",
+  keys: "← ↑ ↓ → turn · q quit",
+  tickMs: (state) => Math.max(60, 130 - state.snake.length * 2),
+
+  create({ rng = Math.random } = {}) {
+    const mid = Math.floor(HEIGHT / 2);
+    const snake = [[6, mid], [5, mid], [4, mid]];
+    return { snake, dir: "right", turned: false, score: 0, over: null, rng, food: placeFood(snake, rng) };
+  },
+
+  tick: step,
+
+  onKey(state, key) {
+    if (!DIRS[key]) return state;
+    // One turn per tick, and never a full reverse: without either, a fast
+    // left-then-up folds the snake back through its own neck.
+    const opposite = { up: "down", down: "up", left: "right", right: "left" };
+    if (state.turned || opposite[key] === state.dir || key === state.dir) return state;
+    state.dir = key;
+    state.turned = true;
+    return state;
+  },
+
+  status(state) {
+    return state.over
+      ? `${state.over} · ${state.score} points`
+      : `score ${state.score} · length ${state.snake.length}`;
+  },
+
+  render(state) {
+    const rows = [];
+    for (let y = 0; y < HEIGHT; y++) {
+      let row = "";
+      for (let x = 0; x < WIDTH; x++) {
+        const cell = [x, y];
+        if (same(state.snake[0], cell)) row += HEAD;
+        else if (state.snake.some((s) => same(s, cell))) row += BODY;
+        else if (state.food && same(state.food, cell)) row += FOOD;
+        else row += EMPTY;
+      }
+      rows.push(row);
+    }
+    return rows;
+  },
+};

package/src/games-tetris.mjs

@@ -0,0 +1,221 @@
+// Tetris, for the moshcode arcade. Ten wide, twenty deep, seven bricks.
+//
+// Everything here is pure — rotate a shape, ask whether it collides, merge it,
+// clear the full rows — so the whole game can be played in a test with no
+// terminal anywhere near it. See src/games.mjs for the frame it is drawn in.
+import { acid, amber, ash, danger, dim, rgb } from "./ui.mjs";
+
+export const WIDTH = 10;
+export const HEIGHT = 20;
+
+/**
+ * The seven tetrominoes, drawn as square grids so one rotate() handles them
+ * all. Each fills itself with its own letter, which is also its colour key —
+ * merging a piece into the board is then a copy, with no bookkeeping.
+ */
+export const SHAPES = {
+  I: ["....", "IIII", "....", "...."],
+  O: ["OO", "OO"],
+  T: [".T.", "TTT", "..."],
+  S: [".SS", "SS.", "..."],
+  Z: ["ZZ.", ".ZZ", "..."],
+  J: ["J..", "JJJ", "..."],
+  L: ["..L", "LLL", "..."],
+};
+
+const COLORS = {
+  I: rgb(90, 220, 250),
+  O: amber,
+  T: rgb(190, 130, 255),
+  S: acid,
+  Z: danger,
+  J: rgb(90, 140, 255),
+  L: rgb(255, 150, 60),
+};
+
+const BAG = Object.keys(SHAPES);
+const BLOCK = "██";
+const EMPTY = dim("· ");
+const GHOST = ash("░░");
+
+/** Clockwise quarter turn of a square shape. */
+export function rotate(shape) {
+  return shape.map((_, i) => shape.map((row) => row[i]).reverse().join(""));
+}
+
+export const emptyBoard = () =>
+  Array.from({ length: HEIGHT }, () => Array.from({ length: WIDTH }, () => null));
+
+/** Would this shape overlap a wall, the floor, or something already stacked? */
+export function collides(board, shape, px, py) {
+  for (let y = 0; y < shape.length; y++) {
+    for (let x = 0; x < shape[y].length; x++) {
+      if (shape[y][x] === ".") continue;
+      const bx = px + x;
+      const by = py + y;
+      if (bx < 0 || bx >= WIDTH || by >= HEIGHT) return true;
+      // Above the ceiling is legal — that is where a piece spawns from.
+      if (by >= 0 && board[by][bx]) return true;
+    }
+  }
+  return false;
+}
+
+/** Stamp a piece into the board. Mutates, and is only ever called on a lock. */
+export function merge(board, piece) {
+  for (let y = 0; y < piece.shape.length; y++) {
+    for (let x = 0; x < piece.shape[y].length; x++) {
+      const cell = piece.shape[y][x];
+      if (cell === ".") continue;
+      const by = piece.y + y;
+      if (by >= 0) board[by][piece.x + x] = cell;
+    }
+  }
+  return board;
+}
+
+/** Drop out every full row, refill from the top. Returns how many went. */
+export function clearLines(board) {
+  const kept = board.filter((row) => row.some((cell) => !cell));
+  const cleared = HEIGHT - kept.length;
+  while (kept.length < HEIGHT) kept.unshift(Array.from({ length: WIDTH }, () => null));
+  for (let y = 0; y < HEIGHT; y++) board[y] = kept[y];
+  return cleared;
+}
+
+const pick = (rng) => BAG[Math.floor(rng() * BAG.length) % BAG.length];
+
+function spawn(state, key) {
+  const shape = SHAPES[key];
+  const piece = { key, shape, x: Math.floor((WIDTH - shape[0].length) / 2), y: 0 };
+  if (collides(state.board, piece.shape, piece.x, piece.y)) state.over = "stacked out";
+  state.piece = piece;
+  return state;
+}
+
+export const level = (state) => 1 + Math.floor(state.lines / 10);
+
+/** Where the piece would land if you let go of it — drawn as the ghost. */
+export function landing(state) {
+  let y = state.piece.y;
+  while (!collides(state.board, state.piece.shape, state.piece.x, y + 1)) y++;
+  return y;
+}
+
+function lock(state) {
+  merge(state.board, state.piece);
+  const cleared = clearLines(state.board);
+  if (cleared) {
+    state.lines += cleared;
+    state.score += [0, 100, 300, 500, 800][cleared] * level(state);
+  }
+  const key = state.next;
+  state.next = pick(state.rng);
+  return spawn(state, key);
+}
+
+export const TETRIS = {
+  key: "tetris",
+  aliases: ["blocks", "bricks"],
+  title: "TETRIS",
+  blurb: "stack the bricks, clear the lines, outrun gravity",
+  keys: "← → move · ↑ rotate · ↓ drop one · space slam · q quit",
+  // Gravity is the level, and the level is the lines you have cleared.
+  tickMs: (state) => Math.max(90, 700 - (level(state) - 1) * 65),
+
+  create({ rng = Math.random } = {}) {
+    const state = { board: emptyBoard(), score: 0, lines: 0, over: null, rng, next: pick(rng) };
+    return spawn(state, pick(rng));
+  },
+
+  tick(state) {
+    if (collides(state.board, state.piece.shape, state.piece.x, state.piece.y + 1)) return lock(state);
+    state.piece.y++;
+    return state;
+  },
+
+  onKey(state, key) {
+    const p = state.piece;
+    if (key === "left" && !collides(state.board, p.shape, p.x - 1, p.y)) p.x--;
+    else if (key === "right" && !collides(state.board, p.shape, p.x + 1, p.y)) p.x++;
+    else if (key === "down") return TETRIS.tick(state);
+    else if (key === "up" || key === "x") {
+      const turned = rotate(p.shape);
+      // Wall kicks, the simple kind: if the turn doesn't fit, shove it a column
+      // or two off the wall before giving up. Without this an I-piece can never
+      // stand up in the left gutter.
+      for (const dx of [0, -1, 1, -2, 2]) {
+        if (!collides(state.board, turned, p.x + dx, p.y)) {
+          p.shape = turned;
+          p.x += dx;
+          break;
+        }
+      }
+    } else if (key === "space") {
+      const drop = landing(state);
+      state.score += (drop - p.y) * 2;
+      p.y = drop;
+      return lock(state);
+    }
+    return state;
+  },
+
+  status(state) {
+    return state.over
+      ? `${state.over} · score ${state.score}`
+      : `score ${state.score} · lines ${state.lines}`;
+  },
+
+  render(state) {
+    const view = state.board.map((row) => row.slice());
+    const p = state.piece;
+    if (!state.over) {
+      const gy = landing(state);
+      for (let y = 0; y < p.shape.length; y++) {
+        for (let x = 0; x < p.shape[y].length; x++) {
+          if (p.shape[y][x] === ".") continue;
+          if (gy + y >= 0 && gy + y < HEIGHT) view[gy + y][p.x + x] = "ghost";
+        }
+      }
+    }
+    for (let y = 0; y < p.shape.length; y++) {
+      for (let x = 0; x < p.shape[y].length; x++) {
+        if (p.shape[y][x] === ".") continue;
+        if (p.y + y >= 0 && p.y + y < HEIGHT) view[p.y + y][p.x + x] = p.key;
+      }
+    }
+    const gutter = sidePanel(state);
+    return view.map((row, y) => {
+      const well = row.map((cell) => {
+        if (!cell) return EMPTY;
+        if (cell === "ghost") return GHOST;
+        return COLORS[cell](BLOCK);
+      }).join("");
+      return `${well}  ${gutter[y] ?? ""}`;
+    });
+  },
+};
+
+/**
+ * The strip down the right: what is coming, and what level you are on.
+ *
+ * It is also what makes the well look like a tetris cabinet rather than a
+ * column of bricks floating in a frame — the board sets the frame's width, so
+ * without it the box is wider than the game.
+ */
+function sidePanel(state) {
+  const colour = COLORS[state.next];
+  const shape = SHAPES[state.next];
+  const lines = [
+    ash("NEXT"),
+    ...shape.map((row) => row.split("").map((c) => (c === "." ? "  " : colour(BLOCK))).join("")),
+    "",
+    ash(`LVL ${level(state)}`),
+  ];
+  // Padded to a fixed width so a narrow piece cannot make the frame breathe in
+  // and out as the bag turns over.
+  return lines.map((line) => {
+    const width = line.replace(/\x1b\[[0-9;]*m/g, "").length;
+    return line + " ".repeat(Math.max(0, 8 - width));
+  });
+}

package/src/games-tictactoe.mjs

@@ -0,0 +1,124 @@
+// Tic-tac-toe against an opponent that cannot be beaten, only held.
+//
+// The AI is a full minimax — the search space is 9! at its very worst, which is
+// nothing — so a draw is a win. It breaks ties at random, which is the only
+// reason two games in a row are not the same game.
+import { acid, ash, bone, danger, dim } from "./ui.mjs";
+
+export const LINES = [
+  [0, 1, 2], [3, 4, 5], [6, 7, 8],
+  [0, 3, 6], [1, 4, 7], [2, 5, 8],
+  [0, 4, 8], [2, 4, 6],
+];
+
+export const emptyBoard = () => Array.from({ length: 9 }, () => null);
+
+/** "X", "O", "draw", or null while there is still a game on. */
+export function winner(board) {
+  for (const [a, b, c] of LINES) {
+    if (board[a] && board[a] === board[b] && board[b] === board[c]) return board[a];
+  }
+  return board.every(Boolean) ? "draw" : null;
+}
+
+const other = (player) => (player === "X" ? "O" : "X");
+
+/**
+ * Minimax with no pruning and no depth limit — 3×3 does not need either.
+ * Depth is in the score so it prefers winning sooner and losing later, which is
+ * what stops it from wandering into a fork it could have blocked.
+ */
+export function score(board, player, me, depth = 0) {
+  const done = winner(board);
+  if (done === me) return 10 - depth;
+  if (done === other(me)) return depth - 10;
+  if (done === "draw") return 0;
+
+  const scores = [];
+  for (let i = 0; i < 9; i++) {
+    if (board[i]) continue;
+    board[i] = player;
+    scores.push(score(board, other(player), me, depth + 1));
+    board[i] = null;
+  }
+  return player === me ? Math.max(...scores) : Math.min(...scores);
+}
+
+/** The best square for `player`, chosen at random among equally good ones. */
+export function bestMove(board, player, rng = Math.random) {
+  let best = -Infinity;
+  let moves = [];
+  for (let i = 0; i < 9; i++) {
+    if (board[i]) continue;
+    board[i] = player;
+    const value = score(board, other(player), player, 1);
+    board[i] = null;
+    if (value > best) { best = value; moves = [i]; }
+    else if (value === best) moves.push(i);
+  }
+  if (!moves.length) return null;
+  return moves[Math.floor(rng() * moves.length) % moves.length];
+}
+
+function finish(state) {
+  const result = winner(state.board);
+  if (!result) return state;
+  state.over = result === "draw" ? "a draw — the only honest result"
+    : result === "X" ? "you win 🤘" : "the machine takes it";
+  return state;
+}
+
+export const TICTACTOE = {
+  key: "tictactoe",
+  // `tic-tac-toe` needs no alias — resolveGame drops dashes before it looks.
+  aliases: ["ttt", "tiktaktoe", "noughts", "xo"],
+  title: "TIC-TAC-TOE",
+  blurb: "three in a row against a perfect opponent",
+  keys: "← ↑ ↓ → move · enter mark · r new game · q quit",
+
+  create() {
+    return { board: emptyBoard(), cursor: 4, over: null, turn: "X" };
+  },
+
+  onKey(state, pressed, { rng = Math.random } = {}) {
+    const x = state.cursor % 3;
+    const y = Math.floor(state.cursor / 3);
+    if (pressed === "left") state.cursor = y * 3 + (x + 2) % 3;
+    else if (pressed === "right") state.cursor = y * 3 + (x + 1) % 3;
+    else if (pressed === "up") state.cursor = ((y + 2) % 3) * 3 + x;
+    else if (pressed === "down") state.cursor = ((y + 1) % 3) * 3 + x;
+    else if (pressed === "enter" || pressed === "space") {
+      if (state.board[state.cursor]) return state;
+      state.board[state.cursor] = "X";
+      if (finish(state).over) return state;
+      const reply = bestMove(state.board, "O", rng);
+      if (reply != null) state.board[reply] = "O";
+      finish(state);
+    }
+    return state;
+  },
+
+  status(state) {
+    return state.over ? state.over : `you ${acid("X")} ${ash("· machine")} ${bone("O")}`;
+  },
+
+  render(state) {
+    const mark = (i) => {
+      const value = state.board[i];
+      const glyph = value === "X" ? acid("X") : value === "O" ? danger("O") : " ";
+      // The cursor is drawn as brackets rather than a highlight so it survives
+      // NO_COLOR, a pipe, and every terminal that lies about its capabilities.
+      return i === state.cursor && !state.over ? ` ${acid("[")}${glyph}${acid("]")} ` : `  ${glyph}  `;
+    };
+    const line = (l, m, r) => ash(`${l}─────${m}─────${m}─────${r}`);
+    const rows = [];
+    rows.push(line("┌", "┬", "┐"));
+    for (let y = 0; y < 3; y++) {
+      rows.push(`${ash("│")}${mark(y * 3)}${ash("│")}${mark(y * 3 + 1)}${ash("│")}${mark(y * 3 + 2)}${ash("│")}`);
+      rows.push(y < 2 ? line("├", "┼", "┤") : line("└", "┴", "┘"));
+    }
+    rows.push("");
+    rows.push(dim(state.over ? "r for another" : "enter to mark the square"));
+    return rows;
+  },
+};