Skip to content

Commit

Permalink
Merge pull request #138 from HackAtUCI/feature/confetti
Browse files Browse the repository at this point in the history 
feat: confetti and countdown issue
  • Loading branch information
@samderanova
samderanova authored Nov 5, 2023
2 parents 0bba8ee + c929522 commit 1e5c190
Show file tree
Hide file tree
Showing 4 changed files with 291 additions and 107 deletions.
2 changes: 2 additions & 0 deletions apps/site/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@
"next-sanity": "^5.5.4",
"react": "18.2.0",
"react-bootstrap": "^2.8.0",
"react-confetti": "^6.1.0",
"react-dom": "^18.2.0",
"react-use": "^17.4.0",
"sass": "^1.65.1",
"typescript": "5.1.6",
"zod": "^3.22.2"
Expand Down
166 changes: 87 additions & 79 deletions apps/site/src/app/schedule/ClipboardSchedule/ClipboardSchedule.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import { cubicBezier, motion, Variants } from "framer-motion";
import { utcToZonedTime } from "date-fns-tz";
import Confetti from "react-confetti";
import useWindowSize from "react-use/lib/useWindowSize";

import clip from "@/assets/images/clip.svg";

Expand Down Expand Up @@ -63,6 +65,7 @@ const hackingStarts = new Date(Date.UTC(2023, 10, 4, 17, 0, 0));
const hackingEnds = new Date(Date.UTC(2023, 10, 5, 5, 0, 0));

const ClipboardSchedule: React.FC<ClipboardScheduleProps> = ({ schedule }) => {
const { width, height } = useWindowSize();
const [currDate, setCurrDate] = useState(new Date());

useEffect(() => {
Expand All @@ -71,91 +74,96 @@ const ClipboardSchedule: React.FC<ClipboardScheduleProps> = ({ schedule }) => {
}, []);

return (
<Container as="section" className={" px-0 pt-0 position-relative"}>
<div className={styles.clip}>
<Image src={clip} alt="Clipboard clip" className={styles.clip} />
</div>
<div className={styles.clipboard}>
<motion.div
className={styles.clipboardPaper}
variants={variant}
initial="initial"
animate="animate"
>
{currDate.getTime() < hackingStarts.getTime() ? (
<Countdown countdownTo={hackingStarts} isHackingStarted={false} />
) : (
<Countdown countdownTo={hackingEnds} isHackingStarted={true} />
)}
<Accordion defaultActiveKey="0" className={styles.accordion}>
{schedule.map((day, i) => (
<div key={i}>
<h2 className="mt-5">
{weekdayFormat.format(
utcToZonedTime(day[0].startTime, "America/Los_Angeles"),
)}
</h2>
<p className="text-center mb-5 h3">
{monthDayFormat.format(
utcToZonedTime(day[0].startTime, "America/Los_Angeles"),
)}
</p>
{day.map(
({
title,
description,
location,
hosts,
startTime,
endTime,
}) => {
const startTimeZoned = utcToZonedTime(
<>
{currDate && currDate.getTime() >= hackingEnds.getTime() && (
<Confetti width={width} height={height} />
)}
<Container as="section" className={" px-0 pt-0 position-relative"}>
<div className={styles.clip}>
<Image src={clip} alt="Clipboard clip" className={styles.clip} />
</div>
<div className={styles.clipboard}>
<motion.div
className={styles.clipboardPaper}
variants={variant}
initial="initial"
animate="animate"
>
{currDate.getTime() < hackingStarts.getTime() ? (
<Countdown countdownTo={hackingStarts} isHackingStarted={false} />
) : (
<Countdown countdownTo={hackingEnds} isHackingStarted={true} />
)}
<Accordion defaultActiveKey="0" className={styles.accordion}>
{schedule.map((day, i) => (
<div key={i}>
<h2 className="mt-5">
{weekdayFormat.format(
utcToZonedTime(day[0].startTime, "America/Los_Angeles"),
)}
</h2>
<p className="text-center mb-5 h3">
{monthDayFormat.format(
utcToZonedTime(day[0].startTime, "America/Los_Angeles"),
)}
</p>
{day.map(
({
title,
description,
location,
hosts,
startTime,
"America/Los_Angeles",
),
endTimeZoned = utcToZonedTime(
endTime,
endTime,
}) => {
const startTimeZoned = utcToZonedTime(
startTime,
"America/Los_Angeles",
);
return (
<Accordion.Item
key={title}
eventKey={title}
className={styles.accordionItem}
>
<Accordion.Header as="h3">
<Row className="w-100 align-items-center">
<Col lg>
<span className={styles.eventTitle + " h3 mb-0"}>
{title}
</span>
</Col>
{/* <span>{hosts?.join()}</span> */}
),
endTimeZoned = utcToZonedTime(
endTime,
"America/Los_Angeles",
);
return (
<Accordion.Item
key={title}
eventKey={title}
className={styles.accordionItem}
>
<Accordion.Header as="h3">
<Row className="w-100 align-items-center">
<Col lg>
<span
className={styles.eventTitle + " h3 mb-0"}
>
{title}
</span>
</Col>
{/* <span>{hosts?.join()}</span> */}

<Col lg className={styles.mobileLocation}>
<span>
{location},{" "}
{startTimeZoned === endTimeZoned
? dateTimeFormat.format(startTimeZoned)
: dateTimeFormat.formatRange(
<Col lg className={styles.mobileLocation}>
<span>
{location},{" "}
{dateTimeFormat.formatRange(
startTimeZoned,
endTimeZoned,
)}
</span>
</Col>
</Row>
</Accordion.Header>
<Accordion.Body>{description}</Accordion.Body>
</Accordion.Item>
);
},
)}
</div>
))}
</Accordion>
</motion.div>
</div>
</Container>
</span>
</Col>
</Row>
</Accordion.Header>
<Accordion.Body>{description}</Accordion.Body>
</Accordion.Item>
);
},
)}
</div>
))}
</Accordion>
</motion.div>
</div>
</Container>
</>
);
};

Expand Down
6 changes: 4 additions & 2 deletions apps/site/src/app/schedule/ClipboardSchedule/Countdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,11 @@ const Countdown: React.FC<CountdownProps> = ({
const [remainingSeconds, setRemainingSeconds] = useState<number>(NaN);

useEffect(() => {
setRemainingSeconds((countdownTo.valueOf() - new Date().valueOf()) / 1000);
setRemainingSeconds(
Math.max(0, (countdownTo.valueOf() - new Date().valueOf()) / 1000),
);
const interval = setInterval(() => {
setRemainingSeconds((r) => (r > 0 && r < 1 ? r : r - 1));
setRemainingSeconds((r) => Math.max(0, r - 1));
}, 1000);

return () => clearInterval(interval);
Expand Down
Loading

0 comments on commit 1e5c190

Please sign in to comment.