From 1160335011eb9c3c20ae175b47e174a5303bd690 Mon Sep 17 00:00:00 2001 From: Jack Zheng Date: Wed, 11 Mar 2026 19:55:33 -0700 Subject: [PATCH 01/11] feat: add first mobile card --- app/(pages)/(hackers)/(hub)/page.tsx | 4 +- .../TableNumberCheckin/TableNumberCheckin.tsx | 185 ++++++++++-------- public/hackers/arrow-right.svg | 3 + public/hackers/end_of_hackathon.svg | 121 ++++++++++++ 4 files changed, 229 insertions(+), 84 deletions(-) create mode 100644 public/hackers/arrow-right.svg create mode 100644 public/hackers/end_of_hackathon.svg diff --git a/app/(pages)/(hackers)/(hub)/page.tsx b/app/(pages)/(hackers)/(hub)/page.tsx index d56d5755..6b200832 100644 --- a/app/(pages)/(hackers)/(hub)/page.tsx +++ b/app/(pages)/(hackers)/(hub)/page.tsx @@ -23,12 +23,12 @@ export default function Page() { {/* temporarilty set featureId below to "hero-hacking" to test */} - + - + diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.tsx index d217efd4..aa0d05af 100644 --- a/app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.tsx +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.tsx @@ -1,18 +1,15 @@ -'use client'; +"use client"; -import Image from 'next/image'; -import Link from 'next/link'; -import { useState } from 'react'; -import { useTableNumber } from '@pages/_hooks/useTableNumber'; +import Image from "next/image"; +import Link from "next/link"; +import { useState } from "react"; +import { useTableNumber } from "@pages/_hooks/useTableNumber"; -import stars from '@public/hackers/stars.svg'; -import mascots from '@public/hackers/mascots-hanging-out.svg'; -import sleepyFrog from '@public/hackers/sleeping-frog.svg'; -import modalArrow from '@public/hackers/modal-arrow.svg'; -import diagArrow from '@public/hackers/diag-arrow.svg'; +import sleepyFrog from "@public/hackers/sleeping-frog.svg"; +import modalArrow from "@public/hackers/modal-arrow.svg"; +import diagArrow from "@public/hackers/diag-arrow.svg"; -import styles from './TableNumberCheckin.module.scss'; -import useTableNumberContext from '@pages/_hooks/useTableNumberContext'; +import useTableNumberContext from "@pages/_hooks/useTableNumberContext"; export default function TableNumberCheckin() { const { @@ -21,7 +18,7 @@ export default function TableNumberCheckin() { setValue, } = useTableNumberContext(); - const [teamNumber, setTeamNumber] = useState(''); + const [teamNumber, setTeamNumber] = useState(""); const { loading, tableNumber, fetchTableNumber, setTableNumber, error } = useTableNumber(); @@ -29,11 +26,11 @@ export default function TableNumberCheckin() { return null; } - let stage: 'init' | 'loading' | 'confirm' = 'init'; + let stage = "init"; if (loading) { - stage = 'loading'; + stage = "loading"; } else { - stage = tableNumber ? 'confirm' : 'init'; + stage = tableNumber ? "confirm" : "init"; } const handleTeamNumberSubmit = () => { @@ -41,50 +38,70 @@ export default function TableNumberCheckin() { }; const hasTeamNumber = Boolean(teamNumber); + const inputStage = ( -
-
- {'floating +
+ {/* Image - top half */} +
{'mascots
-
-

THE HACKATHON HAS ENDED

-

- Thank you for all your hard work during the past 24 hours, HackDavis - recognizes your passion and talent. Please enter in the team number - you received from Devpost. -

-
-
- +
+

The Hackathon has ended!

+

+ Thank you for all your hard work. Next, please follow the directions + for find your assigned table number. +

+
+
+ {/* setTeamNumber(event.target.value)} - /> - + onChange={(e) => setTeamNumber(e.target.value)} + /> */} + +
); const loadingStage = ( -
- {'sleepy -
-

SEARCHING HIGH AND LOW...

-

+

+ sleepy frog +
+

+ SEARCHING HIGH AND LOW... +

+

Please wait patiently while we match you to a judging table. Btw did you know next year will be HackDavis's 10 year anniversary?

@@ -93,56 +110,60 @@ export default function TableNumberCheckin() { ); const confirmStage = ( -
-
-

{tableNumber}

-
-

YOUR TABLE NUMBER

-
- - Map Link{' '} - arrow - -

- Check that you and your team members received the same table - number. It is extremely important to be{' '} - present at your table when the judges arrive. -

+
+ {/* Header */} +
+

+ {tableNumber} +

+
+
+

+ YOUR TABLE NUMBER +

+
+ + Map Link arrow + +

+ Check that you and your team members received the same table + number. It is extremely important to be{" "} + present at your table when the judges arrive. +

+
-
+ + {/* Input Row */} +
setTeamNumber(event.target.value)} + onChange={(e) => setTeamNumber(e.target.value)} disabled />
+ + {/* Not my team */} +
+
+
+ ); +} diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx new file mode 100644 index 00000000..310885aa --- /dev/null +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx @@ -0,0 +1,73 @@ +"use client"; + +import { useState } from "react"; +import { useTableNumber } from "@pages/_hooks/useTableNumber"; +import useTableNumberContext from "@pages/_hooks/useTableNumberContext"; + +import InitStage from "./InitStage"; +// import DevpostStage from "./DevpostStage"; +// import LoadingStage from "./LoadingStage"; +// import ConfirmStage from "./ConfirmStage"; + +export default function TableNumberCheckin() { + const { + loading: localStorageLoading, + storedValue, + setValue, + } = useTableNumberContext(); + + const [teamNumber, setTeamNumber] = useState(""); + const [hasClickedNext, setHasClickedNext] = useState(false); + const { loading, tableNumber, fetchTableNumber, setTableNumber, error } = + useTableNumber(); + + if (localStorageLoading || storedValue) { + return null; + } + + // Stage resolution + let stage: "init" | "devpost" | "loading" | "confirm" = "init"; + if (loading) { + stage = "loading"; + } else if (tableNumber) { + stage = "confirm"; + } else if (hasClickedNext) { + stage = "devpost"; + } + + const handleTeamNumberSubmit = () => { + fetchTableNumber(Number(teamNumber)); + }; + + const handleReset = () => { + setTableNumber(null); + setTeamNumber(""); + setHasClickedNext(false); + }; + + return ( +
+
+ {stage === "init" && ( + setHasClickedNext(true)} /> + )} + {stage === "devpost" && ( + + )} + {stage === "loading" && } + {stage === "confirm" && ( + setValue(tableNumber)} + onReset={handleReset} + /> + )} +
+
+ ); +} From 3136a67b65778cae27aeb058a24384f990a42514 Mon Sep 17 00:00:00 2001 From: Jack Zheng Date: Thu, 12 Mar 2026 13:34:25 -0700 Subject: [PATCH 03/11] feat: add devpost stage mobile --- app/(pages)/(hackers)/(hub)/page.tsx | 2 +- .../TableNumberCheckin/DevpostStage.tsx | 104 ++++++++++++++++++ .../TableNumberCheckin/InitStage.tsx | 16 +-- .../TableNumberCheckin/TableNumberCheckin.tsx | 2 - .../_components/TableNumberCheckin/index.tsx | 35 +++--- .../hackers/table-number-checkin/Filler.svg | 15 +++ .../arrow-right.svg | 0 .../end-of-hackathon.svg} | 0 8 files changed, 148 insertions(+), 26 deletions(-) create mode 100644 app/(pages)/(hackers)/_components/TableNumberCheckin/DevpostStage.tsx create mode 100644 public/hackers/table-number-checkin/Filler.svg rename public/hackers/{ => table-number-checkin}/arrow-right.svg (100%) rename public/hackers/{end_of_hackathon.svg => table-number-checkin/end-of-hackathon.svg} (100%) diff --git a/app/(pages)/(hackers)/(hub)/page.tsx b/app/(pages)/(hackers)/(hub)/page.tsx index c42ab5a2..20eae391 100644 --- a/app/(pages)/(hackers)/(hub)/page.tsx +++ b/app/(pages)/(hackers)/(hub)/page.tsx @@ -5,7 +5,7 @@ import BeginnersSection from '@pages/(hackers)/_components/HomeHacking/Beginners import Discord from '@pages/(hackers)/_components/StayUpToDate/Discord'; import Footer from '@components/Footer/Footer'; import ClientTimeProtectedDisplay from '@pages/_components/TimeProtectedDisplay/ClientTimeProtectedDisplay'; -import TableNumberCheckin from '@pages/(hackers)/_components/TableNumberCheckin/TableNumberCheckin'; +import TableNumberCheckin from '@pages/(hackers)/_components/TableNumberCheckin/index.tsx'; import TableNumberContextProvider from '@pages/_contexts/TableNumberContext'; import MDHelp from '@pages/(hackers)/_components/HomeHacking/MDHelp'; import ScheduleSneakPeek from '@pages/(hackers)/_components/HomeHacking/ScheduleSneakPeek'; diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/DevpostStage.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/DevpostStage.tsx new file mode 100644 index 00000000..9e63aa92 --- /dev/null +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/DevpostStage.tsx @@ -0,0 +1,104 @@ +'use client'; + +import Image from 'next/image'; + +interface DevpostStageProps { + teamNumber: string; + error: string | null; + onChange: (value: string) => void; + onSubmit: () => void; + onBack: () => void; +} + +export default function DevpostStage({ + teamNumber, + error, + onChange, + onSubmit, + onBack, +}: DevpostStageProps) { + const hasTeamNumber = teamNumber.length == 5; + + return ( +
+
+ {/* Image - top half */} +
+ mascots hanging out +
+ + {/* Devpost Number */} +
+

+ DEVPOST NUMBER +

+ + {/* Input */} +
+ { + const val = e.target.value.replace(/\D/g, '').slice(0, 5); + onChange(val); + }} + /> + {error && ( +

+ Team not found. Please double-check your Devpost number. +

+ )} +
+
+
+ +
+
+

Find your Devpost number.

+ +

+ This can be found by going to _____ and selecting____. Enter the + number exactly as it is presented. +

+
+ {/* Buttons */} +
+ + + +
+
+
+ ); +} diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/InitStage.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/InitStage.tsx index 384ba150..7e476b7b 100644 --- a/app/(pages)/(hackers)/_components/TableNumberCheckin/InitStage.tsx +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/InitStage.tsx @@ -1,6 +1,6 @@ -"use client"; +'use client'; -import Image from "next/image"; +import Image from 'next/image'; interface InitStageProps { onNext: () => void; @@ -8,11 +8,11 @@ interface InitStageProps { export default function InitStage({ onNext }: InitStageProps) { return ( -
+
{/* Image - top half */}
mascots hanging out
-
+
+ + +
+
+ ); +} diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx index f08044cd..60f7467b 100644 --- a/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx @@ -1,12 +1,12 @@ -'use client'; +"use client"; -import { useState } from 'react'; -import { useTableNumber } from '@pages/_hooks/useTableNumber'; -import useTableNumberContext from '@pages/_hooks/useTableNumberContext'; +import { useState } from "react"; +import { useTableNumber } from "@pages/_hooks/useTableNumber"; +import useTableNumberContext from "@pages/_hooks/useTableNumberContext"; -import InitStage from './InitStage'; -import DevpostStage from './DevpostStage'; -// import LoadingStage from "./LoadingStage"; +import InitStage from "./InitStage"; +import DevpostStage from "./DevpostStage"; +import LoadingStage from "./LoadingStage"; // import ConfirmStage from "./ConfirmStage"; export default function TableNumberCheckin() { @@ -16,7 +16,7 @@ export default function TableNumberCheckin() { setValue, } = useTableNumberContext(); - const [teamNumber, setTeamNumber] = useState(''); + const [teamNumber, setTeamNumber] = useState(""); const [hasClickedNext, setHasClickedNext] = useState(false); const { loading, tableNumber, fetchTableNumber, setTableNumber, error } = useTableNumber(); @@ -26,13 +26,13 @@ export default function TableNumberCheckin() { } // Stage resolution - let stage: 'init' | 'devpost' | 'loading' | 'confirm' = 'init'; + let stage: "init" | "devpost" | "loading" | "confirm" = "init"; if (loading) { - stage = 'loading'; + stage = "loading"; } else if (tableNumber) { - stage = 'confirm'; + stage = "confirm"; } else if (hasClickedNext) { - stage = 'devpost'; + stage = "devpost"; } const handleTeamNumberSubmit = () => { @@ -41,7 +41,7 @@ export default function TableNumberCheckin() { const handleReset = () => { setTableNumber(null); - setTeamNumber(''); + setTeamNumber(""); setHasClickedNext(false); }; @@ -50,10 +50,10 @@ export default function TableNumberCheckin() { return (
- {stage === 'init' && ( + {stage === "init" && ( setHasClickedNext(true)} /> )} - {stage === 'devpost' && ( + {stage === "devpost" && ( setHasClickedNext(false)} /> )} - {stage === 'loading' && } - {stage === 'confirm' && ( + {stage === "loading" && } + {stage === "confirm" && ( setValue(tableNumber)} diff --git a/public/hackers/table-number-checkin/loading.svg b/public/hackers/table-number-checkin/loading.svg new file mode 100644 index 00000000..d0160e4c --- /dev/null +++ b/public/hackers/table-number-checkin/loading.svg @@ -0,0 +1,136 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From e970d98338199b3e6e89ea516ab36ac449cae1b7 Mon Sep 17 00:00:00 2001 From: Jack Zheng Date: Thu, 12 Mar 2026 15:08:17 -0700 Subject: [PATCH 05/11] feat: add confirm stage mobile --- .../TableNumberCheckin/ConfirmStage.tsx | 90 +++++++++++++++++++ .../TableNumberCheckin/DevpostStage.tsx | 2 +- .../TableNumberCheckin/LoadingStage.tsx | 2 +- .../_components/TableNumberCheckin/index.tsx | 2 +- public/hackers/table-number-checkin/map.svg | 3 + 5 files changed, 96 insertions(+), 3 deletions(-) create mode 100644 app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx create mode 100644 public/hackers/table-number-checkin/map.svg diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx new file mode 100644 index 00000000..1ddd0371 --- /dev/null +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx @@ -0,0 +1,90 @@ +"use client"; + +import Link from "next/link"; +import Image from "next/image"; + +interface ConfirmStageProps { + tableNumber: number | null; + onConfirm: () => void; + onReset: () => void; +} + +export default function ConfirmStage({ + tableNumber, + onConfirm, + onReset, +}: ConfirmStageProps) { + return ( +
+ {/* Table Number - top half */} +
+

+ TABLE +

+ +

+ A1 +

+
+ +
+ {/* Description */} +
+
+

Your Table Number

+ +

+ Check that you and your team members received the same table + number. It is extremely important to be + present at your table + when the judges arrive. +

+
+ +
+
+ Map Icon +
+ + + MAP LINK + +
+ + {/* Buttons */} +
+ + + +
+
+
+
+ ); +} diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/DevpostStage.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/DevpostStage.tsx index 9712e65c..211bf354 100644 --- a/app/(pages)/(hackers)/_components/TableNumberCheckin/DevpostStage.tsx +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/DevpostStage.tsx @@ -20,7 +20,7 @@ export default function DevpostStage({ const hasTeamNumber = teamNumber.length == 5; return ( -
+
{/* Image - top half */}
diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/LoadingStage.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/LoadingStage.tsx index 2bd6d418..6a360943 100644 --- a/app/(pages)/(hackers)/_components/TableNumberCheckin/LoadingStage.tsx +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/LoadingStage.tsx @@ -7,7 +7,7 @@ interface LoadingStageProps { export default function LoadingStage({ teamNumber }: LoadingStageProps) { return ( -
+
{/* Image - top half */}
diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx index 60f7467b..1bf6f7a2 100644 --- a/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx @@ -7,7 +7,7 @@ import useTableNumberContext from "@pages/_hooks/useTableNumberContext"; import InitStage from "./InitStage"; import DevpostStage from "./DevpostStage"; import LoadingStage from "./LoadingStage"; -// import ConfirmStage from "./ConfirmStage"; +import ConfirmStage from "./ConfirmStage"; export default function TableNumberCheckin() { const { diff --git a/public/hackers/table-number-checkin/map.svg b/public/hackers/table-number-checkin/map.svg new file mode 100644 index 00000000..c572744b --- /dev/null +++ b/public/hackers/table-number-checkin/map.svg @@ -0,0 +1,3 @@ + + + From f962e7dc23f4dbf8f3092a9221772fd6a4a9629f Mon Sep 17 00:00:00 2001 From: Jack Zheng Date: Thu, 12 Mar 2026 15:20:22 -0700 Subject: [PATCH 06/11] feat: add initial stage desktop --- .../TableNumberCheckin/InitStage.tsx | 30 +++++++++++-------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/InitStage.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/InitStage.tsx index 7e476b7b..7b9b274b 100644 --- a/app/(pages)/(hackers)/_components/TableNumberCheckin/InitStage.tsx +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/InitStage.tsx @@ -1,6 +1,6 @@ -'use client'; +"use client"; -import Image from 'next/image'; +import Image from "next/image"; interface InitStageProps { onNext: () => void; @@ -8,29 +8,35 @@ interface InitStageProps { export default function InitStage({ onNext }: InitStageProps) { return ( -
- {/* Image - top half */} -
+
+ {/* Image - top half on mobile, right side on desktop */} +
mascots hanging out
- {/* Content - bottom */} -
+ {/* Content - bottom on mobile, left side on desktop */} +
-

The Hackathon has ended!

-

+

+ The Hackathon has ended! +

+

Thank you for all your hard work. Next, please follow the directions to find your assigned table number.

+
@@ -83,7 +86,7 @@ export default function DevpostStage({ hasTeamNumber ? "bg-[#CCFFFE] text-[#1A3819]" : "bg-[#F3F3FC] text-[#ACACB9]" - } font-semibold text-base flex justify-center items-center px-8 py-3 rounded-[40px] cursor-pointer disabled:opacity-30`} + } font-semibold text-base flex justify-center items-center px-8 py-3 rounded-[40px] cursor-pointer disabled:opacity-30 md:px-[44px] md:py-5`} disabled={!hasTeamNumber} onClick={onSubmit} > From ee34dfc90b615bce1c6dd275f7a4139c2c6a5abb Mon Sep 17 00:00:00 2001 From: Jack Zheng Date: Thu, 12 Mar 2026 16:32:04 -0700 Subject: [PATCH 08/11] feat: add loading stage desktop --- .../TableNumberCheckin/ConfirmStage.tsx | 10 +- .../TableNumberCheckin/DevpostStage.tsx | 26 ++--- .../TableNumberCheckin/InitStage.tsx | 8 +- .../TableNumberCheckin/LoadingStage.tsx | 94 ++++++++++--------- .../_components/TableNumberCheckin/index.tsx | 36 +++---- 5 files changed, 91 insertions(+), 83 deletions(-) diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx index 1ddd0371..cc7dede3 100644 --- a/app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx @@ -1,7 +1,7 @@ -"use client"; +'use client'; -import Link from "next/link"; -import Image from "next/image"; +import Link from 'next/link'; +import Image from 'next/image'; interface ConfirmStageProps { tableNumber: number | null; @@ -44,7 +44,7 @@ export default function ConfirmStage({
Map Icon Right Arrow {/* RIGHT column — first in DOM so image appears at top on mobile, right on desktop */} @@ -29,7 +29,7 @@ export default function DevpostStage({ {/* Screenshot image */}
mascots hanging out { - const val = e.target.value.replace(/\D/g, "").slice(0, 5); + const val = e.target.value.replace(/\D/g, '').slice(0, 5); onChange(val); }} /> @@ -61,14 +61,14 @@ export default function DevpostStage({

{error - ? "Oops! We did not find your Devpost number." - : "Find your Devpost number."} + ? 'Oops! We did not find your Devpost number.' + : 'Find your Devpost number.'}

{error - ? "Please double check you have entered the same number on your devpost account." - : "This can be found by going to _____ and selecting____. Enter the number exactly as it is presented."} + ? 'Please double check you have entered the same number on your devpost account.' + : 'This can be found by going to _____ and selecting____. Enter the number exactly as it is presented.'}

@@ -84,16 +84,16 @@ export default function DevpostStage({ + {/* Buttons */} +
+ - + +
); diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx index 1bf6f7a2..e0d010cd 100644 --- a/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx @@ -1,13 +1,13 @@ -"use client"; +'use client'; -import { useState } from "react"; -import { useTableNumber } from "@pages/_hooks/useTableNumber"; -import useTableNumberContext from "@pages/_hooks/useTableNumberContext"; +import { useState } from 'react'; +import { useTableNumber } from '@pages/_hooks/useTableNumber'; +import useTableNumberContext from '@pages/_hooks/useTableNumberContext'; -import InitStage from "./InitStage"; -import DevpostStage from "./DevpostStage"; -import LoadingStage from "./LoadingStage"; -import ConfirmStage from "./ConfirmStage"; +import InitStage from './InitStage'; +import DevpostStage from './DevpostStage'; +import LoadingStage from './LoadingStage'; +import ConfirmStage from './ConfirmStage'; export default function TableNumberCheckin() { const { @@ -16,7 +16,7 @@ export default function TableNumberCheckin() { setValue, } = useTableNumberContext(); - const [teamNumber, setTeamNumber] = useState(""); + const [teamNumber, setTeamNumber] = useState(''); const [hasClickedNext, setHasClickedNext] = useState(false); const { loading, tableNumber, fetchTableNumber, setTableNumber, error } = useTableNumber(); @@ -26,13 +26,13 @@ export default function TableNumberCheckin() { } // Stage resolution - let stage: "init" | "devpost" | "loading" | "confirm" = "init"; + let stage: 'init' | 'devpost' | 'loading' | 'confirm' = 'loading'; if (loading) { - stage = "loading"; + stage = 'loading'; } else if (tableNumber) { - stage = "confirm"; + stage = 'confirm'; } else if (hasClickedNext) { - stage = "devpost"; + stage = 'devpost'; } const handleTeamNumberSubmit = () => { @@ -41,7 +41,7 @@ export default function TableNumberCheckin() { const handleReset = () => { setTableNumber(null); - setTeamNumber(""); + setTeamNumber(''); setHasClickedNext(false); }; @@ -50,10 +50,10 @@ export default function TableNumberCheckin() { return (
- {stage === "init" && ( + {stage === 'init' && ( setHasClickedNext(true)} /> )} - {stage === "devpost" && ( + {stage === 'devpost' && ( setHasClickedNext(false)} /> )} - {stage === "loading" && } - {stage === "confirm" && ( + {stage === 'loading' && } + {stage === 'confirm' && ( setValue(tableNumber)} From 90fdad1956d565b3f18c050df812b1ae67c8a10e Mon Sep 17 00:00:00 2001 From: Jack Zheng Date: Thu, 12 Mar 2026 16:48:21 -0700 Subject: [PATCH 09/11] feat: add confirm stage desktop --- .../TableNumberCheckin/ConfirmStage.tsx | 101 +++++++++--------- .../_components/TableNumberCheckin/index.tsx | 2 +- public/hackers/table-number-checkin/check.svg | 3 + 3 files changed, 57 insertions(+), 49 deletions(-) create mode 100644 public/hackers/table-number-checkin/check.svg diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx index cc7dede3..22a3e3a8 100644 --- a/app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx @@ -15,34 +15,39 @@ export default function ConfirmStage({ onReset, }: ConfirmStageProps) { return ( -
- {/* Table Number - top half */} -
-

- TABLE -

- -

- A1 -

+
+ {/* RIGHT column — first in DOM so it appears at top on mobile, right on desktop */} +
+ {/* Table Number Card */} +
+

+ TABLE +

+

+ {tableNumber ?? 'A1'} +

+
-
- {/* Description */} -
-
-

Your Table Number

+ {/* LEFT column — second in DOM, reordered to first on desktop */} +
+
+

+ Your Table Number +

-

- Check that you and your team members received the same table - number. It is extremely important to be - present at your table - when the judges arrive. -

-
+

+ Check that you and your team members received the same table number. + It is extremely important to be{' '} + present at your table when + the judges arrive. +

-
-
+
+
Map Icon MAP LINK
+
- {/* Buttons */} -
- + {/* Buttons */} +
+ - -
+
diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx index e0d010cd..b6dd5ae4 100644 --- a/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx @@ -26,7 +26,7 @@ export default function TableNumberCheckin() { } // Stage resolution - let stage: 'init' | 'devpost' | 'loading' | 'confirm' = 'loading'; + let stage: 'init' | 'devpost' | 'loading' | 'confirm' = 'init'; if (loading) { stage = 'loading'; } else if (tableNumber) { diff --git a/public/hackers/table-number-checkin/check.svg b/public/hackers/table-number-checkin/check.svg new file mode 100644 index 00000000..1f702300 --- /dev/null +++ b/public/hackers/table-number-checkin/check.svg @@ -0,0 +1,3 @@ + + + From bab18eefec47dc678580e733313320cb6dbf67bd Mon Sep 17 00:00:00 2001 From: Jack Zheng Date: Thu, 12 Mar 2026 16:51:52 -0700 Subject: [PATCH 10/11] chore: update names and delete unnecessary files --- app/(pages)/(hackers)/(hub)/page.tsx | 2 +- .../TableNumberCheckin.module.scss | 300 ------------------ .../TableNumberCheckin/TableNumberCheckin.tsx | 189 +++-------- .../_components/TableNumberCheckin/index.tsx | 76 ----- .../table-number-checkin/diag-arrow.svg | 5 - .../mascots-hanging-out.svg | 95 ------ .../table-number-checkin/sleeping-frog.svg | 22 -- public/hackers/table-number-checkin/stars.svg | 6 - 8 files changed, 41 insertions(+), 654 deletions(-) delete mode 100644 app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.module.scss delete mode 100644 app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx delete mode 100644 public/hackers/table-number-checkin/diag-arrow.svg delete mode 100644 public/hackers/table-number-checkin/mascots-hanging-out.svg delete mode 100644 public/hackers/table-number-checkin/sleeping-frog.svg delete mode 100644 public/hackers/table-number-checkin/stars.svg diff --git a/app/(pages)/(hackers)/(hub)/page.tsx b/app/(pages)/(hackers)/(hub)/page.tsx index 20eae391..c42ab5a2 100644 --- a/app/(pages)/(hackers)/(hub)/page.tsx +++ b/app/(pages)/(hackers)/(hub)/page.tsx @@ -5,7 +5,7 @@ import BeginnersSection from '@pages/(hackers)/_components/HomeHacking/Beginners import Discord from '@pages/(hackers)/_components/StayUpToDate/Discord'; import Footer from '@components/Footer/Footer'; import ClientTimeProtectedDisplay from '@pages/_components/TimeProtectedDisplay/ClientTimeProtectedDisplay'; -import TableNumberCheckin from '@pages/(hackers)/_components/TableNumberCheckin/index.tsx'; +import TableNumberCheckin from '@pages/(hackers)/_components/TableNumberCheckin/TableNumberCheckin'; import TableNumberContextProvider from '@pages/_contexts/TableNumberContext'; import MDHelp from '@pages/(hackers)/_components/HomeHacking/MDHelp'; import ScheduleSneakPeek from '@pages/(hackers)/_components/HomeHacking/ScheduleSneakPeek'; diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.module.scss b/app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.module.scss deleted file mode 100644 index 35e138b1..00000000 --- a/app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.module.scss +++ /dev/null @@ -1,300 +0,0 @@ -@use 'app/(pages)/_globals/mixins'; - -.background_dimmer { - position: fixed; - left: 0; - right: 0; - top: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.50); - display: flex; - flex-direction: column; - align-items: center; - padding: 70px; - z-index: 101; - - @include mixins.tablet-s { - padding: 70px 32px; - } -} - -.modal_container { - width: 100%; - max-width: 900px; - border-radius: 16px; - border: 1px solid rgba(255, 255, 255, 0.70); - background: linear-gradient(357deg, rgba(255, 255, 255, 0.85) 54.41%, #B2E7DD 88.18%, #76D6E6 112.56%); - backdrop-filter: blur(30px); -} - -.text_container { - display: flex; - flex-direction: column; - gap: 12px; - - color: #000; - text-align: center; - font-family: var(--font-jakarta); - padding: 0 24px; - - @include mixins.tablet-s { - padding: 0 8px; - } - - > h3 { - font-size: 1.125rem; - font-weight: 600; - @include mixins.tablet-s { - font-size: 0.875rem; - } - - } - - > p { - font-size: 1.125rem; - font-weight: 400; - @include mixins.tablet-s { - font-size: 0.875rem; - } - } -} - -.team_input { - border-radius: 16px; - background: rgba(255, 255, 255, 0.70); - border-color: transparent; - padding: 16px 16px; - flex-grow: 1; - min-width: 0; - - color: #005271; - font-size: 1.125rem; - border: none !important; - &.error { - border: solid 1px var(--text-error) !important; - } - - @include mixins.tablet-s { - font-size: 0.875rem; - padding: 8px 16px; - } - - @include mixins.desktop-s { - font-size: 1rem; - } - - &::placeholder { - color: #005271; - @include mixins.desktop-s { - font-size: 1rem; - } - } - - &:focus { - outline: none; - box-shadow: none; - border-color: transparent; - } -} - -.init_content_container { - display: flex; - flex-direction: column; - align-items: center; - padding: 10% 15%; - gap: 70px; - - @include mixins.desktop-s { - gap: 40px; - } - - @include mixins.tablet-l { - padding: 15% 32px; - } - - .mascot_container { - display: flex; - flex-direction: column; - align-items: center; - margin-top: 24px; - width: 100%; - - .mascots { - width: 100%; - height: auto; - } - } - - .input_container { - display: flex; - flex-direction: row; - gap: 44px; - width: 100%; - padding: 0 24px; - min-width: none; - - @include mixins.tablet-xl { - padding: 0; - gap: 8px; - } - - .see_teammates_button { - color: white; - font-weight: 600; - font-size: 1.125rem; - display: flex; - justify-content: center; - align-items: center; - padding: 12px 24px; - border-radius: 8px; - background: #005271; - cursor: pointer; - flex-shrink: 0; - - @include mixins.tablet-s { - font-size: 0.875rem; - padding: 8px 16px; - } - } - } -} - -.loading_content_container { - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-end; - padding: 250px 120px 80px 120px; - gap: 150px; - - @include mixins.tablet-xl { - padding: 120px 60px 60px 60px; - gap: 80px; - } - - @include mixins.tablet-s { - padding: 80px 40px 40px 40px; - gap: 60px; - } - - .frog { - width: 50%; - height: auto; - transform: translateX(-5%); - } -} - -.confirm_content_container { - position: relative; - height: 100%; - display: flex; - flex-direction: column; - align-items: center; - padding: 80px 120px; - gap: 40px; - - @include mixins.tablet-xl { - padding: 60px 90px; - gap: 32px; - } - - - @include mixins.tablet-l { - padding: 40px; - gap: 24px; - } - - @include mixins.tablet-s { - padding: 24px; - gap: 24px; - } - - - .header { - display: flex; - flex-direction: row-reverse; - height: min-content; - gap: 80px; - - @include mixins.tablet-xl { - flex-direction: column; - gap: 16px; - } - - >h1 { - font-size: 250px; - font-weight: 300; - - @include mixins.tablet-xl { - width: 100%; - text-align: center; - font-size: 64px; - width: 100%; - } - } - - .text_container { - display: flex; - flex-direction: column; - align-items: flex-start; - text-align: left; - justify-content: space-between; - padding: 60px 0; - - @include mixins.tablet-xl { - padding: 0; - align-items: center; - } - } - } - - .input_container { - display: flex; - flex-direction: row; - gap: 44px; - width: 100%; - padding: 0 24px; - - @include mixins.tablet-xl { - gap: 16px; - } - - @include mixins.tablet-s { - padding: 0; - } - - .yes_button { - color: white; - font-weight: 600; - font-size: 1.125rem; - display: flex; - justify-content: center; - align-items: center; - padding: 12px 24px; - border-radius: 8px; - background: #005271; - flex-grow: 1; - cursor: pointer; - } - } - - .not_my_team_button { - color: #FFF; - text-align: center; - font-size: 1.125rem; - font-weight: 600; - border-radius: 50px; - opacity: 0.5; - background: #005271; - padding: 6px 24px; - } - - .link { - text-decoration: underline; - text-underline-offset: 4px; - display: flex; - flex-direction: row; - margin-bottom: 1rem; - } -} diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.tsx index 799477db..b6dd5ae4 100644 --- a/app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.tsx +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.tsx @@ -1,16 +1,14 @@ 'use client'; -import Image from 'next/image'; -import Link from 'next/link'; import { useState } from 'react'; import { useTableNumber } from '@pages/_hooks/useTableNumber'; - -import sleepyFrog from '@public/hackers/table-number-checkin/sleeping-frog.svg'; -import modalArrow from '@public/hackers/table-number-checkin/modal-arrow.svg'; -import diagArrow from '@public/hackers/table-number-checkin/diag-arrow.svg'; - import useTableNumberContext from '@pages/_hooks/useTableNumberContext'; +import InitStage from './InitStage'; +import DevpostStage from './DevpostStage'; +import LoadingStage from './LoadingStage'; +import ConfirmStage from './ConfirmStage'; + export default function TableNumberCheckin() { const { loading: localStorageLoading, @@ -19,6 +17,7 @@ export default function TableNumberCheckin() { } = useTableNumberContext(); const [teamNumber, setTeamNumber] = useState(''); + const [hasClickedNext, setHasClickedNext] = useState(false); const { loading, tableNumber, fetchTableNumber, setTableNumber, error } = useTableNumber(); @@ -26,160 +25,52 @@ export default function TableNumberCheckin() { return null; } - let stage = 'init'; + // Stage resolution + let stage: 'init' | 'devpost' | 'loading' | 'confirm' = 'init'; if (loading) { stage = 'loading'; - } else { - stage = tableNumber ? 'confirm' : 'init'; + } else if (tableNumber) { + stage = 'confirm'; + } else if (hasClickedNext) { + stage = 'devpost'; } const handleTeamNumberSubmit = () => { fetchTableNumber(Number(teamNumber)); }; - const hasTeamNumber = Boolean(teamNumber); - - const inputStage = ( -
- {/* Image - top half */} -
- mascots hanging out -
- - {/* Content - bottom */} -
-
-

The Hackathon has ended!

-

- Thank you for all your hard work. Next, please follow the directions - for find your assigned table number. -

-
-
- {/* setTeamNumber(e.target.value)} - /> */} - -
-
-
- ); - - const loadingStage = ( -
- sleepy frog -
-

- SEARCHING HIGH AND LOW... -

-

- Please wait patiently while we match you to a judging table. Btw did - you know next year will be HackDavis's 10 year anniversary? -

-
-
- ); - - const confirmStage = ( -
- {/* Header */} -
-

- {tableNumber} -

-
-
-

- YOUR TABLE NUMBER -

-
- - Map Link arrow - -

- Check that you and your team members received the same table - number. It is extremely important to be{' '} - present at your table when the judges arrive. -

-
-
-
-
- - {/* Input Row */} -
- setTeamNumber(e.target.value)} - disabled - /> - -
- - {/* Not my team */} - -
- ); - - const displayMap = { - init: inputStage, - loading: loadingStage, - confirm: confirmStage, + const handleReset = () => { + setTableNumber(null); + setTeamNumber(''); + setHasClickedNext(false); }; + console.log({ loading, tableNumber, hasClickedNext, stage }); + return (
-
{displayMap[stage]}
+
+ {stage === 'init' && ( + setHasClickedNext(true)} /> + )} + {stage === 'devpost' && ( + setHasClickedNext(false)} + /> + )} + {stage === 'loading' && } + {stage === 'confirm' && ( + setValue(tableNumber)} + onReset={handleReset} + /> + )} +
); } diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx deleted file mode 100644 index b6dd5ae4..00000000 --- a/app/(pages)/(hackers)/_components/TableNumberCheckin/index.tsx +++ /dev/null @@ -1,76 +0,0 @@ -'use client'; - -import { useState } from 'react'; -import { useTableNumber } from '@pages/_hooks/useTableNumber'; -import useTableNumberContext from '@pages/_hooks/useTableNumberContext'; - -import InitStage from './InitStage'; -import DevpostStage from './DevpostStage'; -import LoadingStage from './LoadingStage'; -import ConfirmStage from './ConfirmStage'; - -export default function TableNumberCheckin() { - const { - loading: localStorageLoading, - storedValue, - setValue, - } = useTableNumberContext(); - - const [teamNumber, setTeamNumber] = useState(''); - const [hasClickedNext, setHasClickedNext] = useState(false); - const { loading, tableNumber, fetchTableNumber, setTableNumber, error } = - useTableNumber(); - - if (localStorageLoading || storedValue) { - return null; - } - - // Stage resolution - let stage: 'init' | 'devpost' | 'loading' | 'confirm' = 'init'; - if (loading) { - stage = 'loading'; - } else if (tableNumber) { - stage = 'confirm'; - } else if (hasClickedNext) { - stage = 'devpost'; - } - - const handleTeamNumberSubmit = () => { - fetchTableNumber(Number(teamNumber)); - }; - - const handleReset = () => { - setTableNumber(null); - setTeamNumber(''); - setHasClickedNext(false); - }; - - console.log({ loading, tableNumber, hasClickedNext, stage }); - - return ( -
-
- {stage === 'init' && ( - setHasClickedNext(true)} /> - )} - {stage === 'devpost' && ( - setHasClickedNext(false)} - /> - )} - {stage === 'loading' && } - {stage === 'confirm' && ( - setValue(tableNumber)} - onReset={handleReset} - /> - )} -
-
- ); -} diff --git a/public/hackers/table-number-checkin/diag-arrow.svg b/public/hackers/table-number-checkin/diag-arrow.svg deleted file mode 100644 index ebcc8fe0..00000000 --- a/public/hackers/table-number-checkin/diag-arrow.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/public/hackers/table-number-checkin/mascots-hanging-out.svg b/public/hackers/table-number-checkin/mascots-hanging-out.svg deleted file mode 100644 index bc3909e4..00000000 --- a/public/hackers/table-number-checkin/mascots-hanging-out.svg +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/hackers/table-number-checkin/sleeping-frog.svg b/public/hackers/table-number-checkin/sleeping-frog.svg deleted file mode 100644 index 4deb7799..00000000 --- a/public/hackers/table-number-checkin/sleeping-frog.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/public/hackers/table-number-checkin/stars.svg b/public/hackers/table-number-checkin/stars.svg deleted file mode 100644 index d51c422e..00000000 --- a/public/hackers/table-number-checkin/stars.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - From 3d360206e4200233fafecaf5e6cfdecb24bfa190 Mon Sep 17 00:00:00 2001 From: Jack Zheng Date: Thu, 12 Mar 2026 17:04:50 -0700 Subject: [PATCH 11/11] chore: fix padding, devpost number lnegth, and text spacing --- .../_components/TableNumberCheckin/ConfirmStage.tsx | 6 +++--- .../_components/TableNumberCheckin/DevpostStage.tsx | 4 ++-- .../_components/TableNumberCheckin/TableNumberCheckin.tsx | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx index 22a3e3a8..af94cf13 100644 --- a/app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx @@ -35,14 +35,14 @@ export default function ConfirmStage({ {/* LEFT column — second in DOM, reordered to first on desktop */}
-

+

Your Table Number

Check that you and your team members received the same table number. - It is extremely important to be{' '} - present at your table when + It is extremely important to be + present at your table when the judges arrive.

diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/DevpostStage.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/DevpostStage.tsx index 301a46fb..63d06ed2 100644 --- a/app/(pages)/(hackers)/_components/TableNumberCheckin/DevpostStage.tsx +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/DevpostStage.tsx @@ -17,7 +17,7 @@ export default function DevpostStage({ onSubmit, onBack, }: DevpostStageProps) { - const hasTeamNumber = teamNumber.length == 5; + const hasTeamNumber = teamNumber.length; return (
-

+

{error ? 'Oops! We did not find your Devpost number.' : 'Find your Devpost number.'} diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.tsx index b6dd5ae4..1722e5df 100644 --- a/app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.tsx +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.tsx @@ -48,7 +48,7 @@ export default function TableNumberCheckin() { console.log({ loading, tableNumber, hasClickedNext, stage }); return ( -
+
{stage === 'init' && ( setHasClickedNext(true)} />