diff --git a/src/lib/FlySpawner.svelte b/src/lib/FlySpawner.svelte index b03b5b1..792c71d 100644 --- a/src/lib/FlySpawner.svelte +++ b/src/lib/FlySpawner.svelte @@ -11,6 +11,14 @@ const MIN_SPAWN_MS = 10000; const MAX_SPAWN_MS = 120000; + // Preload splat sound so it plays instantly on click + let splatAudio: HTMLAudioElement; + if (typeof window !== 'undefined') { + splatAudio = new Audio('/sfx/flysplat.mp3'); + splatAudio.preload = 'auto'; + splatAudio.load(); + } + interface Fly { id: number; x: number; @@ -73,6 +81,10 @@ } function splatFly(id: number) { + // Play splat sound (clone so overlapping splats all play) + const sfx = splatAudio.cloneNode() as HTMLAudioElement; + sfx.volume = 0.5; + sfx.play().catch(() => {}); flies = flies.map(f => f.id === id && !f.splatted ? { ...f, splatted: true } : f); setTimeout(() => { diff --git a/src/lib/LoginButton.svelte b/src/lib/LoginButton.svelte index 36c438f..b864e28 100644 --- a/src/lib/LoginButton.svelte +++ b/src/lib/LoginButton.svelte @@ -17,11 +17,10 @@ const seed = 'login-btn'; const { svgPath, clipPolygon } = generateWavyOval(seed); const logoutShape = generateWavyOval('logout-btn'); + const inputShape = generateWavyOval('login-input', 46, 38); - function generateWavyOval(s: string): { svgPath: string; clipPolygon: string } { + function generateWavyOval(s: string, rx = 44, ry = 36): { svgPath: string; clipPolygon: string } { const cx = 50, cy = 50; - const rx = 44; - const ry = 36; const amp = 3; const points = 48; @@ -113,15 +112,21 @@ {:else if showInput}
- +
+
+
+ +
+ +