DOM ENGINEV0.10.0FIZLET
Start

EMBED V0.10.0

fizlet/embed

Drop a game onto any page with one small config. palette - hex colours for the Board UI roles (anything else is ignored: no CSS injection) easterEgg - false: open now. true / {...}: stay dormant (tiny listeners only) until a trigger (key sequence, gesture on a selector, click on a selector), then lazy-load the game. toggle - a floating key to reopen / close once unlocked. Escape closes and restores the page. Lifted from Swarm Protocol's loader: keys typed in fields never count, only a position and a timestamp are kept for the sequence (never the typed text), and destroy() removes everything.

APISource ↗
fizlet/embed · GZIP2,016 B2.0 KB of a 2.5 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 { embed } from "https://coded-dot-design.github.io/fizlet/dist/embed.js";
NPM · COMING SOON
npm install fizlet   # not published yet
import { embed } from "fizlet/embed";
IN SHORT
embed(() => import("./game.js").then((m) => m.mount), {
  name: "blitz", palette: { cmd: "#8573ee" },
  easterEgg: { sequence: "konami" } });

API

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

EasterEgg interface

export interface EasterEgg {
    sequence?: "konami" | string[] | false;
    gesture?: {
        on: string;
        type: "hold-tap" | "double-tap" | "long-press";
    } | false;
    click?: string | false;
    scope?: {
        sequence?: Scope;
        gesture?: Scope;
        click?: Scope;
    };
    toggle?: boolean;
}

EmbedConfig interface

export interface EmbedConfig {
    /** Short id: data-<name>-trigger / data-<name>-ignore, the toggle label. */
    name: string;
    /** Label on the toggle key (default: name). */
    label?: string;
    palette?: Palette;
    easterEgg?: boolean | EasterEgg;
    /** With no easter egg: open right away (default) or wait closed behind the toggle key. */
    open?: boolean;
}

Mounted interface

export interface Mounted {
    destroy(): void;
}

Mount type

export type Mount = (host: HTMLElement, config: EmbedConfig) => Mounted;

embed function

export declare function embed(load: () => Promise<Mount> | Mount, cfg: EmbedConfig): {
    open: () => Promise<unknown>;
    close: () => void;
    unlock: () => void;
    readonly opened: boolean;
    readonly unlocked: boolean;
    /** Remove every listener, the toggle and the game (the game restores the page). */
    destroy(): void;
};