Refactor and extract race clock component

benjaminma · Aug 29, 2021 · 24842ae · 24842ae
1 parent f8fe803
commit 24842ae
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 81 deletions.
diff --git a/components/RaceClock/RaceClock.module.css b/components/RaceClock/RaceClock.module.css
@@ -0,0 +1,40 @@
+.racetimer {
+  z-index: 1;
+  cursor: pointer;
+  align-self: flex-start;
+  background: var(--black10-color);
+  font-size: 7rem;
+  padding: 0.25em;
+  width: 100vw;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-start;
+  border-top: 2px solid black;
+}
+
+.racetimer_unlit {
+  color: var(--darkorange-color);
+  text-align: center;
+}
+
+.racetimer_unlit_sss {
+  font-size: 0.66em;
+  color: var(--darkorange-color);
+  text-align: center;
+}
+
+.racetimer_lit {
+  color: var(--neonorange-color);
+  text-shadow: 0 0 3px white, 0 0 12px var(--neonorange-color),
+    0 0 48px var(--neonorange-color);
+  text-align: center;
+}
+
+.racetimer_lit_sss {
+  font-size: 0.66em;
+  color: var(--neonorange-color);
+  text-shadow: 0 0 3px white, 0 0 12px var(--neonorange-color),
+    0 0 48px var(--neonorange-color);
+  text-align: center;
+}
diff --git a/components/RaceClock/RaceClock.tsx b/components/RaceClock/RaceClock.tsx
@@ -0,0 +1,64 @@
+import React from "react";
+import styles from "./RaceClock.module.css";
+
+interface ReactClockProps {
+  isRaceReady: boolean;
+  minutes: number;
+  seconds: number;
+  ms: number;
+  onClick: (event: any) => void;
+}
+
+const resetClockRaceOff = ["0:00", "", ".00", ""];
+const resetClockRaceOn = ["0:0", "0", "", ".00"];
+const getDisplayParts = (
+  isRaceReady: boolean,
+  minutes: number,
+  seconds: number,
+  ms: number
+) => {
+  if (minutes === 0 && seconds === 0 && ms === 0) {
+    return isRaceReady ? resetClockRaceOn : resetClockRaceOff;
+  }
+
+  let unlit = "";
+  let unlitMs = "";
+  let lit = "";
+  let litMs = "";
+  ms = Math.floor(ms / 10);
+
+  if (minutes === 0) {
+    if (seconds < 10) {
+      unlit = "0:0";
+      lit = seconds.toString();
+    } else {
+      unlit = "0:";
+      lit = seconds.toString();
+    }
+  } else {
+    lit = `${minutes}:${seconds.toString().padStart(2, "0")}`;
+  }
+  litMs = `.${ms.toString().padStart(2, "0")}`;
+
+  return [unlit, lit, unlitMs, litMs];
+};
+
+export const RaceClock: React.FC<ReactClockProps> = ({
+  isRaceReady,
+  minutes,
+  seconds,
+  ms,
+  onClick,
+}) => {
+  const [displayUnlit, displayLit, displayUnlitMs, displayLitMs] =
+    getDisplayParts(isRaceReady, minutes, seconds, ms);
+
+  return (
+    <div className={styles.racetimer} onClick={onClick}>
+      <span className={styles.racetimer_unlit}>{displayUnlit}</span>
+      <span className={styles.racetimer_lit}>{displayLit}</span>
+      <span className={styles.racetimer_unlit_sss}>{displayUnlitMs}</span>
+      <span className={styles.racetimer_lit_sss}>{displayLitMs}</span>
+    </div>
+  );
+};
diff --git a/components/index.tsx b/components/index.tsx
@@ -1,7 +1,8 @@
+import { RaceClock } from "./RaceClock/RaceClock";
 import { RaceTree } from "./RaceTree/RaceTree";
 import {
   RaceTreeLight,
   RaceTreeLightColor,
 } from "./RaceTreeLight/RaceTreeLight";
 
-export { RaceTree, RaceTreeLight, RaceTreeLightColor };
+export { RaceClock, RaceTree, RaceTreeLight, RaceTreeLightColor };
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -13,7 +13,7 @@ import {
   IRival,
 } from "../context/creaturesContext";
 import Package from "../package.json";
-import { RaceTree } from "../components";
+import { RaceClock, RaceTree } from "../components";
 
 const APP_TITLE = `creature-crono v${Package.version}`;
 const RACE_START_DELAY = 5000;
@@ -45,13 +45,13 @@ const Home: NextPage = () => {
 
   const [timerState, setTimerState] = React.useState(0);
   const [startTime, setStartTime] = React.useState(new Date().getTime());
+  const [raceReady, setRaceReady] = React.useState(false);
   const [raceTime, setRaceTime] = React.useState(new Date().getTime());
   const [raceLight, setRaceLight] = React.useState(0);
   const [raceMessage, setRaceMessage] = React.useState(RACE_MESSAGE_READY);
-  const [displayUnlit, setDisplayUnlit] = React.useState("0:00");
-  const [displayUnlitMs, setDisplayUnlitMs] = React.useState(".00");
-  const [displayLit, setDisplayLit] = React.useState("");
-  const [displayLitMs, setDisplayLitMs] = React.useState("");
+  const [raceClockMinutes, setRaceClockMinutes] = React.useState(0);
+  const [raceClockSeconds, setRaceClockSeconds] = React.useState(0);
+  const [raceClockMs, setRaceClockMs] = React.useState(0);
   const [showConfetti, setShowConfetti] = React.useState(false);
 
   const orientation = useOrientation();
@@ -63,6 +63,7 @@ const Home: NextPage = () => {
   const handleStart = React.useCallback(
     (event) => {
       if (timerState === 0) {
+        setRaceReady(true);
         setRivals([]);
         setTimerState(1);
         setStartTime(new Date().getTime());
@@ -84,6 +85,7 @@ const Home: NextPage = () => {
           setRaceMessage(getRaceMessage(mph, rivals));
           setShowConfetti(true);
         } else {
+          setRaceReady(false);
           setRaceMessage(RACE_MESSAGE_AGAIN);
         }
       }
@@ -113,10 +115,9 @@ const Home: NextPage = () => {
             setRaceMessage("Standby.");
           }
 
-          setDisplayUnlit("0:00");
-          setDisplayUnlitMs(".00");
-          setDisplayLit("");
-          setDisplayLitMs("");
+          setRaceClockMinutes(0);
+          setRaceClockSeconds(0);
+          setRaceClockMs(0);
           return;
         }
 
@@ -128,29 +129,9 @@ const Home: NextPage = () => {
 
         diffTime = currTime - raceTime;
         const diffDate = new Date(diffTime);
-        const m = diffDate.getMinutes().valueOf();
-        const ss = diffDate.getSeconds().valueOf();
-        const sss = diffDate
-          .getMilliseconds()
-          .toString()
-          .padStart(3, "0")
-          .substr(0, 2);
-        let unlit = "";
-        if (m === 0 && ss < 10) {
-          unlit = "0:0";
-        } else if (m === 0) {
-          unlit = "0:";
-        }
-        setDisplayUnlit(unlit);
-        setDisplayUnlitMs("");
-        let lit;
-        if (m > 0) {
-          lit = `${m}:${ss.toString().padStart(2, "0")}`;
-        } else {
-          lit = `${ss}`;
-        }
-        setDisplayLit(lit);
-        setDisplayLitMs(`.${sss}`);
+        setRaceClockMinutes(diffDate.getMinutes());
+        setRaceClockSeconds(diffDate.getSeconds());
+        setRaceClockMs(diffDate.getMilliseconds());
       }, 33);
     }
 
@@ -191,12 +172,13 @@ const Home: NextPage = () => {
             colors={["cyan", "magenta", "yellow"]}
           />
         )}
-        <div className={styles.racetimer} onClick={handleStart}>
-          <span className={styles.racetimer_unlit}>{displayUnlit}</span>
-          <span className={styles.racetimer_lit}>{displayLit}</span>
-          <span className={styles.racetimer_unlit_sss}>{displayUnlitMs}</span>
-          <span className={styles.racetimer_lit_sss}>{displayLitMs}</span>
-        </div>
+        <RaceClock
+          isRaceReady={raceReady}
+          minutes={raceClockMinutes}
+          seconds={raceClockSeconds}
+          ms={raceClockMs}
+          onClick={handleStart}
+        />
 
         <div className={styles.raceScreen}>
           <div className={styles.raceBanner} onClick={handleStart}>
@@ -211,7 +193,7 @@ const Home: NextPage = () => {
             )}
           </div>
 
-          <RaceTree raceLight={raceLight}></RaceTree>
+          <RaceTree raceLight={raceLight} />
         </div>
       </main>
 

diff --git a/styles/Home.module.css b/styles/Home.module.css
@@ -56,47 +56,6 @@
   align-items: center;
 }
 
-.racetimer {
-  z-index: 1;
-  cursor: pointer;
-  align-self: flex-start;
-  background: var(--black10-color);
-  font-size: 7rem;
-  padding: 0.25em;
-  width: 100vw;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: flex-start;
-  border-top: 2px solid black;
-}
-
-.racetimer_unlit {
-  color: var(--darkorange-color);
-  text-align: center;
-}
-
-.racetimer_unlit_sss {
-  font-size: 0.66em;
-  color: var(--darkorange-color);
-  text-align: center;
-}
-
-.racetimer_lit {
-  color: var(--neonorange-color);
-  text-shadow: 0 0 3px white, 0 0 12px var(--neonorange-color),
-    0 0 48px var(--neonorange-color);
-  text-align: center;
-}
-
-.racetimer_lit_sss {
-  font-size: 0.66em;
-  color: var(--neonorange-color);
-  text-shadow: 0 0 3px white, 0 0 12px var(--neonorange-color),
-    0 0 48px var(--neonorange-color);
-  text-align: center;
-}
-
 .footer {
   width: 100vw;
   height: 15vh;