diff --git a/app/(pages)/(hackers)/(hub)/page.tsx b/app/(pages)/(hackers)/(hub)/page.tsx index bf6ae3c6..c42ab5a2 100644 --- a/app/(pages)/(hackers)/(hub)/page.tsx +++ b/app/(pages)/(hackers)/(hub)/page.tsx @@ -31,12 +31,12 @@ export default function Page() { {/* temporarilty set featureId below to "hero-hacking" to test */} - + - + diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx new file mode 100644 index 00000000..af94cf13 --- /dev/null +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx @@ -0,0 +1,95 @@ +'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 ( +
+ {/* RIGHT column — first in DOM so it appears at top on mobile, right on desktop */} +
+ {/* Table Number Card */} +
+

+ TABLE +

+

+ {tableNumber ?? 'A1'} +

+
+
+ + {/* 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. +

+ +
+
+ Map Icon +
+ + + MAP LINK + +
+
+ + {/* Buttons */} +
+ + + +
+
+
+ ); +} diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/DevpostStage.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/DevpostStage.tsx new file mode 100644 index 00000000..63d06ed2 --- /dev/null +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/DevpostStage.tsx @@ -0,0 +1,107 @@ +'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; + + return ( +
+ {/* RIGHT column — first in DOM so image appears at top on mobile, right on desktop */} +
+ {/* Screenshot image */} +
+ mascots hanging out +
+ + {/* Devpost Number Input — below image */} +
+

+ DEVPOST NUMBER +

+ { + const val = e.target.value.replace(/\D/g, '').slice(0, 5); + onChange(val); + }} + /> +
+
+ + {/* LEFT column — second in DOM, reordered to first on desktop */} +
+
+

+ {error + ? '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.'} +

+
+ + {/* Buttons — bottom of left column on desktop, bottom of card on mobile */} +
+ + + +
+
+
+ ); +} diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/InitStage.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/InitStage.tsx new file mode 100644 index 00000000..48bd470d --- /dev/null +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/InitStage.tsx @@ -0,0 +1,58 @@ +'use client'; + +import Image from 'next/image'; + +interface InitStageProps { + onNext: () => void; +} + +export default function InitStage({ onNext }: InitStageProps) { + return ( +
+ {/* Image - top half on mobile, right side on desktop */} +
+ mascots hanging out +
+ + {/* Content - bottom on mobile, left side on desktop */} +
+
+

+ The Hackathon has ended! +

+

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

+
+ +
+ +
+
+
+ ); +} diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/LoadingStage.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/LoadingStage.tsx new file mode 100644 index 00000000..057edaf6 --- /dev/null +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/LoadingStage.tsx @@ -0,0 +1,85 @@ +'use client'; + +import Image from 'next/image'; + +interface LoadingStageProps { + teamNumber: string; +} + +export default function LoadingStage({ teamNumber }: LoadingStageProps) { + return ( +
+ {/* RIGHT column — first in DOM so image appears at top on mobile, right on desktop */} +
+ {/* Image */} +
+ mascots hanging out +
+ + {/* Devpost Number — below image */} +
+

+ DEVPOST NUMBER +

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

+ Searching high and low... +

+ +

+ Did you know that this year is HackDavis's 10 year anniversary? +

+
+ + {/* Buttons */} +
+ + + +
+
+
+ ); +} 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 be0cd5ec..1722e5df 100644 --- a/app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.tsx +++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/TableNumberCheckin.tsx @@ -1,19 +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 stars from '@public/hackers/table-number-checkin/stars.svg'; -import mascots from '@public/hackers/table-number-checkin/mascots-hanging-out.svg'; -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 styles from './TableNumberCheckin.module.scss'; 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, @@ -21,7 +16,8 @@ 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(); @@ -29,136 +25,52 @@ export default function TableNumberCheckin() { return null; } - let stage: 'init' | 'loading' | 'confirm' = '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 = ( -
-
- {'floating - {'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. -

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

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 = ( -
-
-

{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. -

-
-
-
-
- setTeamNumber(event.target.value)} - disabled - /> - -
- -
- ); - - 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/public/hackers/table-number-checkin/Filler.svg b/public/hackers/table-number-checkin/Filler.svg new file mode 100644 index 00000000..ba8cf89d --- /dev/null +++ b/public/hackers/table-number-checkin/Filler.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/hackers/table-number-checkin/arrow-right.svg b/public/hackers/table-number-checkin/arrow-right.svg new file mode 100644 index 00000000..1a527bf6 --- /dev/null +++ b/public/hackers/table-number-checkin/arrow-right.svg @@ -0,0 +1,3 @@ + + + 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 @@ + + + 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/end-of-hackathon.svg b/public/hackers/table-number-checkin/end-of-hackathon.svg new file mode 100644 index 00000000..fd2c9132 --- /dev/null +++ b/public/hackers/table-number-checkin/end-of-hackathon.svg @@ -0,0 +1,121 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 @@ + + + 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 @@ - - - - - -