@thunderclap-engine/engine 0.0.0-stage → 1.1.0

package/dist/ui/world-panel/widgets.js

@@ -0,0 +1,569 @@
+const HOVER_TINT = 'rgba(255, 255, 255, 0.07)';
+const PRESS_TINT = 'rgba(0, 0, 0, 0.18)';
+const DISABLED_ALPHA = 0.45;
+function toneColor(t, tone) {
+    const k = t.tokens;
+    switch (tone) {
+        case 'muted':
+            return k.colorTextMuted;
+        case 'accent':
+            return k.colorAccent;
+        case 'info':
+            return k.colorInfo;
+        case 'success':
+            return k.colorSuccess;
+        case 'warn':
+            return k.colorWarn;
+        case 'danger':
+            return k.colorDanger;
+        default:
+            return k.colorText;
+    }
+}
+function fontSize(t, size) {
+    return size === 's' ? t.fontSizeS : size === 'l' ? t.fontSizeL : t.fontSizeM;
+}
+/**
+ * Base of every panel widget. `O` is its options object; subclasses say which keys change the
+ * height (`layoutKeys`) so `set` can ask for a layout pass only then.
+ */
+export class WorldWidget {
+    /** An explicit place in panel px; `null` lets the flow place it. */
+    rect = null;
+    /** Where the panel put it (the flow or `rect`). */
+    layoutRect = { x: 0, y: 0, w: 0, h: 0 };
+    hover = false;
+    pressed = false;
+    focused = false;
+    /** @internal set by the panel on `add`. */
+    host = null;
+    theme = null;
+    opts;
+    layoutKeys;
+    constructor(opts, layoutKeys = []) {
+        this.opts = opts;
+        this.layoutKeys = new Set(layoutKeys);
+        const r = opts.rect;
+        if (r)
+            this.rect = { x: r.x, y: r.y, w: r.w, h: r.h };
+    }
+    /** The current options (read-only view). */
+    get options() {
+        return this.opts;
+    }
+    /** Whether the widget takes focus and pointer presses. */
+    get focusable() {
+        return false;
+    }
+    /** Disabled widgets paint faded and ignore input. */
+    get disabled() {
+        return this.opts.disabled === true;
+    }
+    /** @internal */
+    attach(host) {
+        this.host = host;
+        this.theme = host.painter.theme;
+    }
+    /** @internal */
+    detach() {
+        this.host = null;
+        this.hover = false;
+        this.pressed = false;
+        this.focused = false;
+    }
+    /** Mark the widget's rect dirty. */
+    invalidate() {
+        this.host?.invalidate(this);
+    }
+    /**
+     * Write the fields of `patch` that differ (`!==`) from the current options. Only a change marks
+     * the rect dirty; a change to a layout key also re-runs the flow. Returns whether anything changed.
+     */
+    set(patch) {
+        let changed = false;
+        let relayout = false;
+        const o = this.opts;
+        for (const key of Object.keys(patch)) {
+            const v = patch[key];
+            if (o[key] === v)
+                continue;
+            o[key] = v;
+            changed = true;
+            if (this.layoutKeys.has(key))
+                relayout = true;
+            if (key === 'rect') {
+                const r = v;
+                this.rect = r ? { x: r.x, y: r.y, w: r.w, h: r.h } : null;
+                relayout = true;
+            }
+        }
+        if (changed) {
+            this.changed();
+            if (relayout)
+                this.host?.relayout();
+            else
+                this.invalidate();
+        }
+        return changed;
+    }
+    /** Hook after `set` wrote something (clamp derived state). */
+    changed() { }
+    /** Pointer went down at panel px (inside the rect). */
+    pointerDown(_x, _y) { }
+    /** Pointer moved; `down` while this widget holds the press. */
+    pointerMove(_x, _y, _down) { }
+    /** The press ended; `inside` when the release was over this widget. */
+    pointerUp(_x, _y, _inside) { }
+    /** Wheel over the widget, `dy` in px (positive scrolls down). Returns whether it was used. */
+    wheel(_dy) {
+        return false;
+    }
+    /** The pad's A / Enter / Space on the focused widget. */
+    activate() { }
+    /** A key on the focused widget; true when consumed. */
+    key(_event) {
+        return false;
+    }
+    get t() {
+        const t = this.theme;
+        if (!t)
+            throw new Error('world panel widget: not added to a panel');
+        return t;
+    }
+    /** The row height a control uses: the M font plus `space3` above and below. */
+    controlHeight() {
+        const t = this.t;
+        return Math.round(t.fontSizeM + t.space3 * 2);
+    }
+    /** The background, hover and pressed layers of a control, then the border. */
+    paintControl(p, r, fill, radius) {
+        const t = this.t;
+        p.fillRoundRect(r, radius, fill);
+        if (this.pressed)
+            p.fillRoundRect(r, radius, PRESS_TINT);
+        else if (this.hover)
+            p.fillRoundRect(r, radius, HOVER_TINT);
+        p.strokeRoundRect(r, radius, t.tokens.colorBorder, t.borderWidth);
+    }
+    /** Run `paint` at the disabled alpha when disabled; the focus ring after. */
+    frame(p, r, radius, paint) {
+        const ctx = p.ctx;
+        const dis = this.disabled;
+        if (dis) {
+            ctx.save();
+            ctx.globalAlpha = DISABLED_ALPHA;
+        }
+        paint();
+        if (dis)
+            ctx.restore();
+        if (this.focused && !dis)
+            p.focusRing(r, radius);
+    }
+}
+export class WorldLabel extends WorldWidget {
+    constructor(opts) {
+        super({ ...opts }, ['size']);
+    }
+    measure() {
+        return Math.round(fontSize(this.t, this.opts.size) * 1.4);
+    }
+    paint(p, r) {
+        const o = this.opts;
+        p.text(o.text, r, fontSize(this.t, o.size), toneColor(this.t, o.tone), o.align ?? 'left');
+    }
+}
+export class WorldButton extends WorldWidget {
+    constructor(opts) {
+        super({ ...opts });
+    }
+    get focusable() {
+        return !this.disabled;
+    }
+    measure() {
+        return this.controlHeight();
+    }
+    paint(p, r) {
+        const t = this.t;
+        this.frame(p, r, t.radiusM, () => {
+            const k = t.tokens;
+            this.paintControl(p, r, this.pressed ? k.colorAccent : k.colorSurfaceAlt, t.radiusM);
+            p.text(this.opts.text, r, t.fontSizeM, this.pressed ? k.colorAccentText : k.colorText, 'center', 0, 600);
+        });
+    }
+    pointerUp(_x, _y, inside) {
+        if (inside)
+            this.activate();
+    }
+    activate() {
+        if (!this.disabled)
+            this.opts.onPress?.();
+    }
+}
+export class WorldToggle extends WorldWidget {
+    constructor(opts) {
+        super({ ...opts });
+    }
+    get focusable() {
+        return !this.disabled;
+    }
+    measure() {
+        return this.controlHeight();
+    }
+    paint(p, r) {
+        const t = this.t;
+        this.frame(p, r, t.radiusM, () => {
+            const k = t.tokens;
+            this.paintControl(p, r, k.colorSurfaceAlt, t.radiusM);
+            p.text(this.opts.text, r, t.fontSizeM, k.colorText, 'left', t.space3);
+            // The pill: twice as wide as tall, the knob at the on side when `value`.
+            const h = Math.round(t.fontSizeM * 0.9);
+            const w = h * 2;
+            const pill = { x: r.x + r.w - t.space3 - w, y: r.y + (r.h - h) / 2, w, h };
+            const on = this.opts.value;
+            p.fillRoundRect(pill, h / 2, on ? k.colorAccent : k.colorSurface);
+            p.strokeRoundRect(pill, h / 2, k.colorBorder, t.borderWidth);
+            const pad = t.borderWidth + 1;
+            const d = h - pad * 2;
+            const knob = {
+                x: on ? pill.x + w - pad - d : pill.x + pad,
+                y: pill.y + pad,
+                w: d,
+                h: d,
+            };
+            p.fillRoundRect(knob, d / 2, on ? k.colorAccentText : k.colorTextMuted);
+        });
+    }
+    pointerUp(_x, _y, inside) {
+        if (inside)
+            this.activate();
+    }
+    activate() {
+        if (this.disabled)
+            return;
+        const v = !this.opts.value;
+        this.set({ value: v });
+        this.opts.onChange?.(v);
+    }
+}
+export class WorldSlider extends WorldWidget {
+    dragging = false;
+    constructor(opts) {
+        super({ ...opts });
+        this.opts.value = this.snap(this.opts.value);
+    }
+    get focusable() {
+        return !this.disabled;
+    }
+    measure() {
+        return this.controlHeight();
+    }
+    /** The value for a panel px `x` inside `r`. */
+    valueAt(x) {
+        const r = this.layoutRect;
+        const t = this.t;
+        const inset = t.space3;
+        const span = Math.max(1, r.w - inset * 2);
+        const f = Math.min(1, Math.max(0, (x - r.x - inset) / span));
+        const o = this.opts;
+        return this.snap(o.min + f * (o.max - o.min));
+    }
+    snap(v) {
+        const o = this.opts;
+        const lo = Math.min(o.min, o.max);
+        const hi = Math.max(o.min, o.max);
+        let out = Math.min(hi, Math.max(lo, v));
+        const step = o.step ?? 0;
+        if (step > 0) {
+            out = o.min + Math.round((out - o.min) / step) * step;
+            out = Math.min(hi, Math.max(lo, out));
+            // Round away float dust (0.30000000000000004).
+            const digits = Math.min(10, Math.max(0, Math.ceil(-Math.log10(step)) + 2));
+            out = Number(out.toFixed(digits));
+        }
+        return out;
+    }
+    changed() {
+        const v = this.snap(this.opts.value);
+        if (v !== this.opts.value)
+            this.opts.value = v;
+    }
+    commit(v) {
+        if (v === this.opts.value)
+            return;
+        this.opts.value = v;
+        this.invalidate();
+        this.opts.onChange?.(v);
+    }
+    paint(p, r) {
+        const t = this.t;
+        this.frame(p, r, t.radiusM, () => {
+            const k = t.tokens;
+            const o = this.opts;
+            const inset = t.space3;
+            const trackH = Math.max(2, Math.round(t.space2));
+            const track = {
+                x: r.x + inset,
+                y: r.y + (r.h - trackH) / 2,
+                w: r.w - inset * 2,
+                h: trackH,
+            };
+            p.fillRoundRect(track, trackH / 2, k.colorSurfaceAlt);
+            p.strokeRoundRect(track, trackH / 2, k.colorBorder, 1);
+            const span = o.max - o.min;
+            const f = span === 0 ? 0 : Math.min(1, Math.max(0, (o.value - o.min) / span));
+            const fill = { x: track.x, y: track.y, w: track.w * f, h: track.h };
+            if (fill.w > 0)
+                p.fillRoundRect(fill, trackH / 2, k.colorAccent);
+            const d = Math.round(t.fontSizeM * 0.9);
+            const knob = {
+                x: track.x + track.w * f - d / 2,
+                y: r.y + (r.h - d) / 2,
+                w: d,
+                h: d,
+            };
+            p.fillRoundRect(knob, d / 2, this.pressed ? k.colorFocus : k.colorAccent);
+            if (this.hover && !this.pressed)
+                p.fillRoundRect(knob, d / 2, HOVER_TINT);
+            p.strokeRoundRect(knob, d / 2, k.colorAccentText, 1);
+        });
+    }
+    pointerDown(x) {
+        if (this.disabled)
+            return;
+        this.dragging = true;
+        this.commit(this.valueAt(x));
+    }
+    pointerMove(x, _y, down) {
+        if (this.dragging && down)
+            this.commit(this.valueAt(x));
+    }
+    pointerUp(x) {
+        if (this.dragging) {
+            this.dragging = false;
+            if (Number.isFinite(x))
+                this.commit(this.valueAt(x));
+        }
+    }
+    key(e) {
+        if (this.disabled)
+            return false;
+        const o = this.opts;
+        const step = o.step && o.step > 0 ? o.step : (o.max - o.min) / 20;
+        if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+            this.commit(this.snap(o.value - step));
+            return true;
+        }
+        if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+            this.commit(this.snap(o.value + step));
+            return true;
+        }
+        return false;
+    }
+}
+/** Px a press may travel before it is a scroll drag rather than a tap. */
+const LIST_DRAG_PX = 4;
+export class WorldList extends WorldWidget {
+    /** Scroll offset in px from the top of the items. */
+    scroll = 0;
+    pressY = 0;
+    pressScroll = 0;
+    dragging = false;
+    down = false;
+    constructor(opts) {
+        super({ selected: -1, visibleRows: 4, ...opts }, ['visibleRows']);
+    }
+    get focusable() {
+        return !this.disabled;
+    }
+    /** Row height in px. */
+    get rowHeight() {
+        const t = this.t;
+        return Math.round(t.fontSizeM + t.space2 * 2);
+    }
+    /** The largest `scroll` that still shows a full last row. */
+    get maxScroll() {
+        const rows = this.opts.visibleRows ?? 4;
+        return Math.max(0, (this.opts.items.length - rows) * this.rowHeight);
+    }
+    measure() {
+        return this.rowHeight * (this.opts.visibleRows ?? 4) + this.t.borderWidth * 2;
+    }
+    changed() {
+        this.setScroll(this.scroll);
+    }
+    /** Set the scroll offset, clamped to `[0, maxScroll]`; dirty only when it moved. */
+    setScroll(px) {
+        const v = Math.min(this.maxScroll, Math.max(0, px));
+        if (v === this.scroll)
+            return;
+        this.scroll = v;
+        this.invalidate();
+    }
+    /** Select `index` (clamped; -1 clears), scroll it into view and fire `onSelect` when it changed. */
+    select(index) {
+        const n = this.opts.items.length;
+        const i = index < 0 || n === 0 ? -1 : Math.min(n - 1, Math.max(0, Math.floor(index)));
+        if (i >= 0) {
+            const rh = this.rowHeight;
+            const rows = this.opts.visibleRows ?? 4;
+            if (i * rh < this.scroll)
+                this.setScroll(i * rh);
+            else if ((i + 1) * rh > this.scroll + rows * rh)
+                this.setScroll((i + 1) * rh - rows * rh);
+        }
+        if (i === this.opts.selected)
+            return;
+        this.opts.selected = i;
+        this.invalidate();
+        this.opts.onSelect?.(i);
+    }
+    /** The item index under panel px `y`, or -1 between/after the items. */
+    rowAt(y) {
+        const r = this.layoutRect;
+        const i = Math.floor((y - r.y - this.t.borderWidth + this.scroll) / this.rowHeight);
+        return i >= 0 && i < this.opts.items.length ? i : -1;
+    }
+    paint(p, r) {
+        const t = this.t;
+        this.frame(p, r, t.radiusS, () => {
+            const k = t.tokens;
+            const o = this.opts;
+            p.fillRoundRect(r, t.radiusS, k.colorSurfaceAlt);
+            const ctx = p.ctx;
+            ctx.save();
+            const bw = t.borderWidth;
+            const inner = { x: r.x + bw, y: r.y + bw, w: r.w - bw * 2, h: r.h - bw * 2 };
+            ctx.beginPath();
+            ctx.rect(inner.x, inner.y, inner.w, inner.h);
+            ctx.clip();
+            const rh = this.rowHeight;
+            const first = Math.floor(this.scroll / rh);
+            const last = Math.min(o.items.length - 1, Math.ceil((this.scroll + inner.h) / rh));
+            const row = { x: inner.x, y: 0, w: inner.w, h: rh };
+            for (let i = first; i <= last; i++) {
+                row.y = inner.y + i * rh - this.scroll;
+                if (i === o.selected)
+                    p.fillRoundRect(row, 0, k.colorAccent);
+                else if (i % 2 === 1)
+                    p.fillRoundRect(row, 0, 'rgba(255, 255, 255, 0.03)');
+                p.text(o.items[i], row, t.fontSizeM, i === o.selected ? k.colorAccentText : k.colorText, 'left', t.space3);
+            }
+            ctx.restore();
+            if (this.hover)
+                p.fillRoundRect(r, t.radiusS, HOVER_TINT);
+            p.strokeRoundRect(r, t.radiusS, k.colorBorder, bw);
+            // Scrollbar when the items overflow.
+            const max = this.maxScroll;
+            if (max > 0) {
+                const total = o.items.length * rh;
+                const barH = Math.max(rh, (inner.h * inner.h) / total);
+                const barY = inner.y + (this.scroll / max) * (inner.h - barH);
+                const bar = {
+                    x: inner.x + inner.w - t.space2 - 2,
+                    y: barY,
+                    w: t.space2,
+                    h: barH,
+                };
+                p.fillRoundRect(bar, t.space2 / 2, k.colorTextMuted);
+            }
+        });
+    }
+    pointerDown(_x, y) {
+        if (this.disabled)
+            return;
+        this.down = true;
+        this.dragging = false;
+        this.pressY = y;
+        this.pressScroll = this.scroll;
+    }
+    pointerMove(_x, y, down) {
+        if (!this.down || !down)
+            return;
+        const dy = y - this.pressY;
+        if (!this.dragging && Math.abs(dy) > LIST_DRAG_PX)
+            this.dragging = true;
+        if (this.dragging)
+            this.setScroll(this.pressScroll - dy);
+    }
+    pointerUp(_x, y, inside) {
+        if (!this.down)
+            return;
+        this.down = false;
+        if (this.dragging) {
+            this.dragging = false;
+            return;
+        }
+        if (inside) {
+            const i = this.rowAt(y);
+            if (i >= 0)
+                this.select(i);
+        }
+    }
+    wheel(dy) {
+        if (this.disabled || this.maxScroll === 0)
+            return false;
+        this.setScroll(this.scroll + dy);
+        return true;
+    }
+    activate() {
+        if (this.disabled)
+            return;
+        const i = this.opts.selected ?? -1;
+        if (i >= 0)
+            this.opts.onSelect?.(i);
+    }
+    key(e) {
+        if (this.disabled || this.opts.items.length === 0)
+            return false;
+        const sel = this.opts.selected ?? -1;
+        if (e.key === 'ArrowDown') {
+            this.select(Math.min(this.opts.items.length - 1, sel + 1));
+            return true;
+        }
+        if (e.key === 'ArrowUp') {
+            this.select(Math.max(0, sel - 1));
+            return true;
+        }
+        return false;
+    }
+}
+export class WorldProgress extends WorldWidget {
+    constructor(opts) {
+        super({ ...opts });
+    }
+    measure() {
+        return Math.round(this.t.space4);
+    }
+    paint(p, r) {
+        const t = this.t;
+        const k = t.tokens;
+        const radius = r.h / 2;
+        p.fillRoundRect(r, radius, k.colorSurfaceAlt);
+        const f = Math.min(1, Math.max(0, this.opts.value));
+        if (f > 0) {
+            const fill = { x: r.x, y: r.y, w: Math.max(r.h, r.w * f), h: r.h };
+            p.fillRoundRect(fill, radius, toneColor(t, this.opts.tone ?? 'accent'));
+        }
+        p.strokeRoundRect(r, radius, k.colorBorder, t.borderWidth);
+    }
+}
+// ---------------------------------------------------------------------------------------------
+// Factories (the names a game reaches for)
+export function label(opts) {
+    return new WorldLabel(opts);
+}
+export function button(opts) {
+    return new WorldButton(opts);
+}
+export function toggle(opts) {
+    return new WorldToggle(opts);
+}
+export function slider(opts) {
+    return new WorldSlider(opts);
+}
+export function list(opts) {
+    return new WorldList(opts);
+}
+export function progress(opts) {
+    return new WorldProgress(opts);
+}

package/dist/voxel/chunks.d.ts

@@ -0,0 +1,77 @@
+/**
+ * The chunk renderer: one `Mesh` per non-empty chunk of a `VoxelGrid`, remeshed through a
+ * `VoxelMesher` as chunks go dirty and drawn through `frame.mesh` after a frustum test on each
+ * chunk's bounding sphere. `update()` once per tick (requests for dirty chunks out, finished
+ * remeshes in and uploaded), `draw(frame, camera)` once per view.
+ *
+ * Each mesh is created on the chunk's first non-empty reply with `slack` times that reply's
+ * counts of room (at least `minQuads` quads), so the edits that follow rewrite it in place and
+ * `Mesh.growths` stays 0 until a chunk grows past its slack. A chunk that empties keeps its
+ * mesh with nothing to draw. Meshes carry no bounds of their own (`autoBounds` off); the
+ * reply's chunk-local sphere, offset by the chunk origin, is the one `draw` tests.
+ */
+import type { Camera } from '../render/camera.js';
+import type { Frame, InstanceParams } from '../render/frame.js';
+import type { Material } from '../render/material.js';
+import { type Mesh } from '../render/mesh.js';
+import type { Renderer } from '../render/renderer.js';
+import { Transform } from '../render/transform.js';
+import type { VoxelGrid } from './grid.js';
+import type { MeshChunkOptions } from './mesher.js';
+import { type VoxelMesher } from './worker-client.js';
+export interface VoxelChunksOptions extends MeshChunkOptions {
+    /** The block material every chunk is drawn with. */
+    material: Material;
+    /** Room factor on each mesh's first upload (1 = exact). Default 1.5. */
+    slack?: number;
+    /** Floor on a mesh's room, in quads. Default 64. */
+    minQuads?: number;
+    /** The mesher to request from. Default: an in-thread one over `grid` with these options. */
+    mesher?: VoxelMesher;
+    /** World position of the grid's corner. Default the origin. */
+    origin?: ArrayLike<number>;
+    /** Instance params (tint, params) every chunk draw carries. */
+    params?: InstanceParams;
+    /** Clock in ms for `stats.remeshMs`. Default `performance.now()`. */
+    now?: () => number;
+}
+export interface VoxelDrawStats {
+    /** Chunks drawn this call. */
+    drawn: number;
+    /** Non-empty chunks the camera did not see. */
+    culled: number;
+    /** Triangles drawn this call. */
+    triangles: number;
+}
+export interface VoxelChunksStats extends VoxelDrawStats {
+    /** Non-empty chunks (with a mesh that draws). */
+    chunks: number;
+    /** Sum of `Mesh.growths` over the chunk meshes. */
+    growths: number;
+    /** Remeshes requested and not yet applied. */
+    pending: number;
+    /** Remeshes applied so far. */
+    remeshes: number;
+    /** Request-to-upload time of the last applied remesh, ms. */
+    remeshMs: number;
+}
+export interface VoxelChunks {
+    readonly grid: VoxelGrid;
+    readonly material: Material;
+    readonly mesher: VoxelMesher;
+    /** Per chunk index: its mesh once it has drawn anything, else null. */
+    readonly meshes: readonly (Mesh | null)[];
+    /** Per chunk index: the transform placing it (the chunk origin plus `origin`). */
+    readonly transforms: readonly Transform[];
+    readonly stats: VoxelChunksStats;
+    /**
+     * Upload every finished remesh, then request one for every dirty chunk. Returns how many
+     * were uploaded. Call once per tick.
+     */
+    update(): number;
+    /** Push every visible non-empty chunk into `frame` and return the draw counts (`stats`). */
+    draw(frame: Frame, camera: Camera): VoxelDrawStats;
+    /** Destroy the meshes; dispose the mesher when this made it. */
+    dispose(): void;
+}
+export declare function createVoxelChunks(renderer: Renderer, grid: VoxelGrid, opts: VoxelChunksOptions): VoxelChunks;