-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
03ab8b7
commit f381d54
Showing
4 changed files
with
231 additions
and
76 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,155 @@ | ||
| "use client"; | ||
|
|
||
| import { useEffect, useState } from "react"; | ||
| import { motion, useAnimate } from "framer-motion"; | ||
| import Countdown from "@/components/Countdown"; | ||
| import LogoReveal from "@/components/LogoReveal"; | ||
| import Scoreboard from "@/components/Scoreboard"; | ||
|
|
||
| export default function ScoreboardPage() { | ||
| async function seqFromRight(scope: any, animate: any, delay: number = 0) { | ||
| await animate(scope.current, { | ||
| translateX: "2rem", | ||
| }, { | ||
| duration: 0.0 | ||
| }); | ||
| await new Promise(resolve => setTimeout(resolve, delay)); | ||
| await animate(scope.current, { | ||
| translateX: "0%", | ||
| }, { | ||
| duration: 0.2 | ||
| }); | ||
| } | ||
|
|
||
| async function seqFadeIn(scope: any, animate: any, delay: number = 0) { | ||
| await animate(scope.current, { | ||
| opacity: 0, | ||
| }, { | ||
| duration: 0.0 | ||
| }); | ||
| await new Promise(resolve => setTimeout(resolve, delay)); | ||
| await animate(scope.current, { | ||
| opacity: 1, | ||
| }, { | ||
| duration: 0.2 | ||
| }); | ||
| } | ||
|
|
||
| function ScoreboardPage() { | ||
| return ( | ||
| <div className="grid grid-cols-2 gap-2 p-2"> | ||
| <div className="flex flex-col"> | ||
| <span className="font-medium text-xl"> | ||
| Advanced Division | ||
| </span> | ||
| <Scoreboard | ||
| ctfd_url="http://signage-api.sigpwny.com/" | ||
| matched={true} | ||
| limit={5} | ||
| /> | ||
| <> | ||
| <Scoreboard ctfd_url="https://signage-api.sigpwny.com" limit={5} /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default function SignagePage() { | ||
| const time_start = "2023-09-23T12:00:00-05:00" | ||
| const time_close = "2023-09-23T18:00:00-05:00" | ||
| const [loaded, setLoaded] = useState(false); | ||
| const [scopeHeader, animateScopeHeader] = useAnimate(); | ||
| const [scopeTimer, animateScopeTimer] = useAnimate(); | ||
| const [scopeBody, animateScopeBody] = useAnimate(); | ||
| const [scopeDetails, animateScopeDetails] = useAnimate(); | ||
| useEffect(() => { | ||
| setTimeout(() => { | ||
| setLoaded(true); | ||
| seqFromRight(scopeHeader, animateScopeHeader, 300); | ||
| seqFadeIn(scopeHeader, animateScopeHeader, 300); | ||
| seqFadeIn(scopeBody, animateScopeBody, 500); | ||
| seqFadeIn(scopeTimer, animateScopeTimer, 1000); | ||
| seqFadeIn(scopeDetails, animateScopeDetails, 1000); | ||
| }, 4000); | ||
| // Automatically refresh the page | ||
| setTimeout(() => { | ||
| location.reload(); | ||
| }, 1000 * 120); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <motion.div | ||
| layout="position" | ||
| className="m-auto w-[92vw] h-[88vh] flex flex-col grow-1 shrink-0 relative" | ||
| > | ||
| <div className="flex flex-row justify-between"> | ||
| <div className="flex flex-col"> | ||
| <motion.div | ||
| layout="position" | ||
| className="opacity-0 h-fit w-fit" | ||
| ref={scopeHeader} | ||
| > | ||
| <p className="font-medium text-xl leading-none"> | ||
| SIGPwny Presents | ||
| </p> | ||
| </motion.div> | ||
| <motion.div | ||
| layout="position" | ||
| className={`flex h-fit ${loaded ? "" : "absolute inset-0 m-auto"}`} | ||
| variants={{ | ||
| initial: { | ||
| width: "60vw", | ||
| }, | ||
| animate: { | ||
| width: "50vw", | ||
| } | ||
| }} | ||
| initial="initial" | ||
| animate={(loaded ? "animate" : "initial")} | ||
| transition={{ | ||
| duration: 0.3, | ||
| ease: "easeInOut", | ||
| }} | ||
| > | ||
| <LogoReveal /> | ||
| </motion.div> | ||
| </div> | ||
| <motion.div | ||
| layout="position" | ||
| className="opacity-0 font-medium" | ||
| ref={scopeTimer} | ||
| > | ||
| <Countdown time_start={time_start} time_close={time_close} /> | ||
| </motion.div> | ||
| </div> | ||
| <div className="flex flex-col"> | ||
| <span className="font-medium text-xl"> | ||
| Beginner Division | ||
| <motion.div | ||
| layout="position" | ||
| className="opacity-0 flex flex-row flex-grow-1 flex-shrink-0 mt-8 grainger:mt-2 items-center" | ||
| ref={scopeBody} | ||
| > | ||
| <div className="flex flex-col"> | ||
| <p className="text-4xl grainger:text-3xl mb-4 leading-none font-medium"> | ||
| A beginner-friendly<br /> <span className="text-yellow-dark">hacking</span> competition. | ||
| </p> | ||
| <p className="text-xl leading-none"> | ||
| Register at <span className="text-yellow-dark font-medium">sigpwny.com/fallctf</span>. | ||
| </p> | ||
| </div> | ||
| <div className="flex flex-col ml-auto"> | ||
| <img | ||
| src="/assets/qr-fallctf.png" | ||
| className="pointer-events-none h-[400px] grainger:h-[350px] w-auto" | ||
| alt="https://sigpwny.com/fallctf" | ||
| /> | ||
| </div> | ||
| </motion.div> | ||
| <motion.div | ||
| layout="position" | ||
| className="opacity-0 mt-auto flex flex-col" | ||
| ref={scopeDetails} | ||
| > | ||
| <span className="grainger:hidden"> | ||
| <p className="text-xl font-medium"> | ||
| September 23rd, 12–6 PM | ||
| </p> | ||
| <p className="text-xl leading-none font-medium"> | ||
| CIF 3039 | ||
| </p> | ||
| </span> | ||
| <Scoreboard | ||
| ctfd_url="http://signage-api.sigpwny.com/" | ||
| matched={false} | ||
| limit={5} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <span className="hidden grainger:flex"> | ||
| <p className="text-xl leading-none font-medium"> | ||
| September 23rd, 12–6 PM @ CIF 3039 | ||
| </p> | ||
| </span> | ||
| </motion.div> | ||
| </motion.div> | ||
| ); | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters