@benev/tact 0.4.0-0 → 0.4.0-1

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 {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"
+import { ellipsis } from "../../../utils/ellipsis.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>
+		`,
+	})
+})
+

package/s/lib/ui/views/controllers/view.ts

@@ -0,0 +1,72 @@
+
+import {html} from "lit"
+import {isHappy, when} from "@e280/stz"
+import {loot, shadowDuplex, useCss, useOnce} from "@e280/sly"
+
+import styleCss from "./style.css.js"
+import themeCss from "../theme.css.js"
+import personAddSvg from "../../icons/akar/person-add.svg.js"
+
+import {Deck} from "../../deck/types.js"
+import {PlayerView} from "./subviews/player.js"
+import {DropcardView} from "./subviews/dropcard.js"
+import {ControllerView} from "./subviews/controller.js"
+import {Context, droppyNewPlayer} from "../deck/types.js"
+
+export const [ControllersView, makeControllersElement] = shadowDuplex((deck: Deck) => {
+	useCss(themeCss, styleCss)
+
+	const {hub} = deck
+	const controllers = hub.controllers
+	const clickCreatePlayer = () => deck.hub.createPlayer()
+	const renderPlayer = (p: number, i: number) => PlayerView(context, p, i)
+
+	const context: Context = useOnce(() => ({
+		deck,
+		dnd: new loot.DragAndDrops({
+			acceptDrop(_event, draggy, droppy) {
+				if (droppy.playerId === droppyNewPlayer)
+					hub.plug(draggy.controller, hub.createPlayer())
+				else if (isHappy(droppy.playerId))
+					hub.plug(draggy.controller, droppy.playerId)
+				else
+					hub.unplug(draggy.controller)
+			},
+		}),
+	}))
+
+	return html`
+		<div class=plate ?data-drag-and-drop="${!!context.dnd.dragging}">
+			<div class=playerlist>
+				${hub.playerIds.map(renderPlayer)}
+
+				${when(hub.playerIds.length < deck.maxPlayers, () => DropcardView({
+					class: "player new",
+					themeCard: "dull",
+					playerId: droppyNewPlayer,
+					context,
+					content: html`
+						<button theme-button=naked @click="${clickCreatePlayer}">
+							${personAddSvg}
+							<span>add player</span>
+						</button>
+					`,
+				}))}
+
+				${DropcardView({
+					class: "player unassigned",
+					themeCard: "dull",
+					playerId: null,
+					context,
+					content: html`
+						<h3>unassigned</h3>
+						<div class=controllerlist>
+							${controllers.unassigned.map(c => ControllerView(context, c))}
+						</div>
+					`,
+				})}
+			</div>
+		</div>
+	`
+})
+

package/s/lib/ui/views/customize/parts/capture-gamepad-chord.ts

@@ -0,0 +1,59 @@
+
+import {cycle, disposer, ev, nap} from "@e280/stz"
+import {Expression} from "../../../../input/expression.js"
+import {onPad} from "../../../../input/utils/pad/on-pad.js"
+import {GamepadSource} from "../../../../input/sources/gamepad.js"
+
+export function captureGamepadChord(
+		update: (code: Expression) => void,
+		onDone: () => void,
+	) {
+
+	const {dispose, schedule} = disposer()
+	schedule(onDone)
+
+	const sourceSet = new Set<GamepadSource>()
+	const held = new Set<string>()
+	const seen = new Set<string>()
+
+	schedule(ev(window, {blur: () => dispose()}))
+
+	schedule(onPad(pad => {
+		const source = new GamepadSource(pad)
+		sourceSet.add(source)
+
+		source.onSample(sample => {
+			if (sample.code === "gamepad.any")
+				return undefined
+
+			if (sample.value > 0.9) {
+				held.add(sample.code)
+				seen.add(sample.code)
+			}
+			else {
+				if (!held.delete(sample.code))
+					return
+				if (held.size === 0) {
+					if (seen.size === 1) update([...seen][0])
+					else if (seen.size > 1) update(["*", ...seen])
+					dispose()
+				}
+			}
+		})
+
+		return () => {
+			source.dispose()
+			sourceSet.delete(source)
+		}
+	}))
+
+	schedule(cycle(async() => {
+		for (const source of sourceSet) {
+			source.poll()
+		}
+		await nap(16.67)
+	}))
+
+	return dispose
+}
+