Skip to content

Commit

Permalink
app should pretty much be finished
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArhanChaudhary
ArhanChaudhary committed Aug 22, 2024
1 parent 04b15dd commit 6b182c2
Show file tree
Hide file tree
Showing 5 changed files with 135 additions and 92 deletions.
4 changes: 0 additions & 4 deletions src/app.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
height: 100dvh;
}
25 changes: 18 additions & 7 deletions src/lib/Modal.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,30 @@
<script lang="ts">
import { onMount } from 'svelte';
import { GuessType } from '../routes/+page.svelte';
import { fly } from 'svelte/transition';
export let value: number;
export let message: string;
export let guessType: GuessType;
let visible = false;
onMount(() => {
visible = true;
});
</script>

{#if guessType === GuessType.finished}
{#if visible}
<div
in:fly={{ y: -25 }}
class="rounded-lg overflow-hidden border border-green-700 text-lg px-4 py-6 font-medium bg-green-100"
>
{message}
</div>
{/if}
{:else if visible}
<div
class="rounded-lg overflow-hidden border my-4 border-green-700 text-lg px-4 py-6 font-medium bg-green-100"
>
{message}
</div>
{:else}
<div
class="rounded-lg overflow-hidden border my-4"
in:fly={{ y: -25 }}
class="rounded-lg overflow-hidden border"
class:border-green-700={guessType === GuessType.correct}
class:border-red-700={guessType === GuessType.incorrect}
class:border-gray-700={guessType === GuessType.technicallyIncorrect}
Expand Down
18 changes: 17 additions & 1 deletion src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,20 @@
<title>Numbers</title>
</svelte:head>

<slot />
<main class="bg-gray-100">
<div
class="mr-auto ml-auto max-w-5xl min-h-dvh bg-orange-50 px-4 shadow-[0_0_30px_5px] shadow-gray-400 relative pb-10"
>
<slot />
<div class="flex justify-center absolute bottom-0 h-10 items-center left-0 right-0">
<a
href="https://github.com/ArhanChaudhary/iconic-computing-numbers"
class="text-blue-600 dark:text-blue-500 underline mx-1">Source</a
>
&#x2022;
<a href="https://arhan.sh" class="text-blue-600 dark:text-blue-500 underline mx-1"
>My website</a
>
</div>
</div>
</main>
177 changes: 97 additions & 80 deletions src/routes/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,10 @@
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);
function deltaToString(time: number) {
let hours = Math.floor(time / 3600);
let minutes = Math.floor((time % 3600) / 60);
let seconds = Math.floor(time % 60);
let ret = '';
if (hours) {
if (hours === 1) {
Expand All @@ -29,15 +30,29 @@
ret += `${hours} hours`;
}
if (minutes) {
ret += ' and ';
if (minutes === 1) {
ret += ' and 1 minute';
} else {
ret += ` and ${minutes} minutes`;
}
}
}
if (minutes || !hours) {
} else if (minutes) {
if (minutes === 1) {
ret += '1 minute';
} else {
ret += `${minutes} minutes`;
}
if (seconds) {
if (seconds === 1) {
ret += ' and 1 second';
} else {
ret += ` and ${seconds} seconds`;
}
}
} else if (seconds === 1) {
ret += '1 second';
} else {
ret += `${seconds} seconds`;
}
return ret;
}
Expand All @@ -55,12 +70,12 @@
.find(({ value, guessed }) => value === guess && guessed);
if (alreadyGuessedNumber) {
modals = [
...modals,
{
value: alreadyGuessedNumber.value,
message: 'You have already guessed this number.',
guessType: GuessType.technicallyIncorrect
},
...modals
}
];
return;
}
Expand All @@ -70,107 +85,109 @@
);
if (technicallyIncorrectNumber) {
modals = [
...modals,
{
...technicallyIncorrectNumber,
guessType: GuessType.technicallyIncorrect
},
...modals
}
];
return;
}
let number = data.numbers.find(({ value }) => value === guess);
if (number) {
modals = [
...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)) {
let time = performance.now() - startTime;
modals = [
{
value: NaN,
message: `Congratulations! You took ${guesses} guesses to decipher the secret message in ${timeToString(
time
)}.`,
guessType: GuessType.finished
},
...modals
];
let endTime = performance.now();
let deltaString = deltaToString((endTime - startTime) / 1000);
setTimeout(() => {
let message = `Congratulations! You took ${guesses} guesses to decipher the secret message in ${deltaString}.`;
if (guesses === numbersCount) {
message +=
' You really are a true programming hobbyist, you guessed every number correctly! 🎉🎉🎉';
}
modals = [
...modals,
{
value: NaN,
message,
guessType: GuessType.finished
}
];
}, 500);
}
return;
}
modals = [
...modals,
{
value: guess,
message: 'Your guess was incorrect.',
guessType: GuessType.incorrect
},
...modals
}
];
guesses++;
}
</script>

<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 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 {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>You are being timed. Despite that, prioritize minimizing guesses.</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 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={() => {
// @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
</span>
{#each modals as modal}
<Modal {...modal} />
{/each}
</div>
</div>
</main>
<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 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 {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 3-6 digits long, truncating if necessary.</li>
<li>The numbers become harder to identify towards the end.</li>
<li>You are being timed. Despite that, <b>prioritize minimizing guesses</b>.</li>
<li>The first number is 1970, good luck!</li>
</ol>
</div>
<div class="text-2xl text-center break-words my-10 px-6" bind:this={numbersEl}>
<!-- No cheating! Oh well, since you're already here you might as well check out my website while at it https://arhan.sh/ -->
{#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={() => {
// @ts-ignore
document.activeElement.blur();
}}
/>
<span class="inline-block mt-1 mb-10 text-gray-700 text-sm">
{guesses} guess{guesses === 1 ? '' : 'es'} / {numbersCount} numbers
</span>
<span class="flex flex-col-reverse gap-8">
{#each modals as modal}
<Modal {...modal} />
{/each}
</span>
</div>
3 changes: 3 additions & 0 deletions svelte.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ const config = {
preprocess: vitePreprocess(),
kit: {
adapter: adapter(),
},
compilerOptions: {
preserveComments: true,
}
};

Expand Down

0 comments on commit 6b182c2

Please sign in to comment.