This commit is contained in:
Daniel Flanagan 2024-01-18 14:18:51 -06:00
parent 8488f06405
commit 05f63c7c77
Signed by: lytedev
GPG key ID: 5B2020A0F9921EF4
2 changed files with 69 additions and 48 deletions

View file

@ -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')

View file

@ -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'>