@benev/tact 0.3.0-5 → 0.4.0-1

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

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

@@ -0,0 +1,70 @@
+
+import {ev} from "@e280/stz"
+import {Expression} from "../../../../input/expression.js"
+
+export function captureKeyChord(
+		update: (code: Expression) => void,
+		onDone: () => void,
+	) {
+
+	const held = new Set<string>()
+	const seen = new Set<string>()
+
+	function mod(code: string) {
+		if (code === "ShiftLeft" || code === "ShiftRight") return "shift"
+		if (code === "ControlLeft" || code === "ControlRight") return "ctrl"
+		if (code === "MetaLeft" || code === "MetaRight") return "meta"
+		if (code === "AltLeft" || code === "AltRight") return "alt"
+		return undefined
+	}
+
+	const stop = ev(window, {
+		blur: () => halt(),
+		keydown: (event: KeyboardEvent) => {
+			event.preventDefault()
+
+			if (event.code === "Escape")
+				return halt()
+
+			held.add(event.code)
+			seen.add(event.code)
+		},
+		keyup: (event: KeyboardEvent) => {
+			event.preventDefault()
+
+			held.delete(event.code)
+
+			if (held.size === 0) {
+				const codes = new Set<string>()
+				const mods = new Set<string>()
+
+				for (const code of seen) {
+					const m = mod(code)
+					if (m) mods.add(m)
+					else codes.add(code)
+				}
+
+				if (seen.size === 0)
+					void 0
+				else if (codes.size === 0)
+					update(["*", ...seen])
+				else if (mods.size > 0)
+					update(["*", ["mod", ...mods as any], ...codes])
+				else if (seen.size > 1)
+					update(["*", ...seen])
+				else
+					update([...seen][0]!)
+
+				halt()
+			}
+		},
+	})
+
+	const halt = () => {
+		stop()
+		onDone()
+	}
+
+	return halt
+}
+

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

@@ -0,0 +1,55 @@
+
+import {disposer, ev} from "@e280/stz"
+import {Expression} from "../../../../input/expression.js"
+import {mouseButton} from "../../../../input/utils/mouse-button.js"
+
+export function capturePointerChord(
+		update: (code: Expression) => void,
+		onDone: () => void,
+	) {
+
+	const {dispose, schedule} = disposer()
+	schedule(onDone)
+
+	const held = new Set<string>()
+	const seen = new Set<string>()
+
+	const isControl = (event: MouseEvent) => {
+		return event.composedPath().some(target =>
+			target instanceof Element &&
+			target.matches("button.record")
+		)
+	}
+
+	schedule(ev(window, {
+		blur: () => dispose(),
+		auxclick: (event: MouseEvent) => event.preventDefault(),
+
+		mousedown: (event: MouseEvent) => {
+			if (isControl(event)) return
+			event.preventDefault()
+			const code = mouseButton(event.button)
+			held.add(code)
+			seen.add(code)
+		},
+
+		mouseup: (event: MouseEvent) => {
+			const code = mouseButton(event.button)
+			if (!held.delete(code)) return
+			event.preventDefault()
+
+			if (held.size === 0) {
+				if (seen.size === 1) update([...seen][0]!)
+				else if (seen.size > 1) update(["*", ...seen])
+				dispose()
+			}
+		},
+
+		contextmenu: (event: MouseEvent) => {
+			event.preventDefault()
+		},
+	}))
+
+	return dispose
+}
+

package/s/lib/ui/views/customize/parts/render-bindings.ts

@@ -0,0 +1,67 @@
+
+import {html} from "lit"
+import {Content} from "@e280/sly"
+import {Bindings} from "../../../../input/types.js"
+import {RecorderView} from "../subviews/recorder.js"
+import {ExpressionView} from "../subviews/expression.js"
+import {isExpression} from "../../../../input/investigate/is-expression.js"
+
+export function renderBindings(
+		isReadonly: boolean,
+		bindings: Bindings,
+		original: Bindings,
+		update: (b: Bindings) => void,
+	): Content {
+
+	if (isExpression(bindings))
+		return ExpressionView(isReadonly, bindings, update)
+
+	return Object.entries(bindings).map(([key, child]) => (
+		isExpression(child)
+			? renderExpression(isReadonly, bindings, original as any, update, key)
+			: renderGroup(isReadonly, bindings, original as any, update, key)
+	))
+}
+
+function renderGroup(
+		isReadonly: boolean,
+		bindings: Record<string, Bindings>,
+		original: Record<string, Bindings>,
+		update: (b: Bindings) => void,
+		key: string,
+	) {
+
+	return html`
+		<details class=group open>
+			<summary>${key}</summary>
+			<div class=children>
+				${renderBindings(
+					isReadonly,
+					bindings[key],
+					original[key],
+					fresh => update({...bindings, [key]: fresh}),
+				)}
+			</div>
+		</details>
+	`
+}
+
+function renderExpression(
+		isReadonly: boolean,
+		bindings: Record<string, Bindings>,
+		original: Record<string, Bindings>,
+		update: (b: Bindings) => void,
+		key: string,
+	) {
+
+	const up = (fresh: Bindings) => update({...bindings, [key]: fresh})
+	const reset = () => up(original[key])
+
+	return html`
+		<div class=expression>
+			<strong>${key}</strong>
+			${RecorderView(isReadonly, up, reset, renderBindings(isReadonly, bindings[key], original[key], up))}
+		</div>
+	`
+}
+