Add hacky race countdown

benjaminma · Aug 25, 2021 · f64b74a · f64b74a
1 parent 350bd08
commit f64b74a
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 24 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -4,22 +4,39 @@ import React from "react";
 // import Image from "next/image";
 import styles from "../styles/Home.module.css";
 
-const pad = (n: string, d: number) => {
-  return n.padStart(d, "0");
-};
+function getRaceMessage(timerState: number, raceTime: number): string {
+  if (timerState === 0) {
+    return "Ready to race?";
+  }
+
+  const currTime = new Date().getTime();
+  if (currTime > raceTime) {
+    return "GO!!!";
+  }
+  const diffTime = currTime - raceTime;
+  if (diffTime <= 1000) return "3";
+  else if (diffTime <= 2000) {
+    return "2";
+  }
+  return "1";
+}
 
 const Home: NextPage = () => {
   const [timerState, setTimerState] = React.useState(0);
   const [startTime, setStartTime] = React.useState(new Date().getTime());
+  const [raceTime, setRaceTime] = React.useState(new Date().getTime());
+  const [raceMessage, setRaceMessage] = React.useState("Ready to race?");
   const [displayUnlit, setDisplayUnlit] = React.useState("0:00.000");
   const [displayLit, setDisplayLit] = React.useState("");
   const handleStart = React.useCallback(
     (event) => {
       if (timerState === 0) {
         setTimerState(1);
         setStartTime(new Date().getTime());
+        setRaceTime(new Date().getTime() + 3000);
       } else {
         setTimerState(0);
+        setRaceMessage("Race again?");
       }
     },
     [timerState]
@@ -29,11 +46,28 @@ const Home: NextPage = () => {
 
     if (timerState === 1) {
       intervalId = setInterval(() => {
-        const currTime = new Date();
-        const diffTime = currTime.getTime() - startTime;
+        const currTime = new Date().getTime();
+        let diffTime = raceTime - currTime;
+
+        if (raceTime > currTime) {
+          if (diffTime <= 1000) {
+            setRaceMessage("3... 2... 1...");
+          } else if (diffTime <= 2000) {
+            setRaceMessage("3... 2...");
+          } else if (diffTime <= 3000) {
+            setRaceMessage("3...");
+          }
+          setDisplayUnlit("0:00.000");
+          setDisplayLit("");
+          return;
+        }
+
+        setRaceMessage("GO!!!");
+
+        diffTime = currTime - raceTime;
         const diffDate = new Date(diffTime);
         const m = diffDate.getMinutes().valueOf();
-        const ss = diffDate.getSeconds().valueOf(); // toString().padStart(2, "0");
+        const ss = diffDate.getSeconds().valueOf();
         const sss = diffDate.getMilliseconds().toString().padStart(3, "0");
         let unlit = "";
         if (m === 0 && ss < 10) {
@@ -44,16 +78,18 @@ const Home: NextPage = () => {
         setDisplayUnlit(unlit);
         let lit;
         if (m > 0) {
-          lit = `${m}:${ss}.${sss}`;
+          lit = `${m}:${ss.toString().padStart(2, "0")}.${sss}`;
         } else {
           lit = `${ss}.${sss}`;
         }
         setDisplayLit(lit);
       }, 16);
     }
 
-    return () => clearInterval(intervalId);
-  }, [timerState, startTime]);
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [timerState, startTime, raceTime]);
 
   return (
     <div className={styles.container}>
@@ -70,6 +106,7 @@ const Home: NextPage = () => {
           <a href="#" className={styles.navlogo}>
             creature-chrono
           </a>
+          <span></span>
           <a href="#">Race</a>
           {/* <a href="#">Hi-Score</a> */}
           <a href="#">Settings</a>
@@ -82,9 +119,7 @@ const Home: NextPage = () => {
           <span className={styles.racetimer_lit}>{displayLit}</span>
         </div>
 
-        <h1 className={styles.title}>
-          {timerState === 0 ? "Ready to race?" : "GO!!!"}
-        </h1>
+        <h1 className={styles.title}>{raceMessage}</h1>
       </main>
 
       <footer className={styles.footer}>

diff --git a/styles/Home.module.css b/styles/Home.module.css
@@ -10,7 +10,7 @@
 }
 
 .nav {
-  color: var(--pokeyellow-color);
+  color: magenta;
   background: var(--pokeblue-color);
   display: block;
   width: 100vw;
@@ -30,20 +30,23 @@
 
 .navlogo {
   font-size: 1.25rem;
+}
+
+.navbar span {
   flex: 1;
 }
 
 .navbar a {
   padding: 0.5rem 0.75rem;
-  border: 2px solid transparent;
+  border: 0.25rem solid transparent;
 }
 
 .navbar a:hover {
-  border: 2px dashed yellow;
+  border: 0.25rem dashed yellow;
 }
 
 .navbar a:focus {
-  border: 2px dashed yellow;
+  border: 0.25rem dashed yellow;
 }
 
 .main {
@@ -57,7 +60,7 @@
 .racetimer {
   background: var(--racetimer-color);
   font-size: 6rem;
-  padding: 2rem;
+  padding: 3rem;
   width: 100vw;
   display: flex;
   flex-direction: row;
@@ -80,30 +83,33 @@
 
 .footer {
   width: 100vw;
-  height: 8rem;
+  height: 10rem;
   display: flex;
   justify-content: center;
   align-items: stretch;
-  padding: 1rem;
+  padding: .5rem;
 }
 
 .btnstart {
+  cursor: pointer;
   font-size: 3rem;
   flex: 1;
-  text-shadow: 0.25rem 0.25rem yellow;
+  text-shadow: 0.25rem 0.25rem white;
   font-family: var(--game-font);
-  background: lime;
+  background: cyan;
   transform: translateX(-0.25rem) translateY(-0.25rem);
+	max-width: 800px;
 }
 
 .btnstart:active {
   transform: none;
-	background: limegreen;
-  border: 0.5rem dashed yellow;
+  background: rgb(13, 149, 173);
+  text-shadow: 0.25rem 0.25rem grey;
+  border: 0.5rem dashed black;
 }
 
 .btnstart:focus,.btnstart:hover {
-  border: 0.5rem dashed yellow;
+  border: 0.5rem dashed black;
 }
 
 .btnshadow {
@@ -112,6 +118,7 @@
   justify-content: center;
   align-items: stretch;
   background: var(--black10-color);
+	max-width: 800px;
 }
 
 .footer a {