@benev/tact 0.2.0 → 0.3.0-2

package/s/device/pointer.ts

@@ -0,0 +1,97 @@
+
+import {Vec2} from "@benev/math"
+import {disposer, ev} from "@e280/stz"
+import {SamplerDevice} from "./sampler.js"
+import {splitAxis} from "../utils/split-axis.js"
+
+export class PointerDevice extends SamplerDevice {
+	client = new Vec2(0, 0)
+	movement = new Vec2(0, 0)
+	dispose = disposer()
+
+	constructor(target: EventTarget = window) {
+		super()
+
+		this.dispose.schedule(ev(target, {
+			pointerdown: (event: PointerEvent) => {
+				const code = PointerDevice.buttonCode(event)
+				this.setSample(code, 1)
+			},
+
+			pointerup: (event: PointerEvent) => {
+				const code = PointerDevice.buttonCode(event)
+				this.setSample(code, 0)
+			},
+
+			pointermove: (event: PointerEvent) => {
+				this.client.x = event.clientX
+				this.client.y = event.clientY
+				this.movement.x += event.movementX
+				this.movement.y += event.movementY
+			},
+
+			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)
+			},
+		}))
+	}
+
+	static buttonCode(event: PointerEvent) {
+		switch (event.button) {
+			case 0: return "pointer.button.left"
+			case 1: return "pointer.button.middle"
+			case 2: return "pointer.button.right"
+			default: return `pointer.button.${event.button + 1}`
+		}
+	}
+
+	static wheelCodes(event: WheelEvent) {
+		const movements: [string, number][] = []
+
+		if (event.deltaX)
+			movements.push([
+				event.deltaX > 0 ? "pointer.wheel.right" : "pointer.wheel.left",
+				event.deltaX,
+			])
+
+		if (event.deltaY)
+			movements.push([
+				event.deltaY > 0 ? "pointer.wheel.down" : "pointer.wheel.up",
+				event.deltaY,
+			])
+
+		return movements
+	}
+
+	*samples() {
+		this.#specialPreProcessing()
+		yield* super.samples()
+	}
+
+	#specialPreProcessing() {
+		const [x, y] = this.movement
+		const [left, right] = splitAxis(x)
+		const [down, up] = splitAxis(y)
+
+		if (x) {
+			if (x >= 0)
+				this.setSample(`pointer.move.right`, Math.abs(right))
+			else
+				this.setSample(`pointer.move.left`, Math.abs(left))
+		}
+		if (y) {
+			if (y >= 0)
+				this.setSample(`pointer.move.up`, Math.abs(up))
+			else
+				this.setSample(`pointer.move.down`, Math.abs(down))
+		}
+
+		this.movement.set_(0, 0)
+	}
+}
+

package/s/device/sampler.ts

@@ -0,0 +1,25 @@
+
+import {sub} from "@e280/stz"
+import {Device, Sample} from "../core/types.js"
+import {SampleMap} from "../core/parts/sample-map.js"
+
+export class SamplerDevice implements Device {
+	on = sub<Sample>()
+	sampleMap = new SampleMap()
+
+	setSample(code: string, value: number) {
+		this.sampleMap.set(code, value)
+		this.on.pub(code, value)
+		return this
+	}
+
+	zero() {
+		for (const code of this.sampleMap.keys())
+			this.setSample(code, 0)
+	}
+
+	*samples() {
+		yield* this.sampleMap
+	}
+}
+

package/s/device/stick.ts

@@ -0,0 +1,24 @@
+
+import {Vec2} from "@benev/math"
+import {derived, signal} from "@e280/strata"
+import {Device, Sample} from "../core/types.js"
+import {splitVector} from "../utils/split-axis.js"
+
+export class StickDevice implements Device {
+	$vector = signal(Vec2.zero())
+	$breakdown = derived(() => splitVector(this.$vector()))
+
+	constructor(public channel = "stick") {}
+
+	samples() {
+		const {channel} = this
+		const {up, down, left, right} = this.$breakdown()
+		return [
+			[`${channel}.up`, up],
+			[`${channel}.down`, down],
+			[`${channel}.left`, left],
+			[`${channel}.right`, right],
+		] as Sample[]
+	}
+}
+

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

@@ -0,0 +1,65 @@
+
+import {html} from "lit"
+import {cycle, nap} from "@e280/stz"
+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"
+
+export const GamepadApp = shadowElement(() => {
+	useCss(styleCss)
+
+	const connected = useOnce(() => new RSet<{
+		device: GamepadDevice
+		samples: RMap<string, number>
+	}>())
+
+	useMount(() => onPad(pad => {
+		const device = new GamepadDevice(pad)
+		const connectee = {device, samples: new RMap<string, number>()}
+		connected.add(connectee)
+		return () => connected.delete(connectee)
+	}))
+
+	useMount(() => cycle(async() => {
+		for (const conn of connected) {
+			for (const [code, value] of conn.device.samples())
+				conn.samples.set(code, value)
+		}
+		await nap(1000 / 60)
+	}))
+
+	const renderSample = ([code, value]: [string, number]) => html`
+		<li style="${`--percent: ${value * 100}%;`}">
+			<span>${code}</span>
+			<span>${value.toFixed(3)}</span>
+		</li>
+	`
+
+	return html`
+		<div class=plate>
+			${connected.size > 0 ? [...connected].map(({samples, device: {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>vibrationActuator ${gamepad.vibrationActuator ? "yes" : "no"}</span>
+					</div>
+					<ul>
+						${[...samples].filter(([code]) => code.startsWith("gamepad.button")).map(renderSample)}
+					</ul>
+					<ul>
+						${[...samples].filter(([code]) => code.startsWith("gamepad.axis")).map(renderSample)}
+					</ul>
+				</div>
+			`) : html`
+				<h2>no gamepads detected :(</h2>
+			`}
+		</div>
+	`
+})
+

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

@@ -0,0 +1,73 @@
+
+import {css} from "lit"
+export default css`
+
+* {
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
+}
+
+.plate {
+	display: flex;
+	flex-direction: column;
+	gap: 1em;
+}
+
+.stats {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.3em;
+	> span {
+		display: block;
+		background: #333;
+		border-radius: 1em;
+		padding: 0.1em 0.3em;
+		border: 1px solid #8888;
+	}
+}
+
+.device {
+	display: flex;
+	flex-direction: column;
+	gap: 0.4em;
+
+	ul {
+		display: flex;
+		flex-wrap: wrap;
+		list-style: none;
+		gap: 0.2em;
+		padding: 0;
+
+		font-family: monospace;
+
+		> li {
+			position: relative;
+			display: flex;
+			justify-content: space-between;
+
+			font-size: 0.6em;
+			padding: 0.2em;
+			min-width: 16em;
+			background: #555;
+
+			&::before {
+				position: absolute;
+				z-index: 1;
+				display: block;
+				content: "";
+				inset: 0;
+				background: #f004;
+				width: var(--percent);
+			}
+
+			> span {
+				position: relative;
+				z-index: 2;
+			}
+		}
+	}
+}
+
+`
+

package/s/gamepad/index.html.ts

@@ -0,0 +1,44 @@
+
+import {template, html, dataSvgEmoji, socialCard} from "@e280/scute"
+
+const title = "@benev/tact gamepad"
+const domain = "tact.benev.gg"
+const favicon = "/assets/b.png"
+const description = "tact gamepad tester"
+
+export default template(import.meta.url, async orb => html`
+	<!doctype html>
+	<html>
+		<head>
+			<title>${title}</title>
+
+			<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>
+
+			<link rel="icon" href="${dataSvgEmoji("🎮")}"/>
+			<link rel="stylesheet" href="${orb.hashurl("main.css")}"/>
+			<script type="module" src="${orb.hashurl("main.bundle.min.js")}"></script>
+
+			${socialCard({
+				title,
+				description,
+				themeColor: "#f2ea8e",
+				siteName: domain,
+				image: `https://${domain}${favicon}`,
+			})}
+		</head>
+		<body>
+			<header>
+				<h1>
+					<strong>@benev/tact gamepad</strong>
+					<small>v${orb.packageVersion()}</small>
+				</h1>
+			</header>
+
+			<gamepad-app></gamepad-app>
+		</body>
+	</html>
+`)
+

package/s/gamepad/main.bundle.ts

@@ -0,0 +1,6 @@
+
+import {dom} from "@e280/sly"
+import {GamepadApp} from "./gamepad-app/element.js"
+
+dom.register({GamepadApp})
+

package/s/gamepad/main.css

@@ -0,0 +1,60 @@
+
+@layer vars, core, page;
+
+@layer vars {
+	:root {
+		color-scheme: dark;
+
+		--link: cyan;
+		--text: #ccc;
+		--bg: #181818;
+	}
+}
+
+@layer core {
+	* {
+		padding: 0;
+		margin: 0;
+		box-sizing: border-box;
+	}
+
+	::-webkit-scrollbar { width: 4px; }
+	::-webkit-scrollbar-track { background: transparent; }
+	::-webkit-scrollbar-thumb { background: #333; border-radius: 1em; }
+	::-webkit-scrollbar-thumb:hover { background: #444; }
+
+	a {
+		color: var(--link);
+		text-decoration: none;
+
+		&:visited {
+			color: color-mix(in srgb, var(--link), purple 30%);
+		}
+
+		&:hover {
+			color: color-mix(in srgb, var(--link), white 10%);
+			text-decoration: underline;
+		}
+
+		&:active {
+			color: color-mix(in srgb, var(--link), white 50%);
+		}
+	}
+}
+
+@layer page {
+	html { height: 100%; }
+	body { min-height: 100%; }
+
+	html, body {
+		font-family: sans-serif;
+		font-size: 16px;
+		color: var(--text);
+		background: var(--bg);
+	}
+
+	body {
+		padding: 1em;
+	}
+}
+

package/s/index-ui.ts

@@ -0,0 +1,3 @@
+
+export * from "./ui/views/desk/view.js"
+

package/s/index.html.ts

@@ -2,9 +2,9 @@
 import {template, html, dataSvgEmoji, socialCard} from "@e280/scute"
 
 const title = "@benev/tact"
-const domain = "tact.benevolent.games"
+const domain = "tact.benev.gg"
 const favicon = "/assets/b.png"
-const description = "keybindings and gamepad support for web games"
+const description = "🎮 keybindings and couch co-op"
 
 export default template(import.meta.url, async orb => html`
 	<!doctype html>
@@ -35,26 +35,19 @@ export default template(import.meta.url, async orb => html`
 					<strong>@benev/tact</strong>
 					<small>v${orb.packageVersion()}</small>
 				</h1>
-				<div class=deets>
-					<p><em>"from keypress to couch co-op"</em></p>
+				<div>
+					<blockquote>"from keypress to couch co-op"</blockquote>
 					<p>
-						tact is a user input toolkit for the web. it's good at customizable keybindings, and multiple gamepad support.
-						see <a href="https://github.com/benevolent-games/tact">github</a>,
-						see <a href="https://benevolent.games/">benevolent.games</a>.
+						<a href="./gamepad/">gamepad visualizer</a>.
+					</p>
+					<p>
+						<a href="https://github.com/benev-gg/tact">github</a>.
+						<a href="https://benev.gg/">benev.gg</a>.
 					</p>
 				</div>
 			</header>
 
-			<div id=demo-theater></div>
-
-			<section>
-				<h3>controls</h3>
-				<ul>
-					<li><strong>keyboard</strong> wasd, left-bracket, right-bracket, backslash.</li>
-					<li><strong>gamepad</strong> thumbsticks, hold beta/gamma and press bumpers or dpad left/right.</li>
-					<li><strong>virtual</strong> use your mouse to press the little buttons.</li>
-				</ul>
-			</section>
+			<demo-app></demo-app>
 		</body>
 	</html>
 `)

package/s/index.ts

@@ -1,8 +1,31 @@
 
-export * from "./core/index.js"
-export * from "./deck/index.js"
-export * from "./nubs/index.js"
-export * as nubs from "./nubs/index.js"
+export * from "./core/atom/types.js"
+export * from "./core/bindings/normalize.js"
+export * from "./core/bindings/shape.js"
+export * from "./core/bindings/table.js"
+export * from "./core/intent/bucket.js"
+export * from "./core/intent/decode.js"
+export * from "./core/intent/encode.js"
+export * from "./core/intent/merge.js"
+export * from "./core/parts/action.js"
+export * from "./core/parts/sample-map.js"
+export * from "./core/resolvers/actions.js"
+export * from "./core/resolvers/intents.js"
+export * from "./core/types.js"
 
-export * from "./utils/gamepads.js"
+export * from "./device/pad/pad.js"
+export * from "./device/pad/on-pad.js"
+export * from "./device/devices.js"
+export * from "./device/gamepad.js"
+export * from "./device/keyboard.js"
+export * from "./device/pointer.js"
+export * from "./device/sampler.js"
+export * from "./device/stick.js"
+
+export * from "./deck/parts/profiles.js"
+export * from "./deck/parts/settings.js"
+export * from "./deck/controller.js"
+export * from "./deck/deck.js"
+export * from "./deck/port.js"
+export * from "./deck/types.js"