@benev/tact 0.3.0-5 → 0.4.0-1

package/README.md

@@ -1,93 +1,136 @@
 
 # 🎮 @benev/tact
-> *from keypress to couch co-op*
+> *from keypress to couch co-op.*
 
-```ts
-npm install @benev/tact
-```
+**tact is a user-input toolkit for web games.**
 
-tact is a toolkit for handling user input on the web.  
-customizable keybindings, multiple-gamepad couch co-op, ready-made configurator ui, efficient networking, mobile virtual thumbsticks.  
+🌐 👉 ***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/>
+![](https://i.imgur.com/IBW5Kkd.png)
 
-## 🎮 tact basics
 
-```ts
-import {
-  Devices, KeyboardDevice, PointerDevice,
-  makeIntentsResolver, makeActionsResolver,
-} from "@benev/tact"
-```
 
-1. **setup your game's keybindings**
-    ```ts
-    const bindings = {
-      running: {forward: "KeyW", jump: ["and", "ShiftLeft", "Space"]},
-      gunning: {shoot: ["or", "pointer.button.left", "gamepad.trigger.right"]},
-    }
+<br/>
+
+## 🎮 let's play.
+
+- 🍏 **install tact.**
+    ```sh
+    npm install @benev/tact@next
     ```
-1. **create your devices (which provide raw input samples)**
+- 🍏 **establish your app's standard bindings.**
     ```ts
-    const devices = new Devices(
-      new KeyboardDevice(),
-      new PointerDevice(),
-    )
+    import {asBindings} from "@benev/tact"
+
+    const bindings = asBindings({
+      jump: "Space",
+      forward: "KeyW",
+      look: ["accumulate", "pointer.x"],
+    })
     ```
-1. **make your resolvers**
+    - 💡 *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 resolveIntents = makeIntentsResolver(bindings)
-    const resolveActions = makeActionsResolver(bindings)
+    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],
+      }},
+    })
     ```
-1. **run your resolvers, read your actions**
+- 🍏 **now we can setup tact and register the html elements.**
     ```ts
-    import {cycle} from "@e280/stz"
+    import {setupTact} from "@benev/tact"
 
-    cycle(function myGameTick() {
+    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>
+    ```
 
-      // 🧙‍♂️ samples get resolved into compact intent tuples, good for networking.
-      const intents = resolveIntents(Date.now(), devices.samples())
 
-      // 🧙‍♂️ actions are your ergonomic accessors for values.
-      const actions = resolveActions(intents)
 
-      // 🧙‍♂️ okay, now check your actions.
-      actions.running.forward.value // 1.0
-      actions.running.forward.pressed // true
-    })
-    ```
+<br/>
+
+## 🎮 encoding, decoding, and your game logic.
 
-### 🧙‍♂️ wizardly tips
+- 🍏 **make a collector.**
+    ```ts
+    import {Collector} from "@benev/tact"
 
-1. **for networking, you should encode intents as Uint8Array for better efficiency down the wire.**
+    const collector = new Collector(bindings)
+    ```
+- 🍏 **now it's time for the real action!**
     ```ts
-    import {encodeIntents, decodeIntents} from "@benev/tact"
+    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)
+    ```
+    💡 *you could stream the buffers across the network to a remote collector.*
 
-    const intents = [[1, 0.7853981633974483]]
 
-    console.log(JSON.stringify(intents).length)
-      // 22 — yikes
 
-    const bytes = encodeIntents(intents)
+<br/>
 
-    console.log(bytes.length)
-      // 6 — noice
+## 🎮 get down to brass tacks.
 
-    const intents = decodeIntents(bytes)
-    ```
-1. **you can normalize bindings**
+- 🍏 **use the core facilities directly,** without the ui or multiplayer.  
     ```ts
-    import {normalizeBindings} from "@benev/tact"
+    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)
 
-    const bindings = normalizeBindings(appBindings, susBindings)
+    // call this in your gameloop:
+    const inputs = decoder.decode(controller.encode())
     ```
-    this clones your app bindings and cherry-picks any compatible user bindings. useful when loading from localStorage, so changes to your schema don’t break things.
 
 
 
 <br/><br/>
 
+---
+
 👼 *https://benev.gg/*
 

package/package.json

@@ -1,15 +1,14 @@
 {
 	"name": "@benev/tact",
-	"version": "0.3.0-5",
-	"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",
-	"main": "./x/index.js",
+	"main": "./x/lib/index.js",
 	"sideEffects": false,
 	"exports": {
-		".": "./x/index.js",
-		"./ui": "./x/index-ui.js"
+		".": "./x/lib/index.js"
 	},
 	"files": [
 		"x",
@@ -17,29 +16,33 @@
 	],
 	"scripts": {
 		"build": "octo-s 'rm -rf x' 'tsc' 'scute -v'",
-		"dev": "octo 'scute -vw' 'tsc -w' 'node --watch x/test.js' 'hottie x --port=8081'",
-		"test": "node x/test.js",
+		"dev": "octo 'scute -vw' 'tsc -w' 'node --watch x/lib/test.js' 'hottie x --port=8081'",
+		"test": "node x/lib/test.js",
 		"count": "find s -path '*/_archive' -prune -o -name '*.ts' -exec wc -l {} +"
 	},
 	"peerDependencies": {
-		"@e280/sly": "^0.4.8",
-		"@e280/strata": "^0.5.2",
+		"@e280/sly": "^0.4.9",
+		"@e280/strata": "^0.5.6",
 		"lit": "^3.3.3"
 	},
 	"dependencies": {
-		"@benev/math": "^0.4.0-8",
-		"@e280/kv": "^0.2.1",
-		"@e280/stz": "^0.4.2"
+		"@benev/math": "0.4.0-9",
+		"@e280/kv": "^0.2.4",
+		"@e280/shiny": "^0.1.1",
+		"@e280/stz": "^0.4.14"
 	},
 	"devDependencies": {
-		"@e280/hottie": "^0.1.5",
-		"@e280/octo": "^0.1.5",
-		"@e280/science": "^0.1.12",
-		"@e280/scute": "^0.5.2",
+		"@e280/hottie": "^0.1.7",
+		"@e280/octo": "^0.1.7",
+		"@e280/science": "^0.1.14",
+		"@e280/scute": "^0.5.4",
 		"http-server": "^14.1.1",
 		"npm-run-all": "^4.1.5",
 		"typescript": "^7.0.2"
 	},
+	"allowScripts": {
+		"esbuild@0.28.2": true
+	},
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/benev-gg/tact.git"
@@ -53,9 +56,5 @@
 		"keybinds",
 		"keybindings",
 		"gamepad"
-	],
-	"allowScripts": {
-		"classic-level@3.0.0": true,
-		"esbuild@0.28.2": true
-	}
+	]
 }

package/s/demo/main.bundle.ts

@@ -1,71 +1,23 @@
 
-import {Content, dom} from "@e280/sly"
-import {LocalStore} from "@e280/strata"
-
-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"
-
-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)
+import {dom} from "@e280/sly"
+import {cycle, nap} from "@e280/stz"
+import {presets} from "./presets.js"
+import {setupTact} from "../lib/ui/deck/setup/tact.js"
+
+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)
 })
 
-dom.register({
-	DemoApp: setupDemoApp(deck, {
-		getControllerLabel: labels.get.bind(labels),
-	}),
-})
+{
+	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

@@ -5,55 +5,65 @@ import {RMap, RSet} from "@e280/strata"
 import {shadowElement, useCss, useMount, useOnce} from "@e280/sly"
 
 import styleCss from "./style.css.js"
-import {onPad} from "../../device/pad/on-pad.js"
-import {GamepadDevice} from "../../device/gamepad.js"
+
+import {onPad} from "../../lib/input/utils/pad/on-pad.js"
+import {GamepadSource} from "../../lib/input/sources/gamepad.js"
 
 export const GamepadApp = shadowElement(() => {
 	useCss(styleCss)
 
 	const connected = useOnce(() => new RSet<{
-		device: GamepadDevice
+		source: GamepadSource
 		samples: RMap<string, number>
 	}>())
 
 	useMount(() => onPad(pad => {
-		const device = new GamepadDevice(pad)
-		const connectee = {device, samples: new RMap<string, number>()}
+		const source = new GamepadSource(pad)
+		const connectee = {source, samples: new RMap<string, number>()}
+		const stop = source.onSample(sample => connectee.samples.set(sample.code, sample.value))
 		connected.add(connectee)
-		return () => connected.delete(connectee)
+		return () => {
+			stop()
+			connected.delete(connectee)
+		}
 	}))
 
 	useMount(() => cycle(async() => {
-		for (const conn of connected) {
-			for (const [code, value] of conn.device.samples())
-				conn.samples.set(code, value)
-		}
+		for (const conn of connected)
+			conn.source.poll()
 		await nap(1000 / 60)
 	}))
 
 	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, device: {gamepad}}) => html`
+			${connected.size > 0 ? [...connected].map(({samples, source: {gamepad}}) => html`
 				<div class=device>
 					<h2>🎮 ${gamepad.id}</h2>
 					<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

@@ -0,0 +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/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"
+