From fa04f0d1c0d3fd097ee35479470433db1928a5f6 Mon Sep 17 00:00:00 2001 From: Bl20052005 <88120481+Bl20052005@users.noreply.github.com> Date: Mon, 30 Sep 2024 12:38:24 -0700 Subject: [PATCH 01/13] preliminary design --- apps/site/src/app/(home)/page.tsx | 2 + .../sections/Countdown/Countdown.module.scss | 48 +++++++ .../(home)/sections/Countdown/Countdown.tsx | 136 ++++++++++++++++++ .../Countdown/CountdownClock.module.scss | 64 +++++++++ .../sections/Countdown/CountdownClock.tsx | 93 ++++++++++++ .../(home)/sections/Countdown/Scheduling.tsx | 19 +++ .../(home)/sections/Countdown/getSchedule.ts | 64 +++++++++ .../app/(home)/sections/Countdown/index.ts | 1 + .../(home)/sections/Countdown/useWindow.tsx | 14 ++ .../site/src/assets/images/maps/countdown.svg | 17 +++ 10 files changed, 458 insertions(+) create mode 100644 apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss create mode 100644 apps/site/src/app/(home)/sections/Countdown/Countdown.tsx create mode 100644 apps/site/src/app/(home)/sections/Countdown/CountdownClock.module.scss create mode 100644 apps/site/src/app/(home)/sections/Countdown/CountdownClock.tsx create mode 100644 apps/site/src/app/(home)/sections/Countdown/Scheduling.tsx create mode 100644 apps/site/src/app/(home)/sections/Countdown/getSchedule.ts create mode 100644 apps/site/src/app/(home)/sections/Countdown/index.ts create mode 100644 apps/site/src/app/(home)/sections/Countdown/useWindow.tsx create mode 100644 apps/site/src/assets/images/maps/countdown.svg diff --git a/apps/site/src/app/(home)/page.tsx b/apps/site/src/app/(home)/page.tsx index 4651f039..ce1fc5cb 100644 --- a/apps/site/src/app/(home)/page.tsx +++ b/apps/site/src/app/(home)/page.tsx @@ -7,11 +7,13 @@ import Sponsors from "./sections/Sponsors"; import FAQ from "./sections/FAQ"; import styles from "./page.module.scss"; +import Countdown from "./sections/Countdown"; const Home = () => { return (
+ {/* diff --git a/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss b/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss new file mode 100644 index 00000000..63967219 --- /dev/null +++ b/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss @@ -0,0 +1,48 @@ +.paraboloid { + position: relative; +} + +.countdownWrapper { + display: flex; + align-items: center; + flex-direction: column; + position: relative; +} + +.countdownMaterial { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.outerCircle { + background-color: #ffffff; + // border-color: #1a1840; + border: 5px solid #1a1840; + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; + bottom: 0; + position: absolute; +} + +.innerCircle { + background-color: #BD5A5A; + width: 30px; + height: 30px; + border-radius: 50%; +} + +.progressContainer { + height: 200px; +} \ No newline at end of file diff --git a/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx new file mode 100644 index 00000000..cca1d8b9 --- /dev/null +++ b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx @@ -0,0 +1,136 @@ +"use client"; + +import bg_map from "@/assets/images/maps/countdown.svg"; +import Image from "next/image"; +import { useRef } from "react"; +import useWindow from "./useWindow"; + +import styles from "./Countdown.module.scss"; +import CountdownClock from "./CountdownClock"; + +interface CountdownProps { + schedule: { + title: string; + location?: string | undefined; + virtual?: string | undefined; + startTime: Date; + endTime: Date; + organization?: string | undefined; + hosts?: string[] | undefined; + description: any; + }[]; +} + +const Countdown: React.FC = ({ schedule }) => { + const curTime = new Date("2023-11-04T02:00:00.000Z"); + const endTime = new Date("2024-11-04T02:00:00.000Z"); + console.log(schedule); + const ended = schedule.filter((el) => el.endTime > curTime); + + console.log(ended); + + const before = + ended.length > 0 + ? ended[0] + : { + title: "That's a wrap~", + location: "", + startTime: new Date(0), + endTime: new Date(0), + }; + + const after = + ended.length > 1 + ? ended[1] + : { + title: "That's a wrap~", + location: "", + startTime: new Date(0), + endTime: new Date(0), + }; + + const [w, h] = useWindow(); + + const totalLines = Math.floor(w / 66); + + const totals = Array(totalLines + 1).fill(0); + + function returnPosition(num: number) { + // this is the parabola -(0.2x - 1.5)^2 + 2.25 + let step = (20 / totalLines) * num; + console.log("step", step); + let prop_y = (-((0.15 * step - 1.5) * (0.15 * step - 1.5)) + 2.25) / 2.25; + return [`${step * 5}%`, `${prop_y * 100}%`]; + } + + function returnRotation(num: number) { + // this is the derivative of the aforementioned parabola turned into degrees of rotation + let step = (15 / totalLines) * num; + return Math.atan(-(2 * step - 15) / 25); + } + + return ( +
+ bg_map +
+
+
+ {totals.map((el, i) => ( +
+ ))} +
+
+
+
+
{before.title}
+ {before?.location &&

{before.location}

} + {before?.startTime.getTime() ? ( +

{`${before.startTime.getHours() % 12} ${before.startTime.getHours() == 11 ? "am" : ""}-${before.endTime.getHours() % 12} ${before.endTime.getHours() < 12 ? "am" : "pm"}`}

+ ) : null} +
+
+
+
+
+
{after.title}
+ {after.location &&

{after.location}

} + {after.startTime.getTime() ? ( +

{`${after.startTime.getHours() % 12}${after.startTime.getHours() == 11 ? " am" : ""}-${after.endTime.getHours() % 12} ${after.endTime.getHours() < 12 ? "am" : "pm"}`}

+ ) : null} +
+
+
+ +
+
+ ); +}; + +export default Countdown; diff --git a/apps/site/src/app/(home)/sections/Countdown/CountdownClock.module.scss b/apps/site/src/app/(home)/sections/Countdown/CountdownClock.module.scss new file mode 100644 index 00000000..0e768814 --- /dev/null +++ b/apps/site/src/app/(home)/sections/Countdown/CountdownClock.module.scss @@ -0,0 +1,64 @@ +@use "bootstrap-utils" as bootstrap; + +.countdown { + margin: 0; + padding: 96px 0 32px 0; + opacity: 0; + transition: opacity 225ms cubic-bezier(0.32, 0, 0.67, 0); + + span { + text-align: center; + + &.time { + display: flex; + flex-wrap: wrap; + @include bootstrap.font-size(6rem); + line-height: 100%; + gap: 10px 4rem; + justify-content: center; + + .timePortion { + display: flex; + flex-direction: column; + gap: 5px; + min-width: 110px; + } + + .timeBlock { + display: flex; + gap: 10px; + } + + .timeText { + font-size: 22px; + width: 100%; + text-align: center; + } + + .number { + font-weight: 600; + display: inline-block; + text-align: center; + background: #efc588; + font-size: 60px; + padding: 5px; + min-width: 50px; + border-radius: 7px; + min-height: 30px; + } + + .colon { + opacity: 0.75; + } + } + + &.caption { + display: block; + @include bootstrap.font-size(1.5rem); + } + } +} + +.loaded { + opacity: 1; +} diff --git a/apps/site/src/app/(home)/sections/Countdown/CountdownClock.tsx b/apps/site/src/app/(home)/sections/Countdown/CountdownClock.tsx new file mode 100644 index 00000000..9ed4bc24 --- /dev/null +++ b/apps/site/src/app/(home)/sections/Countdown/CountdownClock.tsx @@ -0,0 +1,93 @@ +"use client"; + +import React, { useEffect, useState } from "react"; + +import clsx from "clsx"; +import styles from "./CountdownClock.module.scss"; + +interface CountdownProps { + countdownTo: Date; + isHackingStarted: boolean; +} + +const CountdownClock: React.FC = ({ + countdownTo, + isHackingStarted, +}) => { + const [remainingSeconds, setRemainingSeconds] = useState(NaN); + + useEffect(() => { + setRemainingSeconds( + Math.max(0, (countdownTo.valueOf() - new Date().valueOf()) / 1000), + ); + const interval = setInterval(() => { + setRemainingSeconds((r) => Math.max(0, r - 1)); + }, 1000); + + return () => clearInterval(interval); + }, [countdownTo]); + + return ( +
+ + + + {Math.floor(remainingSeconds / (60 * 60 * 24)) + .toString() + .split("") + .map((el) => { + return {el}; + })} + + + Days + + + + + {`${Math.floor((remainingSeconds / 3600) % 24) < 10 ? "0" : ""}`} + + + {`${Math.floor((remainingSeconds / 3600) % 24).toString()}`} + + + Hours + + + + + {`${Math.floor((remainingSeconds / 60) % 60) < 10 ? "0" : Math.floor(((remainingSeconds / 60) % 60) / 10)}`} + + + {`${Math.floor((remainingSeconds / 60) % 60) % 10}`} + + + Minutes + + + + + {`${Math.floor(remainingSeconds % 60) < 10 ? "0" : Math.floor((remainingSeconds % 60) / 10)}`} + + + {`${Math.floor(remainingSeconds % 60) % 10}`} + + + Seconds + + + + {isHackingStarted && !isNaN(remainingSeconds) + ? "Until Hacking Ends" + : "Until Hacking Begins"} + +
+ ); +}; + +export default CountdownClock; diff --git a/apps/site/src/app/(home)/sections/Countdown/Scheduling.tsx b/apps/site/src/app/(home)/sections/Countdown/Scheduling.tsx new file mode 100644 index 00000000..edd48ce0 --- /dev/null +++ b/apps/site/src/app/(home)/sections/Countdown/Scheduling.tsx @@ -0,0 +1,19 @@ +import Countdown from "./Countdown"; +import { getSchedule } from "./getSchedule"; + +export default async function CountdownSchedule() { + const schedule = (await getSchedule())[0].map((el) => { + return { + title: el.title, + startTime: el.startTime, + endTime: el.endTime, + location: el.location, + virtual: el.virtual, + organization: el.organization, + hosts: el.hosts, + description: el.description, + }; + }); + // console.log(days); + return ; +} diff --git a/apps/site/src/app/(home)/sections/Countdown/getSchedule.ts b/apps/site/src/app/(home)/sections/Countdown/getSchedule.ts new file mode 100644 index 00000000..52a11c98 --- /dev/null +++ b/apps/site/src/app/(home)/sections/Countdown/getSchedule.ts @@ -0,0 +1,64 @@ +import { z } from "zod"; +import { cache } from "react"; +import { client } from "@/lib/sanity/client"; +import { SanityDocument } from "@/lib/sanity/types"; +import { formatInTimeZone } from "date-fns-tz"; + +const Events = z.array( + SanityDocument.extend({ + _type: z.literal("event"), + title: z.string(), + location: z.string().optional(), + virtual: z.string().url().optional(), + startTime: z + .string() + .datetime() + .transform((time) => new Date(time)), + endTime: z + .string() + .datetime() + .transform((time) => new Date(time)), + organization: z.string().optional(), + hosts: z.array(z.string()).optional(), + description: z.array( + z.object({ + _key: z.string(), + markDefs: z.array( + z.object({ + _type: z.string(), + href: z.optional(z.string()), + _key: z.string(), + }), + ), + children: z.array( + z.object({ + text: z.string(), + _key: z.string(), + _type: z.literal("span"), + marks: z.array(z.string()), + }), + ), + _type: z.literal("block"), + style: z.literal("normal"), + }), + ), + }), +); + +export const getSchedule = cache(async () => { + const events = Events.parse( + await client.fetch("*[_type == 'event'] | order(startTime asc)"), + ); + const eventsByDay = new Map>(); + + events.forEach((event) => { + const key = formatInTimeZone( + new Date(event.startTime), + "America/Los_Angeles", + "MM/dd/yyyy", + ); + eventsByDay.set(key, [...(eventsByDay.get(key) ?? []), event]); + }); + + return Array.from(eventsByDay.values()); +}); diff --git a/apps/site/src/app/(home)/sections/Countdown/index.ts b/apps/site/src/app/(home)/sections/Countdown/index.ts new file mode 100644 index 00000000..a380a4b8 --- /dev/null +++ b/apps/site/src/app/(home)/sections/Countdown/index.ts @@ -0,0 +1 @@ +export { default } from "./Scheduling"; diff --git a/apps/site/src/app/(home)/sections/Countdown/useWindow.tsx b/apps/site/src/app/(home)/sections/Countdown/useWindow.tsx new file mode 100644 index 00000000..8988f639 --- /dev/null +++ b/apps/site/src/app/(home)/sections/Countdown/useWindow.tsx @@ -0,0 +1,14 @@ +import { useEffect, useState } from "react"; + +export default function useWindow() { + const [size, setSize] = useState([0, 0]); + useEffect(() => { + setSize([window.innerWidth, window.innerHeight]); + function setWindowSize() { + setSize([window.innerWidth, window.innerHeight]); + } + window.addEventListener("resize", setWindowSize); + return () => window.removeEventListener("resize", setWindowSize); + }, []); + return size; +} diff --git a/apps/site/src/assets/images/maps/countdown.svg b/apps/site/src/assets/images/maps/countdown.svg new file mode 100644 index 00000000..7aa12673 --- /dev/null +++ b/apps/site/src/assets/images/maps/countdown.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + From 5cb316e9c2ea81246add340ca54f184682406cb3 Mon Sep 17 00:00:00 2001 From: Bl20052005 <88120481+Bl20052005@users.noreply.github.com> Date: Mon, 30 Sep 2024 16:29:33 -0700 Subject: [PATCH 02/13] formatting and style alignment --- .../sections/Countdown/Countdown.module.scss | 10 ++ .../(home)/sections/Countdown/Countdown.tsx | 113 ++++++++++-------- .../Countdown/CountdownClock.module.scss | 7 +- 3 files changed, 78 insertions(+), 52 deletions(-) diff --git a/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss b/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss index 63967219..f11360c2 100644 --- a/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss +++ b/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss @@ -9,7 +9,17 @@ position: relative; } +.descriptiveText { + top: 45px; + left: 20px; + position: absolute; + min-width: 150px; + transform: translateX(-50%); + text-align: center; +} + .countdownMaterial { + // margin-top: 10%; position: absolute; top: 0px; left: 0px; diff --git a/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx index cca1d8b9..fb5be392 100644 --- a/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx +++ b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx @@ -22,9 +22,9 @@ interface CountdownProps { } const Countdown: React.FC = ({ schedule }) => { - const curTime = new Date("2023-11-04T02:00:00.000Z"); + const curTime = new Date("2023-11-04T01:30:00.000Z"); const endTime = new Date("2024-11-04T02:00:00.000Z"); - console.log(schedule); + const ended = schedule.filter((el) => el.endTime > curTime); console.log(ended); @@ -49,6 +49,12 @@ const Countdown: React.FC = ({ schedule }) => { endTime: new Date(0), }; + const percentageCrossed = + before.endTime.getTime() > 0 + ? (before.endTime.getTime() - curTime.getTime()) / + (before.endTime.getTime() - before.startTime.getTime()) + : 100; + const [w, h] = useWindow(); const totalLines = Math.floor(w / 66); @@ -72,63 +78,68 @@ const Countdown: React.FC = ({ schedule }) => { return (
bg_map -
-
-
- {totals.map((el, i) => ( + {w > 0 && ( +
+
+
+ {totals.map((el, i) => ( +
percentageCrossed ? "#DB9F42" : "#78cae3"}`, + width: "18px", + height: "5px", + borderRadius: "6px", + transform: `rotate(${-((returnRotation(i) * 180) / Math.PI)}deg)`, + }} + >
+ ))}
- ))} -
-
-
-
-
{before.title}
- {before?.location &&

{before.location}

} - {before?.startTime.getTime() ? ( -

{`${before.startTime.getHours() % 12} ${before.startTime.getHours() == 11 ? "am" : ""}-${before.endTime.getHours() % 12} ${before.endTime.getHours() < 12 ? "am" : "pm"}`}

- ) : null} -
-
-
+ > +
+
+
{before.title}
+ {before?.location &&

{before.location}

} + {before?.startTime.getTime() ? ( +

{`${before.startTime.getHours() % 12} ${before.startTime.getHours() == 11 ? "am" : ""}-${before.endTime.getHours() % 12} ${before.endTime.getHours() < 12 ? "am" : "pm"}`}

+ ) : null} +
+
+ +
+
+
+
{after.title}
+ {after.location &&

{after.location}

} + {after.startTime.getTime() ? ( +

{`${after.startTime.getHours() % 12}${after.startTime.getHours() == 11 ? " am" : ""}-${after.endTime.getHours() % 12} ${after.endTime.getHours() < 12 ? "am" : "pm"}`}

+ ) : null} +
+
-
{after.title}
- {after.location &&

{after.location}

} - {after.startTime.getTime() ? ( -

{`${after.startTime.getHours() % 12}${after.startTime.getHours() == 11 ? " am" : ""}-${after.endTime.getHours() % 12} ${after.endTime.getHours() < 12 ? "am" : "pm"}`}

- ) : null} +
- -
+ )}
); }; diff --git a/apps/site/src/app/(home)/sections/Countdown/CountdownClock.module.scss b/apps/site/src/app/(home)/sections/Countdown/CountdownClock.module.scss index 0e768814..2ff22ef7 100644 --- a/apps/site/src/app/(home)/sections/Countdown/CountdownClock.module.scss +++ b/apps/site/src/app/(home)/sections/Countdown/CountdownClock.module.scss @@ -2,13 +2,18 @@ .countdown { margin: 0; - padding: 96px 0 32px 0; opacity: 0; transition: opacity 225ms cubic-bezier(0.32, 0, 0.67, 0); span { text-align: center; + @media only screen and (max-width: 700px) { + &.time { + flex-direction: column; + } + } + &.time { display: flex; flex-wrap: wrap; From 3919aedf3b5cda685b751264506aa66bcc405864 Mon Sep 17 00:00:00 2001 From: Bl20052005 <88120481+Bl20052005@users.noreply.github.com> Date: Tue, 1 Oct 2024 15:25:02 -0700 Subject: [PATCH 03/13] new functional changes --- .../sections/Countdown/Countdown.module.scss | 96 +++++++++-- .../(home)/sections/Countdown/Countdown.tsx | 162 ++++++++++++------ .../Countdown/CountdownClock.module.scss | 12 +- .../sections/Countdown/CountdownClock.tsx | 68 +++++--- .../(home)/sections/Countdown/Scheduling.tsx | 1 - 5 files changed, 237 insertions(+), 102 deletions(-) diff --git a/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss b/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss index f11360c2..91c2f384 100644 --- a/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss +++ b/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss @@ -1,5 +1,6 @@ .paraboloid { position: relative; + width: 100%; } .countdownWrapper { @@ -31,28 +32,91 @@ justify-content: center; } +@media only screen and (max-width: 400px) { + .clockPos { + margin-top: 45%; + } + .preCountdown { + margin-top: 50%; + } + .endText { + margin-top: 50%; + } +} + +@media only screen and (min-width: 401px) and (max-width: 600px) { + .clockPos { + margin-top: 30%; + } + .preCountdown { + margin-top: 40%; + } + .endText { + margin-top: 40%; + } +} + +@media only screen and (min-width: 601px) and (max-width: 1000px) { + .clockPos { + margin-top: 20%; + } + .preCountdown { + margin-top: 20%; + } + .endText { + margin-top: 20%; + } +} + +@media only screen and (min-width: 1001px) { + .preCountdown { + margin-top: 15%; + } + .endText { + margin-top: 10%; + } +} + +.clockPos { + width: 100%; + display: flex; + justify-content: center; +} + .outerCircle { background-color: #ffffff; // border-color: #1a1840; - border: 5px solid #1a1840; - width: 50px; - height: 50px; - border-radius: 50%; - display: flex; - justify-content: center; - align-items: center; - z-index: 1; - bottom: 0; - position: absolute; + border: 5px solid #1a1840; + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; + bottom: 0; + position: absolute; } .innerCircle { - background-color: #BD5A5A; - width: 30px; - height: 30px; - border-radius: 50%; + background-color: #bd5a5a; + width: 30px; + height: 30px; + border-radius: 50%; +} + +.descriptiveTextTop { + position: absolute; + top: -70px; + width: 150px; + text-align: center; + p { + margin: 0; + padding: 0; + } } .progressContainer { - height: 200px; -} \ No newline at end of file + height: 200px; + width: 60%; +} diff --git a/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx index fb5be392..63eb4a13 100644 --- a/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx +++ b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx @@ -2,11 +2,11 @@ import bg_map from "@/assets/images/maps/countdown.svg"; import Image from "next/image"; -import { useRef } from "react"; import useWindow from "./useWindow"; import styles from "./Countdown.module.scss"; import CountdownClock from "./CountdownClock"; +import { useEffect, useState } from "react"; interface CountdownProps { schedule: { @@ -22,12 +22,20 @@ interface CountdownProps { } const Countdown: React.FC = ({ schedule }) => { - const curTime = new Date("2023-11-04T01:30:00.000Z"); - const endTime = new Date("2024-11-04T02:00:00.000Z"); + const hackStartTime = new Date(2024, 10, 2, 14, 0, 0); // TBD + const hackEndTime = new Date(2024, 10, 3, 18, 0, 0); // TBD - const ended = schedule.filter((el) => el.endTime > curTime); + const [curTime, setCurTime] = useState(new Date()); + + useEffect(() => { + const i = setInterval(() => { + setCurTime(new Date()); + }, 1000); - console.log(ended); + return () => clearInterval(i); + }); + + const ended = schedule.filter((el) => el.endTime > curTime); const before = ended.length > 0 @@ -57,14 +65,13 @@ const Countdown: React.FC = ({ schedule }) => { const [w, h] = useWindow(); - const totalLines = Math.floor(w / 66); + const totalLines = Math.floor(w / 66) > 7 ? Math.floor(w / 66) : 7; const totals = Array(totalLines + 1).fill(0); function returnPosition(num: number) { // this is the parabola -(0.2x - 1.5)^2 + 2.25 let step = (20 / totalLines) * num; - console.log("step", step); let prop_y = (-((0.15 * step - 1.5) * (0.15 * step - 1.5)) + 2.25) / 2.25; return [`${step * 5}%`, `${prop_y * 100}%`]; } @@ -75,69 +82,112 @@ const Countdown: React.FC = ({ schedule }) => { return Math.atan(-(2 * step - 15) / 25); } + if (curTime > hackEndTime) { + return ( +
+ bg_map +
+

Hacking has ended!

+
+
+ ); + } + return (
bg_map {w > 0 && (
-
-
- {totals.map((el, i) => ( + {curTime >= hackStartTime ? ( +
+
+ {totals.map((el, i) => ( +
percentageCrossed ? "#DB9F42" : "#78cae3"}`, + width: "18px", + height: "5px", + borderRadius: "6px", + transform: `rotate(${-((returnRotation(i) * 180) / Math.PI)}deg)`, + }} + >
+ ))}
percentageCrossed ? "#DB9F42" : "#78cae3"}`, - width: "18px", - height: "5px", - borderRadius: "6px", - transform: `rotate(${-((returnRotation(i) * 180) / Math.PI)}deg)`, + bottom: "-20px", + left: "-20px", }} - >
- ))} -
-
-
-
{before.title}
- {before?.location &&

{before.location}

} - {before?.startTime.getTime() ? ( -

{`${before.startTime.getHours() % 12} ${before.startTime.getHours() == 11 ? "am" : ""}-${before.endTime.getHours() % 12} ${before.endTime.getHours() < 12 ? "am" : "pm"}`}

- ) : null} + > +
+ {before.location && w <= 800 ? ( +

{before.location}

+ ) : null} + {before.startTime.getTime() && w <= 800 ? ( +

{`${before.startTime.getHours() % 12}${before.startTime.getHours() == 11 ? " am" : ""}-${before.endTime.getHours() % 12} ${before.endTime.getHours() < 12 ? "am" : "pm"}`}

+ ) : null} +
+
+
+
{before.title}
+ {before.location && w > 800 ? ( +

{before.location}

+ ) : null} + {before.startTime.getTime() && w > 800 ? ( +

{`${before.startTime.getHours() % 12}${before.startTime.getHours() == 11 ? " am" : ""}-${before.endTime.getHours() % 12} ${before.endTime.getHours() < 12 ? "am" : "pm"}`}

+ ) : null} +
-
-
-
-
-
{after.title}
- {after.location &&

{after.location}

} - {after.startTime.getTime() ? ( -

{`${after.startTime.getHours() % 12}${after.startTime.getHours() == 11 ? " am" : ""}-${after.endTime.getHours() % 12} ${after.endTime.getHours() < 12 ? "am" : "pm"}`}

- ) : null} +
+
+ {after.location && w <= 800 ? ( +

{after.location}

+ ) : null} + {after.startTime.getTime() && w <= 800 ? ( +

{`${after.startTime.getHours() % 12}${after.startTime.getHours() == 11 ? " am" : ""}-${after.endTime.getHours() % 12} ${after.endTime.getHours() < 12 ? "am" : "pm"}`}

+ ) : null} +
+
+
+
{after.title}
+ {after.location && w > 800 ?

{after.location}

: null} + {after.startTime.getTime() && w > 800 ? ( +

{`${after.startTime.getHours() % 12}${after.startTime.getHours() == 11 ? " am" : ""}-${after.endTime.getHours() % 12} ${after.endTime.getHours() < 12 ? "am" : "pm"}`}

+ ) : null} +
+
+ hackStartTime ? hackEndTime : hackStartTime + } + isHackingStarted={curTime >= hackStartTime} + /> +
-
- + ) : ( +
+ {" "} + hackStartTime ? hackEndTime : hackStartTime + } + isHackingStarted={curTime >= hackStartTime} + />
-
+ )}
)}
diff --git a/apps/site/src/app/(home)/sections/Countdown/CountdownClock.module.scss b/apps/site/src/app/(home)/sections/Countdown/CountdownClock.module.scss index 2ff22ef7..a5a6aa24 100644 --- a/apps/site/src/app/(home)/sections/Countdown/CountdownClock.module.scss +++ b/apps/site/src/app/(home)/sections/Countdown/CountdownClock.module.scss @@ -8,9 +8,15 @@ span { text-align: center; - @media only screen and (max-width: 700px) { + @media screen and (max-width: 1000px) { &.time { - flex-direction: column; + gap: 10px 2rem; + } + } + + @media screen and (min-width: 1001px) { + &.time { + gap: 10px 3rem; } } @@ -19,8 +25,8 @@ flex-wrap: wrap; @include bootstrap.font-size(6rem); line-height: 100%; - gap: 10px 4rem; justify-content: center; + min-width: 260px; .timePortion { display: flex; diff --git a/apps/site/src/app/(home)/sections/Countdown/CountdownClock.tsx b/apps/site/src/app/(home)/sections/Countdown/CountdownClock.tsx index 9ed4bc24..bbb5cd7c 100644 --- a/apps/site/src/app/(home)/sections/Countdown/CountdownClock.tsx +++ b/apps/site/src/app/(home)/sections/Countdown/CountdownClock.tsx @@ -35,26 +35,40 @@ const CountdownClock: React.FC = ({ )} > - - - {Math.floor(remainingSeconds / (60 * 60 * 24)) - .toString() - .split("") - .map((el) => { - return {el}; - })} + {!isHackingStarted && ( + + + {Math.floor(remainingSeconds / (60 * 60 * 24)) + .toString() + .split("") + .map((el) => { + return {el}; + })} + + Days - - Days - + )} - - {`${Math.floor((remainingSeconds / 3600) % 24) < 10 ? "0" : ""}`} - - - {`${Math.floor((remainingSeconds / 3600) % 24).toString()}`} - + {isHackingStarted ? ( + <> + {Math.floor(remainingSeconds / (60 * 60)) + .toString() + .split("") + .map((el) => { + return {el}; + })} + + ) : ( + <> + + {`${Math.floor((remainingSeconds / 3600) % 24) < 10 ? "0" : Math.floor(Math.floor((remainingSeconds / 3600) % 24) / 10)}`} + + + {`${(Math.floor((remainingSeconds / 3600) % 24) % 10).toString()}`} + + + )} Hours @@ -69,17 +83,19 @@ const CountdownClock: React.FC = ({ Minutes - - - - {`${Math.floor(remainingSeconds % 60) < 10 ? "0" : Math.floor((remainingSeconds % 60) / 10)}`} - - - {`${Math.floor(remainingSeconds % 60) % 10}`} + {isHackingStarted && ( + + + + {`${Math.floor(remainingSeconds % 60) < 10 ? "0" : Math.floor((remainingSeconds % 60) / 10)}`} + + + {`${Math.floor(remainingSeconds % 60) % 10}`} + + Seconds - Seconds - + )} {isHackingStarted && !isNaN(remainingSeconds) diff --git a/apps/site/src/app/(home)/sections/Countdown/Scheduling.tsx b/apps/site/src/app/(home)/sections/Countdown/Scheduling.tsx index edd48ce0..1aff847a 100644 --- a/apps/site/src/app/(home)/sections/Countdown/Scheduling.tsx +++ b/apps/site/src/app/(home)/sections/Countdown/Scheduling.tsx @@ -14,6 +14,5 @@ export default async function CountdownSchedule() { description: el.description, }; }); - // console.log(days); return ; } From dc3627622dcef486b8605ed7d348ae12f08af800 Mon Sep 17 00:00:00 2001 From: Bl20052005 <88120481+Bl20052005@users.noreply.github.com> Date: Wed, 2 Oct 2024 22:49:22 -0700 Subject: [PATCH 04/13] style changes and boat image --- .../sections/Countdown/Countdown.module.scss | 5 +++ .../(home)/sections/Countdown/Countdown.tsx | 32 +++++++++++++++--- .../sections/Countdown/CountdownClock.tsx | 12 ++++--- apps/site/src/assets/icons/boat.png | Bin 0 -> 5956 bytes 4 files changed, 40 insertions(+), 9 deletions(-) create mode 100644 apps/site/src/assets/icons/boat.png diff --git a/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss b/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss index 91c2f384..83c07706 100644 --- a/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss +++ b/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss @@ -83,6 +83,11 @@ justify-content: center; } +.boat { + position: absolute; + transform: translate(-50%, 40%); +} + .outerCircle { background-color: #ffffff; // border-color: #1a1840; diff --git a/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx index 63eb4a13..5b253908 100644 --- a/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx +++ b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx @@ -8,6 +8,8 @@ import styles from "./Countdown.module.scss"; import CountdownClock from "./CountdownClock"; import { useEffect, useState } from "react"; +import boat from "@/assets/icons/boat.png"; + interface CountdownProps { schedule: { title: string; @@ -22,8 +24,8 @@ interface CountdownProps { } const Countdown: React.FC = ({ schedule }) => { - const hackStartTime = new Date(2024, 10, 2, 14, 0, 0); // TBD - const hackEndTime = new Date(2024, 10, 3, 18, 0, 0); // TBD + const hackStartTime = new Date(2024, 10, 1, 14, 0, 0); // TBD, zothacks start time + const hackEndTime = new Date(2024, 10, 2, 18, 0, 0); // TBD, zothacks end time const [curTime, setCurTime] = useState(new Date()); @@ -93,6 +95,8 @@ const Countdown: React.FC = ({ schedule }) => { ); } + console.log(percentageCrossed); + return (
bg_map @@ -101,9 +105,9 @@ const Countdown: React.FC = ({ schedule }) => { {curTime >= hackStartTime ? (
- {totals.map((el, i) => ( + {totals.map((_, i) => (
= ({ schedule }) => { ) : null}
+
+ boat +
= ({ schedule }) => {
) : (
- {" "} hackStartTime ? hackEndTime : hackStartTime diff --git a/apps/site/src/app/(home)/sections/Countdown/CountdownClock.tsx b/apps/site/src/app/(home)/sections/Countdown/CountdownClock.tsx index bbb5cd7c..d1d606f1 100644 --- a/apps/site/src/app/(home)/sections/Countdown/CountdownClock.tsx +++ b/apps/site/src/app/(home)/sections/Countdown/CountdownClock.tsx @@ -41,8 +41,12 @@ const CountdownClock: React.FC = ({ {Math.floor(remainingSeconds / (60 * 60 * 24)) .toString() .split("") - .map((el) => { - return {el}; + .map((el, i) => { + return ( + + {el} + + ); })} Days @@ -55,8 +59,8 @@ const CountdownClock: React.FC = ({ {Math.floor(remainingSeconds / (60 * 60)) .toString() .split("") - .map((el) => { - return {el}; + .map((el, i) => { + return {el}; })} ) : ( diff --git a/apps/site/src/assets/icons/boat.png b/apps/site/src/assets/icons/boat.png new file mode 100644 index 0000000000000000000000000000000000000000..98ef637f479b2c044290bb2352fd8b16ba361c28 GIT binary patch literal 5956 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 Date: Thu, 31 Oct 2024 23:43:59 -0700 Subject: [PATCH 05/13] styling changes --- .../app/(home)/sections/Countdown/Countdown.module.scss | 8 +++++--- apps/site/src/app/(home)/sections/Countdown/Countdown.tsx | 8 ++------ .../src/app/(home)/sections/Countdown/CountdownClock.tsx | 7 ++++++- 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss b/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss index 83c07706..a47ad02e 100644 --- a/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss +++ b/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss @@ -1,3 +1,6 @@ +@use "bootstrap-utils" as bootstrap; +@use "zothacks-theme" as theme; + .paraboloid { position: relative; width: 100%; @@ -20,7 +23,6 @@ } .countdownMaterial { - // margin-top: 10%; position: absolute; top: 0px; left: 0px; @@ -89,8 +91,7 @@ } .outerCircle { - background-color: #ffffff; - // border-color: #1a1840; + background-color: theme.$white; border: 5px solid #1a1840; width: 50px; height: 50px; @@ -101,6 +102,7 @@ z-index: 1; bottom: 0; position: absolute; + bottom: -20px; } .innerCircle { diff --git a/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx index 5b253908..e1239b6a 100644 --- a/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx +++ b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx @@ -24,8 +24,8 @@ interface CountdownProps { } const Countdown: React.FC = ({ schedule }) => { - const hackStartTime = new Date(2024, 10, 1, 14, 0, 0); // TBD, zothacks start time - const hackEndTime = new Date(2024, 10, 2, 18, 0, 0); // TBD, zothacks end time + const hackStartTime = new Date("2024-11-02T10:00:00"); // TBD, zothacks start time + const hackEndTime = new Date("2024-11-02T10:00:00"); // TBD, zothacks end time const [curTime, setCurTime] = useState(new Date()); @@ -95,8 +95,6 @@ const Countdown: React.FC = ({ schedule }) => { ); } - console.log(percentageCrossed); - return (
bg_map @@ -123,7 +121,6 @@ const Countdown: React.FC = ({ schedule }) => {
@@ -150,7 +147,6 @@ const Countdown: React.FC = ({ schedule }) => {
diff --git a/apps/site/src/app/(home)/sections/Countdown/CountdownClock.tsx b/apps/site/src/app/(home)/sections/Countdown/CountdownClock.tsx index d1d606f1..6f09bd70 100644 --- a/apps/site/src/app/(home)/sections/Countdown/CountdownClock.tsx +++ b/apps/site/src/app/(home)/sections/Countdown/CountdownClock.tsx @@ -40,6 +40,7 @@ const CountdownClock: React.FC = ({ {Math.floor(remainingSeconds / (60 * 60 * 24)) .toString() + .padStart(2, "0") .split("") .map((el, i) => { return ( @@ -60,7 +61,11 @@ const CountdownClock: React.FC = ({ .toString() .split("") .map((el, i) => { - return {el}; + return ( + + {el} + + ); })} ) : ( From 663792d45eb3a0a5fe6d5693c86f98662e88389d Mon Sep 17 00:00:00 2001 From: Bl20052005 <88120481+Bl20052005@users.noreply.github.com> Date: Fri, 1 Nov 2024 19:32:45 -0700 Subject: [PATCH 06/13] classname + useEffect fix --- .../(home)/sections/Countdown/Countdown.module.scss | 4 ++-- .../src/app/(home)/sections/Countdown/Countdown.tsx | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss b/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss index a47ad02e..5dc7e0a4 100644 --- a/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss +++ b/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss @@ -13,7 +13,7 @@ position: relative; } -.descriptiveText { +.countdownText { top: 45px; left: 20px; position: absolute; @@ -112,7 +112,7 @@ border-radius: 50%; } -.descriptiveTextTop { +.countdownTextTop { position: absolute; top: -70px; width: 150px; diff --git a/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx index e1239b6a..3bfce4f9 100644 --- a/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx +++ b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx @@ -25,7 +25,7 @@ interface CountdownProps { const Countdown: React.FC = ({ schedule }) => { const hackStartTime = new Date("2024-11-02T10:00:00"); // TBD, zothacks start time - const hackEndTime = new Date("2024-11-02T10:00:00"); // TBD, zothacks end time + const hackEndTime = new Date("2024-11-02T22:00:00"); // TBD, zothacks end time const [curTime, setCurTime] = useState(new Date()); @@ -35,7 +35,7 @@ const Countdown: React.FC = ({ schedule }) => { }, 1000); return () => clearInterval(i); - }); + }, []); const ended = schedule.filter((el) => el.endTime > curTime); @@ -124,7 +124,7 @@ const Countdown: React.FC = ({ schedule }) => { left: "-20px", }} > -
+
{before.location && w <= 800 ? (

{before.location}

) : null} @@ -133,7 +133,7 @@ const Countdown: React.FC = ({ schedule }) => { ) : null}
-
+
{before.title}
{before.location && w > 800 ? (

{before.location}

@@ -150,7 +150,7 @@ const Countdown: React.FC = ({ schedule }) => { right: "-38px", }} > -
+
{after.location && w <= 800 ? (

{after.location}

) : null} @@ -159,7 +159,7 @@ const Countdown: React.FC = ({ schedule }) => { ) : null}
-
+
{after.title}
{after.location && w > 800 ?

{after.location}

: null} {after.startTime.getTime() && w > 800 ? ( From 962b5c3b5e9b2b7fb7077f56babd93e200e1ba1b Mon Sep 17 00:00:00 2001 From: Bl20052005 <88120481+Bl20052005@users.noreply.github.com> Date: Fri, 1 Nov 2024 19:36:39 -0700 Subject: [PATCH 07/13] styling width fix --- apps/site/src/app/(home)/sections/Countdown/Countdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx index 3bfce4f9..ab9e3d9f 100644 --- a/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx +++ b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx @@ -97,7 +97,7 @@ const Countdown: React.FC = ({ schedule }) => { return (
- bg_map + bg_map {w > 0 && (
{curTime >= hackStartTime ? ( From c83c5f4c2e4bc3b1c4726f5128dbddfbdc19e394 Mon Sep 17 00:00:00 2001 From: Bl20052005 <88120481+Bl20052005@users.noreply.github.com> Date: Fri, 1 Nov 2024 19:41:22 -0700 Subject: [PATCH 08/13] changed font style --- .../app/(home)/sections/Countdown/CountdownClock.module.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/site/src/app/(home)/sections/Countdown/CountdownClock.module.scss b/apps/site/src/app/(home)/sections/Countdown/CountdownClock.module.scss index a5a6aa24..ae02935a 100644 --- a/apps/site/src/app/(home)/sections/Countdown/CountdownClock.module.scss +++ b/apps/site/src/app/(home)/sections/Countdown/CountdownClock.module.scss @@ -65,7 +65,8 @@ &.caption { display: block; - @include bootstrap.font-size(1.5rem); + @include bootstrap.font-size(2.5rem); + font-weight: bold; } } } From c492ef0ca277272ad016c6aa4d9e2a95e2e4ed24 Mon Sep 17 00:00:00 2001 From: Bl20052005 <88120481+Bl20052005@users.noreply.github.com> Date: Fri, 1 Nov 2024 20:04:43 -0700 Subject: [PATCH 09/13] flat map --- apps/site/src/app/(home)/sections/Countdown/Scheduling.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/src/app/(home)/sections/Countdown/Scheduling.tsx b/apps/site/src/app/(home)/sections/Countdown/Scheduling.tsx index 1aff847a..532b4b8e 100644 --- a/apps/site/src/app/(home)/sections/Countdown/Scheduling.tsx +++ b/apps/site/src/app/(home)/sections/Countdown/Scheduling.tsx @@ -2,7 +2,7 @@ import Countdown from "./Countdown"; import { getSchedule } from "./getSchedule"; export default async function CountdownSchedule() { - const schedule = (await getSchedule())[0].map((el) => { + const schedule = (await getSchedule()).flat().map((el) => { return { title: el.title, startTime: el.startTime, From dd6a270a34bf17c0df28d8dd36ebc55e1f0ede9d Mon Sep 17 00:00:00 2001 From: Bl20052005 <88120481+Bl20052005@users.noreply.github.com> Date: Sat, 2 Nov 2024 09:13:45 -0700 Subject: [PATCH 10/13] timer fixes --- .../sections/Countdown/Countdown.module.scss | 6 +++++- .../(home)/sections/Countdown/Countdown.tsx | 21 ++++++++++++------- 2 files changed, 18 insertions(+), 9 deletions(-) diff --git a/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss b/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss index 5dc7e0a4..9f033ed6 100644 --- a/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss +++ b/apps/site/src/app/(home)/sections/Countdown/Countdown.module.scss @@ -114,8 +114,12 @@ .countdownTextTop { position: absolute; - top: -70px; + top: -170px; width: 150px; + height: 170px; + display: flex; + flex-direction: column; + justify-content: center; text-align: center; p { margin: 0; diff --git a/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx index ab9e3d9f..7c6205c8 100644 --- a/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx +++ b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx @@ -37,7 +37,9 @@ const Countdown: React.FC = ({ schedule }) => { return () => clearInterval(i); }, []); - const ended = schedule.filter((el) => el.endTime > curTime); + const ended = schedule.filter((el) => el.endTime >= curTime); + + console.log(ended); const before = ended.length > 0 @@ -61,8 +63,11 @@ const Countdown: React.FC = ({ schedule }) => { const percentageCrossed = before.endTime.getTime() > 0 - ? (before.endTime.getTime() - curTime.getTime()) / - (before.endTime.getTime() - before.startTime.getTime()) + ? curTime.getTime() < before.startTime.getTime() + ? 0 + : ((before.endTime.getTime() - curTime.getTime()) / + (before.endTime.getTime() - before.startTime.getTime())) * + 100 : 100; const [w, h] = useWindow(); @@ -110,7 +115,7 @@ const Countdown: React.FC = ({ schedule }) => { left: returnPosition(i)[0], bottom: returnPosition(i)[1], position: "absolute", - backgroundColor: `${i / totals.length > percentageCrossed ? "#DB9F42" : "#78cae3"}`, + backgroundColor: `${i / totals.length > percentageCrossed / 100 ? "#DB9F42" : "#78cae3"}`, width: "18px", height: "5px", borderRadius: "6px", @@ -129,7 +134,7 @@ const Countdown: React.FC = ({ schedule }) => {

{before.location}

) : null} {before.startTime.getTime() && w <= 800 ? ( -

{`${before.startTime.getHours() % 12}${before.startTime.getHours() == 11 ? " am" : ""}-${before.endTime.getHours() % 12} ${before.endTime.getHours() < 12 ? "am" : "pm"}`}

+

{`${before.startTime.getHours() % 12 == 0 ? 12 : before.startTime.getHours() % 12}${before.startTime.getHours() == 11 ? " am" : ""}-${before.endTime.getHours() % 12 == 0 ? 12 : before.endTime.getHours() % 12} ${before.endTime.getHours() < 12 ? "am" : "pm"}`}

) : null}
@@ -139,7 +144,7 @@ const Countdown: React.FC = ({ schedule }) => {

{before.location}

) : null} {before.startTime.getTime() && w > 800 ? ( -

{`${before.startTime.getHours() % 12}${before.startTime.getHours() == 11 ? " am" : ""}-${before.endTime.getHours() % 12} ${before.endTime.getHours() < 12 ? "am" : "pm"}`}

+

{`${before.startTime.getHours() % 12 == 0 ? 12 : before.startTime.getHours() % 12}${before.startTime.getHours() == 11 ? " am" : ""}-${before.endTime.getHours() % 12 == 0 ? 12 : before.endTime.getHours() % 12} ${before.endTime.getHours() < 12 ? "am" : "pm"}`}

) : null}
@@ -155,7 +160,7 @@ const Countdown: React.FC = ({ schedule }) => {

{after.location}

) : null} {after.startTime.getTime() && w <= 800 ? ( -

{`${after.startTime.getHours() % 12}${after.startTime.getHours() == 11 ? " am" : ""}-${after.endTime.getHours() % 12} ${after.endTime.getHours() < 12 ? "am" : "pm"}`}

+

{`${after.startTime.getHours() % 12 == 0 ? 12 : after.startTime.getHours() % 12}${after.startTime.getHours() == 11 ? " am" : ""}-${after.endTime.getHours() % 12 == 0 ? 12 : after.endTime.getHours() % 12} ${after.endTime.getHours() < 12 ? "am" : "pm"}`}

) : null}
@@ -163,7 +168,7 @@ const Countdown: React.FC = ({ schedule }) => {
{after.title}
{after.location && w > 800 ?

{after.location}

: null} {after.startTime.getTime() && w > 800 ? ( -

{`${after.startTime.getHours() % 12}${after.startTime.getHours() == 11 ? " am" : ""}-${after.endTime.getHours() % 12} ${after.endTime.getHours() < 12 ? "am" : "pm"}`}

+

{`${after.startTime.getHours() % 12 == 0 ? 12 : after.startTime.getHours() % 12}${after.startTime.getHours() == 11 ? " am" : ""}-${after.endTime.getHours() % 12 == 0 ? 12 : after.endTime.getHours() % 12} ${after.endTime.getHours() < 12 ? "am" : "pm"}`}

) : null}
From e263d591f1d86e5e0ac985ab4672da8b85bd6b5a Mon Sep 17 00:00:00 2001 From: Bl20052005 <88120481+Bl20052005@users.noreply.github.com> Date: Sat, 2 Nov 2024 09:15:42 -0700 Subject: [PATCH 11/13] remove logging, style changes --- apps/site/src/app/(home)/page.tsx | 2 +- apps/site/src/app/(home)/sections/Countdown/Countdown.tsx | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/apps/site/src/app/(home)/page.tsx b/apps/site/src/app/(home)/page.tsx index c63770f1..10c7cf66 100644 --- a/apps/site/src/app/(home)/page.tsx +++ b/apps/site/src/app/(home)/page.tsx @@ -14,7 +14,7 @@ const Home = () => {
- + diff --git a/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx index 7c6205c8..07d67487 100644 --- a/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx +++ b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx @@ -39,8 +39,6 @@ const Countdown: React.FC = ({ schedule }) => { const ended = schedule.filter((el) => el.endTime >= curTime); - console.log(ended); - const before = ended.length > 0 ? ended[0] From 34a6f08d6fd3ae9334db40b4f5ccd58021cf6762 Mon Sep 17 00:00:00 2001 From: Bl20052005 <88120481+Bl20052005@users.noreply.github.com> Date: Sat, 2 Nov 2024 10:53:14 -0700 Subject: [PATCH 12/13] formatting and style changes --- .../(home)/sections/Countdown/Countdown.tsx | 19 +++++++++--------- .../(home)/sections/Countdown/useWindow.tsx | 2 +- apps/site/src/assets/icons/boat.png | Bin 5956 -> 0 bytes apps/site/src/assets/icons/boat.svg | 15 ++++++++++++++ 4 files changed, 26 insertions(+), 10 deletions(-) delete mode 100644 apps/site/src/assets/icons/boat.png create mode 100644 apps/site/src/assets/icons/boat.svg diff --git a/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx index 07d67487..46575812 100644 --- a/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx +++ b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx @@ -1,14 +1,15 @@ "use client"; -import bg_map from "@/assets/images/maps/countdown.svg"; import Image from "next/image"; -import useWindow from "./useWindow"; +import { useEffect, useState } from "react"; -import styles from "./Countdown.module.scss"; +import useWindow from "./useWindow"; import CountdownClock from "./CountdownClock"; -import { useEffect, useState } from "react"; -import boat from "@/assets/icons/boat.png"; +import bg_map from "@/assets/images/maps/countdown.svg"; +import boat from "@/assets/icons/boat.svg"; + +import styles from "./Countdown.module.scss"; interface CountdownProps { schedule: { @@ -63,12 +64,12 @@ const Countdown: React.FC = ({ schedule }) => { before.endTime.getTime() > 0 ? curTime.getTime() < before.startTime.getTime() ? 0 - : ((before.endTime.getTime() - curTime.getTime()) / + : 100 - ((before.endTime.getTime() - curTime.getTime()) / (before.endTime.getTime() - before.startTime.getTime())) * 100 : 100; - const [w, h] = useWindow(); + const [w, ] = useWindow(); const totalLines = Math.floor(w / 66) > 7 ? Math.floor(w / 66) : 7; @@ -90,7 +91,7 @@ const Countdown: React.FC = ({ schedule }) => { if (curTime > hackEndTime) { return (
- bg_map + background map for countdown

Hacking has ended!

@@ -100,7 +101,7 @@ const Countdown: React.FC = ({ schedule }) => { return (
- bg_map + background map for countdown {w > 0 && (
{curTime >= hackStartTime ? ( diff --git a/apps/site/src/app/(home)/sections/Countdown/useWindow.tsx b/apps/site/src/app/(home)/sections/Countdown/useWindow.tsx index 8988f639..d67fa2d9 100644 --- a/apps/site/src/app/(home)/sections/Countdown/useWindow.tsx +++ b/apps/site/src/app/(home)/sections/Countdown/useWindow.tsx @@ -3,10 +3,10 @@ import { useEffect, useState } from "react"; export default function useWindow() { const [size, setSize] = useState([0, 0]); useEffect(() => { - setSize([window.innerWidth, window.innerHeight]); function setWindowSize() { setSize([window.innerWidth, window.innerHeight]); } + setWindowSize(); window.addEventListener("resize", setWindowSize); return () => window.removeEventListener("resize", setWindowSize); }, []); diff --git a/apps/site/src/assets/icons/boat.png b/apps/site/src/assets/icons/boat.png deleted file mode 100644 index 98ef637f479b2c044290bb2352fd8b16ba361c28..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5956 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 + + + + + + + + + + + + + + From cc371a992141d8098c7462e5c1928c66dbafba3f Mon Sep 17 00:00:00 2001 From: Bl20052005 <88120481+Bl20052005@users.noreply.github.com> Date: Sat, 2 Nov 2024 11:10:17 -0700 Subject: [PATCH 13/13] formatting fix --- apps/site/src/app/(home)/sections/Countdown/Countdown.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx index 46575812..45c25d82 100644 --- a/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx +++ b/apps/site/src/app/(home)/sections/Countdown/Countdown.tsx @@ -64,12 +64,13 @@ const Countdown: React.FC = ({ schedule }) => { before.endTime.getTime() > 0 ? curTime.getTime() < before.startTime.getTime() ? 0 - : 100 - ((before.endTime.getTime() - curTime.getTime()) / + : 100 - + ((before.endTime.getTime() - curTime.getTime()) / (before.endTime.getTime() - before.startTime.getTime())) * - 100 + 100 : 100; - const [w, ] = useWindow(); + const [w] = useWindow(); const totalLines = Math.floor(w / 66) > 7 ? Math.floor(w / 66) : 7;