@benev/tact 0.4.0-4 → 0.4.0-6

package/README.md

@@ -64,38 +64,12 @@ i made tact because i want to make indie web game development easier. user input
     tact.gamepads("gamepad")
     tact.registerElements()
     ```
-    - 💡 *set `maxPlayers` to 1 for single player.*
-- 🍏 **put the `<tact-deck>` in your html page.**
-    ```html
-    <tact-deck></tact-deck>
-    ```
-    - 💡 *you also have each panel, `<tact-controllers>` and `<tact-customize>`.*
-    - 💡 *you can customize the colors with css:*
-        ```html
-        <style>
-          html {
-            --tact-prime: aqua;
-            --tact-bg: black;
-          }
-        </style>
-        ```
-- 🎉 **now users can configure controllers and customize bindings!**
-
-
-
-<br/>
-
-## 🎮 encoding, decoding, and your game logic.
-
-- 🍏 **now it's time for the real action!**
+    - 💡 *you can set `maxPlayers` to 1 for single player.*
+- 🍏 **encoding, decoding, and your game logic.**
     ```ts
-    import {Collector} from "@benev/tact"
-
-    const collector = new Collector(bindings)
-
     setInterval(() => {
       const buffer = tact.deck.hub.encodeAll()
-      for (const {playerId, inputs} of collector.decodeAll(buffer)) {
+      for (const {playerId, inputs} of tact.collector.decodeAll(buffer)) {
 
         // your game logic can read these handy input values.
         inputs.jump.value // values are numbers 0  to 1.
@@ -107,14 +81,30 @@ i made tact because i want to make indie web game development easier. user input
       }
     }, 16.67)
     ```
-    - 💡 *you could stream the buffers across the network to a remote collector.*
-    - 💡 *maybe imagine having the tact deck on the clientside, and the collector on the serverside (or a web worker!).*
+    - 💡 *maybe imagine streaming the buffers across the network to a remote collector.*
+    - 💡 *maybe imagine the tact deck on the clientside, and the collector on the serverside (or a web worker!).*
+- 🍏 **put the `<tact-deck>` element in your html page.**
+    ```html
+    <tact-deck></tact-deck>
+    ```
+    - 💡 *you also have each panel, `<tact-controllers>` and `<tact-customize>`.*
+    - 💡 *you can customize the colors with css.*
+        ```html
+        <style>
+          html {
+            --tact-prime: aqua;
+            --tact-bg: black;
+          }
+        </style>
+        ```
+- 🎉 **you're done! your users can manage controllers and customize bindings!**
 
 
 
 <br/>
 
 ## 🎮 get down to brass tacks.
+> *tact is flexible and composable for alternative use-cases.*
 
 - 🍏 **pov: your app isn't a game, no multiplayer, no gamepads.**  
     ```ts
@@ -122,15 +112,15 @@ i made tact because i want to make indie web game development easier. user input
 
     const tact = await setupTact({presets, maxPlayers: 1})
     const controller = tact.mouseKeyboard()
-    tact.registerElements()
-
     const decoder = new InputDecoder(bindings)
+    tact.registerElements()
 
     setInterval(() => {
       const inputs = decoder.decode(controller.encode())
 
-      // here's where you do stuff with your inputs.
-      input.jump.value
+      // 🧙‍♂️ handle your inputs.
+      inputs.jump.value
+
     }, 16.67)
     ```
     - 💡 *then the only ui you need is the `<tact-customize>` panel (also available as a sly view `CustomizeView`).*
@@ -138,15 +128,17 @@ i made tact because i want to make indie web game development easier. user input
     ```ts
     import {Controller, InputDecoder, KeyboardSource, PointerSource, Sources} from "@benev/tact"
 
-    const controller = new Controller({
-      bindings,
-      source: new Sources(new KeyboardSource(), new PointerSource()),
-    })
-
+    const source = new Sources(new KeyboardSource(), new PointerSource())
+    const controller = new Controller({bindings, source})
     const decoder = new InputDecoder(bindings)
 
-    // call this in your gameloop.
-    const inputs = decoder.decode(controller.encode())
+    setInterval(() => {
+      const inputs = decoder.decode(controller.encode())
+
+      // 🧙‍♂️ handle your inputs.
+      inputs.jump.value
+
+    }, 16.67)
     ```
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@benev/tact",
-	"version": "0.4.0-4",
+	"version": "0.4.0-6",
 	"description": "🎮 from keypress to couch co-op",
 	"license": "MIT",
 	"author": "Chase Moskal <chasemoskal@gmail.com>",

package/s/index.html.ts

@@ -4,7 +4,7 @@ import {template, html, dataSvgEmoji, socialCard} from "@e280/scute"
 const title = "@benev/tact"
 const domain = "tact.benev.gg"
 const favicon = "/assets/b.png"
-const description = "🎮 keybindings and couch co-op"
+const description = "🎮 from keypress to couch co-op"
 
 export default template(import.meta.url, async orb => html`
 	<!doctype html>

package/s/lib/ui/deck/setup/tact.ts

@@ -3,6 +3,7 @@ import {register} from "@e280/sly"
 
 import {setupDeck} from "./deck.js"
 import {SetupParams} from "./types.js"
+import {Collector} from "../collector.js"
 import {Bindings} from "../../../input/types.js"
 import {autoGamepads} from "../auto-gamepads.js"
 import {ellipsis} from "../../../utils/ellipsis.js"
@@ -23,6 +24,8 @@ import gameControllerSvg from "../../icons/akar/game-controller.svg.js"
 
 export async function setupTact<B extends Bindings>(params: SetupParams<B>) {
 	const deck = await setupDeck(params)
+	const first = firstPreset(deck.controls.presets)
+	const collector = new Collector(first.profile.bindings)
 	const visualizer = new Visualizer()
 
 	const elements = {
@@ -40,14 +43,14 @@ export async function setupTact<B extends Bindings>(params: SetupParams<B>) {
 				handle,
 				tooltip: handle,
 				name: ellipsis(handle, 32),
-				defaultProfileKey: defaultProfileKey ?? firstPreset(deck.controls.presets).key,
+				defaultProfileKey: defaultProfileKey ?? first.key,
 			})
 			return () => deck.controls.detach(controller)
 		})
 	}
 
 	function mouseKeyboard() {
-		const {key, profile} = firstPreset(deck.controls.presets)
+		const {key, profile} = first
 
 		const controller = new Controller({
 			bindings: profile.bindings,
@@ -76,6 +79,7 @@ export async function setupTact<B extends Bindings>(params: SetupParams<B>) {
 
 	return {
 		deck,
+		collector,
 		gamepads,
 		mouseKeyboard,
 		visualizer,