@datamoc/mw_games 0.1.1

package/dist/ui/Label.js

@@ -0,0 +1,41 @@
+import { Text, TextStyle } from 'pixi.js';
+import { theme } from './theme.js';
+/**
+ * A piece of text, styled from the theme.
+ *
+ * This is a thin wrapper over Pixi's `Text`, and its job is to stop every call site from
+ * repeating a style object. Pixi renders text to its own texture, so changing the string
+ * costs a re-render — cheap enough for a label, wasteful for something updated every
+ * frame, where a value that only changes on whole numbers should be guarded.
+ */
+export class Label extends Text {
+    constructor(options = {}) {
+        const opts = typeof options === 'string' ? { text: options } : options;
+        const t = theme();
+        super({
+            text: opts.text ?? '',
+            style: new TextStyle({
+                fontFamily: t.font.family,
+                fontSize: opts.size ?? t.font.size,
+                fontWeight: opts.bold ? 'bold' : 'normal',
+                fill: opts.color ?? t.color.text,
+                lineHeight: (opts.size ?? t.font.size) * t.font.lineHeight,
+                align: opts.align ?? (t.direction === 'rtl' ? 'right' : 'left'),
+                wordWrap: opts.wrapWidth !== undefined,
+                wordWrapWidth: opts.wrapWidth ?? 0,
+                //without this a long unbroken word overflows its window instead of wrapping
+                breakWords: true,
+            }),
+        });
+    }
+    /** changes the colour without rebuilding the style object */
+    setColor(color) {
+        this.style.fill = color;
+    }
+    /** avoids the re-render when the text has not actually changed */
+    setText(value) {
+        if (this.text !== value)
+            this.text = value;
+    }
+}
+//# sourceMappingURL=Label.js.map

package/dist/ui/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sourceRoot":"","sources":["../../src/ui/Label.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAYnC;;;;;;;GAOG;AACH,MAAM,OAAO,KAAM,SAAQ,IAAI;IAC9B,YAAY,OAAO,GAA0B,EAAE;QAC9C,MAAM,IAAI,GAAG,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;QACvE,MAAM,CAAC,GAAG,KAAK,EAAE,CAAC;QAElB,KAAK,CAAC;YACL,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,EAAE;YACrB,KAAK,EAAE,IAAI,SAAS,CAAC;gBACpB,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM;gBACzB,QAAQ,EAAE,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI;gBAClC,UAAU,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ;gBACzC,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI;gBAChC,UAAU,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU;gBAC1D,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;gBAC/D,QAAQ,EAAE,IAAI,CAAC,SAAS,KAAK,SAAS;gBACtC,aAAa,EAAE,IAAI,CAAC,SAAS,IAAI,CAAC;gBAClC,4EAA4E;gBAC5E,UAAU,EAAE,IAAI;aAChB,CAAC;SACF,CAAC,CAAC;IACJ,CAAC;IAED,6DAA6D;IAC7D,QAAQ,CAAC,KAAa;QACrB,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC;IACzB,CAAC;IAED,kEAAkE;IAClE,OAAO,CAAC,KAAa;QACpB,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK;YAAE,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAC5C,CAAC;CACD"}

package/dist/ui/ListView.d.ts

@@ -0,0 +1,67 @@
+import { Container } from 'pixi.js';
+import type { Action } from '../core/Input.ts';
+export interface ListItem {
+    /** what the row reads */
+    text: string;
+    /** a greyed-out row can be looked at but not chosen */
+    disabled?: boolean;
+    /** anything the game wants to get back when the row is chosen */
+    value?: unknown;
+    /** an icon drawn to the left of the text; sized to the row height */
+    icon?: Container;
+}
+export interface ListViewOptions {
+    width: number;
+    height: number;
+    items?: ListItem[];
+    /** row height; defaults to the theme's line height */
+    rowHeight?: number;
+    onSelect?: (item: ListItem, index: number) => void;
+    onHighlight?: (item: ListItem, index: number) => void;
+}
+/**
+ * A scrolling list of rows, driven by the keyboard.
+ *
+ * This is the workhorse of an inventory-heavy game: bags, spell lists, shop stock,
+ * dialogue choices, save slots. It scrolls by keeping the highlight in view rather than by
+ * pixel offset, which is what makes it feel right with a keyboard — the list moves only
+ * when the selection would otherwise leave the window.
+ *
+ * Rows that are `disabled` are skipped when moving, so holding a direction never lands on
+ * something unusable.
+ */
+export declare class ListView extends Container {
+    private items;
+    private rows;
+    private rowsLayer;
+    private highlight;
+    private mask_;
+    private viewWidth;
+    private viewHeight;
+    private rowHeight;
+    private index;
+    private scroll;
+    onSelect: ((item: ListItem, index: number) => void) | null;
+    onHighlight: ((item: ListItem, index: number) => void) | null;
+    constructor(options: ListViewOptions);
+    private drawMask;
+    get visibleRows(): number;
+    get selectedIndex(): number;
+    get selected(): ListItem | null;
+    get length(): number;
+    setItems(items: ListItem[]): void;
+    resize(width: number, height: number): void;
+    /**
+     * Moves the highlight by `delta` rows, skipping disabled ones.
+     *
+     * Wraps at both ends, which is what a short menu wants. Returns false when there is
+     * nothing selectable to move to, so a caller can beep rather than doing nothing.
+     */
+    move(delta: number): boolean;
+    select(index: number): void;
+    confirm(): boolean;
+    /** @returns true when the action was used */
+    handleAction(action: Action): boolean;
+    private refresh;
+}
+//# sourceMappingURL=ListView.d.ts.map

package/dist/ui/ListView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../src/ui/ListView.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAI/C,MAAM,WAAW,QAAQ;IACxB,yBAAyB;IACzB,IAAI,EAAE,MAAM,CAAC;IAEb,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,iEAAiE;IACjE,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,qEAAqE;IACrE,IAAI,CAAC,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IAEnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtD;AAED;;;;;;;;;;GAUG;AACH,qBAAa,QAAS,SAAQ,SAAS;IACtC,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,IAAI,CAAmB;IAE/B,OAAO,CAAC,SAAS,CAAmB;IACpC,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,KAAK,CAAkB;IAE/B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,SAAS,CAAS;IAE1B,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,MAAM,CAAK;IAEnB,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IAC3D,WAAW,EAAE,CAAC,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;IAE9D,YAAY,OAAO,EAAE,eAAe,EAmBnC;IAED,OAAO,CAAC,QAAQ;IAIhB,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IAAI,QAAQ,IAAI,QAAQ,GAAG,IAAI,CAE9B;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,IAAI,CAuChC;IAED,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAK1C;IAED;;;;;OAKG;IACH,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAe3B;IAED,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAK1B;IAED,OAAO,IAAI,OAAO,CAKjB;IAED,6CAA6C;IAC7C,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAWpC;IAED,OAAO,CAAC,OAAO;CAwBf"}

package/dist/ui/ListView.js

@@ -0,0 +1,167 @@
+import { Container, Graphics } from 'pixi.js';
+import { Label } from './Label.js';
+import { theme } from './theme.js';
+/**
+ * A scrolling list of rows, driven by the keyboard.
+ *
+ * This is the workhorse of an inventory-heavy game: bags, spell lists, shop stock,
+ * dialogue choices, save slots. It scrolls by keeping the highlight in view rather than by
+ * pixel offset, which is what makes it feel right with a keyboard — the list moves only
+ * when the selection would otherwise leave the window.
+ *
+ * Rows that are `disabled` are skipped when moving, so holding a direction never lands on
+ * something unusable.
+ */
+export class ListView extends Container {
+    constructor(options) {
+        super();
+        this.items = [];
+        this.rows = [];
+        this.rowsLayer = new Container();
+        this.highlight = new Graphics();
+        this.mask_ = new Graphics();
+        this.index = 0;
+        this.scroll = 0;
+        const t = theme();
+        this.viewWidth = options.width;
+        this.viewHeight = options.height;
+        this.rowHeight = options.rowHeight ?? Math.ceil(t.font.size * t.font.lineHeight) + t.spacing;
+        this.onSelect = options.onSelect ?? null;
+        this.onHighlight = options.onHighlight ?? null;
+        this.addChild(this.highlight);
+        this.addChild(this.rowsLayer);
+        //rows outside the window are clipped rather than drawn over the frame
+        this.addChild(this.mask_);
+        this.rowsLayer.mask = this.mask_;
+        this.drawMask();
+        this.setItems(options.items ?? []);
+    }
+    drawMask() {
+        this.mask_.clear().rect(0, 0, this.viewWidth, this.viewHeight).fill({ color: 0xffffff });
+    }
+    get visibleRows() {
+        return Math.max(1, Math.floor(this.viewHeight / this.rowHeight));
+    }
+    get selectedIndex() {
+        return this.index;
+    }
+    get selected() {
+        return this.items[this.index] ?? null;
+    }
+    get length() {
+        return this.items.length;
+    }
+    setItems(items) {
+        this.items = items;
+        for (const row of this.rows)
+            row.destroy({ children: true });
+        this.rows = [];
+        this.rowsLayer.removeChildren();
+        const t = theme();
+        //in rtl the icon moves to the right edge and the text sits to its left, ending at
+        //the same distance from that edge the ltr text starts from the left one
+        const rtl = t.direction === 'rtl';
+        items.forEach((item, i) => {
+            const row = new Container();
+            row.y = i * this.rowHeight;
+            if (item.icon) {
+                item.icon.x = rtl ? this.viewWidth - t.spacing - this.rowHeight : t.spacing;
+                row.addChild(item.icon);
+            }
+            const label = new Label({
+                text: item.text,
+                color: item.disabled ? t.color.textDim : t.color.text,
+            });
+            const textStart = t.spacing + (item.icon ? this.rowHeight : 0);
+            label.x = rtl ? this.viewWidth - textStart - label.width : textStart;
+            //centre the text in its row rather than sitting it on the top edge
+            label.y = Math.round((this.rowHeight - label.height) / 2);
+            row.addChild(label);
+            this.rows.push(row);
+            this.rowsLayer.addChild(row);
+        });
+        this.index = this.items.findIndex((item) => !item.disabled);
+        if (this.index === -1)
+            this.index = 0;
+        this.scroll = 0;
+        this.refresh();
+    }
+    resize(width, height) {
+        this.viewWidth = width;
+        this.viewHeight = height;
+        this.drawMask();
+        this.refresh();
+    }
+    /**
+     * Moves the highlight by `delta` rows, skipping disabled ones.
+     *
+     * Wraps at both ends, which is what a short menu wants. Returns false when there is
+     * nothing selectable to move to, so a caller can beep rather than doing nothing.
+     */
+    move(delta) {
+        if (this.items.length === 0)
+            return false;
+        let next = this.index;
+        //at most one full pass, so a list of entirely disabled rows terminates
+        for (let step = 0; step < this.items.length; step++) {
+            next = (next + delta + this.items.length) % this.items.length;
+            if (!this.items[next].disabled) {
+                this.index = next;
+                this.refresh();
+                this.onHighlight?.(this.items[next], next);
+                return true;
+            }
+        }
+        return false;
+    }
+    select(index) {
+        if (index < 0 || index >= this.items.length || this.items[index].disabled)
+            return;
+        this.index = index;
+        this.refresh();
+        this.onHighlight?.(this.items[index], index);
+    }
+    confirm() {
+        const item = this.selected;
+        if (!item || item.disabled)
+            return false;
+        this.onSelect?.(item, this.index);
+        return true;
+    }
+    /** @returns true when the action was used */
+    handleAction(action) {
+        switch (action) {
+            case 'up':
+                return this.move(-1);
+            case 'down':
+                return this.move(1);
+            case 'confirm':
+                return this.confirm();
+            default:
+                return false;
+        }
+    }
+    refresh() {
+        //scroll only as far as needed to bring the selection back into view, so the list
+        //stays put while the highlight moves within it
+        const visible = this.visibleRows;
+        if (this.index < this.scroll) {
+            this.scroll = this.index;
+        }
+        else if (this.index >= this.scroll + visible) {
+            this.scroll = this.index - visible + 1;
+        }
+        this.scroll = Math.max(0, Math.min(this.scroll, Math.max(0, this.items.length - visible)));
+        this.rowsLayer.y = -this.scroll * this.rowHeight;
+        const t = theme();
+        if (this.items.length === 0) {
+            this.highlight.clear();
+            return;
+        }
+        this.highlight
+            .clear()
+            .rect(0, (this.index - this.scroll) * this.rowHeight, this.viewWidth, this.rowHeight)
+            .fill({ color: t.color.selection });
+    }
+}
+//# sourceMappingURL=ListView.js.map

package/dist/ui/ListView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListView.js","sourceRoot":"","sources":["../../src/ui/ListView.ts"],"names":[],"mappings":"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"}

package/dist/ui/MessageBox.d.ts

@@ -0,0 +1,66 @@
+import { type Texture } from 'pixi.js';
+import type { Action } from '../core/Input.ts';
+import { Window } from './Window.ts';
+export interface MessagePage {
+    text: string;
+    /** who is speaking, drawn above the text */
+    speaker?: string;
+    /** a portrait drawn to the left of the text */
+    portrait?: Texture;
+}
+export interface Choice {
+    text: string;
+    value?: unknown;
+    disabled?: boolean;
+}
+export interface MessageBoxOptions {
+    width: number;
+    height: number;
+    pages: Array<MessagePage | string>;
+    /** characters revealed per second; 0 shows each page at once */
+    speed?: number;
+    /** offered after the last page */
+    choices?: Choice[];
+    /** called with the chosen value, or undefined when there were no choices */
+    onDone?: (chosen: unknown) => void;
+    /** dim the world behind; false when the scene behind is the point, as in a dialogue */
+    dims?: boolean;
+    /** where the stack puts the box */
+    anchor?: 'center' | 'bottom' | 'top';
+}
+/**
+ * The dialogue box.
+ *
+ * It reveals text a character at a time, advances page by page on `confirm`, and can end
+ * on a set of choices. Pressing `confirm` while text is still appearing completes the page
+ * instead of advancing — the behaviour every player expects, and the reason the reveal is
+ * driven by a character count rather than by animating the label.
+ *
+ * This is the one window that is not closable by `cancel`: a conversation ends when it
+ * ends, or a cutscene would be left half-run.
+ */
+export declare class MessageBox extends Window {
+    private pages;
+    private pageIndex;
+    private speed;
+    private revealed;
+    private body;
+    private speakerLabel;
+    private portrait;
+    private portraitLayer;
+    private prompt;
+    private choices;
+    private choiceList;
+    private onDone;
+    private finished;
+    constructor(options: MessageBoxOptions);
+    private showPage;
+    private get pageComplete();
+    update(dt: number): void;
+    handleAction(action: Action): boolean;
+    private showChoices;
+    /** makes the box taller by `amount`, growing upwards so its foot stays put */
+    private grow;
+    private finish;
+}
+//# sourceMappingURL=MessageBox.d.ts.map

package/dist/ui/MessageBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBox.d.ts","sourceRoot":"","sources":["../../src/ui/MessageBox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,KAAK,OAAO,EAAE,MAAM,SAAS,CAAC;AAC1D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAKrC,MAAM,WAAW,WAAW;IAC3B,IAAI,EAAE,MAAM,CAAC;IAEb,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,MAAM;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC,WAAW,GAAG,MAAM,CAAC,CAAC;IAEnC,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IAEnB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEnC,uFAAuF;IACvF,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,mCAAmC;IACnC,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,KAAK,CAAC;CACrC;AAED;;;;;;;;;;GAUG;AACH,qBAAa,UAAW,SAAQ,MAAM;IACrC,OAAO,CAAC,KAAK,CAAgB;IAC7B,OAAO,CAAC,SAAS,CAAK;IAEtB,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,QAAQ,CAAK;IAErB,OAAO,CAAC,IAAI,CAAQ;IACpB,OAAO,CAAC,YAAY,CAAQ;IAC5B,OAAO,CAAC,QAAQ,CAAuB;IACvC,OAAO,CAAC,aAAa,CAAmB;IACxC,OAAO,CAAC,MAAM,CAAQ;IAEtB,OAAO,CAAC,OAAO,CAAW;IAC1B,OAAO,CAAC,UAAU,CAAyB;IAE3C,OAAO,CAAC,MAAM,CAAqC;IACnD,OAAO,CAAC,QAAQ,CAAS;IAEzB,YAAY,OAAO,EAAE,iBAAiB,EA+BrC;IAED,OAAO,CAAC,QAAQ;IAqChB,OAAO,KAAK,YAAY,GAEvB;IAEQ,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAShC;IAEQ,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CA2B7C;IAED,OAAO,CAAC,WAAW;IAoCnB,8EAA8E;IAC9E,OAAO,CAAC,IAAI;IAOZ,OAAO,CAAC,MAAM;CAMd"}

package/dist/ui/MessageBox.js

@@ -0,0 +1,161 @@
+import { Container, Sprite } from 'pixi.js';
+import { Window } from './Window.js';
+import { Label } from './Label.js';
+import { ListView } from './ListView.js';
+import { theme } from './theme.js';
+/**
+ * The dialogue box.
+ *
+ * It reveals text a character at a time, advances page by page on `confirm`, and can end
+ * on a set of choices. Pressing `confirm` while text is still appearing completes the page
+ * instead of advancing — the behaviour every player expects, and the reason the reveal is
+ * driven by a character count rather than by animating the label.
+ *
+ * This is the one window that is not closable by `cancel`: a conversation ends when it
+ * ends, or a cutscene would be left half-run.
+ */
+export class MessageBox extends Window {
+    constructor(options) {
+        super({
+            width: options.width,
+            height: options.height,
+            modal: true,
+            closable: false,
+            dims: options.dims,
+            anchor: options.anchor ?? 'bottom',
+        });
+        this.pageIndex = 0;
+        this.revealed = 0;
+        this.portrait = null;
+        this.portraitLayer = new Container();
+        this.choiceList = null;
+        this.finished = false;
+        this.pages = options.pages.map((page) => (typeof page === 'string' ? { text: page } : page));
+        this.speed = options.speed ?? 40;
+        this.choices = options.choices ?? [];
+        this.onDone = options.onDone ?? null;
+        const t = theme();
+        this.content.addChild(this.portraitLayer);
+        this.speakerLabel = new Label({ color: t.color.textHighlight, bold: true });
+        this.content.addChild(this.speakerLabel);
+        this.body = new Label({ wrapWidth: this.contentWidth });
+        this.content.addChild(this.body);
+        //a small hint that the box is waiting, rather than leaving the player guessing
+        this.prompt = new Label({ text: '▼', color: t.color.textDim });
+        this.prompt.visible = false;
+        this.content.addChild(this.prompt);
+        this.showPage(0);
+    }
+    showPage(index) {
+        const page = this.pages[index];
+        const t = theme();
+        //in rtl the portrait moves to the right edge, the text runs from the left edge up
+        //to it, and the "waiting" prompt moves to the opposite corner from ltr
+        const rtl = t.direction === 'rtl';
+        this.portraitLayer.removeChildren();
+        this.portrait = null;
+        let textLeft = 0;
+        let textWidth = this.contentWidth;
+        if (page.portrait) {
+            this.portrait = new Sprite(page.portrait);
+            if (rtl)
+                this.portrait.x = this.contentWidth - this.portrait.width;
+            this.portraitLayer.addChild(this.portrait);
+            textWidth = this.contentWidth - this.portrait.width - t.padding;
+            textLeft = rtl ? 0 : this.portrait.width + t.padding;
+        }
+        this.speakerLabel.visible = page.speaker !== undefined;
+        this.speakerLabel.x = textLeft;
+        this.speakerLabel.setText(page.speaker ?? '');
+        this.body.x = textLeft;
+        this.body.y = page.speaker !== undefined ? this.speakerLabel.height + t.spacing : 0;
+        this.body.style.wordWrapWidth = Math.max(16, textWidth);
+        this.revealed = this.speed > 0 ? 0 : page.text.length;
+        this.body.setText(page.text.slice(0, this.revealed));
+        this.prompt.visible = false;
+        this.prompt.x = rtl ? 0 : this.contentWidth - this.prompt.width;
+        this.prompt.y = this.contentHeight - this.prompt.height;
+    }
+    get pageComplete() {
+        return this.revealed >= this.pages[this.pageIndex].text.length;
+    }
+    update(dt) {
+        if (this.finished || this.pageComplete) {
+            //only prompt once there is something to advance to
+            this.prompt.visible = this.pageComplete && !this.choiceList;
+            return;
+        }
+        this.revealed = Math.min(this.pages[this.pageIndex].text.length, this.revealed + this.speed * dt);
+        this.body.setText(this.pages[this.pageIndex].text.slice(0, Math.floor(this.revealed)));
+    }
+    handleAction(action) {
+        //once choices are up they own the input, which is what `delegate` expresses
+        if (this.delegate)
+            return super.handleAction(action);
+        if (action !== 'confirm')
+            return false;
+        //first press completes the page, second advances: skipping the reveal must never
+        //also skip the page, or fast readers lose lines
+        if (!this.pageComplete) {
+            this.revealed = this.pages[this.pageIndex].text.length;
+            this.body.setText(this.pages[this.pageIndex].text);
+            return true;
+        }
+        if (this.pageIndex < this.pages.length - 1) {
+            this.pageIndex++;
+            this.showPage(this.pageIndex);
+            return true;
+        }
+        if (this.choices.length > 0) {
+            this.showChoices();
+            return true;
+        }
+        this.finish(undefined);
+        return true;
+    }
+    showChoices() {
+        const t = theme();
+        const items = this.choices.map((choice) => ({
+            text: choice.text,
+            disabled: choice.disabled,
+            value: choice.value ?? choice.text,
+        }));
+        const rowHeight = Math.ceil(t.font.size * t.font.lineHeight) + t.spacing;
+        const height = items.length * rowHeight;
+        //the choices go under the text, never over it. anchoring them to the bottom of the
+        //box looks tidier until a page wraps to more lines than the author expected, and
+        //then it silently eats the last line of what was said
+        const top = this.body.y + this.body.height + t.padding;
+        //if that does not fit, the box grows rather than clipping or overlapping: a
+        //conversation must never become unreadable because a translation ran long
+        const overflow = top + height - this.contentHeight;
+        if (overflow > 0) {
+            this.grow(overflow);
+        }
+        this.choiceList = new ListView({
+            width: this.contentWidth,
+            height,
+            items,
+            onSelect: (item) => this.finish(item.value),
+        });
+        this.choiceList.y = top;
+        this.content.addChild(this.choiceList);
+        this.delegate = this.choiceList;
+        this.prompt.visible = false;
+    }
+    /** makes the box taller by `amount`, growing upwards so its foot stays put */
+    grow(amount) {
+        const bounds = this.getLocalBounds();
+        this.resize(bounds.width, bounds.height + amount);
+        //a box anchored to the bottom must not slide off it when choices appear
+        this.y = Math.max(0, this.y - amount);
+    }
+    finish(chosen) {
+        if (this.finished)
+            return;
+        this.finished = true;
+        this.onDone?.(chosen);
+        this.close();
+    }
+}
+//# sourceMappingURL=MessageBox.js.map

package/dist/ui/MessageBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBox.js","sourceRoot":"","sources":["../../src/ui/MessageBox.ts"],"names":[],"mappings":"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"}

package/dist/ui/NinePatch.d.ts

@@ -0,0 +1,34 @@
+import { Container, Texture } from 'pixi.js';
+export interface NinePatchOptions {
+    /** how many pixels of the texture are the fixed border, per side */
+    border: number | {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+    };
+}
+/**
+ * A panel that can be resized without distorting its frame.
+ *
+ * The texture is cut into nine: four corners that never stretch, four edges that stretch
+ * along one axis, and a middle that fills. It is what makes one small window texture serve
+ * every window in the game, at any size.
+ *
+ * Pixi has this built in; the wrapper exists so that a `border` can be given as one number,
+ * which is the case for almost every panel, and so that resizing reads the same as it does
+ * on the framework's other widgets.
+ */
+export declare class NinePatch extends Container {
+    private sprite;
+    constructor(texture: Texture, options: NinePatchOptions);
+    /** the border widths, which a window needs to know to inset its contents */
+    get border(): {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+    };
+    resize(width: number, height: number): void;
+}
+//# sourceMappingURL=NinePatch.d.ts.map

package/dist/ui/NinePatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NinePatch.d.ts","sourceRoot":"","sources":["../../src/ui/NinePatch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmB,OAAO,EAAE,MAAM,SAAS,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAChC,oEAAoE;IACpE,MAAM,EAAE,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC9E;AAED;;;;;;;;;;GAUG;AACH,qBAAa,SAAU,SAAQ,SAAS;IACvC,OAAO,CAAC,MAAM,CAAkB;IAEhC,YAAY,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,gBAAgB,EAgBtD;IAED,4EAA4E;IAC5E,IAAI,MAAM,IAAI;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAOzE;IAED,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAM1C;CAID"}

package/dist/ui/NinePatch.js

@@ -0,0 +1,45 @@
+import { Container, NineSliceSprite, Texture } from 'pixi.js';
+/**
+ * A panel that can be resized without distorting its frame.
+ *
+ * The texture is cut into nine: four corners that never stretch, four edges that stretch
+ * along one axis, and a middle that fills. It is what makes one small window texture serve
+ * every window in the game, at any size.
+ *
+ * Pixi has this built in; the wrapper exists so that a `border` can be given as one number,
+ * which is the case for almost every panel, and so that resizing reads the same as it does
+ * on the framework's other widgets.
+ */
+export class NinePatch extends Container {
+    constructor(texture, options) {
+        super();
+        const b = typeof options.border === 'number'
+            ? { left: options.border, top: options.border, right: options.border, bottom: options.border }
+            : options.border;
+        this.sprite = new NineSliceSprite({
+            texture,
+            leftWidth: b.left,
+            topHeight: b.top,
+            rightWidth: b.right,
+            bottomHeight: b.bottom,
+        });
+        this.addChild(this.sprite);
+    }
+    /** the border widths, which a window needs to know to inset its contents */
+    get border() {
+        return {
+            left: this.sprite.leftWidth,
+            top: this.sprite.topHeight,
+            right: this.sprite.rightWidth,
+            bottom: this.sprite.bottomHeight,
+        };
+    }
+    resize(width, height) {
+        //below twice the border the corners would overlap and the frame would fold in on
+        //itself, so the panel refuses to go smaller rather than rendering nonsense
+        const b = this.border;
+        this.sprite.width = Math.max(width, b.left + b.right);
+        this.sprite.height = Math.max(height, b.top + b.bottom);
+    }
+}
+//# sourceMappingURL=NinePatch.js.map

package/dist/ui/NinePatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NinePatch.js","sourceRoot":"","sources":["../../src/ui/NinePatch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAO9D;;;;;;;;;;GAUG;AACH,MAAM,OAAO,SAAU,SAAQ,SAAS;IAGvC,YAAY,OAAgB,EAAE,OAAyB;QACtD,KAAK,EAAE,CAAC;QAER,MAAM,CAAC,GAAG,OAAO,OAAO,CAAC,MAAM,KAAK,QAAQ;YAC3C,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,CAAC,MAAM,EAAE,GAAG,EAAE,OAAO,CAAC,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,MAAM,EAAE;YAC9F,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC;QAElB,IAAI,CAAC,MAAM,GAAG,IAAI,eAAe,CAAC;YACjC,OAAO;YACP,SAAS,EAAE,CAAC,CAAC,IAAI;YACjB,SAAS,EAAE,CAAC,CAAC,GAAG;YAChB,UAAU,EAAE,CAAC,CAAC,KAAK;YACnB,YAAY,EAAE,CAAC,CAAC,MAAM;SACtB,CAAC,CAAC;QAEH,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC5B,CAAC;IAED,4EAA4E;IAC5E,IAAI,MAAM;QACT,OAAO;YACN,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS;YAC3B,GAAG,EAAE,IAAI,CAAC,MAAM,CAAC,SAAS;YAC1B,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU;YAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,YAAY;SAChC,CAAC;IACH,CAAC;IAED,MAAM,CAAC,KAAa,EAAE,MAAc;QACnC,iFAAiF;QACjF,2EAA2E;QAC3E,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;QACtB,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;QACtD,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC;IACzD,CAAC;CAID"}