Merge pull request #1 from jeroenheijmans/various-suggested-changes-i…

…n-separate-commits Various suggested changes in separate commits
nimma-codes · Nov 11, 2023 · bf58cde · bf58cde
2 parents 06ee6fc + f39c61b
commit bf58cde
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 15 deletions.
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/qr-url-to-prod.png b/public/qr-url-to-prod.png
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -2,11 +2,11 @@ import Link from "next/link";
 
 export default function About() {
   return (
-    <main className="flex min-h-screen flex-col justify-between py-24 px-48">
+    <main className="flex min-h-screen flex-col justify-between p-4 md:p-16 lg:py-24 lg:px-48">
       <div>
         <div className="text-lime-500 text-2xl font-bold py-2">About</div>
         <div className="text-sm">
-          <div className="pt-8">
+          <div className="md:pt-8">
             We want to thank{" "}
             <a
               href="http://was.tl"

diff --git a/src/app/favicon.ico b/src/app/favicon.ico
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -8,5 +8,4 @@ body {
   font-family: "Source Code Pro", monospace;
   font-weight: 300;
   font-size: 14pt;
-  min-width: 60em;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -16,6 +16,10 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
+      <head>
+        <link rel="icon" href="favicon.png" />
+        <meta name="viewport" content="width=device-width" />
+      </head>
       <body className={sourceCodeProFont.className}>{children}</body>
     </html>
   );

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -15,9 +15,17 @@ const complexityColor: Record<Complexities, string> = {
 export default function Home() {
   const [puzzle, setPuzzle] = useState<Puzzle>();
   const [complexity, setComplexity] = useState<Complexities>();
-  const years = [2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022];
+  const availableYears = [2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022];
   const days = Array.from({ length: 25 }, (_, i) => i + 1);
 
+  const [years, setYears] = useState([2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022]);
+
+  const toggleYear = (year: number) => {
+    years.includes(year)
+      ? setYears(years.filter(y => y !== year))
+      : setYears([year, ...years]);
+  };
+
   const handleClick = async (name: Complexities) => {
     setComplexity(name);
     const puzzle: Puzzle = {
@@ -28,32 +36,50 @@ export default function Home() {
       complexity: 0,
       noSolutionDiff: 0,
     };
+    const yearsToConsider = years.length ? years : availableYears;
 
     setPuzzle(puzzle);
 
     const incrementTime = 150;
 
     let timer = setInterval(() => {
-      const year = getRandom(years);
+      const year = getRandom(yearsToConsider);
       const day = getRandom(days);
       setPuzzle({ ...puzzle, year, day });
     }, incrementTime);
 
     setTimeout(async () => {
       clearInterval(timer);
 
-      setPuzzle(await getRandomPuzzle(name));
+      setPuzzle(await getRandomPuzzle(name, yearsToConsider));
     }, 3000);
   };
 
   return (
-    <main className="flex min-h-screen flex-col justify-between py-24 px-48">
+    <main className="flex min-h-screen flex-col justify-between p-4 md:p-16 lg:py-24 lg:px-48">
       <div>
-        <div className="text-3xl font-bold pb-16">
+        <div className="text-3xl font-bold pb-8 md:pb-16">
           Advent of Code Random Puzzle Picker
         </div>
-        <div className="text-xl font-bold">Pick a complexity</div>
-        <div className="flex flex-row gap-4 pt-8 pb-16">
+        <div className="text-xl font-bold">Pick a complexity and years</div>
+        <div className="flex gap-1 flex-row flex-wrap md:gap-2 pt-8 opacity-100 hover:opacity-100">
+          {availableYears.map(y => (
+            <button
+              key={y}
+              type="button"
+              className={`
+                ${years.includes(y)
+                  ? "bg-gray-400 text-black border-gray-900"
+                  : "bg-gray-900 text-gray-400 border-gray-400"
+                }
+                block border rounded-md px-2 py-1 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white-600`}
+              onClick={() => toggleYear(y)}
+            >
+              {y}
+            </button>
+          ))}
+        </div>
+        <div className="flex flex-col gap-2 md:flex-row md:gap-4 pt-4 pb-16">
           <button
             type="button"
             className="block border border-sky-500 rounded-md text-sky-500 px-3.5 py-2.5 text-lg font-semibold hover:text-white shadow-sm hover:bg-sky-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-600"
@@ -138,10 +164,13 @@ export default function Home() {
         )}
       </div>
 
-      <div>
+      <div className="flex gap-4 items-end">
         <Link href="about" className="underline">
           About
         </Link>
+        {/* This is only a simple AoC tribute site, let's not do extremely heavy image optimization (at higher hosting costs). */}
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img className="ml-auto opacity-25 hidden sm:inline-block" src="qr-url-to-prod.png" alt="QR code linking to https://aoc.nimma.codes" />
       </div>
     </main>
   );

diff --git a/src/puzzles.ts b/src/puzzles.ts
@@ -25,8 +25,8 @@ interface PuzzleComplexity {
   noSolutionCount: number;
 }
 
-async function getPuzzleClasses(medals: Medals) {
-  const years = Object.keys(medals);
+async function getPuzzleClasses(medals: Medals, onlyForYears: number[]) {
+  const years = Object.keys(medals).filter(y => onlyForYears.includes(parseInt(y)));
   const complexity: Record<string, PuzzleComplexity> = {};
   for (const year of years) {
     const yearUsers = Object.keys(medals[year]);
@@ -110,8 +110,8 @@ export type Puzzle = {
   noSolutionDiff: number;
 };
 
-export async function getRandomPuzzle(name: Complexities) {
-  const [classes, puzzles, noSolutionAverage] = await getPuzzleClasses(medals);
+export async function getRandomPuzzle(name: Complexities, years: number[]) {
+  const [classes, puzzles, noSolutionAverage] = await getPuzzleClasses(medals, years);
   const puzzleId = getRandom(classes[name]);
   const puzzle = puzzles.find((puzzle) => puzzle.id === puzzleId);
   return {