@benev/tact 0.4.0-0 → 0.4.0-1

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

@@ -0,0 +1,49 @@
+
+import {html} from "lit"
+import {ShinyTabs, TabsControl} from "@e280/shiny"
+import {shadowDuplex, useCss, 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 {ControllersView} from "../controllers/view.js"
+import {CustomizeView} from "../customize/view.js"
+
+export const [DeckView, makeDeckElement] = shadowDuplex((deck: Deck) => {
+	useCss(themeCss, styleCss)
+
+	const attrs = {slot: "panel"}
+	const tabsControl = useOnce(() => new TabsControl())
+
+	// TODO remove this
+	useOnce(() => {
+		if (window.location.hash.includes("bindings"))
+			tabsControl.setIndex(1)
+	})
+
+	return html`
+		<div class=deck 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({attrs, props: [deck]})}
+					${CustomizeView.with({attrs, props: [deck]})}
+				`,
+			})}
+		</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: transparent;
+	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%);
+}
+
+}`
+

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

@@ -0,0 +1,23 @@
+
+import {css} from "lit"
+export default css`@layer view {
+
+:host {
+	display: block;
+}
+
+output {
+	opacity: 0.5;
+	color: var(--prime);
+	font-size: 1em;
+	font-family: monospace;
+	display: block;
+	overflow-wrap: anywhere;
+	text-overflow: ellipsis;
+	height: 8em;
+	padding: 0 4em;
+	overflow: hidden;
+}
+
+}`
+

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

@@ -0,0 +1,16 @@
+
+import {html} from "lit"
+import {shadowDuplex, useCss} from "@e280/sly"
+
+import styleCss from "./style.css.js"
+import themeCss from "../theme.css.js"
+import {Visualizer} from "./visualizer.js"
+
+export const [VisualizerView, makeVisualizerElement] = shadowDuplex((visualizer: Visualizer) => {
+	useCss(themeCss, styleCss)
+
+	return html`
+		<output class=viz>${visualizer.$hex()}</output>
+	`
+})
+

package/s/lib/ui/views/visualizer/visualizer.ts

@@ -0,0 +1,17 @@
+
+import {signal} from "@e280/strata"
+import {debounce, hex} from "@e280/stz"
+
+export class Visualizer {
+	$hex = signal("")
+
+	clear = debounce(250, () => {
+		this.$hex.set("")
+	})
+
+	update(data: ArrayBuffer) {
+		this.$hex(hex(new Uint8Array(data)))
+		this.clear()
+	}
+}
+

package/s/lib/utils/ellipsis.ts

@@ -0,0 +1,7 @@
+
+export function ellipsis(s: string, max: number) {
+	return s.length > max
+		? s.slice(0, max) + "..."
+		: s
+}
+

package/s/lib/utils/hueify.ts

@@ -0,0 +1,5 @@
+
+export function hueify(n: number) {
+	return n * 137.508
+}
+

package/x/demo/main.bundle.js

@@ -1,6 +1,19 @@
 import { dom } from "@e280/sly";
-import { setupDemoApp } from "./demo-app/element.js";
-dom.register({
-    DemoApp: setupDemoApp(),
+import { cycle, nap } from "@e280/stz";
+import { presets } from "./presets.js";
+import { setupTact } from "../lib/ui/deck/setup/tact.js";
+const tact = await setupTact({ presets, maxPlayers: 4 });
+tact.mouseKeyboard();
+tact.gamepads("gamer");
+tact.registerElements();
+cycle(async () => {
+    const data = tact.deck.hub.encodeAll();
+    tact.visualizer.update(data);
+    await nap(1000 / 60);
 });
+{
+    const input = dom('input[type="color"]');
+    input.value = "#ffbb00";
+    input.oninput = () => document.body.style.setProperty("--tact-prime", input.value);
+}
 //# sourceMappingURL=main.bundle.js.map

package/x/demo/main.bundle.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.bundle.js","sourceRoot":"","sources":["../../s/demo/main.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,WAAW,CAAA;AAC7B,OAAO,EAAC,YAAY,EAAC,MAAM,uBAAuB,CAAA;AAElD,GAAG,CAAC,QAAQ,CAAC;IACZ,OAAO,EAAE,YAAY,EAAE;CACvB,CAAC,CAAA"}
+{"version":3,"file":"main.bundle.js","sourceRoot":"","sources":["../../s/demo/main.bundle.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,WAAW,CAAA;AAC7B,OAAO,EAAC,KAAK,EAAE,GAAG,EAAC,MAAM,WAAW,CAAA;AACpC,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAA;AACpC,OAAO,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAA;AAEtD,MAAM,IAAI,GAAG,MAAM,SAAS,CAAC,EAAC,OAAO,EAAE,UAAU,EAAE,CAAC,EAAC,CAAC,CAAA;AACtD,IAAI,CAAC,aAAa,EAAE,CAAA;AACpB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;AACtB,IAAI,CAAC,gBAAgB,EAAE,CAAA;AAEvB,KAAK,CAAC,KAAK,IAAG,EAAE;IACf,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,CAAA;IACtC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IAC5B,MAAM,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,CAAA;AACrB,CAAC,CAAC,CAAA;AAEF,CAAC;IACA,MAAM,KAAK,GAAG,GAAG,CAAmB,qBAAqB,CAAC,CAAA;IAC1D,KAAK,CAAC,KAAK,GAAG,SAAS,CAAA;IACvB,KAAK,CAAC,OAAO,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;AACnF,CAAC"}