From 3b617fafdd4bd821b0c4e6706a15279d11a24b7b Mon Sep 17 00:00:00 2001 From: syuilo Date: Fri, 6 Jan 2023 13:43:10 +0900 Subject: enhance(client): アップデート時にも花火 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/scripts/confetti.ts | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 packages/frontend/src/scripts/confetti.ts (limited to 'packages/frontend/src/scripts') diff --git a/packages/frontend/src/scripts/confetti.ts b/packages/frontend/src/scripts/confetti.ts new file mode 100644 index 0000000000..2a9f393904 --- /dev/null +++ b/packages/frontend/src/scripts/confetti.ts @@ -0,0 +1,25 @@ +import _confetti from 'canvas-confetti'; +import * as os from '@/os'; + +export function confetti() { + const duration = 1000 * 5; + const animationEnd = Date.now() + duration; + const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: os.claimZIndex('high') }; + + function randomInRange(min, max) { + return Math.random() * (max - min) + min; + } + + const interval = setInterval(() => { + const timeLeft = animationEnd - Date.now(); + + if (timeLeft <= 0) { + return clearInterval(interval); + } + + 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 } })); + _confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } })); + }, 250); +} -- cgit v1.2.3-freya