@benev/tact 0.1.0 → 0.2.0-0

package/README.md

@@ -23,7 +23,9 @@ it's good at user-customizable keybindings, multiple gamepad support, and mobile
 ## 🍋 tact deck
 > *full setup with ui, batteries included*
 
-the deck ties together all the important pieces of tact into a single user experience, complete with ui components.
+the deck ties together all the important pieces of tact into a single user experience, complete with ui views.
+
+tact's ui is built with [`@e280/sly` shadow views](https://github.com/e280/sly).
 
 ### 🛹 deck setup
 - **import stuff from tact**
@@ -77,13 +79,18 @@ the deck ties together all the important pieces of tact into a single user exper
     ```
 
 ### 🛹 deck ui: the overlay
-- **register the deck's web components to the dom**
+- **render the deck overlay with sly**
     ```ts
-    deck.registerComponents()
+    import {dom} from "@e280/sly"
+
+    dom.render(
+      dom("#game-ui"),
+      tact.DeckOverlay(deck),
+    )
     ```
 - **place the ui on top of your game canvas**
     ```html
-    <deck-overlay></deck-overlay>
+    <div id="game-ui"></div>
     ```
 
 
@@ -390,25 +397,33 @@ the hub embraces that analogy, helping you coordinate the plugging and unpluggin
 > *mobile ui like virtual thumbsticks and buttons*
 
 ### 📱 nubs setup
-- **register nub components to dom**
+- **render nub views with sly**
     ```ts
-    tact.registerNubs()
-    ```
-- **place nub components onto your html page**
-    ```html
-    <nub-stick></nub-stick>
+    import {dom} from "@e280/sly"
+
+    const stick = new tact.StickDevice()
+
+    dom.render(
+      dom("#controls"),
+      tact.NubStick(stick),
+    )
     ```
 
 ### 📱 nub stick
-- **place a nub-stick onto your page**
+- **place a mount point onto your page**
     ```html
-    <nub-stick></nub-stick>
+    <div id="controls"></div>
     ```
-- **get the stick device, plug it into your hub or whatever**
+- **make the stick device yourself, then plug it into your hub or whatever**
     ```ts
-    const nubStick = document.queryElement<tact.NubStick>("nub-stick")!
+    const stick = new tact.StickDevice()
 
-    deck.hub.plug(nubStick.device)
+    dom.render(
+      dom("#controls"),
+      tact.NubStick(stick),
+    )
+
+    deck.hub.plug(stick)
     ```
 
 
@@ -418,4 +433,3 @@ the hub embraces that analogy, helping you coordinate the plugging and unpluggin
 
 ## 🍋 tact is by https://benevolent.games/
 > *building the future of web games*
-

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@benev/tact",
-	"version": "0.1.0",
+	"version": "0.2.0-0",
 	"description": "keybindings and gamepad support for web games",
 	"license": "MIT",
 	"author": "Chase Moskal <chasemoskal@gmail.com>",
@@ -16,34 +16,35 @@
 		"s"
 	],
 	"scripts": {
-		"build": "run-s _clean _tsc _ln _scute",
+		"build": "octo-s --npm-run _clean _tsc _ln _scute",
+		"dev": "octo 'scute -vw' 'tsc -w' 'node --watch x/tests.test.js' 'hottie x'",
 		"_clean": "rm -rf x",
 		"_tsc": "tsc",
 		"_scute": "scute -v",
-		"start": "octo 'scute -vw' 'tsc -w' 'node --watch x/tests.test.js' 'http-server x -c-1'",
 		"_ln": "run-s _ln-s _ln-assets",
 		"_ln-s": "ln -s \"$(realpath s)\" x/s",
 		"_ln-assets": "ln -s \"$(realpath assets)\" x/assets",
 		"test": "node x/tests.test.js",
-		"test-debug": "node inspect x/tests.test.js",
 		"count": "find s -path '*/_archive' -prune -o -name '*.ts' -exec wc -l {} +"
 	},
 	"peerDependencies": {
 		"lit": "^3.3.2"
 	},
 	"dependencies": {
-		"@benev/math": "^0.2.0",
-		"@e280/kv": "^0.1.0",
-		"@e280/sly": "^0.2.5",
-		"@e280/strata": "^0.2.8",
-		"@e280/stz": "^0.2.24"
+		"@benev/math": "^0.3.0-5",
+		"@e280/kv": "^0.1.2",
+		"@e280/sly": "^0.3.1",
+		"@e280/strata": "^0.3.1",
+		"@e280/stz": "^0.2.27"
 	},
 	"devDependencies": {
-		"@e280/science": "^0.1.8",
-		"@e280/scute": "^0.1.5",
+		"@e280/hottie": "^0.1.0",
+		"@e280/octo": "^0.1.0",
+		"@e280/science": "^0.1.9",
+		"@e280/scute": "^0.3.1",
 		"http-server": "^14.1.1",
 		"npm-run-all": "^4.1.5",
-		"typescript": "^5.9.3"
+		"typescript": "^6.0.2"
 	},
 	"repository": {
 		"type": "git",

package/s/core/bindings/parts/lens-algo.ts

@@ -54,11 +54,12 @@ export const lensAlgo = (
 
 		const isFreshlyPressed = !isPressed(state.lastValue) && isPressed(value)
 		const isFreshlyReleased = isPressed(state.lastValue) && !isPressed(value)
-		const isHolding = (now - state.holdStart) >= holdTime
 
 		if (isFreshlyPressed)
 			state.holdStart = now
 
+		const isHolding = (now - state.holdStart) >= holdTime
+
 		state.lastValue = value
 
 		switch (settings.timing[0]) {

package/s/core/core.test.ts

@@ -6,16 +6,16 @@ import {testPlug, testSetupAlpha, testSetupBravo} from "./testing/testing.js"
 
 export default Science.suite({
 	"sample to action value": test(async() => {
-		const {time, device, resolve} = testSetupAlpha()
+		const {clock, device, resolve} = testSetupAlpha()
 		{
-			time.frame = 1
+			clock.frame = 1
 			device.setSample("Space", 1)
 			const actions = resolve()
 			expect(actions.basic.jump.value).is(1)
 			expect(actions.basic.shoot.value).is(0)
 		}
 		{
-			time.frame = 2
+			clock.frame = 2
 			device.setSample("Space", 2)
 			device.setSample("pointer.button.left", 3)
 			const actions = resolve()
@@ -24,97 +24,128 @@ export default Science.suite({
 		}
 	}),
 
-	"hold timing": test(async() => {
-		const {time, device, resolve} = testSetupAlpha()
-		{
-			time.frame = 1
-			device.setSample("KeyG", 0)
-			const actions = resolve()
-			expect(actions.basic.grenade.value).is(0)
-		}
-		{
-			time.frame = 2
-			device.setSample("KeyG", 1)
-			const actions = resolve()
-			expect(actions.basic.grenade.value).is(0)
-		}
-		{
-			time.frame = 15
-			device.setSample("KeyG", 1)
-			const actions = resolve()
-			expect(actions.basic.grenade.value).is(1)
+	"hold timing and behavior": test(async() => {
+		const {clock, device, resolve, actions} = testSetupAlpha()
+		const proceed = (options: {time: number, value: number}) => {
+			clock.time = options.time
+			device.setSample("KeyG", options.value)
+			resolve()
 		}
+
+		let count = 0
+		actions.basic.grenade.onDown(() => { count++ })
+		const getValue = () => actions.basic.grenade.value
+
+		// start doing nothing
+		proceed({time: 0, value: 0})
+		expect(getValue()).is(0)
+		expect(count).is(0)
+
+		// start holding
+		proceed({time: 10, value: 1})
+		expect(getValue()).is(0)
+		expect(count).is(0)
+
+		// keep holding
+		proceed({time: 20, value: 1})
+		expect(getValue()).is(0)
+		expect(count).is(0)
+
+		// held long enough to trigger down
+		proceed({time: 210, value: 1})
+		expect(getValue()).is(1)
+		expect(count).is(1)
+
+		// release, shouldn't trigger new down
+		proceed({time: 220, value: 0})
+		expect(getValue()).is(0)
+		expect(count).is(1)
+
+		// start holding again
+		proceed({time: 230, value: 1})
+		expect(getValue()).is(0)
+		expect(count).is(1)
+
+		// keep holding again
+		proceed({time: 330, value: 1})
+		expect(getValue()).is(0)
+		expect(count).is(1)
+
+		// held long enough again to trigger down
+		proceed({time: 430, value: 1})
+		expect(getValue()).is(1)
+		expect(count).is(2)
 	}),
 
 	"hub": Science.suite({
 		"device inputs work": test(async() => {
-			const {hub, time} = testSetupBravo()
+			const {hub, clock} = testSetupBravo()
 			const d1 = testPlug(hub, new SamplerDevice())
 			d1.setSample("Space", 1)
-			const [p1, p2] = hub.poll(time.now)
+			const [p1, p2] = hub.poll(clock.time)
 			expect(p1.actions.basic.jump.value).is(1)
 			expect(p2.actions.basic.jump.value).is(0)
 		}),
 
 		"reveal overlay works": test(async() => {
-			const {hub, time} = testSetupBravo()
+			const {hub, clock} = testSetupBravo()
 			const d1 = testPlug(hub, new SamplerDevice())
 			d1.setSample("Backslash", 1)
-			hub.poll(time.now)
+			hub.poll(clock.time)
 			expect(hub.metaPort.actions[metaMode].revealOverlay.value)
 				.is(1)
 		}),
 
 		"two devices playing on separate ports": test(async() => {
-			const {hub, time} = testSetupBravo()
+			const {hub, clock} = testSetupBravo()
 			const c1 = testPlug(hub, new SamplerDevice())
 			const c2 = testPlug(hub, new SamplerDevice())
 			c1.setSample("Space", 1)
 			c2.setSample("Space", 2)
-			const [p1, p2] = hub.poll(time.now)
+			const [p1, p2] = hub.poll(clock.time)
 			expect(p1.actions.basic.jump.value).is(1)
 			expect(p2.actions.basic.jump.value).is(2)
 		}),
 
 		"device can shimmy": test(async() => {
-			const {hub, time} = testSetupBravo()
+			const {hub, clock} = testSetupBravo()
 			const c1 = testPlug(hub, new SamplerDevice())
 			hub.shimmy(c1, 1)
 			c1.setSample("Space", 1)
-			const [p1, p2] = hub.poll(time.now)
+			const [p1, p2] = hub.poll(clock.time)
 			expect(p1.actions.basic.jump.value).is(0)
 			expect(p2.actions.basic.jump.value).is(1)
 		}),
 
 		"two devices can share a port": test(async() => {
-			const {hub, time} = testSetupBravo()
+			const {hub, clock} = testSetupBravo()
 			const c1 = testPlug(hub, new SamplerDevice())
 			const c2 = testPlug(hub, new SamplerDevice())
 			hub.shimmy(c2, -1)
 			expect(hub.portByDevice(c1)).is(hub.portByDevice(c2))
 			{
 				c1.setSample("Space", 1)
-				const [p1, p2] = hub.poll(time.now)
+				const [p1, p2] = hub.poll(clock.time)
 				expect(p1.actions.basic.jump.value).is(1)
 				expect(p2.actions.basic.jump.value).is(0)
 			}
 			{
 				c2.setSample("Space", 1)
-				const [p1, p2] = hub.poll(time.now)
+				const [p1, p2] = hub.poll(clock.time)
 				expect(p1.actions.basic.jump.value).is(1)
 				expect(p2.actions.basic.jump.value).is(0)
 			}
 			{
 				c1.setSample("Space", 1)
 				c2.setSample("Space", 2)
-				const [p1, p2] = hub.poll(time.now)
+				const [p1, p2] = hub.poll(clock.time)
 				expect(p1.actions.basic.jump.value).is(2)
 				expect(p2.actions.basic.jump.value).is(0)
 			}
 			{
 				c1.setSample("Space", 2)
 				c2.setSample("Space", 1)
-				const [p1, p2] = hub.poll(time.now)
+				const [p1, p2] = hub.poll(clock.time)
 				expect(p1.actions.basic.jump.value).is(2)
 				expect(p2.actions.basic.jump.value).is(0)
 			}

package/s/core/testing/testing.ts

@@ -2,16 +2,16 @@
 import {Hub} from "../hub/hub.js"
 import {Port} from "../hub/port.js"
 import {Device} from "../devices/device.js"
-import {asBindings, Code} from "../bindings/types.js"
 import {Resolver} from "../bindings/resolver.js"
 import {SampleMap} from "../bindings/sample-map.js"
+import {asBindings, Code} from "../bindings/types.js"
 import {SamplerDevice} from "../devices/infra/sampler.js"
 
-export class TestTime {
-	frame = 0
+export class TestClock {
+	time = 0
 
-	get now() {
-		return (this.frame++) * (1000 / 60)
+	set frame(frame: number) {
+		this.time = frame * (1000 / 60)
 	}
 }
 
@@ -31,26 +31,27 @@ export function testPlug<C extends Device>(hub: Hub<any>, device: C) {
 }
 
 export function testSetupAlpha() {
-	const time = new TestTime()
+	const clock = new TestClock()
 	const device = new SamplerDevice()
 	const resolver = new Resolver(testBindings())
 	const modes = new Set(Object.keys(resolver.bindings))
+	const actions = resolver.actions
 	const resolve = () => resolver.resolve(
-		time.now,
+		clock.time,
 		modes as any,
 		new SampleMap(device.samples())
 	)
-	return {device, resolver, resolve, time}
+	return {device, resolver, resolve, clock, actions}
 }
 
 export function testSetupBravo() {
-	const time = new TestTime()
+	const clock = new TestClock()
 	const port = () => {
 		const port = new Port(testBindings())
 		port.modes.adds("basic")
 		return port
 	}
 	const hub = new Hub([port(), port(), port(), port()])
-	return {hub, time}
+	return {hub, clock}
 }
 

package/s/deck/deck.ts

@@ -1,7 +1,6 @@
 
 import {Kv} from "@e280/kv"
-import {dom} from "@e280/sly"
-import {disposer, ob, range} from "@e280/stz"
+import {disposer, range} from "@e280/stz"
 
 import {Db} from "./parts/db.js"
 import {Hub} from "../core/hub/hub.js"
@@ -13,7 +12,6 @@ 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 {deckComponents, DeckViews} from "./components/components.js"
 
 export type DeckOptions<B extends Bindings, MB extends MetaBindings = any> = {
 	kv: Kv
@@ -46,17 +44,6 @@ export class Deck<B extends Bindings, MB extends MetaBindings = any> {
 	primaryDevice = new PrimaryDevice()
 	overlayVisibility: OverlayVisibility
 
-	components = deckComponents(this)
-
-	views = (
-		ob(this.components as any)
-			.map(c => (...a: any[]) => c.view(this, ...a))
-	) as DeckViews
-
-	registerComponents() {
-		dom.register(this.components)
-	}
-
 	constructor(
 			public baseBindings: B,
 			public baseMetaBindings: MB,

package/s/deck/index.ts

@@ -7,8 +7,7 @@ export * from "./parts/local-storage-kv.js"
 export * from "./parts/merge-bindings.js"
 export * from "./parts/overlay-visibility.js"
 
-export * from "./components/deck-overlay/component.js"
-export * from "./components/deck-overlay/style.css.js"
+export * from "./views/overlay/view.js"
 
 export * from "./deck.js"
 

package/s/deck/parts/db.ts

@@ -1,6 +1,6 @@
 
 import {disposer, Hex} from "@e280/stz"
-import {signal, SignalFn} from "@e280/strata"
+import {signal, Signal} from "@e280/strata"
 import {StorageDriver, Store} from "@e280/kv"
 
 import {Bindings} from "../../core/bindings/types.js"
@@ -16,7 +16,7 @@ export class Db {
 
 	constructor(
 			private store: Store<CatalogData>,
-			public $catalog: SignalFn<Catalog>,
+			public $catalog: Signal<Catalog>,
 		) {
 
 		this.dispose.schedule(
@@ -63,4 +63,3 @@ export class Db {
 		})
 	}
 }
-

package/s/deck/views/bindings/view.ts

@@ -0,0 +1,95 @@
+
+import {html} from "lit"
+import {bytename} from "@e280/stz"
+import {cssReset, shadow, useCss, useName, useSignal} from "@e280/sly"
+
+import {Deck} from "../../deck.js"
+import styleCss from "./style.css.js"
+import {Port} from "../../../core/hub/port.js"
+import {Profile} from "../../parts/catalog.js"
+import {Atom, Bindings, Bracket} from "../../../core/bindings/types.js"
+
+export const DeckBindings = shadow((deck: Deck<any>) => {
+	useCss(cssReset, styleCss)
+	useName("deck-bindings")
+	const {db, hub} = deck
+
+	const catalog = db.$catalog()
+	const defaultProfile: Profile = {id: "default", label: "default", bindings: deck.baseBindings}
+	const allProfiles = [defaultProfile, ...catalog.profiles.values()]
+	const $selectedProfileId = useSignal("default")
+	const profile = db.$catalog().getProfile($selectedProfileId()) ?? defaultProfile
+
+	function renderPort(_port: Port<Bindings>, index: number) {
+		const portProfile = catalog.getProfileForPort(index) ?? defaultProfile
+		return html`
+			<div class=port>
+				<span>port ${index + 1}</span>
+				<select>
+					${allProfiles.map(profile => html`
+						<option
+							data-id="${profile.id}"
+							?selected="${profile.id === portProfile.id}">
+								${profile.label}
+						</option>
+					`)}
+				</select>
+			</div>
+		`
+	}
+
+	function renderBindingBracket(entry: [string, unknown]) {
+		const [mode, bracket] = entry as [string, Bracket]
+		return html`
+			<div class=bracket>
+				<strong class=mode>${mode}</strong>
+				<div>${Object.entries(bracket).map(renderBinds)}</div>
+			</div>
+		`
+	}
+
+	function renderBinds([action, _atom]: [action: string, atom: Atom]) {
+		return html`
+			<div class=bind>
+				<span class=action>${action}</span>
+			</div>
+		`
+	}
+
+	const clickClone = async() => {
+		const {bindings} = profile
+		const label = bytename.random(4)
+		const p = await db.createProfile(label, bindings)
+		$selectedProfileId(p.id)
+	}
+
+	const deleteProfile = (id: string) => async() => {
+		await db.deleteProfile(id)
+	}
+
+	const onSelected = (event: InputEvent) => {
+		const select = event.target as HTMLSelectElement
+		const id = select.value
+		$selectedProfileId(id)
+	}
+
+	return html`
+		<div class=portlist>
+			${hub.ports.map(renderPort)}
+		</div>
+
+		<div class=bindable>
+			<select @input="${onSelected}">
+				${allProfiles.map(p => html`
+					<option value="${p.id}" ?selected="${p.id === profile.id}">${p.label}</option>
+				`)}
+			</select>
+			<button @click="${clickClone}">clone</button>
+			<button ?disabled="${profile.id === defaultProfile.id}" @click="${deleteProfile(profile.id)}">delete</button>
+			<div class=bindings>
+				${Object.entries(profile.bindings).map(renderBindingBracket)}
+			</div>
+		</div>
+	`
+})
+

package/s/deck/views/overlay/view.ts

@@ -0,0 +1,46 @@
+
+import {html} from "lit"
+import {cssReset, shadow, useCss, useName} from "@e280/sly"
+import {Deck} from "../../deck.js"
+import styleCss from "./style.css.js"
+import {Device} from "../../../core/devices/device.js"
+
+export const DeckOverlay = shadow((deck: Deck<any>) => {
+	useCss(cssReset, styleCss)
+	useName("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>
+	`
+})
+

package/s/demo/game/parts/renderer.ts

@@ -22,16 +22,16 @@ export class Renderer {
 
 	/** take a game-state position and resolve it into canvas coordinates */
 	resolve(position: Vec2) {
-		return position.clone()
+		return position.dup()
 
 			// 0-1 relative to arena scale
-			.divide(this.state.arenaSize)
+			.div(this.state.arenaSize)
 
 			// flip y axis
-			.morph(v => {v.y = 1 - v.y})
+			.morph((v: Vec2) => {v.y = 1 - v.y})
 
 			// stretch to the size of the canvas
-			.multiply_(this.canvas.width, this.canvas.height)
+			.mul_(this.canvas.width, this.canvas.height)
 	}
 
 	render() {
@@ -110,4 +110,3 @@ export class Renderer {
 		ctx.fillText(agent.label, x, y)
 	}
 }
-

package/s/demo/game/parts/state.ts

@@ -11,7 +11,7 @@ export class State {
 		agent.label = label
 		agent.position
 			.set_(0.5, 0.5)
-			.multiply(this.arenaSize)
+			.mul(this.arenaSize)
 		this.agents.add(agent)
 		return agent
 	}
@@ -21,4 +21,3 @@ export class State {
 		return this
 	}
 }
-

package/s/demo/main.bundle.ts

@@ -5,9 +5,6 @@ import {DemoTheater} from "./ui/theater/view.js"
 
 const game = await Game.load()
 
-dom.register({
-	DemoTheater: class extends DemoTheater { game = game },
-})
+dom.render(dom("#demo-theater"), DemoTheater(game))
 
 console.log("🎮 tact")
-

package/s/demo/ui/theater/styles.css.ts

@@ -33,7 +33,7 @@ export const styles = css`
 		outline: 1px solid red;
 	}
 
-	[deck="overlay"] {
+	[view="deck-overlay"] {
 		position: absolute;
 		top: 10%;
 		left: 0;
@@ -55,4 +55,3 @@ export const styles = css`
 }
 
 `
-