feat: add stopwatch mode

Author: kungfux

README.md

@@ -8,7 +8,8 @@ Available online at [https://kungfux.github.io/binarytimer/](https://kungfux.git
 
 ## Features
 
-- 12-bit binary countdown timer
+- 12-bit binary timer
+- 2 modes: countdown and stopwatch
 - Maximum time is 4095 seconds (68 minutes 15 seconds)
 - Presets for 1, 2, 3, 5, 10, 15, 30, 60 minutes
 - Controls to prolong countdown time

src/App.tsx

@@ -4,34 +4,33 @@ import routes from "./routes";
 import TimerSetup from "./pages/TimerSetup.page";
 import TimerCountdown from "./pages/TimerCountdown.page";
 import Footer from "./components/Footer.component";
+import { OptionsProvider } from "./contexts/Options.context";
 import { MuteButton } from "./components/MuteButton.component";
-import { MuteProvider } from "./contexts/Mute.context";
-import { HideProvider } from "./contexts/Hide.context";
 import { HideButton } from "./components/HideButton.component";
+import { ModeButton } from "./components/ModeButton.component";
 
 function App() {
   const location = useLocation();
   const queryParams = new URLSearchParams(location.search);
   const timeParam = queryParams.get("time");
 
   return (
-    <HideProvider>
-      <MuteProvider>
-        <div className="flex flex-col items-center justify-between min-h-screen h-screen min-w-96">
-          <div className="flex justify-end w-full p-4">
-            <HideButton />
-            <MuteButton />
-          </div>
-          <Routes>
-            <Route
-              path={routes.root.path}
-              element={timeParam ? <TimerCountdown /> : <TimerSetup />}
-            />
-          </Routes>
-          <Footer />
+    <OptionsProvider>
+      <div className="flex flex-col items-center justify-between min-h-screen h-screen min-w-96">
+        <div className="flex justify-end w-full p-4">
+          <ModeButton />
+          <HideButton />
+          <MuteButton />
         </div>
-      </MuteProvider>
-    </HideProvider>
+        <Routes>
+          <Route
+            path={routes.root.path}
+            element={timeParam ? <TimerCountdown /> : <TimerSetup />}
+          />
+        </Routes>
+        <Footer />
+      </div>
+    </OptionsProvider>
   );
 }
 

src/BitCounter.ts

@@ -44,11 +44,11 @@ class BitCounter {
     return this.getBits();
   }
 
-  public toString(): string {
+  public toString(isStopwatchMode: boolean): string {
     const time = this.getTime();
 
     if (time === 0) {
-      return "Time's up!";
+      return isStopwatchMode ? "0 seconds" : "Time's up!";
     }
 
     const hours = Math.floor(time / 3600);

src/components/HideButton.component.tsx

@@ -1,11 +1,11 @@
 import { useEffect } from "react";
 import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
-import { useHideContext } from "../hooks/useHideContext.hook";
+import { useOptionsContext } from "../hooks/useOptionsContext.hook";
 import { IconButton } from "./IconButton.component";
 
 const HideButton = () => {
   const IsHiddenSettingKey = "hide";
-  const { isHidden, toggleHide } = useHideContext();
+  const { isHidden, toggleHide } = useOptionsContext();
 
   useEffect(() => {
     const isHiddenSettingValue = localStorage.getItem(IsHiddenSettingKey);

src/components/ModeButton.component.tsx

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { useOptionsContext } from "../hooks/useOptionsContext.hook";
+import { IconButton } from "./IconButton.component";
+import { faStopwatch, faStopwatch20 } from "@fortawesome/free-solid-svg-icons";
+
+const ModeButton = () => {
+    const IsStopwatchSettingKey = "stopwatch";
+    const { isStopwatchMode, toggleStopwatchMode } = useOptionsContext();
+  
+    useEffect(() => {
+      const isStopwatchSettingValue = localStorage.getItem(IsStopwatchSettingKey);
+      if (isStopwatchSettingValue && isStopwatchSettingValue !== isStopwatchMode.toString()) {
+        toggleStopwatchMode();
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+  
+    useEffect(() => {
+      localStorage.setItem(IsStopwatchSettingKey, isStopwatchMode.toString());
+    }, [isStopwatchMode]);
+  
+    return (
+      <IconButton
+        icon={isStopwatchMode ? faStopwatch : faStopwatch20}
+        tooltip={isStopwatchMode ? "Switch to countdown mode" : "Switch to stopwatch mode"}
+        onClick={() => toggleStopwatchMode()}
+      />
+    );
+  };
+  
+  export { ModeButton };

src/components/MuteButton.component.tsx

@@ -1,11 +1,11 @@
 import { useEffect } from "react";
 import { faVolumeHigh, faVolumeXmark } from "@fortawesome/free-solid-svg-icons";
-import { useMuteContext } from "../hooks/useMuteContext.hook";
+import { useOptionsContext } from "../hooks/useOptionsContext.hook";
 import { IconButton } from "./IconButton.component";
 
 const MuteButton = () => {
   const IsMutedSettingKey = "mute";
-  const { isMuted, toggleMute } = useMuteContext();
+  const { isMuted, toggleMute } = useOptionsContext();
 
   useEffect(() => {
     const isMutedSettingValue = localStorage.getItem(IsMutedSettingKey);

src/contexts/Hide.context.tsx

@@ -0,0 +1,47 @@
+import { createContext, useState } from "react";
+
+const Options = {
+  isMuted: false,
+  toggleMute: () => {},
+  isHidden: false,
+  toggleHide: () => {},
+  isStopwatchMode: false,
+  toggleStopwatchMode: () => {},
+};
+
+const OptionsContext = createContext(Options);
+
+const OptionsProvider = ({ children }: { children: React.ReactNode }) => {
+  const [isMuted, setIsMuted] = useState(false);
+  const [isHidden, setIsHidden] = useState(false);
+  const [isStopwatchMode, setIsStopwatchMode] = useState(false);
+
+  const toggleMute = () => {
+    setIsMuted(!isMuted);
+  };
+
+  const toggleHide = () => {
+    setIsHidden(!isHidden);
+  };
+
+  const toggleStopwatchMode = () => {
+    setIsStopwatchMode(!isStopwatchMode);
+  };
+
+  return (
+    <OptionsContext.Provider
+      value={{
+        isMuted,
+        toggleMute,
+        isHidden,
+        toggleHide,
+        isStopwatchMode,
+        toggleStopwatchMode,
+      }}
+    >
+      {children}
+    </OptionsContext.Provider>
+  );
+};
+
+export { OptionsContext, OptionsProvider };