@benev/tact 0.3.0-5 → 0.4.0-1

package/s/_archive/demo/game/parts/state.ts

@@ -1,23 +0,0 @@
-
-import {Vec2} from "@benev/math"
-import {Agent} from "./agent.js"
-
-export class State {
-	arenaSize = new Vec2(200, 100)
-	agents = new Set<Agent>()
-
-	makeAgent(label: string) {
-		const agent = new Agent()
-		agent.label = label
-		agent.position
-			.set_(0.5, 0.5)
-			.mul(this.arenaSize)
-		this.agents.add(agent)
-		return agent
-	}
-
-	deleteAgent(agent: Agent) {
-		this.agents.delete(agent)
-		return this
-	}
-}

package/s/_archive/demo/game/parts/virtual-device.ts

@@ -1,13 +0,0 @@
-
-import {Hub} from "../../../core/hub/hub.js"
-import {StickDevice} from "../../../core/devices/standard/stick.js"
-
-export class VirtualDevice extends StickDevice {
-	constructor(private hub: Hub<any>) {
-		super()
-	}
-
-	shimmyNext = () => this.hub.shimmy(this, 1)
-	shimmyPrevious = () => this.hub.shimmy(this, -1)
-}
-

package/s/_archive/demo/main.bundle.ts

@@ -1,10 +0,0 @@
-
-import {dom} from "@e280/sly"
-import {Game} from "./game/game.js"
-import {DemoTheater} from "./ui/theater/view.js"
-
-const game = await Game.load()
-
-dom.render(dom("#demo-theater"), DemoTheater(game))
-
-console.log("🎮 tact")

package/s/_archive/demo/main.css

@@ -1,85 +0,0 @@
-
-@layer vars, core, basics, page;
-
-@layer vars {
-	:root {
-		color-scheme: dark;
-		--link: cyan;
-		--prime: #ccc;
-		--bg: #181818;
-		--bg2: #111111;
-	}
-}
-
-@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 basics {
-	html { height: 100%; }
-	body { min-height: 100%; }
-
-	html, body {
-		font-family: sans-serif;
-		font-size: 12px;
-		color: var(--prime);
-		background: var(--bg);
-	}
-}
-
-@layer page {
-	body {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-
-		gap: 1em;
-		padding: 2em;
-
-		> * {
-			width: 100%;
-			max-width: 42em;
-		}
-
-		> header {
-			padding: 0 2em;
-			h1 small { font-size: 0.6em; font-weight: normal; }
-			* + * { margin-top: 0.5em; }
-		}
-
-		> section {
-			padding: 0 2em;
-			ul {
-				padding-left: 1em;
-			}
-		}
-	}
-}
-

package/s/_archive/demo/ui/theater/styles.css.ts

@@ -1,57 +0,0 @@
-
-import {css} from "lit"
-export const styles = css`
-
-:host {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-
-	gap: 1em;
-}
-
-.surface {
-	position: relative;
-	width: 100%;
-	height: auto;
-	aspect-ratio: 2 / 1;
-	overflow: hidden;
-
-	background: #000;
-	border: 0.5em solid #fff4;
-	border-radius: 2em;
-
-	canvas {
-		display: block;
-		position: absolute;
-		inset: 0;
-
-		width: 100%;
-		height: 100%;
-
-		image-rendering: pixelated;
-		outline: 1px solid red;
-	}
-
-	[view="deck-overlay"] {
-		position: absolute;
-		top: 10%;
-		left: 0;
-		right: 0;
-
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-	}
-}
-
-.dlist {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: center;
-	align-items: center;
-	gap: 0.5em;
-}
-
-`

package/s/_archive/demo/ui/theater/view.ts

@@ -1,55 +0,0 @@
-
-import {html} from "lit"
-import {repeat} from "lit/directives/repeat.js"
-import {cssReset, shadow, useCss, useMount, useRender} from "@e280/sly"
-
-import {styles} from "./styles.css.js"
-import {Game} from "../../game/game.js"
-import {VirtualDeviceView} from "./virtual/view.js"
-import {VirtualDevice} from "../../game/parts/virtual-device.js"
-import {DeckBindings} from "../../../deck/views/bindings/view.js"
-import { DeckOverlay } from "../../../deck/views/overlay/view.js"
-
-export const DemoTheater = shadow((game: Game) => {
-	useCss(cssReset, styles)
-	useMount(() => game.loop(60))
-	const render = useRender()
-	useMount(() => game.deck.hub.on(render))
-
-	const addVirtual = () => game.plug(new VirtualDevice(game.deck.hub))
-	const revealOverlay = () => game.deck.overlayVisibility.bump()
-
-	const virtualDevices = game.deck.hub.ports
-		.flatMap(port => port.devices.array())
-		.filter(device => device instanceof VirtualDevice)
-		.map(device => ({device, skin: game.deck.deviceSkins.get(device)}))
-		.sort((a, b) => a.skin.label < b.skin.label ? -1 : 1)
-
-	return html`
-		<div class=surface>
-			${game.renderer.canvas}
-			${DeckOverlay(game.deck)}
-		</div>
-
-		<div class=dlist>
-			${repeat(
-				virtualDevices,
-				d => d.skin.label,
-				({device, skin}) => VirtualDeviceView.with({
-					props: [game.deck.hub, device, skin],
-					attrs: {style: `--color: ${skin.color};`},
-				}),
-			)}
-
-			<button @click="${addVirtual}">
-				✨
-			</button>
-
-			<button @click="${revealOverlay}">
-				👁️
-			</button>
-		</div>
-
-		${DeckBindings(game.deck)}
-	`
-})

package/s/_archive/demo/ui/theater/virtual/style.css.ts

@@ -1,43 +0,0 @@
-
-import {css} from "lit"
-export default css`
-
-:host {
-	--color: #aaa;
-}
-
-.box {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	gap: 0.2em;
-	padding: 0.2em;
-	padding-right: 0.5em;
-
-	border-radius: 2em;
-	background: color-mix(in srgb, #fff4, var(--color));
-}
-
-[view="nub-stick"] {
-	width: 2em;
-}
-
-.label {
-	font-size: 1.2em;
-	font-weight: bold;
-
-	padding: 0 0.5em;
-	text-align: center;
-
-	color: white;
-	text-shadow: 0.1em 0.1em 0.1em #0004;
-}
-
-button {
-	font-size: 0.8em;
-	padding: 0.2em;
-}
-
-`
-

package/s/_archive/demo/ui/theater/virtual/view.ts

@@ -1,29 +0,0 @@
-
-import {html} from "lit"
-import {cssReset, shadow, useCss, useName} from "@e280/sly"
-import styleCss from "./style.css.js"
-import {Hub} from "../../../../core/hub/hub.js"
-import {NubStick} from "../../../../nubs/stick/view.js"
-import {VirtualDevice} from "../../../game/parts/virtual-device.js"
-import {DeviceSkin} from "../../../../deck/parts/device-skins/device-skin.js"
-
-export const VirtualDeviceView = shadow((
-	hub: Hub<any>,
-	device: VirtualDevice,
-	_deviceSkin: DeviceSkin,
-) => {
-	useCss(cssReset, styleCss)
-	useName("virtual-device")
-
-	const unplug = () => hub.unplug(device)
-
-	return html`
-		<div class=box>
-			${NubStick(device)}
-
-			<button @click="${device.shimmyPrevious}">👈</button>
-			<button @click="${unplug}">💀</button>
-			<button @click="${device.shimmyNext}">👉</button>
-		</div>
-	`
-})

package/s/_archive/demo/ui/utils/loader.ts

@@ -1,5 +0,0 @@
-
-import {loaders} from "@e280/sly"
-
-export const loader = loaders.make()
-

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>
-	`
-})
-