Merge pull request #33 from jcreek/32-if-there-is-a-wide-range-of-estimates-flag-lack-of-understanding

32 if there is a wide range of estimates flag lack of understanding

src/components/Modal.svelte

@@ -1,79 +1,30 @@
 <script>
-	export let closeModal;
+	export let showModal = false;
-	export let joinRoom;
+	export let heading = '';
+	export let body = '';
 
-	let userName = '';
+	function handleOverlayClick(event) {
-	let rememberName = false;
+		if (event.target.id === 'modal-overlay') {
-  
+			showModal = false;
-	function handleNameChange(event) {
-	  userName = event.target.value;
-	}
-  
-	function handleSubmit() {
-	  if (userName.trim() !== '') {
-		joinRoom(userName);
-		if (rememberName && typeof localStorage !== 'undefined') {
-		  localStorage.setItem('userName', userName);
-		  localStorage.setItem('rememberName', true);
-		} else if (typeof localStorage !== 'undefined') {
-		  localStorage.removeItem('userName');
-		  localStorage.removeItem('rememberName');
 		}
-		closeModal();
-	  }
 	}
-  
+</script>
-	function handleRememberChange(event) {
-	  rememberName = event.target.checked;
-	}
-  
-	$: userName = typeof localStorage !== 'undefined' ? localStorage.getItem('userName') || '' : '';
-	$: rememberName = typeof localStorage !== 'undefined' ? localStorage.getItem('rememberName') === 'true' : false;
-  </script>
 
 <div class="modal-container">
-	<div class="modal-overlay">
+	<div
+		id="modal-overlay"
+		on:click={handleOverlayClick}
+		on:keydown={handleOverlayKeydown}
+		aria-modal="true"
+	>
 		<div class="modal">
-			<h2>Enter Your Name</h2>
+			<h2>{heading}</h2>
-			<p>Try clicking on someone's card...</p>
+			<p>{body}</p>
-			<div class="input-container">
-				<input
-					type="text"
-					placeholder="Your name"
-					bind:value={userName}
-					on:input={handleNameChange}
-					on:keydown={(event) => {
-						if (event.key === 'Enter') {
-							event.preventDefault();
-							handleSubmit();
-						}
-					}}
-				/>
-				<label class="rememberme">
-					<input type="checkbox" bind:checked={rememberName} on:change={handleRememberChange} />
-					Remember my name
-				</label>
-			</div>
-			<div class="button-container">
-				<button on:click={handleSubmit}>Save</button>
-			</div>
-			<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5812114745839139"
-				crossorigin="anonymous"></script>
-			<!-- Name Entry - Square Ad -->
-			<ins class="adsbygoogle"
-				style="display:block"
-				data-ad-client="ca-pub-5812114745839139"
-				data-ad-slot="5531796845"
-				data-ad-format="auto"
-				data-full-width-responsive="true"></ins>
-			<script>
-				(adsbygoogle = window.adsbygoogle || []).push({});
-			</script>
 		</div>
 	</div>
 </div>
 
-<style>
+<style scoped>
 	.modal-container {
 		display: flex;
 		justify-content: center;
@@ -81,7 +32,7 @@
 		height: 100%;
 	}
 
-	.modal-overlay {
+	#modal-overlay {
 		position: fixed;
 		top: 0;
 		left: 0;

src/components/UserNameModal.svelte

@@ -0,0 +1,160 @@
+<script>
+	export let closeModal;
+	export let joinRoom;
+  
+	let userName = '';
+	let rememberName = false;
+  
+	function handleNameChange(event) {
+	  userName = event.target.value;
+	}
+  
+	function handleSubmit() {
+	  if (userName.trim() !== '') {
+		joinRoom(userName);
+		if (rememberName && typeof localStorage !== 'undefined') {
+		  localStorage.setItem('userName', userName);
+		  localStorage.setItem('rememberName', true);
+		} else if (typeof localStorage !== 'undefined') {
+		  localStorage.removeItem('userName');
+		  localStorage.removeItem('rememberName');
+		}
+		closeModal();
+	  }
+	}
+  
+	function handleRememberChange(event) {
+	  rememberName = event.target.checked;
+	}
+  
+	$: userName = typeof localStorage !== 'undefined' ? localStorage.getItem('userName') || '' : '';
+	$: rememberName = typeof localStorage !== 'undefined' ? localStorage.getItem('rememberName') === 'true' : false;
+  </script>
+
+<div class="modal-container">
+	<div class="modal-overlay">
+		<div class="modal">
+			<h2>Enter Your Name</h2>
+			<p>Try clicking on someone's card...</p>
+			<div class="input-container">
+				<input
+					type="text"
+					placeholder="Your name"
+					bind:value={userName}
+					on:input={handleNameChange}
+					on:keydown={(event) => {
+						if (event.key === 'Enter') {
+							event.preventDefault();
+							handleSubmit();
+						}
+					}}
+				/>
+				<label class="rememberme">
+					<input type="checkbox" bind:checked={rememberName} on:change={handleRememberChange} />
+					Remember my name
+				</label>
+			</div>
+			<div class="button-container">
+				<button on:click={handleSubmit}>Save</button>
+			</div>
+			<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5812114745839139"
+				crossorigin="anonymous"></script>
+			<!-- Name Entry - Square Ad -->
+			<ins class="adsbygoogle"
+				style="display:block"
+				data-ad-client="ca-pub-5812114745839139"
+				data-ad-slot="5531796845"
+				data-ad-format="auto"
+				data-full-width-responsive="true"></ins>
+			<script>
+				(adsbygoogle = window.adsbygoogle || []).push({});
+			</script>
+		</div>
+	</div>
+</div>
+
+<style>
+	.modal-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+	}
+
+	.modal-overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.modal {
+		background-color: white;
+		padding: 1rem;
+		border-radius: 0.5rem;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+	}
+
+	.input-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-bottom: 1rem;
+	}
+
+	input[type='text'] {
+		font-size: 1.2rem;
+		padding: 0.5rem;
+		border-radius: 0.25rem;
+		border: 1px solid gray;
+		margin-bottom: 0.5rem;
+		width: 100%;
+		max-width: 20rem;
+	}
+
+	label {
+		font-size: 1rem;
+		margin-bottom: 0.5rem;
+		text-align: center;
+	}
+
+	button {
+		font-size: 1.2rem;
+		padding: 0.5rem 1rem;
+		border-radius: 0.25rem;
+		background-color: #007acc;
+		color: white;
+		border: none;
+		cursor: pointer;
+		transition: background-color 0.2s ease-in-out;
+		width: 100%;
+		max-width: 20rem;
+	}
+
+	button:hover {
+		background-color: #005f8a;
+	}
+
+	p {
+		font-size: 1rem;
+		font-style: italic;
+		color: gray;
+		margin-top: 0.5rem;
+	}
+
+	h2 {
+		margin-bottom: 0px;
+	}
+
+	.modal {
+		color: #333;
+	}
+</style>

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

@@ -1,5 +1,10 @@
 <script lang="ts">
 	const changesLog = [
+		{
+			timestamp: '2024-06-20T19:36:00',
+			message:
+				'Added message to prompt users to discuss the topic further if estimates are widely varied'
+		},
 		{
 			timestamp: '2024-04-04T12:35:00',
 			message: 'Added fix to ensure that kicking a user always works'
@@ -43,6 +48,7 @@
 	import UsersList from '../../../components/UsersList.svelte';
 	import EstimateGroupsList from '../../../components/EstimateGroupsList.svelte';
 	import Modal from '../../../components/Modal.svelte';
+	import UserNameModal from '../../../components/UserNameModal.svelte';
 	import Estimates from '../../../components/Estimates.svelte';
 	import Fireworks, { type FireworksOptions } from '@fireworks-js/svelte';
 
@@ -99,6 +105,7 @@
 	let disableEstimates: boolean = false;
 	let audioElement;
 	let showFireworks = false;
+	let showLackOfUnderstandingMessage = false;
 	let fireworks: Fireworks;
 	let fireworkOptions: FireworksOptions = {
 		opacity: 0.5,
@@ -174,6 +181,14 @@
 		}
 	}
 
+	function areEstimatesWidelyVaried(estimateGroups: { [key: number | string]: string[] }): boolean {
+		const estimates = Object.keys(estimateGroups);
+
+		if (estimates.length >= 4) {
+			return true;
+		}
+	}
+
 	function onMessageReceived(message) {
 		if (message.type === 'user-joined') {
 			sendMessage(socket, { type: 'get-user-estimates' });
@@ -204,6 +219,7 @@
 					showFireworks = false;
 				}, 5000);
 			}
+			showLackOfUnderstandingMessage = areEstimatesWidelyVaried(estimateGroups);
 			showRestartButton = true;
 			showEstimates = true;
 			disableEstimates = true;
@@ -244,7 +260,7 @@
 </script>
 
 {#if showModal}
-	<Modal {closeModal} {joinRoom} />
+	<UserNameModal {closeModal} {joinRoom} />
 {/if}
 
 <UsersList
@@ -289,6 +305,14 @@
 	</div>
 {/if}
 
+{#if showLackOfUnderstandingMessage}
+	<Modal
+		bind:showModal={showLackOfUnderstandingMessage}
+		heading={'There seems to be a lack of understanding'}
+		body={'Please discuss the topic further and try estimating again.'}
+	/>
+{/if}
+
 <audio src="/call-to-attention-50-percent-volume.mp3" bind:this={audioElement} />
 
 {#if showTooltip && newChanges.length > 0}