feat(#23): update to use fireworks-js

package.json

@@ -27,6 +27,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@fireworks-js/svelte": "^2.10.7",
 		"@joeattardi/emoji-button": "^4.6.4",
 		"uuid": "^9.0.0",
 		"ws": "^8.13.0"

src/components/FireworkShow.svelte

@@ -1,102 +0,0 @@
-<script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
-  import { writable } from 'svelte/store';
-  type Rocket = {
-    id: number;
-    x: string;
-    y: string;
-    colour: string;
-  }
-  const rockets = writable<Rocket[]>([]);
-  let rocketIntervalId;
-  let rocketCount: number = 0;
-
-  function randomLocation(): { x: string; y: string;} {
-    return {
-      x: `${Math.random() * window.innerWidth - window.innerWidth / 2}px`,
-      y: `${Math.random() * window.innerHeight - window.innerHeight / 2}px`,
-    };
-  }
-
-  function randomColour(): string {
-    return `hsl(${Math.floor(Math.random() * 361)}, 100%, 50%)`;
-  }
-
-  function randomTimer(): number {
-    return Math.floor(Math.random() * (150 - 30 + 1)) + 30;
-  }
-
-  function setupRocket(): Rocket {
-    const colour = randomColour();
-    const { x, y } = randomLocation();
-    const newRocket: Rocket = { id: rocketCount++, x, y, colour };
-    return newRocket;
-  }
-
-  function launchRockets() {
-    const newRocket = setupRocket();
-    rockets.update((currentRockets) => {
-      if (currentRockets.length > 25) {
-        // only keep 100 rockets
-        currentRockets.shift();
-      }
-      return [...currentRockets, newRocket]
-    });
-  }
-
-  onMount(() => {
-    rocketIntervalId = setInterval(launchRockets, randomTimer());
-    setTimeout(()=>{ clearInterval(rocketIntervalId) }, 13000)
-	});
-
-  onDestroy(() => {
-    clearInterval(rocketIntervalId);
-  });
-</script>
-
-<style>
-
-  .rocket {
-    --x: 0;
-    --y: 0;
-    background-color: rebeccapurple;
-    border-radius: 50%;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    height: 5px;
-    width: 5px;
-    z-index: -1;
-  }
-
-  .rocket.move {
-    animation: move 1000ms linear forwards;
-  }
-
-  @keyframes move {
-    to {
-      transform: translate(var(--x), var(--y));
-    }
-
-    95% {
-      opacity: 1;
-    }
-
-    100% {
-      opacity: 0;
-    }
-  }
-</style>
-
-<div class="launch-pad">
-  {#each $rockets as rocket (rocket.id)}
-    <span
-      class="rocket move"
-      style="
-        --x: {rocket.x};
-        --y: {rocket.y};
-        background: {rocket.colour};
-      "
-    ></span>
-  {/each}
-</div>

src/routes/estimation/[roomId]/+page.svelte

@@ -36,7 +36,7 @@
 	import EstimateGroupsList from '../../../components/EstimateGroupsList.svelte';
 	import Modal from '../../../components/Modal.svelte';
 	import Estimates from '../../../components/Estimates.svelte';
-	import FireworkShow from '../../../components/FireworkShow.svelte';
+	import Fireworks, { type FireworksOptions } from '@fireworks-js/svelte';
 
 	import { connectToWebSocket, sendMessage, generateId } from '../estimation.js';
 
@@ -90,9 +90,24 @@
 	let showEstimates = false;
 	let disableEstimates: boolean = false;
 	let audioElement;
-	let fireworks;
-	let selectedCardSet;
 	let showFireworks = false;
+	let fireworks: Fireworks
+  let fireworkOptions: FireworksOptions = {
+    opacity: 0.5,
+		sound: {
+			enabled: true,
+			files: [
+        '/sounds/explosion0.mp3',
+        '/sounds/explosion1.mp3',
+        '/sounds/explosion2.mp3'
+      ],
+      volume: {
+        min: 4,
+        max: 8
+      }
+		}
+  }
+	let selectedCardSet;
 
 	function closeModal() {
 		showModal = false;
@@ -180,16 +195,11 @@
 		} else if (message.type === 'estimation-closed') {
 			estimateGroups = message.groupedEstimates;
 			showFireworks = areEstimatesSame(estimateGroups);
-			if (showFireworks) {
-				fireworks.play();
-			}
 			showRestartButton = true;
 			showEstimates = true;
 			disableEstimates = true;
 		} else if (message.type === 'estimation-restarted') {
 			showFireworks = false;
-			fireworks.pause();
-			fireworks.currentTime = 0;
 			estimateGroups = {};
 			showRestartButton = false;
 			showEstimates = false;
@@ -265,11 +275,12 @@
 {/if}
 
 {#if showFireworks}
-	<FireworkShow />
+	<div class="launch-pad">
+		<Fireworks bind:this={fireworks} options={fireworkOptions} />
+	</div>
 {/if}
 
 <audio src="/call-to-attention-50-percent-volume.mp3" bind:this={audioElement} />
-<audio src="/fireworks.mp3" bind:this={fireworks} />
 
 {#if showTooltip && newChanges.length > 0}
 	<div id="tooltip-container" on:click={toggleTooltip}>
@@ -376,4 +387,13 @@
 	#tooltip-container ul li {
 		text-indent: -10px;
 	}
+
+	.launch-pad {
+    position: fixed;
+    top: 0;
+    z-index: -1;
+    pointer-events: none;
+    left: 0;
+    right: 0;
+	}
 </style>