fuzzyworld

nuts / goo / files / src / main.ts

Branch goo · default branch · all branches

main.ts

Blame: the commit that last changed each line · file · history

44eb5832 2026-04-12 Pavel Safronov1import { CONFIG } from './config'
2import { createPhysicsWorld } from './physics'
3import { createRenderer } from './renderer'
4import { requestMotionPermission, initMotion } from './motion'
937f9abc 2026-04-12 Pavel Safronov5import { initUI, removeStartOverlay, type ItemKind, type GravityMode } from './ui'
98ba5504 2026-04-13 Pavel Safronov6import { unlockVibration, setVibrateEnabled, setVibrateItems, setVibrateEdges } from './vibration'
f1262fd9 2026-04-12 Pavel Safronov7import { dbg, dbgError } from './debug'
8import { checkCompat, showUnsupportedWall } from './compat'
9import {
10 loadSettings, saveSettings,
11 loadSnapshot, saveSnapshot, clearSnapshot,
12} from './persistence'
13import { buildShareURL, parseShareFromURL, placeSharedNuts } from './share'
44eb5832 2026-04-12 Pavel Safronov14
15// ── Bootstrap ──────────────────────────────────────────────────────────────
16
17async function main(): Promise<void> {
f1262fd9 2026-04-12 Pavel Safronov18 const compat = checkCompat()
19 if (!compat.ok) {
20 showUnsupportedWall(compat.reason)
21 return
22 }
23
44eb5832 2026-04-12 Pavel Safronov24 const canvas = document.getElementById('canvas') as HTMLCanvasElement
25
26 // Match canvas to the physical pixel dimensions for crisp rendering on HiDPI
27 const dpr = window.devicePixelRatio || 1
28 let cssWidth = window.innerWidth
29 let cssHeight = window.innerHeight
30
31 function getPixelWidth(): number { return Math.round(cssWidth * dpr) }
32 function getPixelHeight(): number { return Math.round(cssHeight * dpr) }
33
34 canvas.width = getPixelWidth()
35 canvas.height = getPixelHeight()
36 canvas.style.width = `${cssWidth}px`
37 canvas.style.height = `${cssHeight}px`
38
39 // Scale the canvas context so all drawing coordinates are in CSS pixels
40 const ctx = canvas.getContext('2d')!
41 ctx.scale(dpr, dpr)
42
43 // Physics world operates in CSS pixel space
44 const physics = createPhysicsWorld(cssWidth, cssHeight)
45 const renderer = createRenderer(canvas)
46
47 // Correct for the DPR scale we already applied to the context
48 // The renderer draws at CSS px resolution; canvas is scaled by dpr above
49 renderer.resize(getPixelWidth() / dpr, getPixelHeight() / dpr)
50
f1262fd9 2026-04-12 Pavel Safronov51 let currentNutRadius: number = CONFIG.nutBaseRadius
52 let tapsLocked = false
937f9abc 2026-04-12 Pavel Safronov53 let gravityMode: GravityMode = 'device'
54 let vibrateEnabled = true
98ba5504 2026-04-13 Pavel Safronov55 let vibrateItemsEnabled = true
56 let vibrateEdgesEnabled = true
74d506c6 2026-04-12 Pavel Safronov57 let currentKind: ItemKind = 'random'
98ba5504 2026-04-13 Pavel Safronov58 const DEFAULT_RANDOM_POOL: ItemKind[] = ['nut', 'gem', 'balloon', 'metalnut', 'rock']
59 let randomPool: ItemKind[] = [...DEFAULT_RANDOM_POOL]
f1262fd9 2026-04-12 Pavel Safronov60
74d506c6 2026-04-12 Pavel Safronov61 // ── Restore persisted settings ────────────────────────────────────────
f1262fd9 2026-04-12 Pavel Safronov62 const savedSettings = loadSettings()
63 if (savedSettings) {
64 currentNutRadius = savedSettings.nutRadius
937f9abc 2026-04-12 Pavel Safronov65 if (savedSettings.gravityMode === 'tumbler' || savedSettings.gravityMode === 'rock') {
66 gravityMode = savedSettings.gravityMode
67 }
68 if (savedSettings.vibrateEnabled === false) {
69 vibrateEnabled = false
70 setVibrateEnabled(false)
71 }
98ba5504 2026-04-13 Pavel Safronov72 if (savedSettings.vibrateItems === false) {
73 vibrateItemsEnabled = false
74 setVibrateItems(false)
75 }
76 if (savedSettings.vibrateEdges === false) {
77 vibrateEdgesEnabled = false
78 setVibrateEdges(false)
79 }
74d506c6 2026-04-12 Pavel Safronov80 const validKinds: ItemKind[] = ['random', 'nut', 'gem', 'balloon', 'metalnut', 'rock']
81 if (savedSettings.kind && (validKinds as string[]).includes(savedSettings.kind)) {
82 currentKind = savedSettings.kind as ItemKind
83 }
98ba5504 2026-04-13 Pavel Safronov84 if (Array.isArray(savedSettings.randomPool)) {
85 const valid = savedSettings.randomPool.filter(k =>
86 (validKinds as string[]).includes(k) && k !== 'random'
87 ) as ItemKind[]
88 if (valid.length > 0) randomPool = valid
89 }
f1262fd9 2026-04-12 Pavel Safronov90 }
91
92 // ── Restore nut positions (share URL takes priority over snapshot) ────────
b008eb4c 2026-04-12 Pavel Safronov93 const parsedShare = parseShareFromURL()
94 if (parsedShare && (parsedShare.nuts.length > 0 || parsedShare.nutRadius !== null)) {
f1262fd9 2026-04-12 Pavel Safronov95 clearSnapshot()
b008eb4c 2026-04-12 Pavel Safronov96 if (parsedShare.nutRadius !== null) currentNutRadius = parsedShare.nutRadius
97 const sharedNuts = parsedShare.nuts
f1262fd9 2026-04-12 Pavel Safronov98 // hasSpace not available yet — define inline for initial placement
99 const placed: Array<{ x: number; y: number; r: number }> = []
100 function initialHasSpace(x: number, y: number, r: number): boolean {
101 for (const p of placed) {
102 const dx = p.x - x; const dy = p.y - y
103 if (dx * dx + dy * dy < (p.r + r) ** 2) return false
104 }
105 return true
106 }
107 placeSharedNuts(sharedNuts, cssWidth, cssHeight,
108 (x, y, r, kind, gv) => {
109 placed.push({ x, y, r })
110 if (kind === 'gem') physics.addGem(x, y, r, gv)
111 else if (kind === 'balloon') physics.addBalloon(x, y, r, gv)
a2b3b1f4 2026-04-12 Pavel Safronov112 else if (kind === 'metalnut') physics.addMetalNut(x, y, r)
74d506c6 2026-04-12 Pavel Safronov113 else if (kind === 'rock') physics.addRock(x, y, r)
cfe80f49 2026-04-13 Pavel Safronov114 else if (kind === 'stressball') physics.addStressBall(x, y, r, gv)
f1262fd9 2026-04-12 Pavel Safronov115 else physics.addNut(x, y, r)
116 },
117 initialHasSpace,
118 )
119 } else {
120 const snapshot = loadSnapshot()
121 if (snapshot) {
122 for (const n of snapshot.nuts) {
123 const x = n.x * cssWidth
124 const y = n.y * cssHeight
125 if (n.kind === 'gem') physics.addGem(x, y, n.radius, n.gemVariant)
126 else if (n.kind === 'balloon') physics.addBalloon(x, y, n.radius, n.colorIndex)
a2b3b1f4 2026-04-12 Pavel Safronov127 else if (n.kind === 'metalnut') physics.addMetalNut(x, y, n.radius)
74d506c6 2026-04-12 Pavel Safronov128 else if (n.kind === 'rock') physics.addRock(x, y, n.radius)
cfe80f49 2026-04-13 Pavel Safronov129 else if (n.kind === 'stressball') physics.addStressBall(x, y, n.radius, n.colorIndex)
f1262fd9 2026-04-12 Pavel Safronov130 else physics.addNut(x, y, n.radius)
131 }
132 }
133 }
44eb5832 2026-04-12 Pavel Safronov134
135 // ── UI ───────────────────────────────────────────────────────────────────
136 initUI({
f1262fd9 2026-04-12 Pavel Safronov137 initialRadius: currentNutRadius,
138 initialLocked: tapsLocked,
937f9abc 2026-04-12 Pavel Safronov139 initialGravityMode: gravityMode,
140 initialVibrateEnabled: vibrateEnabled,
98ba5504 2026-04-13 Pavel Safronov141 initialVibrateItems: vibrateItemsEnabled,
142 initialVibrateEdges: vibrateEdgesEnabled,
74d506c6 2026-04-12 Pavel Safronov143 initialKind: currentKind,
98ba5504 2026-04-13 Pavel Safronov144 initialRandomPool: randomPool,
f1262fd9 2026-04-12 Pavel Safronov145 onSizeChange: (radius) => {
146 currentNutRadius = radius
98ba5504 2026-04-13 Pavel Safronov147 saveSettings({ nutRadius: currentNutRadius, gravityMode, vibrateEnabled, vibrateItems: vibrateItemsEnabled, vibrateEdges: vibrateEdgesEnabled, kind: currentKind, randomPool })
44eb5832 2026-04-12 Pavel Safronov148 },
f1262fd9 2026-04-12 Pavel Safronov149 onClear: () => {
150 physics.clearNuts()
151 clearSnapshot()
44eb5832 2026-04-12 Pavel Safronov152 },
f1262fd9 2026-04-12 Pavel Safronov153 onLockChange: (locked) => {
154 tapsLocked = locked
98ba5504 2026-04-13 Pavel Safronov155 saveSettings({ nutRadius: currentNutRadius, gravityMode, vibrateEnabled, vibrateItems: vibrateItemsEnabled, vibrateEdges: vibrateEdgesEnabled, kind: currentKind, randomPool })
74d506c6 2026-04-12 Pavel Safronov156 },
157 onKindChange: (kind) => {
158 currentKind = kind
98ba5504 2026-04-13 Pavel Safronov159 saveSettings({ nutRadius: currentNutRadius, gravityMode, vibrateEnabled, vibrateItems: vibrateItemsEnabled, vibrateEdges: vibrateEdgesEnabled, kind: currentKind, randomPool })
f1262fd9 2026-04-12 Pavel Safronov160 },
937f9abc 2026-04-12 Pavel Safronov161 onGravityModeChange: (mode) => {
162 gravityMode = mode
98ba5504 2026-04-13 Pavel Safronov163 saveSettings({ nutRadius: currentNutRadius, gravityMode, vibrateEnabled, vibrateItems: vibrateItemsEnabled, vibrateEdges: vibrateEdgesEnabled, kind: currentKind, randomPool })
937f9abc 2026-04-12 Pavel Safronov164 },
165 onVibrateChange: (enabled) => {
166 vibrateEnabled = enabled
98ba5504 2026-04-13 Pavel Safronov167 saveSettings({ nutRadius: currentNutRadius, gravityMode, vibrateEnabled, vibrateItems: vibrateItemsEnabled, vibrateEdges: vibrateEdgesEnabled, kind: currentKind, randomPool })
168 },
169 onVibrateItemsChange: (enabled) => {
170 vibrateItemsEnabled = enabled
171 saveSettings({ nutRadius: currentNutRadius, gravityMode, vibrateEnabled, vibrateItems: vibrateItemsEnabled, vibrateEdges: vibrateEdgesEnabled, kind: currentKind, randomPool })
172 },
173 onVibrateEdgesChange: (enabled) => {
174 vibrateEdgesEnabled = enabled
175 saveSettings({ nutRadius: currentNutRadius, gravityMode, vibrateEnabled, vibrateItems: vibrateItemsEnabled, vibrateEdges: vibrateEdgesEnabled, kind: currentKind, randomPool })
937f9abc 2026-04-12 Pavel Safronov176 },
98ba5504 2026-04-13 Pavel Safronov177 onRandomPoolChange: (pool) => {
178 randomPool = pool
179 saveSettings({ nutRadius: currentNutRadius, gravityMode, vibrateEnabled, vibrateItems: vibrateItemsEnabled, vibrateEdges: vibrateEdgesEnabled, kind: currentKind, randomPool })
180 },
181 onSettingsOpen: () => { settingsPaused = true },
182 onSettingsClose: () => { settingsPaused = false },
b008eb4c 2026-04-12 Pavel Safronov183 getShareURL: () => buildShareURL(physics.nuts, currentNutRadius),
44eb5832 2026-04-12 Pavel Safronov184 })
185
f1262fd9 2026-04-12 Pavel Safronov186 // ── Helpers ───────────────────────────────────────────────────────────────
48f320c1 2026-04-12 Pavel Safronov187
f1262fd9 2026-04-12 Pavel Safronov188 function hasSpace(x: number, y: number, r: number): boolean {
189 for (const { body, radius } of physics.nuts) {
190 const dx = body.position.x - x
191 const dy = body.position.y - y
192 const minDist = radius + r
193 if (dx * dx + dy * dy < minDist * minDist) return false
194 }
195 return true
196 }
197
198 function tryAddNut(cx: number, cy: number): void {
48f320c1 2026-04-12 Pavel Safronov199 if (tapsLocked) return
f1262fd9 2026-04-12 Pavel Safronov200 if (hasSpace(cx, cy, currentNutRadius)) {
48f320c1 2026-04-12 Pavel Safronov201 let kind = currentKind
202 if (kind === 'random') {
cfe80f49 2026-04-13 Pavel Safronov203 const pool = randomPool.length > 0 ? randomPool : ['nut', 'gem', 'balloon', 'metalnut', 'rock', 'stressball'] as ItemKind[]
98ba5504 2026-04-13 Pavel Safronov204 kind = pool[Math.floor(Math.random() * pool.length)]
48f320c1 2026-04-12 Pavel Safronov205 }
206 if (kind === 'balloon') physics.addBalloon(cx, cy, currentNutRadius)
207 else if (kind === 'gem') physics.addGem(cx, cy, currentNutRadius)
a2b3b1f4 2026-04-12 Pavel Safronov208 else if (kind === 'metalnut') physics.addMetalNut(cx, cy, currentNutRadius)
74d506c6 2026-04-12 Pavel Safronov209 else if (kind === 'rock') physics.addRock(cx, cy, currentNutRadius)
cfe80f49 2026-04-13 Pavel Safronov210 else if (kind === 'stressball') physics.addStressBall(cx, cy, currentNutRadius)
f1262fd9 2026-04-12 Pavel Safronov211 else physics.addNut(cx, cy, currentNutRadius)
212 }
213 }
214
b008eb4c 2026-04-12 Pavel Safronov215
f1262fd9 2026-04-12 Pavel Safronov216 // ── Pointer: tap/drag to add; tap/drag-through to erase ─────────────────
217 // Mode is decided on pointerdown: if we hit an existing item we erase,
218 // otherwise we add. The mode persists until pointerup.
219 let pointerDown = false
220 let eraseMode = false
221
222 canvas.addEventListener('pointerdown', (e: PointerEvent) => {
223 if (tapsLocked) return
224 pointerDown = true
48f320c1 2026-04-12 Pavel Safronov225 try { canvas.setPointerCapture(e.pointerId) } catch { /* ignore */ }
f1262fd9 2026-04-12 Pavel Safronov226 const rect = canvas.getBoundingClientRect()
227 const x = e.clientX - rect.left
228 const y = e.clientY - rect.top
229 eraseMode = physics.removeAt(x, y)
230 if (!eraseMode) tryAddNut(x, y)
231 })
232
233 canvas.addEventListener('pointermove', (e: PointerEvent) => {
234 if (!pointerDown) return
235 const rect = canvas.getBoundingClientRect()
236 const x = e.clientX - rect.left
237 const y = e.clientY - rect.top
238 if (eraseMode) physics.removeAt(x, y)
239 else tryAddNut(x, y)
240 })
241
242 canvas.addEventListener('pointerup', () => { pointerDown = false; eraseMode = false })
243 canvas.addEventListener('pointercancel', () => { pointerDown = false; eraseMode = false })
244
44eb5832 2026-04-12 Pavel Safronov245 // ── Resize ───────────────────────────────────────────────────────────────
246 window.addEventListener('resize', () => {
247 cssWidth = window.innerWidth
248 cssHeight = window.innerHeight
249 canvas.width = getPixelWidth()
250 canvas.height = getPixelHeight()
251 canvas.style.width = `${cssWidth}px`
252 canvas.style.height = `${cssHeight}px`
253 const c = canvas.getContext('2d')!
254 c.scale(dpr, dpr)
255 renderer.resize(cssWidth, cssHeight)
256 physics.resize(cssWidth, cssHeight)
257 })
258
259 // ── Motion (shake + tilt gravity) ────────────────────────────────────────
260 let motionEnabled = false
261
262 function startMotion(): void {
263 if (motionEnabled) return
264 motionEnabled = true
f1262fd9 2026-04-12 Pavel Safronov265 dbg('startMotion, vibrate?', 'vibrate' in navigator, 'protocol:', location.protocol)
937f9abc 2026-04-12 Pavel Safronov266 let lastGx = 0, lastGy = 0
44eb5832 2026-04-12 Pavel Safronov267 initMotion({
268 onShake: (intensity) => {
269 physics.applyShakeForce(intensity)
270 },
271 onOrientation: (gx, gy) => {
937f9abc 2026-04-12 Pavel Safronov272 if (gravityMode === 'device') {
273 physics.setGravity(gx, gy)
274 lastGx = gx; lastGy = gy
275 }
44eb5832 2026-04-12 Pavel Safronov276 },
277 })
278 }
279
f1262fd9 2026-04-12 Pavel Safronov280 // ── Fullscreen + orientation lock ──────────────────────────────────────
281 async function enterFullscreen(): Promise<void> {
282 try {
283 await document.documentElement.requestFullscreen({ navigationUI: 'hide' })
284 } catch {
285 // Not supported or denied – ignore
286 }
287 try {
288 const orientation = screen.orientation as ScreenOrientation & { lock?: (o: string) => Promise<void> }
289 await orientation.lock?.('portrait')
290 } catch {
291 // Not supported (desktop, or browser restriction) – ignore
292 }
293 }
294
295 // ── Fullscreen guard ──────────────────────────────────────────────────────
296 const fullscreenOverlay = document.getElementById('fullscreen-overlay')!
297 document.addEventListener('fullscreenchange', () => {
298 const isFullscreen = !!document.fullscreenElement
299 fullscreenOverlay.hidden = isFullscreen
300 })
301 fullscreenOverlay.addEventListener('click', async () => {
302 await enterFullscreen()
303 })
304
44eb5832 2026-04-12 Pavel Safronov305 // ── Start overlay / permission ────────────────────────────────────────────
306 const startOverlay = document.getElementById('start-overlay')!
307 startOverlay.addEventListener(
308 'click',
309 async () => {
310 try {
311 await requestMotionPermission()
f1262fd9 2026-04-12 Pavel Safronov312 } catch (e) {
313 dbgError('requestMotionPermission failed', e)
44eb5832 2026-04-12 Pavel Safronov314 }
f1262fd9 2026-04-12 Pavel Safronov315 unlockVibration() // must be called from gesture handler
316 await enterFullscreen()
44eb5832 2026-04-12 Pavel Safronov317 startMotion()
318 removeStartOverlay()
319 startLoop()
320 },
321 { once: true }
322 )
323
324 // On non-iOS desktop, start automatically without waiting for tap
325 if (!('ontouchstart' in window)) {
326 // Small delay so the UI paints before we start the loop
327 setTimeout(() => {
328 startMotion()
329 removeStartOverlay()
330 startLoop()
331 }, 400)
332 }
333
98ba5504 2026-04-13 Pavel Safronov334 // ── Slow-frame recovery ───────────────────────────────────────────────
335 const perfOverlay = document.getElementById('perf-overlay')!
336 const perfResetBtn = document.getElementById('perf-reset-btn')!
337 const perfContinueBtn = document.getElementById('perf-continue-btn')!
338 let perfPaused = false
339 const SLOW_FRAME_MS = 5000
340
341 perfResetBtn.addEventListener('click', () => {
342 physics.clearNuts()
343 clearSnapshot()
344 perfOverlay.hidden = true
345 perfPaused = false
346 lastTimestamp = 0
347 requestAnimationFrame(loop)
348 })
349
350 perfContinueBtn.addEventListener('click', () => {
351 perfOverlay.hidden = true
352 perfPaused = false
353 lastTimestamp = 0
354 requestAnimationFrame(loop)
355 })
356
44eb5832 2026-04-12 Pavel Safronov357 // ── Game loop ─────────────────────────────────────────────────────────────
358 let lastTimestamp = 0
359 let loopRunning = false
98ba5504 2026-04-13 Pavel Safronov360 let settingsPaused = false
44eb5832 2026-04-12 Pavel Safronov361
362 function startLoop(): void {
363 if (loopRunning) return
364 loopRunning = true
365 requestAnimationFrame(loop)
366 }
367
368 function loop(timestamp: number): void {
98ba5504 2026-04-13 Pavel Safronov369 // Pause when settings are open
370 if (settingsPaused) {
371 lastTimestamp = 0
372 requestAnimationFrame(loop)
373 return
374 }
375
376 // On mobile: pause physics + vibration when not fullscreen
377 const isMobile = 'ontouchstart' in window
378 const isFullscreen = !!document.fullscreenElement
379 if (isMobile && !isFullscreen) {
380 setVibrateEnabled(false)
381 lastTimestamp = 0
382 requestAnimationFrame(loop)
383 return
384 }
385 if (isMobile && vibrateEnabled) {
386 setVibrateEnabled(true)
387 }
388
44eb5832 2026-04-12 Pavel Safronov389 const delta = lastTimestamp === 0 ? 16.67 : timestamp - lastTimestamp
390 lastTimestamp = timestamp
391
98ba5504 2026-04-13 Pavel Safronov392 // Detect runaway frame time — tab wake-up or physics explosion
393 if (delta > SLOW_FRAME_MS) {
394 perfOverlay.hidden = false
395 perfPaused = true
396 loopRunning = false
397 return
398 }
399
937f9abc 2026-04-12 Pavel Safronov400 // ── Auto-gravity modes ───────────────────────────────────────────────
401 if (gravityMode === 'tumbler') {
74d506c6 2026-04-12 Pavel Safronov402 // Full 360° rotation at 0.1 Hz (10 seconds per revolution)
403 const angle = (timestamp / 1000) * 0.1 * Math.PI * 2
937f9abc 2026-04-12 Pavel Safronov404 physics.setGravity(Math.sin(angle), Math.cos(angle))
405 } else if (gravityMode === 'rock') {
406 // Oscillate ±45° around landscape-down (gravity pointing right in portrait)
407 const centerAngle = Math.PI / 2 // landscape "down" = 90° from vertical
408 const angle = centerAngle + Math.sin((timestamp / 30000) * Math.PI * 2) * (Math.PI / 4)
409 physics.setGravity(Math.sin(angle), Math.cos(angle))
b008eb4c 2026-04-12 Pavel Safronov410 }
411
937f9abc 2026-04-12 Pavel Safronov412 physics.step(delta)
b008eb4c 2026-04-12 Pavel Safronov413
f1262fd9 2026-04-12 Pavel Safronov414 const g = physics.engine.gravity
909551ba 2026-04-13 Pavel Safronov415 renderer.render(physics.nuts, Math.atan2(g.y, g.x) - Math.PI / 2, gravityMode !== 'device', physics.gooConstraints)
f1262fd9 2026-04-12 Pavel Safronov416
417 // Save snapshot every ~3 s
418 if (Math.floor(timestamp / 3000) !== Math.floor((timestamp - delta) / 3000)) {
419 saveSnapshot(physics.nuts, cssWidth, cssHeight)
420 }
44eb5832 2026-04-12 Pavel Safronov421
422 requestAnimationFrame(loop)
423 }
f1262fd9 2026-04-12 Pavel Safronov424
425 // Also save on tab close / navigation
426 window.addEventListener('pagehide', () => {
427 saveSnapshot(physics.nuts, cssWidth, cssHeight)
98ba5504 2026-04-13 Pavel Safronov428 saveSettings({ nutRadius: currentNutRadius, gravityMode, vibrateEnabled, vibrateItems: vibrateItemsEnabled, vibrateEdges: vibrateEdgesEnabled, kind: currentKind, randomPool })
f1262fd9 2026-04-12 Pavel Safronov429 })
44eb5832 2026-04-12 Pavel Safronov430}
431
432main().catch(console.error)