@benev/tact 0.4.0-0 → 0.4.0-1

package/README.md

@@ -2,104 +2,128 @@
 # 🎮 @benev/tact
 > *from keypress to couch co-op.*
 
-**tact is a tiny input toolkit for web games.**  
-keyboards, mice, gamepads. expressive bindings json dsl.  
-binary messages for efficient networking and web worker multithreading.  
+**tact is a user-input toolkit for web games.**
 
-```ts
-npm install @benev/tact@next
-```
+🌐 👉 ***https://tact.benev.gg/*** 👈 *try now*  
 
+🖱 keyboards, mice, gamepads.  
+🧩 expressive bindings json dsl.  
+🎨 bindings are user-customizable.  
+🫂 multiplayer and splitscreen capable.  
+🧬 binary for efficient workers and networking.  
+🎸 ready-to-rock drop-in user-interface.  
 
+![](https://i.imgur.com/dCAlD14.png)
 
-<br/>
-
-## 🕹️ sources emit samples.
-
-- **samples look like** `{code: "KeyW", value: 1}`
-    ```ts
-    import {Sources, KeyboardSource, PointerSource} from "@benev/tact"
-    ```
-    ```ts
-    const source = new Sources(
-      new KeyboardSource(),
-      new PointerSource(),
-    )
-    ```
-    - proper sources: [GamepadSource](./s/lib/input/sources/gamepad.ts), [KeyboardSource](./s/lib/input/sources/keyboard.ts), [PointerSource](./s/lib/input/sources/pointer.ts), [StickSource](./s/lib/input/sources/stick.ts).
-    - utility sources: [Sources](./s/lib/input/sources/sources.ts) *(consolidates sources)*, [PlainSource](./s/lib/input/sources/plain.ts) *(handy base class)*.
+![](https://i.imgur.com/IBW5Kkd.png)
 
 
 
 <br/>
 
-## 🕹️ bindings describe controls.
+## 🎮 let's play.
 
-- **bindings are tiny programs,** a dsl in js data.
+- 🍏 **install tact.**
+    ```sh
+    npm install @benev/tact@next
+    ```
+- 🍏 **establish your app's standard bindings.**
     ```ts
     import {asBindings} from "@benev/tact"
+
+    const bindings = asBindings({
+      jump: "Space",
+      forward: "KeyW",
+      look: ["accumulate", "pointer.x"],
+    })
     ```
+    - 💡 *bindings is a tiny json dsl. see [expression.ts](./s/lib/input/expression.ts).*
+- 🍏 **let's have two presets available to the user. one for gamepads.**
     ```ts
-    const bindings = asBindings({
-      forward: ["max", "KeyW", "ArrowUp"],
-      jump: ["down", "Space"],
-      look: ["accumulate", ["sum", "pointer.x"]],
+    import {asPresets} from "@benev/tact"
+
+    const presets = asPresets<typeof bindings>({
+      standard: {label: "⌨️standard", bindings},
+      gamepad: {label: "🎮gamer", bindings: {
+        jump: "gamepad.1",
+        forward: ["remap", 0, -1, 0, 1, "gamepad.axis.2"],
+        look: ["*", ["dt"], "gamepad.axis.3", 100],
+      }},
     })
     ```
-    - see [expression.ts](./s/lib/input/expression.ts) to learn what's possible.
+- 🍏 **now we can setup tact and register the html elements.**
+    ```ts
+    import {setupTact} from "@benev/tact"
+
+    const tact = await setupTact({presets, maxPlayers: 4})
+    tact.mouseKeyboard()
+    tact.gamepads("gamepad")
+    tact.registerElements()
+    ```
+- 🍏 **simply put the `<tact-deck>` in your html page.**
+    ```html
+    <tact-deck></tact-deck>
+    ```
+    - 💡 *you also have each panel, `<tact-controllers>` and `<tact-customize>`.*
+- 🍏 **color the whole ui with css.**
+    ```html
+    <style>
+      html {
+        --tact-prime: aqua;
+        --tact-bg: black;
+      }
+    </style>
+    ```
 
 
 
 <br/>
 
-## 🕹️ encode and decode.
+## 🎮 encoding, decoding, and your game logic.
 
-- **the data is binary for efficient networking.**
+- 🍏 **make a collector.**
     ```ts
-    import {InputEncoder, InputDecoder} from "@benev/tact"
+    import {Collector} from "@benev/tact"
+
+    const collector = new Collector(bindings)
     ```
+- 🍏 **now it's time for the real action!**
     ```ts
-    const encoder = new InputEncoder(source, bindings)
-    const decoder = new InputDecoder(bindings)
+    setInterval(() => {
+      const buffer = tact.deck.hub.encodeAll()
+      for (const {playerId, inputs} of collector.decodeAll(buffer)) {
+
+        // your game logic can read these handy input values.
+        inputs.jump.value // values are numbers 0  to 1.
+        inputs.jump.was // previous value (to detect up/down).
+        inputs.jump.sum // sum of values reported since last frame.
+
+        inputs.forward.value
+        inputs.look.value
+      }
+    }, 16.67)
     ```
-    ```ts
-    function frame() {
+    💡 *you could stream the buffers across the network to a remote collector.*
 
-      // data is an ArrayBuffer (you could stream it over the network).
-      const data = encoder.encode()
 
-      // decoding interprets the data as handy input objects.
-      const inputs = decoder.decode(data)
 
-      // your game logic can read these handy input values.
-      inputs.forward.value // current held state.
-      inputs.jump.value // down-presses this frame.
-      inputs.look.value // total accumulated mouse movement.
+<br/>
 
-      // this was so cool, let's do this forever.
-      requestAnimationFrame(frame)
-    }
+## 🎮 get down to brass tacks.
 
-    requestAnimationFrame(frame)
-    ```
-- **understanding networking situations.**
-  - the encoder could be on your clientside.
-  - the decoder could be on your serverside.
-  - thus, clients are streaming their input data to the serverside, which is decoding it and using it in game logic.
-  - don't worry, it's not a keylogger -- the encoded data is more like `jump: 1`, `look: 5`, etc.
-  - the decoder can accept multiple data packets at once, `decoder.decode(...datas)`.
-- **understanding multithreaded worker situations.**
-  - the encoder would be on the main thread, where javascript events are accessible.
-  - you can then send the encoded input data to the thread where you're simulating the game.
-  - you can have multiple encoders -- one encoder sending data to a worker thread -- another encoder sending data to the serverside.
-- **update the encoder's bindings anytime.**
+- 🍏 **use the core facilities directly,** without the ui or multiplayer.  
     ```ts
-    // the new bindings must be schema-compatible or an error is thrown.
-    encoder.bindings = {
-      forward: "KeyE",
-      jump: "Space",
-      look: "gamepad.axis.2"
-    }
+    import {Controller, InputDecoder, KeyboardSource, PointerSource, Sources} from "@benev/tact"
+
+    const controller = new Controller({
+      bindings,
+      source: new Sources(new KeyboardSource(), new PointerSource()),
+    })
+
+    const decoder = new InputDecoder(bindings)
+
+    // call this in your gameloop:
+    const inputs = decoder.decode(controller.encode())
     ```
 
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@benev/tact",
-	"version": "0.4.0-0",
-	"description": "🎮 keybindings and couch co-op",
+	"version": "0.4.0-1",
+	"description": "🎮 from keypress to couch co-op",
 	"license": "MIT",
 	"author": "Chase Moskal <chasemoskal@gmail.com>",
 	"type": "module",
@@ -28,13 +28,14 @@
 	"dependencies": {
 		"@benev/math": "0.4.0-9",
 		"@e280/kv": "^0.2.4",
-		"@e280/stz": "^0.4.11"
+		"@e280/shiny": "^0.1.1",
+		"@e280/stz": "^0.4.14"
 	},
 	"devDependencies": {
 		"@e280/hottie": "^0.1.7",
 		"@e280/octo": "^0.1.7",
 		"@e280/science": "^0.1.14",
-		"@e280/scute": "^0.5.3",
+		"@e280/scute": "^0.5.4",
 		"http-server": "^14.1.1",
 		"npm-run-all": "^4.1.5",
 		"typescript": "^7.0.2"

package/s/demo/main.bundle.ts

@@ -1,8 +1,23 @@
 
 import {dom} from "@e280/sly"
-import {setupDemoApp} from "./demo-app/element.js"
+import {cycle, nap} from "@e280/stz"
+import {presets} from "./presets.js"
+import {setupTact} from "../lib/ui/deck/setup/tact.js"
 
-dom.register({
-	DemoApp: setupDemoApp(),
+const tact = await setupTact({presets, maxPlayers: 4})
+tact.mouseKeyboard()
+tact.gamepads("gamer")
+tact.registerElements()
+
+cycle(async() => {
+	const data = tact.deck.hub.encodeAll()
+	tact.visualizer.update(data)
+	await nap(1000 / 60)
 })
 
+{
+	const input = dom<HTMLInputElement>('input[type="color"]')
+	input.value = "#ffbb00"
+	input.oninput = () => document.body.style.setProperty("--tact-prime", input.value)
+}
+

package/s/demo/main.css

@@ -59,17 +59,18 @@
 		align-items: center;
 
 		gap: 1em;
-		padding: 2em;
+		padding: 0.5em;
+		padding-bottom: 8em;
 
 		> * {
-			width: 100%;
-			max-width: 42em;
+			width: min(100%, 50em);
 		}
 
 		> header {
 			padding: 0 2em;
 			h1 small { font-size: 0.6em; font-weight: normal; }
 			* + * { margin-top: 0.5em; }
+			label { padding-left: 1em; }
 		}
 
 		> section {

package/s/demo/presets.ts

@@ -0,0 +1,54 @@
+
+import {asBindings} from "../lib/input/types.js"
+import {asPresets} from "../lib/ui/deck/types.js"
+
+export const bindings = asBindings({
+	looking: {
+		horizontal: ["accumulate", "pointer.x"],
+		vertical: ["accumulate", "pointer.y"],
+	},
+	moving: {
+		forward: "KeyW",
+		backward: "KeyS",
+		leftward: "KeyA",
+		rightward: "KeyD",
+	},
+	interactions: {
+		use: "KeyE",
+	},
+})
+
+export const presets = asPresets<typeof bindings>({
+	standard: {label: "⌨️standard", bindings},
+	gamer: {label: "🎮gamer", bindings: {
+		looking: {
+			horizontal: ["*", ["dt"], "gamepad.axis.3", 100],
+			vertical: ["*", ["dt"], "gamepad.axis.4", 100],
+		},
+		moving: {
+			forward: ["remap", 0, -1, 0, 1, "gamepad.axis.2"],
+			backward: ["remap", 0, 1, 0, 1, "gamepad.axis.2"],
+			leftward: ["remap", 0, -1, 0, 1, "gamepad.axis.1"],
+			rightward: ["remap", 0, 1, 0, 1, "gamepad.axis.1"],
+		},
+		interactions: {
+			use: "gamepad.1",
+		},
+	}},
+	micro: {label: "🦠micro", bindings: {
+		looking: {
+			horizontal: ["*", ["dt"], ["+", "gamepad.1", ["-", "gamepad.4"]], 100],
+			vertical: ["*", ["dt"], ["+", "gamepad.2", ["-", "gamepad.3"]], 100],
+		},
+		moving: {
+			forward: ["remap", 0, -1, 0, 1, "gamepad.axis.2"],
+			backward: ["remap", 0, 1, 0, 1, "gamepad.axis.2"],
+			leftward: ["remap", 0, -1, 0, 1, "gamepad.axis.1"],
+			rightward: ["remap", 0, 1, 0, 1, "gamepad.axis.1"],
+		},
+		interactions: {
+			use: ["*", "gamepad.5", "gamepad.6"],
+		},
+	}},
+})
+

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

@@ -35,12 +35,15 @@ export const GamepadApp = shadowElement(() => {
 	}))
 
 	const renderSample = ([code, value]: [string, number]) => html`
-		<li style="${`--percent: ${value * 100}%;`}">
+		<li ?data-neg="${value < 0}" style="${`--percent: ${Math.abs(value) * 100}%;`}">
 			<span>${code}</span>
 			<span>${value.toFixed(3)}</span>
 		</li>
 	`
 
+	const sortSamples = (a: [string, number], b: [string, number]) =>
+		a[0].localeCompare(b[0])
+
 	return html`
 		<div class=plate>
 			${connected.size > 0 ? [...connected].map(({samples, source: {gamepad}}) => html`
@@ -49,14 +52,18 @@ export const GamepadApp = shadowElement(() => {
 					<div class=stats>
 						<span>index ${gamepad.index}</span>
 						<span>connected ${gamepad.connected ? "yes" : "no"}</span>
-						<span>mapping ${gamepad.mapping}</span>
+						<span>mapping "${gamepad.mapping}"</span>
 						<span>vibrationActuator ${gamepad.vibrationActuator ? "yes" : "no"}</span>
 					</div>
 					<ul>
-						${[...samples].filter(([code]) => code.startsWith("gamepad.button")).map(renderSample)}
+						${[...samples]
+							.sort(sortSamples)
+							.filter(([code]) => !code.startsWith("gamepad.axis")).map(renderSample)}
 					</ul>
 					<ul>
-						${[...samples].filter(([code]) => code.startsWith("gamepad.axis")).map(renderSample)}
+						${[...samples]
+							.sort(sortSamples)
+							.filter(([code]) => code.startsWith("gamepad.axis")).map(renderSample)}
 					</ul>
 				</div>
 			`) : html`

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

@@ -57,10 +57,14 @@ export default css`
 				display: block;
 				content: "";
 				inset: 0;
-				background: #f004;
+				background: #08f4;
 				width: var(--percent);
 			}
 
+			&[data-neg]::before {
+				background: #f004;
+			}
+
 			> span {
 				position: relative;
 				z-index: 2;

package/s/gamepad/index.html.ts

@@ -15,7 +15,7 @@ export default template(import.meta.url, async orb => html`
 			<meta charset="utf-8"/>
 			<meta name="viewport" content="width=device-width,initial-scale=1"/>
 			<meta name="darkreader-lock"/>
-			<style>@layer base{html{background:#000}}</style>
+			<style>@layer base{html{background:#111}}</style>
 
 			<link rel="icon" href="${dataSvgEmoji("🎮")}"/>
 			<link rel="stylesheet" href="${orb.hashurl("main.css")}"/>

package/s/gamepad/main.css

@@ -54,7 +54,16 @@
 	}
 
 	body {
-		padding: 1em;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		gap: 1em;
+		padding: 0.5em;
+
+		> * {
+			width: min(100%, 50em);
+		}
 	}
 }
 

package/s/index.html.ts

@@ -15,7 +15,7 @@ export default template(import.meta.url, async orb => html`
 			<meta charset="utf-8"/>
 			<meta name="viewport" content="width=device-width,initial-scale=1"/>
 			<meta name="darkreader-lock"/>
-			<style>@layer base{html{background:#000}}</style>
+			<style>@layer base{html{background:#111}}</style>
 
 			<link rel="icon" href="${dataSvgEmoji("🎮")}"/>
 			<link rel="stylesheet" href="${orb.hashurl("demo/main.css")}"/>
@@ -37,17 +37,24 @@ export default template(import.meta.url, async orb => html`
 				</h1>
 				<div>
 					<blockquote>"from keypress to couch co-op"</blockquote>
-					<p>
-						<a href="./gamepad/">gamepad visualizer</a>.
+					<p class=links>
+						<a href="./gamepad/">gamepad visualizer</a>
+						—
+						<a href="https://github.com/benev-gg/tact">github</a>
+						—
+						<a href="https://benev.gg/">benev.gg</a>
 					</p>
 					<p>
-						<a href="https://github.com/benev-gg/tact">github</a>.
-						<a href="https://benev.gg/">benev.gg</a>.
+						<label>
+							<span>➣ choose your color:</span>
+							<input type="color"/>
+						</label>
 					</p>
 				</div>
 			</header>
 
-			<demo-app></demo-app>
+			<tact-deck></tact-deck>
+			<tact-visualizer></tact-visualizer>
 		</body>
 	</html>
 `)

package/s/lib/index.ts

@@ -1,18 +1,29 @@
 
 export * from "./input/investigate/is-compatible.js"
-
 export * from "./input/sources/gamepad.js"
 export * from "./input/sources/keyboard.js"
 export * from "./input/sources/plain.js"
 export * from "./input/sources/pointer.js"
 export * from "./input/sources/sources.js"
 export * from "./input/sources/stick.js"
-
 export * from "./input/utils/pad/on-pad.js"
 export * from "./input/utils/pad/pad.js"
 export * from "./input/utils/is-down.js"
-
-export * from "./input/encoder.js"
+export * from "./input/controller.js"
 export * from "./input/decoder.js"
+export * from "./input/expression.js"
 export * from "./input/types.js"
 
+export * from "./ui/deck/controls/controls.js"
+export * from "./ui/deck/controls/types.js"
+export * from "./ui/deck/setup/deck.js"
+export * from "./ui/deck/setup/tact.js"
+export * from "./ui/deck/auto-gamepads.js"
+export * from "./ui/deck/collector.js"
+export * from "./ui/deck/hub.js"
+export * from "./ui/deck/types.js"
+export * from "./ui/views/customize/view.js"
+export * from "./ui/views/deck/view.js"
+export * from "./ui/views/controllers/view.js"
+export * from "./ui/views/visualizer/view.js"
+

package/s/lib/input/{encoder.ts → controller.ts}

@@ -1,22 +1,23 @@
 
 import {deepFreeze} from "@e280/stz"
 import {Sampler} from "./utils/sampler.js"
-import {encodeData} from "./data/encode.js"
+import {Intent} from "./data/intent/types.js"
 import {evaluate} from "./evaluate/evaluate.js"
+import {encodeIntents} from "./data/intent/encode.js"
+import {Bindings, Rebindings, Source} from "./types.js"
 import {EvaluationContext} from "./evaluate/context.js"
 import {investigate} from "./investigate/investigate.js"
-import {Bindings, InputData, Intent, Rebindings, Source} from "./types.js"
 
-export class InputEncoder<B extends Bindings = any> {
+export class Controller<B extends Bindings = any> {
 	#sampler
-	#bindings
+	#bindings: Rebindings<B>
 	#investigation
 	#context
 
-	constructor(source: Source, bindings: B) {
-		this.#bindings = deepFreeze(structuredClone(bindings)) as any as Rebindings<B>
+	constructor(options: {source: Source, bindings: B}) {
+		this.#bindings = deepFreeze(structuredClone(options.bindings)) as any as Rebindings<B>
 		this.#investigation = investigate(this.#bindings)
-		this.#sampler = new Sampler(source)
+		this.#sampler = new Sampler(options.source)
 		this.#context = new EvaluationContext()
 	}
 
@@ -27,17 +28,13 @@ export class InputEncoder<B extends Bindings = any> {
 	set bindings(b: Rebindings<B>) {
 		const bindings = deepFreeze(structuredClone(b)) as Rebindings<B>
 		const fresh = investigate(bindings)
+		const goodHash = this.#investigation.hash
 
-		if (fresh.hash !== this.#investigation.hash)
+		if (fresh.hash !== goodHash)
 			throw new Error("incompatible bindings")
 
 		this.#bindings = bindings
 		this.#investigation.rootList = fresh.rootList
-		this.#context = new EvaluationContext()
-	}
-
-	encode(time = performance.now()): InputData {
-		return encodeData(this.#investigation.hash, [...this.evaluate(time)])
 	}
 
 	*evaluate(time = performance.now()) {
@@ -50,13 +47,24 @@ export class InputEncoder<B extends Bindings = any> {
 		for (const {code, value} of samples)
 			this.#context.latestValues.set(code, value)
 
-		for (const [id, expression] of this.#investigation.rootList.entries())
-			yield {id, value: evaluate(this.#context, id, expression)} as Intent
+		for (const [id, expression] of this.#investigation.rootList.entries()) {
+			const value = evaluate(this.#context, expression)
+			if (value !== 0)
+				yield {id, value} as Intent
+		}
 
 		for (const {code, value} of samples)
 			this.#context.previousValues.set(code, value)
 	}
 
+	encode(time = performance.now()) {
+		return encodeIntents(this.#investigation.hash, [...this.evaluate(time)])
+	}
+
+	clear() {
+		void this.#sampler.take()
+	}
+
 	dispose() {
 		return this.#sampler.dispose()
 	}

package/s/lib/input/data/endian.ts

@@ -0,0 +1,3 @@
+
+export const endian = false
+

package/s/{_archive/lib3/input/data → lib/input/data/intent}/decode.ts

@@ -1,8 +1,9 @@
 
-import {Intent} from "../types.js"
-import {endian, sizeHash, sizeId, sizeValue} from "./params.js"
+import {Intent} from "./types.js"
+import {endian} from "../endian.js"
+import {sizeHash, sizeId, sizeValue} from "./sizes.js"
 
-export function decodeData(buffer: ArrayBuffer) {
+export function decodeIntents(buffer: ArrayBuffer) {
 	const intents: Intent[] = []
 	const dv = new DataView(buffer)
 	let cursor = 0

package/s/lib/input/data/intent/encode.ts

@@ -0,0 +1,25 @@
+
+import {Intent} from "./types.js"
+import {endian} from "../endian.js"
+import {sizeHash, sizeId, sizeIntent, sizeValue} from "./sizes.js"
+
+export function encodeIntents(hash: number, intents: Intent[]) {
+	const byteCount = sizeHash + (intents.length * sizeIntent)
+	const buffer = new ArrayBuffer(byteCount)
+	const dv = new DataView(buffer)
+	let cursor = 0
+
+	dv.setUint32(cursor, hash, endian)
+	cursor += sizeHash
+
+	for (const intent of intents) {
+		dv.setUint16(cursor, intent.id, endian)
+		cursor += sizeId
+
+		dv.setFloat32(cursor, intent.value, endian)
+		cursor += sizeValue
+	}
+
+	return buffer
+}
+

package/s/{_archive/lib3/input/data/params.ts → lib/input/data/intent/sizes.ts}

@@ -1,7 +1,6 @@
 
-export const endian = false
 export const sizeHash = 4
 export const sizeId = 2
 export const sizeValue = 4
-export const sizeIntention = sizeId + sizeValue
+export const sizeIntent = sizeId + sizeValue
 

package/s/lib/input/data/intent/types.ts

@@ -0,0 +1,6 @@
+
+export type Intent = {
+	id: number
+	value: number
+}
+

package/s/lib/input/data/parcel/decode.ts

@@ -0,0 +1,32 @@
+
+import {Parcel} from "./types.js"
+import {endian} from "../endian.js"
+import {sizeHeader, sizeLength, sizePlayerId} from "./sizes.js"
+
+export function decodeParcels(buffer: ArrayBuffer): Parcel[] {
+	const view = new DataView(buffer)
+	const parcels: Parcel[] = []
+	let cursor = 0
+
+	while (cursor < buffer.byteLength) {
+		if (buffer.byteLength - cursor < sizeHeader)
+			throw new Error("truncated header")
+
+		const playerId = view.getUint32(cursor, endian)
+		cursor += sizePlayerId
+
+		const length = view.getUint32(cursor, endian)
+		cursor += sizeLength
+
+		if (length > buffer.byteLength - cursor)
+			throw new Error("truncated data")
+
+		const intents = buffer.slice(cursor, cursor + length)
+		cursor += length
+
+		parcels.push({playerId: playerId, intents})
+	}
+
+	return parcels
+}
+