@thunderclap-engine/engine 0.0.0-stage → 1.1.0

package/dist/ui/inventory-drag.js

@@ -0,0 +1,394 @@
+import { ensureInventoryStyles } from './inventory.js';
+import { prefersReducedMotionIn } from './styles.js';
+/** A drag context over `host.layers.hud`. See the module comment. */
+export function createDragContext(host, opts = {}) {
+    const layer = host.layers.hud;
+    const doc = layer.ownerDocument;
+    ensureInventoryStyles(doc);
+    const longPressMs = opts.longPressMs ?? 160;
+    const moveThreshold = opts.moveThreshold ?? 4;
+    const panThreshold = opts.panThreshold ?? 10;
+    const returnMs = opts.returnMs ?? 120;
+    const targets = [];
+    let pending = null;
+    let drag = null;
+    let carry = null;
+    let ghost = null;
+    let ghostDx = 0;
+    let ghostDy = 0;
+    let layerX = 0;
+    let layerY = 0;
+    let overTarget = null;
+    let overSpot = null;
+    let active = false;
+    const link = {
+        pointerStart,
+        carryStart(pick) {
+            if (drag || carry)
+                cancel();
+            carry = { pick, target: pick.source };
+        },
+        cross(from, dir, pick) {
+            const order = sorted();
+            const i = order.indexOf(from);
+            if (i < 0)
+                return false;
+            const step = dir === 'right' ? 1 : -1;
+            for (let j = i + step; j >= 0 && j < order.length; j += step) {
+                const next = order[j];
+                if (!next.carryIn)
+                    continue;
+                if (carry && carry.target !== pick.source)
+                    carry.target.carryEnd?.();
+                carry = { pick, target: next };
+                next.carryIn(pick, dir === 'right' ? 'left' : 'right');
+                return true;
+            }
+            return false;
+        },
+        commit(target, spot, pick) {
+            if (!target.canDrop(spot, pick))
+                return false;
+            land(target, spot, pick);
+            endCarry();
+            return true;
+        },
+        cancelCarry() {
+            endCarry();
+        },
+        pointerActive: () => active,
+    };
+    function sorted() {
+        return [...targets].sort((a, b) => {
+            const ra = a.element.getBoundingClientRect();
+            const rb = b.element.getBoundingClientRect();
+            // Same band (overlapping vertically): left to right; else top to bottom.
+            const overlap = Math.min(ra.bottom, rb.bottom) - Math.max(ra.top, rb.top);
+            return overlap > 0 ? ra.left - rb.left : ra.top - rb.top;
+        });
+    }
+    function land(target, spot, pick) {
+        if (target !== pick.source && target.grid && pick.source.release) {
+            const to = { grid: target.grid, col: spot.col, row: spot.row };
+            pick.source.release(pick, to);
+        }
+        target.drop(spot, pick);
+    }
+    function endCarry() {
+        if (!carry)
+            return;
+        const c = carry;
+        carry = null;
+        c.pick.source.carryEnd?.();
+        if (c.target !== c.pick.source)
+            c.target.carryEnd?.();
+    }
+    // ---------------------------------------------------------------- pointer
+    function pointerStart(pick, e) {
+        if (pending || drag)
+            return;
+        if (carry)
+            endCarry();
+        pending = {
+            pick,
+            id: e.pointerId,
+            type: e.pointerType,
+            x0: e.clientX,
+            y0: e.clientY,
+            timer: null,
+        };
+        doc.addEventListener('pointermove', onMove, true);
+        doc.addEventListener('pointerup', onUp, true);
+        doc.addEventListener('pointercancel', onCancel, true);
+        if (e.pointerType === 'touch') {
+            pending.timer = setTimeout(() => {
+                if (pending)
+                    begin(pending, pending.x0, pending.y0);
+            }, longPressMs);
+        }
+    }
+    function begin(p, x, y) {
+        if (p.timer !== null)
+            clearTimeout(p.timer);
+        pending = null;
+        drag = p.pick;
+        active = true;
+        const srcEl = p.pick.from.grid.spots()[p.pick.from.row * p.pick.from.grid.cols + p.pick.from.col].el;
+        const box = srcEl.querySelector('.tc-cell-item');
+        const rect = (box ?? srcEl).getBoundingClientRect();
+        const lr = layer.getBoundingClientRect();
+        layerX = lr.left;
+        layerY = lr.top;
+        ghostDx = p.x0 - rect.left;
+        ghostDy = p.y0 - rect.top;
+        ghost = doc.createElement('div');
+        ghost.className = 'tc-drag-ghost';
+        ghost.setAttribute('aria-hidden', 'true');
+        ghost.style.width = `${rect.width}px`;
+        ghost.style.height = `${rect.height}px`;
+        if (box) {
+            const clone = box.cloneNode(true);
+            clone.style.removeProperty('--tc-span-w');
+            ghost.append(clone);
+        }
+        layer.append(ghost);
+        doc.addEventListener('touchmove', preventTouch, { passive: false, capture: true });
+        track(x, y);
+    }
+    function preventTouch(e) {
+        if (e.cancelable)
+            e.preventDefault();
+    }
+    function track(x, y) {
+        if (!ghost || !drag)
+            return;
+        ghost.style.transform = `translate(${x - ghostDx - layerX}px, ${y - ghostDy - layerY}px)`;
+        let t = null;
+        let s = null;
+        for (let i = 0; i < targets.length; i++) {
+            s = targets[i].spotAt(x, y);
+            if (s) {
+                t = targets[i];
+                break;
+            }
+        }
+        if (t === overTarget && s === overSpot)
+            return;
+        if (overTarget && overTarget !== t)
+            overTarget.hover(null, false);
+        overTarget = t;
+        overSpot = s;
+        if (t && s)
+            t.hover(s, !t.canDrop(s, drag));
+    }
+    function onMove(e) {
+        if (pending) {
+            if (e.pointerId !== pending.id)
+                return;
+            const dx = e.clientX - pending.x0;
+            const dy = e.clientY - pending.y0;
+            const d = Math.hypot(dx, dy);
+            if (pending.type === 'touch') {
+                if (d > panThreshold)
+                    stop();
+            }
+            else if (d >= moveThreshold)
+                begin(pending, e.clientX, e.clientY);
+            return;
+        }
+        if (drag)
+            track(e.clientX, e.clientY);
+    }
+    function onUp(e) {
+        if (pending) {
+            if (e.pointerId === pending.id)
+                stop();
+            return;
+        }
+        if (!drag)
+            return;
+        const pick = drag;
+        track(e.clientX, e.clientY);
+        if (overTarget && overSpot && overTarget.canDrop(overSpot, pick)) {
+            land(overTarget, overSpot, pick);
+            finish(false);
+        }
+        else {
+            finish(true);
+        }
+    }
+    function onCancel() {
+        if (pending)
+            stop();
+        else if (drag)
+            finish(true);
+    }
+    /** Stop listening (a pending press ended without a drag). */
+    function stop() {
+        if (pending?.timer !== null && pending?.timer !== undefined)
+            clearTimeout(pending.timer);
+        pending = null;
+        detach();
+    }
+    function detach() {
+        doc.removeEventListener('pointermove', onMove, true);
+        doc.removeEventListener('pointerup', onUp, true);
+        doc.removeEventListener('pointercancel', onCancel, true);
+        doc.removeEventListener('touchmove', preventTouch, true);
+    }
+    /** End a drag: the ghost goes away, or flies back to the source cell first. */
+    function finish(snapBack) {
+        const pick = drag;
+        drag = null;
+        detach();
+        overTarget?.hover(null, false);
+        overTarget = null;
+        overSpot = null;
+        const g = ghost;
+        ghost = null;
+        // The click that follows this release must not activate the cell.
+        setTimeout(() => {
+            active = false;
+        }, 0);
+        if (!g)
+            return;
+        if (!snapBack || !pick || prefersReducedMotionIn(doc.defaultView ?? undefined)) {
+            g.remove();
+            return;
+        }
+        const src = pick.from.grid.spots()[pick.from.row * pick.from.grid.cols + pick.from.col]?.el;
+        const box = src?.querySelector('.tc-cell-item') ?? src;
+        if (!box) {
+            g.remove();
+            return;
+        }
+        const r = box.getBoundingClientRect();
+        g.setAttribute('data-return', '');
+        let done = false;
+        const end = () => {
+            if (done)
+                return;
+            done = true;
+            g.remove();
+        };
+        g.addEventListener('transitionend', end);
+        setTimeout(end, returnMs + 80);
+        // Next frame, so the transition sees a change.
+        const win = doc.defaultView;
+        const next = win?.requestAnimationFrame
+            ? (fn) => win.requestAnimationFrame(fn)
+            : (fn) => setTimeout(fn, 0);
+        next(() => {
+            g.style.transform = `translate(${r.left - layerX}px, ${r.top - layerY}px)`;
+        });
+    }
+    function cancel() {
+        if (pending)
+            stop();
+        if (drag)
+            finish(true);
+        if (carry)
+            endCarry();
+    }
+    return {
+        register(t) {
+            if (targets.includes(t))
+                return;
+            targets.push(t);
+            t.link = link;
+        },
+        unregister(t) {
+            const i = targets.indexOf(t);
+            if (i < 0)
+                return;
+            targets.splice(i, 1);
+            if (t.link === link)
+                t.link = null;
+            if (drag?.source === t || overTarget === t || carry?.pick.source === t || carry?.target === t)
+                cancel();
+        },
+        get dragging() {
+            return drag ?? carry?.pick ?? null;
+        },
+        cancel,
+        get targets() {
+            return sorted();
+        },
+        destroy() {
+            cancel();
+            for (const t of targets)
+                if (t.link === link)
+                    t.link = null;
+            targets.length = 0;
+        },
+    };
+}
+/**
+ * A `ui.slots` strip as a `DropTarget`: a drag over a slot highlights it and a drop calls
+ * `onAssign(index, item, from)`; the item stays in its grid (an assignment, not a move). Slots
+ * are not focusable, so the pad walk skips the strip.
+ */
+export function slotsTarget(slots, onAssign, opts = {}) {
+    const els = [...slots.el.querySelectorAll('.tc-slot')];
+    const spots = els.map((el, i) => ({ el, col: i, row: 0 }));
+    const hoverMs = opts.hoverMs ?? 250;
+    let timer = null;
+    let shown = null;
+    function spotAt(x, y) {
+        const r = slots.el.getBoundingClientRect();
+        if (x < r.left || y < r.top || x >= r.right || y >= r.bottom)
+            return null;
+        for (let i = 0; i < els.length; i++) {
+            const b = els[i].getBoundingClientRect();
+            if (x >= b.left && x < b.right && y >= b.top && y < b.bottom)
+                return spots[i];
+        }
+        return null;
+    }
+    function slotIndex(target) {
+        const el = target?.closest?.('.tc-slot') ?? null;
+        return el ? els.indexOf(el) : -1;
+    }
+    function hideCard() {
+        if (timer !== null) {
+            clearTimeout(timer);
+            timer = null;
+        }
+        if (shown) {
+            opts.card?.hide();
+            shown = null;
+        }
+    }
+    const onOver = (e) => {
+        const i = slotIndex(e.target);
+        if (i < 0 || !opts.card || !opts.describe || timer !== null)
+            return;
+        timer = setTimeout(() => {
+            timer = null;
+            const d = opts.describe?.(i);
+            if (!d)
+                return;
+            opts.card?.set(d);
+            shown = els[i];
+            opts.card?.show(shown);
+        }, hoverMs);
+    };
+    const onOut = (e) => {
+        if (slotIndex(e.relatedTarget) === slotIndex(e.target) && slotIndex(e.target) >= 0)
+            return;
+        hideCard();
+    };
+    // The strip is `pointer-events: none` by default; hovering needs it on.
+    if (opts.card) {
+        slots.el.style.pointerEvents = 'auto';
+        slots.el.addEventListener('pointerover', onOver);
+        slots.el.addEventListener('pointerout', onOut);
+    }
+    return {
+        element: slots.el,
+        slots,
+        link: null,
+        spotAt,
+        spots: () => spots,
+        canDrop: (spot, pick) => opts.canAssign?.(spot.col, pick.item, pick.from) ?? true,
+        drop(spot, pick) {
+            onAssign(spot.col, pick.item, pick.from);
+        },
+        hover(spot, reject) {
+            for (const el of els) {
+                el.removeAttribute('data-over');
+                el.removeAttribute('data-reject');
+            }
+            if (!spot)
+                return;
+            spot.el.setAttribute('data-over', '');
+            if (reject)
+                spot.el.setAttribute('data-reject', '');
+        },
+        remove() {
+            hideCard();
+            slots.el.removeEventListener('pointerover', onOver);
+            slots.el.removeEventListener('pointerout', onOut);
+        },
+    };
+}

package/dist/ui/inventory-grid.d.ts

@@ -0,0 +1,66 @@
+import { type CellItem, type CellRef, type DropTarget, type GridCell, type InventoryLabels } from './inventory.js';
+import type { Card, CardOptions } from './inventory-card.js';
+export type PadAction = 'select' | 'back' | 'secondary' | 'up' | 'down' | 'left' | 'right';
+export interface GridOptions {
+    cols: number;
+    rows: number;
+    /** Cell size, theme px. Default 56. */
+    cellSize?: number;
+    /** Gap between cells, theme px. Default 4. */
+    gap?: number;
+    /** Accessible name of the grid. */
+    label?: string;
+    /**
+     * The game's rule for a move, asked after the structural one (in bounds, the span's cells
+     * free). `to.grid` may be another grid. The refs are scratch objects: do not keep them.
+     */
+    canDrop?: (from: CellRef, to: CellRef, item: CellItem) => boolean;
+    /** An item moved: `from` or `to` is in this grid (both, for a move within it). */
+    onMove?: (from: CellRef, to: CellRef, item: CellItem) => void;
+    /** Enter, Space or a click on an item. */
+    onActivate?: (cell: GridCell, item: CellItem) => void;
+    /** The focused cell changed. */
+    onFocus?: (cell: GridCell) => void;
+    /**
+     * The secondary button, Shift+F10, the ContextMenu key or the pad's `secondary` on a cell with
+     * an item. `anchor` is the cell element: open a `ui.contextList(items, { at: anchor, ... })`.
+     */
+    onContext?: (cell: GridCell, item: CellItem, anchor: HTMLElement) => void;
+    /** A card to show on focus, and on hover after `hoverMs`; `describe` fills it per item. */
+    card?: Card;
+    describe?: (item: CellItem, cell: GridCell) => CardOptions | null;
+    /** Hover delay before the card shows, ms. Default 250. */
+    hoverMs?: number;
+    labels?: InventoryLabels;
+}
+export interface GridEntry {
+    col: number;
+    row: number;
+    item: CellItem;
+}
+export interface Grid extends DropTarget {
+    readonly element: HTMLElement;
+    readonly cols: number;
+    readonly rows: number;
+    /** Put `item` at `cell` (clearing what covered it), or clear the cell. False if the span does not fit. */
+    set(cell: GridCell, item: CellItem | null): boolean;
+    /** The item anchored at or covering `cell`. */
+    get(cell: GridCell): CellItem | null;
+    /** The anchor cell of `item` (by identity), or null. */
+    find(item: CellItem): GridCell | null;
+    /** Move the item anchored at `from` to `to` if its span fits there. No `onMove`. */
+    move(from: GridCell, to: GridCell): boolean;
+    /** Every anchored item, reading order. A fresh array each call. */
+    readonly items: GridEntry[];
+    /** Move the roving tabindex and the focus to `cell`. */
+    focus(cell: GridCell): void;
+    readonly focused: Readonly<GridCell>;
+    /** The item held by a keyboard or pad pick-up, or null. */
+    readonly held: CellItem | null;
+    /** A pad action (the game maps its input to these); the keyboard arrives as key events. */
+    act(action: PadAction): boolean;
+    clear(): void;
+    remove(): void;
+}
+/** An inventory grid. See the module comment. */
+export declare function grid(opts: GridOptions): Grid;