DOM ENGINEV0.10.0FIZLET
Start

PAD V0.10.0

fizlet/pad

Swappable on-screen controls for touch (and mouse). One move control (an analog stick, a d-pad or move keys) under one thumb and round arcade action keys under the other, all driving controls intents through press() / steer(): game code reads down, hit and axis and never knows which scheme is on screen. Swap with setScheme() at any time. Visuals are the Board UI kit's (.bui-pad, .bui-stick, .bui-dpad, .bui-arcade + roles): mount the pad inside a .bui root. Listeners are delegated on the pad's one element (bound to the engine's signal), so a scheme swap adds none; the element goes through the ledger.

APISource ↗
fizlet/pad · GZIP1,995 B1.9 KB of a 2.0 KB budget

Measured on this build: minified and gzipped with everything it imports, the way npm run size checks the budget in CI.

MODULES · hosted on this site
import { stickAt, dpadAt, pad } from "https://coded-dot-design.github.io/fizlet/dist/pad.js";
NPM · COMING SOON
npm install fizlet   # not published yet
import { stickAt, dpadAt, pad } from "fizlet/pad";

API

Every export, with its doc comment, read from the published type declarations of v0.10.0.

Scheme type

export type Scheme = "stick" | "dpad" | "buttons";

PadRole type

export type PadRole = "fire" | "aim" | "attack" | "advance" | "fallin" | "sys" | "cmd" | "go" | "flag";

PadAction interface

export interface PadAction {
    /** The `controls` intent this key drives. */
    intent: string;
    /** Short caption on the key (e.g. "FIRE"); empty for icon-only. */
    label: string;
    /** Accessible name (default: label), e.g. "Hold to fire the cannon (Space)". */
    name?: string;
    /** Inline SVG markup (trusted game code). */
    icon?: string;
    /** Shortcut chip for fine pointers, e.g. "SPACE". */
    key?: string;
    /** Kit role colour (default: "fire" for the first action, "sys" for the rest). */
    role?: PadRole;
    /** Held while the finger is down (default: a tap = one press, one `hit`). */
    hold?: boolean;
    /** Each tap flips the intent: `down(intent)` is the switch; `press(intent, on)` from code flips the key too. */
    toggle?: boolean;
}

PadOptions interface

export interface PadOptions {
    /** "stick" (analog, drives the stick axes), "dpad" (one finger, 8-way) or "buttons" (a key per move intent). */
    scheme?: Scheme;
    /** Action keys; the first is the big primary key. */
    actions?: PadAction[];
    /** Which thumb gets the action keys (default "right"); the move control takes the other. */
    side?: "left" | "right";
    /** Where the pad goes (default: the engine root). Must be inside a `.bui` root for the kit look. */
    host?: HTMLElement;
    /** Move intents [up, down, left, right] for the d-pad and move keys; "" leaves one out. */
    move?: string[];
}

stickAt function

Stick vector from a drag offset in radii: clamped to the unit circle, dead zone rescaled so a light push still creeps (Battlefield's feel). Writes out[0], out[1]; never allocates.

export declare function stickAt(dx: number, dy: number, out: Float64Array): void;

dpadAt function

D-pad direction mask (up 1, down 2, left 4, right 8; diagonals combine) from a drag offset in radii.

export declare function dpadAt(dx: number, dy: number): number;

pad function

export declare function pad(e: Engine, c: Controls, o?: PadOptions): {
    /** The pad's root element (`.bui-pad`). */
    el: HTMLDivElement;
    readonly scheme: Scheme;
    setScheme: (s: Scheme) => void;
    /** Let go of every finger, remove the listeners and the pad (engine.destroy() does this too). */
    destroy(): void;
};

Pad type

export type Pad = ReturnType<typeof pad>;