@gtanczyk/diorama 0.2.0 → 0.4.0

package/app/src/studio/repair.ts

@@ -19,7 +19,7 @@ export function repairPrompt(job: Job): string {
   if (job.unplayable?.length) {
     const places = job.unplayable.map((u) => `- ${u.place}: ${u.errors.join('; ') || 'see place_status'}`).join('\n');
     return `[Studio] The build "${job.label}" ended with places that are not playable, and its free fixes did not help:\n${places}\n`
-      + 'Repair them as your brief says: place_status and place_view first, then the playbook\'s fix tools in order, at most three fixes a place, '
+      + 'Repair them as your brief says: place_status and place_view first, then the playbook\'s fix tools in order, after three failed fixes of a place take a different path rather than repeating one, '
       + 'and ask me before the last resort. Then tell me in two sentences what you fixed and what is left for me.' + animation;
   }
   const tail = job.tail.slice(-15).map((l) => `  ${l}`).join('\n');

package/app/src/world/design.ts

@@ -35,6 +35,7 @@ ${extra ? `${extra}
 ` : ''}Design ${places} places that tell this idea${fixed ? ', the room included' : ''}. Rules:
 - 3 to 7 things per place, big enough to see and click; no tiny details.
 - Exits are things you can see (door, path, ladder, boat) and every exit has one back.
+- Only when the idea gives the hero a car to drive around in: one place has "kind": "drive", the car itself (its shows: the car at the kerb with the engine running), with one thing, the car (role exit), and an exit through that same thing to every other place it drives to; every one of those places has the car parked in it as a thing (role exit, the same looks) with an exit back to the drive place. The player gets in, picks a destination and gets out there.
 - The world has at least one item to pick up and one npc to talk to.
 - Everything is original: no characters, places or names from existing films, books, games or brands.
 - A place's shows and its props' looks go to a painter whose safety filter refuses single words: calm, plain words (leafless trees, not bare; a swing seat that rests, not hangs on chains; no blood, weapons, graves or bodies).

package/app/src/world/drawings.ts

@@ -1,5 +1,5 @@
-// Children's drawings as the world: photos of drawings on paper, each read by Spark into the hero, an NPC,
-// an item, a prop or a place, kept with the world (drawings/) and used by world, paint, cast and icons.
+// Drawings as the world: photos of drawings on paper (a child's, or a grown-up's sketch), each read by Spark into the
+// hero, an NPC, an item, a prop or a place, kept with the world (drawings/) and used by world, paint, cast and icons.
 import fs from 'node:fs';
 import path from 'node:path';
 import sharp from 'sharp';
@@ -17,6 +17,10 @@ export const Drawn = z.object({
   kind: z.enum(['hero', 'npc', 'player', 'item', 'prop', 'place']),
   key: Slug,
   looks: z.string().min(3),
+  /** Who drew it, as Spark sees it: a grown-up's sketch makes no kids' game and keeps its own medium (absent = a child). */
+  by: z.enum(['child', 'grown-up']).optional(),
+  /** A grown-up's sketch: its medium and hand, as the world's style ("fountain-pen ink hatching, grey watercolour wash"). */
+  medium: z.string().optional(),
 });
 export type Drawn = z.infer<typeof Drawn>;
 
@@ -59,7 +63,24 @@ export function readDrawn(files: WorldFiles): Drawn[] {
   return parsed.success ? parsed.data : [];
 }
 
-/** The drawing a character, item or place was made from, if a child drew it. */
+/** True when every drawing is a grown-up's sketch: then the world is no kids' game and keeps the sketches' own medium. */
+export const grownUpDrawings = (drawn: Drawn[]) => drawn.length > 0 && drawn.every((d) => d.by === 'grown-up');
+
+/** A world for children: said so, or made from drawings and not every one of them a grown-up's sketch. */
+export const kidsWorld = (files: WorldFiles, world: World) => world.audience === 'kids' || (fs.existsSync(files.path('drawings')) && !grownUpDrawings(readDrawn(files)));
+
+/** Whose drawings the painters are shown, by the world's audience. */
+export const drawers = (world: Pick<World, 'audience'>) => world.audience === 'kids'
+  ? { one: "a child's drawing", many: "children's drawings", who: 'the child who drew it', whoAll: 'the children' }
+  : { one: "an artist's sketch", many: "the artist's sketches", who: 'the artist who drew it', whoAll: 'the artist' };
+
+/** The style of a world made from grown-ups' sketches: their own medium and line, finished into a game. */
+export function sketchStyle(drawn: Drawn[]): string {
+  const media = [...new Set(drawn.map((d) => d.medium?.trim()).filter((m): m is string => !!m))];
+  return `the artist's own sketchbook drawings come alive as finished game art: ${media[0] ?? 'confident pen and ink lines with a light wash'}, the same hand, line weight and palette as the sketches, drawn loose but with clear readable shapes, depth and soft light, paper texture showing through the colour`;
+}
+
+/** The drawing a character, item or place was made from, if one was drawn. */
 export function drawingFor(files: WorldFiles, key: string): Buffer | undefined {
   const drawn = readDrawn(files).find((d) => d.key === key);
   return drawn && fs.existsSync(files.path('drawings', drawn.file)) ? fs.readFileSync(files.path('drawings', drawn.file)) : undefined;
@@ -78,21 +99,25 @@ export function readKinds(files: WorldFiles): Record<string, Kind> {
 /** A kids' world looks like this, so a character painted from a drawing before the world exists is the one the game uses. */
 export const KIDS_STYLE = "the children's own drawings come alive: wax crayon and felt-tip texture, solidly coloured, bold simple rounded shapes with thick dark outlines, bright clean colours, soft sunny light, friendly and readable at a glance";
 
-const KIND_TEXT = `- kind: "character" (someone: a person, an animal, a creature), "item" (a small thing to pick up and carry), "prop" (a big thing that stays in a place) or "place" (a whole scene: a landscape, a room, a house with its surroundings)
+const KIND_TEXT = `- by: "child" when a young child drew it (crayon, felt-tip, simple flat shapes) or "grown-up" for a sketch by a teen or an adult (confident pen, pencil, ink, marker, watercolour or digital lines, perspective, hatching, notes)
+- medium: for a grown-up's sketch, its medium and look in a dozen words, as a painter's style ("fountain-pen ink hatching with a grey and ochre watercolour wash on cream paper"); "" for a child's
+- kind: "character" (someone: a person, an animal, a creature), "item" (a small thing to pick up and carry), "prop" (a big thing that stays in a place) or "place" (a whole scene: a landscape, a room, a house with its surroundings)
 - key: a kebab-case English name for it ("green-dragon", "blue-hat", "mushroom-forest")
-- looks: what the child drew, as a description a painter can follow: shape, every colour, clothes, face, what it holds. Describe the drawing kindly as the real thing it shows (a "green dragon with orange wings and a round light-green belly", not "scribbles"). For a character or a thing, only it, not the sun, sky or ground drawn around it. For a place: what it shows front to back.
+- looks: what was drawn, as a description a painter can follow: shape, every colour, clothes, face, what it holds. Describe the drawing kindly as the real thing it shows (a "green dragon with orange wings and a round light-green belly", not "scribbles"). For a character or a thing, only it, not the sun, sky or ground drawn around it. For a place: what it shows front to back.
 Ignore any name written on the paper, the paper itself and the table.`;
 
 /** Spark says what one drawing is, as soon as its photo arrives (no story needed yet). */
 export async function readDrawing(memo: Memo, image: Buffer, file: string, taken: string[] = []): Promise<Drawn> {
-  const prompt = `A child of 5 or 6 drew this picture for a 2D point-and-click adventure game the class is making together. Say what it is in the game:
+  const prompt = `Someone drew this picture for a 2D point-and-click adventure game: a child (often 5 or 6, for a game the class makes together) or a grown-up sketching their own world. Say who drew it and what it is in the game:
 ${KIND_TEXT}${taken.length ? `\nKeys already used by other drawings: ${taken.join(', ')}. Use one of them only when this drawing shows that same thing again.` : ''}
 
-Reply with JSON only: {"kind": "...", "key": "...", "looks": "..."}`;
+Reply with JSON only: {"by": "child | grown-up", "medium": "...", "kind": "...", "key": "...", "looks": "..."}`;
   let ask = prompt;
   for (let attempt = 1; attempt <= 3; attempt++) {
-    const answer = await askSparkJson<{ kind?: string; key?: string; looks?: string }>(memo, { label: `drawing:${file}#${attempt}`, prompt: ask, images: [image], personal: true });
-    const parsed = Drawn.safeParse({ file, kind: answer?.kind === 'character' ? 'npc' : answer?.kind, key: answer?.key, looks: answer?.looks });
+    const answer = await askSparkJson<{ by?: string; medium?: string; kind?: string; key?: string; looks?: string }>(memo, { label: `drawing:${file}#${attempt}`, prompt: ask, images: [image], personal: true });
+    const by = answer?.by === 'grown-up' || answer?.by === 'adult' ? 'grown-up' as const : 'child' as const;
+    const medium = by === 'grown-up' && answer?.medium?.trim() ? answer.medium.trim() : undefined;
+    const parsed = Drawn.safeParse({ file, kind: answer?.kind === 'character' ? 'npc' : answer?.kind, key: answer?.key, looks: answer?.looks, by, ...(medium && { medium }) });
     if (parsed.success) return parsed.data;
     ask = `${prompt}\n\nYour last answer was:\n${JSON.stringify(answer)}\n\nFix: ${parsed.error.issues.map((i) => `${i.path.join('.')}: ${i.message}`).join('; ')}`;
   }
@@ -132,7 +157,7 @@ export function fitPlaces(drawn: Drawn[], places: number): Drawn[] {
   let kept = 0;
   return drawn.map((d) => {
     if (d.kind !== 'place' || ++kept <= places) return d;
-    return { ...d, kind: 'prop', looks: `${d.looks} (a child drew it as a whole place; here it is one big thing in a place: a picture, a model, a view through a window)` };
+    return { ...d, kind: 'prop', looks: `${d.looks} (drawn as a whole place; here it is one big thing in a place: a picture, a model, a view through a window)` };
   });
 }
 
@@ -156,6 +181,7 @@ export function players(files: WorldFiles): Array<{ key: string; looks: string }
 
 /** What the world designer is told: every drawing is in the world, under its key, as drawn. */
 export function drawingsBrief(drawn: Drawn[], style = KIDS_STYLE, chooseHero = false): string {
+  const who = grownUpDrawings(drawn) ? 'The artist sketched' : 'The children drew';
   const once = [...new Map(drawn.map((d) => [d.key, d])).values()];
   const line = (d: Drawn) => chooseHero && (d.kind === 'hero' || d.kind === 'npc')
     ? `- a character, key "${d.key}": ${d.looks} (hero or npc according to the creator's idea and clarifications)` : ({
@@ -166,7 +192,7 @@ export function drawingsBrief(drawn: Drawn[], style = KIDS_STYLE, chooseHero = f
     place: `- a place, key "${d.key}": ${d.looks}`,
     player: '',
   })[d.kind];
-  return `The children drew these, and every one of them must be in the world, under exactly this key, looking as drawn:
+  return `${who} these, and every one of them must be in the world, under exactly this key, looking as drawn:
 ${once.filter((d) => d.kind !== 'player').map(line).join('\n')}
 ${chooseHero ? 'Choose exactly one of these drawn characters as the hero according to the creator\'s idea and answers; the other characters are NPCs. Do not choose the first drawing just because it came first.' : ''}
 The style is exactly: "${style}".`;
@@ -177,17 +203,24 @@ export function drawnIssues(world: World, drawn: Drawn[]): string[] {
   const things = new Map(world.places.flatMap((p) => p.things.map((t) => [t.key, t.role] as const)));
   const places = new Set(world.places.map((p) => p.key));
   return [...new Map(drawn.map((d) => [d.key, d])).values()].flatMap((d) => {
-    if (d.kind === 'hero') return world.hero.key === d.key ? [] : [`the hero's key must be "${d.key}" (a child drew the hero)`];
+    if (d.kind === 'hero') return world.hero.key === d.key ? [] : [`the hero's key must be "${d.key}" (the hero was drawn)`];
     if (d.kind === 'player') return [];
-    if (d.kind === 'place') return places.has(d.key) ? [] : [`a child drew the place "${d.key}": it must be one of the places, with that key`];
+    if (d.kind === 'place') return places.has(d.key) ? [] : [`the place "${d.key}" was drawn: it must be one of the places, with that key`];
     const role = things.get(d.key);
-    if (!role) return [`a child drew "${d.key}": it must be a thing with role "${d.kind}" in one of the places`];
+    if (!role) return [`"${d.key}" was drawn: it must be a thing with role "${d.kind}" in one of the places`];
     // A drawn house or cave may well be the way into the next place.
     if (role === d.kind || (d.kind === 'prop' && role === 'exit')) return [];
     return [`"${d.key}" was drawn as ${d.kind === 'item' ? 'an item' : `a ${d.kind}`}: its role must be "${d.kind}"`];
   });
 }
 
+/** A grown-up's sketch of the whole place: drawn in perspective, it sets the camera Muse paints with, so the
+ * layout starts from it like an approved concept (a child's flat drawing leaves the composition to the layout). */
+export function placeSketch(files: WorldFiles, key: string): Buffer | undefined {
+  const drawn = readDrawn(files).find((d) => d.key === key && d.kind === 'place' && d.by === 'grown-up');
+  return drawn ? drawingFor(files, key) : undefined;
+}
+
 /** The drawings a place's painting follows: the place itself first, then what was drawn of the props and items in it (three at most). */
 export function drawingsIn(files: WorldFiles, place: Place): Array<{ key: string; image: Buffer }> {
   const keys = [place.key, ...place.things.filter((t) => t.role !== 'npc').map((t) => t.key)];

package/app/src/world/schema.ts

@@ -11,6 +11,11 @@ export const Thing = z.object({
 
 export const Place = z.object({
   key: Slug,
+  /**
+   * "drive": the hero rides along a road, seen from the side. The road is the floor, the scenery streams past in
+   * depth bands that loop, the hero sits in the car (unseen) and things are used where they are, without walking.
+   */
+  kind: z.enum(['drive']).optional(),
   shows: z.string().min(10),
   mood: z.string().min(3),
   things: z.array(Thing).min(1).max(10),

package/app/web/living.ts

@@ -402,3 +402,39 @@ export class Clouds {
     ctx.drawImage(canvas, this.box[0] + sx, this.box[1] + sy);
   }
 }
+
+/**
+ * Small things painted falling (code rain, snow, petals): the glyphs cut out of the backdrop fall in columns,
+ * each column at its own pace, wrapping round inside their painted region (a soft mask) so they keep falling.
+ */
+export class Stream {
+  private readonly canvas: HTMLCanvasElement;
+  /** Column width, px: about one glyph, so a letter falls whole. */
+  private static readonly COLUMN = 22;
+
+  constructor(readonly img: HTMLImageElement, readonly region: HTMLImageElement, readonly box: Box, readonly k: number) {
+    this.canvas = canvasOf(box[2] - box[0], box[3] - box[1]);
+  }
+
+  draw(ctx: CanvasRenderingContext2D, t: number, shift: Shift) {
+    const { img, region, canvas } = this;
+    const [w, h] = [canvas.width, canvas.height];
+    const c = canvas.getContext('2d')!;
+    c.globalCompositeOperation = 'source-over';
+    c.clearRect(0, 0, w, h);
+    const cw = Stream.COLUMN;
+    for (let x = 0, i = 0; x < w; x += cw, i++) {
+      const speed = 28 + 46 * rand(i, 31 + this.k);
+      const y = (t * speed + rand(i, 32 + this.k) * h) % h;
+      const sw = Math.min(cw, w - x);
+      c.drawImage(img, x, 0, sw, h, x, y, sw, h);
+      c.drawImage(img, x, 0, sw, h, x, y - h, sw, h);
+    }
+    // Only inside the painted rain, fading at its edges.
+    c.globalCompositeOperation = 'destination-in';
+    c.drawImage(region, 0, 0, w, h);
+    c.globalCompositeOperation = 'source-over';
+    const [sx, sy] = shift(this.box[3]);
+    ctx.drawImage(canvas, this.box[0] + sx, this.box[1] + sy);
+  }
+}

package/app/web/main.ts

@@ -12,6 +12,7 @@ import { CYCLE, pose, sheetCell, type PartName, type Rig } from '../src/play/rig
 import { actions, activeChanges, apply, hiddenThings, hintFor, holds, lockOn, pickDialogue, pickInteraction, speakerOf, startState, useFor, type Action, type State } from '../src/story/engine.ts';
 import type { Story } from '../src/story/schema.ts';
 import type { Place as PlaceSpec, World } from '../src/world/schema.ts';
+import { CAR } from '../src/play/car.ts';
 import { Mixer, type Listened } from './audio.ts';
 import { PLAYER_COLOURS, readEachPad, readPads, Turns, type PadButton, type PadFrame } from './pad.ts';
 import { Answers, Bag, displayName, fitHud, showEnding, type ItemLook } from './ui.ts';
@@ -20,7 +21,7 @@ import { spokenLine, type SoundData } from '../src/play/sound.ts';
 import type { Figure3D, ModelInfo } from './hero3d.ts';
 import type { Weather } from '../src/play/weather.ts';
 import { WeatherFx } from './weather.ts';
-import { Clouds, Critter, drawSwell, Fall, Surf } from './living.ts';
+import { Clouds, Critter, drawSwell, Fall, Stream, Surf } from './living.ts';
 import { stormOf } from '../src/play/living.ts';
 import type { Reactions } from '../src/play/reactions.ts';
 import { ReactionFx } from './reactions.ts';
@@ -76,6 +77,7 @@ type Figure = { img: HTMLImageElement; face?: PaintedFace; faceInfo?: FaceDefini
 const FLOATS = /\b(boat|rowboat|dinghy|skiff|canoe|kayak|raft|ship|barge|punt|gondola|sampan|junk|ferry|trawler|yacht|sailboat)s?\b/i;
 
 /** canvas: the card as the place looks now (story changes on it); base: as painted, whose alpha is the card's shape. */
+
 type Cut = { occ: Occluder; canvas: HTMLCanvasElement; base: HTMLCanvasElement; x0: number; y0: number; y: number };
 
 type Place = {
@@ -103,6 +105,8 @@ type Place = {
   surf?: Surf;
   /** Painted waterfalls pouring, painted animals swimming and flying, cloud bands drifting (see living.ts). */
   falls?: Fall[];
+  /** Small things painted falling (code rain, snow, petals), column by column (see living.ts). */
+  streams?: Stream[];
   critters?: Critter[];
   clouds?: Clouds;
   far?: { sky?: HTMLImageElement; flats: Array<{ img: HTMLImageElement; box: [number, number, number, number]; d: number }> };
@@ -492,12 +496,16 @@ class Game {
   }
 
   /** The waterfalls, animals and cloud bands a place's layers set moving. */
-  private async living(layers: Layers): Promise<Pick<Place, 'falls' | 'critters' | 'clouds'>> {
+  private async living(layers: Layers): Promise<Pick<Place, 'falls' | 'streams' | 'critters' | 'clouds'>> {
     const img = (p: string) => loadImage(files(p)).catch(() => undefined);
     const falls = (await Promise.all((layers.falls ?? []).map(async (f) => {
       const i = await img(f.file);
       return i && new Fall(i, f.box);
     }))).filter((f): f is Fall => !!f);
+    const streams = (await Promise.all((layers.streams ?? []).map(async (f, k) => {
+      const [i, r] = await Promise.all([img(f.file), img(f.region)]);
+      return i && r && new Stream(i, r, f.box, k);
+    }))).filter((f): f is Stream => !!f);
     const critters = (await Promise.all((layers.critters ?? []).map(async (c, k) => {
       const i = await img(c.file);
       return i && new Critter(i, c.box, c.medium, c.facing, k);
@@ -508,7 +516,7 @@ class Game {
       const [clip, keep, ...bands] = await Promise.all([img(cl.clip), cl.keep ? img(cl.keep) : Promise.resolve(undefined), ...cl.bands.map((b) => img(b.file))]);
       if (clip && bands.every(Boolean)) clouds = new Clouds(cl.bands.map((b, i) => ({ img: bands[i]!, box: b.box, speed: b.speed })), clip, keep, cl.box);
     }
-    return { falls, critters, clouds };
+    return { falls, streams, critters, clouds };
   }
 
   /** A place, loaded once: a second ask while it loads (the preload, an NPC's walk) waits on the same files. */
@@ -664,7 +672,10 @@ class Game {
     [this.hero.x, this.hero.y] = arrive ?? place.g.start;
     // Coming over a bridge or up the steps, the hero walks in from the exit's far end (by the frame's edge) to
     // where one stands at it, instead of popping up in the middle of the place.
-    const edge = back && arrive ? this.exitEdge(back.via) : undefined;
+    const edge = back && arrive && place.spec.kind !== 'drive' ? this.exitEdge(back.via) : undefined;
+    // In a drive the hero is painted at the wheel (the car's card): unseen as a figure, they speak from the car.
+    const car = place.spec.kind === 'drive' ? this.carOf(place) : undefined;
+    if (car) [this.hero.x, this.hero.y] = [(car.occ.box[0] + car.occ.box[2]) / 2 - (car.occ.box[2] - car.occ.box[0]) * 0.15, car.occ.box[1] + (car.occ.box[3] - car.occ.box[1]) * 0.45];
     if (edge) {
       [this.hero.x, this.hero.y] = edge;
       this.hero.path = this.place.grid.route(edge, arrive!);
@@ -838,12 +849,16 @@ class Game {
     try {
       const placeKey = this.place.key;
       const [sx, sy] = this.approach(hot);
-      if (!(await this.walkTo(sx, sy)) && Math.hypot(this.hero.x - sx, this.hero.y - sy) > this.place.g.cell * 2) return;
+      // In a drive things are used from the car, where they are.
+      if (this.place.spec.kind !== 'drive' && !(await this.walkTo(sx, sy)) && Math.hypot(this.hero.x - sx, this.hero.y - sy) > this.place.g.cell * 2) return;
       if (this.place.key !== placeKey) return;
       const [x0, , x1] = hot.thing.box;
-      this.hero.facing = (hot.npc?.body.x ?? (x0 + x1) / 2) >= this.hero.x ? 1 : -1;
-      // Three-quarter towards it, the way a painted figure talks to someone.
-      this.hero.yaw = this.hero.facing * Math.PI / 3;
+      // In a drive the hero keeps their eyes on the road.
+      if (this.place.spec.kind !== 'drive') {
+        this.hero.facing = (hot.npc?.body.x ?? (x0 + x1) / 2) >= this.hero.x ? 1 : -1;
+        // Three-quarter towards it, the way a painted figure talks to someone.
+        this.hero.yaw = this.hero.facing * Math.PI / 3;
+      }
       this.emit('use', { thing: key, verb });
       document.body.classList.add('played');
       await this.act(this.actionFor(key, hot, verb));
@@ -885,6 +900,8 @@ class Game {
   /** What a click on a thing means: the exit, the talk, the held item, or the first verb the story answers. */
   private actionFor(key: string, hot: Hot, verb?: Verb): Action {
     if (verb === 'look') return { kind: 'do', thing: key, verb: 'look' };
+    // A car that drives to several places is driven from its board; a click on it looks at it.
+    if (this.place.spec.exits.filter((e) => e.via === key).length > 1) return { kind: 'do', thing: key, verb: 'look' };
     if (this.place.spec.exits.some((e) => e.via === key)) return { kind: 'go', via: key };
     const role = hot.spec?.role ?? hot.thing.role;
     // A person talks: in a conversation when the story has one for them now, else in their own talk lines.
@@ -955,7 +972,7 @@ class Game {
       if (nudge && this.hinted?.key === nudge.thing) this.hinted = { key: nudge.thing, until: this.time + 6 };
       if (after.place !== from) {
         // Out the same way: along the bridge or down the steps toward the frame's edge before the picture fades.
-        const edge = action.kind === 'go' ? this.exitEdge(action.via) : undefined;
+        const edge = action.kind === 'go' && this.place.spec.kind !== 'drive' ? this.exitEdge(action.via) : undefined;
         if (edge) await Promise.race([this.walkTo(...edge), this.wait(2500)]);
         this.emit('exit', { from, to: after.place });
         await this.fadeOut();
@@ -1274,13 +1291,39 @@ class Game {
   thingAt(x: number, y: number): Hot | undefined {
     const g = this.place.g;
     const gone = this.gone();
+    const [sx0, sy0] = [x, y];
     for (let i = this.drawn.length - 1; i >= 0; i--) {
       const [x0, y0, x1, y1] = this.drawn[i].rect;
       // The rect includes the shadow; trim it and the transparent margin at the sides.
       const inset = (x1 - x0) * 0.12;
-      if (x >= x0 + inset && x <= x1 - inset && y >= y0 && y <= y1 - 4) return this.drawn[i].hot;
+      if (!(x >= x0 + inset && x <= x1 - inset && y >= y0 && y <= y1 - 4)) continue;
+      // A person's rect is wider than the person: where nobody was drawn over a painted thing (a potion at a
+      // scientist's feet), the thing is what is under the pointer.
+      const under = this.drawnOver(sx0, sy0) === false ? this.paintedAt(sx0, sy0, gone) : undefined;
+      return under?.mask ? under : this.drawn[i].hot;
     }
-    const [sx0, sy0] = [x, y];
+    return this.paintedAt(sx0, sy0, gone);
+  }
+
+  /**
+   * Whether anyone was drawn over the frame point in the last frame: the canvas there differs from the place as
+   * drawn without anyone (the depth snapshot). Undefined without a snapshot.
+   */
+  private drawnOver(x: number, y: number): boolean | undefined {
+    if (!this.snapped || !this.snap) return undefined;
+    const { width: W, height: H } = this.place.g.frame;
+    const z = this.zoom();
+    const [cx, cy] = [Math.floor(((x - (this.viewX || W / 2)) * z + W / 2) * (canvas.width / W)), Math.floor(((y - (this.viewY || H / 2)) * z + H / 2) * (canvas.height / H))];
+    if (cx < 0 || cy < 0 || cx >= canvas.width || cy >= canvas.height) return undefined;
+    const a = ctx.getImageData(cx, cy, 1, 1).data;
+    const b = this.snap.getContext('2d')!.getImageData(cx, cy, 1, 1).data;
+    return Math.abs(a[0] - b[0]) + Math.abs(a[1] - b[1]) + Math.abs(a[2] - b[2]) > 24;
+  }
+
+  /** The painted thing (not a person) under a frame point, by its own mask where it has one. */
+  private paintedAt(sx0: number, sy0: number, gone: Set<string>): Hot | undefined {
+    const g = this.place.g;
+    let [x, y] = [sx0, sy0];
     for (const hot of this.hots()) {
       if (this.drawn.some((d) => d.hot === hot)) continue;
       if (gone.has(hot.thing.key)) continue;
@@ -1444,6 +1487,12 @@ class Game {
     return this.shift(y);
   }
 
+  /** The car of a drive place: the card named as a car, else the biggest card standing on the road. */
+  private carOf(place: Place): Cut | undefined {
+    const named = (c: Cut) => { const k = c.occ.thing ?? c.occ.key; return `${k} ${place.spec.things.find((t) => t.key === k)?.looks ?? ''}`; };
+    return place.cuts.find((c) => CAR.test(named(c))) ?? [...place.cuts].sort((a, b) => b.canvas.width * b.canvas.height - a.canvas.width * a.canvas.height)[0];
+  }
+
   /** Draws the card's columns [xa, xb) (frame x) in strips, each slid by the floor under it. */
   private drawCard(cut: Cut, xa = cut.x0, xb = cut.x0 + cut.canvas.width, ya = cut.y0, yb = cut.y0 + cut.canvas.height) {
     ctx.save();
@@ -1459,6 +1508,17 @@ class Game {
    * card (its outline, its story change) goes through here, so it moves exactly as the card does.
    */
   private poseCard(cut: Cut) {
+    if (this.place.spec.kind === 'drive' && cut === this.carOf(this.place) && !params.has('still')) {
+      // The engine idles: the body trembles on its springs, harder while it revs to leave.
+      const t = this.time;
+      const rev = this.revving > t ? 3 : 1;
+      const shake = (Math.sin(t * 61) * 0.5 + Math.sin(t * 37 + 1) * 0.35) * rev;
+      const [cx, cy] = [(cut.occ.box[0] + cut.occ.box[2]) / 2, cut.occ.box[3]];
+      ctx.translate(cx, cy + shake);
+      ctx.rotate(Math.sin(t * 23) * 0.0012 * rev);
+      ctx.translate(-cx, -cy);
+      return;
+    }
     const float = this.afloat(cut);
     if (float && !params.has('still')) {
       const t = this.time + (hashSeed(cut.occ.key) % 1000) / 160;
@@ -1907,7 +1967,9 @@ class Game {
     const gone = this.gone();
     this.recut();
     const npcs = this.hots().filter((h) => (h.spec?.role ?? h.thing.role) === 'npc' && !h.mask);
-    const people: Who[] = [...npcs.map((h) => ({ npc: h, y: h.npc?.body.y ?? h.thing.box[3] })), ...[this.hero, ...this.party].map((body) => ({ body, y: body.y }))].sort((a, b) => a.y - b.y);
+    // In a drive the hero is the one painted at the wheel.
+    const riding = this.place.spec.kind === 'drive';
+    const people: Who[] = [...npcs.map((h) => ({ npc: h, y: h.npc?.body.y ?? h.thing.box[3] })), ...(riding ? [] : [this.hero, ...this.party]).map((body) => ({ body, y: body.y }))].sort((a, b) => a.y - b.y);
     const fire = this.fireOf(gone);
     this.climbs.length = 0;
     if (p && backdrop) {
@@ -1963,6 +2025,7 @@ class Game {
       this.place.clouds?.draw(ctx, this.time, this.place.weather?.w.wind ?? 0, (y) => shiftAt(g, p, y));
       this.drawWater(p);
       for (const f of this.place.falls ?? []) f.draw(ctx, this.time, (y) => shiftAt(g, p, y));
+      for (const f of this.place.streams ?? []) f.draw(ctx, this.time, (y) => shiftAt(g, p, y));
       for (const c of this.place.critters ?? []) c.draw(ctx, this.time, (y) => shiftAt(g, p, y));
       this.drawFloats(p);
       this.drawSmoke(p);
@@ -2019,6 +2082,7 @@ class Game {
       this.drawClimbs();
     }
     this.place.glows?.draw(ctx, (y) => this.shift(y));
+    if (this.place.spec.kind === 'drive') this.drawIdle();
     this.place.weather?.drawDrips(ctx, (y) => this.shift(y));
     this.drawFocus();
     // The place as drawn so far, without anyone: what the depth map puts back over a person (occludeDepth).
@@ -2659,6 +2723,108 @@ class Game {
   }
 
   /** Shadows that land on things standing behind their person (a tent wall): drawn over the cards. */
+  /** Until when a drive's engine revs (it shakes harder) before it leaves. */
+  revving = 0;
+  /** The destination board of a drive place, as drawn this frame: each place it leads to and its box. */
+  private board: Array<{ to: string; via: string; box: [number, number, number, number] }> = [];
+  /** The destination under the pointer. */
+  boardHover: string | undefined;
+
+  /** Where a drive place's car leads: every exit through a thing that leads to more than one place. */
+  destinations(): Array<{ to: string; via: string }> {
+    if (this.place?.spec.kind !== 'drive') return [];
+    const exits = this.place.spec.exits;
+    return exits.filter((e) => exits.filter((o) => o.via === e.via).length > 1).map((e) => ({ to: e.to, via: e.via }));
+  }
+
+  destinationAt(x: number, y: number): string | undefined {
+    return this.board.find((b) => x >= b.box[0] && x <= b.box[2] && y >= b.box[1] && y <= b.box[3])?.to;
+  }
+
+  /** The middle of a destination's row on the board, in page pixels (for scripts and recorders). */
+  destinationPoint(to: string): { x: number; y: number } | null {
+    const b = this.board.find((d) => d.to === to);
+    if (!b) return null;
+    const z = this.zoom();
+    const { width: W, height: H } = this.place.g.frame;
+    const [fx, fy] = [((b.box[0] + b.box[2]) / 2 - (this.viewX || W / 2)) * z + W / 2, ((b.box[1] + b.box[3]) / 2 - (this.viewY || H / 2)) * z + H / 2];
+    const r = canvas.getBoundingClientRect();
+    return { x: r.left + (fx * r.width) / W, y: r.top + (fy * r.height) / H };
+  }
+
+  /** Drives off to a destination: the engine revs, the picture fades, the car is parked there and the hero gets out. */
+  async driveTo(to: string) {
+    const d = this.destinations().find((e) => e.to === to);
+    if (!d || this.busy) return;
+    this.busy = true;
+    try {
+      this.emit('use', { thing: d.via, verb: 'go' });
+      this.revving = this.time + 1;
+      await this.wait(800);
+      await this.act({ kind: 'go', via: d.via, to });
+    } finally {
+      this.busy = false;
+    }
+  }
+
+  /** A drive place's engine running (exhaust puffing from behind the car) and its board of destinations. */
+  private drawIdle() {
+    const car = this.carOf(this.place);
+    const t = this.time;
+    if (car && !params.has('still')) {
+      const [x0, y0, x1, y1] = car.occ.box;
+      const [w, h] = [x1 - x0, y1 - y0];
+      const rev = this.revving > t ? 2.2 : 1;
+      ctx.save();
+      for (let i = 0; i < 10; i++) {
+        const age = (t * 0.8 * rev + i / 10) % 1;
+        const r = w * (0.02 + age * 0.08);
+        ctx.fillStyle = `rgba(210,210,215,${(0.32 * (1 - age) * Math.min(1, age * 6)).toFixed(3)})`;
+        ctx.beginPath();
+        ctx.arc(x0 + w * 0.12 - age * w * 0.22 + Math.sin(t * 2 + i) * 4, y1 - h * 0.12 - age * h * 0.35, r, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      ctx.restore();
+    }
+    const where = this.destinations();
+    this.board = [];
+    if (!where.length) return;
+    const W = this.place.g.frame.width;
+    // With ?fill=1 the painting can run past the page's edges: the board sits at the page's own top right corner.
+    const r = canvas.getBoundingClientRect();
+    const [visRight, visTop] = fill ? this.unzoom(((Math.min(innerWidth, r.right) - r.left) / r.width) * W, (Math.max(0, -r.top) / r.height) * this.place.g.frame.height) : [W, 0];
+    const [rowH, bw, x1, top] = [52, 330, Math.min(W, visRight) - 28, Math.max(0, visTop) + 36];
+    const x0 = x1 - bw;
+    ctx.save();
+    ctx.fillStyle = 'rgba(12,10,18,0.78)';
+    ctx.strokeStyle = 'rgba(255,60,170,0.9)';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.roundRect(x0, top, bw, 54 + where.length * rowH, 12);
+    ctx.fill();
+    ctx.stroke();
+    ctx.fillStyle = '#ffd34d';
+    ctx.font = '700 22px system-ui, sans-serif';
+    ctx.textBaseline = 'middle';
+    ctx.fillText('Where to?', x0 + 18, top + 28);
+    where.forEach((d, i) => {
+      const y = top + 54 + i * rowH;
+      const box: [number, number, number, number] = [x0 + 8, y + 3, x1 - 8, y + rowH - 3];
+      this.board.push({ ...d, box });
+      const lit = this.boardHover === d.to;
+      ctx.fillStyle = lit ? 'rgba(255,60,170,0.85)' : 'rgba(255,255,255,0.07)';
+      ctx.beginPath();
+      ctx.roundRect(box[0], box[1], box[2] - box[0], box[3] - box[1], 8);
+      ctx.fill();
+      ctx.fillStyle = lit ? '#fff' : '#e8e4f0';
+      ctx.font = '600 21px system-ui, sans-serif';
+      ctx.fillText(displayName(d.to, this.data.world.names), box[0] + 14, (box[1] + box[3]) / 2);
+      ctx.fillStyle = '#5ee6ff';
+      ctx.fillText('›', box[2] - 26, (box[1] + box[3]) / 2);
+    });
+    ctx.restore();
+  }
+
   private climbs: Array<{ canvas: HTMLCanvasElement; box: [number, number, number, number]; dark: number; blur: string; shift: [number, number] }> = [];
   private climbPool: HTMLCanvasElement[] = [];
   private climbMask = document.createElement('canvas');
@@ -3065,7 +3231,9 @@ class Game {
       const y0 = Math.max(top, cut.y0);
       const y1 = Math.min(bottom, cut.y0 + cut.canvas.height);
       if (y1 <= y0) continue;
-      for (const [a, b] of hiddenRuns(cut.occ, left, right, feetY, support)) {
+      // Where the feet are, as seen from the card: a figure's box need not be centred on them.
+      const feet = (feetX ?? (rect[0] + rect[2]) / 2) - sx;
+      for (const [a, b] of hiddenRuns(cut.occ, left, right, feetY, support, feet)) {
         const xa = Math.max(a, cut.x0);
         const xb = Math.min(b, cut.x0 + cut.canvas.width);
         if (xb > xa) this.drawCard(cut, xa, xb, y0, y1);
@@ -3089,9 +3257,12 @@ class Game {
     const width = Math.max(...lines.map((l) => ctx.measureText(l).width)) + 40;
     const height = lines.length * 28 + (name ? 30 : 22);
     const head = (left + right) / 2;
-    const cx = Math.min(canvas.width - width / 2 - 12, Math.max(width / 2 + 12, head));
+    // With ?fill=1 the canvas can run past the page's edges: the bubble stays on the page's own part of it.
+    const r = canvas.getBoundingClientRect();
+    const [visL, visR, visT] = fill && r.width ? [(Math.max(0, -r.left) / r.width) * canvas.width, ((Math.min(innerWidth, r.right) - r.left) / r.width) * canvas.width, (Math.max(0, -r.top) / r.height) * canvas.height] : [0, canvas.width, 0];
+    const cx = Math.min(visR - width / 2 - 12, Math.max(visL + width / 2 + 12, head));
     const tail = 22;
-    const y = Math.max(name ? 24 : 10, top - height - tail - 6);
+    const y = Math.max(visT + (name ? 24 : 10), top - height - tail - 6);
     const ink = '#2b2118';
     ctx.lineJoin = 'round';
     ctx.lineWidth = 2.5;
@@ -3369,10 +3540,11 @@ canvas.addEventListener('pointermove', (e) => {
   usePad(false);
   const r = canvas.getBoundingClientRect();
   pointer = { x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height };
-  game.hover = game.thingAt(...toFrame(e));
+  game.boardHover = game.destinationAt(...toFrame(e));
+  game.hover = game.boardHover ? undefined : game.thingAt(...toFrame(e));
   // Off the floor (a wall, the sky, the water) the cursor says no, so nobody clicks blind.
-  const off = !game.hover && !game.place.grid.walkable(...game.floorAt(...toFrame(e)));
-  canvas.style.cursor = hideCursor || game.holding ? 'none' : game.hover ? 'pointer' : off ? 'not-allowed' : 'default';
+  const off = !game.hover && !game.boardHover && !game.place.grid.walkable(...game.floorAt(...toFrame(e)));
+  canvas.style.cursor = hideCursor || game.holding ? 'none' : game.hover || game.boardHover ? 'pointer' : off ? 'not-allowed' : 'default';
   game.bag.point(e.clientX, e.clientY, game.hover?.thing.key.replace(/-/g, ' '));
   document.getElementById('hover')!.textContent = game.hover ? game.hover.thing.key.replace(/-/g, ' ') : '';
 });
@@ -3404,6 +3576,8 @@ canvas.addEventListener('click', (e) => {
   if (e.detail >= 2 && game.hero.path.length) return void (game.hero.run = true);
   game.hero.run = false;
   const [x, y] = toFrame(e);
+  const to = game.destinationAt(x, y);
+  if (to) return void game.driveTo(to);
   const hot = game.thingAt(x, y);
   if (hot) void game.use(hot.thing.key);
   else void game.walkTo(...game.floorAt(x, y));

package/docs/releasing.md

@@ -0,0 +1,22 @@
+# Releasing
+
+`CHANGELOG.md` decides every npm release of `@gtanczyk/diorama`; nobody runs `npm version` by hand.
+
+1. With a change to shipped code (`app/bin`, `app/src`, `app/studio`, `app/web`), add one line under
+   `## Unreleased`, written for someone updating Diorama:
+   - `### Breaking`: a command, flag or world file layout changed incompatibly (minor before 1.0, major after)
+   - `### Added`: something new you can do (minor)
+   - `### Fixed`: something that was wrong now works (patch)
+   - `### Internal`: refactors, tests, tooling; never releases
+2. Push to main. `release-pr.yaml` checks the changelog, cuts the next version on branch `release/next`
+   and opens (or refreshes) the PR **`release: vX.Y.Z`**. Later pushes with more lines update the same PR.
+3. Merge the PR. `publish.yaml` sees `package.json` change, publishes to npm (trusted publishing, no
+   token) and creates the `vX.Y.Z` tag and a GitHub Release with that section as notes.
+
+Hold a release by leaving the PR open. Set the repository variable `RELEASE_AUTOMERGE=true` to merge it
+by itself, and the secret `RELEASE_TOKEN` (a PAT) if CI must run on the release PR. A version npm already holds is stepped past by patch and never published twice; Actions → Publish to npm → Run workflow
+publishes the version in `package.json` by hand.
+
+Locally: `node app/scripts/release.mjs next` (the next version, or none), `notes 0.2.0`, `check`
+(changelog well formed and agreeing with package.json; `--files a,b` also asks for a changelog line
+when those files ship).