@benev/tact 0.4.0-0 → 0.4.0-2

package/s/lib/ui/deck/hub.ts

@@ -0,0 +1,108 @@
+
+import {RMap, RSet} from "@e280/strata"
+import {got, IdCounter} from "@e280/stz"
+
+import {PlayerId} from "./types.js"
+import {Bindings} from "../../input/types.js"
+import {Controller} from "../../input/controller.js"
+import {encodeParcels} from "../../input/data/parcel/encode.js"
+import {encodeIntents} from "../../input/data/intent/encode.js"
+import {hashBindings} from "../../input/investigate/hash-bindings.js"
+
+export class Hub<B extends Bindings = any> {
+	#hash
+	#ids = new IdCounter()
+	#unassigned = new RSet<Controller<B>>()
+	#players = new RMap<PlayerId, {controllers: RSet<Controller<B>>}>()
+
+	constructor(readonly bindings: B) {
+		this.#hash = hashBindings(bindings)
+	}
+
+	get playerIds() {
+		return [...this.#players.keys()]
+	}
+
+	get controllers() {
+		return {
+			unassigned: [...this.#unassigned],
+			assigned: new Map<PlayerId, Controller<B>[]>(
+				[...this.#players]
+					.map(([playerId, port]) => [playerId, [...port.controllers]])
+			),
+		}
+	}
+
+	createPlayer(): PlayerId {
+		const playerId = this.#ids.next()
+		this.#players.set(playerId, {controllers: new RSet()})
+		return playerId
+	}
+
+	deletePlayer(playerId: PlayerId) {
+		this.#players.get(playerId)?.controllers.forEach(c => this.#unassigned.add(c))
+		this.#players.delete(playerId)
+		return this
+	}
+
+	add(controller: Controller<B>) {
+		this.unplug(controller)
+		return this
+	}
+
+	remove(controller: Controller<B>) {
+		this.unplug(controller)
+		this.#unassigned.delete(controller)
+		return this
+	}
+
+	unplug(controller: Controller<B>) {
+		this.#unassigned.add(controller)
+		for (const port of this.#players.values())
+			port.controllers.delete(controller)
+		return this
+	}
+
+	plug(controller: Controller<B>, playerId?: PlayerId) {
+		playerId ??= this.playerIds.at(-1) ?? this.createPlayer()
+		this.unplug(controller)
+		got(this.#players.get(playerId)).controllers.add(controller)
+		this.#unassigned.delete(controller)
+		return this
+	}
+
+	encode(playerId: PlayerId, time = performance.now()) {
+		const intents = new Map<number, number>()
+		const {controllers} = got(this.#players.get(playerId))
+
+		for (const controller of controllers) {
+			for (const intent of controller.evaluate(time)) {
+				const alpha = intents.get(intent.id) ?? 0
+				intents.set(intent.id, alpha + intent.value)
+			}
+		}
+
+		const changedIntents = [...intents]
+			.filter(([, value]) => value !== 0)
+			.map(([id, value]) => ({id, value}))
+
+		return encodeIntents(this.#hash, changedIntents)
+	}
+
+	encodeAll(time = performance.now()) {
+
+		// drain and discard unused controller inputs.
+		for (const controller of this.#unassigned)
+			controller.clear()
+
+		// encode intents.
+		const parcels = Array.from(this.#players.keys()).map(playerId => ({
+			playerId,
+			intents: this.encode(playerId, time),
+		}))
+
+		// encode parcels.
+		return encodeParcels(parcels)
+	}
+}
+

package/s/lib/ui/deck/setup/deck.ts

@@ -0,0 +1,31 @@
+
+import {IdbMagazine, idbOpen, Kv} from "@e280/kv"
+
+import {Hub} from "../hub.js"
+import {asDeck} from "../types.js"
+import {SetupParams} from "./types.js"
+import {Controls} from "../controls/controls.js"
+import {Bindings} from "../../../input/types.js"
+import {firstPreset} from "../utils/first-preset.js"
+
+export async function setupDeck<B extends Bindings>(params: SetupParams<B>) {
+	const kv = params.kv
+		?? new Kv(new IdbMagazine(await idbOpen("tact", "kv")))
+
+	const broadcastChannel = params.broadcastChannel
+		?? new BroadcastChannel("tact")
+
+	const {maxPlayers} = params
+	const {bindings} = firstPreset(params.presets).profile
+
+	const hub = new Hub(bindings)
+	const controls = new Controls({...params, kv})
+
+	await controls.load()
+
+	broadcastChannel.onmessage = () => controls.load()
+	controls.on(() => broadcastChannel.postMessage({}))
+
+	return asDeck({hub, controls, maxPlayers})
+}
+

package/s/lib/ui/deck/setup/tact.ts

@@ -0,0 +1,86 @@
+
+import {register} from "@e280/sly"
+
+import {setupDeck} from "./deck.js"
+import {SetupParams} from "./types.js"
+import {Bindings} from "../../../input/types.js"
+import {autoGamepads} from "../auto-gamepads.js"
+import {ellipsis} from "../../../utils/ellipsis.js"
+import {firstPreset} from "../utils/first-preset.js"
+import {Controller} from "../../../input/controller.js"
+import {Sources} from "../../../input/sources/sources.js"
+import {Visualizer} from "../../views/visualizer/visualizer.js"
+import {PointerSource} from "../../../input/sources/pointer.js"
+import {KeyboardSource} from "../../../input/sources/keyboard.js"
+
+import {makeDeckElement} from "../../views/deck/view.js"
+import {makeCustomizeElement} from "../../views/customize/view.js"
+import {makeVisualizerElement} from "../../views/visualizer/view.js"
+import {makeControllersElement} from "../../views/controllers/view.js"
+
+import devicesSvg from "../../icons/akar/devices.svg.js"
+import gameControllerSvg from "../../icons/akar/game-controller.svg.js"
+
+export async function setupTact<B extends Bindings>(params: SetupParams<B>) {
+	const deck = await setupDeck(params)
+	const visualizer = new Visualizer()
+
+	const elements = {
+		TactDeck: makeDeckElement(deck),
+		TactCustomize: makeCustomizeElement(deck),
+		TactControllers: makeControllersElement(deck),
+		TactVisualizer: makeVisualizerElement(visualizer),
+	}
+
+	function gamepads(defaultProfileKey?: string) {
+		return autoGamepads(deck.hub, (controller, source) => {
+			const handle = `${source.pad.gamepad.id} ${source.pad.gamepad.index + 1}`
+			deck.controls.attach(controller, {
+				icon: gameControllerSvg,
+				handle,
+				tooltip: handle,
+				name: ellipsis(handle, 32),
+				defaultProfileKey: defaultProfileKey ?? firstPreset(deck.controls.presets).key,
+			})
+			return () => deck.controls.detach(controller)
+		})
+	}
+
+	function mouseKeyboard() {
+		const {key, profile} = firstPreset(deck.controls.presets)
+
+		const controller = new Controller({
+			bindings: profile.bindings,
+			source: new Sources(
+				new KeyboardSource(),
+				new PointerSource(),
+			),
+		})
+
+		deck.hub.plug(controller)
+
+		deck.controls.attach(controller, {
+			icon: devicesSvg,
+			handle: "standard",
+			name: "mouse/keyboard",
+			tooltip: "",
+			defaultProfileKey: key,
+		})
+
+		return controller
+	}
+
+	function registerElements() {
+		register(elements)
+	}
+
+	return {
+		deck,
+		gamepads,
+		mouseKeyboard,
+		visualizer,
+		elements,
+		registerElements,
+	}
+}
+

package/s/lib/ui/deck/setup/types.ts

@@ -0,0 +1,12 @@
+
+import {Kv} from "@e280/kv"
+import {Presets} from "../types.js"
+import {Bindings} from "../../../input/types.js"
+
+export type SetupParams<B extends Bindings> = {
+	maxPlayers: number
+	presets: Presets<B>
+	kv?: Kv
+	broadcastChannel?: BroadcastChannel
+}
+

package/s/lib/ui/deck/types.ts

@@ -0,0 +1,26 @@
+
+import {Hub} from "./hub.js"
+import {Bindings} from "../../input/types.js"
+import {Controls} from "./controls/controls.js"
+
+export type PlayerId = number
+
+export type ProfileKey = string
+
+export type Profile<B extends Bindings = any> = {
+	label: string
+	bindings: B
+	basedOn?: string
+}
+
+export type Presets<B extends Bindings> = Record<ProfileKey, Profile<B>>
+
+export type Deck<B extends Bindings = any> = {
+	hub: Hub<B>
+	maxPlayers: number
+	controls: Controls<B>
+}
+
+export const asDeck = <B extends Bindings>(deck: Deck<B>) => deck
+export const asPresets = <B extends Bindings>(presets: Presets<B>) => presets
+

package/s/lib/ui/deck/utils/first-preset.ts

@@ -0,0 +1,9 @@
+
+import {Presets} from "../types.js"
+import {Bindings} from "../../../input/types.js"
+
+export function firstPreset<B extends Bindings>(presets: Presets<B>) {
+	const [key, profile] = Object.entries(presets)[0]
+	return {key, profile}
+}
+

package/s/lib/ui/icons/akar/LICENSE

@@ -0,0 +1,23 @@
+
+MIT License
+
+Copyright (c) 2021 Arturo Wibawa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/s/lib/ui/icons/akar/backspace.svg.ts

@@ -0,0 +1,4 @@
+
+import {svg} from "lit"
+export default svg`<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ai ai-Backspace"><path d="M17 15l-6-6m6 0l-6 6"/><path d="M7.4 4.8A2 2 0 0 1 9 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H9a2 2 0 0 1-1.6-.8l-4.5-6a2 2 0 0 1 0-2.4l4.5-6z"/></svg>`
+

package/s/lib/ui/icons/akar/circle-plus.svg.ts

@@ -0,0 +1,4 @@
+
+import {svg} from "lit"
+export default svg`<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ai ai-CirclePlus"><path d="M12 8v4m0 0v4m0-4h4m-4 0H8"/><circle cx="12" cy="12" r="10"/></svg>`
+

package/s/lib/ui/icons/akar/copy.svg.ts

@@ -0,0 +1,4 @@
+
+import {svg} from "lit"
+export default svg`<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ai ai-Copy"><path d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.242a2 2 0 0 0-.602-1.43L16.083 2.57A2 2 0 0 0 14.685 2H10a2 2 0 0 0-2 2z"/><path d="M16 18v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2"/></svg>`
+

package/s/lib/ui/icons/akar/cross.svg.ts

@@ -0,0 +1,4 @@
+
+import {svg} from "lit"
+export default svg`<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="ai ai-Cross"><path d="M20 20L4 4m16 0L4 20"/></svg>`
+

package/s/lib/ui/icons/akar/devices.svg.ts

@@ -0,0 +1,4 @@
+
+import {svg} from "lit"
+export default svg`<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ai ai-Devices"><path d="M10 15H4V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2"/><path d="M2 18h12"/><path d="M14 9.2c0-.663.597-1.2 1.333-1.2h5.334C21.403 8 22 8.537 22 9.2v9.6c0 .663-.597 1.2-1.333 1.2h-5.334C14.597 20 14 19.463 14 18.8V9.2z"/><path d="M18 17h.01"/></svg>`
+

package/s/lib/ui/icons/akar/drag-vertical-fill.svg.ts

@@ -0,0 +1,4 @@
+
+import {svg} from "lit"
+export default svg`<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="currentColor" stroke-width="2" class="ai ai-DragVerticalFill"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M16 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8 18a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M16 18a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8 10a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"/></svg>`
+

package/s/lib/ui/icons/akar/game-controller.svg.ts

@@ -0,0 +1,4 @@
+
+import {svg} from "lit"
+export default svg`<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ai ai-GameController"><path d="M9 15l-2.968 2.968A2.362 2.362 0 0 1 2 16.298V15l1.357-6.784A4 4 0 0 1 7.279 5h9.442a4 4 0 0 1 3.922 3.216L22 15v1.297a2.362 2.362 0 0 1-4.032 1.67L15 15H9z"/><path d="M9 5l1 2h4l1-2"/></svg>`
+

package/s/lib/ui/icons/akar/key-cap.svg.ts

@@ -0,0 +1,4 @@
+
+import {svg} from "lit"
+export default svg`<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ai ai-KeyCap"><path d="M7 3s3 .5 5 .5 5-.5 5-.5l1 9s-3 1-6 1-6-1-6-1l1-9z"/><path d="M3.869 8.147l-.862 10.294c-.03.366.04.733.205 1.06l.197.393A2.01 2.01 0 0 0 5.206 21h13.588a2.01 2.01 0 0 0 1.797-1.106l.197-.392c.165-.328.236-.695.205-1.06l-.862-10.295a3.99 3.99 0 0 0-.79-2.068L17 3s-3 .5-5 .5S6.978 3 6.978 3l-2.32 3.08a3.99 3.99 0 0 0-.79 2.067z"/><path d="M6 12l-2.5 8M18 12l2.5 8"/></svg>`
+

package/s/lib/ui/icons/akar/people-group.svg.ts

@@ -0,0 +1,4 @@
+
+import {svg} from "lit"
+export default svg`<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ai ai-PeopleGroup"><path d="M16.719 19.752l-.64-5.124A3 3 0 0 0 13.101 12h-2.204a3 3 0 0 0-2.976 2.628l-.641 5.124A2 2 0 0 0 9.266 22h5.468a2 2 0 0 0 1.985-2.248z"/><circle cx="12" cy="5" r="3"/><circle cx="4" cy="9" r="2"/><circle cx="20" cy="9" r="2"/><path d="M4 14h-.306a2 2 0 0 0-1.973 1.671l-.333 2A2 2 0 0 0 3.361 20H7"/><path d="M20 14h.306a2 2 0 0 1 1.973 1.671l.333 2A2 2 0 0 1 20.639 20H17"/></svg>`
+

package/s/lib/ui/icons/akar/person-add.svg.ts

@@ -0,0 +1,4 @@
+
+import {svg} from "lit"
+export default svg`<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ai ai-PersonAdd"><circle cx="12" cy="7" r="5"/><path d="M17 22H5.266a2 2 0 0 1-1.985-2.248l.39-3.124A3 3 0 0 1 6.649 14H7"/><path d="M19 14v4"/><path d="M17 16h4"/></svg>`
+

package/s/lib/ui/icons/akar/settings-horizontal.svg.ts

@@ -0,0 +1,4 @@
+
+import {svg} from "lit"
+export default svg`<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ai ai-SettingsHorizontal"><path d="M3 5h4m14 0H11m-8 7h12m6 0h-2M3 19h2m16 0H9"/><circle cx="9" cy="5" r="2"/><circle cx="17" cy="12" r="2"/><circle cx="7" cy="19" r="2"/></svg>`
+

package/s/lib/ui/icons/akar/trash-can.svg.ts

@@ -0,0 +1,4 @@
+
+import {svg} from "lit"
+export default svg`<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ai ai-TrashCan"><path d="M4 6h16l-1.58 14.22A2 2 0 0 1 16.432 22H7.568a2 2 0 0 1-1.988-1.78L4 6z"/><path d="M7.345 3.147A2 2 0 0 1 9.154 2h5.692a2 2 0 0 1 1.81 1.147L18 6H6l1.345-2.853z"/><path d="M2 6h20"/><path d="M10 11v5"/><path d="M14 11v5"/></svg>`
+

package/s/lib/ui/icons/akar/x-small.svg.ts

@@ -0,0 +1,4 @@
+
+import {svg} from "lit"
+export default svg`<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ai ai-XSmall"><path d="M17 17L7 7m10 0L7 17"/></svg>`
+

package/s/lib/ui/views/controllers/style.css.ts

@@ -0,0 +1,158 @@
+
+import {css} from "lit"
+export default css`@layer view {
+
+.plate {
+	user-select: none;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--pad);
+}
+
+[data-drag-and-drop] {
+	.player[data-drop-candidate] {
+		outline: 2px dashed color-mix(in oklch, transparent, var(--droppy) 80%);
+		background: color-mix(in oklch, var(--slate), var(--droppy) 20%);
+
+		&[data-dropping] {
+			outline: 2px solid var(--droppy);
+			background: color-mix(in oklch, var(--slate), var(--droppy) 50%);
+		}
+	}
+}
+
+.playerlist {
+	display: grid;
+	grid-template-columns: repeat(
+		auto-fit,
+		minmax(min(100%, 20em), 1fr)
+	);
+
+	width: min(100%, calc(48em + var(--pad)));
+	gap: var(--pad);
+
+	> * {
+		min-width: 0;
+		min-height: 7em;
+	}
+}
+
+.player {
+	display: flex;
+	flex-direction: column;
+
+	&.new {
+		justify-content: center;
+		align-items: center;
+		padding: var(--pad);
+
+		border-style: dashed;
+		border-width: 2px;
+		border-color: oklch(from var(--text) l c h / 30%);
+		background: transparent;
+		box-shadow: none;
+
+		button {
+			display: flex;
+			flex-direction: column;
+			svg {
+				width: 2.5em;
+				height: 2.5em;
+			}
+		}
+	}
+
+	h3 {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		padding: var(--nib) var(--pad);
+	}
+
+	.controllerlist {
+		display: flex;
+		flex: 1 1 auto;
+		flex-direction: column;
+		gap: var(--pad);
+		padding: var(--pad);
+	}
+
+	.controller {
+		--tint: oklch(0.7 0.3 var(--hue, 0));
+		background: color-mix(in oklch, transparent, var(--bg) 50%);
+		border: 2px solid var(--shimmer);
+		box-shadow:
+			inset 0 0 2em color-mix(in oklch, transparent, var(--shimmer)),
+			var(--box-shadow);
+
+		&:hover {
+			background: color-mix(in oklch, transparent, var(--bg) 70%);
+			filter: brightness(120%);
+		}
+
+		[view="profile-select"]::part(select) {
+			--base: oklch(from var(--tint) l c h / 50%);
+		}
+	}
+
+	.controller {
+		cursor: grab;
+		display: flex;
+		align-items: center;
+
+		gap: var(--pad);
+		padding: var(--nib);
+
+		border-radius: 0.5em;
+		overflow: clip;
+
+		.griptape {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			width: 1.5em;
+			flex: 0 0 auto;
+
+			svg {
+				opacity: 0.5;
+			}
+		}
+
+		.label {
+			display: flex;
+			align-items: center;
+			gap: var(--pad);
+			min-width: 0;
+
+			flex: 1 1 auto;
+			font-size: 1em;
+			font-weight: normal;
+
+			.icon {
+				display: flex;
+				flex: 0 0 auto;
+				svg {
+					width: 2em;
+					height: 2em;
+				}
+			}
+
+			.name {
+				min-width: 0;
+				line-height: 1.1;
+				font-size: 0.7em;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+		}
+
+		select {
+			padding: var(--nib) var(--pad);
+		}
+	}
+}
+
+}`
+

package/s/lib/ui/views/controllers/subviews/controller.ts

@@ -0,0 +1,53 @@
+
+import {html} from "lit"
+import {lightView} from "@e280/sly"
+
+import gameControllerSvg from "../../../icons/akar/game-controller.svg.js"
+import dragVerticalFillSvg from "../../../icons/akar/drag-vertical-fill.svg.js"
+
+import {Context} from "../../deck/types.js"
+import {hueify} from "../../../../utils/hueify.js"
+import {Controller} from "../../../../input/controller.js"
+import {ProfileSelectView} from "../../profile-select/view.js"
+
+export const ControllerView = lightView((context: Context, controller: Controller) => {
+	const {deck, dnd} = context
+	const {controls} = deck
+	const dragzone = dnd.dragzone(() => ({controller}))
+	const currentProfileKey = controls.assignments.assignedProfileKeyOf(controller)
+	const meta = controls.meta(controller) ?? {
+		id: 0,
+		icon: gameControllerSvg,
+		handle: "controller",
+		name: "controller",
+		tooltip: "",
+		defaultProfileKey: controls.fallbackProfileKey,
+	}
+
+	const style = `--hue: ${hueify(meta?.id ?? 0)};`
+
+	return html`
+		<div class=controller
+			style="${style}"
+			theme-card
+			?data-dragging="${dnd.dragging?.controller === controller}"
+			draggable="${dragzone.draggable}"
+			@dragstart="${dragzone.dragstart}"
+			@dragend="${dragzone.dragend}">
+
+			<div class=griptape>
+				${dragVerticalFillSvg}
+			</div>
+
+			<h4 class=label title="${meta.tooltip}">
+				<span class=icon>${meta.icon}</span>
+				<span class=name>${meta.name}</span>
+			</h4>
+
+			${ProfileSelectView(deck, currentProfileKey, key => {
+				controls.assignments.assign(controller, key)
+			})}
+		</div>
+	`
+})
+

package/s/lib/ui/views/controllers/subviews/dropcard.ts

@@ -0,0 +1,31 @@
+
+import {html} from "lit"
+import {Content, lightView} from "@e280/sly"
+import {Context, DroppyPort} from "../../deck/types.js"
+
+export const DropcardView = lightView((o: {
+		class: string
+		themeCard?: string
+		context: Context
+		playerId: DroppyPort["playerId"]
+		content: Content
+	}) => {
+
+	const {dnd} = o.context
+	const dropzone = dnd.dropzone(() => ({playerId: o.playerId}))
+
+	return html`
+		<div class="${o.class}"
+			theme-card="${o.themeCard ?? ""}"
+			data-drop-candidate
+			?data-dropping="${dnd.hovering?.playerId === o.playerId}"
+			@dragenter="${dropzone.dragenter}"
+			@dragleave="${dropzone.dragleave}"
+			@dragover="${dropzone.dragover}"
+			@drop="${dropzone.drop}">
+
+			${o.content}
+		</div>
+	`
+})
+

package/s/lib/ui/views/controllers/subviews/player.ts

@@ -0,0 +1,38 @@
+
+import {html} from "lit"
+import {when} from "@e280/stz"
+import {lightView} from "@e280/sly"
+
+import xSmallSvg from "../../../icons/akar/x-small.svg.js"
+
+import {DropcardView} from "./dropcard.js"
+import {Context} from "../../deck/types.js"
+import {ControllerView} from "./controller.js"
+
+export const PlayerView = lightView((context: Context, playerId: number, index: number) => {
+	const {hub} = context.deck
+	const deletePlayer = () => hub.deletePlayer(playerId)
+	const controllers = hub.controllers.assigned.get(playerId) ?? []
+
+	return DropcardView({
+		class: "player",
+		playerId: playerId,
+		context,
+		content: html`
+			<h3>
+				<span>player ${index + 1}</span>
+
+				${when(hub.playerIds.length > 1, () => html`
+					<button theme-button="naked angry" @click=${deletePlayer}>
+						${xSmallSvg}
+					</button>
+				`)}
+			</h3>
+
+			<div class=controllerlist>
+				${controllers.map(c => ControllerView(context, c))}
+			</div>
+		`,
+	})
+})
+