Lane H: ghost replay + title screen
Ghost (src/ghost/):
- format.ts: pure, headless-testable core — int16 (cm position / milli scale)
quantization, base64 localStorage envelope (blobbo:ghost), linear sampling.
- recorder.ts: 15Hz fixed-step recorder, ~5min cap, saves quantized track on a
new best (time <= best, matching game.ts's pre-emit best update).
- player.ts: translucent (~0.35) desaturated ghost + eyes, slight bob, replays
in race time with interpolation; spawns on race:started, despawns on finish.
- install.ts: installGhost(world, blob) wiring both to the frozen race events.
Title (src/ui/title.ts): installTitle(world, {ready}) — CSS bubble-letter
BLOBBO wordmark with paint-drip accents, pitch, controls card, PLAY. Loading
blob-dot while a boot promise is pending. Emits ui:play exactly once inside the
user gesture (audio-unlock friendly), then fades and never returns. Shows saved
best time + "ghost ready".
Demo (demos/lane-h.html + src/demo/lane-h.ts): scripted 20s circle run — title
gates start, run 1 records, later runs replay the ghost on the same path.
Keys: G wipe ghost, R restart, P snapshot.
verify-drift.ts: numeric acceptance (esbuild+node) — max drift 0.0058m vs 0.5m
blob radius. Emits ui:play only; no edits outside owned paths.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
type-two
parent
fedb43817c
commit
ae8a93c417
24
demos/lane-h.html
Normal file
24
demos/lane-h.html
Normal file
@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head><meta charset="utf-8" /><title>BLOBBO lane h demo — ghost + title</title>
|
||||
<style>
|
||||
html,body{margin:0;height:100%;overflow:hidden;background:#0a0c18;font-family:system-ui,sans-serif}
|
||||
#app{width:100%;height:100%}
|
||||
#legend{position:fixed;bottom:12px;right:12px;padding:9px 12px;border-radius:8px;
|
||||
background:rgba(20,24,40,.72);color:#eaf2ff;font-size:12px;line-height:1.55;pointer-events:none;z-index:5}
|
||||
#legend b{color:#ffd60a}
|
||||
#legend .k{display:inline-block;min-width:14px;padding:1px 5px;margin-right:6px;border-radius:4px;
|
||||
background:#354569;color:#fff;font-weight:600;text-align:center}
|
||||
</style></head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<div id="legend">
|
||||
<b>Lane H — ghost + title</b><br>
|
||||
Title → PLAY starts run 1 (records). Later runs replay the ghost.<br>
|
||||
<span class="k">G</span>wipe saved ghost<br>
|
||||
<span class="k">R</span>restart the run<br>
|
||||
<span class="k">P</span>print state snapshot
|
||||
</div>
|
||||
<script type="module" src="/src/demo/lane-h.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
255
src/demo/lane-h.ts
Normal file
255
src/demo/lane-h.ts
Normal file
@ -0,0 +1,255 @@
|
||||
/**
|
||||
* Lane H demo — ghost replay + title screen.
|
||||
*
|
||||
* Self-contained (no game.ts): a scripted "run" drives a ball around a 20s
|
||||
* circle. The title card gates the start (and emits ui:play). Run 1 records the
|
||||
* path; every later run replays the saved ghost racing the live ball around the
|
||||
* SAME deterministic circle, so the translucent ghost should sit right on top
|
||||
* of the solid ball. The recorder persists the best to localStorage, so a page
|
||||
* reload comes back with the ghost already armed on the title.
|
||||
*
|
||||
* Debug keys (browser):
|
||||
* G — wipe the saved ghost from localStorage (blobbo:ghost)
|
||||
* R — restart the run immediately
|
||||
* P — print a one-line state snapshot to the console
|
||||
*
|
||||
* A live "drift" readout compares the replayed ghost against the true circle in
|
||||
* real time; the rigorous numeric check is verify-drift.ts (bundle + node).
|
||||
*/
|
||||
import * as THREE from 'three'
|
||||
import type { Blob, World } from '../contracts'
|
||||
import { defaultModifiers } from '../contracts'
|
||||
import { installTitle } from '../ui/title'
|
||||
import { installGhost } from '../ghost/install'
|
||||
import { clearGhost, hasGhost, loadGhost, sampleAt, type GhostSample, type GhostTrack } from '../ghost/format'
|
||||
|
||||
// ---- the deterministic scripted path (a ball on a circle) -----------------
|
||||
const R = 8 // circle radius (m)
|
||||
const CY = 1.0 // ride height (m)
|
||||
const RUN_SECONDS = 20
|
||||
const OMEGA = (2 * Math.PI) / RUN_SECONDS
|
||||
const BLOB_RADIUS = 0.5
|
||||
|
||||
function pathAt(t: number, out: GhostSample): GhostSample {
|
||||
const th = OMEGA * t - Math.PI / 2 // start near (0,·,-R)
|
||||
out.x = R * Math.cos(th)
|
||||
out.y = CY
|
||||
out.z = R * Math.sin(th)
|
||||
out.scale = 1 + 0.15 * Math.sin(2 * OMEGA * t) // gentle pulse to exercise scale replay
|
||||
return out
|
||||
}
|
||||
|
||||
export function buildLaneH(world: World): {
|
||||
blob: Blob
|
||||
beginRun: () => void
|
||||
wipeGhost: () => void
|
||||
} {
|
||||
const { scene, physics, rapier } = world
|
||||
|
||||
// ---------------------------------------------------------------- scenery
|
||||
const floor = new THREE.Mesh(
|
||||
new THREE.CircleGeometry(R + 4, 64),
|
||||
new THREE.MeshStandardMaterial({ color: '#3a4a63', roughness: 0.95 }),
|
||||
)
|
||||
floor.rotation.x = -Math.PI / 2
|
||||
floor.receiveShadow = true
|
||||
scene.add(floor)
|
||||
|
||||
// the racing line, drawn on the floor so the circle is obvious
|
||||
const ring = new THREE.Mesh(
|
||||
new THREE.RingGeometry(R - 0.12, R + 0.12, 96),
|
||||
new THREE.MeshBasicMaterial({ color: '#ffd60a', side: THREE.DoubleSide }),
|
||||
)
|
||||
ring.rotation.x = -Math.PI / 2
|
||||
ring.position.y = 0.02
|
||||
scene.add(ring)
|
||||
|
||||
// start marker
|
||||
const startMark = new THREE.Mesh(
|
||||
new THREE.BoxGeometry(0.4, 0.05, 2.4),
|
||||
new THREE.MeshBasicMaterial({ color: '#FF6EB4' }),
|
||||
)
|
||||
startMark.position.set(0, 0.03, -R)
|
||||
scene.add(startMark)
|
||||
|
||||
// ---------------------------------------------------------------- the "blob"
|
||||
// A Lane-H-owned stand-in shaped like the frozen Blob: the recorder reads the
|
||||
// root group's position + scale. A kinematic body is created only to satisfy
|
||||
// the Blob type (never stepped; the group is driven directly).
|
||||
const group = new THREE.Group()
|
||||
group.position.set(0, CY, -R)
|
||||
scene.add(group)
|
||||
|
||||
const mesh = new THREE.Mesh(
|
||||
new THREE.SphereGeometry(BLOB_RADIUS, 32, 24),
|
||||
new THREE.MeshStandardMaterial({ color: '#F5F5F7', roughness: 0.4, emissive: '#ffcaa8', emissiveIntensity: 0.15 }),
|
||||
)
|
||||
mesh.castShadow = true
|
||||
group.add(mesh)
|
||||
|
||||
// little eyes so the live ball reads as Blobbo, for contrast with the ghost
|
||||
const eyeMat = new THREE.MeshStandardMaterial({ color: '#1a1a22', roughness: 0.5 })
|
||||
const eyeGeo = new THREE.SphereGeometry(BLOB_RADIUS * 0.16, 12, 10)
|
||||
for (const side of [-1, 1]) {
|
||||
const eye = new THREE.Mesh(eyeGeo, eyeMat)
|
||||
eye.position.set(side * BLOB_RADIUS * 0.34, BLOB_RADIUS * 0.32, BLOB_RADIUS * 0.9)
|
||||
group.add(eye)
|
||||
}
|
||||
|
||||
const body = physics.createRigidBody(
|
||||
rapier.RigidBodyDesc.kinematicPositionBased().setTranslation(0, CY, -R),
|
||||
)
|
||||
const blob: Blob = { group, mesh, body, modifiers: defaultModifiers() }
|
||||
|
||||
// ---------------------------------------------------------------- run driver
|
||||
let running = false
|
||||
let runT = 0
|
||||
let runNo = 0
|
||||
let best: number | null = null
|
||||
let ghostThisRun = false
|
||||
let liveTrack: GhostTrack | null = null
|
||||
let maxDrift = 0
|
||||
const scratchA: GhostSample = { x: 0, y: 0, z: 0, scale: 1 }
|
||||
const scratchB: GhostSample = { x: 0, y: 0, z: 0, scale: 1 }
|
||||
let nextTimer = 0
|
||||
|
||||
// Driver runs as a fixed-step System added BEFORE installGhost, so the
|
||||
// recorder samples this frame's updated group position (insertion order).
|
||||
world.addSystem({
|
||||
update(dt: number): void {
|
||||
if (!running) return
|
||||
runT += dt
|
||||
const tt = Math.min(runT, RUN_SECONDS)
|
||||
pathAt(tt, scratchA)
|
||||
group.position.set(scratchA.x, scratchA.y, scratchA.z)
|
||||
group.scale.setScalar(scratchA.scale)
|
||||
|
||||
if (runT >= RUN_SECONDS) {
|
||||
running = false
|
||||
const time = RUN_SECONDS
|
||||
const isBest = best == null || time < best
|
||||
if (isBest) best = time
|
||||
world.events.emit('race:finished', { time, best })
|
||||
toast(`🏁 run ${runNo} — ${time.toFixed(2)}s${ghostThisRun ? ` · ghost drift ${maxDrift.toFixed(3)}m` : ' (recording)'}`)
|
||||
// auto-loop into the next run
|
||||
window.clearTimeout(nextTimer)
|
||||
nextTimer = window.setTimeout(beginRun, 2200)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------- ghost wiring
|
||||
installGhost(world, blob, { radius: BLOB_RADIUS })
|
||||
|
||||
// Live drift readout: replayed ghost vs the true circle at the same race time.
|
||||
// Registered AFTER installGhost so the ghost has advanced this frame.
|
||||
world.onFrame(() => {
|
||||
if (!running || !ghostThisRun || !liveTrack) return
|
||||
sampleAt(liveTrack, runT, scratchB) // what the ghost replays
|
||||
pathAt(runT, scratchA) // ground truth
|
||||
const d = Math.hypot(scratchA.x - scratchB.x, scratchA.y - scratchB.y, scratchA.z - scratchB.z)
|
||||
if (d > maxDrift) maxDrift = d
|
||||
})
|
||||
|
||||
function beginRun(): void {
|
||||
window.clearTimeout(nextTimer)
|
||||
runT = 0
|
||||
running = true
|
||||
runNo++
|
||||
maxDrift = 0
|
||||
ghostThisRun = hasGhost()
|
||||
liveTrack = ghostThisRun ? loadGhost() : null
|
||||
// snap live ball to the start so recording starts clean
|
||||
pathAt(0, scratchA)
|
||||
group.position.set(scratchA.x, scratchA.y, scratchA.z)
|
||||
group.scale.setScalar(scratchA.scale)
|
||||
world.events.emit('race:started', {})
|
||||
toast(ghostThisRun ? `run ${runNo} — 👻 racing your ghost` : `run ${runNo} — recording…`)
|
||||
}
|
||||
|
||||
function wipeGhost(): void {
|
||||
clearGhost()
|
||||
toast('👻 ghost wiped')
|
||||
updateHud()
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- HUD + toast
|
||||
const hud = document.createElement('div')
|
||||
hud.style.cssText =
|
||||
'position:fixed;top:12px;left:14px;z-index:20;pointer-events:none;' +
|
||||
'font:600 14px ui-monospace,Menlo,monospace;color:#eaf2ff;background:rgba(16,20,34,.7);' +
|
||||
'padding:10px 13px;border-radius:10px;line-height:1.55'
|
||||
document.body.appendChild(hud)
|
||||
|
||||
function updateHud(): void {
|
||||
hud.innerHTML =
|
||||
`<b style="color:#ffd60a">BLOBBO — Lane H ghost demo</b><br>` +
|
||||
`run ${runNo}${running ? ` ⏱ ${Math.min(runT, RUN_SECONDS).toFixed(2)}s` : ''}<br>` +
|
||||
`ghost: ${hasGhost() ? `saved ✓${ghostThisRun ? ' · replaying' : ''}` : 'none'}<br>` +
|
||||
`${ghostThisRun ? `live drift: ${maxDrift.toFixed(3)}m (< ${BLOB_RADIUS}m radius)<br>` : ''}` +
|
||||
`<span style="opacity:.7">keys: G wipe ghost · R restart · P snapshot</span>`
|
||||
}
|
||||
world.onFrame(updateHud)
|
||||
|
||||
let toastEl: HTMLDivElement | null = null
|
||||
let toastTimer = 0
|
||||
function toast(msg: string): void {
|
||||
if (!toastEl) {
|
||||
toastEl = document.createElement('div')
|
||||
toastEl.style.cssText =
|
||||
'position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:20;pointer-events:none;' +
|
||||
'font:700 15px ui-monospace,Menlo,monospace;color:#16264a;background:#ffd60a;' +
|
||||
'padding:9px 16px;border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.4)'
|
||||
document.body.appendChild(toastEl)
|
||||
}
|
||||
toastEl.textContent = msg
|
||||
toastEl.style.opacity = '1'
|
||||
window.clearTimeout(toastTimer)
|
||||
toastTimer = window.setTimeout(() => {
|
||||
if (toastEl) toastEl.style.opacity = '0'
|
||||
}, 2600)
|
||||
}
|
||||
|
||||
function snapshot(): Record<string, unknown> {
|
||||
return {
|
||||
run: runNo,
|
||||
running,
|
||||
t: +runT.toFixed(2),
|
||||
hasGhost: hasGhost(),
|
||||
replaying: ghostThisRun,
|
||||
maxDriftM: +maxDrift.toFixed(4),
|
||||
pos: [+group.position.x.toFixed(2), +group.position.y.toFixed(2), +group.position.z.toFixed(2)],
|
||||
}
|
||||
}
|
||||
|
||||
addEventListener('keydown', (e) => {
|
||||
if (e.code === 'KeyG') wipeGhost()
|
||||
else if (e.code === 'KeyR') beginRun()
|
||||
else if (e.code === 'KeyP') console.log('[lane-h]', JSON.stringify(snapshot()))
|
||||
})
|
||||
|
||||
return { blob, beginRun, wipeGhost }
|
||||
}
|
||||
|
||||
// --------------------------------------------------------------- bootstrap
|
||||
if (typeof document !== 'undefined') {
|
||||
const { createWorld } = await import('../world')
|
||||
const world = await createWorld(document.getElementById('app')!)
|
||||
world.camera.position.set(0, 16, 20)
|
||||
world.onFrame(() => world.camera.lookAt(0, 0.5, 0))
|
||||
|
||||
const h = buildLaneH(world)
|
||||
|
||||
// Title in front. Hand it a short boot promise to show the loading blob dot
|
||||
// before PLAY (the real world is already booted; this just exercises the
|
||||
// loading state). ui:play kicks off the first run exactly once.
|
||||
const boot = new Promise<void>((res) => setTimeout(res, 700))
|
||||
const title = installTitle(world, { ready: boot })
|
||||
title.done.then(() => {
|
||||
console.log('[lane-h] ui:play received — starting run 1')
|
||||
h.beginRun()
|
||||
})
|
||||
|
||||
world.start()
|
||||
console.log('[lane-h] ready — click PLAY, then keys: G wipe ghost · R restart · P snapshot')
|
||||
}
|
||||
184
src/ghost/format.ts
Normal file
184
src/ghost/format.ts
Normal file
@ -0,0 +1,184 @@
|
||||
/**
|
||||
* Ghost track storage + sampling — the pure, headless-testable core shared by
|
||||
* the recorder (writes), the player (reads) and the title (reads best time).
|
||||
*
|
||||
* No three / no DOM here beyond guarded btoa/atob/localStorage, so the drift
|
||||
* verifier (verify-drift.ts) can bundle + run this exact code under `node`.
|
||||
*
|
||||
* Wire storage is int16 centimetres (position) + int16 milli-units (uniform
|
||||
* scale), base64 of the raw Int16Array inside a tiny JSON envelope in
|
||||
* localStorage key `blobbo:ghost`. A full 5-minute run is ~48KB base64, well
|
||||
* under the ~200KB budget.
|
||||
*/
|
||||
|
||||
export const GHOST_KEY = 'blobbo:ghost'
|
||||
export const RECORD_HZ = 15
|
||||
export const MAX_SECONDS = 300 // ~5 min recording cap
|
||||
export const MAX_SAMPLES = MAX_SECONDS * RECORD_HZ // 4500
|
||||
export const FLOATS_PER_SAMPLE = 4 // x, y, z, uniformScale
|
||||
export const POS_SCALE = 100 // metres -> int16 centimetres (±327.67 m range)
|
||||
export const SIZE_SCALE = 1000 // uniform scale -> int16 milli-units (±32.767)
|
||||
|
||||
export interface GhostTrack {
|
||||
time: number // recorded run time (seconds)
|
||||
hz: number // sample rate
|
||||
count: number // number of samples stored
|
||||
data: Int16Array // interleaved [x_cm, y_cm, z_cm, scale_milli] * count
|
||||
}
|
||||
|
||||
export interface GhostSample {
|
||||
x: number
|
||||
y: number
|
||||
z: number
|
||||
scale: number
|
||||
}
|
||||
|
||||
// clamp to int16 so one wild sample can never corrupt the buffer / overflow
|
||||
const i16 = (n: number): number => Math.max(-32768, Math.min(32767, Math.round(n)))
|
||||
|
||||
/** Quantise the first `count` samples of a flat Float32 buffer into int16s. */
|
||||
export function quantize(src: Float32Array, count: number): Int16Array {
|
||||
const out = new Int16Array(count * FLOATS_PER_SAMPLE)
|
||||
for (let i = 0; i < count; i++) {
|
||||
const o = i * FLOATS_PER_SAMPLE
|
||||
out[o] = i16(src[o] * POS_SCALE)
|
||||
out[o + 1] = i16(src[o + 1] * POS_SCALE)
|
||||
out[o + 2] = i16(src[o + 2] * POS_SCALE)
|
||||
out[o + 3] = i16(src[o + 3] * SIZE_SCALE)
|
||||
}
|
||||
return out
|
||||
}
|
||||
|
||||
/**
|
||||
* Linear-interpolate the track at race-time `t` (seconds), writing into `out`
|
||||
* (reused to avoid per-frame allocation). Clamps at both ends: before the run
|
||||
* it sits at the start sample, after the run it freezes on the finish sample.
|
||||
*/
|
||||
export function sampleAt(track: GhostTrack, t: number, out: GhostSample): GhostSample {
|
||||
const { data, count, hz } = track
|
||||
if (count === 0) {
|
||||
out.x = out.y = out.z = 0
|
||||
out.scale = 1
|
||||
return out
|
||||
}
|
||||
const f = Math.max(0, Math.min(count - 1, t * hz))
|
||||
const i0 = Math.floor(f)
|
||||
const i1 = Math.min(count - 1, i0 + 1)
|
||||
const a = f - i0
|
||||
const o0 = i0 * FLOATS_PER_SAMPLE
|
||||
const o1 = i1 * FLOATS_PER_SAMPLE
|
||||
out.x = (data[o0] + (data[o1] - data[o0]) * a) / POS_SCALE
|
||||
out.y = (data[o0 + 1] + (data[o1 + 1] - data[o0 + 1]) * a) / POS_SCALE
|
||||
out.z = (data[o0 + 2] + (data[o1 + 2] - data[o0 + 2]) * a) / POS_SCALE
|
||||
out.scale = (data[o0 + 3] + (data[o1 + 3] - data[o0 + 3]) * a) / SIZE_SCALE
|
||||
return out
|
||||
}
|
||||
|
||||
// ---- base64 <-> bytes (chunked so btoa never blows the arg limit) ----------
|
||||
const B64_CHUNK = 0x8000
|
||||
|
||||
function bytesToB64(bytes: Uint8Array): string {
|
||||
let bin = ''
|
||||
for (let i = 0; i < bytes.length; i += B64_CHUNK) {
|
||||
bin += String.fromCharCode(...bytes.subarray(i, i + B64_CHUNK))
|
||||
}
|
||||
return btoa(bin)
|
||||
}
|
||||
|
||||
function b64ToBytes(b64: string): Uint8Array {
|
||||
const bin = atob(b64)
|
||||
const bytes = new Uint8Array(bin.length)
|
||||
for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i)
|
||||
return bytes
|
||||
}
|
||||
|
||||
// ---- envelope -------------------------------------------------------------
|
||||
interface GhostPayload {
|
||||
v: number // schema version
|
||||
t: number // run time (s)
|
||||
hz: number // sample rate
|
||||
n: number // sample count
|
||||
b: string // base64 of the interleaved int16 buffer
|
||||
}
|
||||
|
||||
export function encodeGhost(track: GhostTrack): string {
|
||||
const view = new Uint8Array(track.data.buffer, track.data.byteOffset, track.data.byteLength)
|
||||
const payload: GhostPayload = {
|
||||
v: 1,
|
||||
t: track.time,
|
||||
hz: track.hz,
|
||||
n: track.count,
|
||||
b: bytesToB64(view),
|
||||
}
|
||||
return JSON.stringify(payload)
|
||||
}
|
||||
|
||||
export function decodeGhost(json: string): GhostTrack | null {
|
||||
try {
|
||||
const p = JSON.parse(json) as Partial<GhostPayload>
|
||||
if (!p || p.v !== 1 || typeof p.b !== 'string') return null
|
||||
const bytes = b64ToBytes(p.b)
|
||||
// ensure an even byte length for Int16Array
|
||||
const len16 = Math.floor(bytes.byteLength / 2)
|
||||
const data = new Int16Array(bytes.buffer, bytes.byteOffset, len16)
|
||||
const count = typeof p.n === 'number' ? p.n : Math.floor(len16 / FLOATS_PER_SAMPLE)
|
||||
return {
|
||||
time: typeof p.t === 'number' ? p.t : count / RECORD_HZ,
|
||||
hz: typeof p.hz === 'number' && p.hz > 0 ? p.hz : RECORD_HZ,
|
||||
count,
|
||||
data,
|
||||
}
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// ---- localStorage (guarded so this module stays runnable headless) --------
|
||||
function store(): Storage | null {
|
||||
try {
|
||||
return typeof localStorage !== 'undefined' ? localStorage : null
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
/** Persist a track. Returns false if storage is unavailable or the write threw. */
|
||||
export function saveGhost(track: GhostTrack): boolean {
|
||||
const s = store()
|
||||
if (!s) return false
|
||||
try {
|
||||
s.setItem(GHOST_KEY, encodeGhost(track))
|
||||
return true
|
||||
} catch {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
export function loadGhost(): GhostTrack | null {
|
||||
const s = store()
|
||||
if (!s) return null
|
||||
const raw = s.getItem(GHOST_KEY)
|
||||
return raw ? decodeGhost(raw) : null
|
||||
}
|
||||
|
||||
export function clearGhost(): void {
|
||||
store()?.removeItem(GHOST_KEY)
|
||||
}
|
||||
|
||||
export function hasGhost(): boolean {
|
||||
return !!store()?.getItem(GHOST_KEY)
|
||||
}
|
||||
|
||||
/** Cheap read of just the saved run time (for the title), without decoding samples. */
|
||||
export function ghostTime(): number | null {
|
||||
const s = store()
|
||||
if (!s) return null
|
||||
const raw = s.getItem(GHOST_KEY)
|
||||
if (!raw) return null
|
||||
try {
|
||||
const p = JSON.parse(raw) as Partial<GhostPayload>
|
||||
return typeof p.t === 'number' ? p.t : null
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
17
src/ghost/index.ts
Normal file
17
src/ghost/index.ts
Normal file
@ -0,0 +1,17 @@
|
||||
/** Lane H — ghost replay. Public surface for integration + the demo. */
|
||||
export { installGhost, type GhostHandles } from './install'
|
||||
export { GhostRecorder } from './recorder'
|
||||
export { GhostPlayer, type GhostPlayerOptions } from './player'
|
||||
export {
|
||||
GHOST_KEY,
|
||||
RECORD_HZ,
|
||||
clearGhost,
|
||||
ghostTime,
|
||||
hasGhost,
|
||||
loadGhost,
|
||||
saveGhost,
|
||||
sampleAt,
|
||||
quantize,
|
||||
type GhostSample,
|
||||
type GhostTrack,
|
||||
} from './format'
|
||||
31
src/ghost/install.ts
Normal file
31
src/ghost/install.ts
Normal file
@ -0,0 +1,31 @@
|
||||
/**
|
||||
* installGhost — wires a recorder + player to the race events. Integration
|
||||
* calls this once, after the blob exists:
|
||||
*
|
||||
* installGhost(world, blob)
|
||||
*
|
||||
* The recorder captures every run and persists the best; the player replays the
|
||||
* saved best on the next race. Both self-subscribe to race:started/finished.
|
||||
*/
|
||||
import type { Blob, World } from '../contracts'
|
||||
import { GhostRecorder } from './recorder'
|
||||
import { GhostPlayer, type GhostPlayerOptions } from './player'
|
||||
|
||||
export interface GhostHandles {
|
||||
recorder: GhostRecorder
|
||||
player: GhostPlayer
|
||||
}
|
||||
|
||||
export function installGhost(
|
||||
world: World,
|
||||
blob: Blob,
|
||||
opts: GhostPlayerOptions = {},
|
||||
): GhostHandles {
|
||||
const recorder = new GhostRecorder(world, blob)
|
||||
world.addSystem(recorder)
|
||||
|
||||
const radius = opts.radius ?? (blob as { radius?: number }).radius ?? 0.5
|
||||
const player = new GhostPlayer(world, { ...opts, radius })
|
||||
|
||||
return { recorder, player }
|
||||
}
|
||||
135
src/ghost/player.ts
Normal file
135
src/ghost/player.ts
Normal file
@ -0,0 +1,135 @@
|
||||
/**
|
||||
* GhostPlayer — if a saved ghost exists, spawns a translucent, physics-free
|
||||
* "past self" on `race:started` and replays the recorded track in race time
|
||||
* with linear interpolation, then despawns on `race:finished` (or the next
|
||||
* respawn, which re-fires race:started and resets it).
|
||||
*
|
||||
* Interpolation runs on the RENDER frame (onFrame) for smoothness; the track
|
||||
* itself was sampled deterministically at 15Hz. The ghost is deliberately
|
||||
* NOT-you: ghostly desaturated white, ~0.35 opacity, faint emissive, a slight
|
||||
* vertical bob.
|
||||
*
|
||||
* Consumes: race:started, race:finished. Emits: nothing.
|
||||
*/
|
||||
import * as THREE from 'three'
|
||||
import type { World } from '../contracts'
|
||||
import { loadGhost, sampleAt, type GhostSample, type GhostTrack } from './format'
|
||||
|
||||
const GHOST_OPACITY = 0.35
|
||||
const BOB_AMPLITUDE = 0.06 // metres
|
||||
const BOB_RATE = 4 // rad/s
|
||||
|
||||
export interface GhostPlayerOptions {
|
||||
/** Visual radius; match the blob so the overlap reads true. Default 0.5. */
|
||||
radius?: number
|
||||
}
|
||||
|
||||
export class GhostPlayer {
|
||||
private group: THREE.Group | null = null
|
||||
private track: GhostTrack | null = null
|
||||
private playing = false
|
||||
private t = 0
|
||||
private bob = 0
|
||||
private readonly radius: number
|
||||
private readonly out: GhostSample = { x: 0, y: 0, z: 0, scale: 1 }
|
||||
private readonly mats: THREE.Material[] = []
|
||||
private readonly geos: THREE.BufferGeometry[] = []
|
||||
|
||||
constructor(
|
||||
private readonly world: World,
|
||||
opts: GhostPlayerOptions = {},
|
||||
) {
|
||||
this.radius = opts.radius ?? 0.5
|
||||
world.events.on('race:started', () => this.spawn())
|
||||
world.events.on('race:finished', () => this.despawn())
|
||||
world.onFrame((dt) => this.update(dt))
|
||||
}
|
||||
|
||||
private build(): THREE.Group {
|
||||
const r = this.radius
|
||||
const g = new THREE.Group()
|
||||
|
||||
const bodyGeo = new THREE.SphereGeometry(r, 32, 24)
|
||||
const bodyMat = new THREE.MeshStandardMaterial({
|
||||
color: '#eaf6ff',
|
||||
emissive: '#bfe6ff',
|
||||
emissiveIntensity: 0.5,
|
||||
roughness: 0.35,
|
||||
metalness: 0.0,
|
||||
transparent: true,
|
||||
opacity: GHOST_OPACITY,
|
||||
depthWrite: false, // translucent: don't occlude the real blob behind it
|
||||
})
|
||||
const body = new THREE.Mesh(bodyGeo, bodyMat)
|
||||
g.add(body)
|
||||
|
||||
// Simple eyes so it reads as a blob (not a soap bubble), slightly less sheer.
|
||||
const eyeGeo = new THREE.SphereGeometry(r * 0.16, 12, 10)
|
||||
const eyeMat = new THREE.MeshStandardMaterial({
|
||||
color: '#2a3a48',
|
||||
transparent: true,
|
||||
opacity: Math.min(1, GHOST_OPACITY + 0.25),
|
||||
depthWrite: false,
|
||||
})
|
||||
for (const side of [-1, 1]) {
|
||||
const eye = new THREE.Mesh(eyeGeo, eyeMat)
|
||||
eye.position.set(side * r * 0.34, r * 0.32, r * 0.9)
|
||||
g.add(eye)
|
||||
}
|
||||
|
||||
g.renderOrder = 2 // composite over the opaque scene
|
||||
this.mats.push(bodyMat, eyeMat)
|
||||
this.geos.push(bodyGeo, eyeGeo)
|
||||
return g
|
||||
}
|
||||
|
||||
private spawn(): void {
|
||||
this.track = loadGhost()
|
||||
if (!this.track || this.track.count < 2) {
|
||||
this.track = null // no ghost yet (e.g. first run ever)
|
||||
return
|
||||
}
|
||||
if (!this.group) {
|
||||
this.group = this.build()
|
||||
this.world.scene.add(this.group)
|
||||
}
|
||||
this.group.visible = true
|
||||
this.t = 0
|
||||
this.bob = 0
|
||||
this.playing = true
|
||||
this.place() // snap to the start pose immediately, no one-frame pop
|
||||
}
|
||||
|
||||
private despawn(): void {
|
||||
this.playing = false
|
||||
if (this.group) this.group.visible = false
|
||||
}
|
||||
|
||||
private place(): void {
|
||||
if (!this.group || !this.track) return
|
||||
sampleAt(this.track, this.t, this.out)
|
||||
const bob = Math.sin(this.bob * BOB_RATE) * BOB_AMPLITUDE
|
||||
this.group.position.set(this.out.x, this.out.y + bob, this.out.z)
|
||||
this.group.scale.setScalar(this.out.scale || 1)
|
||||
}
|
||||
|
||||
private update(dt: number): void {
|
||||
if (!this.playing) return
|
||||
this.t += dt
|
||||
this.bob += dt
|
||||
this.place()
|
||||
}
|
||||
|
||||
/** Fully tear down (scene node + GPU resources). */
|
||||
dispose(): void {
|
||||
if (this.group) {
|
||||
this.world.scene.remove(this.group)
|
||||
this.group = null
|
||||
}
|
||||
for (const m of this.mats) m.dispose()
|
||||
for (const geo of this.geos) geo.dispose()
|
||||
this.mats.length = 0
|
||||
this.geos.length = 0
|
||||
this.playing = false
|
||||
}
|
||||
}
|
||||
90
src/ghost/recorder.ts
Normal file
90
src/ghost/recorder.ts
Normal file
@ -0,0 +1,90 @@
|
||||
/**
|
||||
* GhostRecorder — records the blob root's position + uniform scale at 15Hz
|
||||
* between `race:started` and `race:finished`, and on a new best writes a
|
||||
* quantised, base64 track to localStorage `blobbo:ghost`.
|
||||
*
|
||||
* It is a fixed-step System (added via installGhost) so the 15Hz grid is
|
||||
* deterministic (every 4th 60Hz step) rather than tied to render cadence.
|
||||
*
|
||||
* Consumes: race:started, race:finished {time,best}. Emits: nothing.
|
||||
*/
|
||||
import type { Blob, System, World } from '../contracts'
|
||||
import {
|
||||
FLOATS_PER_SAMPLE,
|
||||
MAX_SAMPLES,
|
||||
RECORD_HZ,
|
||||
quantize,
|
||||
saveGhost,
|
||||
type GhostTrack,
|
||||
} from './format'
|
||||
|
||||
export class GhostRecorder implements System {
|
||||
private readonly buf = new Float32Array(MAX_SAMPLES * FLOATS_PER_SAMPLE)
|
||||
private count = 0
|
||||
private acc = 0
|
||||
private recording = false
|
||||
private readonly period = 1 / RECORD_HZ
|
||||
|
||||
constructor(
|
||||
private readonly world: World,
|
||||
private readonly blob: Blob,
|
||||
) {
|
||||
world.events.on('race:started', () => this.begin())
|
||||
world.events.on('race:finished', (p) => this.finish(p))
|
||||
}
|
||||
|
||||
private begin(): void {
|
||||
this.count = 0
|
||||
this.acc = 0
|
||||
this.recording = true
|
||||
this.capture() // anchor sample at t = 0
|
||||
}
|
||||
|
||||
private capture(): void {
|
||||
if (this.count >= MAX_SAMPLES) {
|
||||
this.recording = false // 5-minute cap reached; keep what we have
|
||||
return
|
||||
}
|
||||
// The blob root (group) carries world position (synced to the rigid body
|
||||
// each fixed step) and the `size` uniform scale — exactly what we replay.
|
||||
const g = this.blob.group
|
||||
const o = this.count * FLOATS_PER_SAMPLE
|
||||
this.buf[o] = g.position.x
|
||||
this.buf[o + 1] = g.position.y
|
||||
this.buf[o + 2] = g.position.z
|
||||
this.buf[o + 3] = g.scale.x
|
||||
this.count++
|
||||
}
|
||||
|
||||
update(dt: number): void {
|
||||
if (!this.recording) return
|
||||
this.acc += dt
|
||||
while (this.acc >= this.period) {
|
||||
this.acc -= this.period
|
||||
this.capture()
|
||||
if (!this.recording) break
|
||||
}
|
||||
}
|
||||
|
||||
private finish(p?: { time?: number; best?: number }): void {
|
||||
if (!this.recording) return
|
||||
this.recording = false
|
||||
this.capture() // pin the exact finish pose
|
||||
|
||||
const time = p?.time ?? this.count / RECORD_HZ
|
||||
const best = p?.best
|
||||
// game.ts sets `best` to the new time BEFORE emitting on a record, so a new
|
||||
// best arrives as time === best. `<=` catches that; a slower run has
|
||||
// best < time and is skipped.
|
||||
const isBest = best == null || time <= best + 1e-6
|
||||
if (!isBest || this.count < 2) return
|
||||
|
||||
const track: GhostTrack = {
|
||||
time,
|
||||
hz: RECORD_HZ,
|
||||
count: this.count,
|
||||
data: quantize(this.buf, this.count),
|
||||
}
|
||||
saveGhost(track)
|
||||
}
|
||||
}
|
||||
104
src/ghost/verify-drift.ts
Normal file
104
src/ghost/verify-drift.ts
Normal file
@ -0,0 +1,104 @@
|
||||
/**
|
||||
* Numeric acceptance for Lane H: ghost replay drift vs the recorded path must be
|
||||
* < one blob radius at all sample points. This mirrors the demo's deterministic
|
||||
* circle, records it at 15Hz through the REAL quantize(), then replays it
|
||||
* through the REAL sampleAt() and reports the worst-case position error.
|
||||
*
|
||||
* Not imported by any entry (headless-only). Run it with:
|
||||
* node_modules/.bin/esbuild src/ghost/verify-drift.ts --bundle --platform=node \
|
||||
* --format=esm --outfile=/tmp/verify.mjs && node /tmp/verify.mjs
|
||||
*/
|
||||
import {
|
||||
FLOATS_PER_SAMPLE,
|
||||
RECORD_HZ,
|
||||
quantize,
|
||||
sampleAt,
|
||||
type GhostSample,
|
||||
type GhostTrack,
|
||||
} from './format'
|
||||
|
||||
// --- the exact same path the demo drives (ball on a circle) ---
|
||||
const R = 8
|
||||
const CY = 1.0
|
||||
const RUN_SECONDS = 20
|
||||
const OMEGA = (2 * Math.PI) / RUN_SECONDS
|
||||
const BLOB_RADIUS = 0.5
|
||||
|
||||
function pathAt(t: number, out: GhostSample): GhostSample {
|
||||
const th = OMEGA * t - Math.PI / 2
|
||||
out.x = R * Math.cos(th)
|
||||
out.y = CY
|
||||
out.z = R * Math.sin(th)
|
||||
out.scale = 1 + 0.15 * Math.sin(2 * OMEGA * t)
|
||||
return out
|
||||
}
|
||||
|
||||
// --- record at 15Hz exactly as GhostRecorder does (grid times i/hz) ---
|
||||
const count = Math.floor(RUN_SECONDS * RECORD_HZ) + 1
|
||||
const buf = new Float32Array(count * FLOATS_PER_SAMPLE)
|
||||
const s: GhostSample = { x: 0, y: 0, z: 0, scale: 1 }
|
||||
for (let i = 0; i < count; i++) {
|
||||
pathAt(i / RECORD_HZ, s)
|
||||
const o = i * FLOATS_PER_SAMPLE
|
||||
buf[o] = s.x
|
||||
buf[o + 1] = s.y
|
||||
buf[o + 2] = s.z
|
||||
buf[o + 3] = s.scale
|
||||
}
|
||||
|
||||
const track: GhostTrack = { time: RUN_SECONDS, hz: RECORD_HZ, count, data: quantize(buf, count) }
|
||||
|
||||
// --- replay and measure drift ---
|
||||
const truth: GhostSample = { x: 0, y: 0, z: 0, scale: 1 }
|
||||
const ghost: GhostSample = { x: 0, y: 0, z: 0, scale: 1 }
|
||||
|
||||
function driftAt(t: number): number {
|
||||
pathAt(t, truth)
|
||||
sampleAt(track, t, ghost)
|
||||
return Math.hypot(truth.x - ghost.x, truth.y - ghost.y, truth.z - ghost.z)
|
||||
}
|
||||
|
||||
// (a) exactly at every recorded sample point (the acceptance wording)
|
||||
let maxAtSamples = 0
|
||||
let worstSampleT = 0
|
||||
for (let i = 0; i < count; i++) {
|
||||
const t = i / RECORD_HZ
|
||||
const d = driftAt(t)
|
||||
if (d > maxAtSamples) {
|
||||
maxAtSamples = d
|
||||
worstSampleT = t
|
||||
}
|
||||
}
|
||||
|
||||
// (b) densely between samples too (interpolation error), 1ms resolution
|
||||
let maxDense = 0
|
||||
let worstDenseT = 0
|
||||
for (let t = 0; t <= RUN_SECONDS; t += 0.001) {
|
||||
const d = driftAt(t)
|
||||
if (d > maxDense) {
|
||||
maxDense = d
|
||||
worstDenseT = t
|
||||
}
|
||||
}
|
||||
|
||||
// scale error, for completeness
|
||||
let maxScaleErr = 0
|
||||
for (let t = 0; t <= RUN_SECONDS; t += 0.001) {
|
||||
pathAt(t, truth)
|
||||
sampleAt(track, t, ghost)
|
||||
maxScaleErr = Math.max(maxScaleErr, Math.abs(truth.scale - ghost.scale))
|
||||
}
|
||||
|
||||
const rawBytes = track.data.byteLength
|
||||
const b64Bytes = Math.ceil(rawBytes / 3) * 4
|
||||
|
||||
console.log('--- Lane H ghost drift verification ---')
|
||||
console.log(`samples: ${count} @ ${RECORD_HZ}Hz storage: ${rawBytes} B int16 → ~${b64Bytes} B base64`)
|
||||
console.log(`blob radius (budget): ${BLOB_RADIUS} m`)
|
||||
console.log(`max drift at sample points : ${maxAtSamples.toFixed(4)} m (t=${worstSampleT.toFixed(3)}s)`)
|
||||
console.log(`max drift densely (1ms) : ${maxDense.toFixed(4)} m (t=${worstDenseT.toFixed(3)}s)`)
|
||||
console.log(`max scale error : ${maxScaleErr.toFixed(5)}`)
|
||||
|
||||
const pass = maxDense < BLOB_RADIUS && maxAtSamples < BLOB_RADIUS
|
||||
console.log(pass ? `PASS — drift < ${BLOB_RADIUS} m everywhere` : 'FAIL — drift exceeds one blob radius')
|
||||
if (!pass) throw new Error('ghost drift exceeds one blob radius')
|
||||
273
src/ui/title.ts
Normal file
273
src/ui/title.ts
Normal file
@ -0,0 +1,273 @@
|
||||
/**
|
||||
* installTitle — the five-second onboarding card + the audio gate.
|
||||
*
|
||||
* Full-screen overlay on boot: bold CSS bubble-letter BLOBBO wordmark with
|
||||
* rainbow paint-drip accents, a one-line pitch, a three-row controls card, and
|
||||
* a fat PLAY button. If the world is still booting (a `ready` promise was
|
||||
* handed in), PLAY is replaced by a wobbling "loading…" blob dot until it
|
||||
* resolves.
|
||||
*
|
||||
* On the first click / keypress / gamepad button it emits **`ui:play`** exactly
|
||||
* once (synchronously, inside the user gesture, so a listening AudioContext can
|
||||
* unlock), fades the overlay out and never shows it again.
|
||||
*
|
||||
* No external fonts or assets — everything is inline CSS. Readable on any
|
||||
* background thanks to the dimming backdrop.
|
||||
*/
|
||||
import type { World } from '../contracts'
|
||||
import { PALETTE } from '../contracts'
|
||||
import { ghostTime, hasGhost } from '../ghost/format'
|
||||
|
||||
export interface TitleOptions {
|
||||
/** Resolves when Rapier/world finished booting. While pending: loading state. */
|
||||
ready?: Promise<unknown>
|
||||
}
|
||||
|
||||
export interface TitleHandle {
|
||||
/** Resolves once the player has started (ui:play fired). */
|
||||
done: Promise<void>
|
||||
/** Force-remove the overlay (teardown / tests). Does not emit ui:play. */
|
||||
remove(): void
|
||||
}
|
||||
|
||||
const STYLE_ID = 'blobbo-title-style'
|
||||
const DRIP_COLORS = [PALETTE.red, PALETTE.yellow, PALETTE.green, PALETTE.blue, PALETTE.pink]
|
||||
|
||||
function injectStyle(): void {
|
||||
if (document.getElementById(STYLE_ID)) return
|
||||
const el = document.createElement('style')
|
||||
el.id = STYLE_ID
|
||||
el.textContent = `
|
||||
#blobbo-title{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;
|
||||
align-items:center;justify-content:center;gap:26px;padding:24px;box-sizing:border-box;
|
||||
background:radial-gradient(120% 120% at 50% 30%,rgba(24,30,54,.72),rgba(10,12,24,.92));
|
||||
backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
|
||||
font-family:'Comic Sans MS','Chalkboard SE','Baloo 2',system-ui,sans-serif;
|
||||
color:#fff;text-align:center;opacity:1;transition:opacity .4s ease}
|
||||
#blobbo-title.hide{opacity:0;pointer-events:none}
|
||||
.blobbo-word{display:flex;gap:.01em;line-height:1;
|
||||
font-weight:900;font-size:clamp(58px,15vw,168px);filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
|
||||
.blobbo-word span{position:relative;color:#fff;
|
||||
-webkit-text-stroke:.085em #16264a;paint-order:stroke fill;
|
||||
text-shadow:0 .05em 0 #16264a,0 .11em .02em rgba(0,0,0,.4);
|
||||
transform:rotate(var(--rot,0deg));
|
||||
animation:blobbo-pop .5s cubic-bezier(.2,1.5,.4,1) both;animation-delay:var(--d,0s)}
|
||||
.blobbo-drip{position:absolute;left:50%;bottom:.04em;width:.15em;height:.2em;
|
||||
transform:translateX(-50%);background:var(--c,#fff);border-radius:0 0 55% 55%/0 0 70% 70%;
|
||||
box-shadow:0 .05em 0 var(--c,#fff);z-index:-1;
|
||||
animation:blobbo-drip 2.8s ease-in-out infinite;animation-delay:var(--dd,0s)}
|
||||
@keyframes blobbo-pop{from{transform:translateY(.25em) rotate(var(--rot,0deg)) scale(.6);opacity:0}
|
||||
to{transform:translateY(0) rotate(var(--rot,0deg)) scale(1);opacity:1}}
|
||||
@keyframes blobbo-drip{0%,100%{transform:translateX(-50%) scaleY(1)}55%{transform:translateX(-50%) scaleY(1.7)}}
|
||||
.blobbo-pitch{font-size:clamp(17px,3.2vw,26px);font-weight:700;letter-spacing:.02em;
|
||||
color:#eaf2ff;text-shadow:0 2px 6px rgba(0,0,0,.6);margin-top:-6px}
|
||||
.blobbo-controls{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:center;
|
||||
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:14px;
|
||||
padding:12px 18px;font-family:ui-monospace,Menlo,monospace;font-size:15px;font-weight:600}
|
||||
.blobbo-controls .row{display:flex;align-items:center;gap:8px;white-space:nowrap}
|
||||
.blobbo-controls .key{display:inline-block;min-width:20px;padding:2px 8px;border-radius:6px;
|
||||
background:#33436b;color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.4);text-align:center}
|
||||
.blobbo-best{font-family:ui-monospace,Menlo,monospace;font-size:15px;font-weight:700;
|
||||
color:#ffd60a;min-height:1.2em}
|
||||
.blobbo-play{cursor:pointer;border:none;font-family:inherit;font-weight:900;
|
||||
font-size:clamp(24px,5vw,40px);color:#16264a;letter-spacing:.04em;
|
||||
padding:.35em 1.3em;border-radius:999px;
|
||||
background:linear-gradient(180deg,#fff,#ffe14d);
|
||||
box-shadow:0 8px 0 #b98a00,0 12px 24px rgba(0,0,0,.4);
|
||||
transform:translateY(0);transition:transform .08s ease,box-shadow .08s ease;
|
||||
animation:blobbo-breathe 2.2s ease-in-out infinite}
|
||||
.blobbo-play:hover{transform:translateY(-2px)}
|
||||
.blobbo-play:active{transform:translateY(6px);box-shadow:0 2px 0 #b98a00,0 4px 10px rgba(0,0,0,.4)}
|
||||
@keyframes blobbo-breathe{0%,100%{scale:1}50%{scale:1.05}}
|
||||
.blobbo-loading{display:flex;flex-direction:column;align-items:center;gap:12px;
|
||||
font-family:ui-monospace,Menlo,monospace;font-size:16px;font-weight:700;color:#eaf2ff}
|
||||
.blobbo-dot{width:34px;height:34px;border-radius:50%;
|
||||
background:radial-gradient(circle at 35% 30%,#fff,#bfe6ff 60%,#7ab6e6);
|
||||
animation:blobbo-wobble 1s ease-in-out infinite}
|
||||
@keyframes blobbo-wobble{0%,100%{transform:translateY(0) scale(1,1)}
|
||||
25%{transform:translateY(-10px) scale(.92,1.1)}
|
||||
55%{transform:translateY(0) scale(1.15,.85)}
|
||||
75%{transform:translateY(-4px) scale(.96,1.05)}}
|
||||
.blobbo-hint{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:rgba(234,242,255,.65)}
|
||||
`
|
||||
document.head.appendChild(el)
|
||||
}
|
||||
|
||||
function buildWordmark(): HTMLElement {
|
||||
const word = document.createElement('div')
|
||||
word.className = 'blobbo-word'
|
||||
word.setAttribute('aria-label', 'BLOBBO')
|
||||
const letters = 'BLOBBO'.split('')
|
||||
// deterministic-ish tilts + a few drips so it reads hand-made, not random.
|
||||
const tilts = [-5, 4, -3, 6, -4, 3]
|
||||
const dripAt = new Set([0, 2, 4]) // under B, O, B
|
||||
letters.forEach((ch, i) => {
|
||||
const span = document.createElement('span')
|
||||
span.textContent = ch
|
||||
span.style.setProperty('--rot', `${tilts[i]}deg`)
|
||||
span.style.setProperty('--d', `${i * 0.06}s`)
|
||||
if (dripAt.has(i)) {
|
||||
const drip = document.createElement('span')
|
||||
drip.className = 'blobbo-drip'
|
||||
drip.style.setProperty('--c', DRIP_COLORS[i % DRIP_COLORS.length])
|
||||
drip.style.setProperty('--dd', `${i * 0.35}s`)
|
||||
span.appendChild(drip)
|
||||
}
|
||||
word.appendChild(span)
|
||||
})
|
||||
return word
|
||||
}
|
||||
|
||||
function buildControls(): HTMLElement {
|
||||
const box = document.createElement('div')
|
||||
box.className = 'blobbo-controls'
|
||||
const rows: Array<[string, string]> = [
|
||||
['WASD / stick', 'move'],
|
||||
['Space / A', 'jump'],
|
||||
['R / Start', 'restart'],
|
||||
]
|
||||
for (const [keys, action] of rows) {
|
||||
const row = document.createElement('div')
|
||||
row.className = 'row'
|
||||
const k = document.createElement('span')
|
||||
k.className = 'key'
|
||||
k.textContent = keys
|
||||
const a = document.createElement('span')
|
||||
a.textContent = action
|
||||
row.append(k, a)
|
||||
box.appendChild(row)
|
||||
}
|
||||
return box
|
||||
}
|
||||
|
||||
export function installTitle(world: World, opts: TitleOptions = {}): TitleHandle {
|
||||
injectStyle()
|
||||
|
||||
const overlay = document.createElement('div')
|
||||
overlay.id = 'blobbo-title'
|
||||
|
||||
overlay.appendChild(buildWordmark())
|
||||
|
||||
const pitch = document.createElement('div')
|
||||
pitch.className = 'blobbo-pitch'
|
||||
pitch.textContent = 'Race. Get painted. Paint is power.'
|
||||
overlay.appendChild(pitch)
|
||||
|
||||
overlay.appendChild(buildControls())
|
||||
|
||||
// saved best + ghost status
|
||||
const best = document.createElement('div')
|
||||
best.className = 'blobbo-best'
|
||||
if (hasGhost()) {
|
||||
const t = ghostTime()
|
||||
best.textContent = t != null ? `best ${t.toFixed(2)}s · 👻 ghost ready` : '👻 ghost ready'
|
||||
}
|
||||
overlay.appendChild(best)
|
||||
|
||||
// action slot: either the loading blob or the PLAY button
|
||||
const slot = document.createElement('div')
|
||||
overlay.appendChild(slot)
|
||||
|
||||
const hint = document.createElement('div')
|
||||
hint.className = 'blobbo-hint'
|
||||
overlay.appendChild(hint)
|
||||
|
||||
document.body.appendChild(overlay)
|
||||
|
||||
// ---- lifecycle -----------------------------------------------------------
|
||||
let armed = false // becomes true once boot completes → input can start play
|
||||
let started = false
|
||||
let resolveDone: () => void = () => {}
|
||||
const done = new Promise<void>((res) => (resolveDone = res))
|
||||
|
||||
const showLoading = (): void => {
|
||||
slot.innerHTML = ''
|
||||
const box = document.createElement('div')
|
||||
box.className = 'blobbo-loading'
|
||||
const dot = document.createElement('div')
|
||||
dot.className = 'blobbo-dot'
|
||||
const label = document.createElement('div')
|
||||
label.textContent = 'loading…'
|
||||
box.append(dot, label)
|
||||
slot.appendChild(box)
|
||||
}
|
||||
|
||||
const playBtn = document.createElement('button')
|
||||
playBtn.className = 'blobbo-play'
|
||||
playBtn.type = 'button'
|
||||
playBtn.textContent = 'PLAY'
|
||||
|
||||
const showPlay = (): void => {
|
||||
slot.innerHTML = ''
|
||||
slot.appendChild(playBtn)
|
||||
hint.textContent = 'click PLAY · or press any key · or a gamepad button'
|
||||
}
|
||||
|
||||
// ---- the single start path ----------------------------------------------
|
||||
const start = (): void => {
|
||||
if (!armed || started) return
|
||||
started = true
|
||||
cleanup()
|
||||
// Emit synchronously within the user gesture so audio can unlock here.
|
||||
world.events.emit('ui:play')
|
||||
overlay.classList.add('hide')
|
||||
resolveDone()
|
||||
// remove from DOM after the fade so it can never reappear or catch input
|
||||
window.setTimeout(() => overlay.remove(), 450)
|
||||
}
|
||||
|
||||
// input wiring (removed on start so ui:play can only fire once)
|
||||
const onKey = (e: KeyboardEvent): void => {
|
||||
if (e.repeat) return
|
||||
start()
|
||||
}
|
||||
const onClick = (): void => start()
|
||||
let padRaf = 0
|
||||
const pollPad = (): void => {
|
||||
if (started) return
|
||||
const pads = typeof navigator !== 'undefined' && navigator.getGamepads ? navigator.getGamepads() : null
|
||||
if (pads) {
|
||||
for (const p of pads) {
|
||||
if (!p || !p.connected) continue
|
||||
if (p.buttons.some((b) => b.pressed)) {
|
||||
start()
|
||||
return
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
padRaf = requestAnimationFrame(pollPad)
|
||||
}
|
||||
|
||||
const cleanup = (): void => {
|
||||
window.removeEventListener('keydown', onKey)
|
||||
playBtn.removeEventListener('click', onClick)
|
||||
if (padRaf) cancelAnimationFrame(padRaf)
|
||||
}
|
||||
|
||||
playBtn.addEventListener('click', onClick)
|
||||
|
||||
const arm = (): void => {
|
||||
if (armed) return
|
||||
armed = true
|
||||
showPlay()
|
||||
window.addEventListener('keydown', onKey)
|
||||
padRaf = requestAnimationFrame(pollPad)
|
||||
}
|
||||
|
||||
if (opts.ready) {
|
||||
showLoading()
|
||||
hint.textContent = 'waking up the physics…'
|
||||
opts.ready.then(arm, arm) // arm even if boot rejects; the game decides what to do
|
||||
} else {
|
||||
arm()
|
||||
}
|
||||
|
||||
return {
|
||||
done,
|
||||
remove(): void {
|
||||
cleanup()
|
||||
overlay.remove()
|
||||
},
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user