@benev/tact 0.4.0-1 → 0.4.0-10

package/s/lib/input/test.ts

@@ -5,6 +5,7 @@ import {asBindings} from "./types.js"
 import {Controller} from "./controller.js"
 import {PlainSource} from "./sources/plain.js"
 import {quickbind} from "./testing/quickbind.js"
+import {isCompatible} from "./investigate/is-compatible.js"
 
 import parcel from "./data/test.js"
 
@@ -23,6 +24,16 @@ export default suite({
 		expect(inputs.was).is(0)
 	}),
 
+	"reordered bindings are equivalent": test(async() => {
+		const able = quickbind({alpha: "KeyA", bravo: "KeyB"})
+		const baker = quickbind({bravo: "KeyB", alpha: "KeyA"})
+		expect(isCompatible(able.bindings, baker.bindings)).is(true)
+		able.sample({code: "KeyA", value: 1})
+		const inputs = baker.decoder.decode(able.controller.encode())
+		expect(inputs.alpha.value).is(1)
+		expect(inputs.bravo.value).is(0)
+	}),
+
 	"update bindings": test(async() => {
 		const {sample, solve, controller} = quickbind("KeyA")
 
@@ -103,16 +114,28 @@ export default suite({
 		expect(inputs.sum).is(0)
 	}),
 
-	"double tap in one frame": test(async() => {
-		const {sample, solve} = quickbind(
-			["taps", 2, 300, ["down", "KeyE"]]
-		)
-
-		for (const value of [1, 0, 1, 0])
+	"single tap": test(async() => {
+		const {sample, solve} = quickbind(["taps", 1, 400, "KeyE"])
+		const hit = (time: number, value: number) => {
 			sample({code: "KeyE", value})
+			return solve(time).value
+		}
+		expect(hit(0, 0)).is(0)
+		expect(hit(100, 1)).is(0)
+		expect(hit(200, 0)).is(1)
+	}),
 
-		expect(solve(100).value).is(1)
-		expect(solve(200).value).is(0)
+	"double tap": test(async() => {
+		const {sample, solve} = quickbind(["taps", 2, 400, "KeyE"])
+		const hit = (time: number, value: number) => {
+			sample({code: "KeyE", value})
+			return solve(time).value
+		}
+		expect(hit(0, 0)).is(0)
+		expect(hit(100, 1)).is(0)
+		expect(hit(200, 0)).is(0)
+		expect(hit(300, 1)).is(0)
+		expect(hit(400, 0)).is(1)
 	}),
 
 	"held across empty frames": test(async() => {
@@ -136,30 +159,29 @@ export default suite({
 		expect(solve(900).value).is(1)
 	}),
 
-	"taps and holds coexist": test(async() => {
+	"taps vs held": test(async() => {
 		const {sample, solve} = quickbind({
-			tapper: ["taps", 1, 10, ["down", "KeyE"]],
-			holder: ["held", 10, "KeyE"],
+			tappy: ["taps", 1, 300, "KeyE"],
+			holdy: ["held", 300, "KeyE"],
 		})
-
-		solve(0)
-
-		sample({code: "KeyE", value: 1})
-		expect(solve(1).tapper.value).is(1)
-
-		sample({code: "KeyE", value: 0})
-		const released = solve(2)
-		expect(released.tapper.value).is(0)
-		expect(released.holder.value).is(0)
-
-		sample({code: "KeyE", value: 1})
-		const pressed = solve(3)
-		expect(pressed.tapper.value).is(1)
-		expect(pressed.holder.value).is(0)
-
-		const holding = solve(13)
-		expect(holding.tapper.value).is(0)
-		expect(holding.holder.value).is(1)
+		const hit = (time: number, value: number) => {
+			sample({code: "KeyE", value})
+			return solve(time)
+		}
+		const __up = (time: number) => hit(time, 0)
+		const DOWN = (time: number) => hit(time, 1)
+
+		expect(__up(1000).tappy.value).is(0)
+		expect(DOWN(1100).tappy.value).is(0)
+		expect(__up(1200).tappy.value).is(1)
+		expect(__up(1300).tappy.value).is(0)
+
+		expect(__up(2000).holdy.value).is(0)
+		expect(DOWN(2100).holdy.value).is(0)
+		expect(DOWN(2200).holdy.value).is(0)
+		expect(DOWN(2300).holdy.value).is(0)
+		expect(DOWN(2400).holdy.value).is(1)
+		expect(__up(2500).tappy.value).is(0) // FAILS
 	}),
 
 	"independent controller consumers": test(async() => {

package/s/lib/input/testing/quickbind.ts

@@ -1,5 +1,5 @@
 
-import {InputDecoder} from "../decoder.js"
+import {Decoder} from "../decoder.js"
 import {Controller} from "../controller.js"
 import {Bindings, Sample} from "../types.js"
 import {PlainSource} from "../sources/plain.js"
@@ -7,7 +7,7 @@ import {PlainSource} from "../sources/plain.js"
 export function quickbind<B extends Bindings>(b: B) {
 	const source = new PlainSource()
 	const controller = new Controller({source, bindings: b})
-	const decoder = new InputDecoder(controller.bindings)
+	const decoder = new Decoder(controller.bindings)
 	const {inputs} = decoder
 
 	const sample = (...samples: Sample[]) =>
@@ -16,6 +16,6 @@ export function quickbind<B extends Bindings>(b: B) {
 	const solve = (time?: number) =>
 		decoder.decode(controller.encode(time))
 
-	return {source, controller, decoder, sample, solve, inputs}
+	return {bindings: b, source, controller, decoder, sample, solve, inputs}
 }
 

package/s/lib/ui/deck/auto-gamepads.ts

@@ -21,6 +21,7 @@ export function autoGamepads(
 		const dispose = fn?.(controller, source)
 
 		return () => {
+			controller.dispose()
 			hub.remove(controller)
 			dispose?.()
 		}

package/s/lib/ui/deck/controls/internal/data.ts

@@ -5,21 +5,23 @@ import {got, IdCounter, setEntries, subby} from "@e280/stz"
 import {Profile, ProfileKey} from "../../types.js"
 import {Bindings} from "../../../../input/types.js"
 import {Controller} from "../../../../input/controller.js"
+import {hashBindings} from "../../../../input/investigate/hash-bindings.js"
 import {ControllerHandle, ControllerMeta, ControlsOptions} from "../types.js"
 
 export type ControlsData<B extends Bindings> = (
 	ReturnType<typeof makeControlsData<B>>
 )
 
-export function makeControlsData<B extends Bindings>({
-		kv,
-		presets,
-	}: ControlsOptions<B>) {
-
+export function makeControlsData<B extends Bindings>(options: ControlsOptions<B>) {
+	const {presets} = options
 	const fallbackKey = got(Object.keys(presets)[0], "missing presets")
 	const fallbackProfile = got(presets[fallbackKey])
 	const bindings = fallbackProfile.bindings
 
+	const kv = options.kv.scope(
+		hashBindings(bindings).toString()
+	)
+
 	const profiles = {
 		presets: new RMap<ProfileKey, Profile<B>>(),
 		customs: new RMap<ProfileKey, Profile<B>>(),

package/s/lib/ui/deck/hub.ts

@@ -5,18 +5,19 @@ import {got, IdCounter} from "@e280/stz"
 import {PlayerId} from "./types.js"
 import {Bindings} from "../../input/types.js"
 import {Controller} from "../../input/controller.js"
+import {minihash} from "../../input/data/intent/minihash.js"
 import {encodeParcels} from "../../input/data/parcel/encode.js"
 import {encodeIntents} from "../../input/data/intent/encode.js"
 import {hashBindings} from "../../input/investigate/hash-bindings.js"
 
 export class Hub<B extends Bindings = any> {
-	#hash
+	#minihash
 	#ids = new IdCounter()
 	#unassigned = new RSet<Controller<B>>()
 	#players = new RMap<PlayerId, {controllers: RSet<Controller<B>>}>()
 
 	constructor(readonly bindings: B) {
-		this.#hash = hashBindings(bindings)
+		this.#minihash = minihash(hashBindings(bindings))
 	}
 
 	get playerIds() {
@@ -86,7 +87,7 @@ export class Hub<B extends Bindings = any> {
 			.filter(([, value]) => value !== 0)
 			.map(([id, value]) => ({id, value}))
 
-		return encodeIntents(this.#hash, changedIntents)
+		return encodeIntents(this.#minihash, changedIntents)
 	}
 
 	encodeAll(time = performance.now()) {

package/s/lib/ui/deck/players.ts

@@ -0,0 +1,73 @@
+
+import {RMap} from "@e280/strata"
+import {guarantee} from "@e280/stz"
+
+import {PlayerId} from "./types.js"
+import {Bindings} from "../../input/types.js"
+import {Decoder} from "../../input/decoder.js"
+import {decodeParcels} from "../../input/data/parcel/decode.js"
+
+export class Players<B extends Bindings> {
+	#bindings: B
+	#decoders = new RMap<PlayerId, Decoder<B>>()
+
+	constructor(bindings: B) {
+		this.#bindings = bindings
+	}
+
+	decodeAll(...buffers: ArrayBuffer[]) {
+		const added: PlayerId[] = []
+		const removed: PlayerId[] = []
+		const grouped = new Map<PlayerId, ArrayBuffer[]>()
+
+		for (const buffer of buffers)
+			for (const {playerId, intents} of decodeParcels(buffer))
+				guarantee(grouped, playerId, () => []).push(intents)
+
+		for (const [playerId, intents] of grouped) {
+			let decoder = this.#decoders.get(playerId)
+			if (!decoder) {
+				decoder = new Decoder(this.#bindings)
+				this.#decoders.set(playerId, decoder)
+				added.push(playerId)
+			}
+			decoder.decode(...intents)
+		}
+
+		for (const playerId of this.#decoders.keys()) {
+			if (!grouped.has(playerId)) {
+				this.#decoders.delete(playerId)
+				removed.push(playerId)
+			}
+		}
+
+		return {added, removed}
+	}
+
+	has(playerId: PlayerId) {
+		return this.#decoders.has(playerId)
+	}
+
+	get(playerId: PlayerId) {
+		return this.#decoders.get(playerId)?.inputs
+	}
+
+	keys() {
+		return this.#decoders.keys()
+	}
+
+	*values() {
+		for (const {inputs} of this.#decoders.values())
+			yield inputs
+	}
+
+	*entries() {
+		for (const [playerId, {inputs}] of this.#decoders)
+			yield [playerId, inputs] as const
+	}
+
+	[Symbol.iterator]() {
+		return this.entries()
+	}
+}
+

package/s/lib/ui/deck/setup/deck.ts

@@ -1,31 +1,44 @@
 
-import {IdbMagazine, idbOpen, Kv} from "@e280/kv"
-
+import {disposer, ev} from "@e280/stz"
 import {Hub} from "../hub.js"
 import {asDeck} from "../types.js"
+import {setupKv} from "./utils/kv.js"
 import {SetupParams} from "./types.js"
 import {Controls} from "../controls/controls.js"
 import {Bindings} from "../../../input/types.js"
 import {firstPreset} from "../utils/first-preset.js"
+import {setupBroadcastChannel} from "./utils/broadcast-channel.js"
 
 export async function setupDeck<B extends Bindings>(params: SetupParams<B>) {
-	const kv = params.kv
-		?? new Kv(new IdbMagazine(await idbOpen("tact", "kv")))
-
-	const broadcastChannel = params.broadcastChannel
-		?? new BroadcastChannel("tact")
-
-	const {maxPlayers} = params
-	const {bindings} = firstPreset(params.presets).profile
-
-	const hub = new Hub(bindings)
-	const controls = new Controls({...params, kv})
-
-	await controls.load()
-
-	broadcastChannel.onmessage = () => controls.load()
-	controls.on(() => broadcastChannel.postMessage({}))
-
-	return asDeck({hub, controls, maxPlayers})
+	const {dispose, schedule, disposable} = disposer()
+
+	const namespace = params.namespace
+		? `tact_${params.namespace}`
+		: "tact"
+
+	const {kv} = disposable(
+		await setupKv(namespace, params.kv)
+	)
+
+	const {broadcastChannel} = disposable(
+		await setupBroadcastChannel(namespace, params.broadcastChannel)
+	)
+
+	try {
+		const {maxPlayers} = params
+		const {bindings} = firstPreset(params.presets).profile
+		const hub = new Hub(bindings)
+		const controls = new Controls({...params, kv})
+
+		schedule(ev(broadcastChannel, {message: () => controls.load()}))
+		schedule(controls.on(() => broadcastChannel.postMessage({})))
+
+		await controls.load()
+		return asDeck({hub, controls, maxPlayers, dispose})
+	}
+	catch (error) {
+		dispose()
+		throw error
+	}
 }
 

package/s/lib/ui/deck/setup/tact.ts

@@ -1,10 +1,12 @@
 
+import {disposer} from "@e280/stz"
 import {register} from "@e280/sly"
 
 import {setupDeck} from "./deck.js"
 import {SetupParams} from "./types.js"
 import {Bindings} from "../../../input/types.js"
 import {autoGamepads} from "../auto-gamepads.js"
+import {ellipsis} from "../../../utils/ellipsis.js"
 import {firstPreset} from "../utils/first-preset.js"
 import {Controller} from "../../../input/controller.js"
 import {Sources} from "../../../input/sources/sources.js"
@@ -19,10 +21,14 @@ import {makeControllersElement} from "../../views/controllers/view.js"
 
 import devicesSvg from "../../icons/akar/devices.svg.js"
 import gameControllerSvg from "../../icons/akar/game-controller.svg.js"
-import { ellipsis } from "../../../utils/ellipsis.js"
+
+export type Tact = Awaited<ReturnType<typeof setupTact>>
 
 export async function setupTact<B extends Bindings>(params: SetupParams<B>) {
-	const deck = await setupDeck(params)
+	const {dispose, schedule, disposable} = disposer()
+
+	const deck = disposable(await setupDeck(params))
+	const first = firstPreset(deck.controls.presets)
 	const visualizer = new Visualizer()
 
 	const elements = {
@@ -33,29 +39,31 @@ export async function setupTact<B extends Bindings>(params: SetupParams<B>) {
 	}
 
 	function gamepads(defaultProfileKey?: string) {
-		return autoGamepads(deck.hub, (controller, source) => {
+		const stop = autoGamepads(deck.hub, (controller, source) => {
 			const handle = `${source.pad.gamepad.id} ${source.pad.gamepad.index + 1}`
 			deck.controls.attach(controller, {
 				icon: gameControllerSvg,
 				handle,
 				tooltip: handle,
 				name: ellipsis(handle, 32),
-				defaultProfileKey: defaultProfileKey ?? firstPreset(deck.controls.presets).key,
+				defaultProfileKey: defaultProfileKey ?? first.key,
 			})
 			return () => deck.controls.detach(controller)
 		})
+		schedule(stop)
+		return stop
 	}
 
 	function mouseKeyboard() {
-		const {key, profile} = firstPreset(deck.controls.presets)
+		const {key, profile} = first
 
-		const controller = new Controller({
+		const controller = disposable(new Controller({
 			bindings: profile.bindings,
-			source: new Sources(
-				new KeyboardSource(),
-				new PointerSource(),
-			),
-		})
+			source: disposable(new Sources(
+				disposable(new KeyboardSource()),
+				disposable(new PointerSource()),
+			)),
+		}))
 
 		deck.hub.plug(controller)
 
@@ -67,6 +75,11 @@ export async function setupTact<B extends Bindings>(params: SetupParams<B>) {
 			defaultProfileKey: key,
 		})
 
+		schedule(() => {
+			deck.hub.remove(controller)
+			deck.controls.detach(controller)
+		})
+
 		return controller
 	}
 
@@ -81,6 +94,8 @@ export async function setupTact<B extends Bindings>(params: SetupParams<B>) {
 		visualizer,
 		elements,
 		registerElements,
+		encodeAll: deck.hub.encodeAll.bind(deck.hub),
+		dispose,
 	}
 }
 

package/s/lib/ui/deck/setup/types.ts

@@ -6,6 +6,7 @@ import {Bindings} from "../../../input/types.js"
 export type SetupParams<B extends Bindings> = {
 	maxPlayers: number
 	presets: Presets<B>
+	namespace?: string
 	kv?: Kv
 	broadcastChannel?: BroadcastChannel
 }

package/s/lib/ui/deck/setup/utils/broadcast-channel.ts

@@ -0,0 +1,17 @@
+
+export async function setupBroadcastChannel(
+		namespace: string,
+		broadcastChannel: BroadcastChannel | undefined,
+	) {
+
+	let dispose = () => {}
+
+	if (!broadcastChannel) {
+		const bc = new BroadcastChannel(namespace)
+		broadcastChannel = bc
+		dispose = () => bc.close()
+	}
+
+	return {broadcastChannel, dispose}
+}
+

package/s/lib/ui/deck/setup/utils/kv.ts

@@ -0,0 +1,20 @@
+
+import {IdbMagazine, idbOpen, Kv} from "@e280/kv"
+
+export async function setupKv(
+		namespace: string,
+		kv: Kv | undefined,
+	) {
+
+	let dispose = () => {}
+
+	if (!kv) {
+		const idb = await idbOpen(namespace, "kv")
+		const magazine = new IdbMagazine(idb)
+		kv = new Kv(magazine)
+		dispose = () => idb.db.close()
+	}
+
+	return {kv, dispose}
+}
+

package/s/lib/ui/deck/types.ts

@@ -4,7 +4,6 @@ import {Bindings} from "../../input/types.js"
 import {Controls} from "./controls/controls.js"
 
 export type PlayerId = number
-
 export type ProfileKey = string
 
 export type Profile<B extends Bindings = any> = {
@@ -19,6 +18,7 @@ export type Deck<B extends Bindings = any> = {
 	hub: Hub<B>
 	maxPlayers: number
 	controls: Controls<B>
+	dispose: () => void
 }
 
 export const asDeck = <B extends Bindings>(deck: Deck<B>) => deck

package/s/lib/ui/views/controllers/style.css.ts

@@ -2,7 +2,7 @@
 import {css} from "lit"
 export default css`@layer view {
 
-.plate {
+[part="plate"] {
 	user-select: none;
 	display: flex;
 	flex-direction: column;

package/s/lib/ui/views/controllers/view.ts

@@ -1,7 +1,7 @@
 
 import {html} from "lit"
 import {isHappy, when} from "@e280/stz"
-import {loot, shadowDuplex, useCss, useOnce} from "@e280/sly"
+import {loot, shadowDuplex, useCss, useName, useOnce} from "@e280/sly"
 
 import styleCss from "./style.css.js"
 import themeCss from "../theme.css.js"
@@ -14,6 +14,7 @@ import {ControllerView} from "./subviews/controller.js"
 import {Context, droppyNewPlayer} from "../deck/types.js"
 
 export const [ControllersView, makeControllersElement] = shadowDuplex((deck: Deck) => {
+	useName("tact-controllers")
 	useCss(themeCss, styleCss)
 
 	const {hub} = deck
@@ -36,7 +37,7 @@ export const [ControllersView, makeControllersElement] = shadowDuplex((deck: Dec
 	}))
 
 	return html`
-		<div class=plate ?data-drag-and-drop="${!!context.dnd.dragging}">
+		<div part=plate ?data-drag-and-drop="${!!context.dnd.dragging}">
 			<div class=playerlist>
 				${hub.playerIds.map(renderPlayer)}
 

package/s/lib/ui/views/customize/style.css.ts

@@ -2,7 +2,7 @@
 import {css} from "lit"
 export default css`@layer view {
 
-.plate {
+[part="plate"] {
 	display: flex;
 	flex-direction: column;
 }

package/s/lib/ui/views/customize/view.ts

@@ -1,7 +1,7 @@
 
 import {html} from "lit"
 import {given, when} from "@e280/stz"
-import {shadowDuplex, useCss, useSignal} from "@e280/sly"
+import {shadowDuplex, useCss, useName, useSignal} from "@e280/sly"
 
 import styleCss from "./style.css.js"
 import themeCss from "../theme.css.js"
@@ -16,6 +16,7 @@ import {renderBindings} from "./parts/render-bindings.js"
 import {ProfileSelectView} from "../profile-select/view.js"
 
 export const [CustomizeView, makeCustomizeElement] = shadowDuplex((options: {controls: Controls}) => {
+	useName("tact-customize")
 	useCss(themeCss, styleCss)
 	const {controls, controls: {profiles}} = options
 	const $profileKey = useSignal(controls.fallbackProfileKey)
@@ -27,17 +28,17 @@ export const [CustomizeView, makeCustomizeElement] = shadowDuplex((options: {con
 		? profiles.get(profile.basedOn)
 		: profile
 
-	const updateBindings = (bindings: Bindings) => {
+	const updateBindings = async(bindings: Bindings) => {
 		let key = $profileKey()
 
 		if (profiles.isPreset(key)) {
 			const basedOn = key
 			const freshKey = makeId()
 			key = freshKey
-			profiles.clone(freshKey, basedOn)
+			await profiles.clone(freshKey, basedOn)
 		}
 
-		profiles.update(key, {bindings})
+		await profiles.update(key, {bindings})
 		$profileKey(key)
 	}
 
@@ -56,7 +57,7 @@ export const [CustomizeView, makeCustomizeElement] = shadowDuplex((options: {con
 	}
 
 	return html`
-		<div class=plate theme-card>
+		<div part=plate>
 			<header class=topbar>
 				<div class=corner>
 					${ProfileSelectView(options, $profileKey(), $profileKey)}

package/s/lib/ui/views/deck/style.css.ts

@@ -10,7 +10,7 @@ export default css`@layer view {
 	text-shadow: var(--text-shadow);
 }
 
-.deck {
+[part="plate"] {
 	padding: var(--pad);
 	--tint: oklch(from var(--prime) l c h / 50%);
 }

package/s/lib/ui/views/deck/view.ts

@@ -1,7 +1,7 @@
 
 import {html} from "lit"
 import {ShinyTabs, TabsControl} from "@e280/shiny"
-import {shadowDuplex, useCss, useOnce} from "@e280/sly"
+import {shadowDuplex, useCss, useName, useOnce} from "@e280/sly"
 
 import styleCss from "./style.css.js"
 import themeCss from "../theme.css.js"
@@ -9,13 +9,12 @@ import gameControllerSvg from "../../icons/akar/game-controller.svg.js"
 import settingsHorizontalSvg from "../../icons/akar/settings-horizontal.svg.js"
 
 import {Deck} from "../../deck/types.js"
-import {ControllersView} from "../controllers/view.js"
 import {CustomizeView} from "../customize/view.js"
+import {ControllersView} from "../controllers/view.js"
 
 export const [DeckView, makeDeckElement] = shadowDuplex((deck: Deck) => {
+	useName("tact-deck")
 	useCss(themeCss, styleCss)
-
-	const attrs = {slot: "panel"}
 	const tabsControl = useOnce(() => new TabsControl())
 
 	// TODO remove this
@@ -25,7 +24,7 @@ export const [DeckView, makeDeckElement] = shadowDuplex((deck: Deck) => {
 	})
 
 	return html`
-		<div class=deck theme-card>
+		<div part=plate theme-card>
 			${ShinyTabs.with({
 				props: [{control: tabsControl}],
 				children: html`
@@ -39,8 +38,15 @@ export const [DeckView, makeDeckElement] = shadowDuplex((deck: Deck) => {
 						<span>customize</span>
 					</button>
 
-					${ControllersView.with({attrs, props: [deck]})}
-					${CustomizeView.with({attrs, props: [deck]})}
+					${ControllersView.with({
+						props: [deck],
+						attrs: {slot: "panel"},
+					})}
+
+					${CustomizeView.with({
+						props: [deck],
+						attrs: {slot: "panel"},
+					})}
 				`,
 			})}
 		</div>

package/s/lib/ui/views/theme.css.ts

@@ -82,7 +82,7 @@ ${cssReset}
 	--base: var(--tint, var(--prime));
 	font: inherit;
 	color: inherit;
-	background: transparent;
+	background: var(--bg);
 	border: 1px solid var(--base);
 	border-radius: var(--round);
 	padding: var(--nib) var(--pad);