Troig

islands/Dashboard.tsx

@@ -9,6 +9,7 @@ import { Button } from '@homeman/components/Button.tsx'
 import { JSX } from 'preact'
 import { confetti } from 'https://esm.sh/@tsparticles/confetti@3.0.3'
 import { useEffect } from 'preact/hooks'
+import { IS_BROWSER } from '$fresh/runtime.ts'
 
 interface Props {
 	users: Record<string, UserWithTodos>
@@ -30,6 +31,63 @@ interface UserSelectButtonProps extends JSX.HTMLAttributes<HTMLInputElement> {
 	user: User
 }
 
+let fireworks: HTMLAudioElement | null
+if (IS_BROWSER) {
+	fireworks = new Audio('/fireworks.mp3')
+}
+
+function excitement() {
+	if (IS_BROWSER) {
+		const count = 200,
+			defaults = {
+				origin: { y: 0.7 },
+			}
+
+		if (fireworks) fireworks.play()
+
+		// deno-lint-ignore no-inner-declarations
+		function fire(particleRatio: number, opts: {
+			spread?: number
+			startVelocity?: number
+			decay?: number
+			scalar?: number
+		}) {
+			confetti(
+				Object.assign({}, defaults, opts, {
+					particleCount: Math.floor(count * particleRatio),
+				}),
+			)
+		}
+
+		fire(0.25, {
+			spread: 26,
+			startVelocity: 55,
+		})
+
+		fire(0.2, {
+			spread: 60,
+		})
+
+		fire(0.35, {
+			spread: 100,
+			decay: 0.91,
+			scalar: 0.8,
+		})
+
+		fire(0.1, {
+			spread: 120,
+			startVelocity: 25,
+			decay: 0.92,
+			scalar: 1.2,
+		})
+
+		fire(0.1, {
+			spread: 120,
+			startVelocity: 45,
+		})
+	}
+}
+
 function UserSelectButton(
 	{ user: { id, name, avatarUrl, color }, tabindex, ...props }:
 		UserSelectButtonProps,
@@ -92,54 +150,7 @@ export default function Dashboard(
 		})
 	}, [])
 
-	useEffect(() => {
-		const fireworks = new Audio('/fireworks.mp3')
-		const count = 200,
-			defaults = {
-				origin: { y: 0.7 },
-			}
-
-		function fire(particleRatio: number, opts: {
-			spread?: number
-			startVelocity?: number
-			decay?: number
-			scalar?: number
-		}) {
-			fireworks.play()
-			confetti(
-				Object.assign({}, defaults, opts, {
-					particleCount: Math.floor(count * particleRatio),
-				}),
-			)
-		}
-
-		fire(0.25, {
-			spread: 26,
-			startVelocity: 55,
-		})
-
-		fire(0.2, {
-			spread: 60,
-		})
-
-		fire(0.35, {
-			spread: 100,
-			decay: 0.91,
-			scalar: 0.8,
-		})
-
-		fire(0.1, {
-			spread: 120,
-			startVelocity: 25,
-			decay: 0.92,
-			scalar: 1.2,
-		})
-
-		fire(0.1, {
-			spread: 120,
-			startVelocity: 45,
-		})
-	})
+	useEffect(excitement)
 
 	useEffect(() => {
 		let es = new EventSource('/api/todo')

islands/Nav.tsx

@@ -5,6 +5,10 @@ import { Bars3Outline } from 'preact-heroicons'
 import { Clock } from '@homeman/islands/Clock.tsx'
 import { Dialog } from '@homeman/components/Dialog.tsx'
 import { useSignal } from '@preact/signals'
+import { IS_BROWSER } from '$fresh/runtime.ts'
+
+let fireworks: HTMLAudioElement | undefined
+if (IS_BROWSER) fireworks = new Audio('/fireworks.mp3')
 
 export function Nav(/* props: {} */) {
 	const showMenu = useSignal(false)
@@ -23,6 +27,12 @@ export function Nav(/* props: {} */) {
 						Daily Routine
 					</a>
 					<a class='p-4 rounded bg-gray-500/20' href='/admin'>Edit Users</a>
+					<button
+						class='p-4 bg-gray-500/20 hover:bg-stone-500/20'
+						onClick={() => IS_BROWSER && fireworks?.play()}
+					>
+						Play Sound
+					</button>
 				</section>
 			</Dialog>
 			<nav class='bg-stone-200 dark:bg-stone-800 flex justify-items-start items-center'>