@benev/tact 0.3.0-4 → 0.4.0-0

package/s/_archive/index.html.ts

@@ -1,61 +0,0 @@
-
-import {template, html, dataSvgEmoji, socialCard} from "@e280/scute"
-
-const title = "@benev/tact"
-const domain = "tact.benevolent.games"
-const favicon = "/assets/b.png"
-const description = "keybindings and gamepad support for web games"
-
-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("demo/main.css")}"/>
-			<script type="module" src="${orb.hashurl("demo/main.bundle.min.js")}"></script>
-
-			${socialCard({
-				title,
-				description,
-				themeColor: "#f2ea8e",
-				siteName: domain,
-				image: `https://${domain}${favicon}`,
-			})}
-		</head>
-		<body>
-			<header>
-				<h1>
-					<strong>@benev/tact</strong>
-					<small>v${orb.packageVersion()}</small>
-				</h1>
-				<div class=deets>
-					<p><em>"from keypress to couch co-op"</em></p>
-					<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>.
-					</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>
-		</body>
-	</html>
-`)
-

package/s/_archive/index.ts

@@ -1,8 +0,0 @@
-
-export * from "./core/index.js"
-export * from "./deck/index.js"
-export * from "./nubs/index.js"
-export * as nubs from "./nubs/index.js"
-
-export * from "./utils/gamepads.js"
-

package/s/_archive/nubs/index.ts

@@ -1,5 +0,0 @@
-
-export * from "./lookpad/view.js"
-export * from "./stick/view.js"
-export * from "./vpad/view.js"
-

package/s/_archive/nubs/lookpad/styles.ts

@@ -1,21 +0,0 @@
-
-import {css} from "lit"
-export const styles = css`
-
-:host {
-	display: block;
-	width: 10em;
-	height: 10em;
-
-	user-select: none;
-	border: 1px solid;
-
-	touch-action: none;
-}
-
-.pad {
-	width: 100%;
-	height: 100%;
-}
-
-`

package/s/_archive/nubs/lookpad/view.ts

@@ -1,39 +0,0 @@
-
-import {dom, shadow, useHost, useMount, useName, useSignal, useStyles} from "@e280/sly"
-import {styles} from "./styles.js"
-
-export const NubLookpad = shadow(() => {
-	useName("nub-lookpad")
-	useStyles(styles)
-	const host = useHost()
-
-	const $captured = useSignal<number | undefined>(undefined)
-
-	useMount(() => dom.events(host, {
-		pointerdown: (event: PointerEvent) => {
-			event.preventDefault()
-			if ($captured.value)
-				host.releasePointerCapture($captured.value)
-
-			host.setPointerCapture(event.pointerId)
-			$captured.value = event.pointerId
-			// onPointerDrag(event)
-		},
-
-		pointermove: [{passive: false}, (event: PointerEvent) => {
-			event.preventDefault()
-			if (event.pointerId === $captured.value) {
-				// onPointerDrag(event)
-			}
-		}],
-
-		pointerup: (event: PointerEvent) => {
-			event.preventDefault()
-			if (event.pointerId === $captured.value) {
-				host.releasePointerCapture($captured.value)
-				$captured.value = undefined
-				// onPointerDrag(event)
-			}
-		},
-	}))
-})

package/s/_archive/nubs/stick/style.css.ts

@@ -1,70 +0,0 @@
-
-import {css} from "lit"
-export default css`
-
-:host {
-	--nub-size: 60%;
-	--nub-color: #fff8;
-
-	position: relative;
-	display: block;
-
-	cursor: default;
-	user-select: none;
-
-	width: 6em;
-	height: auto;
-	aspect-ratio: 1 / 1;
-
-	background: #0008;
-	border-radius: 100%;
-	outline: 1px solid color-mix(in srgb, transparent, var(--nub-color) 10%);
-}
-
-:host * {
-	pointer-events: none;
-}
-
-.frame {
-	position: absolute;
-	inset: 0;
-	margin: auto;
-
-	width: 100%;
-	height: auto;
-	aspect-ratio: 1 / 1;
-
-	> div {
-		position: absolute;
-		inset: 0;
-		margin: auto;
-		width: var(--nub-size);
-		height: auto;
-		aspect-ratio: 1 / 1;
-		border-radius: 100%;
-	}
-}
-
-.inner {
-	outline: 1px solid color-mix(in srgb, transparent, var(--nub-color) 10%);
-}
-
-.outer {
-	outline: 1px solid color-mix(in srgb, transparent, var(--nub-color) 10%);
-}
-
-.stickbase {
-	display: none;
-	background: color-mix(in srgb, transparent, var(--nub-color) 25%);
-}
-
-.stickunder {
-	background: color-mix(in srgb, transparent, var(--nub-color) 50%);
-}
-
-.stick {
-	background: #fff8;
-}
-
-`
-

package/s/_archive/nubs/stick/view.ts

@@ -1,108 +0,0 @@
-
-import {html} from "lit"
-import {coalesce, nap} from "@e280/stz"
-import {Scalar, Vec2} from "@benev/math"
-import {cssReset, dom, shadow, useCss, useHost, useMount, useName, useOnce, useSignal} from "@e280/sly"
-
-import styleCss from "./style.css.js"
-import {circularClamp} from "../../utils/circular-clamp.js"
-import {StickDevice} from "../../core/devices/standard/stick.js"
-
-export const NubStick = shadow(({$vector}: StickDevice) => {
-	useName("nub-stick")
-	useCss(cssReset, styleCss)
-	const host = useHost()
-
-	const range = useOnce(() => new Vec2(0.2, 0.8))
-	const $captured = useSignal<number | undefined>(undefined)
-
-	useMount(() => {
-		function recalc(event: PointerEvent) {
-			const rect = host.getBoundingClientRect()
-			const vector = $vector.get()
-			vector.x = Scalar.remap(event.clientX, rect.left, rect.right, -1, 1)
-			vector.y = Scalar.remap(event.clientY, rect.top, rect.bottom, -1, 1)
-			vector.set(circularClamp(vector, range))
-			$vector.publish()
-		}
-
-		function release() {
-			if ($captured.value === undefined) return
-			$vector.get().set_(0, 0)
-			$vector.publish()
-
-			// fix for ridiculous firefox bug,
-			// where our captured pointerup was clicking outside buttons
-			nap(0).then(() => {
-				if ($captured.value === undefined) return
-				host.releasePointerCapture($captured.value)
-				$captured.value = undefined
-			})
-		}
-
-		return coalesce(
-
-			// fix for ridiculous firefox bug
-			dom.events(document.body, {
-				click: [{capture: true}, (event: Event) => {
-					if ($captured.value === undefined) return
-					event.preventDefault()
-					event.stopPropagation()
-				}],
-			}),
-
-			dom.events(host, {
-				pointerdown: (event: PointerEvent) => {
-					if ($captured.value === undefined) {
-						$captured.value = event.pointerId
-						host.setPointerCapture($captured.value)
-						recalc(event)
-					}
-				},
-				pointermove: [{}, (event: PointerEvent) => {
-					if ($captured.value !== undefined)
-						recalc(event)
-				}],
-				pointerup: release,
-				pointercancel: release,
-			})
-		)
-	})
-
-	const vector = $vector.get()
-	const innerstyle = `width: ${range.x * 100}%;`
-	const outerstyle = `width: ${range.y * 100}%;`
-
-	const framestyle = (factor: number) => {
-		const f = factor * 0.5
-		const x = f * vector.x * 100
-		const y = f * vector.y * 100
-		return `
-			transform-origin: center center;
-			transform: translate(${x}%, ${y}%);
-		`
-	}
-
-	return html`
-		<div class=frame>
-			<div class=inner style="${innerstyle}"></div>
-		</div>
-
-		<div class=frame>
-			<div class=outer style="${outerstyle}"></div>
-		</div>
-
-		<div class=frame>
-			<div class=stickbase></div>
-		</div>
-
-		<div class=frame style="${framestyle(0.5)}">
-			<div class=stickunder></div>
-		</div>
-
-		<div class=frame style="${framestyle(1.0)}">
-			<div class=stick></div>
-		</div>
-	`
-})
-

package/s/_archive/nubs/vpad/styles.css.ts

@@ -1,134 +0,0 @@
-
-import {css} from "lit"
-export default css`
-
-:host {
-	pointer-events: none;
-
-	display: flex;
-	flex-direction: column;
-	container: my-layout / size;
-
-	width: 100%;
-	height: 100%;
-}
-
-* {
-	user-drag: none;
-	user-select: none;
-}
-
-button, [view="nub-stick"] {
-	pointer-events: all;
-}
-
-button {
-	font-size: 0.5em;
-	color: #fff;
-	text-shadow: .1em .2em .1em #000;
-	text-transform: uppercase;
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-	background: #888;
-	box-shadow: .2em .4em .1em #000;
-
-	-webkit-tap-highlight-color: transparent;
-	&:is(:focus, :hover) {
-		outline: none;
-		background: #888;
-		filter: none;
-	}
-}
-
-.upper {
-	flex: 1 1 auto;
-	display: flex;
-	justify-content: center;
-	align-items: start;
-	gap: 0.5em;
-}
-
-.lower {
-	display: flex;
-	justify-content: space-between;
-}
-
-.side {
-	display: flex;
-	flex-direction: column;
-	gap: 1em;
-}
-
-.pad {
-	display: flex;
-	gap: 0.5em;
-
-	> div {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		gap: 0.5em;
-	}
-}
-
-.shoulder {
-	display: flex;
-	gap: 0.5em;
-}
-
-.right {
-	align-items: end;
-}
-
-.right .shoulder {
-	flex-direction: row-reverse;
-}
-
-[x-code^="gamepad.trigger"] {
-	width: 6em;
-}
-
-[x-code^="gamepad.bumper"] {
-	width: 4em;
-}
-
-.stick {
-	width: 4em;
-}
-
-@container (min-width: 0px) {
-	.upper, .lower {
-		padding: 2cqh 2cqw;
-	}
-
-	button {
-		font-size: min(3cqh, 3cqw);
-		width: 7cqw;
-		height: 6cqh;
-	}
-
-	.upper button {
-		width: unset;
-		height: unset;
-	}
-
-	.shoulder button {
-		height: 9cqh;
-	}
-
-	.stick {
-		width: max(15cqw, 15cqh);
-	}
-
-	[x-code^="gamepad.trigger"] {
-		width: 9cqw;
-	}
-
-	[x-code^="gamepad.bumper"] {
-		width: 7cqw;
-	}
-}
-
-`
-

package/s/_archive/nubs/vpad/utils/gamepad-inputs.ts

@@ -1,42 +0,0 @@
-
-export type GamepadInputs = ReturnType<typeof gamepadInputs>
-
-export function gamepadInputs() {
-	return {
-		"gamepad.any": 0,
-
-		"gamepad.stick.left.up": 0,
-		"gamepad.stick.left.down": 0,
-		"gamepad.stick.left.left": 0,
-		"gamepad.stick.left.right": 0,
-
-		"gamepad.stick.right.up": 0,
-		"gamepad.stick.right.down": 0,
-		"gamepad.stick.right.left": 0,
-		"gamepad.stick.right.right": 0,
-
-		"gamepad.stick.left.click": 0,
-		"gamepad.stick.right.click": 0,
-
-		"gamepad.a": 0,
-		"gamepad.b": 0,
-		"gamepad.x": 0,
-		"gamepad.y": 0,
-
-		"gamepad.up": 0,
-		"gamepad.down": 0,
-		"gamepad.left": 0,
-		"gamepad.right": 0,
-
-		"gamepad.trigger.left": 0,
-		"gamepad.trigger.right": 0,
-
-		"gamepad.bumper.left": 0,
-		"gamepad.bumper.right": 0,
-
-		"gamepad.alpha": 0,
-		"gamepad.beta": 0,
-		"gamepad.gamma": 0,
-	}
-}
-

package/s/_archive/nubs/vpad/utils/prevent-default-touch-shenanigans.ts

@@ -1,12 +0,0 @@
-
-export function preventDefaultTouchShenanigans() {
-	const preventer = (e: TouchEvent) => e.preventDefault()
-	const opts = {passive: false}
-
-	window.addEventListener("touchmove", preventer, opts)
-
-	return () => {
-		window.removeEventListener("touchmove", preventer)
-	}
-}
-

package/s/_archive/nubs/vpad/utils/touch-tracking.ts

@@ -1,75 +0,0 @@
-
-import {ev, MapG} from "@e280/stz"
-
-export function touchTracking({target, buttons, touchdown, touchup}: {
-		target: Document | ShadowRoot
-		buttons: Set<HTMLButtonElement>
-		touchdown: (button: HTMLButtonElement) => void
-		touchup: (button: HTMLButtonElement) => void
-	}) {
-
-	const tracks = new MapG<number, Track>
-
-	function grabTrack(touch: Touch) {
-		return tracks.guarantee(touch.identifier, () => new Track(
-			touchdown,
-			touchup,
-		))
-	}
-
-	function underTouch(touch: Touch) {
-		const element = target.elementFromPoint(touch.clientX, touch.clientY)
-		return (element && element instanceof HTMLButtonElement && buttons.has(element))
-			? element
-			: undefined
-	}
-
-	function additive(event: TouchEvent) {
-		for (const touch of Array.from(event.touches)) {
-			const track = grabTrack(touch)
-			track.button = underTouch(touch)
-		}
-	}
-
-	function subtractive(event: TouchEvent) {
-		for (const touch of Array.from(event.changedTouches)) {
-			const track = grabTrack(touch)
-			track.button = undefined
-			tracks.delete(touch.identifier)
-		}
-	}
-
-	return ev(window, {
-		touchstart: additive,
-		touchmove: additive,
-		touchcancel: subtractive,
-		touchend: subtractive,
-	})
-}
-
-class Track {
-	#button: HTMLButtonElement | undefined = undefined
-
-	constructor(
-		public touchdown: (button: HTMLButtonElement) => void,
-		public touchup: (button: HTMLButtonElement) => void,
-	) {}
-
-	get button() {
-		return this.#button
-	}
-
-	set button(next: HTMLButtonElement | undefined) {
-		const previous = this.#button
-		const changed = next !== previous
-
-		this.#button = next
-
-		if (changed && previous) {
-			this.touchup(previous)
-		}
-		if (changed && next)
-			this.touchdown(next)
-	}
-}
-