@benev/tact 0.1.0-3 → 0.1.0-4

package/x/deck/views/deck-overlay/style.css.js

@@ -0,0 +1,109 @@
+import { css } from "lit";
+export default css `
+
+:host {
+	--gap: 0.3em;
+	pointer-events: none;
+	cursor: default;
+	user-select: none;
+}
+
+.portlist {
+	pointer-events: none;
+
+	display: flex;
+	align-items: start;
+
+	width: max-content;
+	gap: var(--gap);
+	padding: 0.5em;
+
+	color: #fff8;
+	background: #222a;
+	border-radius: 1em;
+
+	opacity: 0;
+	transition: opacity 300ms linear;
+
+	&[data-active] {
+		opacity: 1;
+		pointer-events: all;
+	}
+
+	.port {
+		flex: 1 0 0;
+		display: flex;
+		flex-direction: column;
+
+		min-width: 6em;
+		gap: var(--gap);
+
+		> * {
+			color: white;
+			font-weight: bold;
+			text-shadow: 0.05em 0.05em 0.1em #0008;
+			text-transform: uppercase;
+		}
+
+		header {
+			text-align: center;
+			color: #fff8;
+		}
+
+		.device {
+			display: flex;
+			flex-direction: column;
+			gap: var(--gap);
+
+			box-shadow: 0.1em 0.2em 0.7em #0004;
+			background: color-mix(in srgb, #fffa, var(--color) 50%);
+			border-top: 2px solid #fff8;
+			border-bottom: 2px solid #0004;
+			border-radius: 0.5em;
+
+			.row {
+				display: flex;
+				align-items: center;
+
+				&.primary {
+					justify-content: space-between;
+				}
+
+				&.secondary {
+					justify-content: center;
+				}
+			}
+
+			.icon {
+				font-size: 1.5em;
+			}
+
+			.label {
+				font-family: monospace;
+				font-size: 0.8em;
+				opacity: 0.5;
+				line-height: 0.9em;
+			}
+
+			button {
+				opacity: 0.2;
+				cursor: pointer;
+				padding: 0 0.2em;
+				font-family: monospace;
+				font-size: 1.5em;
+				font-weight: bold;
+
+				background: transparent;
+				border: 1px solid transparent;
+				text-shadow: inherit;
+
+				&:is(:hover, :focus-visible) {
+					opacity: 1;
+				}
+			}
+		}
+	}
+}
+
+`;
+//# sourceMappingURL=style.css.js.map

package/x/deck/views/deck-overlay/style.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../../../s/deck/views/deck-overlay/style.css.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0GjB,CAAA"}

package/x/deck/views/framework.d.ts

@@ -0,0 +1,3 @@
+import { Content, Use } from "@e280/sly";
+import { Deck } from "../deck.js";
+export declare function deckView(fn: (deck: Deck<any>) => (use: Use) => Content): (deck: Deck<any>) => import("@e280/sly").View<[]>;

package/x/deck/views/framework.js

@@ -0,0 +1,8 @@
+import { view } from "@e280/sly";
+export function deckView(fn) {
+    return (deck) => {
+        const fn2 = fn(deck);
+        return view(use => () => fn2(use));
+    };
+}
+//# sourceMappingURL=framework.js.map

package/x/deck/views/framework.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"framework.js","sourceRoot":"","sources":["../../../s/deck/views/framework.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,IAAI,EAAC,MAAM,WAAW,CAAA;AAG5C,MAAM,UAAU,QAAQ,CACtB,EAA8C;IAG/C,OAAO,CAAC,IAAe,EAAE,EAAE;QAC1B,MAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,CAAA;QACpB,OAAO,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;IACnC,CAAC,CAAA;AACF,CAAC"}

package/x/demo/game/game.d.ts

@@ -0,0 +1,20 @@
+import { Logic } from "./parts/logic.js";
+import { State } from "./parts/state.js";
+import { Renderer } from "./parts/renderer.js";
+import { Device } from "../../core/devices/device.js";
+import { GameDeck } from "./parts/game-bindings.js";
+export declare class Game {
+    deck: GameDeck;
+    static load(): Promise<Game>;
+    logic: Logic;
+    dispose: {
+        (): void;
+        schedule(fn: () => void): any;
+    };
+    state: State;
+    renderer: Renderer;
+    constructor(deck: GameDeck);
+    plug(device: Device): () => void;
+    unplug(device: Device): void;
+    loop(hz: number): () => void;
+}

package/x/demo/game/game.js

@@ -0,0 +1,63 @@
+import { disposer, nap, repeat } from "@e280/stz";
+import { Logic } from "./parts/logic.js";
+import { State } from "./parts/state.js";
+import { Deck } from "../../deck/deck.js";
+import { Players } from "./parts/player.js";
+import { Renderer } from "./parts/renderer.js";
+import { VirtualDevice } from "./parts/virtual-device.js";
+import { gameBindings } from "./parts/game-bindings.js";
+import { autoGamepads } from "../../core/devices/auto-gamepads.js";
+import { localStorageKv } from "../../deck/parts/local-storage-kv.js";
+import { PrimaryDevice } from "../../core/devices/standard/primary.js";
+export class Game {
+    deck;
+    static async load() {
+        return new this(await Deck.load({
+            portCount: 4,
+            kv: localStorageKv(),
+            bindings: gameBindings,
+        }));
+    }
+    logic;
+    dispose = disposer();
+    state = new State();
+    renderer = new Renderer(this.state);
+    constructor(deck) {
+        this.deck = deck;
+        // add an icon for our demo virtual device
+        this.deck.deviceSkins.icons.add([VirtualDevice, "🔘"]);
+        // establish game logic
+        this.logic = new Logic(this.state, new Players(deck.hub, this.state));
+        // on hub update, set agent.alive based on port status
+        this.dispose.schedule(this.deck.hub.on(() => {
+            for (const player of this.logic.players) {
+                player.agent.alive = player.port.devices.size > 0;
+                const [firstDevice] = player.port.devices;
+                player.agent.color = firstDevice
+                    ? this.deck.deviceSkins.get(firstDevice).color
+                    : "#444";
+            }
+        }));
+        // plug in initial devices
+        this.plug(new PrimaryDevice());
+        this.plug(new VirtualDevice(deck.hub));
+        // dynamically plug in detected gamepads
+        this.dispose.schedule(autoGamepads(deck.hub.plug));
+    }
+    plug(device) {
+        this.deck.hub.plug(device);
+        return () => this.unplug(device);
+    }
+    unplug(device) {
+        this.deck.hub.unplug(device);
+    }
+    loop(hz) {
+        return repeat(async () => {
+            await nap(1000 / hz);
+            this.deck.hub.poll();
+            this.logic.tick();
+            this.renderer.render();
+        });
+    }
+}
+//# sourceMappingURL=game.js.map

package/x/demo/game/game.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"game.js","sourceRoot":"","sources":["../../../s/demo/game/game.ts"],"names":[],"mappings":"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"}

package/x/demo/game/parts/agent.d.ts

@@ -0,0 +1,7 @@
+import { Vec2 } from "@benev/math";
+export declare class Agent {
+    label: string;
+    alive: boolean;
+    color: string;
+    position: Vec2;
+}

package/x/demo/game/parts/agent.js

@@ -0,0 +1,8 @@
+import { Vec2 } from "@benev/math";
+export class Agent {
+    label = "0";
+    alive = true;
+    color = "#444";
+    position = Vec2.zero();
+}
+//# sourceMappingURL=agent.js.map

package/x/demo/game/parts/agent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent.js","sourceRoot":"","sources":["../../../../s/demo/game/parts/agent.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,aAAa,CAAA;AAEhC,MAAM,OAAO,KAAK;IACjB,KAAK,GAAG,GAAG,CAAA;IACX,KAAK,GAAG,IAAI,CAAA;IACZ,KAAK,GAAG,MAAM,CAAA;IACd,QAAQ,GAAG,IAAI,CAAC,IAAI,EAAE,CAAA;CACtB"}

package/x/demo/game/parts/game-bindings.d.ts

@@ -0,0 +1,15 @@
+import { Deck } from "../../../deck/deck.js";
+import { Hub } from "../../../core/hub/hub.js";
+import { Port } from "../../../core/hub/port.js";
+export type GameBindings = typeof gameBindings;
+export type GamePort = Port<GameBindings>;
+export type GameDeck = Deck<GameBindings>;
+export type GameHub = Hub<GameBindings>;
+export declare const gameBindings: {
+    gameplay: {
+        up: ["or", string, string, string, string, string];
+        down: ["or", string, string, string, string, string];
+        left: ["or", string, string, string, string, string];
+        right: ["or", string, string, string, string, string];
+    };
+};

package/x/demo/game/parts/game-bindings.js

@@ -0,0 +1,10 @@
+import { asBindings } from "../../../core/bindings/types.js";
+export const gameBindings = asBindings({
+    gameplay: {
+        up: ["or", "KeyW", "ArrowUp", "stick.up", "gamepad.stick.left.up", "gamepad.stick.right.up"],
+        down: ["or", "KeyS", "ArrowDown", "stick.down", "gamepad.stick.left.down", "gamepad.stick.right.down"],
+        left: ["or", "KeyA", "ArrowLeft", "stick.left", "gamepad.stick.left.left", "gamepad.stick.right.left"],
+        right: ["or", "KeyD", "ArrowRight", "stick.right", "gamepad.stick.left.right", "gamepad.stick.right.right"],
+    },
+});
+//# sourceMappingURL=game-bindings.js.map

package/x/demo/game/parts/game-bindings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"game-bindings.js","sourceRoot":"","sources":["../../../../s/demo/game/parts/game-bindings.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,UAAU,EAAC,MAAM,iCAAiC,CAAA;AAO1D,MAAM,CAAC,MAAM,YAAY,GAAG,UAAU,CAAC;IACtC,QAAQ,EAAE;QACT,EAAE,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,uBAAuB,EAAE,wBAAwB,CAAC;QAC5F,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,yBAAyB,EAAE,0BAA0B,CAAC;QACtG,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,yBAAyB,EAAE,0BAA0B,CAAC;QACtG,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,0BAA0B,EAAE,2BAA2B,CAAC;KAC3G;CACD,CAAC,CAAA"}

package/x/demo/game/parts/logic.d.ts

@@ -0,0 +1,8 @@
+import { State } from "./state.js";
+import { Players } from "./player.js";
+export declare class Logic {
+    state: State;
+    players: Players;
+    constructor(state: State, players: Players);
+    tick(): void;
+}

package/x/demo/game/parts/logic.js

@@ -0,0 +1,21 @@
+import { Vec2 } from "@benev/math";
+export class Logic {
+    state;
+    players;
+    constructor(state, players) {
+        this.state = state;
+        this.players = players;
+    }
+    tick() {
+        for (const player of this.players) {
+            const { agent, port: { actions } } = player;
+            const speed = 1;
+            agent.position.y += speed * actions.gameplay.up.value;
+            agent.position.y -= speed * actions.gameplay.down.value;
+            agent.position.x -= speed * actions.gameplay.left.value;
+            agent.position.x += speed * actions.gameplay.right.value;
+            agent.position.clamp(Vec2.zero(), this.state.arenaSize);
+        }
+    }
+}
+//# sourceMappingURL=logic.js.map

package/x/demo/game/parts/logic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logic.js","sourceRoot":"","sources":["../../../../s/demo/game/parts/logic.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,aAAa,CAAA;AAIhC,MAAM,OAAO,KAAK;IAET;IACA;IAFR,YACQ,KAAY,EACZ,OAAgB;QADhB,UAAK,GAAL,KAAK,CAAO;QACZ,YAAO,GAAP,OAAO,CAAS;IACrB,CAAC;IAEJ,IAAI;QACH,KAAK,MAAM,MAAM,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACnC,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,EAAC,OAAO,EAAC,EAAC,GAAG,MAAM,CAAA;YACvC,MAAM,KAAK,GAAG,CAAC,CAAA;YACf,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAA;YACrD,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAA;YACvD,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAA;YACvD,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,KAAK,GAAG,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAA;YACxD,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;QACxD,CAAC;IACF,CAAC;CACD"}

package/x/demo/game/parts/player.d.ts

@@ -0,0 +1,14 @@
+import { Agent } from "./agent.js";
+import { State } from "./state.js";
+import { GameHub, GamePort } from "./game-bindings.js";
+export declare class Player {
+    port: GamePort;
+    agent: Agent;
+    constructor(port: GamePort, agent: Agent);
+}
+export declare class Players {
+    #private;
+    constructor(hub: GameHub, state: State);
+    [Symbol.iterator](): MapIterator<Player>;
+    require(port: GamePort): Player;
+}

package/x/demo/game/parts/player.js

@@ -0,0 +1,26 @@
+import { MapG } from "@e280/stz";
+export class Player {
+    port;
+    agent;
+    constructor(port, agent) {
+        this.port = port;
+        this.agent = agent;
+    }
+}
+export class Players {
+    #map = new MapG();
+    constructor(hub, state) {
+        for (const [index, port] of hub.ports.entries()) {
+            const label = (index + 1).toString();
+            this.#map.set(port, new Player(port, state.makeAgent(label)));
+        }
+    }
+    ;
+    [Symbol.iterator]() {
+        return this.#map.values();
+    }
+    require(port) {
+        return this.#map.require(port);
+    }
+}
+//# sourceMappingURL=player.js.map

package/x/demo/game/parts/player.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"player.js","sourceRoot":"","sources":["../../../../s/demo/game/parts/player.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,WAAW,CAAA;AAK9B,MAAM,OAAO,MAAM;IAEV;IACA;IAFR,YACQ,IAAc,EACd,KAAY;QADZ,SAAI,GAAJ,IAAI,CAAU;QACd,UAAK,GAAL,KAAK,CAAO;IACjB,CAAC;CACJ;AAED,MAAM,OAAO,OAAO;IACnB,IAAI,GAAG,IAAI,IAAI,EAAoB,CAAA;IAEnC,YAAY,GAAY,EAAE,KAAY;QACrC,KAAK,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC;YACjD,MAAM,KAAK,GAAG,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAA;YACpC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;QAC9D,CAAC;IACF,CAAC;IAED,CAAC;IAAA,CAAC,MAAM,CAAC,QAAQ,CAAC;QACjB,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAA;IAC1B,CAAC;IAED,OAAO,CAAC,IAAc;QACrB,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;IAC/B,CAAC;CACD"}

package/x/demo/game/parts/renderer.d.ts

@@ -0,0 +1,13 @@
+import { Vec2 } from "@benev/math";
+import { State } from "./state.js";
+export declare class Renderer {
+    #private;
+    state: State;
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    constructor(state: State);
+    percent(n: number): number;
+    /** take a game-state position and resolve it into canvas coordinates */
+    resolve(position: Vec2): Vec2;
+    render(): void;
+}

package/x/demo/game/parts/renderer.js

@@ -0,0 +1,91 @@
+export class Renderer {
+    state;
+    canvas = (() => {
+        const canvas = document.createElement("canvas");
+        canvas.width = 200;
+        canvas.height = 100;
+        return canvas;
+    })();
+    ctx = this.canvas.getContext("2d");
+    constructor(state) {
+        this.state = state;
+    }
+    percent(n) {
+        const shorty = Math.min(this.canvas.width, this.canvas.height);
+        return Math.ceil(shorty * (n / 100));
+    }
+    /** take a game-state position and resolve it into canvas coordinates */
+    resolve(position) {
+        return position.clone()
+            // 0-1 relative to arena scale
+            .divide(this.state.arenaSize)
+            // flip y axis
+            .morph(v => { v.y = 1 - v.y; })
+            // stretch to the size of the canvas
+            .multiply_(this.canvas.width, this.canvas.height);
+    }
+    render() {
+        const { state } = this;
+        this.#renderBackground();
+        const agents = [...state.agents].reverse();
+        const dead = agents.filter(a => !a.alive);
+        const alive = agents.filter(a => a.alive);
+        for (const agent of dead)
+            this.#renderDeadAgent(agent);
+        for (const agent of alive)
+            this.#renderAliveAgent(agent);
+    }
+    #getCleanCtx() {
+        const { ctx } = this;
+        ctx.imageSmoothingEnabled = false;
+        ctx.fillStyle = "#000";
+        ctx.strokeStyle = "#000";
+        ctx.lineWidth = 1;
+        ctx.font = `10px sans-serif`;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        return ctx;
+    }
+    #renderBackground() {
+        const { canvas } = this;
+        const ctx = this.#getCleanCtx();
+        ctx.fillStyle = "#000";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    #renderDeadAgent(agent) {
+        const ctx = this.#getCleanCtx();
+        const radius = this.percent(10);
+        const { position } = agent;
+        const [x, y] = this.resolve(position);
+        // draw label
+        ctx.font = `${radius * 1.3}px sans-serif`;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.fillStyle = "#fff4";
+        ctx.fillText(agent.label, x, y);
+    }
+    #renderAliveAgent(agent) {
+        const ctx = this.#getCleanCtx();
+        const radius = this.percent(10);
+        const { color, position } = agent;
+        const [x, y] = this.resolve(position);
+        // circle
+        ctx.beginPath();
+        ctx.arc(x, y, radius, 0, Math.PI * 2);
+        ctx.fillStyle = color;
+        ctx.fill();
+        // outline
+        ctx.lineWidth = this.percent(2);
+        ctx.strokeStyle = "#fff";
+        ctx.stroke();
+        // draw label
+        ctx.font = `${radius * 1.3}px sans-serif`;
+        ctx.textAlign = "center";
+        ctx.textBaseline = "middle";
+        ctx.strokeStyle = "#0004";
+        ctx.strokeText(agent.label, x, y);
+        ctx.fillStyle = "#fff";
+        ctx.fillText(agent.label, x, y);
+    }
+}
+//# sourceMappingURL=renderer.js.map

package/x/demo/game/parts/renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.js","sourceRoot":"","sources":["../../../../s/demo/game/parts/renderer.ts"],"names":[],"mappings":"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"}

package/x/demo/game/parts/state.d.ts

@@ -0,0 +1,8 @@
+import { Vec2 } from "@benev/math";
+import { Agent } from "./agent.js";
+export declare class State {
+    arenaSize: Vec2;
+    agents: Set<Agent>;
+    makeAgent(label: string): Agent;
+    deleteAgent(agent: Agent): this;
+}

package/x/demo/game/parts/state.js

@@ -0,0 +1,20 @@
+import { Vec2 } from "@benev/math";
+import { Agent } from "./agent.js";
+export class State {
+    arenaSize = new Vec2(200, 100);
+    agents = new Set();
+    makeAgent(label) {
+        const agent = new Agent();
+        agent.label = label;
+        agent.position
+            .set_(0.5, 0.5)
+            .multiply(this.arenaSize);
+        this.agents.add(agent);
+        return agent;
+    }
+    deleteAgent(agent) {
+        this.agents.delete(agent);
+        return this;
+    }
+}
+//# sourceMappingURL=state.js.map

package/x/demo/game/parts/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","sourceRoot":"","sources":["../../../../s/demo/game/parts/state.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,aAAa,CAAA;AAChC,OAAO,EAAC,KAAK,EAAC,MAAM,YAAY,CAAA;AAEhC,MAAM,OAAO,KAAK;IACjB,SAAS,GAAG,IAAI,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC,CAAA;IAC9B,MAAM,GAAG,IAAI,GAAG,EAAS,CAAA;IAEzB,SAAS,CAAC,KAAa;QACtB,MAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAA;QACzB,KAAK,CAAC,KAAK,GAAG,KAAK,CAAA;QACnB,KAAK,CAAC,QAAQ;aACZ,IAAI,CAAC,GAAG,EAAE,GAAG,CAAC;aACd,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;QAC1B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;QACtB,OAAO,KAAK,CAAA;IACb,CAAC;IAED,WAAW,CAAC,KAAY;QACvB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QACzB,OAAO,IAAI,CAAA;IACZ,CAAC;CACD"}

package/x/demo/game/parts/virtual-device.d.ts

@@ -0,0 +1,8 @@
+import { Hub } from "../../../core/hub/hub.js";
+import { StickDevice } from "../../../core/devices/standard/stick.js";
+export declare class VirtualDevice extends StickDevice {
+    private hub;
+    constructor(hub: Hub<any>);
+    shimmyNext: () => import("../../../index.js").Port<any>;
+    shimmyPrevious: () => import("../../../index.js").Port<any>;
+}

package/x/demo/game/parts/virtual-device.js

@@ -0,0 +1,11 @@
+import { StickDevice } from "../../../core/devices/standard/stick.js";
+export class VirtualDevice extends StickDevice {
+    hub;
+    constructor(hub) {
+        super();
+        this.hub = hub;
+    }
+    shimmyNext = () => this.hub.shimmy(this, 1);
+    shimmyPrevious = () => this.hub.shimmy(this, -1);
+}
+//# sourceMappingURL=virtual-device.js.map

package/x/demo/game/parts/virtual-device.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"virtual-device.js","sourceRoot":"","sources":["../../../../s/demo/game/parts/virtual-device.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,WAAW,EAAC,MAAM,yCAAyC,CAAA;AAEnE,MAAM,OAAO,aAAc,SAAQ,WAAW;IACzB;IAApB,YAAoB,GAAa;QAChC,KAAK,EAAE,CAAA;QADY,QAAG,GAAH,GAAG,CAAU;IAEjC,CAAC;IAED,UAAU,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAA;IAC3C,cAAc,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAA;CAChD"}

package/x/demo/main.bundle.js

@@ -1,11 +1,5 @@
-import { $, view } from "@e280/sly";
-import { NubStick } from "../nubs/stick/view.js";
-import { StickController } from "../core/controllers/standard/stick.js";
-$.register({
-    TactDemo: view.component(use => {
-        const stick = use.once(() => new StickController());
-        return NubStick(stick);
-    }),
-});
-console.log("tact");
+import { dom } from "@e280/sly";
+import { TactDemo } from "./ui/tact-demo/component.js";
+dom.register({ TactDemo });
+console.log("🎮 tact");
 //# sourceMappingURL=main.bundle.js.map

package/x/demo/main.bundle.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.bundle.js","sourceRoot":"","sources":["../../s/demo/main.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,CAAC,EAAE,IAAI,EAAC,MAAM,WAAW,CAAA;AACjC,OAAO,EAAC,QAAQ,EAAC,MAAM,uBAAuB,CAAA;AAC9C,OAAO,EAAC,eAAe,EAAC,MAAM,uCAAuC,CAAA;AAErE,CAAC,CAAC,QAAQ,CAAC;IACV,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE;QAC9B,MAAM,KAAK,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,eAAe,EAAE,CAAC,CAAA;QACnD,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAA;IACvB,CAAC,CAAC;CACF,CAAC,CAAA;AAEF,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA"}
+{"version":3,"file":"main.bundle.js","sourceRoot":"","sources":["../../s/demo/main.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,WAAW,CAAA;AAC7B,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAA;AAEpD,GAAG,CAAC,QAAQ,CAAC,EAAC,QAAQ,EAAC,CAAC,CAAA;AAExB,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA"}