@benev/tact 0.3.0-5 → 0.4.0-1

package/s/_archive/deck/parts/device-skins/device-icons.ts

@@ -1,38 +0,0 @@
-
-import {Content} from "@e280/sly"
-import {Constructor} from "@e280/stz"
-import {Device} from "../../../core/devices/device.js"
-import {VpadDevice} from "../../../core/devices/standard/vpad.js"
-import {PrimaryDevice} from "../../../core/devices/standard/primary.js"
-import {GamepadDevice} from "../../../core/devices/standard/gamepad.js"
-
-export type DeviceIconEntry = [DeviceClass: Constructor<Device>, icon: Content]
-
-export class DeviceIcons {
-	fallback: Content = "❔"
-	#map = new Map<Constructor<Device>, Content>()
-
-	constructor(entries: DeviceIconEntry[] = [
-			[PrimaryDevice, "💻"],
-			[GamepadDevice, "🎮"],
-			[VpadDevice, "📱"],
-		]) {
-		this.add(...entries)
-	}
-
-	get(DeviceClass: Constructor<Device>) {
-		return this.#map.get(DeviceClass) ?? this.fallback
-	}
-
-	add(...entries: DeviceIconEntry[]) {
-		for (const [dc, icon] of entries)
-			this.#map.set(dc, icon)
-		return this
-	}
-
-	clear() {
-		this.#map.clear()
-		return this
-	}
-}
-

package/s/_archive/deck/parts/device-skins/device-skin.ts

@@ -1,29 +0,0 @@
-
-import {Content} from "@e280/sly"
-import {Hex, WeakMapG} from "@e280/stz"
-import {DeviceIcons} from "./device-icons.js"
-import {Device} from "../../../core/devices/device.js"
-import {ColorDispenser} from "../../../utils/dispensers.js"
-
-export class DeviceSkin {
-	constructor(
-		public icon: Content,
-		public label: string,
-		public color: string,
-	) {}
-}
-
-export class DeviceSkins {
-	icons = new DeviceIcons()
-	#map = new WeakMapG<Device, DeviceSkin>()
-	#colors = new ColorDispenser()
-
-	get(device: Device) {
-		return this.#map.guarantee(device, () => new DeviceSkin(
-			this.icons.get(device.constructor as any),
-			Hex.random(4),
-			this.#colors.takeFirst(),
-		))
-	}
-}
-

package/s/_archive/deck/parts/local-storage-kv.ts

@@ -1,8 +0,0 @@
-
-import {Kv, StorageDriver} from "@e280/kv"
-
-export function localStorageKv() {
-	const driver = new StorageDriver(window.localStorage)
-	return new Kv(driver).scope("tact")
-}
-

package/s/_archive/deck/parts/merge-bindings.ts

@@ -1,21 +0,0 @@
-
-import {deep} from "@e280/stz"
-import {Bindings} from "../../core/bindings/types.js"
-
-export function mergeBindings<B extends Bindings>(normative: B, sus?: B) {
-	const bindings = deep.clone(normative)
-
-	if (!sus)
-		return bindings
-
-	for (const [mode, bracket] of Object.entries(bindings)) {
-		for (const actionKey of Object.keys(bracket)) {
-			const susAction = sus[mode]?.[actionKey]
-			if (susAction)
-				bracket[actionKey] = susAction
-		}
-	}
-
-	return bindings
-}
-

package/s/_archive/deck/parts/overlay-visibility.ts

@@ -1,49 +0,0 @@
-
-import {signal} from "@e280/strata"
-import {debounce, disposer} from "@e280/stz"
-import {Hub} from "../../core/hub/hub.js"
-import {DeviceSkins} from "./device-skins/device-skin.js"
-
-export class OverlayVisibility {
-	auto = true
-	dispose = disposer()
-
-	#created = Date.now()
-	#$auto = signal(false)
-
-	/** manual override for whether the ports view should be visible */
-	readonly $manual = signal(false)
-
-	/** derived signal about whether the ports view should be visible */
-	readonly $visible = signal.derived(() => (
-		this.$manual() || (this.auto && this.#$auto())
-	))
-
-	/** whether or not to show labels in the overlay ui */
-	readonly $showLabels = signal(false)
-
-	constructor(
-			public hub: Hub<any>,
-			public deviceSkins = new DeviceSkins(),
-		) {
-
-		this.dispose.schedule(
-			hub.on(async() => {
-				const since = Date.now() - this.#created
-				if (since > 100) await this.bump()
-			})
-		)
-	}
-
-	#autoOff = debounce(1500, () => this.#$auto(false))
-
-	async bump() {
-		await this.#$auto(true)
-		await this.#autoOff()
-	}
-
-	async toggle(active = !this.$manual()) {
-		return this.$manual.set(active)
-	}
-}
-

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

@@ -1,6 +0,0 @@
-
-import {css} from "lit"
-export default css`
-
-`
-

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

@@ -1,95 +0,0 @@
-
-import {html} from "lit"
-import {bytename} from "@e280/stz"
-import {cssReset, shadow, useCss, useName, useSignal} from "@e280/sly"
-
-import {Deck} from "../../deck.js"
-import styleCss from "./style.css.js"
-import {Port} from "../../../core/hub/port.js"
-import {Profile} from "../../parts/catalog.js"
-import {Atom, Bindings, Bracket} from "../../../core/bindings/types.js"
-
-export const DeckBindings = shadow((deck: Deck<any>) => {
-	useCss(cssReset, styleCss)
-	useName("deck-bindings")
-	const {db, hub} = deck
-
-	const catalog = db.$catalog()
-	const defaultProfile: Profile = {id: "default", label: "default", bindings: deck.baseBindings}
-	const allProfiles = [defaultProfile, ...catalog.profiles.values()]
-	const $selectedProfileId = useSignal("default")
-	const profile = db.$catalog().getProfile($selectedProfileId()) ?? defaultProfile
-
-	function renderPort(_port: Port<Bindings>, index: number) {
-		const portProfile = catalog.getProfileForPort(index) ?? defaultProfile
-		return html`
-			<div class=port>
-				<span>port ${index + 1}</span>
-				<select>
-					${allProfiles.map(profile => html`
-						<option
-							data-id="${profile.id}"
-							?selected="${profile.id === portProfile.id}">
-								${profile.label}
-						</option>
-					`)}
-				</select>
-			</div>
-		`
-	}
-
-	function renderBindingBracket(entry: [string, unknown]) {
-		const [mode, bracket] = entry as [string, Bracket]
-		return html`
-			<div class=bracket>
-				<strong class=mode>${mode}</strong>
-				<div>${Object.entries(bracket).map(renderBinds)}</div>
-			</div>
-		`
-	}
-
-	function renderBinds([action, _atom]: [action: string, atom: Atom]) {
-		return html`
-			<div class=bind>
-				<span class=action>${action}</span>
-			</div>
-		`
-	}
-
-	const clickClone = async() => {
-		const {bindings} = profile
-		const label = bytename.random(4)
-		const p = await db.createProfile(label, bindings)
-		$selectedProfileId(p.id)
-	}
-
-	const deleteProfile = (id: string) => async() => {
-		await db.deleteProfile(id)
-	}
-
-	const onSelected = (event: InputEvent) => {
-		const select = event.target as HTMLSelectElement
-		const id = select.value
-		$selectedProfileId(id)
-	}
-
-	return html`
-		<div class=portlist>
-			${hub.ports.map(renderPort)}
-		</div>
-
-		<div class=bindable>
-			<select @input="${onSelected}">
-				${allProfiles.map(p => html`
-					<option value="${p.id}" ?selected="${p.id === profile.id}">${p.label}</option>
-				`)}
-			</select>
-			<button @click="${clickClone}">clone</button>
-			<button ?disabled="${profile.id === defaultProfile.id}" @click="${deleteProfile(profile.id)}">delete</button>
-			<div class=bindings>
-				${Object.entries(profile.bindings).map(renderBindingBracket)}
-			</div>
-		</div>
-	`
-})
-

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