kasaframe 0.1.1 → 0.1.4

package/themes/pixel-quest/effects.ts

@@ -0,0 +1,491 @@
+import { clamp, rand, type SceneCtx, type Style } from "@kasaframe/core";
+import { dropBurst, type DropBurstState } from "@kasaframe/motion";
+import { type Bitmap, color, drawBitmap, drawWindow, framesOf, pixelCanvas, snap, SPRITES, unitOf } from "./kit.ts";
+
+// 게임기는 그림을 칸 단위로 옮기고 장을 넘겨 움직인다 — 60fps 로 미끄러지면 게임 화면이 아니라 영상이 된다.
+// 위치는 한 게임 픽셀(unitOf)씩, 장 넘김은 초당 12장, 논리 틱은 초당 30번
+const ANIM = 12;
+const TICK = 30;
+
+const tick = (t: number, fps = TICK): number => Math.floor(t * fps + 1e-6) / fps;
+
+/**
+ * 스프라이트 걸음 — from 에서 to 로 한 칸씩 뚝뚝 옮긴다(초당 30틱). hop 이면 그 높이(px)로 한 번 뛰어 넘는다.
+ * at 전엔 from, at+dur 뒤엔 to 에 선다
+ */
+export function pixelMove(t: number, o: { ctx: SceneCtx; from: [number, number]; to: [number, number]; at?: number; dur?: number; hop?: number }): Style {
+  const u = unitOf(o.ctx);
+  const p = clamp(tick(t - (o.at ?? 0)) / Math.max(1e-3, o.dur ?? 0.5));
+  const x = o.from[0] + (o.to[0] - o.from[0]) * p;
+  const y = o.from[1] + (o.to[1] - o.from[1]) * p - (o.hop ?? 0) * 4 * p * (1 - p);
+  return { x: snap(x, u), y: snap(y, u) };
+}
+
+export interface SpriteOpts {
+  ctx: SceneCtx;
+  /** SPRITES 이름(hero·coin·heart·chest·chestOpen·gem·cursor·star·sun·moon)이나 직접 그린 장 */
+  art: string | Bitmap | Bitmap[];
+  x: number;
+  y: number;
+  /** 스프라이트 한 칸이 게임 픽셀 몇 개인가(정수) */
+  scale?: number;
+  fps?: number;
+  /** 이 시각부터 보이고(장이 돈다), until 에 사라진다 */
+  at?: number;
+  until?: number;
+  /** 이 구간에서만 장이 돈다 — 없으면 늘 */
+  animate?: [number, number];
+  flip?: boolean;
+  /** 팔레트 글자 → 색 칸(보석 색 바꾸기 따위) */
+  swap?: Record<string, string>;
+  /** 자리 옮김 — pixelMove 를 그대로 */
+  move?(t: number): Style;
+}
+
+/** 픽셀 스프라이트 한 장 — 장을 초당 12장으로 넘기고, 자리는 한 칸 격자에 붙는다 */
+export function sprite(el: HTMLElement, o: SpriteOpts): (t: number) => void {
+  const u = unitOf(o.ctx) * (o.scale ?? 1);
+  const frames = framesOf(o.art);
+  const w = (frames[0][0]?.length ?? 1) * u;
+  const h = frames[0].length * u;
+  const { c, g } = pixelCanvas(el, o.x, o.y, w, h);
+  g.setTransform(1, 0, 0, 1, 0, 0);
+  let last = -1;
+  return (t) => {
+    // 부르는 쪽이 숨기려면 -Infinity 를 넘긴다
+    const on = Number.isFinite(t) && t >= (o.at ?? -Infinity) && t < (o.until ?? Infinity);
+    c.style.display = on ? "" : "none";
+    if (!on) return;
+    const [a, b] = o.animate ?? [-Infinity, Infinity];
+    const k = Math.floor(clamp(t, a, b) * (o.fps ?? ANIM) + 1e-6);
+    const f = ((k % frames.length) + frames.length) % frames.length;
+    if (f !== last) {
+      g.clearRect(0, 0, w, h);
+      drawBitmap(g, o.ctx, frames[f], 0, 0, u, { flip: o.flip, swap: o.swap });
+      last = f;
+    }
+    const m = o.move?.(t) ?? {};
+    c.style.transform = `translate(${m.x ?? 0}px, ${m.y ?? 0}px)`;
+  };
+}
+
+export interface WindowOpts {
+  ctx: SceneCtx;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  /** 줄마다 한 자씩 찍는다 — 짧은 낱말·주소·숫자 */
+  lines?: string[];
+  at?: number;
+  /** 초당 글자 */
+  cps?: number;
+  /** 창이 위에서부터 열리는 시간 */
+  open?: number;
+  size?: number;
+  font?: "sans" | "display" | "mono";
+  /** 줄마다 색 칸 */
+  tones?: string[];
+  /** 다 찍으면 가운데 아래 ▼ */
+  more?: boolean;
+  until?: number;
+}
+
+/** 대화창 — 검정 면 흰 계단 테두리 창이 위에서부터 열리고, 줄이 한 자씩 찍힌다(드래곤 퀘스트). 다 찍으면 ▼ */
+export function questWindow(el: HTMLElement, o: WindowOpts): (t: number) => void {
+  const { ctx } = o;
+  const u = unitOf(ctx);
+  const x = snap(o.x, u);
+  const y = snap(o.y, u);
+  const w = snap(o.w, u);
+  const h = snap(o.h, u);
+  const box = el.ownerDocument.createElement("div");
+  box.style.cssText = "position:absolute;inset:0;pointer-events:none;";
+  el.append(box);
+  const { g, clear } = pixelCanvas(box, x, y, w, h);
+  const size = o.size ?? 48;
+  const lines = (o.lines ?? []).map((text, i) => {
+    const d = el.ownerDocument.createElement("div");
+    d.style.cssText = `position:absolute;left:${x + u * 6}px;top:${y + u * 5 + i * Math.round(size * 1.35)}px;font:400 ${size}px ${ctx.style.fonts[o.font ?? "sans"]};line-height:1.2;white-space:pre;color:${color(ctx, o.tones?.[i] ?? "ink")};`;
+    box.append(d);
+    return { d, text };
+  });
+  const more = sprite(box, { ctx, art: ["kkkkkkk", ".kwwwk.", "..kwk..", "...k..."], x: x + w / 2 - u * 3.5, y: y + h - u * 6 });
+  const at = o.at ?? 0;
+  const openDur = o.open ?? 0.12;
+  const cps = o.cps ?? 30;
+  const starts: number[] = [];
+  let acc = at + openDur;
+  for (const l of lines) {
+    starts.push(acc);
+    acc += [...l.text].length / cps + 0.05;
+  }
+  const done = acc;
+  let lastOpen = -1;
+  return (t) => {
+    const on = t >= at && t < (o.until ?? Infinity);
+    box.style.display = on ? "" : "none";
+    if (!on) return;
+    // 창은 네 줄에 나눠 끊어 열린다
+    const open = Math.ceil(clamp((t - at) / openDur) * 4) / 4;
+    if (open !== lastOpen) {
+      clear();
+      drawWindow(g, ctx, x, y, w, h, u, { open });
+      lastOpen = open;
+    }
+    lines.forEach((l, i) => {
+      const n = Math.floor(clamp((t - starts[i]) * cps, 0, [...l.text].length) + 1e-6);
+      l.d.textContent = open < 1 ? "" : [...l.text].slice(0, n).join("");
+    });
+    more(o.more && t >= done && Math.floor((t - done) * 4) % 2 === 0 ? t : -Infinity);
+  };
+}
+
+export interface MenuOpts {
+  ctx: SceneCtx;
+  items: string[];
+  x: number;
+  y: number;
+  size?: number;
+  /** 줄 간격(px) */
+  gap?: number;
+  /** 커서가 i 번째 줄로 옮겨 가는 시각들 — stops[i] 에 i 번째 줄을 고른다 */
+  stops: number[];
+  at?: number;
+  font?: "sans" | "display" | "mono";
+}
+
+/** 명령 메뉴 — ▶ 커서가 박마다 다음 줄로 뛰고, 고른 줄이 한 번 뒤집혀 깜빡인 뒤 노랑으로 남는다 */
+export function menuCursor(el: HTMLElement, o: MenuOpts): (t: number) => void {
+  const { ctx } = o;
+  const u = unitOf(ctx);
+  const size = o.size ?? 48;
+  const gap = o.gap ?? Math.round(size * 1.4);
+  const x = snap(o.x, u);
+  const y = snap(o.y, u);
+  const rows = o.items.map((text, i) => {
+    const d = el.ownerDocument.createElement("div");
+    d.textContent = text;
+    d.style.cssText = `position:absolute;left:${x + u * 10}px;top:${y + i * gap}px;font:400 ${size}px ${ctx.style.fonts[o.font ?? "sans"]};line-height:1.2;white-space:pre;padding:0 ${u}px;`;
+    el.append(d);
+    return d;
+  });
+  const cy = (i: number) => y + i * gap + Math.round((size * 1.2 - 7 * u) / 2);
+  let target = 0;
+  const cur = sprite(el, { ctx, art: "cursor", x, y: cy(0), move: (t) => {
+    const i = target;
+    const from = i > 0 ? cy(i - 1) : cy(0);
+    return pixelMove(t, { ctx, from: [0, from - cy(0)], to: [0, cy(i) - cy(0)], at: o.stops[i], dur: 0.07 });
+  } });
+  const at = o.at ?? 0;
+  return (t) => {
+    const on = t >= at;
+    let i = -1;
+    for (let k = 0; k < o.stops.length; k++) if (t >= o.stops[k]) i = k;
+    target = Math.max(0, i);
+    rows.forEach((d, k) => {
+      d.style.display = on ? "" : "none";
+      const picked = k === i;
+      // 고르는 순간 0.1초 뒤집힘(창 색 ↔ 글 색) — 깜빡임 한 번이 「눌렀다」
+      const flash = picked && t - o.stops[k] < 0.1;
+      d.style.background = flash ? color(ctx, "ink") : "transparent";
+      d.style.color = flash ? color(ctx, "surface") : picked ? color(ctx, "accent") : k < i ? color(ctx, "dim") : color(ctx, "ink");
+    });
+    cur(on && i >= 0 ? t : -Infinity);
+  };
+}
+
+export interface CounterOpts {
+  ctx: SceneCtx;
+  x: number;
+  y: number;
+  size?: number;
+  from?: number;
+  to: number;
+  at?: number;
+  dur?: number;
+  /** 숫자 → 글. 없으면 정수 */
+  format?(v: number): string;
+  /** 숫자 앞 아이콘 — coin(비용)·heart(한도)·gem(모델)·none */
+  icon?: "coin" | "heart" | "gem" | "none";
+  tone?: string;
+  /** 아이콘과 숫자 사이 × */
+  times?: boolean;
+  font?: "sans" | "display" | "mono";
+}
+
+/** HUD 카운터 — 아이콘 × 숫자. 숫자는 초당 30틱으로 한 칸씩 올라가거나 내려가고, 도는 동안 코인이 돈다(비용 정산) */
+export function coinCounter(el: HTMLElement, o: CounterOpts): (t: number) => void {
+  const { ctx } = o;
+  const u = unitOf(ctx);
+  const size = o.size ?? 72;
+  const x = snap(o.x, u);
+  const y = snap(o.y, u);
+  const icon = o.icon ?? "coin";
+  const iconScale = Math.max(1, Math.round(size / (12 * u)));
+  const iconW = icon === "none" ? 0 : (icon === "heart" ? 11 : 10) * u * iconScale;
+  const at = o.at ?? 0;
+  const dur = o.dur ?? 0.6;
+  const ico =
+    icon === "none"
+      ? null
+      : sprite(el, { ctx, art: icon, x, y: y + Math.round((size * 1.2 - (icon === "coin" ? 12 : icon === "gem" ? 8 : 10) * u * iconScale) / 2), scale: iconScale, animate: [at, at + dur] });
+  const d = el.ownerDocument.createElement("div");
+  d.style.cssText = `position:absolute;left:${x + iconW + (icon === "none" ? 0 : u * 3)}px;top:${y}px;font:400 ${size}px ${ctx.style.fonts[o.font ?? "display"]};line-height:1.2;white-space:pre;color:${color(ctx, o.tone ?? "ink")};`;
+  el.append(d);
+  const fmt = o.format ?? ((v: number) => String(Math.round(v)));
+  const from = o.from ?? 0;
+  return (t) => {
+    const on = t >= at;
+    d.style.display = on ? "" : "none";
+    ico?.(on ? t : -Infinity);
+    if (!on) return;
+    const p = clamp(tick(t - at) / Math.max(1e-3, dur));
+    d.textContent = `${o.times === false || icon === "none" ? "" : "×"}${fmt(from + (o.to - from) * p)}`;
+  };
+}
+
+export interface GaugeOpts {
+  ctx: SceneCtx;
+  x: number;
+  y: number;
+  /** 칸 수 */
+  max: number;
+  /** [시각, 남은 칸] — 그 시각에 칸이 바뀐다. 바뀌는 칸은 0.25초 깜빡이고 바뀐다 */
+  steps: [number, number][];
+  at?: number;
+  scale?: number;
+  /** hearts: 하트 칸 · bar: 마디 막대(한 칸 = 한 마디) */
+  mode?: "hearts" | "bar";
+  tone?: string;
+}
+
+/** 한도 게이지 — 하트(또는 마디 막대)가 한 칸씩 차고 깎인다. 깎이는 칸은 깜빡인 뒤 빈 칸이 된다 */
+export function heartGauge(el: HTMLElement, o: GaugeOpts): (t: number) => void {
+  const { ctx } = o;
+  const u = unitOf(ctx) * (o.scale ?? 1);
+  const mode = o.mode ?? "hearts";
+  const cw = mode === "hearts" ? 12 * u : 8 * u;
+  const ch = mode === "hearts" ? 10 * u : 6 * u;
+  const W = o.max * cw + (mode === "bar" ? 2 * u : 0);
+  const H = ch + (mode === "bar" ? 2 * u : 0);
+  const { g, clear } = pixelCanvas(el, o.x, o.y, W, H);
+  const at = o.at ?? 0;
+  const empty = (SPRITES.heart as readonly string[]).map((r) => r.replace(/[rw]/g, "d"));
+  let key = "";
+  return (t) => {
+    if (t < at) {
+      if (key !== "off") clear();
+      key = "off";
+      return;
+    }
+    let n = o.steps[0]?.[1] ?? o.max;
+    let prev = n;
+    let since = Infinity;
+    for (const [s, v] of o.steps) {
+      if (t < s) break;
+      prev = n;
+      n = v;
+      since = t - s;
+    }
+    const blink = since < 0.25 && Math.floor(since * ANIM) % 2 === 0;
+    const shown = blink ? prev : n;
+    const k = `${shown}`;
+    if (k === key) return;
+    key = k;
+    clear();
+    for (let i = 0; i < o.max; i++) {
+      const full = i < shown;
+      if (mode === "hearts") {
+        drawBitmap(g, ctx, full ? SPRITES.heart : empty, o.x + i * cw, o.y, u, { swap: o.tone ? { r: o.tone } : undefined });
+      } else {
+        g.fillStyle = color(ctx, "surface");
+        g.fillRect(o.x + i * cw, o.y, cw + 2 * u, H);
+        g.fillStyle = color(ctx, full ? (o.tone ?? "heart") : "raised");
+        g.fillRect(o.x + i * cw + u * 1.5, o.y + u, cw - u, ch);
+      }
+    }
+  };
+}
+
+/** 화면 바꿈 — 검정 타일이 한 장씩 깔려 화면을 덮거나(cover) 걷힌다(reveal). 순서는 대각·줄·소용돌이 */
+export function tileWipe(el: HTMLElement, o: { ctx: SceneCtx; at: number; dur?: number; mode?: "cover" | "reveal"; order?: "diagonal" | "rows" | "spiral"; tile?: number; tone?: string }): (t: number) => void {
+  const { ctx } = o;
+  const u = unitOf(ctx);
+  const s = (o.tile ?? 16) * u;
+  const W = ctx.meta.width;
+  const H = ctx.meta.height;
+  const cols = Math.ceil(W / s);
+  const rows = Math.ceil(H / s);
+  const { c, g, clear } = pixelCanvas(el, 0, 0, W, H);
+  const cells: { x: number; y: number; k: number }[] = [];
+  for (let j = 0; j < rows; j++) for (let i = 0; i < cols; i++) cells.push({ x: i, y: j, k: 0 });
+  const order = o.order ?? "diagonal";
+  if (order === "diagonal") for (const q of cells) q.k = q.x + q.y;
+  else if (order === "rows") for (const q of cells) q.k = q.y * cols + (q.y % 2 ? cols - 1 - q.x : q.x);
+  else {
+    const cx = (cols - 1) / 2;
+    const cy = (rows - 1) / 2;
+    for (const q of cells) q.k = Math.max(Math.abs(q.x - cx), Math.abs(q.y - cy)) * 64 + ((Math.atan2(q.y - cy, q.x - cx) + Math.PI) / (2 * Math.PI)) * 63;
+    // 바깥에서 안으로 감긴다
+    const top = Math.max(...cells.map((q) => q.k));
+    for (const q of cells) q.k = top - q.k;
+  }
+  const kmax = Math.max(...cells.map((q) => q.k)) + 1;
+  const dur = o.dur ?? 0.3;
+  let lastP = -1;
+  return (t) => {
+    const p = clamp(tick(t - o.at) / dur);
+    const cover = (o.mode ?? "cover") === "cover";
+    const amount = cover ? p : 1 - p;
+    const visible = t >= o.at && amount > 0;
+    c.style.display = visible ? "" : "none";
+    if (!visible || amount === lastP) return;
+    lastP = amount;
+    clear();
+    g.fillStyle = color(ctx, o.tone ?? "surface");
+    const lim = amount * kmax;
+    for (const q of cells) if (cover ? q.k < lim : q.k >= kmax - lim) g.fillRect(q.x * s, q.y * s, s, s);
+  };
+}
+
+/**
+ * 드롭 — 레벨 업. 화면 팔레트가 흰색 → 노랑으로 한 번 번쩍이고(빨강 전체 섬광은 쓰지 않는다), 별 열여섯이 여덟 방향으로 칸 단위로 튀어 나간다.
+ * 흔들림은 한 칸 격자에 붙여 돌려준다 — 내용 틀에 건다
+ */
+export function levelUp(el: HTMLElement, o: { ctx: SceneCtx; drop?: number; origin?: [number, number] }): (t: number) => DropBurstState {
+  const { ctx } = o;
+  const u = unitOf(ctx);
+  const W = ctx.meta.width;
+  const H = ctx.meta.height;
+  const flood = el.ownerDocument.createElement("div");
+  flood.style.cssText = "position:absolute;inset:0;pointer-events:none;display:none;";
+  el.append(flood);
+  const { c, g, clear } = pixelCanvas(el, 0, 0, W, H);
+  const [ox, oy] = o.origin ?? [W / 2, H / 2];
+  const sparks = Array.from({ length: 16 }, (_, i) => ({ a: (i / 16) * Math.PI * 2 + rand(`${ctx.id}:lv`, i) * 0.2, v: 0.55 + rand(`${ctx.id}:lv`, i + 40) * 0.45, big: i % 2 === 0 }));
+  const far = Math.hypot(W, H) * 0.55;
+  return (t) => {
+    const s = dropBurst(t, { beats: ctx.beats, drop: o.drop ?? 0, rules: ctx.style.motion, scene: ctx.id, source: "levelUp" });
+    const local = t - ctx.beats.drop(o.drop ?? 0);
+    const tq = tick(local, ANIM);
+    // 화면 전체를 한 색으로 칠하면 어둠 → 흰 화면이 이어 붙는다 — 게임기 팔레트 깜빡임처럼 타일 반만 번갈아 칠한다
+    flood.style.display = local >= 0 && tq < 2 / ANIM ? "" : "none";
+    const a = color(ctx, tq < 1 / ANIM ? "ink" : "coin");
+    const tile = 16 * u;
+    flood.style.background = `repeating-conic-gradient(${a} 0 25%, transparent 0 50%) ${tq < 1 / ANIM ? 0 : tile}px 0 / ${tile * 2}px ${tile * 2}px`;
+    const shake = s.shake;
+    const out: DropBurstState = { ...s, shake: { ...shake, x: snap(shake.x ?? 0, u), y: snap(shake.y ?? 0, u), rotate: 0 }, punch: s.punch };
+    const live = local >= 0 && local < 0.75;
+    c.style.display = live ? "" : "none";
+    if (!live) return out;
+    clear();
+    const p = tick(local, TICK) / 0.75;
+    for (const q of sparks) {
+      const r = far * q.v * (1 - (1 - p) ** 2);
+      const x = snap(ox + Math.cos(q.a) * r, u);
+      const y = snap(oy + Math.sin(q.a) * r, u);
+      drawBitmap(g, ctx, SPRITES.star, x, y, u * (q.big ? 3 : 2));
+    }
+    return out;
+  };
+}
+
+/**
+ * 블록 쌓기 — 그림(칸 지도)이 블록 하나씩 위에서 떨어져 제자리에 앉는다(초당 30틱, 칸 단위). 로고·큰 기호를 칸으로 지을 때.
+ * cells 는 문자열 줄(# 이 블록) 이나 불 배열
+ */
+export function blockBuild(el: HTMLElement, o: { ctx: SceneCtx; cells: readonly (string | readonly boolean[])[]; x: number; y: number; cell: number; at?: number; dur?: number; fall?: number; tone?: string; edge?: string; order?: "rows-up" | "cols" | "scatter" }): (t: number) => void {
+  const { ctx } = o;
+  const u = unitOf(ctx);
+  const cell = Math.max(u, snap(o.cell, u));
+  const blocks: { i: number; j: number; k: number }[] = [];
+  const rowsN = o.cells.length;
+  o.cells.forEach((row, j) => {
+    const arr = typeof row === "string" ? [...row].map((ch) => ch === "#") : row;
+    arr.forEach((on, i) => {
+      if (on) blocks.push({ i, j, k: 0 });
+    });
+  });
+  const order = o.order ?? "rows-up";
+  for (const b of blocks) b.k = order === "rows-up" ? (rowsN - 1 - b.j) * 1000 + b.i : order === "cols" ? b.i * 1000 + (rowsN - 1 - b.j) : rand(`${ctx.id}:blk`, b.i * 977 + b.j);
+  const ranks = [...blocks].sort((a, b) => a.k - b.k);
+  ranks.forEach((b, r) => (b.k = r / Math.max(1, ranks.length - 1)));
+  const cols = Math.max(...o.cells.map((r) => r.length));
+  const fall = o.fall ?? cell * 6;
+  const { g, clear } = pixelCanvas(el, o.x, o.y - fall, cols * cell, rowsN * cell + fall);
+  const at = o.at ?? 0;
+  const dur = o.dur ?? 0.6;
+  const drop = 0.12;
+  const fill = color(ctx, o.tone ?? "ink");
+  const edge = color(ctx, o.edge ?? "surface");
+  let lastT = Number.NaN;
+  return (t) => {
+    const tq = tick(t);
+    if (tq === lastT) return;
+    lastT = tq;
+    clear();
+    for (const b of blocks) {
+      const start = at + b.k * Math.max(0, dur - drop);
+      if (tq < start) continue;
+      const p = clamp((tq - start) / drop);
+      const x = o.x + b.i * cell;
+      const y = snap(o.y + b.j * cell - fall * (1 - p) ** 2, u);
+      g.fillStyle = fill;
+      g.fillRect(x, y, cell, cell);
+      // 떨어지는 동안만 블록 금이 보이고, 앉으면 이웃과 한 면으로 붙는다
+      if (p < 1) {
+        g.fillStyle = edge;
+        g.fillRect(x + cell - u, y, u, cell);
+        g.fillRect(x, y + cell - u, cell, u);
+      }
+    }
+  };
+}
+
+/**
+ * 바탕 — 서 있는 게임 화면. 짙은 파랑 하늘에 아래 땅 타일 줄(벽돌·풀), 원하면 위 HUD 검정 띠. 한 번 그리고 움직이지 않는다 —
+ * 움직임은 용사·코인·창이 진다
+ */
+export function tileField(el: HTMLElement, o: { ctx: SceneCtx; ground?: number; hud?: "top" | "bottom" | "none"; seed?: string }): (t: number) => void {
+  const { ctx } = o;
+  const u = unitOf(ctx);
+  const W = ctx.meta.width;
+  const H = ctx.meta.height;
+  const { g } = pixelCanvas(el, 0, 0, W, H);
+  const rows = o.ground ?? 2;
+  const tile = 16 * u;
+  g.fillStyle = color(ctx, "bg");
+  g.fillRect(0, 0, W, H);
+  // 하늘의 별 몇 개 — 한 칸짜리 점, 서 있다
+  const seed = o.seed ?? `${ctx.id}:field`;
+  g.fillStyle = color(ctx, "dim");
+  for (let i = 0; i < 26; i++) g.fillRect(snap(rand(seed, i) * W, u), snap(rand(seed, i + 100) * (H - rows * tile - tile * 2), u) + tile, u, u);
+  const top = H - rows * tile;
+  for (let j = 0; j < rows; j++) {
+    for (let i = 0; i * tile < W; i++) {
+      const x = i * tile;
+      const y = top + j * tile;
+      if (j === 0) {
+        g.fillStyle = color(ctx, "leaf");
+        g.fillRect(x, y, tile, tile);
+        g.fillStyle = color(ctx, "success");
+        g.fillRect(x, y, tile, u * 3);
+        for (let k = 0; k < 4; k++) g.fillRect(x + (k * 4 + 1) * u, y + u * 3, u * 2, u);
+      } else {
+        g.fillStyle = color(ctx, "brick");
+        g.fillRect(x, y, tile, tile);
+        g.fillStyle = color(ctx, "surface");
+        g.fillRect(x, y, tile, u);
+        g.fillRect(x, y + tile / 2, tile, u);
+        g.fillRect(x + ((j % 2) * tile) / 2, y, u, tile / 2);
+        g.fillRect(x + ((j % 2 ? 0 : 1) * tile) / 2, y + tile / 2, u, tile / 2);
+      }
+    }
+  }
+  if ((o.hud ?? "none") !== "none") {
+    g.fillStyle = color(ctx, "surface");
+    g.fillRect(0, o.hud === "top" ? 0 : H - tile * 1.5, W, tile * 1.5);
+  }
+  return () => {};
+}