more logic and ui

src/app.css

@@ -3,5 +3,5 @@
 @tailwind utilities;
 
 body {
-    height: 100dvh;
-}
+	height: 100dvh;
+}

src/lib/Modal.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { GuessType } from '../routes/+page.svelte';
+	export let value: number;
+	export let message: string;
+	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}
+>
+	<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>

src/routes/+layout.ts

@@ -0,0 +1 @@
+export const prerender = true;

src/routes/+page.svelte

@@ -1,41 +1,129 @@
-<script>
-	/** @type {import('./$types').PageData} */
+<script lang="ts" context="module">
+	export enum GuessType {
+		correct,
+		incorrect,
+		technicallyIncorrect,
+		finished
+	}
+</script>
+
+<script lang="ts">
+	import Modal from '$lib/Modal.svelte';
+
 	export let data;
+
+	let guesses = 0;
+	let modals = new Array<{ value: number; message: string; guessType: GuessType }>();
+	let numbersEl: HTMLDivElement;
+	let numbersCount = Object.keys(data.numbers).length;
+
+	function keyPress(e: KeyboardEvent) {
+		if (e.key !== 'Enter') {
+			return;
+		}
+		if ((e.target as HTMLInputElement).value === '') return;
+		let guess = (e.target as HTMLInputElement).valueAsNumber;
+		(e.target as HTMLInputElement).value = '';
+
+		let technicallyIncorrectNumber = data.technicallyIncorrectNumbers.find(
+			({ value }) => value === guess
+		);
+		if (technicallyIncorrectNumber) {
+			modals = [
+				{
+					...technicallyIncorrectNumber,
+					guessType: GuessType.technicallyIncorrect
+				},
+				...modals
+			];
+			return;
+		}
+
+		let number = data.numbers.find(({ value }) => value === guess);
+		if (number) {
+			modals = [
+				{
+					value: number.value,
+					message: number.message,
+					guessType: GuessType.correct
+				},
+				...modals
+			];
+			number.guessed = true;
+			guesses++;
+			numbersEl.querySelector(`span[data-value="${number.value}"]`)!.classList.add('bg-green-300');
+			if (data.numbers.every(({ guessed }) => guessed)) {
+				modals = [
+					{
+						value: NaN,
+						message: 'Congratulations! You have successfully deciphered the secret message',
+						guessType: GuessType.finished
+					},
+					...modals
+				];
+			}
+			return;
+		}
+		modals = [
+			{
+				value: guess,
+				message: 'Your guess was incorrect',
+				guessType: GuessType.incorrect
+			},
+			...modals
+		];
+		guesses++;
+	}
 </script>
 
-<main class="bg-orange-100 h-full">
-	<div class="mr-auto ml-auto max-w-5xl h-full bg-orange-50 px-4">
+<main class="bg-gray-100 h-full">
+	<div
+		class="mr-auto ml-auto max-w-5xl h-full bg-orange-50 px-4 shadow-[0_0_30px_5px] overflow-y-scroll shadow-gray-400"
+	>
 		<div class="text-4xl font-medium font-patua text-center px-4 py-6">
 			How Many Iconic Computing Numbers can you Recognize?
 		</div>
 		<div class="text-lg">
 			<p>
-				I'm a huge fan of both computers and secret messages. If that's your cup of tea, I challenge
-				you to a test of your computing knowledge by fully deciphering this secret message.
+				I'm a huge fan of both computer science and secret messages. If that's your cup of tea, I
+				challenge you to decipher this secret message and test your general knowledge of computing.
 			</p>
 			<br />
 			<ol class="list-decimal pl-[2ch]">
-				<li>There are 25 computing numbers hidden within this string without overlap</li>
+				<li>
+					There are {numbersCount} computing numbers hidden within this string without overlap (ignore
+					the line wrapping)
+				</li>
+				<li>
+					Each number is wholly distinct in meaning and iconic in their respective fields of
+					computing
+				</li>
 				<li>
 					This is not a memory test; you should be able to identify each number with little
 					ambiguity without external tools
 				</li>
-				<li>Each number is iconic in their respective computing fields and distinct in meaning</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>
 			</ol>
 		</div>
-		<div class="text-2xl text-center break-words my-10">
-			{#each data.numbers as [number]}
-				{number}
+		<div class="text-2xl text-center break-words my-10 px-4" bind:this={numbersEl}>
+			{#each data.numbers as { value }}<span data-value={value}>{value}</span>{/each}
+		</div>
+		<div class="max-w-[40rem] mx-auto w-full mb-[150px]">
+			<input
+				type="number"
+				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()}
+			/>
+			<span class="inline-block mt-1 mb-7 text-gray-700 text-sm">
+				{guesses} guess{guesses === 1 ? '' : 'es'} / {numbersCount} numbers
+			</span>
+			{#each modals as modal}
+				<Modal {...modal} />
 			{/each}
 		</div>
-		<input
-			type="number"
-			class="block w-full mx-auto px-3 py-2 bg-white border border-slate-400 rounded-md text-sm shadow-sm placeholder-slate-700
-				focus:outline-none focus:border-slate-500 focus:ring-1 focus:ring-slate-800 max-w-[40rem]"
-			placeholder="Enter your guess"
-		/>
 	</div>
 </main>

src/routes/+page.ts

@@ -0,0 +1,122 @@
+const numbers = [
+	{
+		value: 1970,
+		message:
+			'The UNIX epoch year and universal computer time representation. One of the first magic numbers you learn in computer science.',
+		guessed: false
+	},
+	{
+		value: 192168,
+		message: 'The most commonly used private IPv4 address range, formally 192.168.0.0/16.',
+		guessed: false
+	},
+	{ value: 1337, message: '"Leet", in hacker speech.', guessed: false },
+	{
+		value: 754,
+		message: 'The IEEE standard for floating-point arithmetic used by every modern computer.',
+		guessed: false
+	},
+	{
+		value: 8086,
+		message: 'The Intel 8086, the first microprocessor with the now-widespread x86 architecture.',
+		guessed: false
+	},
+	{
+		value: 214748,
+		message:
+			'2^31 - 1 truncated, or the maximum value for a 32-bit signed binary integer. Also a common hard limit in video games.',
+		guessed: false
+	},
+	{
+		value: 418,
+		message: 'The HTTP status code for "I\'m a teapot", an April Fools\' joke by the IETF.',
+		guessed: false
+	},
+	{ value: 443, message: 'The default port for HTTPS.', guessed: false },
+	{
+		value: 414141,
+		message:
+			'"AAA" in hexadecimal, a string often used in buffer overflow attacks or other security exploits.',
+		guessed: false
+	},
+	{ value: 44100, message: 'The standard sample rate for analog audio CDs.', guessed: false },
+	{
+		value: 3301,
+		message: 'The Cicada 3301 internet mystery, popularized by LEMMiNO.',
+		guessed: false
+	},
+	{ value: 9600, message: 'A common baud rate for serial communication.', guessed: false },
+	{ value: 80211, message: 'The IEEE standard for wireless networking, or Wi-Fi.', guessed: false },
+	{
+		value: 400000,
+		message: 'The base memory address for Linux executables in hexadecimal.',
+		guessed: false
+	},
+	{
+		value: 25519,
+		message: 'Curve25519, a widely used elliptic curve in cryptography and key exchange.',
+		guessed: false
+	},
+	{
+		value: 264,
+		message: 'H.264 or Advanced Video Coding, a common video compression standard.',
+		guessed: false
+	},
+	{
+		value: 509,
+		message: 'The X.509 ITU certificate standard, used in TLS and SSL.',
+		guessed: false
+	},
+	{
+		value: 7400,
+		message: 'A popular series of digital logic integrated circuits.',
+		guessed: false
+	},
+	{ value: 65537, message: 'The de facto exponent used in RSA encryption.', guessed: false },
+	{ value: 777, message: 'The chmod octal permission mode for full access.', guessed: false },
+	{ value: 8601, message: 'The ISO standard for date and time representation.', guessed: false },
+	{
+		value: 2600,
+		message: '2600: The Hacker Quarterly, a popular technical magazine for hackers.',
+		guessed: false
+	},
+	{ value: 5994, message: 'The NTSC vertical scan rate.', guessed: false },
+	{ value: 437, message: 'The original IBM PC code page.', guessed: false },
+	{
+		value: 471768,
+		message:
+			'The truncated solution to the 25-year-long Busy Beaver Challenge for 5-state 2-symbol Turing machines.',
+		guessed: false
+	}
+];
+
+const technicallyIncorrectNumbers = [
+	{
+		value: 775,
+		message:
+			"The chmod octal permission mode for full access is not an intended number. Your guess won't count.",
+		guessed: false
+	},
+	{
+		value: 255,
+		message:
+			"The maximum value for an 8-bit unsigned integer is not an intended number. Your guess won't count.",
+		guessed: false
+	},
+	{
+		value: 301,
+		message:
+			'The HTTP status code for "Moved Permanently" is not an intended number. Your guess won\'t count.',
+		guessed: false
+	},
+	{
+		value: 400,
+		message:
+			'The HTTP status code for "Bad Request" is not an intended number. Your guess won\'t count.',
+		guessed: false
+	}
+];
+
+export function load() {
+	return { numbers, technicallyIncorrectNumbers };
+}