@benev/tact 0.4.0-0 → 0.4.0-10

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

@@ -0,0 +1,144 @@
+
+import {css} from "lit"
+export default css`@layer view {
+
+[part="plate"] {
+	display: flex;
+	flex-direction: column;
+}
+
+.topbar {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	padding: var(--pad) var(--space);
+
+	[view="profile-select"] {
+		font-size: 1.2em;
+	}
+
+	.corner {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--pad);
+
+		small {
+			user-select: none;
+			opacity: 0.5;
+			font-style: italic;
+			border: 1px solid;
+			border-radius: var(--round);
+			padding: var(--nib) var(--pad);
+		}
+	}
+
+	.tools {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--pad);
+		flex: 1 1 auto;
+		justify-content: end;
+
+		input[type="text"] {
+			width: 12em;
+		}
+	}
+}
+
+.bindings, .group {
+	display: flex;
+	flex-direction: column;
+	gap: var(--nib);
+}
+
+.bindings {
+	user-select: none;
+	cursor: default;
+	padding: var(--space);
+
+	summary {
+		color: var(--prime);
+		width: max-content;
+		font-weight: bold;
+		font-size: 1.2em;
+		&:is(:hover, :focus-visible) { filter: brightness(120%); }
+		&:active { filter: brightness(90%); }
+	}
+
+	.expression {
+		display: flex;
+		align-items: end;
+		margin-left: 0.5em;
+		border-bottom: 1px dashed oklch(from var(--prime) l c h / 30%);
+		flex-wrap: wrap;
+		gap: 0 var(--pad);
+		padding: var(--nib);
+
+		min-height: 3em;
+
+		&:last-of-type {
+			margin-bottom: calc(var(--space) * 2);
+		}
+
+		> strong {
+			font-weight: normal;
+		}
+
+		> div {
+			margin-left: auto;
+
+			input {
+				font: inherit;
+				color: inherit;
+				width: 8em;
+
+				&[type="number"] {
+					width: 5em;
+				}
+			}
+		}
+
+		div {
+			display: flex;
+			flex-wrap: wrap;
+			align-items: stretch;
+			gap: var(--nib);
+		}
+
+		.bracket {
+			align-items: center;
+			gap: var(--nib);
+			padding: 2px var(--nib);
+			background: color-mix(in oklch, #aaa2, var(--slate) 80%);
+			box-shadow: 0.1em 0.2em 0.5em #0002;
+			border: 1px solid #fff4;
+			border-radius: 0.2em;
+
+			&.mod {
+				gap: var(--nib);
+			}
+		}
+	}
+
+	.children {
+		display: flex;
+		flex-direction: column;
+
+		margin-left: 0.3em;
+		padding-left: 0.5em;
+		border-left: 1px solid oklch(from var(--prime) l c h / 20%);
+	}
+
+	.expression .recorder {
+		display: flex;
+		gap: var(--pad);
+
+		&[data-recording] {
+			color: var(--recording);
+		}
+	}
+}
+
+}`
+

package/s/lib/ui/views/customize/subviews/expression.ts

@@ -0,0 +1,88 @@
+
+import {html} from "lit"
+import {Content, lightView} from "@e280/sly"
+import {isArray, isHappy, isNumber, isString} from "@e280/stz"
+
+import {Expression} from "../../../../input/expression.js"
+import xSmallSvg from "../../../icons/akar/x-small.svg.js"
+
+export const ExpressionView = lightView((
+		isReadonly: boolean,
+		expression: Expression,
+		update: (expression: Expression) => void,
+	): Content => {
+
+	if (!isHappy(expression))
+		return html`
+			<div class=null>unset</div>
+		`
+
+	if (isNumber(expression))
+		return html`
+			<div class=number>
+				<input
+					type=number
+					step=any
+					theme-input
+					.value="${expression}"
+					?readonly="${isReadonly}"
+					@change="${(event: Event) => {
+						const input = event.currentTarget as HTMLInputElement
+						const value = input.valueAsNumber
+						if (Number.isFinite(value))
+							update(value)
+					}}"
+					/>
+			</div>
+		`
+
+	if (isString(expression))
+		return html`
+			<input
+				type=text
+				theme-input
+				.value="${expression}"
+				?readonly="${isReadonly}"
+				@change="${(event: Event) => {
+				const input = event.currentTarget as HTMLInputElement
+				const value = input.value
+				update(value)
+			}}"/>
+		`
+
+	if (isArray(expression))
+		return (expression[0] === "mod") ? html`
+			<div class="bracket mod">
+				${expression.slice(1).length === 0
+					? "unmodified"
+					: expression.slice(1).join("+")}
+
+				${!isReadonly && expression.slice(1).length > 0
+					? html`
+						<button
+							theme-button=naked
+							@click="${() => update([expression[0]])}">
+							${xSmallSvg}
+						</button>
+					`
+					: null}
+			</div>
+		` : html`
+			<div class=bracket>
+				${expression[0] === "*" ? null : html`
+					<strong>${expression[0]}</strong>
+				`}
+				${expression.slice(1).map((e, i) => {
+					return ExpressionView(isReadonly, e ?? null, fresh => {
+						const clone = structuredClone(expression) as any
+						clone[i + 1] = fresh
+						update(clone)
+					})
+				})}
+			</div>
+		`
+
+	else
+		throw new Error("unknown expression")
+})
+

package/s/lib/ui/views/customize/subviews/recorder.ts

@@ -0,0 +1,76 @@
+
+import {html} from "lit"
+import {disposer} from "@e280/stz"
+import {Content, lightView, useSignal, useUnmount} from "@e280/sly"
+
+import keyCapSvg from "../../../icons/akar/key-cap.svg.js"
+import backspaceSvg from "../../../icons/akar/backspace.svg.js"
+
+import crossSvg from "../../../icons/akar/cross.svg.js"
+import {Expression} from "../../../../input/expression.js"
+import {captureKeyChord} from "../parts/capture-key-chord.js"
+import {captureGamepadChord} from "../parts/capture-gamepad-chord.js"
+import {capturePointerChord} from "../parts/capture-pointer-chord.js"
+
+export const RecorderView = lightView((
+		isReadonly: boolean,
+		update: (e: Expression) => void,
+		reset: () => void,
+		content: Content,
+	) => {
+
+	const $recording = useSignal<null | (() => void)>(null)
+
+	const removeRecording = () => $recording(null)
+
+	const startRecording = () => {
+		const {dispose, schedule} = disposer()
+		schedule(removeRecording)
+		schedule(captureKeyChord(update, dispose))
+		schedule(captureGamepadChord(update, dispose))
+		schedule(capturePointerChord(update, dispose))
+		$recording(dispose)
+	}
+
+	const haltRecording = () => {
+		$recording()?.()
+		removeRecording()
+	}
+
+	function toggleRecording() {
+		if ($recording()) haltRecording()
+		else startRecording()
+	}
+
+	function haltAndReset() {
+		haltRecording()
+		reset()
+	}
+
+	useUnmount(haltRecording)
+
+	return html`
+		<div class=recorder ?data-recording="${!!$recording()}">
+			${content}
+			${isReadonly ? null : html`
+				<button
+					class=record
+					theme-button=naked
+					title="record a keypress"
+					@click=${toggleRecording}>
+					${$recording()
+						? crossSvg
+						: keyCapSvg}
+				</button>
+
+				<button
+					theme-button=naked
+					title="reset to default"
+					@click=${haltAndReset}>
+					${backspaceSvg}
+				</button>
+			`}
+		</div>
+	`
+})
+

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

@@ -0,0 +1,105 @@
+
+import {html} from "lit"
+import {given, when} from "@e280/stz"
+import {shadowDuplex, useCss, useName, useSignal} from "@e280/sly"
+
+import styleCss from "./style.css.js"
+import themeCss from "../theme.css.js"
+
+import copySvg from "../../icons/akar/copy.svg.js"
+import trashCanSvg from "../../icons/akar/trash-can.svg.js"
+
+import {Bindings} from "../../../input/types.js"
+import {makeId} from "../../../utils/make-id.js"
+import {Controls} from "../../deck/controls/controls.js"
+import {renderBindings} from "./parts/render-bindings.js"
+import {ProfileSelectView} from "../profile-select/view.js"
+
+export const [CustomizeView, makeCustomizeElement] = shadowDuplex((options: {controls: Controls}) => {
+	useName("tact-customize")
+	useCss(themeCss, styleCss)
+	const {controls, controls: {profiles}} = options
+	const $profileKey = useSignal(controls.fallbackProfileKey)
+
+	const profile = profiles.get($profileKey())
+	const isReadonly = profiles.isPreset($profileKey())
+
+	const baseline = profile.basedOn
+		? profiles.get(profile.basedOn)
+		: profile
+
+	const updateBindings = async(bindings: Bindings) => {
+		let key = $profileKey()
+
+		if (profiles.isPreset(key)) {
+			const basedOn = key
+			const freshKey = makeId()
+			key = freshKey
+			await profiles.clone(freshKey, basedOn)
+		}
+
+		await profiles.update(key, {bindings})
+		$profileKey(key)
+	}
+
+	const updateLabel = (profileKey: string, label: string) =>
+		profiles.update(profileKey, {label})
+
+	const clone = () => {
+		const key = makeId()
+		profiles.clone(key, $profileKey())
+		$profileKey.set(key)
+	}
+
+	const destroy = () => {
+		profiles.delete($profileKey())
+		$profileKey(controls.fallbackProfileKey)
+	}
+
+	return html`
+		<div part=plate>
+			<header class=topbar>
+				<div class=corner>
+					${ProfileSelectView(options, $profileKey(), $profileKey)}
+
+					<button title="copy this profile" theme-button=naked @click="${clone}">
+						${copySvg}
+					</button>
+
+					${isReadonly ? null : html`
+						<button title="delete this profile" theme-button=naked @click="${destroy}">
+							${trashCanSvg}
+						</button>
+					`}
+
+					${when(isReadonly, () => html`<small>readonly</small>`)}
+					${given(profile.basedOn, basedOn => html`<small>based on ${profiles.get(basedOn).label}</small>`)}
+				</div>
+
+				<div class=tools>
+					${isReadonly ? null : html`
+						<input
+							type=text
+							theme-input
+							.value="${profile.label}"
+							@change="${(event: Event) => {
+								const input = event.currentTarget as HTMLInputElement
+								updateLabel($profileKey(), input.value)
+							}}"
+							/>
+					`}
+				</div>
+			</header>
+
+			<div class=bindings>
+				${renderBindings(
+					false,
+					profile.bindings,
+					baseline.bindings,
+					updateBindings,
+				)}
+			</div>
+		</div>
+	`
+})
+

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

@@ -0,0 +1,69 @@
+
+import {css} from "lit"
+export default css`@layer view {
+
+:host {
+	display: block;
+	width: min(50em, 100%);
+
+	color: var(--text);
+	text-shadow: var(--text-shadow);
+}
+
+[part="plate"] {
+	padding: var(--pad);
+	--tint: oklch(from var(--prime) l c h / 50%);
+}
+
+[view="shiny-tabs"] {
+	--prime: inherit;
+
+	--tint: var(--prime);
+	--slate: color-mix(in oklch,
+		transparent,
+		color-mix(in oklch, var(--bg), var(--tint) 25%) 25%
+	);
+	--shimmer: color-mix(in oklch, transparent, var(--tint));
+
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	&::part(tabs) {
+		display: flex;
+		width: max-content;
+		justify-content: center;
+		padding: var(--nib);
+
+		background: var(--slate);
+		border: 1px solid var(--shimmer);
+		border-radius: var(--round);
+	}
+
+	&::part(panels) {
+		display: block;
+		width: 100%;
+		margin-top: var(--pad);
+	}
+
+	button {
+		border: none;
+		background: transparent;
+		border-radius: var(--round);
+		border: 2px solid transparent;
+		text-shadow: var(--text-shadow);
+
+		&[data-tabbed] {
+			text-decoration: none;
+			color: var(--prime);
+			border-color: var(--prime);
+			background: color-mix(in oklch, var(--bg), var(--prime) 30%);
+			box-shadow:
+				inset 0 0 1.5em oklch(from var(--shimmer) l c h / 50%),
+				0 0 2em oklch(from var(--shimmer) l c h / 50%);
+		}
+	}
+}
+
+}`
+

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

@@ -0,0 +1,15 @@
+
+import {loot} from "@e280/sly"
+import {Deck, PlayerId} from "../../deck/types.js"
+import {Controller} from "../../../input/controller.js"
+
+export const droppyNewPlayer = Symbol("droppyNewPlayer")
+
+export type DraggyController = {controller: Controller}
+export type DroppyPort = {playerId: PlayerId | null | typeof droppyNewPlayer}
+
+export type Context = {
+	deck: Deck
+	dnd: loot.DragAndDrops<DraggyController, DroppyPort>
+}
+

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

@@ -0,0 +1,55 @@
+
+import {html} from "lit"
+import {ShinyTabs, TabsControl} from "@e280/shiny"
+import {shadowDuplex, useCss, useName, useOnce} from "@e280/sly"
+
+import styleCss from "./style.css.js"
+import themeCss from "../theme.css.js"
+import gameControllerSvg from "../../icons/akar/game-controller.svg.js"
+import settingsHorizontalSvg from "../../icons/akar/settings-horizontal.svg.js"
+
+import {Deck} from "../../deck/types.js"
+import {CustomizeView} from "../customize/view.js"
+import {ControllersView} from "../controllers/view.js"
+
+export const [DeckView, makeDeckElement] = shadowDuplex((deck: Deck) => {
+	useName("tact-deck")
+	useCss(themeCss, styleCss)
+	const tabsControl = useOnce(() => new TabsControl())
+
+	// TODO remove this
+	useOnce(() => {
+		if (window.location.hash.includes("bindings"))
+			tabsControl.setIndex(1)
+	})
+
+	return html`
+		<div part=plate theme-card>
+			${ShinyTabs.with({
+				props: [{control: tabsControl}],
+				children: html`
+					<button theme-button>
+						${gameControllerSvg}
+						<span>controllers</span>
+					</button>
+
+					<button theme-button>
+						${settingsHorizontalSvg}
+						<span>customize</span>
+					</button>
+
+					${ControllersView.with({
+						props: [deck],
+						attrs: {slot: "panel"},
+					})}
+
+					${CustomizeView.with({
+						props: [deck],
+						attrs: {slot: "panel"},
+					})}
+				`,
+			})}
+		</div>
+	`
+})
+

package/s/lib/ui/views/profile-select/view.ts

@@ -0,0 +1,44 @@
+
+import {html} from "lit"
+import {lightView} from "@e280/sly"
+import {Controls} from "../../deck/controls/controls.js"
+
+export const ProfileSelectView = lightView((
+		deck: {controls: Controls},
+		currentProfileKey: string,
+		onChange: (key: string) => void,
+	) => {
+
+	const {profiles} = deck.controls
+
+	function handleChange(event: Event) {
+		const select = event.currentTarget as HTMLSelectElement
+		onChange(select.value)
+	}
+
+	return html`
+		<select
+			part=select
+			theme-select
+			.value="${currentProfileKey}"
+			@change="${handleChange}">
+
+			${profiles.presets.map(([key, profile]) => html`
+				<option
+					value="${key}"
+					?selected="${key === currentProfileKey}">
+					${profile.label}
+				</option>
+			`)}
+
+			${profiles.customs.map(([key, profile]) => html`
+				<option
+					value="${key}"
+					?selected="${key === currentProfileKey}">
+					${profile.label}
+				</option>
+			`)}
+		</select>
+	`
+})
+

package/s/lib/ui/views/theme.css.ts

@@ -0,0 +1,115 @@
+
+import {css} from "lit"
+import {cssReset} from "@e280/sly"
+
+export default css`
+@layer theme, view;
+@layer theme {
+
+${cssReset}
+
+:host {
+	--prime: var(--tact-prime, #fb0);
+
+	--text: var(--tact-text, #fffc);
+	--bg: var(--tact-bg, oklch(from var(--prime) calc(l * 0.3) calc(c * 0.1) h));
+	--droppy: var(--tact-droppy, oklch(from var(--prime) l c calc(h + 100)));
+	--recording: var(--tact-recording, oklch(from var(--prime) l c calc(h + 100)));
+
+	--round: var(--tact-round, 0.5em);
+	--pad: var(--tact-pad, 0.5em);
+	--nib: var(--tact-nib, 0.2em);
+	--space: var(--tact-space, 1em);
+	--box-shadow: var(--tact-box-shadow, 0.1em 0.2em 1em #0006);
+	--text-shadow: var(--tact-text-shadow, 0.02em 0.04em 0.1em #000a);
+}
+
+[theme-card] {
+	--tint: var(--prime);
+	--slate: color-mix(in oklch,
+		transparent,
+		color-mix(in oklch, var(--bg), var(--tint) 25%) 25%
+	);
+	--shimmer: color-mix(in oklch, transparent, var(--tint));
+
+	border-radius: var(--round);
+	background: var(--slate);
+	border: 1px solid var(--shimmer);
+	box-shadow:
+		inset 0 0 3em color-mix(in oklch, transparent, var(--shimmer) 30%),
+		var(--box-shadow);
+
+	&[theme-card="dull"] {
+		--tint: #8888;
+	}
+}
+
+[theme-button] {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font: inherit;
+	color: inherit;
+
+	cursor: pointer;
+	user-select: none;
+
+	opacity: 0.8;
+	gap: 0.5em;
+	padding: 0.5em;
+
+	&:is(:hover, :focus-visible) { opacity: 1; }
+	&:active { opacity: 0.8; }
+
+	svg {
+		width: 1.2em;
+		height: 1.2em;
+	}
+
+	&[theme-button~="naked"] {
+		padding: 0;
+		border: none;
+		background: transparent;
+		color: currentColor;
+	}
+
+	&[theme-button~="angry"] {
+		&:is(:hover, :focus-visible) { color: red; }
+	}
+}
+
+[theme-select] {
+	--base: var(--tint, var(--prime));
+	font: inherit;
+	color: inherit;
+	background: var(--bg);
+	border: 1px solid var(--base);
+	border-radius: var(--round);
+	padding: var(--nib) var(--pad);
+	box-shadow: inset 0 0 1em oklch(from var(--base) l c h / 40%);
+
+	&:is(:hover, :focus-visible) {
+		filter: brightness(110%);
+		box-shadow: inset 0 0 1em oklch(from var(--base) l c h / 60%);
+	}
+
+	&:active {
+		filter: brightness(90%);
+		box-shadow: inset 0 0 1em oklch(from var(--base) l c h / 40%);
+	}
+}
+
+[theme-input] {
+	--base: var(--tint, var(--prime));
+	--chill: oklch(from var(--base) l c h / 50%);
+	font: inherit;
+	color: inherit;
+	background: transparent;
+	border: 1px solid var(--chill);
+	border-radius: var(--round);
+	padding: 0 var(--nib);
+	box-shadow: inset 0 0 1em oklch(from var(--chill) l c h / 20%);
+}
+
+}`
+