feat : launch anim

aswanthabam · Dec 9, 2023 · eaf5ab5 · eaf5ab5
1 parent d7aebf0
commit eaf5ab5
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 32 deletions.
diff --git a/public/audio/launch.mp3 b/public/audio/launch.mp3
diff --git a/src/App.tsx b/src/App.tsx
@@ -171,14 +171,14 @@ function App() {
         <Route
           path="/home"
           element={
-            <TopBarLayer
-              sidebarState={sidebarState}
-              setSidebarState={setSidebarState}
-              setTheme={setTheme}
-              theme={theme}
-            >
-              <LaunchHome />
-            </TopBarLayer>
+            // <TopBarLayer
+            //   sidebarState={sidebarState}
+            //   setSidebarState={setSidebarState}
+            //   setTheme={setTheme}
+            //   theme={theme}
+            // >
+            <LaunchHome />
+            // </TopBarLayer>
           }
         ></Route>
         <Route path="*" element={<Error404 />}></Route>

diff --git a/src/components/counter/Counter.tsx b/src/components/counter/Counter.tsx
@@ -3,6 +3,7 @@ import style from "./Counter.module.css";
 
 interface CounterProps {
   date: Date;
+  className?: string;
 }
 function calculateTimeDifference(
   date1: Date,
@@ -23,7 +24,7 @@ function calculateTimeDifference(
 function addLeadingZero(number: number): string {
   return number < 10 ? `0${number}` : `${number}`;
 }
-const Counter: React.FC<CounterProps> = ({ date }) => {
+const Counter: React.FC<CounterProps> = ({ date, className }) => {
   // console.log(date);
   const [diff, setDiff] = useState({
     d: 0,
@@ -55,7 +56,7 @@ const Counter: React.FC<CounterProps> = ({ date }) => {
     // console.log(diff);
   }, 1000);
   return (
-    <div className={style.counter}>
+    <div className={style.counter + " " + className}>
       {addLeadingZero(diff.d)} : {addLeadingZero(diff.h)} :{" "}
       {addLeadingZero(diff.m)} : {addLeadingZero(diff.s)}
     </div>

diff --git a/src/components/topbar/topbar.tsx b/src/components/topbar/topbar.tsx
@@ -8,13 +8,15 @@ interface TopBarProps {
   setTheme: (theme: string) => void;
   setSidebarState: (state: boolean) => void;
   sidebarState: boolean;
+  className?: string;
 }
 
 const TopBar: React.FC<TopBarProps> = ({
   setTheme,
   theme,
   setSidebarState,
   sidebarState,
+  className,
 }) => {
   const [text, setText] = React.useState<string>("Register");
   const [link, setLink] = React.useState<string>("");
@@ -44,7 +46,7 @@ const TopBar: React.FC<TopBarProps> = ({
   });
   return (
     <>
-      <div className={style.topbar + " " + style.mobile}>
+      <div className={style.topbar + " " + style.mobile + " " + className}>
         <div
           onClick={() => {
             setSidebarState(!sidebarState);
@@ -75,7 +77,7 @@ const TopBar: React.FC<TopBarProps> = ({
         </div>
       </div>
 
-      <div className={style.topbar + " " + style.desktop}>
+      <div className={style.topbar + " " + style.desktop + " " + className}>
         <div className={style.menuItems}>
           <div className={style.menuButton}>
             <img className={style.logo} src={logo} />

diff --git a/src/pages/launch/Home.tsx b/src/pages/launch/Home.tsx
@@ -4,12 +4,20 @@ import alien from "../../assets/dehill-spacelove-1-dribble.gif";
 import Counter from "../../components/counter/Counter";
 import EventList from "../../components/eventlist/EventList";
 import Footer from "../../components/footer/Footer";
+import TopBar from "../../components/topbar/topbar";
 // for build commit
 interface LaunchHomeProps {}
 
 const LaunchHome: React.FC<LaunchHomeProps> = ({}) => {
   return (
     <div className={style.home}>
+      <TopBar
+        theme="dark"
+        setSidebarState={() => {}}
+        setTheme={() => {}}
+        sidebarState={false}
+        className={style.topbar}
+      />
       <div className={style.background}>
         <div className={style.topGradient}></div>
         <svg
@@ -58,7 +66,10 @@ const LaunchHome: React.FC<LaunchHomeProps> = ({}) => {
           <span className={style.daysLeft}>
             The countdown to awesomeness begins...
           </span>
-          <Counter date={new Date("2023-12-15 00:00:00")} />
+          <Counter
+            className={style.counter}
+            date={new Date("2023-12-15 00:00:00")}
+          />
         </div>
       </div>
       <div className={style.page2}>

diff --git a/src/pages/launch/LaunchHome.module.css b/src/pages/launch/LaunchHome.module.css
@@ -14,18 +14,32 @@
     /* background: green; */
   }
 }
+
 @keyframes show {
   0% {
     opacity: 0;
   }
-  50% {
-    opacity: 0;
-  }
   100% {
     opacity: 1;
   }
 }
+
+@keyframes alien-anim {
+  from {
+    transform: translateX(-5%);
+    width: 41vw;
+  }
+  to {
+    transform: translateX(5%);
+    width: 42vw;
+  }
+}
 .home {
+  .topbar {
+    animation: show 2s ease-in-out forwards;
+    animation-delay: 3s;
+    opacity: 0;
+  }
   .background {
     position: absolute;
     width: 100vw;
@@ -37,9 +51,10 @@
       rgba(47, 104, 56, 0) 23.61%,
       rgba(37, 105, 48, 0.46) 83.24%
     );
+    animation: sparkblink 0.5s ease 5 alternate;
+    animation-delay: 1s;
 
     .topGradient {
-      animation: sparkblink 0.5s ease 8 alternate;
       background: radial-gradient(
         50% 50% at 50% 50%,
         var(--color-dark-green) 0%,
@@ -62,25 +77,30 @@
       width: 90%;
       height: auto;
       z-index: 0;
-      animation: show 4s ease-in-out;
+      /* animation: show 4s ease-in-out; */
+      /* opacity: 0; */
     }
 
     .alien {
       position: absolute;
       bottom: 8%;
       left: -5%;
       width: 100vw;
-      animation: show 4s ease-in-out;
+      animation: alien-anim 2s ease-in-out infinite alternate;
+      /* opacity: 0; */
     }
   }
 
   .header {
-    animation: show 4s ease-in-out;
+    animation: show 2s ease-in-out;
     position: relative;
     width: 100vw;
     height: calc(100vh - var(--topbar-total-height) - var(--bottom-spacing));
 
     .content {
+      animation: show 2s ease-in-out forwards;
+      animation-delay: 2s;
+      opacity: 0;
       position: absolute;
       width: 100vw;
       display: flex;
@@ -90,6 +110,7 @@
       right: 0%;
       top: -5%;
       transform: translate(0%, -0%);
+
       & h1 {
         color: var(--color-black);
         font-family: Wallpoet;
@@ -98,18 +119,21 @@
         font-weight: 400;
         line-height: normal;
         margin-top: 80px;
-
+        /* animation: show 2s ease-in-out; */
+        /* opacity: 0; */
         & span {
           display: inline-block;
           font-family: Wallpoet;
           color: var(--color-green);
-          animation: sparkblink 0.5s ease infinite alternate;
+          /* animation: sparkblink 0.5s ease infinite alternate; */
+          /* opacity: 0; */
         }
         .topLineA {
+          /* opacity: 0; */
           position: relative;
           font-family: Wallpoet;
           display: inline-block;
-
+          /* animation: show 2s ease-in-out; */
           &::after {
             content: "";
             position: absolute;
@@ -126,6 +150,7 @@
       }
 
       .mottoText {
+        /* opacity: 0; */
         color: var(--color-text-secondary);
         font-family: Wallpoet;
         font-size: 20px;
@@ -135,13 +160,16 @@
         margin-top: 20px;
       }
       .daysLeft {
+        /* opacity: 0; */
         color: var(--color-orange);
         font-size: 15px;
         margin-top: 50px;
         text-align: center;
+        font-family: Silkscreen;
       }
     }
     .headerButtons {
+      /* opacity: 0; */
       position: absolute;
       display: flex;
       align-items: end;
@@ -209,7 +237,6 @@
 
         .daysLeft {
           font-size: 20px;
-          font-family: Silkscreen;
         }
       }
     }

diff --git a/src/pages/launch/launch.module.css b/src/pages/launch/launch.module.css
@@ -6,7 +6,14 @@
     opacity: 1;
   }
 }
-
+@keyframes rotate-anim {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 .launch {
   width: 100vw;
   height: 100vh;
@@ -18,6 +25,46 @@
   .countDown {
     font-size: 80px;
     font-family: "Black Ops One", sans-serif;
-    animation: anim 1s linear infinite;
+    animation: anim 1.1s linear infinite;
+  }
+
+  .button {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 26px;
+    z-index: 1;
+    &::before {
+      content: "Launch";
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background: rebeccapurple;
+      z-index: 0;
+    }
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      padding: 3px;
+      background: linear-gradient(230deg, red, green, blue);
+      z-index: -1;
+      animation: rotate-anim 2s linear infinite;
+      filter: blur(10px);
+    }
   }
 }
diff --git a/src/pages/launch/launch.tsx b/src/pages/launch/launch.tsx
@@ -5,18 +5,36 @@ import { useState } from "react";
 interface EventsProps {}
 
 const Launch: React.FC<EventsProps> = ({}) => {
-  const [count, setCount] = useState(3);
+  var [count, setCount] = useState(4);
   const redirect = useNavigate();
 
-  setInterval(async () => {
-    if (count >= 1) await setCount(count - 1);
-    else redirect("/home");
-  }, 1000);
+  const onPress = () => {
+    count--;
+    setCount(count);
+    setInterval(async () => {
+      count--;
+      if (count == 1) {
+        if (!(window as any).audio) {
+          (window as any).audio = new Audio("/audio/launch.mp3");
+          (window as any).audio.play();
+        }
+      }
+      if (count >= 0) await setCount(count);
+      else {
+        redirect("/home");
+      }
+    }, 1000);
+  };
   return (
     <div className={style.launch}>
       <div id="countDown" className={style.countDown}>
-        {count}
+        {count != 4 && count}
       </div>
+      {count == 4 && (
+        <div onClick={onPress} className={style.button}>
+          Launch
+        </div>
+      )}
     </div>
   );
 };