70 lines
1.6 KiB
TypeScript
70 lines
1.6 KiB
TypeScript
import confetti from 'canvas-confetti'
|
|
|
|
export function fireworks(colors?: string[]) {
|
|
return new Promise((resolve) => {
|
|
const duration = 15 * 1000
|
|
const animationEnd = Date.now() + duration
|
|
const defaults = { startVelocity: 60, spread: 360, ticks: 20, zIndex: 0 }
|
|
|
|
function randomInRange(min: number, max: number) {
|
|
return Math.random() * (max - min) + min
|
|
}
|
|
|
|
const interval: any = setInterval(function () {
|
|
const timeLeft = animationEnd - Date.now()
|
|
|
|
if (timeLeft <= 0) {
|
|
clearInterval(interval)
|
|
return resolve(true)
|
|
}
|
|
|
|
const particleCount = 50 * (timeLeft / duration)
|
|
// since particles fall down, start a bit higher than random
|
|
confetti(
|
|
Object.assign({}, defaults, {
|
|
particleCount,
|
|
origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 },
|
|
colors,
|
|
}),
|
|
)
|
|
confetti(
|
|
Object.assign({}, defaults, {
|
|
particleCount,
|
|
origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 },
|
|
colors,
|
|
}),
|
|
)
|
|
}, 250)
|
|
})
|
|
}
|
|
|
|
export function cheer(colors: string[]) {
|
|
return new Promise((resolve) => {
|
|
const end = Date.now() + 2 * 1000
|
|
|
|
function frame() {
|
|
confetti({
|
|
particleCount: 2,
|
|
angle: 60,
|
|
spread: 75,
|
|
origin: { x: 0 },
|
|
colors,
|
|
})
|
|
confetti({
|
|
particleCount: 2,
|
|
angle: 120,
|
|
spread: 75,
|
|
origin: { x: 1 },
|
|
colors,
|
|
})
|
|
|
|
if (Date.now() < end) {
|
|
requestAnimationFrame(frame)
|
|
} else {
|
|
resolve(true)
|
|
}
|
|
}
|
|
frame()
|
|
})
|
|
}
|