@benev/tact 0.3.0-5 → 0.4.0-0

package/s/_archive/deck/views/overlay/style.css.ts

@@ -1,110 +0,0 @@
-
-import {css} from "lit"
-export default css`
-
-:host {
-	--gap: 0.3em;
-	pointer-events: none;
-	cursor: default;
-	user-select: none;
-}
-
-.portlist {
-	pointer-events: none;
-
-	display: flex;
-	align-items: start;
-
-	width: max-content;
-	gap: var(--gap);
-	padding: 0.5em;
-
-	color: #fff8;
-	background: #222a;
-	border-radius: 1em;
-
-	opacity: 0;
-	transition: opacity 300ms linear;
-
-	&[data-active] {
-		opacity: 1;
-		pointer-events: all;
-	}
-
-	.port {
-		flex: 1 0 0;
-		display: flex;
-		flex-direction: column;
-
-		min-width: 6em;
-		gap: var(--gap);
-
-		> * {
-			color: white;
-			font-weight: bold;
-			text-shadow: 0.05em 0.05em 0.1em #0008;
-			text-transform: uppercase;
-		}
-
-		header {
-			text-align: center;
-			color: #fff8;
-		}
-
-		.device {
-			display: flex;
-			flex-direction: column;
-			gap: var(--gap);
-
-			box-shadow: 0.1em 0.2em 0.7em #0004;
-			background: color-mix(in srgb, #fffa, var(--color) 50%);
-			border-top: 2px solid #fff8;
-			border-bottom: 2px solid #0004;
-			border-radius: 0.5em;
-
-			.row {
-				display: flex;
-				align-items: center;
-
-				&.primary {
-					justify-content: space-between;
-				}
-
-				&.secondary {
-					justify-content: center;
-				}
-			}
-
-			.icon {
-				font-size: 1.5em;
-			}
-
-			.label {
-				font-family: monospace;
-				font-size: 0.8em;
-				opacity: 0.5;
-				line-height: 0.9em;
-			}
-
-			button {
-				opacity: 0.2;
-				cursor: pointer;
-				padding: 0 0.2em;
-				font-family: monospace;
-				font-size: 1.5em;
-				font-weight: bold;
-
-				background: transparent;
-				border: 1px solid transparent;
-				text-shadow: inherit;
-
-				&:is(:hover, :focus-visible) {
-					opacity: 1;
-				}
-			}
-		}
-	}
-}
-
-`
-

package/s/_archive/deck/views/overlay/view.ts

@@ -1,46 +0,0 @@
-
-import {html} from "lit"
-import {cssReset, shadow, useCss, useName} from "@e280/sly"
-import {Deck} from "../../deck.js"
-import styleCss from "./style.css.js"
-import {Device} from "../../../core/devices/device.js"
-
-export const DeckOverlay = shadow((deck: Deck<any>) => {
-	useCss(cssReset, styleCss)
-	useName("deck-overlay")
-	const {hub, deviceSkins, overlayVisibility: {$visible, $showLabels}} = deck
-
-	function renderDevice(device: Device) {
-		const skin = deviceSkins.get(device)
-		const style = `--color: ${skin.color};`
-		const next = () => hub.shimmy(device, 1)
-		const previous = () => hub.shimmy(device, -1)
-		return html`
-			<div class=device style="${style}">
-				<div class="primary row">
-					<button @click="${previous}">&lt;</button>
-					<div class=icon>${skin.icon}</div>
-					<button @click="${next}">&gt;</button>
-				</div>
-
-				${$showLabels() ? html`
-					<div class="secondary row">
-						<div class=label>${skin.label}</div>
-					</div>
-				` : null}
-			</div>
-		`
-	}
-
-	return html`
-		<div class=portlist ?data-active="${$visible()}">
-			${hub.ports.map((port, index) => html`
-				<div class=port>
-					<header>P${index + 1}</header>
-					${port.devices.array().map(renderDevice)}
-				</div>
-			`)}
-		</div>
-	`
-})
-

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

@@ -1,85 +0,0 @@
-
-import {disposer, nap, repeat} from "@e280/stz"
-import {Logic} from "./parts/logic.js"
-import {State} from "./parts/state.js"
-import {Deck} from "../../deck/deck.js"
-import {Players} from "./parts/player.js"
-import {Renderer} from "./parts/renderer.js"
-import {Device} from "../../core/devices/device.js"
-import {VirtualDevice} from "./parts/virtual-device.js"
-import {gameBindings, GameDeck} from "./parts/game-bindings.js"
-import {autoGamepads} from "../../core/devices/auto-gamepads.js"
-import {localStorageKv} from "../../deck/parts/local-storage-kv.js"
-import {PrimaryDevice} from "../../core/devices/standard/primary.js"
-
-export class Game {
-	static async load() {
-		return new this(
-			await Deck.load({
-				portCount: 4,
-				kv: localStorageKv(),
-				bindings: gameBindings,
-			})
-		)
-	}
-
-	logic: Logic
-	dispose = disposer()
-	state = new State()
-	renderer = new Renderer(this.state)
-
-	constructor(public deck: GameDeck) {
-
-		// add an icon for our demo virtual device
-		this.deck.deviceSkins.icons.add(
-			[VirtualDevice, "🔘"],
-		)
-
-		// establish game logic
-		this.logic = new Logic(
-			this.state,
-			new Players(deck.hub, this.state),
-		)
-
-		// on hub update, set agent.alive based on port status
-		this.dispose.schedule(
-			this.deck.hub.on(() => {
-				for (const player of this.logic.players) {
-					player.agent.alive = player.port.devices.size > 0
-					const [firstDevice] = player.port.devices
-					player.agent.color = firstDevice
-						? this.deck.deviceSkins.get(firstDevice).color
-						: "#444"
-				}
-			})
-		)
-
-		// plug in initial devices
-		this.plug(new PrimaryDevice())
-		this.plug(new VirtualDevice(deck.hub))
-
-		// dynamically plug in detected gamepads
-		this.dispose.schedule(
-			autoGamepads(deck.hub.plug)
-		)
-	}
-
-	plug(device: Device) {
-		this.deck.hub.plug(device)
-		return () => this.unplug(device)
-	}
-
-	unplug(device: Device) {
-		this.deck.hub.unplug(device)
-	}
-
-	loop(hz: number) {
-		return repeat(async() => {
-			await nap(1000 / hz)
-			this.deck.hub.poll()
-			this.logic.tick()
-			this.renderer.render()
-		})
-	}
-}
-

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

@@ -1,10 +0,0 @@
-
-import {Vec2} from "@benev/math"
-
-export class Agent {
-	label = "0"
-	alive = true
-	color = "#444"
-	position = Vec2.zero()
-}
-

package/s/_archive/demo/game/parts/game-bindings.ts

@@ -1,20 +0,0 @@
-
-import {Deck} from "../../../deck/deck.js"
-import {Hub} from "../../../core/hub/hub.js"
-import {Port} from "../../../core/hub/port.js"
-import {asBindings} from "../../../core/bindings/types.js"
-
-export type GameBindings = typeof gameBindings
-export type GamePort = Port<GameBindings>
-export type GameDeck = Deck<GameBindings>
-export type GameHub = Hub<GameBindings>
-
-export const gameBindings = asBindings({
-	gameplay: {
-		up: ["or", "KeyW", "ArrowUp", "stick.up", "gamepad.stick.left.up", "gamepad.stick.right.up"],
-		down: ["or", "KeyS", "ArrowDown", "stick.down", "gamepad.stick.left.down", "gamepad.stick.right.down"],
-		left: ["or", "KeyA", "ArrowLeft", "stick.left", "gamepad.stick.left.left", "gamepad.stick.right.left"],
-		right: ["or", "KeyD", "ArrowRight", "stick.right", "gamepad.stick.left.right", "gamepad.stick.right.right"],
-	},
-})
-

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

@@ -1,24 +0,0 @@
-
-import {Vec2} from "@benev/math"
-import {State} from "./state.js"
-import {Players} from "./player.js"
-
-export class Logic {
-	constructor(
-		public state: State,
-		public players: Players,
-	) {}
-
-	tick() {
-		for (const player of this.players) {
-			const {agent, port: {actions}} = player
-			const speed = 1
-			agent.position.y += speed * actions.gameplay.up.value
-			agent.position.y -= speed * actions.gameplay.down.value
-			agent.position.x -= speed * actions.gameplay.left.value
-			agent.position.x += speed * actions.gameplay.right.value
-			agent.position.clamp(Vec2.zero(), this.state.arenaSize)
-		}
-	}
-}
-

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

@@ -1,32 +0,0 @@
-
-import {MapG} from "@e280/stz"
-import {Agent} from "./agent.js"
-import {State} from "./state.js"
-import {GameHub, GamePort} from "./game-bindings.js"
-
-export class Player {
-	constructor(
-		public port: GamePort,
-		public agent: Agent,
-	) {}
-}
-
-export class Players {
-	#map = new MapG<GamePort, Player>()
-
-	constructor(hub: GameHub, state: State) {
-		for (const [index, port] of hub.ports.entries()) {
-			const label = (index + 1).toString()
-			this.#map.set(port, new Player(port, state.makeAgent(label)))
-		}
-	}
-
-	;[Symbol.iterator]() {
-		return this.#map.values()
-	}
-
-	require(port: GamePort) {
-		return this.#map.require(port)
-	}
-}
-

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

@@ -1,112 +0,0 @@
-
-import {Vec2} from "@benev/math"
-import {Agent} from "./agent.js"
-import {State} from "./state.js"
-
-export class Renderer {
-	canvas = (() => {
-		const canvas = document.createElement("canvas")
-		canvas.width = 200
-		canvas.height = 100
-		return canvas
-	})()
-
-	ctx = this.canvas.getContext("2d")!
-
-	constructor(public state: State) {}
-
-	percent(n: number) {
-		const shorty = Math.min(this.canvas.width, this.canvas.height)
-		return Math.ceil(shorty * (n / 100))
-	}
-
-	/** take a game-state position and resolve it into canvas coordinates */
-	resolve(position: Vec2) {
-		return position.dup()
-
-			// 0-1 relative to arena scale
-			.div(this.state.arenaSize)
-
-			// flip y axis
-			.morph((v: Vec2) => {v.y = 1 - v.y})
-
-			// stretch to the size of the canvas
-			.mul_(this.canvas.width, this.canvas.height)
-	}
-
-	render() {
-		const {state} = this
-		this.#renderBackground()
-		const agents = [...state.agents].reverse()
-		const dead = agents.filter(a => !a.alive)
-		const alive = agents.filter(a => a.alive)
-
-		for (const agent of dead)
-			this.#renderDeadAgent(agent)
-
-		for (const agent of alive)
-			this.#renderAliveAgent(agent)
-	}
-
-	#getCleanCtx() {
-		const {ctx} = this
-		ctx.imageSmoothingEnabled = false
-		ctx.fillStyle = "#000"
-		ctx.strokeStyle = "#000"
-		ctx.lineWidth = 1
-		ctx.font = `10px sans-serif`
-		ctx.textAlign = "center"
-		ctx.textBaseline = "middle"
-		return ctx
-	}
-
-	#renderBackground() {
-		const {canvas} = this
-		const ctx = this.#getCleanCtx()
-		ctx.fillStyle = "#000"
-		ctx.fillRect(0, 0, canvas.width, canvas.height)
-	}
-
-	#renderDeadAgent(agent: Agent) {
-		const ctx = this.#getCleanCtx()
-
-		const radius = this.percent(10)
-		const {position} = agent
-		const [x, y] = this.resolve(position)
-
-		// draw label
-		ctx.font = `${radius * 1.3}px sans-serif`
-		ctx.textAlign = "center"
-		ctx.textBaseline = "middle"
-		ctx.fillStyle = "#fff4"
-		ctx.fillText(agent.label, x, y)
-	}
-
-	#renderAliveAgent(agent: Agent) {
-		const ctx = this.#getCleanCtx()
-
-		const radius = this.percent(10)
-		const {color, position} = agent
-		const [x, y] = this.resolve(position)
-
-		// circle
-		ctx.beginPath()
-		ctx.arc(x, y, radius, 0, Math.PI * 2)
-		ctx.fillStyle = color
-		ctx.fill()
-
-		// outline
-		ctx.lineWidth = this.percent(2)
-		ctx.strokeStyle = "#fff"
-		ctx.stroke()
-
-		// draw label
-		ctx.font = `${radius * 1.3}px sans-serif`
-		ctx.textAlign = "center"
-		ctx.textBaseline = "middle"
-		ctx.strokeStyle = "#0004"
-		ctx.strokeText(agent.label, x, y)
-		ctx.fillStyle = "#fff"
-		ctx.fillText(agent.label, x, y)
-	}
-}

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/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()
-