From e893b327364f29c479ebfe39e18c75d29bb08494 Mon Sep 17 00:00:00 2001 From: Sam Der Date: Tue, 24 Oct 2023 18:21:26 -0700 Subject: [PATCH 01/10] setup: basic framer countdown --- apps/site/src/app/schedule/page.tsx | 4 +- .../components/Countdown/Countdown.tsx | 71 +++++++++++++++++++ .../CountdownItem/CountdownItem.module.scss | 10 +++ .../CountdownItem/CountdownItem.tsx | 31 ++++++++ 4 files changed, 114 insertions(+), 2 deletions(-) create mode 100644 apps/site/src/views/Schedule/components/Countdown/Countdown.tsx create mode 100644 apps/site/src/views/Schedule/components/CountdownItem/CountdownItem.module.scss create mode 100644 apps/site/src/views/Schedule/components/CountdownItem/CountdownItem.tsx diff --git a/apps/site/src/app/schedule/page.tsx b/apps/site/src/app/schedule/page.tsx index 12442032..77093744 100644 --- a/apps/site/src/app/schedule/page.tsx +++ b/apps/site/src/app/schedule/page.tsx @@ -2,10 +2,10 @@ import { Schedule } from "@/views"; import { Maintenance } from "@/views"; export const revalidate = 60; - + // When set to any value const Component = process.env.MAINTENANCE_MODE_SCHEDULE ? Maintenance : Schedule; -export default Component; \ No newline at end of file +export default Component; diff --git a/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx b/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx new file mode 100644 index 00000000..7344ed63 --- /dev/null +++ b/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx @@ -0,0 +1,71 @@ +"use client"; + +import { useEffect, useRef, useState } from "react"; +import Col from "react-bootstrap/Col"; +import Container from "react-bootstrap/Container"; +import Row from "react-bootstrap/Row"; + +import CountdownItem from "../CountdownItem/CountdownItem"; + +const COUNTDOWN_FROM = "11/4/2023 10:00:00"; + +const SECOND = 1000; +const MINUTE = SECOND * 60; +const HOUR = MINUTE * 60; +const DAY = HOUR * 24; + +export default function Countdown() { + const intervalRef = useRef(null); + + const [remaining, setRemaining] = useState({ + days: 0, + hours: 0, + minutes: 0, + seconds: 0, + }); + + useEffect(() => { + intervalRef.current = setInterval(handleCountdown, 1000); + + return () => clearInterval(intervalRef.current || undefined); + }, []); + + const handleCountdown = () => { + const end = new Date(COUNTDOWN_FROM); + + const now = new Date(); + + const distance = +end - +now; + + const days = Math.floor(distance / DAY); + const hours = Math.floor((distance % DAY) / HOUR); + const minutes = Math.floor((distance % HOUR) / MINUTE); + const seconds = Math.floor((distance % MINUTE) / SECOND); + + setRemaining({ + days, + hours, + minutes, + seconds, + }); + }; + + return ( + + + + + + + + + + + + + + + + + ); +} diff --git a/apps/site/src/views/Schedule/components/CountdownItem/CountdownItem.module.scss b/apps/site/src/views/Schedule/components/CountdownItem/CountdownItem.module.scss new file mode 100644 index 00000000..7894382a --- /dev/null +++ b/apps/site/src/views/Schedule/components/CountdownItem/CountdownItem.module.scss @@ -0,0 +1,10 @@ +@use "bootstrap-utils" as bootstrap; + +.countdownItem { + position: relative; + overflow: hidden; + + h2 { + @include bootstrap.font-size(5rem); + } +} diff --git a/apps/site/src/views/Schedule/components/CountdownItem/CountdownItem.tsx b/apps/site/src/views/Schedule/components/CountdownItem/CountdownItem.tsx new file mode 100644 index 00000000..a12835b4 --- /dev/null +++ b/apps/site/src/views/Schedule/components/CountdownItem/CountdownItem.tsx @@ -0,0 +1,31 @@ +import { AnimatePresence, motion } from "framer-motion"; + +import styles from "./CountdownItem.module.scss"; + +interface CountdownItemProps { + num: number; + text: string; +} + +export default function CountdownItem({ num, text }: CountdownItemProps) { + return ( + <> +
+ + + {num} + + +
+ + {text} + + ); +} From fe366f2625c307ed894c937037f1be74ba35d504 Mon Sep 17 00:00:00 2001 From: Sam Der Date: Wed, 25 Oct 2023 15:49:34 -0700 Subject: [PATCH 02/10] fix: removed useRef, changed animation exit value --- .../src/views/Schedule/components/Countdown/Countdown.tsx | 6 ++---- .../Schedule/components/CountdownItem/CountdownItem.tsx | 4 +--- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx b/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx index 7344ed63..45016733 100644 --- a/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx +++ b/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx @@ -15,8 +15,6 @@ const HOUR = MINUTE * 60; const DAY = HOUR * 24; export default function Countdown() { - const intervalRef = useRef(null); - const [remaining, setRemaining] = useState({ days: 0, hours: 0, @@ -25,9 +23,9 @@ export default function Countdown() { }); useEffect(() => { - intervalRef.current = setInterval(handleCountdown, 1000); + const timer = setInterval(handleCountdown, 1000); - return () => clearInterval(intervalRef.current || undefined); + return () => clearInterval(timer); }, []); const handleCountdown = () => { diff --git a/apps/site/src/views/Schedule/components/CountdownItem/CountdownItem.tsx b/apps/site/src/views/Schedule/components/CountdownItem/CountdownItem.tsx index a12835b4..3f54ed83 100644 --- a/apps/site/src/views/Schedule/components/CountdownItem/CountdownItem.tsx +++ b/apps/site/src/views/Schedule/components/CountdownItem/CountdownItem.tsx @@ -1,5 +1,4 @@ import { AnimatePresence, motion } from "framer-motion"; - import styles from "./CountdownItem.module.scss"; interface CountdownItemProps { @@ -16,9 +15,8 @@ export default function CountdownItem({ num, text }: CountdownItemProps) { key={num} initial={{ y: "100%" }} animate={{ y: "0%" }} - exit={{ y: "-100%" }} + exit={{ y: "-50%" }} transition={{ ease: "backIn", duration: 0.75 }} - className="d-block" > {num} From f2963b48b23a074b4b33af35f8853b92343764c9 Mon Sep 17 00:00:00 2001 From: Sam Der Date: Sun, 29 Oct 2023 13:00:03 -0700 Subject: [PATCH 03/10] update: temporarily disabled slide up animation --- .../components/CountdownItem/CountdownItem.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/apps/site/src/views/Schedule/components/CountdownItem/CountdownItem.tsx b/apps/site/src/views/Schedule/components/CountdownItem/CountdownItem.tsx index 3f54ed83..3de87819 100644 --- a/apps/site/src/views/Schedule/components/CountdownItem/CountdownItem.tsx +++ b/apps/site/src/views/Schedule/components/CountdownItem/CountdownItem.tsx @@ -11,15 +11,7 @@ export default function CountdownItem({ num, text }: CountdownItemProps) { <>
- - {num} - + {num}
From e7795d359a06cfaacd96514667453c1eac642d91 Mon Sep 17 00:00:00 2001 From: Sam Der Date: Mon, 30 Oct 2023 17:05:43 -0700 Subject: [PATCH 04/10] fix: conditional day render --- .../components/Countdown/Countdown.tsx | 26 ++++++++----------- .../CountdownItem/CountdownItem.tsx | 4 ++- 2 files changed, 14 insertions(+), 16 deletions(-) diff --git a/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx b/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx index 45016733..b789fcd1 100644 --- a/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx +++ b/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx @@ -7,8 +7,6 @@ import Row from "react-bootstrap/Row"; import CountdownItem from "../CountdownItem/CountdownItem"; -const COUNTDOWN_FROM = "11/4/2023 10:00:00"; - const SECOND = 1000; const MINUTE = SECOND * 60; const HOUR = MINUTE * 60; @@ -29,7 +27,7 @@ export default function Countdown() { }, []); const handleCountdown = () => { - const end = new Date(COUNTDOWN_FROM); + const end = new Date(2023, 10, 4, 10, 0, 0); const now = new Date(); @@ -40,21 +38,18 @@ export default function Countdown() { const minutes = Math.floor((distance % HOUR) / MINUTE); const seconds = Math.floor((distance % MINUTE) / SECOND); - setRemaining({ - days, - hours, - minutes, - seconds, - }); + setRemaining({ days, hours, minutes, seconds }); }; return ( - - - - - - + + + {remaining.days !== 0 ? ( + + + + ) : null} + @@ -64,6 +59,7 @@ export default function Countdown() { +

Until Hacking Begins

 ); } diff --git a/apps/site/src/views/Schedule/components/CountdownItem/CountdownItem.tsx b/apps/site/src/views/Schedule/components/CountdownItem/CountdownItem.tsx index 3de87819..5b660e46 100644 --- a/apps/site/src/views/Schedule/components/CountdownItem/CountdownItem.tsx +++ b/apps/site/src/views/Schedule/components/CountdownItem/CountdownItem.tsx @@ -11,7 +11,9 @@ export default function CountdownItem({ num, text }: CountdownItemProps) { <>
- {num} + + {num} +
From d5c59fac7cc8ff254a39785eb095e829c62b363b Mon Sep 17 00:00:00 2001 From: Tyler Yu Date: Wed, 1 Nov 2023 19:13:10 -0700 Subject: [PATCH 05/10] fix: precompute time --- .../components/Countdown/Countdown.tsx | 40 +++++++++++-------- 1 file changed, 23 insertions(+), 17 deletions(-) diff --git a/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx b/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx index b789fcd1..6e5f79fa 100644 --- a/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx +++ b/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx @@ -12,13 +12,28 @@ const MINUTE = SECOND * 60; const HOUR = MINUTE * 60; const DAY = HOUR * 24; +const computeTimeTil = () => { + const end = new Date(2023, 10, 4, 10, 0, 0); + + const now = new Date(); + + const distance = +end - +now; + + const days = Math.floor(distance / DAY); + const hours = Math.floor((distance % DAY) / HOUR); + const minutes = Math.floor((distance % HOUR) / MINUTE); + const seconds = Math.floor((distance % MINUTE) / SECOND); + return { + days, + hours, + minutes, + seconds, + }; +}; + export default function Countdown() { - const [remaining, setRemaining] = useState({ - days: 0, - hours: 0, - minutes: 0, - seconds: 0, - }); + const initTime = computeTimeTil(); + const [remaining, setRemaining] = useState({ ...initTime }); useEffect(() => { const timer = setInterval(handleCountdown, 1000); @@ -27,18 +42,9 @@ export default function Countdown() { }, []); const handleCountdown = () => { - const end = new Date(2023, 10, 4, 10, 0, 0); - - const now = new Date(); - - const distance = +end - +now; - - const days = Math.floor(distance / DAY); - const hours = Math.floor((distance % DAY) / HOUR); - const minutes = Math.floor((distance % HOUR) / MINUTE); - const seconds = Math.floor((distance % MINUTE) / SECOND); + const time = computeTimeTil(); - setRemaining({ days, hours, minutes, seconds }); + setRemaining({ ...time }); }; return ( From 911c08783e6d15c436dea9f54d65acdea4e1b085 Mon Sep 17 00:00:00 2001 From: Tyler Yu Date: Wed, 1 Nov 2023 19:36:53 -0700 Subject: [PATCH 06/10] fix: margin for the countdown --- apps/site/src/views/Schedule/components/Countdown/Countdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx b/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx index 6e5f79fa..1cd76061 100644 --- a/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx +++ b/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx @@ -48,7 +48,7 @@ export default function Countdown() { }; return ( - + {remaining.days !== 0 ? ( From 6a2386acd06ce78a5b02e967210144300cba1b9b Mon Sep 17 00:00:00 2001 From: Tyler Yu Date: Thu, 2 Nov 2023 01:17:11 -0700 Subject: [PATCH 07/10] update: added loading bar --- .../components/Countdown/Countdown.tsx | 67 ++++++++++++------- .../components/Loader/Loader.module.scss | 14 ++++ .../Schedule/components/Loader/Loader.tsx | 40 +++++++++++ 3 files changed, 95 insertions(+), 26 deletions(-) create mode 100644 apps/site/src/views/Schedule/components/Loader/Loader.module.scss create mode 100644 apps/site/src/views/Schedule/components/Loader/Loader.tsx diff --git a/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx b/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx index 1cd76061..8aad6a69 100644 --- a/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx +++ b/apps/site/src/views/Schedule/components/Countdown/Countdown.tsx @@ -1,17 +1,25 @@ "use client"; -import { useEffect, useRef, useState } from "react"; +import { useEffect, useState, useRef, MutableRefObject } from "react"; import Col from "react-bootstrap/Col"; import Container from "react-bootstrap/Container"; import Row from "react-bootstrap/Row"; import CountdownItem from "../CountdownItem/CountdownItem"; +import BarLoader from "../Loader/Loader"; const SECOND = 1000; const MINUTE = SECOND * 60; const HOUR = MINUTE * 60; const DAY = HOUR * 24; +interface Time { + days: number; + hours: number; + minutes: number; + seconds: number; +} + const computeTimeTil = () => { const end = new Date(2023, 10, 4, 10, 0, 0); @@ -32,40 +40,47 @@ const computeTimeTil = () => { }; export default function Countdown() { - const initTime = computeTimeTil(); - const [remaining, setRemaining] = useState({ ...initTime }); + const timer: MutableRefObject = useRef(); + const [remaining, setRemaining] = useState