Merge pull request #29 from OllyNicholass/23-guy-fawkes

feat(#23): triggering fireworks when everyone's on board 🎆

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/routes/estimation/[roomId]/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	const changesLog = [
 		{ timestamp: '2024-01-05T00:00:00', message: 'Added the ability to kick a user' },
-		{ timestamp: '2024-01-05T00:00:00', message: 'Added update notes' },
+		{ timestamp: '2024-01-05T00:00:00', message: 'Added update notes' }
 	];
 
 	let newChanges = [];
@@ -36,6 +36,7 @@
 	import EstimateGroupsList from '../../../components/EstimateGroupsList.svelte';
 	import Modal from '../../../components/Modal.svelte';
 	import Estimates from '../../../components/Estimates.svelte';
+	import Fireworks, { type FireworksOptions } from '@fireworks-js/svelte';
 
 	import { connectToWebSocket, sendMessage, generateId } from '../estimation.js';
 
@@ -89,6 +90,19 @@
 	let showEstimates = false;
 	let disableEstimates: boolean = false;
 	let audioElement;
+	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: 1,
+				max: 2
+			}
+		}
+	};
 	let selectedCardSet;
 
 	function closeModal() {
@@ -142,6 +156,16 @@
 		sendMessage(socket, { roomId: data.roomId, type: 'restart-estimation' });
 	}
 
+	function areEstimatesSame(estimateGroups: { [key: number | string]: string[] }): boolean {
+		const estimates = Object.keys(estimateGroups);
+		const users = Object.values(estimateGroups);
+		const allUsers = users.flat();
+
+		if (allUsers.length > 2 && estimates.length === 1) {
+			return true;
+		}
+	}
+
 	function onMessageReceived(message) {
 		if (message.type === 'user-joined') {
 			sendMessage(socket, { type: 'get-user-estimates' });
@@ -166,10 +190,17 @@
 			users = users.filter((user) => user.userId !== message.userId);
 		} else if (message.type === 'estimation-closed') {
 			estimateGroups = message.groupedEstimates;
+			showFireworks = areEstimatesSame(estimateGroups);
+			if (showFireworks) {
+				setTimeout(() => {
+					showFireworks = false;
+				}, 5000);
+			}
 			showRestartButton = true;
 			showEstimates = true;
 			disableEstimates = true;
 		} else if (message.type === 'estimation-restarted') {
+			showFireworks = false;
 			estimateGroups = {};
 			showRestartButton = false;
 			showEstimates = false;
@@ -244,6 +275,12 @@
 	<EstimateGroupsList {estimateGroups} />
 {/if}
 
+{#if showFireworks}
+	<div class="fireworks-container">
+		<Fireworks bind:this={fireworks} options={fireworkOptions} />
+	</div>
+{/if}
+
 <audio src="/call-to-attention-50-percent-volume.mp3" bind:this={audioElement} />
 
 {#if showTooltip && newChanges.length > 0}
@@ -251,10 +288,9 @@
 		<h3>Latest Updates</h3>
 		<ul>
 			{#each newChanges as change (change.timestamp)}
-                <li>{new Date(change.timestamp).toLocaleDateString()}: {change.message}</li>
-            {/each}
+				<li>{new Date(change.timestamp).toLocaleDateString()}: {change.message}</li>
+			{/each}
 		</ul>
-		
 	</div>
 {/if}
 
@@ -344,12 +380,21 @@
 	}
 
 	#tooltip-container ul {
-        list-style-position: inside;
-        padding-left: 0;
+		list-style-position: inside;
+		padding-left: 0;
 		margin-bottom: 0;
-    }
+	}
 
 	#tooltip-container ul li {
-        text-indent: -10px;
-    }
+		text-indent: -10px;
+	}
+
+	.fireworks-container {
+		position: fixed;
+		top: 0;
+		z-index: -1;
+		pointer-events: none;
+		left: 0;
+		right: 0;
+	}
 </style>