feat(*): Disable estimates when estimation closed

src/components/Estimates.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
 	export let values: number[] = [1, 2, 3, 5, 8, 13, 21];
 	export let onEstimateClick: (value: number) => void;
+	export let disableEstimates: boolean = false;
 </script>
 
 <div id="estimates-list">
 	<div class="centered-container">
 		{#each values as value}
 			<button
-				class="estimate-card"
+				disabled={disableEstimates}
+				class="{disableEstimates ? 'estimate-card disabled' : 'estimate-card'}"
 				on:click={() => onEstimateClick(value)}
 				on:keydown={(event) => {
 					if (event.key === 'Enter' || event.key === ' ') {
@@ -41,6 +43,10 @@
 		cursor: pointer;
 	}
 
+	.disabled {
+		background-color: grey;
+	}
+
 	.value {
 		font-size: 24px;
 		font-weight: bold;

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

@@ -61,6 +61,7 @@
 	let estimateGroups: { [key: number]: string[] } = {};
 	let showRestartButton = false;
 	let showEstimates = false;
+	let disableEstimates: boolean = false;
 
 	function closeModal() {
 		showModal = false;
@@ -125,10 +126,12 @@
 			estimateGroups = message.groupedEstimates;
 			showRestartButton = true;
 			showEstimates = true;
+			disableEstimates = true;
 		} else if (message.type === 'estimation-restarted') {
 			estimateGroups = {};
 			showRestartButton = false;
 			showEstimates = false;
+			disableEstimates = false;
 			sendMessage(socket, { type: 'get-user-estimates' });
 		} else if (message.type === 'trigger-emoji') {
 			if (usersList && typeof usersList.triggerEmoji === 'function') {
@@ -184,7 +187,7 @@
 	>Share Room Link</button
 >
 
-<Estimates onEstimateClick={handleEstimateClick} />
+<Estimates {disableEstimates} onEstimateClick={handleEstimateClick} />
 
 {#if Object.keys(estimateGroups).length > 0}
 	<EstimateGroupsList {estimateGroups} />