@benev/tact 0.1.0-4 → 0.1.0-5

package/README.md

@@ -1,5 +1,4 @@
 
-
 > [!CAUTION]
 > ### 🚨🚨 TACT IS UNDER DEVELOPMENT!! 🚨🚨
 > *everything is half-broken right now.. just gimmie a minute to finish coding this, will ya?*
@@ -246,14 +245,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-5",
 	"description": "keybindings and gamepad support for web games",
 	"license": "MIT",
 	"author": "Chase Moskal <chasemoskal@gmail.com>",
@@ -34,9 +34,9 @@
 	"dependencies": {
 		"@benev/math": "^0.2.0-4",
 		"@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.0-24",
+		"@e280/strata": "^0.2.0-14",
+		"@e280/stz": "^0.2.7"
 	},
 	"devDependencies": {
 		"@e280/science": "^0.1.2",

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

@@ -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/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/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/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;
 	}

package/s/demo/ui/theater/view.ts

@@ -1,53 +1,60 @@
 
 import {html} from "lit"
-import {cssReset, view} from "@e280/sly"
 import {repeat} from "lit/directives/repeat.js"
+import {BaseElement, cssReset, view} from "@e280/sly"
 
 import {styles} from "./styles.css.js"
 import {Game} from "../../game/game.js"
 import {VirtualDeviceView} from "./virtual/view.js"
 import {VirtualDevice} from "../../game/parts/virtual-device.js"
-
-export const Theater = view(use => (game: Game) => {
-	use.css(cssReset, styles)
-	use.mount(() => game.loop(60))
-	use.mount(() => game.deck.hub.on(use.render))
-
-	const addVirtual = () => game.plug(new VirtualDevice(game.deck.hub))
-	const revealOverlay = () => game.deck.overlayVisibility.bump()
-
-	const virtualDevices = game.deck.hub.ports
-		.flatMap(port => port.devices.array())
-		.filter(device => device instanceof VirtualDevice)
-		.map(device => ({device, skin: game.deck.deviceSkins.get(device)}))
-		.sort((a, b) => a.skin.label < b.skin.label ? -1 : 1)
-
-	return html`
-		<div class=surface>
-			${game.renderer.canvas}
-			${game.deck.views.DeckOverlay()}
-		</div>
-
-		<div class=dlist>
-			${repeat(
-				virtualDevices,
-				d => d.skin.label,
-				({device, skin}) => {
-					return VirtualDeviceView
-						.props(game.deck.hub, device, skin)
-						.attr("style", `--color: ${skin.color};`)
-						.render()
-				},
-			)}
-
-			<button @click="${addVirtual}">
-				✨
-			</button>
-
-			<button @click="${revealOverlay}">
-				👁️
-			</button>
-		</div>
-	`
-})
+import {DeckBindings} from "../../../deck/components/deck-bindings/component.js"
+
+export class DemoTheater extends (
+	view(use => (game: Game) => {
+		use.css(cssReset, styles)
+		use.mount(() => game.loop(60))
+		use.mount(() => game.deck.hub.on(use.render))
+
+		const addVirtual = () => game.plug(new VirtualDevice(game.deck.hub))
+		const revealOverlay = () => game.deck.overlayVisibility.bump()
+
+		const virtualDevices = game.deck.hub.ports
+			.flatMap(port => port.devices.array())
+			.filter(device => device instanceof VirtualDevice)
+			.map(device => ({device, skin: game.deck.deviceSkins.get(device)}))
+			.sort((a, b) => a.skin.label < b.skin.label ? -1 : 1)
+
+		return html`
+			<div class=surface>
+				${game.renderer.canvas}
+				${game.deck.views.DeckOverlay()}
+			</div>
+
+			<div class=dlist>
+				${repeat(
+					virtualDevices,
+					d => d.skin.label,
+					({device, skin}) => {
+						return VirtualDeviceView
+							.props(game.deck.hub, device, skin)
+							.attr("style", `--color: ${skin.color};`)
+							.render()
+					},
+				)}
+
+				<button @click="${addVirtual}">
+					✨
+				</button>
+
+				<button @click="${revealOverlay}">
+					👁️
+				</button>
+			</div>
+
+			${DeckBindings.view(game.deck)}
+		`
+	})
+	.component(class extends BaseElement { game!: Game })
+	.props(el => [el.game])
+) {}
 

package/s/demo/ui/theater/virtual/view.ts

@@ -14,7 +14,7 @@ export const VirtualDeviceView = view(use => (
 	) => {
 
 	use.styles(cssReset, styleCss)
-	use.attrs.string.device = "virtual"
+	use.attrs.strings.device = "virtual"
 
 	const unplug = () => hub.unplug(device)
 

package/s/demo/ui/utils/loader.ts

@@ -1,5 +1,5 @@
 
-import {makeLoader} from "@e280/sly"
+import {loaders} from "@e280/sly"
 
-export const loader = makeLoader()
+export const loader = loaders.make()
 

package/s/index.html.ts

@@ -37,7 +37,7 @@ export default ssg.page(import.meta.url, async orb => ({
 			</div>
 		</header>
 
-		<tact-demo></tact-demo>
+		<demo-theater></demo-theater>
 
 		<section>
 			<h3>controls</h3>

package/s/nubs/vpad/styles.css.ts

@@ -85,11 +85,11 @@ button {
 	flex-direction: row-reverse;
 }
 
-[x-code^="g.trigger"] {
+[x-code^="gamepad.trigger"] {
 	width: 6em;
 }
 
-[x-code^="g.bumper"] {
+[x-code^="gamepad.bumper"] {
 	width: 4em;
 }
 
@@ -121,11 +121,11 @@ button {
 		width: max(15cqw, 15cqh);
 	}
 
-	[x-code^="g.trigger"] {
+	[x-code^="gamepad.trigger"] {
 		width: 9cqw;
 	}
 
-	[x-code^="g.bumper"] {
+	[x-code^="gamepad.bumper"] {
 		width: 7cqw;
 	}
 }

package/s/utils/types.ts

@@ -0,0 +1,19 @@
+
+// TODO replace these types when they're available in stz
+
+export type First<A extends any[]> = (
+	A extends [infer X, ...any[]]
+		? X
+		: never
+)
+
+export type DropFirst<A extends any[]> = (
+	A extends [any, ...infer X]
+		? X
+		: never
+)
+
+export type DropFirstParam<Fn extends (...params: any[]) => any> = (
+	(...params: DropFirst<Parameters<Fn>>) => ReturnType<Fn>
+)
+

package/x/core/bindings/parts/defaults.js

@@ -10,6 +10,7 @@ function defaultCodeSettings() {
     return {
         scale: 1,
         invert: false,
+        clamp: null,
         range: null,
         bottom: null,
         top: null,

package/x/core/bindings/parts/defaults.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../../s/core/bindings/parts/defaults.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;AAElC,MAAM,UAAU,gBAAgB,CAAC,CAAC,EAAC,EAAC,QAAQ,CAAO;IAClD,OAAO;QACN,SAAS,EAAE,CAAC;QACZ,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,sBAAsB,CAAC,QAAQ,CAAC;KAC1C,CAAA;AACF,CAAC;AAED,SAAS,mBAAmB;IAC3B,OAAO;QACN,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;QACZ,GAAG,EAAE,IAAI;QACT,MAAM,EAAE,CAAC,QAAQ,CAAC;KAClB,CAAA;AACF,CAAC;AAED,SAAS,sBAAsB,CAAC,UAAiC,EAAE;IAClE,OAAO;QACN,GAAG,mBAAmB,EAAE;QACxB,GAAG,OAAO;KACV,CAAA;AACF,CAAC"}
+{"version":3,"file":"defaults.js","sourceRoot":"","sources":["../../../../s/core/bindings/parts/defaults.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;AAElC,MAAM,UAAU,gBAAgB,CAAC,CAAC,EAAC,EAAC,QAAQ,CAAO;IAClD,OAAO;QACN,SAAS,EAAE,CAAC;QACZ,SAAS,EAAE,CAAC;QACZ,QAAQ,EAAE,sBAAsB,CAAC,QAAQ,CAAC;KAC1C,CAAA;AACF,CAAC;AAED,SAAS,mBAAmB;IAC3B,OAAO;QACN,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,KAAK;QACb,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;QACZ,GAAG,EAAE,IAAI;QACT,MAAM,EAAE,CAAC,QAAQ,CAAC;KAClB,CAAA;AACF,CAAC;AAED,SAAS,sBAAsB,CAAC,UAAiC,EAAE;IAClE,OAAO;QACN,GAAG,mBAAmB,EAAE;QACxB,GAAG,OAAO;KACV,CAAA;AACF,CAAC"}

package/x/core/bindings/parts/lens-algo.js

@@ -4,6 +4,10 @@ import { isPressed } from "./is-pressed.js";
 import { defaultHoldTime } from "./defaults.js";
 export const lensAlgo = (now, state, v) => pipe(v).line(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)
@@ -11,7 +15,7 @@ export const lensAlgo = (now, state, v) => pipe(v).line(function clippings(value
             : 0;
     }
     if (settings.bottom)
-        value = Math.max(settings.bottom, value);
+        value = (value < settings.bottom) ? 0 : value;
     if (settings.top)
         value = Math.min(settings.top, value);
     return value;