@datamoc/mw_games 0.7.6 → 0.7.7

package/dist/two-d/ui/FloatingTextStack.js

@@ -1,32 +1,88 @@
 import { Container } from 'pixi.js';
 import { FloatingText } from './FloatingText.js';
+/** The vertical gap left between two stacked lines - Java's `FloatingText.push()` uses `4`. */
+export const FLOATING_TEXT_STACK_GAP = 4;
 /**
- * How far a newcomer must move up to clear every live pop-up it shares a key *and* an origin
- * with - the classic "three numbers on one creature in one turn" case.
+ * The age a lifted line is forced to, in seconds, from how many lines sit below it - Java's
+ * `LIFESPAN - numBelow / 5f` read as a floor under the age rather than a cap on what is left, the
+ * same rule `FloatingText.ageAtLeast` applies. One second per five lines, a fifth of a second each,
+ * so a burst of numbers cannot become a column that outlives the fight that produced it.
+ */
+export function floatingTextStackLifePenalty(linesBelow) {
+    return Math.max(0, linesBelow) / 5;
+}
+/**
+ * The `y` `older` must sit at to clear `below`, or `older.y` when it already does.
+ *
+ * The direction is the point, and it is why this returns a *position* rather than an offset to add:
+ * Java's `FloatingText.push()` anchors the newcomer on the target and lifts the lines already there
+ * (`above.setPos(above.left(), below.top() - above.height() - 4)`), the opposite of moving the
+ * newcomer out of the way. Pop-ups rise, so the older ones belong above the newer ones - an offset
+ * the caller adds is direction-ambiguous, a position the caller assigns is not.
+ *
+ * Both boxes are anchored at their centre, so a line's top is `y - height / 2`; a line is clear when
+ * its bottom plus the gap no longer reaches the other's top.
  *
  * Exported and pure on purpose: the stacking rule is arithmetic, and this way it is checked as
  * arithmetic rather than through a rendered label (`Label` needs a DOM to measure text).
- * Offsets accumulate by measured height, so a taller line clears the one under it rather than
- * overlapping it by a fixed guess.
+ */
+export function floatingTextStackLift(older, below, gap = FLOATING_TEXT_STACK_GAP) {
+    const belowTop = below.y - below.height / 2;
+    if (older.y + older.height / 2 + gap <= belowTop)
+        return older.y;
+    return belowTop - older.height / 2 - gap;
+}
+/**
+ * The whole stacking policy as arithmetic: which of `live` (oldest first) share the newcomer's key,
+ * where each of them ends up, and what age each is forced to.
+ *
+ * Newest first, stopping at the first line already clear of the one below it: a stack is ordered,
+ * an older line sits above a newer one, so a line that needs no move means nothing above it does
+ * either. That is Java's `break`, and the reason the walk runs backwards over `live`.
+ *
+ * Pure and exported for the same reason `floatingTextStackLift` is: applying a plan needs a
+ * `FloatingText`, which is a `Label`, which needs a DOM. The decision is therefore checked as
+ * arithmetic and the class is left with the assignments. `push` inlined this loop once, and the
+ * loop is where the direction, the order and the life floor were all wrong at the same time.
  *
  * @example
  * ```ts
- * import { floatingTextStackOffset } from '@datamoc/mw_games/two-d/ui';
- * console.log(floatingTextStackOffset([{ key: 'hero', x: 1, y: 2, height: 10 }], { key: 'hero', x: 1, y: 2, height: 8 })); // 11
+ * import {
+ *   FLOATING_TEXT_STACK_GAP,
+ *   floatingTextStackLift,
+ *   floatingTextStackLifePenalty,
+ *   floatingTextStackMoves,
+ * } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const older = { key: 'hero', x: 0, y: 0, height: 10 };
+ * const newcomer = { key: 'hero', x: 0, y: 0, height: 8 };
+ *
+ * console.log(FLOATING_TEXT_STACK_GAP); // 4, the gap Java's push leaves
+ * console.log(floatingTextStackLift(older, newcomer)); // -13, where the older line must sit
+ * console.log(floatingTextStackLifePenalty(1)); // 0.2, the age a first lifted line is forced to
+ * console.log(floatingTextStackMoves([older], newcomer)); // [{ index: 0, y: -13, ageAtLeast: 0.2 }]
  * ```
  */
-export function floatingTextStackOffset(live, incoming) {
+export function floatingTextStackMoves(live, incoming, gap = FLOATING_TEXT_STACK_GAP) {
+    const moves = [];
     if (incoming.key === undefined)
-        return 0;
-    let lift = 0;
-    for (const entry of live) {
-        if (entry.key !== incoming.key)
-            continue;
-        if (entry.x !== incoming.x || entry.y !== incoming.y)
+        return moves;
+    let below = incoming;
+    for (let index = live.length - 1; index >= 0; index--) {
+        const held = live[index];
+        if (held.key !== incoming.key)
             continue;
-        lift += entry.height + 1;
+        const y = floatingTextStackLift(held, below, gap);
+        //already clear of the line below, so everything above it is too: Java stops here
+        if (y === held.y)
+            break;
+        moves.push({ index, y, ageAtLeast: floatingTextStackLifePenalty(moves.length + 1) });
+        //the next line up is measured against where this one is going, not where it was. The
+        //entries handed in are not mutated, so the move is carried forward on a copy: without this
+        //every line of a burst lands at the same y.
+        below = { ...held, y };
     }
-    return lift;
+    return moves;
 }
 /**
  * Owns the pop-ups a game spawns over world points: one `push` per number, one `update(dt)` to
@@ -57,7 +113,14 @@ export class FloatingTextStack extends Container {
         super(...arguments);
         this.live = [];
     }
-    /** spawns a pop-up at `options.x`/`options.y`, stacked clear of anything it shares a key with */
+    /**
+     * Spawns a pop-up at `options.x`/`options.y`, lifting the lines already there out of its way.
+     *
+     * The newcomer stays exactly where it was asked to appear; anything sharing its key that it
+     * would overlap moves up, newest first, each one measured against the line below it and each
+     * nudge costing it a little life - Java's order, so a stack grows upward and self-limits. The
+     * decision is `floatingTextStackMoves`; this method only assigns what that plan says.
+     */
     push(options) {
         const popup = new FloatingText({
             text: options.text,
@@ -67,9 +130,17 @@ export class FloatingTextStack extends Container {
             rise: options.rise,
             hold: options.hold,
         });
+        //before the measurement below, never after: `height` includes the pop-up's own scale
+        if (options.scale !== undefined)
+            popup.scale.set(options.scale);
         const entry = { key: options.key, x: options.x, y: options.y, height: popup.height };
-        popup.position.set(options.x, options.y +
-            floatingTextStackOffset(this.live.map((held) => held.entry), entry));
+        for (const move of floatingTextStackMoves(this.live.map((held) => held.entry), entry)) {
+            const held = this.live[move.index];
+            held.entry.y = move.y;
+            held.popup.y = move.y;
+            held.popup.ageAtLeast(move.ageAtLeast);
+        }
+        popup.position.set(options.x, options.y);
         this.addChild(popup);
         this.live.push({ popup, entry });
         return popup;

package/dist/two-d/ui/FloatingTextStack.js.map

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

package/dist/two-d/ui/Layout.d.ts

@@ -0,0 +1,105 @@
+export type Anchor = 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'fill';
+export interface LayoutRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface AnchorSpec {
+    /** which corner or edge to sit against; `center` when omitted */
+    anchor?: Anchor;
+    /** extra offset after anchoring, positive right and down */
+    offsetX?: number;
+    offsetY?: number;
+    /** 0..1 position across the bounds, overriding the named anchor's own alignment */
+    alignX?: number;
+    alignY?: number;
+    /** the placed size; the content's own size when omitted */
+    width?: number;
+    height?: number;
+    /** shrinks the bounds on every side before anchoring */
+    margin?: number;
+}
+/**
+ * The horizontal (0, 0.5, 1) and vertical alignment a named anchor implies.
+ *
+ * @example
+ * ```ts
+ * import { anchorAlign } from '@datamoc/mw_games/two-d/ui';
+ *
+ * console.log(anchorAlign('bottom-right')); // { x: 1, y: 1 }
+ * ```
+ */
+export declare function anchorAlign(anchor: Anchor): {
+    x: number;
+    y: number;
+};
+/**
+ * Places a `size`-shaped child against the bounds - the anchor half of a data-driven shell, the
+ * part GUI2 spells as `[cell]` anchoring a widget inside its slot.
+ *
+ * A `fill` anchor takes the bounds (minus margins) whole; every other anchor lines the child up on
+ * the named edge and then applies the offsets, so `{ anchor: 'bottom-right', offsetX: -8 }` pins a
+ * button eight pixels in from the bottom-right corner.
+ *
+ * @example
+ * ```ts
+ * import { resolveAnchor } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const bounds = { x: 0, y: 0, width: 800, height: 600 };
+ * console.log(resolveAnchor({ anchor: 'bottom-right', width: 100, height: 30, margin: 10 }, bounds));
+ * // { x: 690, y: 560, width: 100, height: 30 }
+ * ```
+ */
+export declare function resolveAnchor(spec: AnchorSpec, bounds: LayoutRect, size?: {
+    width: number;
+    height: number;
+}): LayoutRect;
+export interface GridTrack {
+    /** a fixed size, in pixels */
+    size?: number;
+    /** share of what is left after the fixed tracks; a track with neither is 0 */
+    grow?: number;
+}
+export interface GridSpec {
+    columns: readonly GridTrack[];
+    rows: readonly GridTrack[];
+    /** space between tracks, in pixels */
+    gap?: number;
+}
+/**
+ * A column/row grid whose tracks are `size` or `grow`, the data-driven counterpart to GUI2's
+ * `[grid]`. Fixed tracks take their size; the rest of the space is divided between the `grow`
+ * tracks in proportion to their weight, so a sidebar can be `size: 200` and the content
+ * `grow: 1` without either side knowing the window's width.
+ *
+ * @example
+ * ```ts
+ * import { Grid } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const grid = new Grid({ columns: [{ size: 200 }, { grow: 1 }], rows: [{ grow: 1 }], gap: 8 });
+ * const cell = grid.rect(0, 1, { x: 0, y: 0, width: 800, height: 600 });
+ * console.log(cell); // the content column: x 208, width 592
+ * ```
+ */
+export declare class Grid {
+    private spec;
+    constructor(spec: GridSpec);
+    get columns(): readonly GridTrack[];
+    get rows(): readonly GridTrack[];
+    /** the resolved pixel width of each column for a given total width */
+    columnSizes(totalWidth: number): number[];
+    /** the resolved pixel height of each row for a given total height */
+    rowSizes(totalHeight: number): number[];
+    /**
+     * The rectangle of a cell, spanning `columnSpan` columns and `rowSpan` rows. Out-of-range cells
+     * resolve to a zero-sized rect at the far edge rather than throwing, so a caller walking a
+     * changing table never has to bounds-check first.
+     */
+    rect(row: number, column: number, bounds: LayoutRect, options?: {
+        rowSpan?: number;
+        columnSpan?: number;
+    }): LayoutRect;
+    private get gap();
+}
+//# sourceMappingURL=Layout.d.ts.map

package/dist/two-d/ui/Layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../src/two-d/ui/Layout.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GACjB,UAAU,GAAG,KAAK,GAAG,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,QAAQ,GAAG,cAAc,GAAG,MAAM,CAAC;AAErH,MAAM,WAAW,UAAU;IAC1B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,UAAU;IAC1B,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mFAAmF;IACnF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAqBpE;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,aAAa,CAC5B,IAAI,EAAE,UAAU,EAChB,MAAM,EAAE,UAAU,EAClB,IAAI,GAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAA4B,GAC/D,UAAU,CA6BZ;AAED,MAAM,WAAW,SAAS;IACzB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,QAAQ;IACxB,OAAO,EAAE,SAAS,SAAS,EAAE,CAAC;IAC9B,IAAI,EAAE,SAAS,SAAS,EAAE,CAAC;IAC3B,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;;;GAcG;AACH,qBAAa,IAAI;IAChB,OAAO,CAAC,IAAI,CAAW;IAEvB,YAAY,IAAI,EAAE,QAAQ,EAEzB;IAED,IAAI,OAAO,IAAI,SAAS,SAAS,EAAE,CAElC;IAED,IAAI,IAAI,IAAI,SAAS,SAAS,EAAE,CAE/B;IAED,sEAAsE;IACtE,WAAW,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAExC;IAED,qEAAqE;IACrE,QAAQ,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,EAAE,CAEtC;IAED;;;;OAIG;IACH,IAAI,CACH,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,UAAU,EAClB,OAAO,GAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAO,GACrD,UAAU,CAcZ;IAED,OAAO,KAAK,GAAG,GAEd;CACD"}

package/dist/two-d/ui/Layout.js

@@ -0,0 +1,174 @@
+/**
+ * The horizontal (0, 0.5, 1) and vertical alignment a named anchor implies.
+ *
+ * @example
+ * ```ts
+ * import { anchorAlign } from '@datamoc/mw_games/two-d/ui';
+ *
+ * console.log(anchorAlign('bottom-right')); // { x: 1, y: 1 }
+ * ```
+ */
+export function anchorAlign(anchor) {
+    switch (anchor) {
+        case 'top':
+        case 'bottom':
+            return { x: 0.5, y: anchor === 'top' ? 0 : 1 };
+        case 'left':
+        case 'right':
+            return { x: anchor === 'left' ? 0 : 1, y: 0.5 };
+        case 'top-left':
+            return { x: 0, y: 0 };
+        case 'top-right':
+            return { x: 1, y: 0 };
+        case 'bottom-left':
+            return { x: 0, y: 1 };
+        case 'bottom-right':
+            return { x: 1, y: 1 };
+        case 'fill':
+        case 'center':
+        default:
+            return { x: 0.5, y: 0.5 };
+    }
+}
+/**
+ * Places a `size`-shaped child against the bounds - the anchor half of a data-driven shell, the
+ * part GUI2 spells as `[cell]` anchoring a widget inside its slot.
+ *
+ * A `fill` anchor takes the bounds (minus margins) whole; every other anchor lines the child up on
+ * the named edge and then applies the offsets, so `{ anchor: 'bottom-right', offsetX: -8 }` pins a
+ * button eight pixels in from the bottom-right corner.
+ *
+ * @example
+ * ```ts
+ * import { resolveAnchor } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const bounds = { x: 0, y: 0, width: 800, height: 600 };
+ * console.log(resolveAnchor({ anchor: 'bottom-right', width: 100, height: 30, margin: 10 }, bounds));
+ * // { x: 690, y: 560, width: 100, height: 30 }
+ * ```
+ */
+export function resolveAnchor(spec, bounds, size = { width: 0, height: 0 }) {
+    const margin = spec.margin ?? 0;
+    const left = bounds.x + margin;
+    const top = bounds.y + margin;
+    const usableWidth = Math.max(0, bounds.width - margin * 2);
+    const usableHeight = Math.max(0, bounds.height - margin * 2);
+    if (spec.anchor === 'fill') {
+        const x = left + (spec.offsetX ?? 0);
+        const y = top + (spec.offsetY ?? 0);
+        return {
+            x,
+            y,
+            width: spec.width ?? Math.max(0, left + usableWidth - x),
+            height: spec.height ?? Math.max(0, top + usableHeight - y),
+        };
+    }
+    const align = anchorAlign(spec.anchor ?? 'center');
+    const alignX = spec.alignX ?? align.x;
+    const alignY = spec.alignY ?? align.y;
+    const width = spec.width ?? size.width;
+    const height = spec.height ?? size.height;
+    return {
+        x: left + alignX * Math.max(0, usableWidth - width) + (spec.offsetX ?? 0),
+        y: top + alignY * Math.max(0, usableHeight - height) + (spec.offsetY ?? 0),
+        width,
+        height,
+    };
+}
+/**
+ * A column/row grid whose tracks are `size` or `grow`, the data-driven counterpart to GUI2's
+ * `[grid]`. Fixed tracks take their size; the rest of the space is divided between the `grow`
+ * tracks in proportion to their weight, so a sidebar can be `size: 200` and the content
+ * `grow: 1` without either side knowing the window's width.
+ *
+ * @example
+ * ```ts
+ * import { Grid } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const grid = new Grid({ columns: [{ size: 200 }, { grow: 1 }], rows: [{ grow: 1 }], gap: 8 });
+ * const cell = grid.rect(0, 1, { x: 0, y: 0, width: 800, height: 600 });
+ * console.log(cell); // the content column: x 208, width 592
+ * ```
+ */
+export class Grid {
+    constructor(spec) {
+        this.spec = spec;
+    }
+    get columns() {
+        return this.spec.columns;
+    }
+    get rows() {
+        return this.spec.rows;
+    }
+    /** the resolved pixel width of each column for a given total width */
+    columnSizes(totalWidth) {
+        return resolveTracks(this.spec.columns, totalWidth, this.gap);
+    }
+    /** the resolved pixel height of each row for a given total height */
+    rowSizes(totalHeight) {
+        return resolveTracks(this.spec.rows, totalHeight, this.gap);
+    }
+    /**
+     * The rectangle of a cell, spanning `columnSpan` columns and `rowSpan` rows. Out-of-range cells
+     * resolve to a zero-sized rect at the far edge rather than throwing, so a caller walking a
+     * changing table never has to bounds-check first.
+     */
+    rect(row, column, bounds, options = {}) {
+        const columns = this.columnSizes(bounds.width);
+        const rows = this.rowSizes(bounds.height);
+        const columnSpan = options.columnSpan ?? 1;
+        const rowSpan = options.rowSpan ?? 1;
+        const x = bounds.x + offsetOf(columns, column, this.gap);
+        const y = bounds.y + offsetOf(rows, row, this.gap);
+        return {
+            x,
+            y,
+            width: spanOf(columns, column, columnSpan, this.gap),
+            height: spanOf(rows, row, rowSpan, this.gap),
+        };
+    }
+    get gap() {
+        return this.spec.gap ?? 0;
+    }
+}
+function resolveTracks(tracks, total, gap) {
+    const gaps = gap * Math.max(0, tracks.length - 1);
+    const available = Math.max(0, total - gaps);
+    const fixed = tracks.reduce((sum, track) => sum + (track.size ?? 0), 0);
+    const growTotal = tracks.reduce((sum, track) => sum + (track.grow ?? 0), 0);
+    const remaining = Math.max(0, available - fixed);
+    let assigned = 0;
+    return tracks.map((track, index) => {
+        if (track.size !== undefined)
+            return track.size;
+        if (!track.grow || growTotal === 0)
+            return 0;
+        //give the last grow track whatever rounding is left, so the tracks always fill the space
+        const isLast = index === lastGrowIndex(tracks);
+        const size = isLast ? remaining - assigned : Math.floor((remaining * track.grow) / growTotal);
+        assigned += size;
+        return size;
+    });
+}
+function lastGrowIndex(tracks) {
+    for (let index = tracks.length - 1; index >= 0; index--)
+        if (tracks[index].grow)
+            return index;
+    return -1;
+}
+function offsetOf(sizes, index, gap) {
+    let offset = 0;
+    for (let i = 0; i < index && i < sizes.length; i++)
+        offset += sizes[i] + gap;
+    return offset;
+}
+function spanOf(sizes, index, span, gap) {
+    let width = 0;
+    for (let i = index; i < index + span && i < sizes.length; i++) {
+        width += sizes[i];
+        if (i > index)
+            width += gap;
+    }
+    return Math.max(0, width);
+}
+//# sourceMappingURL=Layout.js.map

package/dist/two-d/ui/Layout.js.map

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

package/dist/two-d/ui/ScrollBox.d.ts

@@ -0,0 +1,67 @@
+import { Container } from 'pixi.js';
+import { Signal } from '../../core/Signal.ts';
+/**
+ * Clamps a scroll offset so the content never pulls away from the top or leaves a gap past the
+ * bottom. When the content is shorter than the viewport the only offset is 0.
+ *
+ * @example
+ * ```ts
+ * import { scrollOffset } from '@datamoc/mw_games/two-d/ui';
+ *
+ * console.log(scrollOffset(-5, 500, 200)); // 0
+ * console.log(scrollOffset(900, 500, 200)); // 300
+ * ```
+ */
+export declare function scrollOffset(offset: number, contentSize: number, viewportSize: number): number;
+export interface ScrollBoxOptions {
+    width: number;
+    height: number;
+    /** how tall the content is; set it again with `setContentHeight` as the content changes */
+    contentHeight?: number;
+    offset?: number;
+}
+/**
+ * A clipped viewport with a scrollbar: put rows in `content` and they scroll inside the box,
+ * everything outside it hidden by a mask. The scrollbar is drawn from the theme; the wheel,
+ * `scrollBy` and `scrollIntoView` all run through `scrollOffset`, so they clamp the same way.
+ *
+ * @example
+ * ```ts
+ * import { ScrollBox } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const box = new ScrollBox({ width: 200, height: 120, contentHeight: 400 });
+ * box.scrollBy(60);
+ * console.log(box.offset); // 60
+ * ```
+ */
+export declare class ScrollBox extends Container {
+    readonly onChange: Signal<number>;
+    /** add the rows to scroll here */
+    readonly content: Container<import("pixi.js").ContainerChild>;
+    private maskShape;
+    private track;
+    private thumb;
+    private width_;
+    private height_;
+    private contentHeight_;
+    private offset_;
+    private readonly themeListener;
+    constructor(options: ScrollBoxOptions);
+    get offset(): number;
+    get contentHeight(): number;
+    get viewportHeight(): number;
+    /** how far the content can scroll; 0 when it all fits */
+    get maxOffset(): number;
+    get scrollable(): boolean;
+    setContentHeight(height: number): void;
+    resize(width: number, height: number): void;
+    scrollBy(delta: number): void;
+    scrollTo(offset: number): void;
+    /** scrolls just enough to bring a `height`-tall item at `top` fully into view */
+    scrollIntoView(top: number, height: number): void;
+    private setOffset;
+    private readonly handleWheel;
+    private draw;
+    destroy(options?: Parameters<Container['destroy']>[0]): void;
+}
+//# sourceMappingURL=ScrollBox.d.ts.map

package/dist/two-d/ui/ScrollBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollBox.d.ts","sourceRoot":"","sources":["../../../src/two-d/ui/ScrollBox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAY,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAG9C;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,MAAM,CAE9F;AAED,MAAM,WAAW,gBAAgB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,2FAA2F;IAC3F,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;GAaG;AACH,qBAAa,SAAU,SAAQ,SAAS;IACvC,QAAQ,CAAC,QAAQ,iBAAwB;IAEzC,kCAAkC;IAClC,QAAQ,CAAC,OAAO,8CAAmB;IAEnC,OAAO,CAAC,SAAS,CAAkB;IACnC,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,KAAK,CAAkB;IAE/B,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,OAAO,CAAS;IAExB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAqB;IAEnD,YAAY,OAAO,EAAE,gBAAgB,EAoBpC;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IAAI,cAAc,IAAI,MAAM,CAE3B;IAED,yDAAyD;IACzD,IAAI,SAAS,IAAI,MAAM,CAEtB;IAED,IAAI,UAAU,IAAI,OAAO,CAExB;IAED,gBAAgB,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAGrC;IAED,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAI1C;IAED,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAE5B;IAED,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAE7B;IAED,iFAAiF;IACjF,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAGhD;IAED,OAAO,CAAC,SAAS;IAUjB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAE1B;IAEF,OAAO,CAAC,IAAI;IAmBH,OAAO,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAGpE;CACD"}

package/dist/two-d/ui/ScrollBox.js

@@ -0,0 +1,127 @@
+import { Container, Graphics } from 'pixi.js';
+import { Signal } from '../../core/Signal.js';
+import { theme, themeChanged } from './theme.js';
+/**
+ * Clamps a scroll offset so the content never pulls away from the top or leaves a gap past the
+ * bottom. When the content is shorter than the viewport the only offset is 0.
+ *
+ * @example
+ * ```ts
+ * import { scrollOffset } from '@datamoc/mw_games/two-d/ui';
+ *
+ * console.log(scrollOffset(-5, 500, 200)); // 0
+ * console.log(scrollOffset(900, 500, 200)); // 300
+ * ```
+ */
+export function scrollOffset(offset, contentSize, viewportSize) {
+    return Math.max(0, Math.min(Math.max(0, contentSize - viewportSize), offset));
+}
+/**
+ * A clipped viewport with a scrollbar: put rows in `content` and they scroll inside the box,
+ * everything outside it hidden by a mask. The scrollbar is drawn from the theme; the wheel,
+ * `scrollBy` and `scrollIntoView` all run through `scrollOffset`, so they clamp the same way.
+ *
+ * @example
+ * ```ts
+ * import { ScrollBox } from '@datamoc/mw_games/two-d/ui';
+ *
+ * const box = new ScrollBox({ width: 200, height: 120, contentHeight: 400 });
+ * box.scrollBy(60);
+ * console.log(box.offset); // 60
+ * ```
+ */
+export class ScrollBox extends Container {
+    constructor(options) {
+        super();
+        this.onChange = new Signal();
+        /** add the rows to scroll here */
+        this.content = new Container();
+        this.maskShape = new Graphics();
+        this.track = new Graphics();
+        this.thumb = new Graphics();
+        this.themeListener = () => this.draw();
+        this.handleWheel = (event) => {
+            this.scrollBy(event.deltaY);
+        };
+        this.width_ = options.width;
+        this.height_ = options.height;
+        this.contentHeight_ = Math.max(0, options.contentHeight ?? 0);
+        this.offset_ = scrollOffset(options.offset ?? 0, this.contentHeight_, this.height_);
+        this.addChild(this.content);
+        this.addChild(this.maskShape);
+        this.addChild(this.track);
+        this.addChild(this.thumb);
+        this.content.mask = this.maskShape;
+        this.eventMode = 'static';
+        this.on('wheel', this.handleWheel);
+        this.draw();
+        themeChanged.add(this.themeListener);
+    }
+    get offset() {
+        return this.offset_;
+    }
+    get contentHeight() {
+        return this.contentHeight_;
+    }
+    get viewportHeight() {
+        return this.height_;
+    }
+    /** how far the content can scroll; 0 when it all fits */
+    get maxOffset() {
+        return Math.max(0, this.contentHeight_ - this.height_);
+    }
+    get scrollable() {
+        return this.maxOffset > 0;
+    }
+    setContentHeight(height) {
+        this.contentHeight_ = Math.max(0, height);
+        this.setOffset(scrollOffset(this.offset_, this.contentHeight_, this.height_));
+    }
+    resize(width, height) {
+        this.width_ = width;
+        this.height_ = height;
+        this.setOffset(scrollOffset(this.offset_, this.contentHeight_, this.height_));
+    }
+    scrollBy(delta) {
+        this.setOffset(scrollOffset(this.offset_ + delta, this.contentHeight_, this.height_));
+    }
+    scrollTo(offset) {
+        this.setOffset(scrollOffset(offset, this.contentHeight_, this.height_));
+    }
+    /** scrolls just enough to bring a `height`-tall item at `top` fully into view */
+    scrollIntoView(top, height) {
+        if (top < this.offset_)
+            this.scrollTo(top);
+        else if (top + height > this.offset_ + this.height_)
+            this.scrollTo(top + height - this.height_);
+    }
+    setOffset(offset) {
+        if (offset === this.offset_) {
+            this.draw();
+            return;
+        }
+        this.offset_ = offset;
+        this.draw();
+        this.onChange.dispatch(offset);
+    }
+    draw() {
+        const t = theme();
+        this.content.y = -this.offset_;
+        this.maskShape.clear().rect(0, 0, this.width_, this.height_).fill({ color: 0xffffff });
+        this.track.clear();
+        this.thumb.clear();
+        if (!this.scrollable)
+            return;
+        const barWidth = 6;
+        const x = this.width_ - barWidth;
+        this.track.roundRect(x, 0, barWidth, this.height_, barWidth / 2).fill({ color: t.color.panelFill });
+        const thumbHeight = Math.max(barWidth, (this.height_ / this.contentHeight_) * this.height_);
+        const thumbY = (this.offset_ / this.maxOffset) * (this.height_ - thumbHeight);
+        this.thumb.roundRect(x, thumbY, barWidth, thumbHeight, barWidth / 2).fill({ color: t.color.textHighlight });
+    }
+    destroy(options) {
+        themeChanged.remove(this.themeListener);
+        super.destroy(options);
+    }
+}
+//# sourceMappingURL=ScrollBox.js.map