@benev/tact 0.4.0-1 → 0.4.0-2

package/README.md

@@ -2,7 +2,8 @@
 # 🎮 @benev/tact
 > *from keypress to couch co-op.*
 
-**tact is a user-input toolkit for web games.**
+**tact is a user-input toolkit for web games.**  
+i made tact because i want to make indie web game development easier. user input seems like it should be easy, but doing it well is actually really complex. especially when you start thinking of multiplayer and multithreading. my goal with tact is to tame the complexity and give people something elegant and flexible that "just works".
 
 🌐 👉 ***https://tact.benev.gg/*** 👈 *try now*  
 
@@ -12,6 +13,9 @@
 🫂 multiplayer and splitscreen capable.  
 🧬 binary for efficient workers and networking.  
 🎸 ready-to-rock drop-in user-interface.  
+✍️ handcrafted by a human being.  
+
+
 
 ![](https://i.imgur.com/dCAlD14.png)
 
@@ -23,7 +27,7 @@
 
 ## 🎮 let's play.
 
-- 🍏 **install tact.**
+- 🍏 **install tact into your typescript project.**
     ```sh
     npm install @benev/tact@next
     ```
@@ -51,7 +55,7 @@
       }},
     })
     ```
-- 🍏 **now we can setup tact and register the html elements.**
+- 🍏 **setup tact.**
     ```ts
     import {setupTact} from "@benev/tact"
 
@@ -60,20 +64,22 @@
     tact.gamepads("gamepad")
     tact.registerElements()
     ```
-- 🍏 **simply put the `<tact-deck>` in your html page.**
+    - 💡 *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>`.*
-- 🍏 **color the whole ui with css.**
-    ```html
-    <style>
-      html {
-        --tact-prime: aqua;
-        --tact-bg: black;
-      }
-    </style>
-    ```
+    - 💡 *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!**
 
 
 
@@ -81,14 +87,12 @@
 
 ## 🎮 encoding, decoding, and your game logic.
 
-- 🍏 **make a collector.**
+- 🍏 **now it's time for the real action!**
     ```ts
     import {Collector} from "@benev/tact"
 
     const collector = new Collector(bindings)
-    ```
-- 🍏 **now it's time for the real action!**
-    ```ts
+
     setInterval(() => {
       const buffer = tact.deck.hub.encodeAll()
       for (const {playerId, inputs} of collector.decodeAll(buffer)) {
@@ -104,6 +108,7 @@
     }, 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!).*
 
 
 

package/package.json

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

package/s/demo/main.css

@@ -53,6 +53,10 @@
 		background: var(--bg);
 	}
 
+	html {
+		scrollbar-gutter: stable;
+	}
+
 	body {
 		display: flex;
 		flex-direction: column;
@@ -67,10 +71,33 @@
 		}
 
 		> header {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			gap: 1em;
 			padding: 0 2em;
-			h1 small { font-size: 0.6em; font-weight: normal; }
-			* + * { margin-top: 0.5em; }
-			label { padding-left: 1em; }
+
+			h1 small {
+				font-size: 0.6em;
+				font-weight: normal;
+			}
+
+			blockquote {
+				opacity: 0.5;
+				font-style: italic;
+				padding-left: 1em;
+			}
+
+			label {
+				display: flex;
+				flex-direction: column;
+				align-items: end;
+				gap: 0.1em;
+			}
+
+			.links span {
+				opacity: 0.5;
+			}
 		}
 
 		> section {
@@ -79,6 +106,13 @@
 				padding-left: 1em;
 			}
 		}
+
+		> footer {
+			padding: 1em 2em;
+			p {
+				opacity: 0.5;
+			}
+		}
 	}
 }
 

package/s/index.html.ts

@@ -31,30 +31,36 @@ export default template(import.meta.url, async orb => html`
 		</head>
 		<body>
 			<header>
-				<h1>
-					<strong>@benev/tact</strong>
-					<small>v${orb.packageVersion()}</small>
-				</h1>
 				<div>
-					<blockquote>"from keypress to couch co-op"</blockquote>
-					<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>
-						<label>
-							<span>➣ choose your color:</span>
-							<input type="color"/>
-						</label>
-					</p>
+					<h1>
+						<strong>@benev/tact</strong>
+						<small>v${orb.packageVersion()}</small>
+					</h1>
+					<div>
+						<blockquote>"from keypress to couch co-op"</blockquote>
+						<p class=links>
+							<a href="./gamepad/">gamepad visualizer</a>
+							<span>—</span>
+							<a href="https://github.com/benev-gg/tact">github</a>
+							<span>—</span>
+							<a href="https://benev.gg/">benev.gg</a>
+						</p>
+					</div>
+				</div>
+				<div>
+					<label>
+						<input type="color"/>
+						<span>choose your color ☝️</span>
+					</label>
 				</div>
 			</header>
 
 			<tact-deck></tact-deck>
-			<tact-visualizer></tact-visualizer>
+
+			<footer>
+				<p>binary data visualizer</p>
+				<tact-visualizer></tact-visualizer>
+			</footer>
 		</body>
 	</html>
 `)

package/s/lib/ui/deck/controls/internal/data.ts

@@ -5,21 +5,23 @@ import {got, IdCounter, setEntries, subby} from "@e280/stz"
 import {Profile, ProfileKey} from "../../types.js"
 import {Bindings} from "../../../../input/types.js"
 import {Controller} from "../../../../input/controller.js"
+import {hashBindings} from "../../../../input/investigate/hash-bindings.js"
 import {ControllerHandle, ControllerMeta, ControlsOptions} from "../types.js"
 
 export type ControlsData<B extends Bindings> = (
 	ReturnType<typeof makeControlsData<B>>
 )
 
-export function makeControlsData<B extends Bindings>({
-		kv,
-		presets,
-	}: ControlsOptions<B>) {
-
+export function makeControlsData<B extends Bindings>(options: ControlsOptions<B>) {
+	const {presets} = options
 	const fallbackKey = got(Object.keys(presets)[0], "missing presets")
 	const fallbackProfile = got(presets[fallbackKey])
 	const bindings = fallbackProfile.bindings
 
+	const kv = options.kv.scope(
+		hashBindings(bindings).toString()
+	)
+
 	const profiles = {
 		presets: new RMap<ProfileKey, Profile<B>>(),
 		customs: new RMap<ProfileKey, Profile<B>>(),

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

@@ -5,6 +5,7 @@ import {setupDeck} from "./deck.js"
 import {SetupParams} from "./types.js"
 import {Bindings} from "../../../input/types.js"
 import {autoGamepads} from "../auto-gamepads.js"
+import {ellipsis} from "../../../utils/ellipsis.js"
 import {firstPreset} from "../utils/first-preset.js"
 import {Controller} from "../../../input/controller.js"
 import {Sources} from "../../../input/sources/sources.js"
@@ -19,7 +20,6 @@ import {makeControllersElement} from "../../views/controllers/view.js"
 
 import devicesSvg from "../../icons/akar/devices.svg.js"
 import gameControllerSvg from "../../icons/akar/game-controller.svg.js"
-import { ellipsis } from "../../../utils/ellipsis.js"
 
 export async function setupTact<B extends Bindings>(params: SetupParams<B>) {
 	const deck = await setupDeck(params)

package/s/lib/ui/views/theme.css.ts

@@ -82,7 +82,7 @@ ${cssReset}
 	--base: var(--tint, var(--prime));
 	font: inherit;
 	color: inherit;
-	background: transparent;
+	background: var(--bg);
 	border: 1px solid var(--base);
 	border-radius: var(--round);
 	padding: var(--nib) var(--pad);

package/s/lib/ui/views/visualizer/style.css.ts

@@ -8,15 +8,17 @@ export default css`@layer view {
 
 output {
 	opacity: 0.5;
-	color: var(--prime);
-	font-size: 1em;
-	font-family: monospace;
 	display: block;
-	overflow-wrap: anywhere;
-	text-overflow: ellipsis;
+
+	font-size: 1em;
 	height: 8em;
-	padding: 0 4em;
+
 	overflow: hidden;
+	overflow-wrap: anywhere;
+
+	font-family: monospace;
+	color: var(--prime);
+	text-overflow: ellipsis;
 }
 
 }`

package/s/lib/ui/views/visualizer/view.ts

@@ -10,6 +10,7 @@ export const [VisualizerView, makeVisualizerElement] = shadowDuplex((visualizer:
 	useCss(themeCss, styleCss)
 
 	return html`
+		<slot></slot>
 		<output class=viz>${visualizer.$hex()}</output>
 	`
 })