@gtanczyk/diorama 0.0.0-stage → 0.2.0

package/app/web/ui.ts

@@ -0,0 +1,263 @@
+// The play page's HTML layer over the canvas: the courier's bag of painted items, the item held as the
+// cursor, the flight of a picked-up item into the bag, and the conversation's answer cards.
+import { words } from './words.ts';
+
+/** What the page knows about an item: its name and its icon (diorama icons), if it has one. */
+export type ItemLook = { name: string; icon?: string };
+
+const PICKUP_MS = 900;
+
+const el = <K extends keyof HTMLElementTagNameMap>(tag: K, className = '', text = ''): HTMLElementTagNameMap[K] => {
+  const e = document.createElement(tag);
+  if (className) e.className = className;
+  if (text) e.textContent = text;
+  return e;
+};
+
+/** A key like "ornitolog-mila" as a name to show: "Ornitolog Mila". */
+/** A speaker's name: the world's own (world.json names, in its language), else one made from the key. */
+export const displayName = (key: string, names?: Record<string, string>) => names?.[key] ?? key.split('-').map((w) => w[0].toUpperCase() + w.slice(1)).join(' ');
+
+export class Bag {
+  private readonly root = document.getElementById('inventory')!;
+  private readonly slots = el('div', 'slots');
+  private readonly toast = el('div', 'toast');
+  private readonly cursor = el('div', 'held-cursor');
+  private readonly cursorImg = el('img');
+  private readonly cursorLabel = el('div', 'label');
+  /** Items on their way into the bag: their slot stays empty until they land. */
+  private flying = new Set<string>();
+  private shown: string[] = [];
+  private holding: string | undefined;
+
+  /** `pointer` false (recordings, cursor=0): the held item does not follow a pointer. */
+  constructor(private readonly look: (key: string) => ItemLook, private readonly onPick: (key: string) => void, private readonly pointer = true) {
+    const bag = el('div', 'bag');
+    bag.innerHTML = '<svg width="38" height="38" viewBox="0 0 42 42" aria-hidden="true"><path d="M7 14 h28 v20 a3 3 0 0 1 -3 3 h-22 a3 3 0 0 1 -3 -3 z" fill="#5f8f8a" stroke="#2b2118" stroke-width="2.2"/><path d="M7 14 l4 -7 h20 l4 7" fill="#7aa9a2" stroke="#2b2118" stroke-width="2.2" stroke-linejoin="round"/><rect x="17" y="18" width="8" height="8" rx="1.5" fill="#c9774a" stroke="#2b2118" stroke-width="2"/></svg>';
+    this.root.replaceChildren(bag, this.slots);
+    this.cursorImg.alt = '';
+    this.cursor.append(this.cursorImg, this.cursorLabel);
+    this.cursor.hidden = true;
+    // Off the page until the pointer first moves.
+    this.cursor.style.transform = 'translate(-300px, -300px)';
+    document.getElementById('hud')!.append(this.toast);
+    document.body.append(this.cursor);
+  }
+
+  /** Redraws the slots for the items carried now; `holding` is lifted and becomes the cursor. */
+  show(items: string[], holding: string | undefined) {
+    this.shown = items;
+    this.holding = holding;
+    this.root.hidden = items.length === 0;
+    this.slots.replaceChildren(...items.map((key) => {
+      const item = this.look(key);
+      const b = el('button', `slot${key === holding ? ' held' : ''}${this.flying.has(key) ? ' arriving' : ''}`);
+      b.dataset.item = key;
+      b.title = item.name;
+      b.setAttribute('aria-label', item.name);
+      if (item.icon) {
+        const img = el('img');
+        img.src = item.icon;
+        img.alt = '';
+        b.append(img);
+      } else b.append(el('span', 'name', item.name));
+      b.onclick = (e) => {
+        e.stopPropagation();
+        this.onPick(key);
+      };
+      return b;
+    }));
+    const held = holding ? this.look(holding) : undefined;
+    this.cursor.hidden = !held || !this.pointer;
+    if (held) {
+      this.cursorImg.hidden = !held.icon;
+      if (held.icon) this.cursorImg.src = held.icon;
+    }
+  }
+
+  /** Dims the bag while a conversation has the floor. */
+  quiet(on: boolean) {
+    this.root.classList.toggle('quiet', on);
+  }
+
+  /** Moves the held item with the pointer; `over` names what it would be used on. */
+  point(x: number, y: number, over: string | undefined) {
+    if (!this.holding) return;
+    this.cursor.style.transform = `translate(${x}px, ${y}px)`;
+    const name = this.look(this.holding).name;
+    this.cursorLabel.textContent = over ? words.useOn(name, over) : name;
+  }
+
+  /** A new item flies from where it was (a page rect) into its slot, then the slot pops and its name shows. */
+  async pickUp(key: string, from: DOMRect | undefined) {
+    const item = this.look(key);
+    this.flying.add(key);
+    this.show(this.shown.includes(key) ? this.shown : [...this.shown, key], this.holding);
+    const slot = this.slots.querySelector<HTMLElement>(`[data-item="${CSS.escape(key)}"]`);
+    if (slot && from && item.icon) {
+      const to = slot.getBoundingClientRect();
+      const ghost = el('img', 'flying');
+      ghost.src = item.icon;
+      document.body.append(ghost);
+      // The icon is square and the item fills most of it, so it starts as big as the thing it was; an item found in
+      // something big (a fish from the stalls) comes out of its middle at a few slots' size.
+      const size = Math.min(Math.max(from.width, from.height) * 1.12, to.width * 2.5);
+      const start = { x: from.left + from.width / 2 - size / 2, y: from.top + from.height / 2 - size / 2 };
+      const end = { x: to.left + to.width / 2 - size / 2, y: to.top + to.height / 2 - size / 2 };
+      const scale = (to.width * 0.8) / size;
+      Object.assign(ghost.style, { width: `${size}px`, height: `${size}px`, left: `${start.x}px`, top: `${start.y}px` });
+      const lift = { x: (end.x - start.x) * 0.35, y: Math.min(0, end.y - start.y) * 0.3 - 80 };
+      await ghost.animate([
+        { transform: 'translate(0, 0) scale(1)', filter: 'drop-shadow(0 0 0 #ffd37a)' },
+        { transform: 'translate(0, -18px) scale(1.08)', filter: 'drop-shadow(0 0 12px #ffd37a)', offset: 0.18 },
+        { transform: `translate(${lift.x}px, ${lift.y}px) scale(${(1 + scale) / 2})`, filter: 'drop-shadow(0 0 10px #ffd37a)', offset: 0.55 },
+        { transform: `translate(${end.x - start.x}px, ${end.y - start.y}px) scale(${scale})`, filter: 'drop-shadow(0 2px 1px #2b211855)' },
+      ], { duration: PICKUP_MS, easing: 'cubic-bezier(.45,.05,.4,1)' }).finished.catch(() => undefined);
+      ghost.remove();
+    }
+    this.flying.delete(key);
+    this.show(this.shown, this.holding);
+    this.slots.querySelector(`[data-item="${CSS.escape(key)}"]`)?.animate(
+      [{ transform: 'scale(1)' }, { transform: 'scale(1.18)', background: '#ffe7a8' }, { transform: 'scale(1)' }],
+      { duration: 360, easing: 'ease-out' },
+    );
+    this.toast.textContent = `+ ${item.name}`;
+    this.toast.animate([{ opacity: 0, transform: 'translate(-50%, 8px)' }, { opacity: 1, transform: 'translate(-50%, 0)', offset: 0.15 }, { opacity: 1, offset: 0.8 }, { opacity: 0 }], { duration: 1800 });
+  }
+}
+
+/**
+ * The hero's answers as numbered cards in a paper panel at the bottom centre; keys 1 to 9 pick them too, and a gamepad
+ * moves a lit card and picks it.
+ */
+export class Answers {
+  private readonly root = document.getElementById('talk')!;
+  private picks: Array<() => void> = [];
+  private cards: HTMLButtonElement[] = [];
+  private texts = '';
+  /** The card a gamepad would pick; lit only once a pad has been used. */
+  private focus = 0;
+  /** Reads an answer when deliberately navigating with keys or a pad. */
+  hear?: (text: string) => void;
+
+  constructor() {
+    addEventListener('keydown', (e) => {
+      const n = Number(e.key);
+      if (n >= 1 && n <= this.picks.length) this.picks[n - 1]();
+    });
+  }
+
+  show(options: Array<{ text: string; action?: string; pick: () => void }>, hero?: { name: string; portrait?: string }) {
+    this.picks = options.map((o) => o.pick);
+    this.root.hidden = options.length === 0;
+    // The hint line under the picture would run through the panel; it steps aside while answers are up.
+    document.body.classList.toggle('talking', options.length > 0);
+    // New answers start from the first card; the same ones redrawn keep the lit one.
+    const texts = options.map((o) => o.text).join('\n');
+    const fresh = texts !== this.texts;
+    if (fresh) [this.texts, this.focus] = [texts, 0];
+    // A card lit from the keys stays lit through the talk; a new talk starts unlit.
+    if (!options.length) this.root.classList.remove('lit');
+    this.cards = [];
+    if (!options.length) return this.root.replaceChildren();
+    const who = el('div', 'who');
+    if (hero?.portrait) {
+      const face = el('div', 'face');
+      const img = el('img');
+      img.src = hero.portrait;
+      img.alt = '';
+      face.append(img);
+      who.append(face);
+    }
+    if (hero) who.append(el('span', 'tag', hero.name));
+    this.cards = options.map((o, i) => {
+      const b = el('button', 'answer');
+      if (o.action) b.dataset.action = o.action;
+      b.append(el('span', 'key', String(i + 1)), document.createTextNode(o.text));
+      b.onclick = o.pick;
+      return b;
+    });
+    // Walking away ends the talk as Goodbye does; said once under answers that are not just a goodbye.
+    const leave = options.some((o) => o.action !== 'leave') ? [el('div', 'leave')] : [];
+    for (const l of leave) l.append(el('span', 'keys', words.leave), el('span', 'pads', words.padLeave), el('span', 'taps', words.tapLeave));
+    this.root.replaceChildren(who, ...this.cards, ...leave);
+    this.light();
+    // New answers rise in and their cards pulse twice, so a choice waiting for the player is not missed.
+    if (fresh) {
+      this.root.animate([{ opacity: 0, transform: 'translate(-50%, 24px) scale(.96)' }, { opacity: 1, transform: 'translate(-50%, 0) scale(1)' }], { duration: 320, easing: 'cubic-bezier(.2,.9,.3,1.2)' });
+      this.cards.forEach((c, i) => c.animate(
+        [{ boxShadow: '0 0 0 0 #ffd37acc, 0 4px 0 #2b211840' }, { boxShadow: '0 0 0 14px #ffd37a00, 0 4px 0 #2b211840' }],
+        { duration: 900, delay: 250 + i * 90, iterations: 2, easing: 'ease-out' },
+      ));
+    }
+  }
+
+  /** Moves the lit card up (-1) or down (1), round from the last to the first; `keys` lights it without a pad. */
+  move(by: number, keys = false) {
+    if (!this.picks.length) return;
+    if (keys && !this.root.classList.contains('lit')) {
+      // The first press lights the first card, so the player sees where they are before moving on.
+      this.root.classList.add('lit');
+      this.focus = by > 0 ? 0 : this.picks.length - 1;
+      this.light();
+      return void this.hear?.(this.texts.split('\n')[this.focus]);
+    }
+    this.focus = (this.focus + by + this.picks.length) % this.picks.length;
+    this.light();
+    this.hear?.(this.texts.split('\n')[this.focus]);
+  }
+
+  /** Picks the lit card; false when no answers are up. */
+  pick(): boolean {
+    // Enter before any card was lit lights the first one rather than answering unseen.
+    if (!document.body.classList.contains('pad') && !this.root.classList.contains('lit')) return this.move(1, true), !!this.cards.length;
+    const card = this.cards[this.focus];
+    if (!card) return false;
+    card.click();
+    return true;
+  }
+
+  private light() {
+    this.cards.forEach((c, i) => c.classList.toggle('focus', i === this.focus));
+  }
+}
+
+/** The ending as a paper card over the dimmed scene: its title, its text, what the hero carried, and a way to play again. */
+export function showEnding(ending: { title: string; text: string } | undefined, carried: ItemLook[]) {
+  const root = document.getElementById('ending')!;
+  root.hidden = !ending;
+  if (!ending) return root.replaceChildren();
+  const card = el('div', 'card');
+  const icons = el('div', 'carried');
+  for (const item of carried.filter((i) => i.icon)) {
+    const img = el('img');
+    img.src = item.icon!;
+    img.alt = item.name;
+    img.title = item.name;
+    icons.append(img);
+  }
+  const again = el('button', 'again', words.again);
+  again.onclick = () => {
+    // From the start: drop a place= the page may have been opened with.
+    const url = new URL(location.href);
+    url.searchParams.delete('place');
+    location.href = url.toString();
+  };
+  card.append(el('div', 'over', words.end), el('h1', '', ending.title), el('p', '', ending.text), ...(icons.childElementCount ? [icons] : []), again);
+  root.replaceChildren(card);
+  card.animate([{ opacity: 0, transform: 'translateY(16px) scale(.97)' }, { opacity: 1, transform: 'none' }], { duration: 700, easing: 'ease-out' });
+}
+
+/** Lays the HTML layer over the canvas as drawn (letterboxed, scaled): 1 CSS px of it is 1 px of the frame. */
+export function fitHud(canvas: HTMLCanvasElement) {
+  const hud = document.getElementById('hud')!;
+  const r = canvas.getBoundingClientRect();
+  const k = r.width / (Number(canvas.dataset.w) || canvas.width);
+  // A canvas bigger than the page (?fill=1) has the HTML on the part of it the page shows, the bag on the page.
+  const [left, top] = [Math.max(0, r.left), Math.max(0, r.top)];
+  const t = `translate(${left}px, ${top}px) scale(${k})`;
+  if (hud.style.transform !== t) hud.style.transform = t;
+  const [w, h] = [`${(Math.min(innerWidth, r.right) - left) / k}px`, `${(Math.min(innerHeight, r.bottom) - top) / k}px`];
+  if (hud.style.width !== w) hud.style.width = w;
+  if (hud.style.height !== h) hud.style.height = h;
+}

package/app/web/weather.ts

@@ -0,0 +1,306 @@
+// The weather of a place (weather.json): rain or snow over the whole frame, each drop ending on the floor row
+// as far away as it is, some of them ringing on water and puddles or splashing on the floor, and drops that
+// gather on the edges Spark named (eaves, a gutter) and fall to the ground under them. Seeded, so a capture
+// run rains the same every time.
+import { personPx, type Geometry } from '../src/play/geometry.ts';
+import { hashSeed, seeded, type Weather } from '../src/play/weather.ts';
+import type { Pool } from './glows.ts';
+
+type Shift = (y: number) => [number, number];
+type Mark = { x: number; y: number; t: number; size: number; ring: boolean };
+type Bank = { x: number; y: number; w: number; h: number; v: number; a: number };
+type Drip = { x: number; y: number; to: number; t: number; wait: number; falling: boolean };
+
+/** One landing in this many leaves a mark (a ring or a splash); all of them would boil the floor. */
+const MARK_EVERY = 9;
+const RING_LIFE = 0.9;
+const SPLASH_LIFE = 0.22;
+/** A drop gathers on its edge this long before it lets go. */
+const GATHER = 0.4;
+const GRAVITY_M = 9.81;
+
+export class WeatherFx {
+  private readonly rand: () => number;
+  private readonly W: number;
+  private readonly H: number;
+  /** Falling rain or snow: x, y, depth (0 far .. 1 near), and the row each one ends on. */
+  private readonly px: Float32Array;
+  private readonly py: Float32Array;
+  private readonly pz: Float32Array;
+  private readonly end: Float32Array;
+  private readonly marks: Mark[] = [];
+  private readonly drips: Drip[] = [];
+  /** Some pixels of the ripple mask, to ring at between landings. */
+  private readonly ringAt: Uint32Array;
+  private ringDebt = 0;
+  /** Mist: wide soft banks drifting across the frame with the wind, one blurred blob drawn stretched. */
+  private readonly banks: Bank[] = [];
+  private blob?: HTMLCanvasElement;
+  private time = 0;
+
+  constructor(readonly w: Weather, private readonly g: Geometry, private readonly ripples?: Uint8Array, key = '') {
+    this.rand = seeded(hashSeed(key || 'weather'));
+    this.W = g.frame.width;
+    this.H = g.frame.height;
+    const n = w.fall === 'rain' ? Math.round(140 + 560 * w.strength) : w.fall === 'snow' ? Math.round(90 + 320 * w.strength) : 0;
+    this.px = new Float32Array(n);
+    this.py = new Float32Array(n);
+    this.pz = new Float32Array(n);
+    this.end = new Float32Array(n);
+    for (let i = 0; i < n; i++) this.spawn(i, this.rand() * this.H);
+    const at: number[] = [];
+    if (ripples) for (let i = 0; i < ripples.length; i += 7) if (ripples[i]) at.push(i);
+    this.ringAt = Uint32Array.from(at);
+    const fog = w.fog ?? 0;
+    if (fog > 0) {
+      const hor = Math.max(0, Math.min(this.H * 0.7, g.scale.horizonY));
+      const dir = w.wind < 0 ? -1 : 1;
+      for (let k = 0, n = 5 + Math.round(7 * fog); k < n; k++) {
+        const bw = this.W * (0.35 + 0.4 * this.rand());
+        const near = this.rand();
+        // From a little above the horizon down to the near floor; near banks are bigger, faster and thinner.
+        this.banks.push({ x: this.rand() * (this.W + bw) - bw, y: hor - this.H * 0.12 + near * (this.H - hor) * 0.95, w: bw * (0.8 + 0.5 * near), h: bw * (0.16 + 0.08 * this.rand()), v: dir * (10 + 16 * near + 30 * Math.abs(w.wind)), a: fog * (0.35 + 0.25 * this.rand()) * (1 - 0.35 * near) });
+      }
+    }
+    for (const d of w.drips) d.from.forEach(([x, y], k) => this.drips.push({ x, y, to: d.to[k], t: 0, wait: this.rand() * 2.5, falling: false }));
+  }
+
+  private spawn(i: number, y: number) {
+    const z = this.rand() ** 0.7;
+    this.pz[i] = z;
+    // Far drops end high on the floor, near ones at the bottom of the frame.
+    const hor = Math.max(0, this.g.scale.horizonY);
+    this.end[i] = hor + (this.H - hor) * (0.15 + 0.85 * z) + this.rand() * 30;
+    this.py[i] = y - this.H * 0.15;
+    // Starting further upwind, so a slanted fall still covers the frame.
+    this.px[i] = this.rand() * (this.W + Math.abs(this.w.wind) * this.H) - Math.max(0, this.w.wind) * this.H;
+  }
+
+  private walkable(x: number, y: number): boolean {
+    const row = this.g.walk[Math.floor(y / this.g.cell)];
+    return !!row && row[Math.floor(x / this.g.cell)] === '#';
+  }
+
+  private wetAt(x: number, y: number): boolean {
+    if (!this.ripples || x < 0 || y < 0 || x >= this.W || y >= this.H) return false;
+    return !!this.ripples[Math.floor(y) * this.W + Math.floor(x)];
+  }
+
+  /** A ring on water or a puddle, a splash on the floor, nothing elsewhere (a roof, the sky). */
+  private land(x: number, y: number) {
+    // Water past the horizon line still rings, small (the scale's horizon is only where people shrink to nothing).
+    const p = Math.max(24, personPx(this.g, y));
+    if (this.wetAt(x, y)) this.marks.push({ x, y, t: 0, size: p * 0.09, ring: true });
+    else if (y > this.g.scale.horizonY && this.walkable(x, y)) this.marks.push({ x, y, t: 0, size: p * 0.05, ring: false });
+  }
+
+  update(dt: number) {
+    this.time += dt;
+    for (const b of this.banks) {
+      b.x += b.v * dt;
+      if (b.v > 0 && b.x > this.W) b.x = -b.w;
+      if (b.v < 0 && b.x + b.w < 0) b.x = this.W;
+    }
+    const { w } = this;
+    const rain = w.fall === 'rain';
+    for (let i = 0; i < this.px.length; i++) {
+      const z = this.pz[i];
+      if (rain) {
+        const v = (650 + 1150 * z) * dt;
+        this.py[i] += v;
+        this.px[i] += w.wind * v;
+      } else {
+        const v = (28 + 80 * z) * dt;
+        this.py[i] += v;
+        this.px[i] += w.wind * v + Math.sin(this.time * (0.8 + z) + i) * 14 * z * dt;
+      }
+      if (this.py[i] < this.end[i]) continue;
+      if (rain && i % MARK_EVERY === 0) this.land(this.px[i], this.end[i]);
+      this.spawn(i, -this.rand() * 40);
+    }
+    // Between landings, puddles and water still ring now and then, so a small puddle is never still for long.
+    if (rain && this.ringAt.length) {
+      this.ringDebt += dt * (6 + 30 * w.strength) * Math.min(1, this.ringAt.length / 4000);
+      while (this.ringDebt >= 1) {
+        this.ringDebt--;
+        const i = this.ringAt[Math.floor(this.rand() * this.ringAt.length)];
+        this.land(i % this.W, Math.floor(i / this.W));
+      }
+    }
+    for (const m of this.marks) m.t += dt;
+    for (let k = this.marks.length - 1; k >= 0; k--) if (this.marks[k].t > (this.marks[k].ring ? RING_LIFE : SPLASH_LIFE)) this.marks.splice(k, 1);
+    // Heavier rain, faster drips; a dry place drips slowly (a cave, a pipe).
+    const pace = rain ? 0.6 + w.strength : 0.5;
+    for (const d of this.drips) {
+      d.t += dt;
+      if (!d.falling) {
+        if (d.t >= d.wait + GATHER) [d.falling, d.t] = [true, 0];
+        continue;
+      }
+      if (this.fallen(d) < d.to) continue;
+      this.land(d.x, d.to);
+      [d.falling, d.t, d.wait] = [false, 0, (0.5 + this.rand() * 2.2) / pace];
+    }
+  }
+
+  /** Where a falling drip is now: under gravity, at the scale of the place where it lands. */
+  private fallen(d: Drip): number {
+    const g = (GRAVITY_M * personPx(this.g, d.to)) / 1.62;
+    return d.y + 0.5 * g * d.t * d.t;
+  }
+
+  /** Rings and splashes on the ground, each sliding with the floor row it lies on. */
+  drawGround(ctx: CanvasRenderingContext2D, shift: Shift) {
+    if (!this.marks.length) return;
+    ctx.save();
+    ctx.lineWidth = 1;
+    for (const m of this.marks) {
+      const [sx, sy] = shift(m.y);
+      const x = m.x + sx;
+      const y = m.y + sy;
+      if (m.ring) {
+        const p = m.t / RING_LIFE;
+        const r = Math.max(1, m.size * (0.25 + p));
+        ctx.strokeStyle = `rgba(215,228,240,${0.55 * (1 - p)})`;
+        ctx.beginPath();
+        ctx.ellipse(x, y, r, r * 0.38, 0, 0, Math.PI * 2);
+        ctx.stroke();
+        if (r > 4) {
+          ctx.strokeStyle = `rgba(215,228,240,${0.3 * (1 - p)})`;
+          ctx.beginPath();
+          ctx.ellipse(x, y, r * 0.55, r * 0.21, 0, 0, Math.PI * 2);
+          ctx.stroke();
+        }
+      } else {
+        // A small crown: a few droplets thrown up and out, falling back.
+        const p = m.t / SPLASH_LIFE;
+        const s = Math.max(2, m.size);
+        ctx.fillStyle = `rgba(220,232,245,${0.7 * (1 - p)})`;
+        for (let k = -2; k <= 2; k++) {
+          const dx = k * s * 0.35 * (0.4 + p);
+          const dy = -s * (0.9 - Math.abs(k) * 0.2) * Math.sin(Math.PI * p);
+          const r = Math.max(0.6, s * 0.09);
+          ctx.fillRect(x + dx - r / 2, y + dy - r / 2, r, r);
+        }
+      }
+    }
+    ctx.restore();
+  }
+
+  /** Drops gathering on their edges and falling, each sliding with the floor row it falls to. */
+  drawDrips(ctx: CanvasRenderingContext2D, shift: Shift) {
+    if (!this.drips.length) return;
+    ctx.save();
+    for (const d of this.drips) {
+      const [sx, sy] = shift(d.to);
+      const s = Math.max(1.2, personPx(this.g, d.to) * 0.012);
+      if (!d.falling) {
+        if (d.t < d.wait) continue;
+        // Swelling on the edge before it lets go.
+        const grow = (d.t - d.wait) / GATHER;
+        ctx.fillStyle = `rgba(225,235,245,${0.35 + 0.45 * grow})`;
+        ctx.beginPath();
+        ctx.ellipse(d.x + sx, d.y + sy + s * grow * 0.6, s * (0.5 + 0.5 * grow), s * (0.6 + 0.8 * grow), 0, 0, Math.PI * 2);
+        ctx.fill();
+        continue;
+      }
+      const y = Math.min(d.to, this.fallen(d));
+      const v = (GRAVITY_M * personPx(this.g, d.to)) / 1.62 * d.t;
+      const len = Math.min(s * 8, Math.max(s * 1.5, v * 0.025));
+      ctx.strokeStyle = 'rgba(225,235,245,0.75)';
+      ctx.lineWidth = s;
+      ctx.lineCap = 'round';
+      ctx.beginPath();
+      ctx.moveTo(d.x + sx, y + sy - len);
+      ctx.lineTo(d.x + sx, y + sy);
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+
+  /** The rain or snow itself, over everything: three depths, far ones thin, faint and short. Drops falling through
+   * a light's pool (a lamp, a lighthouse beam: GlowFx.pools) catch it and shine in its colour. */
+  drawAir(ctx: CanvasRenderingContext2D, lights: Pool[] = []) {
+    this.drawFog(ctx);
+    const n = this.px.length;
+    if (!n) return;
+    ctx.save();
+    const { wind, strength } = this.w;
+    if (this.w.fall === 'rain') {
+      ctx.lineCap = 'round';
+      const norm = 1 / Math.hypot(wind, 1);
+      for (const [lo, hi] of [[0, 0.4], [0.4, 0.75], [0.75, 1.01]]) {
+        const z = (lo + hi) / 2;
+        ctx.strokeStyle = `rgba(200,215,235,${(0.16 + 0.3 * z) * (0.65 + 0.35 * strength)})`;
+        ctx.lineWidth = 0.7 + 1.1 * z;
+        const len = (10 + 38 * z) * (this.H / 900);
+        ctx.beginPath();
+        for (let i = 0; i < n; i++) {
+          if (this.pz[i] < lo || this.pz[i] >= hi) continue;
+          const x = this.px[i];
+          const y = this.py[i];
+          ctx.moveTo(x - wind * len * norm, y - len * norm);
+          ctx.lineTo(x, y);
+        }
+        ctx.stroke();
+      }
+      if (lights.length) this.drawLitRain(ctx, lights, norm);
+    } else {
+      ctx.fillStyle = 'rgba(245,248,252,0.85)';
+      for (let i = 0; i < n; i++) {
+        const z = this.pz[i];
+        const r = 0.8 + 2.4 * z;
+        ctx.globalAlpha = 0.45 + 0.5 * z;
+        ctx.beginPath();
+        ctx.arc(this.px[i], this.py[i], r, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+    ctx.restore();
+  }
+
+  private drawLitRain(ctx: CanvasRenderingContext2D, lights: Pool[], norm: number) {
+    const { wind } = this.w;
+    ctx.globalCompositeOperation = 'lighter';
+    for (let i = 0; i < this.px.length; i++) {
+      const [x, y, z] = [this.px[i], this.py[i], this.pz[i]];
+      let [best, c] = [0, ''];
+      for (const l of lights) {
+        const d = Math.hypot(x - l.x, y - l.y);
+        if (d >= l.r) continue;
+        const a = l.a * (1 - d / l.r) ** 1.5;
+        if (a > best) [best, c] = [a, l.c];
+      }
+      if (best < 0.04) continue;
+      const len = (10 + 38 * z) * (this.H / 900);
+      ctx.strokeStyle = `rgba(${c},${Math.min(1, best * (0.6 + 0.6 * z))})`;
+      ctx.lineWidth = 1 + 1.4 * z;
+      ctx.beginPath();
+      ctx.moveTo(x - wind * len * norm, y - len * norm);
+      ctx.lineTo(x, y);
+      ctx.stroke();
+    }
+    ctx.globalCompositeOperation = 'source-over';
+  }
+
+  /** Mist over the place: each bank a soft white blob, breathing a little as it drifts. */
+  private drawFog(ctx: CanvasRenderingContext2D) {
+    if (!this.banks.length) return;
+    if (!this.blob) {
+      this.blob = Object.assign(document.createElement('canvas'), { width: 128, height: 128 });
+      const c = this.blob.getContext('2d')!;
+      const grad = c.createRadialGradient(64, 64, 0, 64, 64, 64);
+      grad.addColorStop(0, 'rgba(228,232,238,1)');
+      grad.addColorStop(0.55, 'rgba(228,232,238,0.45)');
+      grad.addColorStop(1, 'rgba(228,232,238,0)');
+      c.fillStyle = grad;
+      c.fillRect(0, 0, 128, 128);
+    }
+    ctx.save();
+    for (const [k, b] of this.banks.entries()) {
+      ctx.globalAlpha = b.a * (0.8 + 0.2 * Math.sin(this.time * 0.3 + k * 1.7));
+      ctx.drawImage(this.blob, b.x, b.y - b.h / 2, b.w, b.h);
+    }
+    ctx.restore();
+  }
+}

package/app/web/words.ts

@@ -0,0 +1,12 @@
+// The few words the game says itself, in the language the world is written in (world.json language).
+import { goodbye } from '../src/story/phrases.ts';
+const WORDS = {
+  English: { useOn: (a: string, b: string) => `Use ${a} on ${b}`, nope: (a: string) => `The ${a} won't help here.`, goodbye: goodbye('English'), end: 'The end', again: 'Play again', player: 'Player', padHint: 'gamepad: stick or d-pad walks · A uses · B puts back or looks · X Y or shoulders pick an item · in a talk up/down and A answer, B says goodbye', leave: '↑↓ and Enter answer · Esc or a click away says goodbye', padLeave: 'B says goodbye', tapLeave: 'Tap away to say goodbye', sound: 'Click once for sound', hintWith: (a: string) => `Maybe my ${a[0].toLowerCase()}${a.slice(1)} can help over there.`, hint: 'Maybe something over there can help.' },
+  Polish: { useOn: (a: string, b: string) => `Użyj: ${a} → ${b}`, nope: (a: string) => `${a[0].toUpperCase()}${a.slice(1)} tu nie pomoże.`, goodbye: goodbye('Polish'), end: 'Koniec', again: 'Zagraj jeszcze raz', player: 'Gracz', padHint: 'pad: gałka lub krzyżak chodzi · A używa · B odkłada lub ogląda · X Y lub boczne wybierają przedmiot · w rozmowie góra/dół i A, B żegna', leave: '↑↓ i Enter odpowiadają · Esc albo klik obok żegna', padLeave: 'B żegna', tapLeave: 'Stuknij obok, żeby się pożegnać', sound: 'Kliknij raz, żeby włączyć dźwięk', hintWith: (a: string) => `Może ${a.toLowerCase()} przyda się tam?`, hint: 'Może tam coś pomoże?' },
+};
+
+export let words = WORDS.English;
+
+export function useLanguage(language?: string) {
+  words = WORDS[language as keyof typeof WORDS] ?? WORDS.English;
+}