feat(#5): Add the ability to select pre-defined card sets

src/routes/+page.svelte

@@ -1,11 +1,26 @@
 <script>
-	import { generateId } from './estimation/estimation.js';
+	import { onMount } from 'svelte';
+	import { connectToWebSocket, sendMessage, generateId } from './estimation/estimation.js';
 	import { goto } from '$app/navigation';
 
 	let roomId = '';
+	let socket;
+	const cardSets = [
+		{ name: 'Fibonacci', values: [1, 2, 3, 5, 8, 13, 21, '?'], example: '(1, 2, 3, 5)' },
+		{
+			name: 'T-Shirt Sizing',
+			values: ['XS', 'S', 'M', 'L', 'XL', 'XXL', '?'],
+			example: '(XS, S, M, L)'
+		},
+		{ name: 'Powers of 2', values: [1, 2, 4, 8, 16, 32, '?'], example: '(1, 2, 4, 8)' },
+		{ name: 'Sequential', values: [1, 2, 3, 4, 5, 6, 7, 8, 9, '?'], example: '(1, 2, 3, 4)' }
+	];
+
+	let selectedCardSet = cardSets[0];
 
 	function startARoom() {
 		const roomId = generateId();
+		sendMessage(socket, { roomId: roomId, type: 'create-room', cardSetName: selectedCardSet.name });
 		goto(`/estimation/${roomId}`);
 	}
 
@@ -16,12 +31,32 @@
 			goto(`/estimation/${roomId}`);
 		}
 	}
+	function onMessageReceived(message) {
+		
+	}
+
+	onMount(() => {
+		socket = connectToWebSocket(null, onMessageReceived);
+
+		setInterval(() => {
+			if (socket.readyState === WebSocket.OPEN) {
+				socket.send(JSON.stringify({ type: 'ping' }));
+			}
+		}, 45000); // send a ping every 45 seconds
+	});
 </script>
 
 <div class="container">
 	<p>
 		Simply start a room and share the URL to everyone else who needs to join the estimation session.
 	</p>
+	<div class="dropdown">
+		<select on:change={(e) => (selectedCardSet = cardSets[e.target.selectedIndex])}>
+			{#each cardSets as cardSet, i}
+				<option value={i}>{cardSet.name} {cardSet.example}</option>
+			{/each}
+		</select>
+	</div>
 	<button class="button button-green" on:click={startARoom}>Start a room</button>
 	<div class="join-room-container">
 		<label for="room-id">Join a room:</label>

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

@@ -56,11 +56,12 @@
 	let showModal = true;
 	const userId = generateId();
 	let users: Array<User> = [];
-	let estimateGroups: { [key: number]: string[] } = {};
+	let estimateGroups: { [key: number | string]: string[] } = {};
 	let showRestartButton = false;
 	let showEstimates = false;
 	let disableEstimates: boolean = false;
 	let audioElement;
+	let selectedCardSet;
 
 	function closeModal() {
 		showModal = false;
@@ -104,6 +105,8 @@
 		if (message.type === 'user-joined') {
 			sendMessage(socket, { type: 'get-user-estimates' });
 		} else if (message.type === 'user-estimates') {
+			selectedCardSet = message.selectedCardSet.values;
+
 			message.users.forEach((user) => {
 				let updatedUser = users.find((u) => u.userId === user.userId);
 				if (updatedUser === undefined) {
@@ -187,7 +190,7 @@
 	>Share Room Link</button
 >
 
-<Estimates {disableEstimates} onEstimateClick={handleEstimateClick} />
+<Estimates values={selectedCardSet} {disableEstimates} onEstimateClick={handleEstimateClick} />
 
 {#if Object.keys(estimateGroups).length > 0}
 	<EstimateGroupsList {estimateGroups} />