main.ts

1	import { CONFIG } from './config'
2	import { createPhysicsWorld } from './physics'
3	import { createRenderer } from './renderer'
4	import { requestMotionPermission, initMotion } from './motion'
5	import { initUI, removeStartOverlay, type ItemKind, type GravityMode } from './ui'
6	import { unlockVibration, setVibrateEnabled, setVibrateItems, setVibrateEdges } from './vibration'
7	import { preloadSounds } from './sound'
8	import { dbg, dbgError } from './debug'
9	import { checkCompat, showUnsupportedWall } from './compat'
10	import {
11	loadSettings, saveSettings,
12	loadSnapshot, saveSnapshot, clearSnapshot,
13	} from './persistence'
14	import { buildShareURL, parseShareFromURL, placeSharedNuts } from './share'
15
16	// ── Level nav (active state + navigation) ─────────────────────────────────
17	{
18	const params = new URLSearchParams(window.location.search)
19	const currentLevel = params.get('level') ?? ''
20	for (const btn of document.querySelectorAll<HTMLButtonElement>('.level-btn')) {
21	if (btn.dataset.level === currentLevel) btn.classList.add('active')
22	btn.addEventListener('click', () => {
23	const dest = new URLSearchParams(window.location.search)
24	const target = btn.dataset.level ?? ''
25	if (target) dest.set('level', target)
26	else dest.delete('level')
27	window.location.href = `${window.location.pathname}?${dest}`
28	})
29	}
30	}
31
32	// ── Scene routing ──────────────────────────────────────────────────────────
33	const _scene = new URLSearchParams(window.location.search)
34	if (_scene.has('gallery')) {
35	import('./gallery').then(({ runGallery }) => runGallery())
36	} else if (_scene.get('level') === 'lava') {
37	import('./lavaLamp').then(({ runLavaLamp }) => runLavaLamp())
38	} else {
39
40	// ── Bootstrap ──────────────────────────────────────────────────────────────
41
42	async function main(): Promise<void> {
43	const params = new URLSearchParams(window.location.search)
44	const compat = checkCompat()
45	if (!compat.ok && !params.has('screenshot')) {
46	showUnsupportedWall(compat.reason)
47	return
48	}
49
50	const canvas = document.getElementById('canvas') as HTMLCanvasElement
51
52	// Match canvas to the physical pixel dimensions for crisp rendering on HiDPI
53	const dpr = window.devicePixelRatio \|\| 1
54	let cssWidth = window.innerWidth
55	let cssHeight = window.innerHeight
56
57	function getPixelWidth(): number { return Math.round(cssWidth * dpr) }
58	function getPixelHeight(): number { return Math.round(cssHeight * dpr) }
59
60	canvas.width = getPixelWidth()
61	canvas.height = getPixelHeight()
62	canvas.style.width = `${cssWidth}px`
63	canvas.style.height = `${cssHeight}px`
64
65	// Scale the canvas context so all drawing coordinates are in CSS pixels
66	const ctx = canvas.getContext('2d')!
67	ctx.scale(dpr, dpr)
68
69	// Physics world operates in CSS pixel space
70	const physics = createPhysicsWorld(cssWidth, cssHeight)
71	const renderer = createRenderer(canvas)
72
73	// Correct for the DPR scale we already applied to the context
74	// The renderer draws at CSS px resolution; canvas is scaled by dpr above
75	renderer.resize(getPixelWidth() / dpr, getPixelHeight() / dpr)
76
77	let currentNutRadius: number = CONFIG.nutBaseRadius
78	let tapsLocked = false
79	let gravityMode: GravityMode = 'device'
80	let vibrateEnabled = true
81	let vibrateItemsEnabled = true
82	let vibrateEdgesEnabled = true
83	let currentKind: ItemKind = 'random'
84	const DEFAULT_RANDOM_POOL: ItemKind[] = ['nut', 'gem', 'balloon', 'metalnut', 'rock', 'stressball', 'coin']
85	let randomPool: ItemKind[] = [...DEFAULT_RANDOM_POOL]
86	let refillEnabled = true
87
88	// ── Restore persisted settings ────────────────────────────────────────
89	const savedSettings = loadSettings()
90	if (savedSettings) {
91	currentNutRadius = savedSettings.nutRadius
92	if (savedSettings.gravityMode === 'tumbler' \|\| savedSettings.gravityMode === 'rock') {
93	gravityMode = savedSettings.gravityMode
94	}
95	if (savedSettings.vibrateEnabled === false) {
96	vibrateEnabled = false
97	setVibrateEnabled(false)
98	}
99	if (savedSettings.vibrateItems === false) {
100	vibrateItemsEnabled = false
101	setVibrateItems(false)
102	}
103	if (savedSettings.vibrateEdges === false) {
104	vibrateEdgesEnabled = false
105	setVibrateEdges(false)
106	}
107	const validKinds: ItemKind[] = ['random', 'nut', 'gem', 'balloon', 'metalnut', 'rock', 'stressball', 'coin']
108	if (savedSettings.kind && (validKinds as string[]).includes(savedSettings.kind)) {
109	currentKind = savedSettings.kind as ItemKind
110	}
111	if (Array.isArray(savedSettings.randomPool)) {
112	const valid = savedSettings.randomPool.filter(k =>
113	(validKinds as string[]).includes(k) && k !== 'random'
114	) as ItemKind[]
115	if (valid.length > 0) randomPool = valid
116	}
117	if (savedSettings.refill === false) refillEnabled = false
118	}
119
120	// ── Restore nut positions (share URL takes priority over snapshot) ────────
121	const parsedShare = parseShareFromURL()
122	if (parsedShare && (parsedShare.nuts.length > 0 \|\| parsedShare.nutRadius !== null)) {
123	clearSnapshot()
124	if (parsedShare.nutRadius !== null) currentNutRadius = parsedShare.nutRadius
125	const sharedNuts = parsedShare.nuts
126	// hasSpace not available yet — define inline for initial placement
127	const placed: Array<{ x: number; y: number; r: number }> = []
128	function initialHasSpace(x: number, y: number, r: number): boolean {
129	for (const p of placed) {
130	const dx = p.x - x; const dy = p.y - y
131	if (dx * dx + dy * dy < (p.r + r) ** 2) return false
132	}
133	return true
134	}
135	placeSharedNuts(sharedNuts, cssWidth, cssHeight,
136	(x, y, r, kind, gv) => {
137	placed.push({ x, y, r })
138	if (kind === 'gem') physics.addGem(x, y, r, gv)
139	else if (kind === 'balloon') physics.addBalloon(x, y, r, gv)
140	else if (kind === 'metalnut') physics.addMetalNut(x, y, r)
141	else if (kind === 'rock') physics.addRock(x, y, r)
142	else if (kind === 'stressball') physics.addStressBall(x, y, r, gv)
143	else if (kind === 'coin') physics.addCoin(x, y, r, gv)
144	else physics.addNut(x, y, r)
145	},
146	initialHasSpace,
147	)
148	} else {
149	const snapshot = loadSnapshot()
150	if (snapshot) {
151	for (const n of snapshot.nuts) {
152	const x = n.x * cssWidth
153	const y = n.y * cssHeight
154	if (n.kind === 'gem') physics.addGem(x, y, n.radius, n.gemVariant)
155	else if (n.kind === 'balloon') physics.addBalloon(x, y, n.radius, n.colorIndex)
156	else if (n.kind === 'metalnut') physics.addMetalNut(x, y, n.radius)
157	else if (n.kind === 'rock') physics.addRock(x, y, n.radius)
158	else if (n.kind === 'stressball') physics.addStressBall(x, y, n.radius, n.colorIndex)
159	else if (n.kind === 'coin') physics.addCoin(x, y, n.radius, n.gemVariant)
160	else physics.addNut(x, y, n.radius)
161	}
162	}
163	}
164
165	// ── UI ───────────────────────────────────────────────────────────────────
166
167	function save(): void {
168	saveSettings({ nutRadius: currentNutRadius, gravityMode, vibrateEnabled, vibrateItems: vibrateItemsEnabled, vibrateEdges: vibrateEdgesEnabled, kind: currentKind, randomPool, refill: refillEnabled })
169	}
170
171	initUI({
172	initialRadius: currentNutRadius,
173	initialLocked: tapsLocked,
174	initialGravityMode: gravityMode,
175	initialVibrateEnabled: vibrateEnabled,
176	initialVibrateItems: vibrateItemsEnabled,
177	initialVibrateEdges: vibrateEdgesEnabled,
178	initialKind: currentKind,
179	initialRandomPool: randomPool,
180	initialRefill: refillEnabled,
181	onSizeChange: (radius) => { currentNutRadius = radius; save() },
182	onClear: () => {
183	physics.clearNuts()
184	clearSnapshot()
185	},
186	onLockChange: (locked) => { tapsLocked = locked; save() },
187	onKindChange: (kind) => { currentKind = kind; save() },
188	onGravityModeChange: (mode) => { gravityMode = mode; save() },
189	onVibrateChange: (enabled) => { vibrateEnabled = enabled; save() },
190	onVibrateItemsChange: (enabled) => { vibrateItemsEnabled = enabled; save() },
191	onVibrateEdgesChange: (enabled) => { vibrateEdgesEnabled = enabled; save() },
192	onRandomPoolChange: (pool) => { randomPool = pool; save() },
193	onRefillChange: (enabled) => { refillEnabled = enabled; save() },
194	onSettingsOpen: () => { settingsPaused = true },
195	onSettingsClose: () => { settingsPaused = false },
196	getShareURL: () => buildShareURL(physics.nuts, currentNutRadius),
197	})
198
199	// ── Helpers ───────────────────────────────────────────────────────────────
200
201	function hasSpace(x: number, y: number, r: number): boolean {
202	for (const { body, radius } of physics.nuts) {
203	const dx = body.position.x - x
204	const dy = body.position.y - y
205	const minDist = radius + r
206	if (dx * dx + dy * dy < minDist * minDist) return false
207	}
208	return true
209	}
210
211	function tryAddNut(cx: number, cy: number): void {
212	if (tapsLocked) return
213	if (hasSpace(cx, cy, currentNutRadius)) {
214	let kind = currentKind
215	if (kind === 'random') {
216	const pool = randomPool.length > 0 ? randomPool : ['nut', 'gem', 'balloon', 'metalnut', 'rock', 'stressball'] as ItemKind[]
217	kind = pool[Math.floor(Math.random() * pool.length)]
218	}
219	if (kind === 'balloon') physics.addBalloon(cx, cy, currentNutRadius)
220	else if (kind === 'gem') physics.addGem(cx, cy, currentNutRadius)
221	else if (kind === 'metalnut') physics.addMetalNut(cx, cy, currentNutRadius)
222	else if (kind === 'rock') physics.addRock(cx, cy, currentNutRadius)
223	else if (kind === 'stressball') physics.addStressBall(cx, cy, currentNutRadius)
224	else if (kind === 'coin') physics.addCoin(cx, cy, currentNutRadius)
225	else physics.addNut(cx, cy, currentNutRadius)
226	}
227	}
228
229	function spawnRefill(kind: string, radius: number): void {
230	// Try a few random positions along the top third of the screen
231	for (let attempt = 0; attempt < 20; attempt++) {
232	const x = radius + Math.random() * (cssWidth - radius * 2)
233	const y = radius + Math.random() * (cssHeight * 0.35)
234	if (!hasSpace(x, y, radius)) continue
235	if (kind === 'balloon') physics.addBalloon(x, y, radius)
236	else if (kind === 'rock') physics.addRock(x, y, radius)
237	else if (kind === 'gem') physics.addGem(x, y, radius)
238	else if (kind === 'metalnut') physics.addMetalNut(x, y, radius)
239	else if (kind === 'stressball') physics.addStressBall(x, y, radius)
240	else if (kind === 'coin') physics.addCoin(x, y, radius)
241	else physics.addNut(x, y, radius)
242	return
243	}
244	}
245
246	// ── Refill hook ──────────────────────────────────────────────────────────
247	physics.onRemoved = (kind, radius) => {
248	if (!refillEnabled) return
249	// Delay slightly so the removal settles before we add a new body
250	setTimeout(() => spawnRefill(kind, radius), 600)
251	}
252
253
254	// ── Pointer: tap/drag to add; tap/drag-through to erase ─────────────────
255	// Mode is decided on pointerdown: if we hit an existing item we erase,
256	// otherwise we add. The mode persists until pointerup.
257	let pointerDown = false
258	let eraseMode = false
259
260	canvas.addEventListener('pointerdown', (e: PointerEvent) => {
261	if (tapsLocked) return
262	pointerDown = true
263	try { canvas.setPointerCapture(e.pointerId) } catch { /* ignore */ }
264	const rect = canvas.getBoundingClientRect()
265	const x = e.clientX - rect.left
266	const y = e.clientY - rect.top
267	eraseMode = physics.removeAt(x, y)
268	if (!eraseMode) tryAddNut(x, y)
269	})
270
271	canvas.addEventListener('pointermove', (e: PointerEvent) => {
272	if (!pointerDown) return
273	const rect = canvas.getBoundingClientRect()
274	const x = e.clientX - rect.left
275	const y = e.clientY - rect.top
276	if (eraseMode) physics.removeAt(x, y)
277	else tryAddNut(x, y)
278	})
279
280	canvas.addEventListener('pointerup', () => { pointerDown = false; eraseMode = false })
281	canvas.addEventListener('pointercancel', () => { pointerDown = false; eraseMode = false })
282
283	// ── Resize ───────────────────────────────────────────────────────────────
284	window.addEventListener('resize', () => {
285	cssWidth = window.innerWidth
286	cssHeight = window.innerHeight
287	canvas.width = getPixelWidth()
288	canvas.height = getPixelHeight()
289	canvas.style.width = `${cssWidth}px`
290	canvas.style.height = `${cssHeight}px`
291	const c = canvas.getContext('2d')!
292	c.scale(dpr, dpr)
293	renderer.resize(cssWidth, cssHeight)
294	physics.resize(cssWidth, cssHeight)
295	})
296
297	// ── Motion (shake + tilt gravity) ────────────────────────────────────────
298	let motionEnabled = false
299
300	function startMotion(): void {
301	if (motionEnabled) return
302	motionEnabled = true
303	dbg('startMotion, vibrate?', 'vibrate' in navigator, 'protocol:', location.protocol)
304	initMotion({
305	onShake: (intensity) => {
306	physics.applyShakeForce(intensity)
307	},
308	onOrientation: (gx, gy) => {
309	if (gravityMode === 'device') {
310	physics.setGravity(gx, gy)
311	}
312	},
313	})
314	}
315
316	// ── Fullscreen + orientation lock ──────────────────────────────────────
317	async function enterFullscreen(): Promise<void> {
318	try {
319	await document.documentElement.requestFullscreen({ navigationUI: 'hide' })
320	} catch {
321	// Not supported or denied – ignore
322	}
323	try {
324	const orientation = screen.orientation as ScreenOrientation & { lock?: (o: string) => Promise<void> }
325	await orientation.lock?.('portrait')
326	} catch {
327	// Not supported (desktop, or browser restriction) – ignore
328	}
329	}
330
331	// ── Fullscreen guard ──────────────────────────────────────────────────────
332	const fullscreenOverlay = document.getElementById('fullscreen-overlay')!
333	document.addEventListener('fullscreenchange', () => {
334	const isFullscreen = !!document.fullscreenElement
335	fullscreenOverlay.hidden = isFullscreen
336	})
337	fullscreenOverlay.addEventListener('click', async () => {
338	await enterFullscreen()
339	})
340
341	// ── Start overlay / permission ────────────────────────────────────────────
342	const startOverlay = document.getElementById('start-overlay')!
343	startOverlay.addEventListener(
344	'click',
345	async () => {
346	try {
347	await requestMotionPermission()
348	} catch (e) {
349	dbgError('requestMotionPermission failed', e)
350	}
351	unlockVibration() // must be called from gesture handler
352	preloadSounds() // kick off audio fetch after first gesture (autoplay policy)
353	await enterFullscreen()
354	startMotion()
355	removeStartOverlay()
356	startLoop()
357	},
358	{ once: true }
359	)
360
361	// On non-iOS desktop, start automatically without waiting for tap
362	if (!('ontouchstart' in window)) {
363	// Small delay so the UI paints before we start the loop
364	setTimeout(() => {
365	startMotion()
366	removeStartOverlay()
367	startLoop()
368	}, 400)
369	}
370
371	// ── Slow-frame recovery ───────────────────────────────────────────────
372	const perfOverlay = document.getElementById('perf-overlay')!
373	const perfResetBtn = document.getElementById('perf-reset-btn')!
374	const perfContinueBtn = document.getElementById('perf-continue-btn')!
375	let perfPaused = false
376	const SLOW_FRAME_MS = 5000
377
378	perfResetBtn.addEventListener('click', () => {
379	physics.clearNuts()
380	clearSnapshot()
381	perfOverlay.hidden = true
382	perfPaused = false
383	lastTimestamp = 0
384	requestAnimationFrame(loop)
385	})
386
387	perfContinueBtn.addEventListener('click', () => {
388	perfOverlay.hidden = true
389	perfPaused = false
390	lastTimestamp = 0
391	requestAnimationFrame(loop)
392	})
393
394	// ── Game loop ─────────────────────────────────────────────────────────────
395	let lastTimestamp = 0
396	let loopRunning = false
397	let settingsPaused = false
398
399	function startLoop(): void {
400	if (loopRunning) return
401	loopRunning = true
402	requestAnimationFrame(loop)
403	}
404
405	function loop(timestamp: number): void {
406	// Pause when settings are open
407	if (settingsPaused) {
408	lastTimestamp = 0
409	requestAnimationFrame(loop)
410	return
411	}
412
413	// On mobile: pause physics + vibration when not fullscreen
414	const isMobile = 'ontouchstart' in window
415	const isFullscreen = !!document.fullscreenElement
416	if (isMobile && !isFullscreen) {
417	setVibrateEnabled(false)
418	lastTimestamp = 0
419	requestAnimationFrame(loop)
420	return
421	}
422	if (isMobile && vibrateEnabled) {
423	setVibrateEnabled(true)
424	}
425
426	const delta = lastTimestamp === 0 ? 16.67 : timestamp - lastTimestamp
427	lastTimestamp = timestamp
428
429	// Detect runaway frame time — tab wake-up or physics explosion
430	if (delta > SLOW_FRAME_MS) {
431	perfOverlay.hidden = false
432	perfPaused = true
433	loopRunning = false
434	return
435	}
436
437	// ── Auto-gravity modes ───────────────────────────────────────────────
438	if (gravityMode === 'tumbler') {
439	// Full 360° rotation at 0.1 Hz (10 seconds per revolution)
440	const angle = (timestamp / 1000) * 0.1 * Math.PI * 2
441	physics.setGravity(Math.sin(angle), Math.cos(angle))
442	} else if (gravityMode === 'rock') {
443	// Oscillate ±45° around landscape-down (gravity pointing right in portrait)
444	const centerAngle = Math.PI / 2 // landscape "down" = 90° from vertical
445	const angle = centerAngle + Math.sin((timestamp / 30000) * Math.PI * 2) * (Math.PI / 4)
446	physics.setGravity(Math.sin(angle), Math.cos(angle))
447	}
448
449	physics.step(delta)
450
451	const g = physics.engine.gravity
452	renderer.render(physics.nuts, Math.atan2(g.y, g.x) - Math.PI / 2, gravityMode !== 'device')
453
454	// Save snapshot every ~3 s
455	if (Math.floor(timestamp / 3000) !== Math.floor((timestamp - delta) / 3000)) {
456	saveSnapshot(physics.nuts, cssWidth, cssHeight)
457	}
458
459	requestAnimationFrame(loop)
460	}
461
462	// Also save on tab close / navigation
463	window.addEventListener('pagehide', () => {
464	saveSnapshot(physics.nuts, cssWidth, cssHeight)
465	saveSettings({ nutRadius: currentNutRadius, gravityMode, vibrateEnabled, vibrateItems: vibrateItemsEnabled, vibrateEdges: vibrateEdgesEnabled, kind: currentKind, randomPool, refill: refillEnabled })
466	})
467	}
468
469	main().catch(console.error)
470	}