Finish signage, revert previous signage components

sigpwny · Sep 21, 2023 · a0e4a17 · a0e4a17
1 parent f381d54
commit a0e4a17
Show file tree

Hide file tree

Showing 8 changed files with 471 additions and 220 deletions.
diff --git a/src/app/(new-signage)/scoreboard/page.tsx → src/app/(new-signage)/cif/page.tsx b/src/app/(new-signage)/scoreboard/page.tsx → src/app/(new-signage)/cif/page.tsx
@@ -2,8 +2,8 @@
 
 import { useEffect, useState } from "react";
 import { motion, useAnimate } from "framer-motion";
-import Countdown from "@/components/Countdown";
-import LogoReveal from "@/components/LogoReveal";
+import Countdown, { TimedComponent } from "@/components/NewCountdown";
+import LogoReveal from "@/components/NewLogoReveal";
 import Scoreboard from "@/components/Scoreboard";
 
 async function seqFromRight(scope: any, animate: any, delay: number = 0) {
@@ -34,16 +34,8 @@ async function seqFadeIn(scope: any, animate: any, delay: number = 0) {
   });
 }
 
-function ScoreboardPage() {
-  return (
-    <>
-      <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_start = "2023-09-21T12:00:00-05:00"
   const time_close = "2023-09-23T18:00:00-05:00"
   const [loaded, setLoaded] = useState(false);
   const [scopeHeader, animateScopeHeader] = useAnimate();
@@ -64,7 +56,41 @@ export default function SignagePage() {
       location.reload();
     }, 1000 * 120);
   }, []);
-
+  const before_body = (
+    <div className="flex flex-row w-full mt-7 grainger:mt-1">
+      <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>
+    </div>
+  );
+  const during_body = (
+    <span className="animate-translate-right w-full">
+      {/* <Scoreboard ctfd_url="https://fallctf.sigpwny.com" limit={5} /> */}
+      <Scoreboard ctfd_url="http://signage-api.sigpwny.com" limit={5} />
+    </span>
+  );
+  const during_details_solve = (
+    <span className="animate-translate-right">
+      <p className="text-xl font-medium">
+        Solve the Challenges!
+      </p>
+      <p className="text-xl text-yellow-dark leading-none font-medium">
+        sigpwny.com/fallctf
+      </p>
+    </span>
+  );
   return (
     <motion.div
       layout="position"
@@ -112,10 +138,10 @@ export default function SignagePage() {
       </div>
       <motion.div
         layout="position"
-        className="opacity-0 flex flex-row flex-grow-1 flex-shrink-0 mt-8 grainger:mt-2 items-center"
+        className="opacity-0 flex flex-row grow-1 flex-shrink-0 mt-1 items-center"
         ref={scopeBody}
       >
-        <div className="flex flex-col">
+        {/* <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>
@@ -129,20 +155,25 @@ export default function SignagePage() {
             className="pointer-events-none h-[400px] grainger:h-[350px] w-auto"
             alt="https://sigpwny.com/fallctf"
           />
-        </div>
+        </div> */}
+        {/* <Scoreboard ctfd_url="https://signage-api.sigpwny.com" limit={5} /> */}
+        <TimedComponent time_start={time_start} time_close={time_close} before={before_body} during={during_body} after={during_body} />
       </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 className="grainger:hidden grid grid-cols-2 gap-2">
+          <motion.span layout="position">
+            <p className="text-xl font-medium">
+              September 23rd, 12–6 PM
+            </p>
+            <p className="text-xl leading-none font-medium">
+              CIF 3039
+            </p>
+          </motion.span>
+          <TimedComponent time_start={time_start} time_close={time_close} before={null} during={during_details_solve} after={during_details_solve} />
         </span>
         <span className="hidden grainger:flex">
           <p className="text-xl leading-none font-medium">

diff --git a/src/app/(new-signage)/new-signage.css b/src/app/(new-signage)/new-signage.css
@@ -1,3 +1,18 @@
 html {
   font-size: 48px;
+}
+
+.animate-translate-right {
+  animation: translate-right 0.2s ease-in;
+}
+
+@keyframes translate-right {
+  0% {
+    transform: translateX(2rem);
+    opacity: 0;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
 }
diff --git a/src/app/(signage)/cif/page.tsx b/src/app/(signage)/cif/page.tsx
diff --git a/src/components/Countdown/index.tsx b/src/components/Countdown/index.tsx
@@ -70,63 +70,63 @@ export default function Countdown({ time_start, time_close }: Props) {
   return (
     <>
       {timer.status !== TimerStatus.UNINITIALIZED && timer.status !== TimerStatus.AFTER_CLOSE ? (
-        <div className="flex flex-col leading-none">
-          <motion.span layout="position" className="leading-none">
+        <div className="flex flex-col">
+          <motion.p layout="position" className="text-[3rem] leading-none">
             {timer.status === TimerStatus.BEFORE_START ?
               "Starting in" : timer.status === TimerStatus.DURING ?
               "Ending in" :
               "Ended"
             }
-          </motion.span>
+          </motion.p>
           <div className="flex flex-row">
             {timer.days > 0 ? (
               <>
                 <div className="flex flex-col">
-                  <div className="text-4xl font-bold">
+                  <div className="text-[7rem] font-bold">
                     {formatNumber(timer.days)}
                   </div>
-                  <span>
+                  <p>
                     {timer.days === 1 ? "Day" : "Days"}
-                  </span>
+                  </p>
                 </div>
-                <span className="text-4xl font-bold">
+                <span className="text-[7rem] font-bold">
                   :
                 </span>
               </>
             ) : null}
             {timer.days > 0 || timer.hours > 0 ? (
               <>
                 <div className="flex flex-col">
-                  <div className="text-4xl font-bold">
+                  <div className="text-[7rem] font-bold">
                     {formatNumber(timer.hours)}
                   </div>
-                  <span>
+                  <p>
                     {timer.hours === 1 ? "Hour" : "Hours"}
-                  </span>
+                  </p>
                 </div>
-                <span className="text-4xl font-bold">
+                <span className="text-[7rem] font-bold">
                   :
                 </span>
               </>
             ) : null}
             <div className="flex flex-col">
-              <div className="text-4xl font-bold">
+              <div className="text-[7rem] font-bold">
                 {formatNumber(timer.minutes)}
               </div>
-              <span>
+              <p>
                 {timer.minutes === 1 ? "Min" : "Mins"}
-              </span>
+              </p>
             </div>
-            <span className="text-4xl font-bold">
+            <span className="text-[7rem] font-bold">
               :
             </span>
             <div className="flex flex-col">
-              <div className="text-4xl font-bold">
+              <div className="text-[7rem] font-bold">
                 {formatNumber(timer.seconds)}
               </div>
-              <span>
+              <p>
                 {timer.seconds === 1 ? "Sec" : "Secs"}
-              </span>
+              </p>
             </div>
           </div>
         </div>
@@ -135,4 +135,4 @@ export default function Countdown({ time_start, time_close }: Props) {
       )}
     </>
   )
-}
+}
diff --git a/src/components/LogoReveal/index.tsx b/src/components/LogoReveal/index.tsx
@@ -34,7 +34,7 @@ export default function LogoReveal() {
     <motion.svg
       viewBox="0 0 1024 150"
       display="block"
-      fontSize="3.3rem"
+      fontSize="10rem"
       fontWeight="bold"
     >
       <linearGradient