@benev/tact 0.1.0-3 → 0.1.0-4

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

@@ -0,0 +1,112 @@
+
+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/deck/views/framework.ts

@@ -0,0 +1,14 @@
+
+import {Content, Use, view} from "@e280/sly"
+import {Deck} from "../deck.js"
+
+export function deckView(
+		fn: (deck: Deck<any>) => (use: Use) => Content
+	) {
+
+	return (deck: Deck<any>) => {
+		const fn2 = fn(deck)
+		return view(use => () => fn2(use))
+	}
+}
+

package/s/demo/game/game.ts

@@ -0,0 +1,85 @@
+
+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/demo/game/parts/agent.ts

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

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

@@ -0,0 +1,20 @@
+
+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/demo/game/parts/logic.ts

@@ -0,0 +1,24 @@
+
+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/demo/game/parts/player.ts

@@ -0,0 +1,32 @@
+
+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/demo/game/parts/renderer.ts

@@ -0,0 +1,113 @@
+
+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.clone()
+
+			// 0-1 relative to arena scale
+			.divide(this.state.arenaSize)
+
+			// flip y axis
+			.morph(v => {v.y = 1 - v.y})
+
+			// stretch to the size of the canvas
+			.multiply_(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/demo/game/parts/state.ts

@@ -0,0 +1,24 @@
+
+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)
+			.multiply(this.arenaSize)
+		this.agents.add(agent)
+		return agent
+	}
+
+	deleteAgent(agent: Agent) {
+		this.agents.delete(agent)
+		return this
+	}
+}
+

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

@@ -0,0 +1,13 @@
+
+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/demo/main.bundle.ts

@@ -1,14 +1,8 @@
 
-import {$, view} from "@e280/sly"
-import {NubStick} from "../nubs/stick/view.js"
-import {StickController} from "../core/controllers/standard/stick.js"
-
-$.register({
-	TactDemo: view.component(use => {
-		const stick = use.once(() => new StickController())
-		return NubStick(stick)
-	}),
-})
-
-console.log("tact")
+import {dom} from "@e280/sly"
+import {TactDemo} from "./ui/tact-demo/component.js"
+
+dom.register({TactDemo})
+
+console.log("🎮 tact")
 

package/s/demo/main.css

@@ -5,8 +5,9 @@
 	:root {
 		color-scheme: dark;
 		--link: cyan;
+		--prime: #ccc;
 		--bg: #181818;
-		--prime: #aaa;
+		--bg2: #111111;
 	}
 }
 
@@ -46,12 +47,39 @@
 	body { min-height: 100%; }
 
 	html, body {
-		font-size: 21px;
+		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/demo/ui/tact-demo/component.ts

@@ -0,0 +1,13 @@
+
+import {cssReset, view} from "@e280/sly"
+import styleCss from "./style.css.js"
+import {Game} from "../../game/game.js"
+import {loader} from "../utils/loader.js"
+import {Theater} from "../theater/view.js"
+
+export class TactDemo extends view.component(use => {
+	use.css(cssReset, styleCss)
+	const opGame = use.op.load(async() => Game.load())
+	return loader(opGame, game => Theater(game))
+}) {}
+

package/s/demo/ui/tact-demo/style.css.ts

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

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

@@ -0,0 +1,57 @@
+
+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;
+	}
+
+	[deck="overlay"] {
+		position: absolute;
+		top: 10%;
+		left: 0;
+		right: 0;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+}
+
+.dlist {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	gap: 0.5em;
+}
+
+`
+

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

@@ -0,0 +1,53 @@
+
+import {html} from "lit"
+import {cssReset, view} from "@e280/sly"
+import {repeat} from "lit/directives/repeat.js"
+
+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"
+
+export const Theater = view(use => (game: Game) => {
+	use.css(cssReset, styles)
+	use.mount(() => game.loop(60))
+	use.mount(() => game.deck.hub.on(use.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}
+			${game.deck.views.DeckOverlay()}
+		</div>
+
+		<div class=dlist>
+			${repeat(
+				virtualDevices,
+				d => d.skin.label,
+				({device, skin}) => {
+					return VirtualDeviceView
+						.props(game.deck.hub, device, skin)
+						.attr("style", `--color: ${skin.color};`)
+						.render()
+				},
+			)}
+
+			<button @click="${addVirtual}">
+				✨
+			</button>
+
+			<button @click="${revealOverlay}">
+				👁️
+			</button>
+		</div>
+	`
+})
+

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

@@ -0,0 +1,43 @@
+
+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;
+}
+
+`
+