@benev/tact 0.1.0-3 → 0.1.0-4

package/s/core/hub/meta-bindings.ts

@@ -0,0 +1,23 @@
+
+import {MetaBindings, metaMode} from "./types.js"
+
+export const makeMetaBindings = (): MetaBindings => ({
+	[metaMode]: {
+		revealOverlay: ["or",
+			"Backslash",
+			"gamepad.beta",
+			"gamepad.gamma",
+		],
+		shimmyNext: ["or",
+			"BracketRight",
+			["and", ["or", "gamepad.beta", "gamepad.gamma"], "gamepad.right"],
+			["and", ["or", "gamepad.beta", "gamepad.gamma"], "gamepad.bumper.right"],
+		],
+		shimmyPrevious: ["or",
+			"BracketLeft",
+			["and", ["or", "gamepad.beta", "gamepad.gamma"], "gamepad.left"],
+			["and", ["or", "gamepad.beta", "gamepad.gamma"], "gamepad.bumper.left"],
+		],
+	},
+})
+

package/s/core/hub/parts/connected.ts

@@ -0,0 +1,15 @@
+
+import {Port} from "../port.js"
+import {MetaBindings} from "../types.js"
+import {Device} from "../../devices/device.js"
+import {makeMetaBindings} from "../meta-bindings.js"
+
+export class Connected {
+	metaPort: Port<MetaBindings>
+
+	constructor(public device: Device, metaB = makeMetaBindings()) {
+		this.metaPort = new Port(metaB)
+		this.metaPort.devices.add(device)
+	}
+}
+

package/s/core/hub/port.ts

@@ -0,0 +1,26 @@
+
+import {SetG} from "@e280/stz"
+import {Bindings} from "../bindings/types.js"
+import {Resolver} from "../bindings/resolver.js"
+import {SampleMap} from "../bindings/sample-map.js"
+import {GroupDevice} from "../devices/infra/group.js"
+
+export class Port<B extends Bindings> extends Resolver<B> {
+	#group = new GroupDevice()
+
+	readonly devices = this.#group.devices
+	readonly modes = new SetG<keyof B>()
+
+	constructor(bindings: B) {
+		super(bindings)
+
+		// start with all modes enabled by default
+		this.modes.adds(...Object.keys(bindings))
+	}
+
+	resolve(now = Date.now()) {
+		const sampleMap = new SampleMap(this.#group.samples())
+		return super.resolve(now, this.modes, sampleMap)
+	}
+}
+

package/s/core/hub/types.ts

@@ -1,14 +1,13 @@
 
-import {AsBindings, Atom, Bindings} from "../bindings/types.js"
+import {AsBindings, Atom} from "../bindings/types.js"
 
-export const hubMode = "hub" as const
+export const metaMode = "meta" as const
 
-export type HubBindings = AsBindings<{
-	[hubMode]: {
+export type MetaBindings = AsBindings<{
+	[metaMode]: {
+		revealOverlay: Atom
 		shimmyNext: Atom
 		shimmyPrevious: Atom
 	}
 }>
 
-export type HubFriendlyBindings = Bindings & HubBindings
-

package/s/core/index.ts

@@ -1,21 +1,19 @@
 
 export * from "./bindings/action.js"
+export * from "./bindings/resolver.js"
+export * from "./bindings/sample-map.js"
 export * from "./bindings/types.js"
 
-export * as controllers from "./controllers/standard/index.js"
-export * from "./controllers/infra/group.js"
-export * from "./controllers/infra/sampler.js"
-export * from "./controllers/standard/index.js"
-export * from "./controllers/controller.js"
-export * from "./controllers/types.js"
+export * from "./devices/infra/group.js"
+export * from "./devices/infra/sampler.js"
+export * from "./devices/standard/index.js"
+export * as devices from "./devices/standard/index.js"
+export * from "./devices/auto-gamepads.js"
+export * from "./devices/device.js"
+export * from "./devices/types.js"
 
-export * from "./deck/parts/bindings-depot.js"
-export * from "./deck/parts/local-storage-kv.js"
-export * from "./deck/deck.js"
-
-export * from "./hub/auto-gamepads.js"
-export * from "./hub/bindings.js"
 export * from "./hub/hub.js"
-
-export * from "./port/port.js"
+export * from "./hub/meta-bindings.js"
+export * from "./hub/port.js"
+export * from "./hub/types.js"
 

package/s/core/testing/testing.ts

@@ -1,10 +1,11 @@
 
 import {Hub} from "../hub/hub.js"
-import {Port} from "../port/port.js"
+import {Port} from "../hub/port.js"
+import {Device} from "../devices/device.js"
 import {asBindings} from "../bindings/types.js"
-import {Controller} from "../controllers/controller.js"
-import {SamplerController} from "../controllers/infra/sampler.js"
-import { hubBindings } from "../hub/bindings.js"
+import {Resolver} from "../bindings/resolver.js"
+import {SampleMap} from "../bindings/sample-map.js"
+import {SamplerDevice} from "../devices/infra/sampler.js"
 
 export class TestTime {
 	frame = 0
@@ -23,25 +24,29 @@ export function testBindings() {
 	})
 }
 
-export function testConnect<C extends Controller>(switchboard: Hub<any>, controller: C) {
-	switchboard.plug(controller)
-	return controller
+export function testPlug<C extends Device>(hub: Hub<any>, device: C) {
+	hub.plug(device)
+	return device
 }
 
 export function testSetupAlpha() {
 	const time = new TestTime()
-	const controller = new SamplerController()
-	const port = new Port(testBindings())
-	port.modes.add("basic")
-	port.controllers.add(controller)
-	return {controller, port, time}
+	const device = new SamplerDevice()
+	const resolver = new Resolver(testBindings())
+	const modes = new Set(Object.keys(resolver.bindings))
+	const resolve = () => resolver.resolve(
+		time.now,
+		modes as any,
+		new SampleMap(device.samples())
+	)
+	return {device, resolver, resolve, time}
 }
 
 export function testSetupBravo() {
 	const time = new TestTime()
 	const port = () => {
-		const port = new Port({...testBindings(), ...hubBindings()})
-		port.modes.adds(Hub.mode, "basic")
+		const port = new Port(testBindings())
+		port.modes.adds("basic")
 		return port
 	}
 	const hub = new Hub([port(), port(), port(), port()])

package/s/deck/deck.ts

@@ -0,0 +1,77 @@
+
+import {Kv} from "@e280/kv"
+import {disposer, ob, range} from "@e280/stz"
+
+import {Db} from "./parts/db.js"
+import {Hub} from "../core/hub/hub.js"
+import {Port} from "../core/hub/port.js"
+import {Bindings} from "../core/bindings/types.js"
+import {mergeBindings} from "./parts/merge-bindings.js"
+import {MetaBindings, metaMode} from "../core/hub/types.js"
+import {autoGamepads} from "../core/devices/auto-gamepads.js"
+import {DeckOverlay} from "./views/deck-overlay/component.js"
+import {makeMetaBindings} from "../core/hub/meta-bindings.js"
+import {DeviceSkins} from "./parts/device-skins/device-skin.js"
+import {OverlayVisibility} from "./parts/overlay-visibility.js"
+import {PrimaryDevice} from "../core/devices/standard/primary.js"
+import { dom } from "@e280/sly"
+
+export type DeckOptions<B extends Bindings, MB extends MetaBindings = any> = {
+	kv: Kv
+	bindings: B
+	portCount: number
+	metaBindings?: MB
+}
+
+export class Deck<B extends Bindings, MB extends MetaBindings = any> {
+	static async load<B extends Bindings, MB extends MetaBindings = any>(options: DeckOptions<B, MB>) {
+		const db = await Db.load(options.kv.store("catalog"))
+
+		const ports = range(options.portCount)
+			.map(index => db.$catalog().getProfileForPort(index))
+			.map(profile => mergeBindings(options.bindings, profile?.bindings))
+			.map(bindings => new Port<B>(bindings as B))
+
+		const hub = new Hub<B>(
+			ports,
+			db.$catalog().metaBindings
+				?? options.metaBindings
+				?? makeMetaBindings(),
+		)
+
+		return new this(hub, db)
+	}
+
+	dispose = disposer()
+	deviceSkins = new DeviceSkins()
+	overlayVisibility: OverlayVisibility
+	primaryDevice = new PrimaryDevice()
+
+	views = ob({DeckOverlay}).map(fn => fn(this))
+	components = ob(this.views).map(v => v.component().props(_c => []))
+
+	registerComponents() {
+		dom.register(this.components)
+	}
+
+	constructor(
+			public hub: Hub<B, MB>,
+			public db: Db,
+		) {
+
+		this.overlayVisibility = new OverlayVisibility(hub, this.deviceSkins)
+
+		// meta reveal overlay
+		this.dispose.schedule(
+			hub.metaPort.actions[metaMode].revealOverlay.on(action => {
+				if (action.pressed)
+					this.overlayVisibility.bump()
+			})
+		)
+	}
+
+	get catalog() {
+		return this.db.$catalog()
+	}
+}
+

package/s/deck/index.ts

@@ -0,0 +1,14 @@
+
+export * from "./parts/device-skins/device-icons.js"
+export * from "./parts/device-skins/device-skin.js"
+export * from "./parts/catalog.js"
+export * from "./parts/db.js"
+export * from "./parts/local-storage-kv.js"
+export * from "./parts/merge-bindings.js"
+export * from "./parts/overlay-visibility.js"
+
+export * from "./views/deck-overlay/component.js"
+export * from "./views/deck-overlay/style.css.js"
+
+export * from "./deck.js"
+

package/s/deck/parts/catalog.ts

@@ -0,0 +1,58 @@
+
+import {deep, MapG} from "@e280/stz"
+import {MetaBindings} from "../../core/hub/types.js"
+import {Bindings} from "../../core/bindings/types.js"
+
+export type Profile = {
+	id: string
+	label: string
+	bindings: Bindings
+}
+
+export type CatalogData = {
+	profiles: Profile[]
+	portProfiles: (string | null)[]
+	metaBindings: MetaBindings | null
+}
+
+export class Catalog {
+	profiles = new MapG<string, Profile>()
+	portProfiles: (string | null)[] = []
+	metaBindings: MetaBindings | null = null
+
+	constructor(data?: CatalogData) {
+		if (data) {
+			for (const profile of data.profiles)
+				this.profiles.set(profile.id, profile)
+
+			this.portProfiles = data.portProfiles
+				.map(id => id && (this.profiles.has(id) ?id :null))
+
+			this.metaBindings = data.metaBindings
+		}
+	}
+
+	toJSON(): CatalogData {
+		return deep.clone({
+			profiles: [...this.profiles.values()],
+			portProfiles: this.portProfiles,
+			metaBindings: this.metaBindings,
+		})
+	}
+
+	clone() {
+		return new Catalog(this.toJSON())
+	}
+
+	getProfile(profileId: string) {
+		return this.profiles.get(profileId)
+	}
+
+	getProfileForPort(portIndex: number) {
+		const profileId = this.portProfiles.at(portIndex)
+		return profileId
+			? this.getProfile(profileId)
+			: undefined
+	}
+}
+

package/s/deck/parts/db.ts

@@ -0,0 +1,66 @@
+
+import {disposer, Hex} from "@e280/stz"
+import {signal, SignalFn} from "@e280/strata"
+import {StorageDriver, Store} from "@e280/kv"
+
+import {Bindings} from "../../core/bindings/types.js"
+import {Catalog, CatalogData, Profile} from "./catalog.js"
+
+export class Db {
+	static async load(store: Store<CatalogData>) {
+		const $catalog = signal(new Catalog(await store.get()))
+		return new this(store, $catalog)
+	}
+
+	dispose = disposer()
+
+	constructor(
+			private store: Store<CatalogData>,
+			public $catalog: SignalFn<Catalog>,
+		) {
+
+		this.dispose.schedule(
+			StorageDriver.onStorageEvent(async() => this.reload())
+		)
+	}
+
+	async reload() {
+		const fresh = new Catalog(await this.store.get())
+		await this.$catalog.set(fresh)
+	}
+
+	async save(catalog: Catalog) {
+		await this.store.set(catalog.toJSON())
+		await this.$catalog(catalog)
+	}
+
+	async #mutateAndSave<R>(fn: (catalog: Catalog) => R) {
+		const catalog = this.$catalog().clone()
+		const result = fn(catalog)
+		await this.store.set(catalog.toJSON())
+		await this.$catalog(catalog)
+		return result
+	}
+
+	async createProfile(label: string, bindings: Bindings) {
+		return this.#mutateAndSave(catalog => {
+			const id = Hex.random()
+			const profile: Profile = {id, label, bindings}
+			catalog.profiles.set(id, profile)
+			return profile
+		})
+	}
+
+	async deleteProfile(id: string) {
+		return this.#mutateAndSave(catalog => {
+			catalog.profiles.delete(id)
+		})
+	}
+
+	async assignPortToProfile(index: number, profileId: string | null) {
+		return this.#mutateAndSave(catalog => {
+			catalog.portProfiles[index] = profileId
+		})
+	}
+}
+

package/s/deck/parts/device-skins/device-icons.ts

@@ -0,0 +1,38 @@
+
+import {Content} from "@e280/sly"
+import {Constructor} from "@e280/stz"
+import {Device} from "../../../core/devices/device.js"
+import {VpadDevice} from "../../../core/devices/standard/vpad.js"
+import {PrimaryDevice} from "../../../core/devices/standard/primary.js"
+import {GamepadDevice} from "../../../core/devices/standard/gamepad.js"
+
+export type DeviceIconEntry = [DeviceClass: Constructor<Device>, icon: Content]
+
+export class DeviceIcons {
+	fallback: Content = "❔"
+	#map = new Map<Constructor<Device>, Content>()
+
+	constructor(entries: DeviceIconEntry[] = [
+			[PrimaryDevice, "💻"],
+			[GamepadDevice, "🎮"],
+			[VpadDevice, "📱"],
+		]) {
+		this.add(...entries)
+	}
+
+	get(DeviceClass: Constructor<Device>) {
+		return this.#map.get(DeviceClass) ?? this.fallback
+	}
+
+	add(...entries: DeviceIconEntry[]) {
+		for (const [dc, icon] of entries)
+			this.#map.set(dc, icon)
+		return this
+	}
+
+	clear() {
+		this.#map.clear()
+		return this
+	}
+}
+

package/s/deck/parts/device-skins/device-skin.ts

@@ -0,0 +1,29 @@
+
+import {Content} from "@e280/sly"
+import {Hex, WeakMapG} from "@e280/stz"
+import {DeviceIcons} from "./device-icons.js"
+import {Device} from "../../../core/devices/device.js"
+import {ColorDispenser} from "../../../utils/dispensers.js"
+
+export class DeviceSkin {
+	constructor(
+		public icon: Content,
+		public label: string,
+		public color: string,
+	) {}
+}
+
+export class DeviceSkins {
+	icons = new DeviceIcons()
+	#map = new WeakMapG<Device, DeviceSkin>()
+	#colors = new ColorDispenser()
+
+	get(device: Device) {
+		return this.#map.guarantee(device, () => new DeviceSkin(
+			this.icons.get(device.constructor as any),
+			Hex.random(4),
+			this.#colors.takeFirst(),
+		))
+	}
+}
+

package/s/deck/parts/local-storage-kv.ts

@@ -0,0 +1,8 @@
+
+import {Kv, StorageDriver} from "@e280/kv"
+
+export function localStorageKv() {
+	const driver = new StorageDriver(window.localStorage)
+	return new Kv(driver).scope("tact")
+}
+

package/s/deck/parts/merge-bindings.ts

@@ -0,0 +1,21 @@
+
+import {deep} from "@e280/stz"
+import {Bindings} from "../../core/bindings/types.js"
+
+export function mergeBindings<B extends Bindings>(normative: B, sus?: B) {
+	const bindings = deep.clone(normative)
+
+	if (!sus)
+		return bindings
+
+	for (const [mode, bracket] of Object.entries(bindings)) {
+		for (const actionKey of Object.keys(bracket)) {
+			const susAction = sus[mode]?.[actionKey]
+			if (susAction)
+				bracket[actionKey] = susAction
+		}
+	}
+
+	return bindings
+}
+

package/s/deck/parts/overlay-visibility.ts

@@ -0,0 +1,49 @@
+
+import {signal} from "@e280/strata"
+import {debounce, disposer} from "@e280/stz"
+import {Hub} from "../../core/hub/hub.js"
+import {DeviceSkins} from "./device-skins/device-skin.js"
+
+export class OverlayVisibility {
+	auto = true
+	dispose = disposer()
+
+	#created = Date.now()
+	#$auto = signal(false)
+
+	/** manual override for whether the ports view should be visible */
+	readonly $manual = signal(false)
+
+	/** derived signal about whether the ports view should be visible */
+	readonly $visible = signal.derived(() => (
+		this.$manual() || (this.auto && this.#$auto())
+	))
+
+	/** whether or not to show labels in the overlay ui */
+	readonly $showLabels = signal(false)
+
+	constructor(
+			public hub: Hub<any>,
+			public deviceSkins = new DeviceSkins(),
+		) {
+
+		this.dispose.schedule(
+			hub.on(async() => {
+				const since = Date.now() - this.#created
+				if (since > 100) await this.bump()
+			})
+		)
+	}
+
+	#autoOff = debounce(1500, () => this.#$auto(false))
+
+	async bump() {
+		await this.#$auto(true)
+		await this.#autoOff()
+	}
+
+	async toggle(active = !this.$manual()) {
+		return this.$manual.set(active)
+	}
+}
+

package/s/deck/views/deck-overlay/component.ts

@@ -0,0 +1,48 @@
+
+import {html} from "lit"
+import {cssReset} from "@e280/sly"
+import {Deck} from "../../deck.js"
+import styleCss from "./style.css.js"
+import {deckView} from "../framework.js"
+import {Device} from "../../../core/devices/device.js"
+
+export const DeckOverlay = deckView(deck => use => {
+	use.css(cssReset, styleCss)
+	use.attrs.string.deck = "overlay"
+
+	const {hub, deviceSkins, overlayVisibility: {$visible, $showLabels}} = deck
+
+	function renderDevice(device: Device) {
+		const skin = deviceSkins.get(device)
+		const style = `--color: ${skin.color};`
+		const next = () => hub.shimmy(device, 1)
+		const previous = () => hub.shimmy(device, -1)
+		return html`
+			<div class=device style="${style}">
+				<div class="primary row">
+					<button @click="${previous}">&lt;</button>
+					<div class=icon>${skin.icon}</div>
+					<button @click="${next}">&gt;</button>
+				</div>
+				${$showLabels() ? html`
+					<div class="secondary row">
+						<div class=label>${skin.label}</div>
+					</div>
+				` : null}
+			</div>
+		`
+	}
+
+	return html`
+		<div class=portlist ?data-active="${$visible()}">
+			${hub.ports.map((port, index) => html`
+				<div class=port>
+					<header>P${index + 1}</header>
+					${port.devices.array().map(renderDevice)}
+				</div>
+			`)}
+		</div>
+	`
+
+})
+