More ui

ArhanChaudhary · Aug 22, 2024 · 54c6bc0 · 54c6bc0
1 parent 68912e7
commit 54c6bc0
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 21 deletions.
diff --git a/src/lib/Modal.svelte b/src/lib/Modal.svelte
@@ -5,26 +5,34 @@
 	export let guessType: GuessType;
 </script>
 
-<div
-	class="rounded-lg overflow-hidden border my-4"
-	class:border-green-700={guessType === GuessType.correct}
-	class:border-red-700={guessType === GuessType.incorrect}
-	class:border-gray-700={guessType === GuessType.technicallyIncorrect}
->
+{#if guessType === GuessType.finished}
 	<div
-		class="text-lg px-4 py-1 font-medium"
-		class:bg-green-200={guessType === GuessType.correct}
-		class:bg-red-200={guessType === GuessType.incorrect}
-		class:bg-gray-200={guessType === GuessType.technicallyIncorrect}
+		class="rounded-lg overflow-hidden border my-4 border-green-700 text-lg px-4 py-6 font-medium bg-green-100"
 	>
-		{value}
+		{message}
 	</div>
+{:else}
 	<div
-		class="p-4"
-		class:bg-green-50={guessType === GuessType.correct}
-		class:bg-red-50={guessType === GuessType.incorrect}
-		class:bg-gray-50={guessType === GuessType.technicallyIncorrect}
+		class="rounded-lg overflow-hidden border my-4"
+		class:border-green-700={guessType === GuessType.correct}
+		class:border-red-700={guessType === GuessType.incorrect}
+		class:border-gray-700={guessType === GuessType.technicallyIncorrect}
 	>
-		{message}
+		<div
+			class="text-lg px-4 py-1 font-medium"
+			class:bg-green-200={guessType === GuessType.correct}
+			class:bg-red-200={guessType === GuessType.incorrect}
+			class:bg-gray-200={guessType === GuessType.technicallyIncorrect}
+		>
+			{value}
+		</div>
+		<div
+			class="p-4"
+			class:bg-green-50={guessType === GuessType.correct}
+			class:bg-red-50={guessType === GuessType.incorrect}
+			class:bg-gray-50={guessType === GuessType.technicallyIncorrect}
+		>
+			{message}
+		</div>
 	</div>
-</div>
+{/if}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -16,6 +16,31 @@
 	let modals = new Array<{ value: number; message: string; guessType: GuessType }>();
 	let numbersEl: HTMLDivElement;
 	let numbersCount = Object.keys(data.numbers).length;
+	let startTime = performance.now();
+
+	function timeToString(time: number) {
+		let hours = Math.floor(time / 3600000);
+		let minutes = Math.floor((time % 3600000) / 60000);
+		let ret = '';
+		if (hours) {
+			if (hours === 1) {
+				ret += '1 hour';
+			} else {
+				ret += `${hours} hours`;
+			}
+			if (minutes) {
+				ret += ' and ';
+			}
+		}
+		if (minutes || !hours) {
+			if (minutes === 1) {
+				ret += '1 minute';
+			} else {
+				ret += `${minutes} minutes`;
+			}
+		}
+		return ret;
+	}
 
 	function keyPress(e: KeyboardEvent) {
 		if (e.key !== 'Enter') {
@@ -25,6 +50,21 @@
 		let guess = (e.target as HTMLInputElement).valueAsNumber;
 		(e.target as HTMLInputElement).value = '';
 
+		let alreadyGuessedNumber = data.numbers
+			.concat(data.technicallyIncorrectNumbers)
+			.find(({ value, guessed }) => value === guess && guessed);
+		if (alreadyGuessedNumber) {
+			modals = [
+				{
+					value: alreadyGuessedNumber.value,
+					message: 'You have already guessed this number.',
+					guessType: GuessType.technicallyIncorrect
+				},
+				...modals
+			];
+			return;
+		}
+
 		let technicallyIncorrectNumber = data.technicallyIncorrectNumbers.find(
 			({ value }) => value === guess
 		);
@@ -53,10 +93,13 @@
 			guesses++;
 			numbersEl.querySelector(`span[data-value="${number.value}"]`)!.classList.add('bg-green-300');
 			if (data.numbers.every(({ guessed }) => guessed)) {
+				let time = performance.now() - startTime;
 				modals = [
 					{
 						value: NaN,
-						message: 'Congratulations! You have successfully deciphered the secret message',
+						message: `Congratulations! You took ${guesses} guesses to decipher the secret message in ${timeToString(
+							time
+						)}.`,
 						guessType: GuessType.finished
 					},
 					...modals
@@ -67,7 +110,7 @@
 		modals = [
 			{
 				value: guess,
-				message: 'Your guess was incorrect',
+				message: 'Your guess was incorrect.',
 				guessType: GuessType.incorrect
 			},
 			...modals
@@ -104,7 +147,7 @@
 				</li>
 				<li>Each number is 3-6 digits long, truncating if necessary</li>
 				<li>The numbers become harder to identify towards the end</li>
-				<li>The first number is 1970, good luck!</li>
+				<li>You are being timed. The first number is 1970, good luck!</li>
 			</ol>
 		</div>
 		<div class="text-2xl text-center break-words my-10 px-4" bind:this={numbersEl}>
@@ -116,7 +159,10 @@
 				class="block w-full px-3 py-2 bg-white border border-gray-700 rounded-md text-lg shadow-sm placeholder-gray-700 focus:outline-none focus:border-black"
 				placeholder="Enter your guess"
 				on:keypress={keyPress}
-				on:wheel={(e) => e.preventDefault()}
+				on:wheel={() => {
+					// @ts-ignore
+					document.activeElement.blur();
+				}}
 			/>
 			<span class="inline-block mt-1 mb-7 text-gray-700 text-sm">
 				{guesses} guess{guesses === 1 ? '' : 'es'} / {numbersCount} numbers