,
code: ErrorMessage["code"],
- message: string,
+ message: string
) {
this.sendTo(conn, { v: PROTOCOL_VERSION, type: "error", code, message });
}
diff --git a/web/src/app/main.ts b/web/src/app/main.ts
index 0461821..3aaa51c 100644
--- a/web/src/app/main.ts
+++ b/web/src/app/main.ts
@@ -48,7 +48,8 @@ function pickGame(): { game: Game; live: boolean } {
return { game: new Slice(), live: true };
default:
// Featured everywhere the phone hosts it or the MOTION mirror is on.
- if (MOTION_MAKER || TRANSPORT === "bridge") return { game: new Slice(), live: true };
+ if (MOTION_MAKER || TRANSPORT === "bridge")
+ return { game: new Slice(), live: true };
return { game: new ReachDodge(), live: false };
}
}
diff --git a/web/src/app/overlay.ts b/web/src/app/overlay.ts
index e4bd934..4dffacd 100644
--- a/web/src/app/overlay.ts
+++ b/web/src/app/overlay.ts
@@ -29,7 +29,11 @@ export class Overlay implements SessionScreenRenderer {
pairing(ctx: PairingCtx): void {
const { code, conn, host, debug, recordOn, onToggleRecord } = ctx;
const dot =
- conn === "open" ? "#35e0c8" : conn === "connecting" ? "#ffcc33" : "#ff4d6d";
+ conn === "open"
+ ? "#35e0c8"
+ : conn === "connecting"
+ ? "#ffcc33"
+ : "#ff4d6d";
const connLabel =
conn === "open"
? "connected to relay"
@@ -106,7 +110,7 @@ export class Overlay implements SessionScreenRenderer {
const stats = r.stats
.map(
(s) =>
- `${escapeHtml(s.value)}
${escapeHtml(s.label)}
`,
+ `${escapeHtml(s.value)}
${escapeHtml(s.label)}
`
)
.join("");
this.panel(`
@@ -128,7 +132,7 @@ function spaced(code: string): string {
}
function escapeHtml(s: string): string {
return s.replace(/[&<>"]/g, (c) =>
- c === "&" ? "&" : c === "<" ? "<" : c === ">" ? ">" : """,
+ c === "&" ? "&" : c === "<" ? "<" : c === ">" ? ">" : """
);
}
diff --git a/web/src/games/canvas-utils.ts b/web/src/games/canvas-utils.ts
new file mode 100644
index 0000000..aaf118b
--- /dev/null
+++ b/web/src/games/canvas-utils.ts
@@ -0,0 +1,39 @@
+// Shared canvas drawing helpers used by multiple games.
+// Extracted to avoid duplication of geometry and path utilities.
+
+/** Shortest distance from point (px,py) to the segment (ax,ay)–(bx,by). */
+export function distPointToSegment(
+ px: number,
+ py: number,
+ ax: number,
+ ay: number,
+ bx: number,
+ by: number
+): number {
+ const dx = bx - ax;
+ const dy = by - ay;
+ const lenSq = dx * dx + dy * dy;
+ if (lenSq === 0) return Math.hypot(px - ax, py - ay);
+ let t = ((px - ax) * dx + (py - ay) * dy) / lenSq;
+ t = t < 0 ? 0 : t > 1 ? 1 : t;
+ return Math.hypot(px - (ax + t * dx), py - (ay + t * dy));
+}
+
+/** Stroke a rounded rectangle path on the given 2D context. */
+export function roundRect(
+ ctx: CanvasRenderingContext2D,
+ x: number,
+ y: number,
+ w: number,
+ h: number,
+ radius: number
+): void {
+ const rr = Math.min(radius, w / 2, h / 2);
+ ctx.beginPath();
+ ctx.moveTo(x + rr, y);
+ ctx.arcTo(x + w, y, x + w, y + h, rr);
+ ctx.arcTo(x + w, y + h, x, y + h, rr);
+ ctx.arcTo(x, y + h, x, y, rr);
+ ctx.arcTo(x, y, x + w, y, rr);
+ ctx.closePath();
+}
diff --git a/web/src/games/motion-maker/index.ts b/web/src/games/motion-maker/index.ts
index 85668b8..ed85249 100644
--- a/web/src/games/motion-maker/index.ts
+++ b/web/src/games/motion-maker/index.ts
@@ -16,6 +16,7 @@ import type {
GameResult,
Renderer,
} from "../../sdk";
+import { distPointToSegment, roundRect } from "../canvas-utils";
// ── Interaction tuning ────────────────────────────────────────────────────────
@@ -106,7 +107,15 @@ interface HandTrack {
}
function newHand(): HandTrack {
- return { x: 0.5, y: 0.5, vx: 0, vy: 0, prevOpen: 1, holding: null, armed: false };
+ return {
+ x: 0.5,
+ y: 0.5,
+ vx: 0,
+ vy: 0,
+ prevOpen: 1,
+ holding: null,
+ armed: false,
+ };
}
export class MotionMaker implements Game {
@@ -426,7 +435,7 @@ export class MotionMaker implements Game {
h.x,
h.y,
sword.tipX,
- sword.tipY,
+ sword.tipY
);
if (d < SLICE_RADIUS) {
ball.scoreAnim = 0.001; // start pop
@@ -457,7 +466,9 @@ export class MotionMaker implements Game {
ctx.save();
const glow = this.binFlash > 0 ? this.binFlash / 0.5 : 0;
ctx.strokeStyle =
- glow > 0 ? `rgba(53,224,200,${0.6 + glow * 0.4})` : "rgba(53,224,200,0.45)";
+ glow > 0
+ ? `rgba(53,224,200,${0.6 + glow * 0.4})`
+ : "rgba(53,224,200,0.45)";
ctx.lineWidth = Math.max(3, r.sx(0.008));
ctx.setLineDash([r.sx(0.02), r.sx(0.014)]);
roundRect(ctx, cx - w / 2, cy - h / 2, w, h, r.sx(0.02));
@@ -499,7 +510,13 @@ export class MotionMaker implements Game {
ctx.fill();
ctx.fillStyle = "rgba(255,255,255,0.35)";
ctx.beginPath();
- ctx.arc(cx - radius * 0.3, cy - radius * 0.3, radius * 0.35, 0, Math.PI * 2);
+ ctx.arc(
+ cx - radius * 0.3,
+ cy - radius * 0.3,
+ radius * 0.35,
+ 0,
+ Math.PI * 2
+ );
ctx.fill();
ctx.restore();
}
@@ -546,7 +563,7 @@ export class MotionMaker implements Game {
gy - uy * handleLen,
Math.max(4, r.sx(0.012)),
0,
- Math.PI * 2,
+ Math.PI * 2
);
ctx.fill();
@@ -623,9 +640,18 @@ export class MotionMaker implements Game {
ctx.stroke();
// Arms: neck → elbow (when tracked, for a real bend) → hand. Straight fallback.
- const arms: { elbow: [number, number] | undefined; hand: [number, number] }[] = [
- { elbow: j.leftElbow ? this.pt(r, j.leftElbow) : undefined, hand: [lhX, lhY] },
- { elbow: j.rightElbow ? this.pt(r, j.rightElbow) : undefined, hand: [rhX, rhY] },
+ const arms: {
+ elbow: [number, number] | undefined;
+ hand: [number, number];
+ }[] = [
+ {
+ elbow: j.leftElbow ? this.pt(r, j.leftElbow) : undefined,
+ hand: [lhX, lhY],
+ },
+ {
+ elbow: j.rightElbow ? this.pt(r, j.rightElbow) : undefined,
+ hand: [rhX, rhY],
+ },
];
for (const { elbow, hand } of arms) {
ctx.beginPath();
@@ -644,15 +670,20 @@ export class MotionMaker implements Game {
ctx.restore();
// Hands — draw open vs closed.
- this.drawHand(r, lhX, lhY, body.leftHandOpen, this.hands.left.holding !== null);
+ this.drawHand(
+ r,
+ lhX,
+ lhY,
+ body.leftHandOpen,
+ this.hands.left.holding !== null
+ );
this.drawHand(
r,
rhX,
rhY,
body.rightHandOpen,
- this.hands.right.holding !== null,
+ this.hands.right.holding !== null
);
-
}
/**
@@ -674,7 +705,7 @@ export class MotionMaker implements Game {
x: number,
y: number,
open: number,
- holding: boolean,
+ holding: boolean
): void {
const { ctx } = r;
const base = Math.max(10, r.sx(0.03));
@@ -718,51 +749,19 @@ export class MotionMaker implements Game {
ctx.fillStyle = "#f4f7ff";
ctx.font = `bold ${Math.round(r.sx(0.05))}px system-ui`;
ctx.textAlign = "left";
- ctx.fillText(String(this.score).padStart(4, "0"), p.x + r.sx(0.03), p.y + r.sy(0.03));
+ ctx.fillText(
+ String(this.score).padStart(4, "0"),
+ p.x + r.sx(0.03),
+ p.y + r.sy(0.03)
+ );
ctx.fillStyle = "#8a95b5";
ctx.font = `${Math.round(r.sx(0.024))}px system-ui`;
ctx.fillText(
"Grab a ball → drop it in the bin · grab the sword → swing to slice",
p.x + r.sx(0.03),
- p.y + r.sy(0.1),
+ p.y + r.sy(0.1)
);
ctx.restore();
}
}
-
-/** Shortest distance from point (px,py) to the segment (ax,ay)–(bx,by). */
-function distPointToSegment(
- px: number,
- py: number,
- ax: number,
- ay: number,
- bx: number,
- by: number,
-): number {
- const dx = bx - ax;
- const dy = by - ay;
- const lenSq = dx * dx + dy * dy;
- if (lenSq === 0) return Math.hypot(px - ax, py - ay);
- let t = ((px - ax) * dx + (py - ay) * dy) / lenSq;
- t = t < 0 ? 0 : t > 1 ? 1 : t;
- return Math.hypot(px - (ax + t * dx), py - (ay + t * dy));
-}
-
-function roundRect(
- ctx: CanvasRenderingContext2D,
- x: number,
- y: number,
- w: number,
- h: number,
- radius: number,
-): void {
- const rr = Math.min(radius, w / 2, h / 2);
- ctx.beginPath();
- ctx.moveTo(x + rr, y);
- ctx.arcTo(x + w, y, x + w, y + h, rr);
- ctx.arcTo(x + w, y + h, x, y + h, rr);
- ctx.arcTo(x, y + h, x, y, rr);
- ctx.arcTo(x, y, x + w, y, rr);
- ctx.closePath();
-}
diff --git a/web/src/games/reach-dodge/index.ts b/web/src/games/reach-dodge/index.ts
index c91a4f7..6dba98b 100644
--- a/web/src/games/reach-dodge/index.ts
+++ b/web/src/games/reach-dodge/index.ts
@@ -20,6 +20,7 @@ import type {
GameResult,
Renderer,
} from "../../sdk";
+import { roundRect } from "../canvas-utils";
const SESSION_MS = 75_000; // ~75s
const TARGET_RADIUS = 0.075; // normalized (x-relative)
@@ -199,7 +200,7 @@ export class ReachDodge implements Game {
}
}
this.targets = this.targets.filter(
- (t) => (!t.hit && t.ttl > 0) || (t.hit && t.hitAnim < 1),
+ (t) => (!t.hit && t.ttl > 0) || (t.hit && t.hitAnim < 1)
);
}
@@ -335,7 +336,7 @@ export class ReachDodge implements Game {
ctx.fillText(
String(this.score).padStart(5, "0"),
p.x + r.sx(0.03),
- p.y + r.sy(0.03),
+ p.y + r.sy(0.03)
);
// Combo
@@ -367,20 +368,3 @@ function lerp(a: number, b: number, t: number): number {
function dist(ax: number, ay: number, bx: number, by: number): number {
return Math.hypot(ax - bx, ay - by);
}
-function roundRect(
- ctx: CanvasRenderingContext2D,
- x: number,
- y: number,
- w: number,
- h: number,
- radius: number,
-): void {
- const rr = Math.min(radius, w / 2, h / 2);
- ctx.beginPath();
- ctx.moveTo(x + rr, y);
- ctx.arcTo(x + w, y, x + w, y + h, rr);
- ctx.arcTo(x + w, y + h, x, y + h, rr);
- ctx.arcTo(x, y + h, x, y, rr);
- ctx.arcTo(x, y, x + w, y, rr);
- ctx.closePath();
-}
diff --git a/web/src/games/slice/index.ts b/web/src/games/slice/index.ts
index 1fc4dda..9bd3e30 100644
--- a/web/src/games/slice/index.ts
+++ b/web/src/games/slice/index.ts
@@ -15,6 +15,7 @@ import type {
GameResult,
Renderer,
} from "../../sdk";
+import { distPointToSegment } from "../canvas-utils";
// ── Tuning ──────────────────────────────────────────────────────────────────────
@@ -30,7 +31,14 @@ const GRAVITY = 0.9;
/** Trail length (recent hand points) drawn as the blade. */
const TRAIL_LEN = 10;
-const FRUIT_COLORS = ["#ff5b6a", "#ffb020", "#35e0c8", "#5b8cff", "#b25cff", "#ff8f3f"];
+const FRUIT_COLORS = [
+ "#ff5b6a",
+ "#ffb020",
+ "#35e0c8",
+ "#5b8cff",
+ "#b25cff",
+ "#ff8f3f",
+];
type Which = "left" | "right";
@@ -123,7 +131,10 @@ export class Slice implements Game {
private halves: Half[] = [];
private splats: Splat[] = [];
private popups: Popup[] = [];
- private hands: Record = { left: newHand(-0.5), right: newHand(0.5) };
+ private hands: Record = {
+ left: newHand(-0.5),
+ right: newHand(0.5),
+ };
private score = 0;
private lives = START_LIVES;
@@ -273,7 +284,9 @@ export class Slice implements Game {
vx,
vy,
r: bomb ? 0.055 : 0.05 + Math.random() * 0.02,
- color: bomb ? "#20242e" : (FRUIT_COLORS[this.nextId % FRUIT_COLORS.length] ?? "#ff5b6a"),
+ color: bomb
+ ? "#20242e"
+ : (FRUIT_COLORS[this.nextId % FRUIT_COLORS.length] ?? "#ff5b6a"),
bomb,
counted: false,
});
@@ -332,7 +345,10 @@ export class Slice implements Game {
for (const f of this.fruits) {
if (f.counted) continue;
- if (distPointToSegment(f.x, f.y, a.x, a.y, b.x, b.y) < f.r + SLICE_REACH) {
+ if (
+ distPointToSegment(f.x, f.y, a.x, a.y, b.x, b.y) <
+ f.r + SLICE_REACH
+ ) {
this.onSliced(f, b.x - a.x, b.y - a.y);
}
}
@@ -354,7 +370,8 @@ export class Slice implements Game {
this.sliced++;
// Combo: slices chained within the window multiply the score.
const now = this.elapsed;
- this.comboCount = now - this.lastSliceAt <= COMBO_WINDOW_S ? this.comboCount + 1 : 1;
+ this.comboCount =
+ now - this.lastSliceAt <= COMBO_WINDOW_S ? this.comboCount + 1 : 1;
this.lastSliceAt = now;
this.bestCombo = Math.max(this.bestCombo, this.comboCount);
@@ -494,7 +511,13 @@ export class Slice implements Game {
ctx.fillStyle = h.color;
ctx.beginPath();
// A half disc (flat face along the slice).
- ctx.arc(0, 0, rad, h.side > 0 ? 0 : Math.PI, h.side > 0 ? Math.PI : Math.PI * 2);
+ ctx.arc(
+ 0,
+ 0,
+ rad,
+ h.side > 0 ? 0 : Math.PI,
+ h.side > 0 ? Math.PI : Math.PI * 2
+ );
ctx.closePath();
ctx.fill();
// Pale inner flesh along the cut.
@@ -626,13 +649,18 @@ export class Slice implements Game {
ctx.fillStyle = "#f4f7ff";
ctx.font = `bold ${Math.round(r.sx(0.05))}px system-ui`;
ctx.textAlign = "left";
- ctx.fillText(String(this.score).padStart(4, "0"), p.x + r.sx(0.03), p.y + r.sy(0.03));
+ ctx.fillText(
+ String(this.score).padStart(4, "0"),
+ p.x + r.sx(0.03),
+ p.y + r.sy(0.03)
+ );
// Lives as hearts, top-right.
ctx.textAlign = "right";
ctx.font = `${Math.round(r.sx(0.04))}px system-ui`;
let hearts = "";
- for (let i = 0; i < START_LIVES; i++) hearts += i < this.lives ? "♥ " : "♡ ";
+ for (let i = 0; i < START_LIVES; i++)
+ hearts += i < this.lives ? "♥ " : "♡ ";
ctx.fillStyle = "#ff6b7f";
ctx.fillText(hearts.trim(), p.x + p.w - r.sx(0.03), p.y + r.sy(0.035));
@@ -641,7 +669,11 @@ export class Slice implements Game {
ctx.textAlign = "left";
ctx.fillStyle = "#ffd84d";
ctx.font = `bold ${Math.round(r.sx(0.03))}px system-ui`;
- ctx.fillText(`${this.comboCount}× combo`, p.x + r.sx(0.03), p.y + r.sy(0.1));
+ ctx.fillText(
+ `${this.comboCount}× combo`,
+ p.x + r.sx(0.03),
+ p.y + r.sy(0.1)
+ );
}
ctx.restore();
}
@@ -657,24 +689,6 @@ export class Slice implements Game {
}
}
-/** Shortest distance from point (px,py) to the segment (ax,ay)–(bx,by). */
-function distPointToSegment(
- px: number,
- py: number,
- ax: number,
- ay: number,
- bx: number,
- by: number,
-): number {
- const dx = bx - ax;
- const dy = by - ay;
- const lenSq = dx * dx + dy * dy;
- if (lenSq === 0) return Math.hypot(px - ax, py - ay);
- let t = ((px - ax) * dx + (py - ay) * dy) / lenSq;
- t = t < 0 ? 0 : t > 1 ? 1 : t;
- return Math.hypot(px - (ax + t * dx), py - (ay + t * dy));
-}
-
/** "#rrggbb" → "r,g,b" for rgba() splatter fills. */
function hexToRgb(hex: string): string {
const m = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex);
diff --git a/web/src/sdk/bridge.ts b/web/src/sdk/bridge.ts
index b15a99c..6ff5bae 100644
--- a/web/src/sdk/bridge.ts
+++ b/web/src/sdk/bridge.ts
@@ -123,7 +123,7 @@ export interface BridgeHostCallbacks {
export class NativeBridge {
constructor(
private controller: BridgeController,
- private callbacks: BridgeHostCallbacks,
+ private callbacks: BridgeHostCallbacks
) {
this.install();
}
diff --git a/web/src/sdk/calibration.ts b/web/src/sdk/calibration.ts
index 733258b..dcc66ca 100644
--- a/web/src/sdk/calibration.ts
+++ b/web/src/sdk/calibration.ts
@@ -30,7 +30,7 @@ export class Readiness {
constructor(
private room: Room,
- private debug: boolean,
+ private debug: boolean
) {
if (!debug) {
room.on("calib", (c) => {
@@ -44,7 +44,8 @@ export class Readiness {
const peer = this.debug ? true : this.room.peerConnected;
const joints = body.hasRequiredJoints;
const qualityNow =
- body.health === "ok" && body.trackingQuality >= (this.debug ? 0.1 : QUALITY_MIN);
+ body.health === "ok" &&
+ body.trackingQuality >= (this.debug ? 0.1 : QUALITY_MIN);
if (qualityNow && joints && peer) {
if (this.goodSince < 0) this.goodSince = nowMs;
diff --git a/web/src/sdk/controller.ts b/web/src/sdk/controller.ts
index 948bfae..31588c8 100644
--- a/web/src/sdk/controller.ts
+++ b/web/src/sdk/controller.ts
@@ -137,7 +137,7 @@ export abstract class PoseControllerBase implements BodyController {
// Per-optional-arm-joint absence counter. 0 = present this packet; once it
// exceeds ARM_ABSENCE_GRACE the joint is cleared to undefined on `joints`.
private armAbsent: Record = Object.fromEntries(
- ARM_JOINT_NAMES.map((n) => [n, ARM_ABSENCE_GRACE + 1]),
+ ARM_JOINT_NAMES.map((n) => [n, ARM_ABSENCE_GRACE + 1])
);
// Per-fingertip absence counter, same brief-dropout tolerance as the arm joints:
@@ -205,12 +205,12 @@ export abstract class PoseControllerBase implements BodyController {
this.leftFingertip = this.smoothFingertip(
"left",
this.leftFingertip,
- p.fingertips?.left,
+ p.fingertips?.left
);
this.rightFingertip = this.smoothFingertip(
"right",
this.rightFingertip,
- p.fingertips?.right,
+ p.fingertips?.right
);
this.captureCalibration();
@@ -225,7 +225,7 @@ export abstract class PoseControllerBase implements BodyController {
private smoothFingertip(
which: "left" | "right",
prev: [number, number] | undefined,
- incoming: [number, number] | undefined,
+ incoming: [number, number] | undefined
): [number, number] | undefined {
if (incoming) {
this.fingertipAbsent[which] = 0;
@@ -280,7 +280,7 @@ export abstract class PoseControllerBase implements BodyController {
// Decay quality as it goes staler.
this.trackingQuality = Math.max(
0,
- this.rawQuality * (1 - (this.ageMs - STALE_MS) / 1000),
+ this.rawQuality * (1 - (this.ageMs - STALE_MS) / 1000)
);
} else if (this.rawQuality < 0.4 || !required) {
this.health = "low_quality";
diff --git a/web/src/sdk/diagnostics.ts b/web/src/sdk/diagnostics.ts
index 481f968..dedd657 100644
--- a/web/src/sdk/diagnostics.ts
+++ b/web/src/sdk/diagnostics.ts
@@ -19,7 +19,7 @@ export class Diagnostics {
constructor(
parent: HTMLElement,
private room: Room,
- private live: boolean,
+ private live: boolean
) {
this.el = document.createElement("div");
Object.assign(this.el.style, {
diff --git a/web/src/sdk/game.ts b/web/src/sdk/game.ts
index 25882af..4c334af 100644
--- a/web/src/sdk/game.ts
+++ b/web/src/sdk/game.ts
@@ -76,7 +76,7 @@ export class CanvasRenderer implements Renderer {
drawSkeleton(
body: BodyController,
- opts?: { color?: string; handColor?: string; alpha?: number },
+ opts?: { color?: string; handColor?: string; alpha?: number }
): void {
drawSkeleton(this.surf, body, opts ?? {});
}
diff --git a/web/src/sdk/index.ts b/web/src/sdk/index.ts
index 733a286..30aee0c 100644
--- a/web/src/sdk/index.ts
+++ b/web/src/sdk/index.ts
@@ -123,7 +123,10 @@ export interface SessionScreenRenderer {
clear(): void;
pairing(ctx: PairingCtx): void;
mirror(): void;
- readiness(state: import("./calibration").ReadinessState, debug: boolean): void;
+ readiness(
+ state: import("./calibration").ReadinessState,
+ debug: boolean
+ ): void;
trackingLost(): void;
reconnecting(): void;
results(result: GameResult, onPlayAgain: () => void): void;
@@ -362,7 +365,10 @@ export class GameHost {
this.recordOn = on;
}
- on(event: K, fn: SessionEvents[K]): () => void {
+ on(
+ event: K,
+ fn: SessionEvents[K]
+ ): () => void {
this.listeners[event].add(fn);
return () => this.listeners[event].delete(fn);
}
@@ -415,7 +421,7 @@ export class GameHost {
const live: BodyController =
this.transport === "bridge" && this.bridgeController
? this.bridgeController
- : this.webcamController ?? this.poseController;
+ : (this.webcamController ?? this.poseController);
this.body = this.debugMode
? new KeyboardDebugController(this.canvasEl)
: live;
@@ -629,7 +635,10 @@ export class GameHost {
// emit gameOver/score so native can bracket its own screen recording.
if (this.transport === "bridge") {
if (this.lastResult) {
- this.nativeBridge?.emit({ event: "score", value: this.lastResult.score });
+ this.nativeBridge?.emit({
+ event: "score",
+ value: this.lastResult.score,
+ });
}
this.nativeBridge?.emit({
event: "gameOver",
diff --git a/web/src/sdk/keyboard-debug.ts b/web/src/sdk/keyboard-debug.ts
index f9e8e9b..371c53a 100644
--- a/web/src/sdk/keyboard-debug.ts
+++ b/web/src/sdk/keyboard-debug.ts
@@ -120,14 +120,18 @@ export class KeyboardDebugController implements BodyController {
tick(nowMs: number): void {
const dt =
- this.lastTick < 0 ? 0.016 : Math.min(0.05, (nowMs - this.lastTick) / 1000);
+ this.lastTick < 0
+ ? 0.016
+ : Math.min(0.05, (nowMs - this.lastTick) / 1000);
this.lastTick = nowMs;
// Drive lean/squat toward key targets with a ramp for a natural feel.
const leanTarget = clampSigned(this.leanKey);
- this.leanAmount += (leanTarget - this.leanAmount) * Math.min(1, KEY_RAMP * dt);
+ this.leanAmount +=
+ (leanTarget - this.leanAmount) * Math.min(1, KEY_RAMP * dt);
const squatTarget = this.squatKey ? 1 : 0;
- this.squatAmount += (squatTarget - this.squatAmount) * Math.min(1, KEY_RAMP * dt);
+ this.squatAmount +=
+ (squatTarget - this.squatAmount) * Math.min(1, KEY_RAMP * dt);
// Hands: grab key closes both toward 0 (fist), otherwise open toward 1 (palm).
const openTarget = this.grabKey ? 0 : 1;
@@ -136,8 +140,14 @@ export class KeyboardDebugController implements BodyController {
this.rightHandOpen += (openTarget - this.rightHandOpen) * openStep;
// Hands mirror around the cursor; a little apart so both are usable.
- const lhTarget: [number, number] = [clamp01(this.mouseX - 0.12), this.mouseY];
- const rhTarget: [number, number] = [clamp01(this.mouseX + 0.12), this.mouseY];
+ const lhTarget: [number, number] = [
+ clamp01(this.mouseX - 0.12),
+ this.mouseY,
+ ];
+ const rhTarget: [number, number] = [
+ clamp01(this.mouseX + 0.12),
+ this.mouseY,
+ ];
this.joints.leftHand = lerp(this.joints.leftHand, lhTarget, LERP);
this.joints.rightHand = lerp(this.joints.rightHand, rhTarget, LERP);
@@ -145,11 +155,31 @@ export class KeyboardDebugController implements BodyController {
const torsoX = 0.5 + this.leanAmount * 0.28;
const torsoY = 0.5 + this.squatAmount * 0.1;
this.joints.torso = lerp(this.joints.torso, [torsoX, torsoY], LERP);
- this.joints.head = lerp(this.joints.head, [torsoX, 0.18 + this.squatAmount * 0.16], LERP);
- this.joints.leftKnee = lerp(this.joints.leftKnee, [torsoX - 0.08, 0.72 + this.squatAmount * 0.05], LERP);
- this.joints.rightKnee = lerp(this.joints.rightKnee, [torsoX + 0.08, 0.72 + this.squatAmount * 0.05], LERP);
- this.joints.leftFoot = lerp(this.joints.leftFoot, [torsoX - 0.08, 0.95], LERP);
- this.joints.rightFoot = lerp(this.joints.rightFoot, [torsoX + 0.08, 0.95], LERP);
+ this.joints.head = lerp(
+ this.joints.head,
+ [torsoX, 0.18 + this.squatAmount * 0.16],
+ LERP
+ );
+ this.joints.leftKnee = lerp(
+ this.joints.leftKnee,
+ [torsoX - 0.08, 0.72 + this.squatAmount * 0.05],
+ LERP
+ );
+ this.joints.rightKnee = lerp(
+ this.joints.rightKnee,
+ [torsoX + 0.08, 0.72 + this.squatAmount * 0.05],
+ LERP
+ );
+ this.joints.leftFoot = lerp(
+ this.joints.leftFoot,
+ [torsoX - 0.08, 0.95],
+ LERP
+ );
+ this.joints.rightFoot = lerp(
+ this.joints.rightFoot,
+ [torsoX + 0.08, 0.95],
+ LERP
+ );
if (this.moved) {
this.health = "ok";
@@ -158,7 +188,10 @@ export class KeyboardDebugController implements BodyController {
this.trackingQuality = 1;
// Precise-fingertip stand-in tracks the debug hands.
this.leftFingertip = [this.joints.leftHand[0], this.joints.leftHand[1]];
- this.rightFingertip = [this.joints.rightHand[0], this.joints.rightHand[1]];
+ this.rightFingertip = [
+ this.joints.rightHand[0],
+ this.joints.rightHand[1],
+ ];
} else {
this.health = "no_signal";
this.hasRequiredJoints = false;
@@ -179,6 +212,10 @@ export class KeyboardDebugController implements BodyController {
}
}
-function lerp(a: [number, number], b: [number, number], t: number): [number, number] {
+function lerp(
+ a: [number, number],
+ b: [number, number],
+ t: number
+): [number, number] {
return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
}
diff --git a/web/src/sdk/recording.ts b/web/src/sdk/recording.ts
index 5869075..ed59d0d 100644
--- a/web/src/sdk/recording.ts
+++ b/web/src/sdk/recording.ts
@@ -146,7 +146,7 @@ export class CanvasRecorder {
console.warn(
`[motion] Recording as ${mime} — iOS cannot composite WebM. ` +
`Use a browser with MP4/H.264 MediaRecorder support for on-device ` +
- `picture-in-picture; otherwise the iOS device saves two separate clips.`,
+ `picture-in-picture; otherwise the iOS device saves two separate clips.`
);
}
@@ -236,7 +236,7 @@ export class CanvasRecorder {
if (!this.room.peerConnected) {
this.setPhase(
"done",
- `No iOS device connected — clip available as browser download (${mime}).`,
+ `No iOS device connected — clip available as browser download (${mime}).`
);
return;
}
@@ -314,7 +314,7 @@ export class CanvasRecorder {
private async transfer(
blob: Blob,
mime: string,
- durationMs: number,
+ durationMs: number
): Promise {
this.setPhase("transferring");
@@ -381,7 +381,11 @@ function sleep(ms: number): Promise {
/** Wait for the socket send buffer to fall below the high-water mark. */
async function drainBuffer(room: Room): Promise {
let guard = 0;
- while (room.isOpen && room.bufferedAmount > BUFFER_HIGH_WATER && guard < 200) {
+ while (
+ room.isOpen &&
+ room.bufferedAmount > BUFFER_HIGH_WATER &&
+ guard < 200
+ ) {
await sleep(16);
guard++;
}
diff --git a/web/src/sdk/room.ts b/web/src/sdk/room.ts
index edd56ea..14bdc31 100644
--- a/web/src/sdk/room.ts
+++ b/web/src/sdk/room.ts
@@ -40,11 +40,6 @@ export interface RoomEvents {
type Listener = RoomEvents[K];
-/** Normalize a PartyKit host into a bare host:port PartySocket accepts. */
-function hostFrom(url: string): string {
- return url.replace(/^wss?:\/\//, "").replace(/^https?:\/\//, "").replace(/\/$/, "");
-}
-
export class Room {
readonly code: string;
private socket: PartySocket;
@@ -155,7 +150,7 @@ export class Room {
| PingMessage
| RecControlMessage
| RecMetaMessage
- | RecChunkMessage,
+ | RecChunkMessage
): void {
if (this.socket.readyState === WebSocket.OPEN) {
this.socket.send(JSON.stringify(m));
@@ -230,3 +225,11 @@ export class Room {
this.socket.close();
}
}
+
+/** Normalize a PartyKit host into a bare host:port PartySocket accepts. */
+function hostFrom(url: string): string {
+ return url
+ .replace(/^wss?:\/\//, "")
+ .replace(/^https?:\/\//, "")
+ .replace(/\/$/, "");
+}
diff --git a/web/src/sdk/skeleton.ts b/web/src/sdk/skeleton.ts
index e8eef55..76abcb6 100644
--- a/web/src/sdk/skeleton.ts
+++ b/web/src/sdk/skeleton.ts
@@ -26,7 +26,7 @@ const ARM_SIDES: Side[] = [
export function drawSkeleton(
surf: CanvasSurface,
body: BodyController,
- opts: { color?: string; handColor?: string; alpha?: number } = {},
+ opts: { color?: string; handColor?: string; alpha?: number } = {}
): void {
const { ctx } = surf;
const j = body.joints;
@@ -55,25 +55,7 @@ export function drawSkeleton(
// Arms. When the real shoulder+elbow joints are present, draw the bent chain
// shoulder→elbow→hand; otherwise fall back to a straight torso→hand line.
for (const { shoulder, elbow, hand } of ARM_SIDES) {
- const sh = j[shoulder];
- const el = j[elbow];
- const hd = j[hand] as [number, number];
- ctx.beginPath();
- if (sh && el) {
- const [sx, sy] = surf.toPx(sh[0], sh[1]);
- const [ex, ey] = surf.toPx(el[0], el[1]);
- const [hx, hy] = surf.toPx(hd[0], hd[1]);
- ctx.moveTo(sx, sy);
- ctx.lineTo(ex, ey);
- ctx.lineTo(hx, hy);
- } else {
- const from = sh ?? j.torso;
- const [fx, fy] = surf.toPx(from[0], from[1]);
- const [hx, hy] = surf.toPx(hd[0], hd[1]);
- ctx.moveTo(fx, fy);
- ctx.lineTo(hx, hy);
- }
- ctx.stroke();
+ drawArm(ctx, surf, j, shoulder, elbow, hand);
}
// Head
@@ -98,3 +80,33 @@ export function drawSkeleton(
ctx.restore();
}
+
+/** Draw one arm as a shoulder→elbow→hand chain, or a straight torso→hand fallback. */
+function drawArm(
+ ctx: CanvasRenderingContext2D,
+ surf: CanvasSurface,
+ j: BodyController["joints"],
+ shoulder: keyof Joints,
+ elbow: keyof Joints,
+ hand: keyof Joints
+): void {
+ const sh = j[shoulder];
+ const el = j[elbow];
+ const hd = j[hand] as [number, number];
+ ctx.beginPath();
+ if (sh && el) {
+ const [sx, sy] = surf.toPx(sh[0], sh[1]);
+ const [ex, ey] = surf.toPx(el[0], el[1]);
+ const [hx, hy] = surf.toPx(hd[0], hd[1]);
+ ctx.moveTo(sx, sy);
+ ctx.lineTo(ex, ey);
+ ctx.lineTo(hx, hy);
+ } else {
+ const from = sh ?? j.torso;
+ const [fx, fy] = surf.toPx(from[0], from[1]);
+ const [hx, hy] = surf.toPx(hd[0], hd[1]);
+ ctx.moveTo(fx, fy);
+ ctx.lineTo(hx, hy);
+ }
+ ctx.stroke();
+}
diff --git a/web/src/sdk/types.ts b/web/src/sdk/types.ts
index 514959a..e296c3a 100644
--- a/web/src/sdk/types.ts
+++ b/web/src/sdk/types.ts
@@ -38,7 +38,7 @@ export interface Renderer {
/** Draw the player's body skeleton (the shared avatar). */
drawSkeleton(
body: BodyController,
- opts?: { color?: string; handColor?: string; alpha?: number },
+ opts?: { color?: string; handColor?: string; alpha?: number }
): void;
}
diff --git a/web/src/sdk/webcam.ts b/web/src/sdk/webcam.ts
index 2b4f866..3ef32b9 100644
--- a/web/src/sdk/webcam.ts
+++ b/web/src/sdk/webcam.ts
@@ -80,7 +80,7 @@ class OneEuro {
constructor(
private minCutoff = 1.2,
private beta = 1.0,
- private dCutoff = 1.0,
+ private dCutoff = 1.0
) {}
private alpha(dt: number, cutoff: number): number {
const tau = 1 / (2 * Math.PI * cutoff);
@@ -117,7 +117,9 @@ function neutralJoints(): Joints {
// Loose MediaPipe types — the module is imported at runtime from a URL.
type MpLandmark = { x: number; y: number; z: number };
type MpResult = { landmarks?: MpLandmark[][] };
-type MpHandLandmarker = { detectForVideo(video: HTMLVideoElement, ts: number): MpResult };
+type MpHandLandmarker = {
+ detectForVideo(video: HTMLVideoElement, ts: number): MpResult;
+};
export class WebcamController implements BodyController {
joints: Joints = neutralJoints();
@@ -152,7 +154,9 @@ export class WebcamController implements BodyController {
};
constructor() {
- this.status = this.makeStatus("Starting camera… allow access when prompted.");
+ this.status = this.makeStatus(
+ "Starting camera… allow access when prompted."
+ );
void this.init();
}
@@ -221,8 +225,7 @@ export class WebcamController implements BodyController {
} catch (err) {
this.failed = true;
const msg = err instanceof Error ? err.message : String(err);
- this.status.textContent =
- `Camera unavailable: ${msg}. Allow camera access (or pick a camera) and reload.`;
+ this.status.textContent = `Camera unavailable: ${msg}. Allow camera access (or pick a camera) and reload.`;
console.error("[motion] webcam init failed:", err);
}
}
@@ -237,7 +240,10 @@ export class WebcamController implements BodyController {
this.lastDetectAt = nowMs;
this.lastVideoTime = this.video.currentTime;
try {
- this.applyResult(this.landmarker.detectForVideo(this.video, nowMs), nowMs);
+ this.applyResult(
+ this.landmarker.detectForVideo(this.video, nowMs),
+ nowMs
+ );
} catch {
/* a dropped detection frame is harmless — keep last-known */
}
@@ -324,7 +330,7 @@ export class WebcamController implements BodyController {
private applyHand(
which: "left" | "right",
d: { x: number; y: number; open: number; indexTip: MpLandmark | undefined },
- nowMs: number,
+ nowMs: number
): void {
const key = which === "left" ? "leftHand" : "rightHand";
const f = this.filters[which];
@@ -333,17 +339,26 @@ export class WebcamController implements BodyController {
// to the full screen so relaxed movement covers everything.
const fx = f.x.filter(clamp01(d.x), t);
const fy = f.y.filter(clamp01(d.y), t);
- this.joints[key] = [remap(fx, CENTER_X, GAIN_X), remap(fy, CENTER_Y, GAIN_Y)];
+ this.joints[key] = [
+ remap(fx, CENTER_X, GAIN_X),
+ remap(fy, CENTER_Y, GAIN_Y),
+ ];
if (which === "left") {
this.leftHandOpen += (d.open - this.leftHandOpen) * OPEN_SMOOTH;
this.leftFingertip = d.indexTip
- ? [remap(1 - d.indexTip.x, CENTER_X, GAIN_X), remap(d.indexTip.y, CENTER_Y, GAIN_Y)]
+ ? [
+ remap(1 - d.indexTip.x, CENTER_X, GAIN_X),
+ remap(d.indexTip.y, CENTER_Y, GAIN_Y),
+ ]
: undefined;
} else {
this.rightHandOpen += (d.open - this.rightHandOpen) * OPEN_SMOOTH;
this.rightFingertip = d.indexTip
- ? [remap(1 - d.indexTip.x, CENTER_X, GAIN_X), remap(d.indexTip.y, CENTER_Y, GAIN_Y)]
+ ? [
+ remap(1 - d.indexTip.x, CENTER_X, GAIN_X),
+ remap(d.indexTip.y, CENTER_Y, GAIN_Y),
+ ]
: undefined;
}
}