@benev/tact 0.1.0-4 → 0.1.0

package/README.md

@@ -1,17 +1,4 @@
 
-
-> [!CAUTION]
-> ### 🚨🚨 TACT IS UNDER DEVELOPMENT!! 🚨🚨
-> *everything is half-broken right now.. just gimmie a minute to finish coding this, will ya?*
-
-<br></br>
-
----
-
----
-
-<br></br>
-
 # 🎮 @benev/tact
 > *web game input library, from keypress to couch co-op*
 
@@ -246,14 +233,16 @@ the deck ties together all the important pieces of tact into a single user exper
     ["code", "KeyA", {
 		  scale: 1,
 		  invert: false,
-		  deadzone: 0,
 		  timing: ["direct"],
     }]
     ```
     - defaults shown
     - `scale` is sensitivity, the value gets multiplied by this
     - `invert` will invert a value by subtracting it from 1
-    - `deadzone` ignores values below the threshold (and remaps to preserve the range)
+    - `clamp` clamps the value with a lower and upper bound
+    - `range` restricts value to the given range, and remaps that range 0 to 1
+    - `bottom` zeroes the value if it's less than the given bottom value
+    - `top` clamps the value to an upper bound
     - `timing` lets you specify special timing considerations
       - `["direct"]` ignores timing considerations
       - `["tap", 250]` only fires for taps under 250ms

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@benev/tact",
-	"version": "0.1.0-4",
+	"version": "0.1.0",
 	"description": "keybindings and gamepad support for web games",
 	"license": "MIT",
 	"author": "Chase Moskal <chasemoskal@gmail.com>",
@@ -29,21 +29,21 @@
 		"count": "find s -path '*/_archive' -prune -o -name '*.ts' -exec wc -l {} +"
 	},
 	"peerDependencies": {
-		"lit": "^3.3.1"
+		"lit": "^3.3.2"
 	},
 	"dependencies": {
-		"@benev/math": "^0.2.0-4",
+		"@benev/math": "^0.2.0",
 		"@e280/kv": "^0.1.0",
-		"@e280/sly": "^0.2.0-16",
-		"@e280/strata": "^0.2.0-13",
-		"@e280/stz": "^0.2.5"
+		"@e280/sly": "^0.2.5",
+		"@e280/strata": "^0.2.8",
+		"@e280/stz": "^0.2.24"
 	},
 	"devDependencies": {
-		"@e280/science": "^0.1.2",
-		"@e280/scute": "^0.1.0",
+		"@e280/science": "^0.1.8",
+		"@e280/scute": "^0.1.5",
 		"http-server": "^14.1.1",
 		"npm-run-all": "^4.1.5",
-		"typescript": "^5.9.2"
+		"typescript": "^5.9.3"
 	},
 	"repository": {
 		"type": "git",

package/s/core/bindings/parts/defaults.ts

@@ -3,10 +3,10 @@ import {Code, CodeSettings, CodeState} from "../types.js"
 
 export const defaultHoldTime = 250
 
-export function defaultCodeState([,,settings]: Code): CodeState {
+export function defaultCodeState([,,settings]: Code, now: number): CodeState {
 	return {
 		lastValue: 0,
-		holdStart: 0,
+		holdStart: now,
 		settings: defaultifyCodeSettings(settings),
 	}
 }
@@ -15,6 +15,7 @@ function defaultCodeSettings(): CodeSettings {
 	return {
 		scale: 1,
 		invert: false,
+		clamp: null,
 		range: null,
 		bottom: null,
 		top: null,

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

@@ -13,6 +13,10 @@ export const lensAlgo = (
 
 	function clippings(value) {
 		const {settings} = state
+		if (settings.clamp) {
+			const [bottom, top] = settings.clamp
+			value = Scalar.clamp(value, bottom, top)
+		}
 		if (settings.range) {
 			const [bottom, top] = settings.range
 			value = Scalar.isBetween(value, bottom, top)
@@ -24,7 +28,7 @@ export const lensAlgo = (
 				)
 				: 0
 		}
-		if (settings.bottom) value = Math.max(settings.bottom, value)
+		if (settings.bottom) value = (value < settings.bottom) ? 0 : value
 		if (settings.top) value = Math.min(settings.top, value)
 		return value
 	},

package/s/core/bindings/parts/lookup-proxies.ts

@@ -0,0 +1,17 @@
+// // TODO
+//
+// import {Bindings} from "../types.js"
+//
+// export function makeLookupProxies<B extends Bindings>(
+// 		bindings: B,
+// 	) {
+//
+// 	const getModeProxy = (mode: string) => new Proxy(bindings[mode], {
+// 		get: (_, action: string) => {},
+// 	})
+//
+// 	return new Proxy(bindings, {
+// 		get: (_, mode: string) => getModeProxy(mode),
+// 	})
+// }
+//

package/s/core/bindings/resolver.ts

@@ -1,5 +1,5 @@
 
-import {MapG, pub, obMap} from "@e280/stz"
+import {pub, obMap, GMap} from "@e280/stz"
 import {Action} from "./action.js"
 import {SampleMap} from "./sample-map.js"
 import {lensAlgo} from "./parts/lens-algo.js"
@@ -12,7 +12,7 @@ export class Resolver<B extends Bindings> {
 	#modes = new Set<keyof B>()
 	#sampleMap = new SampleMap()
 	#now = 0
-	#codeStates = new MapG<number, CodeState>()
+	#codeStates = new GMap<string, CodeState>()
 	#update = pub()
 
 	constructor(public bindings: B) {
@@ -20,7 +20,7 @@ export class Resolver<B extends Bindings> {
 			const action = new Action()
 			this.#update.subscribe(() => {
 				action.value = this.#modes.has(mode)
-					? this.#resolveAtom()(atom)
+					? this.#resolveAtom([])(atom, mode as string)
 					: 0
 			})
 			return action
@@ -35,24 +35,31 @@ export class Resolver<B extends Bindings> {
 		return this.actions
 	}
 
-	#resolveCode(count: number, code: string, settings?: Partial<CodeSettings>) {
+	#resolveCode(path: string[], code: string, settings?: Partial<CodeSettings>) {
 		const state = this.#codeStates.guarantee(
-			count,
-			() => defaultCodeState(["code", code, settings]),
+			path.join("/"),
+			() => defaultCodeState(["code", code, settings], this.#now),
 		)
 		const value = this.#sampleMap.get(code) ?? 0
 		return lensAlgo(this.#now, state, value)
 	}
 
-	#resolveAtom = (context: {count: number} = {count: 0}) => (atom: Atom): number => {
-		const resolveAtom = this.#resolveAtom(context)
-		if (typeof atom === "string") {
-			return this.#resolveCode(context.count++, atom)
-		}
+	#resolveAtom = (path: string[]) => (atom: Atom, zone: string | number): number => {
+		const nextPath = [
+			...path,
+			String(zone),
+			typeof atom === "string" ? atom : atom[0],
+		]
+
+		const resolveAtom = this.#resolveAtom(nextPath)
+
+		if (typeof atom === "string")
+			return this.#resolveCode(nextPath, atom)
+
 		else switch (atom[0]) {
 			case "code": {
 				const [, code, settings] = atom
-				return this.#resolveCode(context.count++, code, settings)
+				return this.#resolveCode(nextPath, code, settings)
 			}
 			case "and": {
 				const [,...atoms] = atom
@@ -66,13 +73,13 @@ export class Resolver<B extends Bindings> {
 			}
 			case "not": {
 				const [, subject] = atom
-				const value = resolveAtom(subject)
+				const value = resolveAtom(subject, "subject")
 				return (value > 0) ? 0 : 1
 			}
 			case "cond": {
 				const [, subject, guard] = atom
-				return (resolveAtom(guard) > 0)
-					? resolveAtom(subject)
+				return (resolveAtom(guard, "guard") > 0)
+					? resolveAtom(subject, "subject")
 					: 0
 			}
 			case "mods": {
@@ -85,9 +92,9 @@ export class Resolver<B extends Bindings> {
 					maybe(modifiers.alt ?? false, "AltLeft", "AltRight"),
 					maybe(modifiers.meta ?? false, "MetaLeft", "MetaRight"),
 					maybe(modifiers.shift ?? false, "ShiftLeft", "ShiftRight"),
-				]])
+				]], "guard")
 				return (guard > 0)
-					? resolveAtom(subject)
+					? resolveAtom(subject, "subject")
 					: 0
 			}
 		}

package/s/core/bindings/types.ts

@@ -34,6 +34,7 @@ export type Atom = string | (
 export type CodeSettings = {
 	scale: number
 	invert: boolean
+	clamp: null | [number, number]
 	range: null | [number, number]
 	bottom: null | number
 	top: null | number

package/s/core/core.test.ts

@@ -24,6 +24,28 @@ 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)
+		}
+	}),
+
 	"hub": Science.suite({
 		"device inputs work": test(async() => {
 			const {hub, time} = testSetupBravo()

package/s/core/devices/standard/gamepad.ts

@@ -59,7 +59,7 @@ export class GamepadDevice extends SamplerDevice {
 	}
 
 	#pollSticks(gamepad: Gamepad) {
-		const [leftX, leftY, rightX, rightY] = gamepad.axes
+		const [leftX = 0, leftY = 0, rightX = 0, rightY = 0] = gamepad.axes
 
 		const stickLeft = splitVector(
 			circularClamp(new Vec2(leftX, leftY), this.range)

package/s/core/devices/standard/pointer.ts

@@ -31,6 +31,10 @@ export class PointerDevice extends SamplerDevice {
 			},
 
 			wheel: (event: WheelEvent) => {
+				this.sampleMap.set("pointer.wheel.right", 0)
+				this.sampleMap.set("pointer.wheel.left", 0)
+				this.sampleMap.set("pointer.wheel.up", 0)
+				this.sampleMap.set("pointer.wheel.down", 0)
 				for (const [code, value] of PointerDevice.wheelCodes(event))
 					this.setSample(code, value)
 			},

package/s/core/testing/testing.ts

@@ -2,7 +2,7 @@
 import {Hub} from "../hub/hub.js"
 import {Port} from "../hub/port.js"
 import {Device} from "../devices/device.js"
-import {asBindings} from "../bindings/types.js"
+import {asBindings, Code} from "../bindings/types.js"
 import {Resolver} from "../bindings/resolver.js"
 import {SampleMap} from "../bindings/sample-map.js"
 import {SamplerDevice} from "../devices/infra/sampler.js"
@@ -20,6 +20,7 @@ export function testBindings() {
 		basic: {
 			jump: "Space",
 			shoot: "pointer.button.left",
+			grenade: <Code>["code", "KeyG", {timing: ["hold", 200]}]
 		},
 	})
 }

package/s/deck/components/components.ts

@@ -0,0 +1,22 @@
+
+import {ob} from "@e280/stz"
+import {Deck} from "../deck.js"
+import {DropFirstParam} from "../../utils/types.js"
+import {DeckOverlay} from "./deck-overlay/component.js"
+import {DeckBindings} from "./deck-bindings/component.js"
+
+const components = {DeckOverlay, DeckBindings}
+
+export const deckComponents = (deck: Deck<any>) => (
+	ob(components)
+		.map(C => class extends C { deck = deck })
+) as DeckComponents
+
+export type DeckComponents = typeof components
+
+export type DeckViews = {
+	[P in keyof DeckComponents]: (
+		DropFirstParam<DeckComponents[P]["view"]>
+	)
+}
+

package/s/deck/components/deck-bindings/component.ts

@@ -0,0 +1,99 @@
+
+import {html} from "lit"
+import {Bytename} from "@e280/stz"
+import {cssReset, view} from "@e280/sly"
+
+import {Deck} from "../../deck.js"
+import styleCss from "./style.css.js"
+import {DeckComponent} from "../framework.js"
+import {Port} from "../../../core/hub/port.js"
+import {Profile} from "../../parts/catalog.js"
+import {Atom, Bindings, Bracket} from "../../../core/bindings/types.js"
+
+export class DeckBindings extends (
+	view(use => (deck: Deck<any>) => {
+		use.css(cssReset, styleCss)
+		use.attrs.strings.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 = use.signal<string>("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([mode, bracket]: [mode: string, bracket: 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>
+		`
+	})
+	.component(DeckComponent)
+	.props(el => [el.deck])
+) {}
+

package/s/{demo/ui/tact-demo → deck/components/deck-bindings}/style.css.ts

@@ -1,4 +1,6 @@
 
 import {css} from "lit"
-export default css``
+export default css`
+
+`
 

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

@@ -0,0 +1,51 @@
+
+import {html} from "lit"
+import {cssReset, view} from "@e280/sly"
+import {Deck} from "../../deck.js"
+import styleCss from "./style.css.js"
+import {DeckComponent} from "../framework.js"
+import {Device} from "../../../core/devices/device.js"
+
+export class DeckOverlay extends (
+	view(use => (deck: Deck<any>) => {
+		use.css(cssReset, styleCss)
+		use.attrs.strings.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>
+		`
+	})
+	.component(DeckComponent)
+	.props(el => [el.deck])
+) {}
+

package/s/deck/{views → components}/deck-overlay/style.css.ts

@@ -108,5 +108,3 @@ export default css`
 
 `
 
-
-

package/s/deck/components/framework.ts

@@ -0,0 +1,17 @@
+
+import {BaseElement} from "@e280/sly"
+import {Deck} from "../deck.js"
+
+export class DeckComponent extends BaseElement {
+	#deck: Deck<any> | undefined
+
+	get deck() {
+		if (!this.#deck) throw new Error(".deck was not set on component, but is required")
+		return this.#deck
+	}
+
+	set deck(d: Deck<any>) {
+		this.#deck = d
+	}
+}
+

package/s/deck/deck.ts

@@ -1,5 +1,6 @@
 
 import {Kv} from "@e280/kv"
+import {dom} from "@e280/sly"
 import {disposer, ob, range} from "@e280/stz"
 
 import {Db} from "./parts/db.js"
@@ -8,13 +9,11 @@ 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"
+import {deckComponents, DeckViews} from "./components/components.js"
 
 export type DeckOptions<B extends Bindings, MB extends MetaBindings = any> = {
 	kv: Kv
@@ -39,22 +38,28 @@ export class Deck<B extends Bindings, MB extends MetaBindings = any> {
 				?? makeMetaBindings(),
 		)
 
-		return new this(hub, db)
+		return new this(options.bindings, options.metaBindings, hub, db)
 	}
 
 	dispose = disposer()
 	deviceSkins = new DeviceSkins()
-	overlayVisibility: OverlayVisibility
 	primaryDevice = new PrimaryDevice()
+	overlayVisibility: OverlayVisibility
+
+	components = deckComponents(this)
 
-	views = ob({DeckOverlay}).map(fn => fn(this))
-	components = ob(this.views).map(v => v.component().props(_c => []))
+	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,
 			public hub: Hub<B, MB>,
 			public db: Db,
 		) {

package/s/deck/index.ts

@@ -7,8 +7,8 @@ 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 "./components/deck-overlay/component.js"
+export * from "./components/deck-overlay/style.css.js"
 
 export * from "./deck.js"
 

package/s/deck/parts/db.ts

@@ -57,7 +57,7 @@ export class Db {
 		})
 	}
 
-	async assignPortToProfile(index: number, profileId: string | null) {
+	async assignPortProfile(index: number, profileId: string | null) {
 		return this.#mutateAndSave(catalog => {
 			catalog.portProfiles[index] = profileId
 		})

package/s/demo/main.bundle.ts

@@ -1,8 +1,13 @@
 
 import {dom} from "@e280/sly"
-import {TactDemo} from "./ui/tact-demo/component.js"
+import {Game} from "./game/game.js"
+import {DemoTheater} from "./ui/theater/view.js"
 
-dom.register({TactDemo})
+const game = await Game.load()
+
+dom.register({
+	DemoTheater: class extends DemoTheater { game = game },
+})
 
 console.log("🎮 tact")
 

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

@@ -40,6 +40,7 @@ export const styles = css`
 		right: 0;
 
 		display: flex;
+		flex-direction: column;
 		justify-content: center;
 		align-items: center;
 	}