@benev/tact 0.1.0-1

package/s/nubs/stick/utils/calculate_new_vector_from_pointer_position.ts

@@ -0,0 +1,27 @@
+
+import {Vec2} from "@benev/math"
+import {within_radius} from "./within_radius.js"
+import {Basis} from "../../stick-graphic/types/basis.js"
+import {find_closest_point_on_circle} from "./find_closest_point_on_circle.js"
+
+export function calculate_new_vector_from_pointer_position(
+		{radius, rect: {left, top, width, height}}: Basis,
+		{x: client_x, y: client_y}: Vec2,
+	): Vec2 {
+
+	const middle_x = left + (width / 2)
+	const middle_y = top + (height / 2)
+
+	let new_vector = Vec2.new((client_x - middle_x), (client_y - middle_y))
+
+	if (!within_radius(radius, new_vector))
+		new_vector = find_closest_point_on_circle(radius, new_vector)
+	const [x, y] = new_vector
+
+	const final = Vec2.new((x / radius), -(y / radius))
+
+	return [...final].some(isNaN)
+		? Vec2.zero()
+		: final
+}
+

package/s/nubs/stick/utils/find_closest_point_on_circle.ts

@@ -0,0 +1,15 @@
+
+import {Vec2} from "@benev/math"
+
+export function find_closest_point_on_circle(
+		radius: number,
+		{x, y}: Vec2,
+	): Vec2 {
+
+	const magnitude = Math.sqrt((x ** 2) + (y ** 2))
+
+	return Vec2.new(
+		(x / magnitude) * radius,
+		(y / magnitude) * radius,
+	)
+}

package/s/nubs/stick/utils/make_pointer_listeners.ts

@@ -0,0 +1,50 @@
+
+import {Vec2} from "@benev/math"
+
+export function make_pointer_listeners({
+		set_vector,
+		set_pointer_position,
+	}: {
+		set_vector: (vector: Vec2) => void
+		set_pointer_position: (position: Vec2) => void
+	}) {
+
+	let pointer_id: number | undefined
+
+	return {
+		pointerdown: {
+			handleEvent: (event: PointerEvent) => {
+				event.preventDefault()
+
+				const element = event.currentTarget as HTMLElement
+
+				if (pointer_id)
+					element.releasePointerCapture(pointer_id)
+
+				pointer_id = event.pointerId
+				element.setPointerCapture(pointer_id)
+				set_pointer_position(Vec2.new(event.clientX, event.clientY))
+				set_vector(Vec2.zero())
+			},
+		},
+
+		pointermove: {
+			passive: false,
+			handleEvent: (event: PointerEvent) => {
+				event.preventDefault()
+
+				if (event.pointerId === pointer_id)
+					set_pointer_position(Vec2.new(event.clientX, event.clientY))
+			},
+		},
+
+		pointerup: {
+			handleEvent: (event: PointerEvent) => {
+				event.preventDefault()
+				pointer_id = undefined
+				set_vector(Vec2.zero())
+			},
+		},
+	}
+}
+

package/s/nubs/stick/utils/within_radius.ts

@@ -0,0 +1,6 @@
+
+import {Vec2} from "@benev/math"
+
+export function within_radius(radius: number, {x, y}: Vec2) {
+	return (x ** 2) + (y ** 2) < (radius ** 2)
+}

package/s/nubs/stick/view.ts

@@ -0,0 +1,50 @@
+
+import {html} from "lit"
+import {view} from "@e280/sly"
+import {Vec2} from "@benev/math"
+
+import {StickDevice} from "./device.js"
+import {styles} from "./styles.js"
+import {Basis} from "../stick-graphic/types/basis.js"
+import {NubStickGraphic} from "../stick-graphic/view.js"
+import {make_pointer_listeners} from "./utils/make_pointer_listeners.js"
+import {calculate_new_vector_from_pointer_position} from "./utils/calculate_new_vector_from_pointer_position.js"
+
+export const NubStick = view(use => (stick: StickDevice) => {
+	use.name("nub-stick")
+	use.styles(styles)
+
+	let basis: Basis | undefined = undefined
+	const updateBasis = (b: Basis) => basis = b
+
+	const listeners = use.once(() => make_pointer_listeners({
+		set_vector: vector => stick.vector.value = vector,
+		set_pointer_position: position => {
+			if (basis)
+				stick.vector.value = calculate_new_vector_from_pointer_position(
+					basis,
+					position,
+				)
+		},
+	}))
+
+	use.mount(() => {
+		stick.vector.set(Vec2.zero())
+		return () => stick.vector.set(Vec2.zero())
+	})
+
+	return html`
+		<div
+			class=container
+			.vector="${stick.vector}"
+			@pointerdown="${listeners.pointerdown}"
+			@pointermove="${listeners.pointermove}"
+			@pointerup="${listeners.pointerup}"
+			>
+			${NubStickGraphic
+				.attr("part", "graphic")
+				.props(stick.vector.get(), updateBasis)}
+		</div>
+	`
+})
+

package/s/nubs/stick-graphic/styles.ts

@@ -0,0 +1,38 @@
+
+import {css} from "lit"
+export const styles = css`
+
+:host {
+	display: block;
+	width: 8em;
+	height: 8em;
+	--size: var(--nub-stick-size, 66%);
+	--background: var(--nub-stick-background, black);
+	--color: var(--nub-stick-color, white);
+}
+
+[part="base"] {
+	position: relative;
+	aspect-ratio: 1/1;
+	width: 100%;
+	height: 100%;
+	background: var(--background);
+	border-radius: 100%;
+}
+
+[part="over"], [part="under"] {
+	position: absolute;
+	inset: 0;
+	width: var(--size);
+	height: var(--size);
+	border-radius: 100%;
+	margin: auto;
+	pointer-events: none;
+	background: var(--color);
+}
+
+[part="under"] {
+	opacity: 0.5;
+}
+
+`

package/s/nubs/stick-graphic/types/basis.ts

@@ -0,0 +1,5 @@
+
+export type Basis = {
+	rect: DOMRect
+	radius: number
+}

package/s/nubs/stick-graphic/utils/calculate_basis.ts

@@ -0,0 +1,19 @@
+
+import {Basis} from "../types/basis.js"
+
+export function calculate_basis(
+		base: HTMLElement,
+		over: HTMLElement,
+	): Basis {
+
+	const rect = base.getBoundingClientRect()
+
+	const half_base = (rect.width / 2)
+	const quarter_stick = (over.getBoundingClientRect().width / 4)
+
+	return {
+		rect,
+		radius: half_base - quarter_stick,
+	}
+}
+

package/s/nubs/stick-graphic/utils/stick_vector_to_pixels.ts

@@ -0,0 +1,13 @@
+
+import {Vec2} from "@benev/math"
+
+export function stick_vector_to_pixels(
+		radius: number | undefined,
+		vector: Vec2,
+	) {
+
+	return radius !== undefined
+		? vector.clone().multiply_(radius, -radius)
+		: Vec2.zero()
+}
+

package/s/nubs/stick-graphic/utils/transform.ts

@@ -0,0 +1,10 @@
+
+import {Vec2} from "@benev/math"
+
+export const transform = ({x, y}: Vec2) => `
+	transform: translate(
+		${x}px,
+		${y}px
+	);
+`
+

package/s/nubs/stick-graphic/view.ts

@@ -0,0 +1,43 @@
+
+import {html} from "lit"
+import {view} from "@e280/sly"
+import {Vec2} from "@benev/math"
+
+import {styles} from "./styles.js"
+import {Basis} from "./types/basis.js"
+import {transform} from "./utils/transform.js"
+import {calculate_basis} from "./utils/calculate_basis.js"
+import {stick_vector_to_pixels} from "./utils/stick_vector_to_pixels.js"
+
+export const NubStickGraphic = view(use => (
+		vector: Vec2,
+		updateBasis: (basis: Basis) => void,
+	) => {
+
+	use.name("nub-stick-graphic")
+	use.styles(styles)
+
+	const basis = use.signal<Basis | null>(null)
+
+	use.rendered.then(() => {
+		const base = use.shadow.querySelector<HTMLElement>(`[part="base"]`)
+		const over = use.shadow.querySelector<HTMLElement>(`[part="over"]`)
+		if (base && over) {
+			const newBasis = calculate_basis(base, over)
+			basis.value = newBasis
+			updateBasis(newBasis)
+		}
+	})
+
+	const pixels = stick_vector_to_pixels(basis.value?.radius, vector)
+	const over_style = transform(pixels)
+	const under_style = transform(pixels.clone().half())
+
+	return html`
+		<div part=base>
+			<div part=under style="${under_style}"></div>
+			<div part=over style="${over_style}"></div>
+		</div>
+	`
+})
+

package/s/nubs/virtual-gamepad/device.ts

@@ -0,0 +1,25 @@
+
+import {StickDevice} from "../stick/device.js"
+import {SamplerDevice} from "../../station/devices/infra/sampler.js"
+
+export class VirtualGamepadDevice extends SamplerDevice {
+	stickLeft = new StickDevice()
+	stickRight = new StickDevice()
+
+	takeSamples() {
+		const left = this.stickLeft.breakdown()
+		this.setSample("gamepad.stick.left.up", left.up)
+		this.setSample("gamepad.stick.left.down", left.down)
+		this.setSample("gamepad.stick.left.left", left.left)
+		this.setSample("gamepad.stick.left.right", left.right)
+
+		const right = this.stickRight.breakdown()
+		this.setSample("gamepad.stick.right.up", right.up)
+		this.setSample("gamepad.stick.right.down", right.down)
+		this.setSample("gamepad.stick.right.left", right.left)
+		this.setSample("gamepad.stick.right.right", right.right)
+
+		return super.takeSamples()
+	}
+}
+

package/s/nubs/virtual-gamepad/styles.css.ts

@@ -0,0 +1,133 @@
+
+import {css} from "lit"
+export default css`
+
+:host {
+	pointer-events: none;
+
+	display: flex;
+	flex-direction: column;
+	container: my-layout / size;
+
+	width: 100%;
+	height: 100%;
+}
+
+* {
+	user-drag: none;
+	user-select: none;
+}
+
+button, [view="nub-stick"] {
+	pointer-events: all;
+}
+
+button {
+	font-size: 0.5em;
+	color: #fff;
+	text-shadow: .1em .2em .1em #000;
+	text-transform: uppercase;
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	background: #888;
+	box-shadow: .2em .4em .1em #000;
+
+	-webkit-tap-highlight-color: transparent;
+	&:is(:focus, :hover) {
+		outline: none;
+		background: #888;
+		filter: none;
+	}
+}
+
+.upper {
+	flex: 1 1 auto;
+	display: flex;
+	justify-content: center;
+	align-items: start;
+	gap: 0.5em;
+}
+
+.lower {
+	display: flex;
+	justify-content: space-between;
+}
+
+.side {
+	display: flex;
+	flex-direction: column;
+	gap: 1em;
+}
+
+.pad {
+	display: flex;
+	gap: 0.5em;
+
+	> div {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		gap: 0.5em;
+	}
+}
+
+.shoulder {
+	display: flex;
+	gap: 0.5em;
+}
+
+.right {
+	align-items: end;
+}
+
+.right .shoulder {
+	flex-direction: row-reverse;
+}
+
+[x-code^="g.trigger"] {
+	width: 6em;
+}
+
+[x-code^="g.bumper"] {
+	width: 4em;
+}
+
+.stick {
+	width: 4em;
+}
+
+@container (min-width: 0px) {
+	.upper, .lower {
+		padding: 2cqh 2cqw;
+	}
+
+	button {
+		font-size: min(3cqh, 3cqw);
+		width: 7cqw;
+		height: 6cqh;
+	}
+
+	.upper button {
+		width: unset;
+		height: unset;
+	}
+
+	.shoulder button {
+		height: 9cqh;
+	}
+
+	.stick {
+		width: max(15cqw, 15cqh);
+	}
+
+	[x-code^="g.trigger"] {
+		width: 9cqw;
+	}
+
+	[x-code^="g.bumper"] {
+		width: 7cqw;
+	}
+}
+
+`

package/s/nubs/virtual-gamepad/utils/gamepad-inputs.ts

@@ -0,0 +1,42 @@
+
+export type GamepadInputs = ReturnType<typeof gamepadInputs>
+
+export function gamepadInputs() {
+	return {
+		"gamepad.any": 0,
+
+		"gamepad.stick.left.up": 0,
+		"gamepad.stick.left.down": 0,
+		"gamepad.stick.left.left": 0,
+		"gamepad.stick.left.right": 0,
+
+		"gamepad.stick.right.up": 0,
+		"gamepad.stick.right.down": 0,
+		"gamepad.stick.right.left": 0,
+		"gamepad.stick.right.right": 0,
+
+		"gamepad.stick.left.click": 0,
+		"gamepad.stick.right.click": 0,
+
+		"gamepad.a": 0,
+		"gamepad.b": 0,
+		"gamepad.x": 0,
+		"gamepad.y": 0,
+
+		"gamepad.up": 0,
+		"gamepad.down": 0,
+		"gamepad.left": 0,
+		"gamepad.right": 0,
+
+		"gamepad.trigger.left": 0,
+		"gamepad.trigger.right": 0,
+
+		"gamepad.bumper.left": 0,
+		"gamepad.bumper.right": 0,
+
+		"gamepad.alpha": 0,
+		"gamepad.beta": 0,
+		"gamepad.gamma": 0,
+	}
+}
+

package/s/nubs/virtual-gamepad/utils/prevent-default-touch-shenanigans.ts

@@ -0,0 +1,12 @@
+
+export function preventDefaultTouchShenanigans() {
+	const preventer = (e: TouchEvent) => e.preventDefault()
+	const opts = {passive: false}
+
+	window.addEventListener("touchmove", preventer, opts)
+
+	return () => {
+		window.removeEventListener("touchmove", preventer)
+	}
+}
+

package/s/nubs/virtual-gamepad/utils/touch-tracking.ts

@@ -0,0 +1,75 @@
+
+import {ev, MapG} from "@e280/stz"
+
+export function touchTracking({target, buttons, touchdown, touchup}: {
+		target: Document | ShadowRoot
+		buttons: Set<HTMLButtonElement>
+		touchdown: (button: HTMLButtonElement) => void
+		touchup: (button: HTMLButtonElement) => void
+	}) {
+
+	const tracks = new MapG<number, Track>
+
+	function grabTrack(touch: Touch) {
+		return tracks.guarantee(touch.identifier, () => new Track(
+			touchdown,
+			touchup,
+		))
+	}
+
+	function underTouch(touch: Touch) {
+		const element = target.elementFromPoint(touch.clientX, touch.clientY)
+		return (element && element instanceof HTMLButtonElement && buttons.has(element))
+			? element
+			: undefined
+	}
+
+	function additive(event: TouchEvent) {
+		for (const touch of Array.from(event.touches)) {
+			const track = grabTrack(touch)
+			track.button = underTouch(touch)
+		}
+	}
+
+	function subtractive(event: TouchEvent) {
+		for (const touch of Array.from(event.changedTouches)) {
+			const track = grabTrack(touch)
+			track.button = undefined
+			tracks.delete(touch.identifier)
+		}
+	}
+
+	return ev(window, {
+		touchstart: additive,
+		touchmove: additive,
+		touchcancel: subtractive,
+		touchend: subtractive,
+	})
+}
+
+class Track {
+	#button: HTMLButtonElement | undefined = undefined
+
+	constructor(
+		public touchdown: (button: HTMLButtonElement) => void,
+		public touchup: (button: HTMLButtonElement) => void,
+	) {}
+
+	get button() {
+		return this.#button
+	}
+
+	set button(next: HTMLButtonElement | undefined) {
+		const previous = this.#button
+		const changed = next !== previous
+
+		this.#button = next
+
+		if (changed && previous) {
+			this.touchup(previous)
+		}
+		if (changed && next)
+			this.touchdown(next)
+	}
+}
+