@benev/tact 0.1.1 → 0.2.0

package/README.md

@@ -23,7 +23,9 @@ it's good at user-customizable keybindings, multiple gamepad support, and mobile
 ## 🍋 tact deck
 > *full setup with ui, batteries included*
 
-the deck ties together all the important pieces of tact into a single user experience, complete with ui components.
+the deck ties together all the important pieces of tact into a single user experience, complete with ui views.
+
+tact's ui is built with [`@e280/sly` shadow views](https://github.com/e280/sly).
 
 ### 🛹 deck setup
 - **import stuff from tact**
@@ -77,13 +79,18 @@ the deck ties together all the important pieces of tact into a single user exper
     ```
 
 ### 🛹 deck ui: the overlay
-- **register the deck's web components to the dom**
+- **render the deck overlay with sly**
     ```ts
-    deck.registerComponents()
+    import {dom} from "@e280/sly"
+
+    dom.render(
+      dom("#game-ui"),
+      tact.DeckOverlay(deck),
+    )
     ```
 - **place the ui on top of your game canvas**
     ```html
-    <deck-overlay></deck-overlay>
+    <div id="game-ui"></div>
     ```
 
 
@@ -390,25 +397,33 @@ the hub embraces that analogy, helping you coordinate the plugging and unpluggin
 > *mobile ui like virtual thumbsticks and buttons*
 
 ### 📱 nubs setup
-- **register nub components to dom**
+- **render nub views with sly**
     ```ts
-    tact.registerNubs()
-    ```
-- **place nub components onto your html page**
-    ```html
-    <nub-stick></nub-stick>
+    import {dom} from "@e280/sly"
+
+    const stick = new tact.StickDevice()
+
+    dom.render(
+      dom("#controls"),
+      tact.NubStick(stick),
+    )
     ```
 
 ### 📱 nub stick
-- **place a nub-stick onto your page**
+- **place a mount point onto your page**
     ```html
-    <nub-stick></nub-stick>
+    <div id="controls"></div>
     ```
-- **get the stick device, plug it into your hub or whatever**
+- **make the stick device yourself, then plug it into your hub or whatever**
     ```ts
-    const nubStick = document.queryElement<tact.NubStick>("nub-stick")!
+    const stick = new tact.StickDevice()
 
-    deck.hub.plug(nubStick.device)
+    dom.render(
+      dom("#controls"),
+      tact.NubStick(stick),
+    )
+
+    deck.hub.plug(stick)
     ```
 
 
@@ -418,4 +433,3 @@ the hub embraces that analogy, helping you coordinate the plugging and unpluggin
 
 ## 🍋 tact is by https://benevolent.games/
 > *building the future of web games*
-

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@benev/tact",
-	"version": "0.1.1",
+	"version": "0.2.0",
 	"description": "keybindings and gamepad support for web games",
 	"license": "MIT",
 	"author": "Chase Moskal <chasemoskal@gmail.com>",
@@ -16,34 +16,35 @@
 		"s"
 	],
 	"scripts": {
-		"build": "run-s _clean _tsc _ln _scute",
+		"build": "octo-s --npm-run _clean _tsc _ln _scute",
+		"dev": "octo 'scute -vw' 'tsc -w' 'node --watch x/tests.test.js' 'hottie x'",
 		"_clean": "rm -rf x",
 		"_tsc": "tsc",
 		"_scute": "scute -v",
-		"start": "octo 'scute -vw' 'tsc -w' 'node --watch x/tests.test.js' 'http-server x -c-1'",
 		"_ln": "run-s _ln-s _ln-assets",
 		"_ln-s": "ln -s \"$(realpath s)\" x/s",
 		"_ln-assets": "ln -s \"$(realpath assets)\" x/assets",
 		"test": "node x/tests.test.js",
-		"test-debug": "node inspect x/tests.test.js",
 		"count": "find s -path '*/_archive' -prune -o -name '*.ts' -exec wc -l {} +"
 	},
 	"peerDependencies": {
 		"lit": "^3.3.2"
 	},
 	"dependencies": {
-		"@benev/math": "^0.2.0",
-		"@e280/kv": "^0.1.0",
-		"@e280/sly": "^0.2.5",
-		"@e280/strata": "^0.2.8",
-		"@e280/stz": "^0.2.24"
+		"@benev/math": "^0.3.0-5",
+		"@e280/kv": "^0.1.2",
+		"@e280/sly": "^0.3.7",
+		"@e280/strata": "^0.3.3",
+		"@e280/stz": "^0.2.32"
 	},
 	"devDependencies": {
-		"@e280/science": "^0.1.8",
-		"@e280/scute": "^0.1.5",
+		"@e280/hottie": "^0.1.0",
+		"@e280/octo": "^0.1.0",
+		"@e280/science": "^0.1.10",
+		"@e280/scute": "^0.3.2",
 		"http-server": "^14.1.1",
 		"npm-run-all": "^4.1.5",
-		"typescript": "^5.9.3"
+		"typescript": "^6.0.2"
 	},
 	"repository": {
 		"type": "git",

package/s/deck/deck.ts

@@ -1,7 +1,6 @@
 
 import {Kv} from "@e280/kv"
-import {dom} from "@e280/sly"
-import {disposer, ob, range} from "@e280/stz"
+import {disposer, range} from "@e280/stz"
 
 import {Db} from "./parts/db.js"
 import {Hub} from "../core/hub/hub.js"
@@ -13,7 +12,6 @@ import {makeMetaBindings} from "../core/hub/meta-bindings.js"
 import {DeviceSkins} from "./parts/device-skins/device-skin.js"
 import {OverlayVisibility} from "./parts/overlay-visibility.js"
 import {PrimaryDevice} from "../core/devices/standard/primary.js"
-import {deckComponents, DeckViews} from "./components/components.js"
 
 export type DeckOptions<B extends Bindings, MB extends MetaBindings = any> = {
 	kv: Kv
@@ -46,17 +44,6 @@ export class Deck<B extends Bindings, MB extends MetaBindings = any> {
 	primaryDevice = new PrimaryDevice()
 	overlayVisibility: OverlayVisibility
 
-	components = deckComponents(this)
-
-	views = (
-		ob(this.components as any)
-			.map(c => (...a: any[]) => c.view(this, ...a))
-	) as DeckViews
-
-	registerComponents() {
-		dom.register(this.components)
-	}
-
 	constructor(
 			public baseBindings: B,
 			public baseMetaBindings: MB,

package/s/deck/index.ts

@@ -7,8 +7,7 @@ export * from "./parts/local-storage-kv.js"
 export * from "./parts/merge-bindings.js"
 export * from "./parts/overlay-visibility.js"
 
-export * from "./components/deck-overlay/component.js"
-export * from "./components/deck-overlay/style.css.js"
+export * from "./views/overlay/view.js"
 
 export * from "./deck.js"
 

package/s/deck/parts/db.ts

@@ -1,6 +1,6 @@
 
 import {disposer, Hex} from "@e280/stz"
-import {signal, SignalFn} from "@e280/strata"
+import {signal, Signal} from "@e280/strata"
 import {StorageDriver, Store} from "@e280/kv"
 
 import {Bindings} from "../../core/bindings/types.js"
@@ -16,7 +16,7 @@ export class Db {
 
 	constructor(
 			private store: Store<CatalogData>,
-			public $catalog: SignalFn<Catalog>,
+			public $catalog: Signal<Catalog>,
 		) {
 
 		this.dispose.schedule(
@@ -63,4 +63,3 @@ export class Db {
 		})
 	}
 }
-

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

@@ -0,0 +1,95 @@
+
+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/deck/views/overlay/view.ts

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

@@ -22,16 +22,16 @@ export class Renderer {
 
 	/** take a game-state position and resolve it into canvas coordinates */
 	resolve(position: Vec2) {
-		return position.clone()
+		return position.dup()
 
 			// 0-1 relative to arena scale
-			.divide(this.state.arenaSize)
+			.div(this.state.arenaSize)
 
 			// flip y axis
-			.morph(v => {v.y = 1 - v.y})
+			.morph((v: Vec2) => {v.y = 1 - v.y})
 
 			// stretch to the size of the canvas
-			.multiply_(this.canvas.width, this.canvas.height)
+			.mul_(this.canvas.width, this.canvas.height)
 	}
 
 	render() {
@@ -110,4 +110,3 @@ export class Renderer {
 		ctx.fillText(agent.label, x, y)
 	}
 }
-

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

@@ -11,7 +11,7 @@ export class State {
 		agent.label = label
 		agent.position
 			.set_(0.5, 0.5)
-			.multiply(this.arenaSize)
+			.mul(this.arenaSize)
 		this.agents.add(agent)
 		return agent
 	}
@@ -21,4 +21,3 @@ export class State {
 		return this
 	}
 }
-

package/s/demo/main.bundle.ts

@@ -5,9 +5,6 @@ import {DemoTheater} from "./ui/theater/view.js"
 
 const game = await Game.load()
 
-dom.register({
-	DemoTheater: class extends DemoTheater { game = game },
-})
+dom.render(dom("#demo-theater"), DemoTheater(game))
 
 console.log("🎮 tact")
-

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

@@ -33,7 +33,7 @@ export const styles = css`
 		outline: 1px solid red;
 	}
 
-	[deck="overlay"] {
+	[view="deck-overlay"] {
 		position: absolute;
 		top: 10%;
 		left: 0;
@@ -55,4 +55,3 @@ export const styles = css`
 }
 
 `
-

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

@@ -1,60 +1,55 @@
 
 import {html} from "lit"
 import {repeat} from "lit/directives/repeat.js"
-import {BaseElement, cssReset, view} from "@e280/sly"
+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/components/deck-bindings/component.js"
-
-export class DemoTheater extends (
-	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>
-
-			${DeckBindings.view(game.deck)}
-		`
-	})
-	.component(class extends BaseElement { game!: Game })
-	.props(el => [el.game])
-) {}
-
+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/demo/ui/theater/virtual/view.ts

@@ -1,26 +1,25 @@
 
 import {html} from "lit"
-import {cssReset, view} from "@e280/sly"
+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/component.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 = view(use => (
-		hub: Hub<any>,
-		device: VirtualDevice,
-		_deviceSkin: DeviceSkin,
-	) => {
-
-	use.styles(cssReset, styleCss)
-	use.attrs.strings.device = "virtual"
+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.view(device)}
+			${NubStick(device)}
 
 			<button @click="${device.shimmyPrevious}">👈</button>
 			<button @click="${unplug}">💀</button>
@@ -28,4 +27,3 @@ export const VirtualDeviceView = view(use => (
 		</div>
 	`
 })
-