@benev/tact 0.2.0 → 0.3.0-2

package/s/deck/deck.ts

@@ -1,69 +1,92 @@
 
-import {Kv} from "@e280/kv"
-import {disposer, 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 {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"
-
-export type DeckOptions<B extends Bindings, MB extends MetaBindings = any> = {
-	kv: Kv
-	bindings: B
-	portCount: number
-	metaBindings?: MB
-}
+import {Cubby, debounce, guarantee} from "@e280/stz"
+import {Port} from "./port.js"
+import {Device} from "../core/types.js"
+import {Runtime} from "./parts/runtime.js"
+import {Controller} from "./controller.js"
+import {Profiles} from "./parts/profiles.js"
+import {Settings} from "./parts/settings.js"
+import {DeckState, Profile, ProfileKey} from "./types.js"
+
+export class Deck<StockProfileKey extends ProfileKey = ProfileKey> {
+	profiles
+	settings
+	#runtime = new Runtime()
+
+	constructor(options: {
+			store: Cubby<DeckState>
+			stockProfiles: Record<StockProfileKey, Profile>
+		}) {
+		this.settings = new Settings(options.store)
+		this.profiles = new Profiles(options.stockProfiles, this.settings.customProfiles)
+	}
 
-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"))
+	async load() {
+		await this.settings.load()
+		for (const controller of this.#runtime.controllers.keys())
+			this.#applyControllerProfile(controller)
+	}
 
-		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))
+	#save = debounce(100, () => this.settings.save())
 
-		const hub = new Hub<B>(
-			ports,
-			db.$catalog().metaBindings
-				?? options.metaBindings
-				?? makeMetaBindings(),
-		)
+	get ports() {
+		return [...this.#runtime.ports]
+	}
 
-		return new this(options.bindings, options.metaBindings, hub, db)
+	get controllers() {
+		return [...this.#runtime.controllers]
 	}
 
-	dispose = disposer()
-	deviceSkins = new DeviceSkins()
-	primaryDevice = new PrimaryDevice()
-	overlayVisibility: OverlayVisibility
+	get unassignedControllers() {
+		return [...this.#runtime.controllers]
+			.filter(controller => !this.#runtime.portAssignments.get(controller))
+	}
 
-	constructor(
-			public baseBindings: B,
-			public baseMetaBindings: MB,
-			public hub: Hub<B, MB>,
-			public db: Db,
+	createPort() {
+		const port = new Port(this.#runtime)
+		this.#runtime.ports.add(port)
+		return port
+	}
+
+	deletePort(port: Port) {
+		for (const controller of port.controllers)
+			port.unplug(controller)
+		this.#runtime.ports.delete(port)
+	}
+
+	createController<D extends Device = Device>(
+			handle: string,
+			stockProfileKey: StockProfileKey,
+			device: D,
 		) {
+		const profileKey = guarantee(this.settings.profileAssignments, handle, () => stockProfileKey)
+		const profile = this.profiles.get(profileKey)
+		const controller = new Controller(handle, profile.bindings, device)
+		this.#runtime.controllers.add(controller)
+		return controller
+	}
 
-		this.overlayVisibility = new OverlayVisibility(hub, this.deviceSkins)
+	deleteController(controller: Controller) {
+		this.#runtime.controllers.delete(controller)
+		this.#runtime.portAssignments.delete(controller)
+	}
+
+	async assignControllerProfile(controller: Controller, profileKey: StockProfileKey | ProfileKey) {
+		this.settings.profileAssignments.set(controller.handle, profileKey)
+		this.#applyControllerProfile(controller)
+		await this.#save()
+	}
 
-		// meta reveal overlay
-		this.dispose.schedule(
-			hub.metaPort.actions[metaMode].revealOverlay.on(action => {
-				if (action.pressed)
-					this.overlayVisibility.bump()
-			})
-		)
+	queryController(controller: Controller) {
+		const port = this.#runtime.portAssignments.get(controller)
+		const profileKey = this.settings.profileAssignments.get(controller.handle)
+		const profile = this.profiles.get(profileKey)
+		return {controller, port, profileKey, profile}
 	}
 
-	get catalog() {
-		return this.db.$catalog()
+	#applyControllerProfile(controller: Controller) {
+		const profileKey = this.settings.profileAssignments.get(controller.handle)
+		controller.bindings = this.profiles.get(profileKey).bindings
 	}
 }
 

package/s/deck/parts/profiles.ts

@@ -0,0 +1,39 @@
+
+import {RMap} from "@e280/strata"
+import {inserts, need} from "@e280/stz"
+import {Profile, ProfileKey} from "../types.js"
+
+export class Profiles {
+	stock
+
+	constructor(stock: Record<ProfileKey, Profile>, public custom: RMap<ProfileKey, Profile>) {
+		this.stock = new RMap<ProfileKey, Profile>()
+		inserts(this.stock, Object.entries(stock))
+
+		if (this.stock.size === 0)
+			throw new Error("must be at least one stock profile")
+	}
+
+	get all() {
+		return [...this.stock, ...this.custom]
+	}
+
+	normalizeKey(key?: ProfileKey) {
+		return key && (this.stock.has(key) || this.custom.has(key))
+			? key
+			: this.defaultId
+	}
+
+	get defaultId() {
+		return [...this.stock.keys()][0]
+	}
+
+	get(key?: ProfileKey) {
+		return this.need(this.normalizeKey(key))
+	}
+
+	need(key: ProfileKey) {
+		return this.stock.get(key) ?? need(this.custom, key)
+	}
+}
+

package/s/deck/parts/runtime.ts

@@ -0,0 +1,11 @@
+
+import {RMap, RSet} from "@e280/strata"
+import {Port} from "../port.js"
+import {Controller} from "../controller.js"
+
+export class Runtime {
+	ports = new RSet<Port>()
+	controllers = new RSet<Controller>()
+	portAssignments = new RMap<Controller, Port | undefined>()
+}
+

package/s/deck/parts/settings.ts

@@ -0,0 +1,30 @@
+
+import {RMap} from "@e280/strata"
+import {Cubby, inserts} from "@e280/stz"
+import {shiftLimit} from "../../utils/shift-limit.js"
+import {ControllerHandle, DeckState, Profile, ProfileKey} from "../types.js"
+
+const limit = 256
+
+export class Settings {
+	profileAssignments = new RMap<ControllerHandle, ProfileKey>()
+	customProfiles = new RMap<ProfileKey, Profile>()
+
+	constructor(private store: Cubby<DeckState>) {}
+
+	async save() {
+		await this.store.set({
+			customProfiles: shiftLimit(limit, [...this.customProfiles]),
+			profileAssignments: shiftLimit(limit, [...this.profileAssignments]),
+		})
+	}
+
+	async load() {
+		const state = await this.store.get()
+		this.customProfiles.clear()
+		this.profileAssignments.clear()
+		inserts(this.customProfiles, state?.customProfiles ?? [])
+		inserts(this.profileAssignments, state?.profileAssignments ?? [])
+	}
+}
+

package/s/deck/port.ts

@@ -0,0 +1,35 @@
+
+import {derived} from "@e280/strata"
+import {Runtime} from "./parts/runtime.js"
+import {Controller} from "./controller.js"
+
+export class Port {
+	#runtime
+	#controllers
+
+	constructor(runtime: Runtime) {
+		this.#runtime = runtime
+		this.#controllers = derived(
+			() => [...this.#runtime.controllers]
+				.filter(controller => this.#runtime.portAssignments.get(controller) === this)
+		)
+	}
+
+	get controllers() {
+		return this.#controllers()
+	}
+
+	plug(controller: Controller) {
+		this.#runtime.portAssignments.set(controller, this)
+	}
+
+	unplug(controller: Controller) {
+		this.#runtime.portAssignments.delete(controller)
+	}
+
+	resolveIntents(now: number) {
+		return this.controllers
+			.flatMap(controller => controller.resolveIntents(now))
+	}
+}
+

package/s/deck/types.ts

@@ -0,0 +1,16 @@
+
+import {Bindings} from "../core/types.js"
+
+export type ProfileKey = string
+export type ControllerHandle = string
+
+export type Profile = {
+	label: string
+	bindings: Bindings
+}
+
+export type DeckState = {
+	customProfiles: [key: ProfileKey, profile: Profile][]
+	profileAssignments: [handle: ControllerHandle, key: ProfileKey][]
+}
+

package/s/demo/demo-app/element.ts

@@ -0,0 +1,17 @@
+
+import {html} from "lit"
+import {shadowElement, useCss} from "@e280/sly"
+import styleCss from "./style.css.js"
+import {Deck} from "../../deck/deck.js"
+import {DeskOptions, DeskView} from "../../ui/views/desk/view.js"
+
+export const setupDemoApp = (deck: Deck, options: DeskOptions = {}) => shadowElement(() => {
+	useCss(styleCss)
+
+	return html`
+		<div class=plate>
+			${DeskView(deck, options)}
+		</div>
+	`
+})
+

package/s/demo/demo-app/style.css.ts

@@ -0,0 +1,10 @@
+
+import {css} from "lit"
+export default css`
+
+.plate {
+	background: black;
+}
+
+`
+

package/s/demo/main.bundle.ts

@@ -1,10 +1,71 @@
 
-import {dom} from "@e280/sly"
-import {Game} from "./game/game.js"
-import {DemoTheater} from "./ui/theater/view.js"
+import {Content, dom} from "@e280/sly"
+import {LocalStore} from "@e280/strata"
 
-const game = await Game.load()
+import {Deck} from "../deck/deck.js"
+import {DeckState} from "../deck/types.js"
+import {asBindings} from "../core/types.js"
+import {Devices} from "../device/devices.js"
+import {onPad} from "../device/pad/on-pad.js"
+import {Controller} from "../deck/controller.js"
+import {PointerDevice} from "../device/pointer.js"
+import {GamepadDevice} from "../device/gamepad.js"
+import {setupDemoApp} from "./demo-app/element.js"
+import {KeyboardDevice} from "../device/keyboard.js"
 
-dom.render(dom("#demo-theater"), DemoTheater(game))
+const bindings = asBindings({
+	play: {
+		action: ["or", "Space", "pointer.button.left", "gamepad.button.1"],
+		up: ["or", "KeyW", "gamepad.axis.2.pos"],
+		down: ["or", "KeyS", "gamepad.axis.2.neg"],
+		left: ["or", "KeyA", "gamepad.axis.1.pos"],
+		right: ["or", "KeyD", "gamepad.axis.1.neg"],
+	},
+})
+
+const store = new LocalStore<DeckState>("tactDeck")
+
+const deck = new Deck({
+	store,
+	stockProfiles: {
+		standard: {label: "📜standard", bindings},
+		micro: {label: "🦠micro", bindings: asBindings<typeof bindings>({
+			play: {
+				action: ["or", "Space", "pointer.button.left", "gamepad.button.1"],
+				up: ["or", "KeyW", "gamepad.axis.2.pos"],
+				down: ["or", "KeyS", "gamepad.axis.2.neg"],
+				left: ["or", "KeyA", "gamepad.axis.1.pos"],
+				right: ["or", "KeyD", "gamepad.axis.1.neg"],
+			},
+		})},
+	},
+})
+
+await deck.load()
+store.onStorageEvent(() => deck.load())
+
+const port = deck.createPort()
+const controller = deck.createController("primary", "standard", new Devices(
+	new KeyboardDevice(),
+	new PointerDevice(),
+))
+
+port.plug(controller)
+
+const labels = new Map<Controller, Content>()
+	.set(controller, "⌨️🖱keyboard+mouse")
+
+onPad(pad => {
+	const handle = `(${pad.gamepad.index + 1}) ${pad.gamepad.id}`
+	const controller = deck.createController(handle, "standard", new GamepadDevice(pad))
+	labels.set(controller, `🎮${handle}`)
+	port.plug(controller)
+	return () => deck.deleteController(controller)
+})
+
+dom.register({
+	DemoApp: setupDemoApp(deck, {
+		getControllerLabel: labels.get.bind(labels),
+	}),
+})
 
-console.log("🎮 tact")

package/s/demo/main.css

@@ -1,13 +1,13 @@
 
-@layer vars, core, basics, page;
+@layer vars, core, page;
 
 @layer vars {
 	:root {
 		color-scheme: dark;
+
 		--link: cyan;
-		--prime: #ccc;
+		--text: #ccc;
 		--bg: #181818;
-		--bg2: #111111;
 	}
 }
 
@@ -42,19 +42,17 @@
 	}
 }
 
-@layer basics {
+@layer page {
 	html { height: 100%; }
 	body { min-height: 100%; }
 
 	html, body {
 		font-family: sans-serif;
-		font-size: 12px;
-		color: var(--prime);
+		font-size: 16px;
+		color: var(--text);
 		background: var(--bg);
 	}
-}
 
-@layer page {
 	body {
 		display: flex;
 		flex-direction: column;

package/s/device/devices.ts

@@ -0,0 +1,24 @@
+
+import {Device} from "../core/types.js"
+import {SampleMap} from "../core/parts/sample-map.js"
+
+export class Devices implements Device {
+	set = new Set<Device>()
+	#sampleMap = new SampleMap()
+
+	constructor(...devices: Device[]) {
+		for (const device of devices)
+			this.set.add(device)
+	}
+
+	*samples() {
+		this.#sampleMap.zero()
+
+		for (const device of this.set)
+			for (const sample of device.samples())
+				this.#sampleMap.merge(sample)
+
+		yield* this.#sampleMap
+	}
+}
+

package/s/device/gamepad.ts

@@ -0,0 +1,42 @@
+
+import {Pad} from "./pad/pad.js"
+import {SamplerDevice} from "./sampler.js"
+import {splitAxis} from "../utils/split-axis.js"
+
+export class GamepadDevice extends SamplerDevice {
+	constructor(public pad: Pad) {
+		super()
+	}
+
+	get gamepad() {
+		return this.pad.gamepad
+	}
+
+	*samples() {
+		this.#pollButtons(this.pad.gamepad)
+		this.#pollSticks(this.pad.gamepad)
+		yield* super.samples()
+	}
+
+	#pollButtons(gamepad: Gamepad) {
+		let anyButtonValue = 0
+		for (const [index, button] of gamepad.buttons.entries()) {
+			const i = index + 1
+			const value = button.value
+			anyButtonValue = Math.max(anyButtonValue, value)
+			this.setSample(`gamepad.button.${i}`, value)
+		}
+		this.setSample("gamepad.button.any", anyButtonValue)
+	}
+
+	#pollSticks(gamepad: Gamepad) {
+		for (const [index, axis] of gamepad.axes.entries()) {
+			const i = index + 1
+			this.setSample(`gamepad.axis.${i}`, axis)
+			const [neg, pos] = splitAxis(axis)
+			this.setSample(`gamepad.axis.${i}.neg`, neg)
+			this.setSample(`gamepad.axis.${i}.pos`, pos)
+		}
+	}
+}
+

package/s/device/keyboard.ts

@@ -0,0 +1,33 @@
+
+import {disposer, ev} from "@e280/stz"
+import {SamplerDevice} from "./sampler.js"
+
+export class KeyboardDevice extends SamplerDevice {
+	dispose = disposer()
+
+	constructor(target: EventTarget = window) {
+		super()
+		this.dispose.schedule(ev(target, this.#targetListeners))
+		this.dispose.schedule(ev(window, this.#windowListeners))
+	}
+
+	#targetListeners = {
+		keydown: (event: KeyboardEvent) => {
+			if (event.repeat) return null
+			this.setSample(event.code, 1)
+			this.setSample("keyboard.any", 1)
+		},
+		keyup: (event: KeyboardEvent) => {
+			if (event.repeat) return null
+			this.setSample(event.code, 0)
+			this.setSample("keyboard.any", 0)
+		},
+	}
+
+	#windowListeners = {
+		blur: () => {
+			this.zero()
+		},
+	}
+}
+

package/s/device/pad/on-pad.ts

@@ -0,0 +1,50 @@
+
+import {ev} from "@e280/stz"
+import {Pad} from "./pad.js"
+import {evergreen} from "../../utils/evergreen.js"
+
+/** listen for gamepads coming and going */
+export function onPad(fn: (pad: Pad) => () => void) {
+	const known = new Map<number, {pad: Pad, dispose: () => void}>()
+
+	function refresh() {
+		addNew()
+		deleteOld()
+	}
+
+	function addNew() {
+		for (const gamepad of navigator.getGamepads()) {
+			if (gamepad?.connected && !known.has(gamepad.index)) {
+				const get = () => navigator.getGamepads()[gamepad.index]
+				const pad = new Pad(evergreen(gamepad, get))
+				const dispose = fn(pad)
+				known.set(gamepad.index, {pad, dispose})
+			}
+		}
+	}
+
+	function deleteOld() {
+		for (const [index, {pad, dispose}] of known) {
+			const gamepad = navigator.getGamepads()[pad.gamepad.index]
+			if (!gamepad?.connected) {
+				dispose()
+				known.delete(index)
+			}
+		}
+	}
+
+	refresh()
+
+	const unlisten = ev(window, {
+		gamepadconnected: refresh,
+		gamepaddisconnected: refresh,
+	})
+
+	return () => {
+		unlisten()
+		for (const {dispose} of known.values())
+			dispose()
+		known.clear()
+	}
+}
+

package/s/device/pad/pad.ts

@@ -0,0 +1,10 @@
+
+/** stable reference to a gamepad, has a getter to get the latest gamepad snapshot */
+export class Pad {
+	constructor(private get: () => Gamepad) {}
+
+	get gamepad() {
+		return this.get()
+	}
+}
+