Implement a pause button in TypeScript and Jest project

examples/typescript-jest/src/App.tsx

@@ -18,11 +18,14 @@ const cols = 4;
 const App = ({ className }: Props) => {
   const [difficulty, setDifficulty] = useState<Difficulty>(Difficulty.EASY);
 
-  const { score, incrementScore, activeTile, timeRemaining } = useGameManager(
-    rows,
-    cols,
-    difficulty,
-  );
+  const {
+    score,
+    incrementScore,
+    activeTile,
+    timeRemaining,
+    isPaused,
+    toggleTimer,
+  } = useGameManager(rows, cols, difficulty);
 
   return (
     <main className={className}>
@@ -31,14 +34,19 @@ const App = ({ className }: Props) => {
         timeRemaining={timeRemaining}
         difficulty={difficulty}
         setDifficulty={setDifficulty}
+        isPaused={isPaused}
+        toggleTimer={toggleTimer}
       />
       <Board
         rows={rows}
         cols={cols}
         onTilePressed={(row: number, col: number) =>
-          row === activeTile?.row && col === activeTile?.col && incrementScore()
+          !isPaused &&
+          row === activeTile?.row &&
+          col === activeTile?.col &&
+          incrementScore()
         }
-        activeTile={activeTile}
+        activeTile={!isPaused ? activeTile : undefined}
         timeRemaining={timeRemaining}
       />
     </main>

examples/typescript-jest/src/components/PauseButton/PauseButton.tsx

@@ -0,0 +1,8 @@
+interface Props {
+  onClick: () => void;
+  isPaused: boolean;
+}
+
+export const PauseButton = ({ onClick, isPaused }: Props) => (
+  <button onClick={onClick}>{isPaused ? "Resume" : "Pause"}</button>
+);

examples/typescript-jest/src/components/PauseButton/__tests__/PauseButton.test.tsx

@@ -0,0 +1,30 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { PauseButton } from "../PauseButton.tsx";
+
+describe("PauseButton", () => {
+  it("should render a pause button when not paused", () => {
+    render(<PauseButton onClick={jest.fn()} isPaused={false} />);
+
+    const button = screen.getByRole("button");
+    expect(button).toHaveTextContent("Pause");
+  });
+
+  it("should render a resume button when paused", () => {
+    render(<PauseButton onClick={jest.fn()} isPaused={true} />);
+
+    const button = screen.getByRole("button");
+    expect(button).toHaveTextContent("Resume");
+  });
+
+  it("should pause game when toggled", () => {
+    const onClick = jest.fn();
+
+    render(<PauseButton onClick={onClick} isPaused={false} />);
+
+    const button = screen.getByRole("button");
+    fireEvent.click(button);
+    fireEvent.click(button);
+
+    expect(onClick).toHaveBeenCalledTimes(2);
+  });
+});

examples/typescript-jest/src/components/PauseButton/index.ts

@@ -0,0 +1 @@
+export { PauseButton } from "./PauseButton.tsx";

examples/typescript-jest/src/components/StatsCard/StatsCard.tsx

@@ -1,12 +1,15 @@
 import { DifficultySelector } from "../DifficultySelector";
 import { Difficulty } from "../../hooks/useGameManager.ts";
+import { PauseButton } from "../PauseButton";
 
 interface Props {
   className?: string;
   score: number;
   timeRemaining: number;
   difficulty: Difficulty;
   setDifficulty: (difficulty: Difficulty) => void;
+  isPaused: boolean;
+  toggleTimer: () => void;
 }
 
 export const StatsCard = ({
@@ -15,6 +18,8 @@ export const StatsCard = ({
   timeRemaining,
   difficulty,
   setDifficulty,
+  isPaused,
+  toggleTimer,
 }: Props) => (
   <aside className={className}>
     <div>
@@ -24,7 +29,7 @@ export const StatsCard = ({
         setDifficulty={setDifficulty}
         difficulty={difficulty}
       />
+      <PauseButton onClick={toggleTimer} isPaused={isPaused} />
     </div>
-    <div></div>
   </aside>
 );

examples/typescript-jest/src/components/StatsCard/__tests__/StatsCard.test.tsx

@@ -10,6 +10,8 @@ describe("StatsCard", () => {
         difficulty={Difficulty.HARD}
         timeRemaining={1000}
         setDifficulty={() => {}}
+        isPaused
+        toggleTimer={() => {}}
       />,
     );
 
@@ -23,6 +25,8 @@ describe("StatsCard", () => {
         difficulty={Difficulty.HARD}
         timeRemaining={1000}
         setDifficulty={() => {}}
+        isPaused
+        toggleTimer={() => {}}
       />,
     );
 
@@ -36,6 +40,8 @@ describe("StatsCard", () => {
         difficulty={Difficulty.HARD}
         timeRemaining={1000}
         setDifficulty={() => {}}
+        isPaused
+        toggleTimer={() => {}}
       />,
     );
 

examples/typescript-jest/src/hooks/useGameManager.ts

@@ -13,6 +13,8 @@ export type GameManager = {
   incrementScore: () => void;
   activeTile?: ActiveTile;
   timeRemaining: number;
+  isPaused: boolean;
+  toggleTimer: () => void;
 };
 
 export type ActiveTile = { row: number; col: number };
@@ -40,12 +42,22 @@ export const useGameManager = (
     resetTimer();
   };
 
-  const { timeRemaining, resetTimer } = useTimer(nextTile, tileDuration);
+  const { timeRemaining, resetTimer, isPaused, toggleTimer } = useTimer(
+    nextTile,
+    tileDuration,
+  );
 
   const incrementScore = () => {
     setScore((prev) => prev + 1);
     nextTile();
   };
 
-  return { score, incrementScore, timeRemaining, activeTile };
+  return {
+    score,
+    incrementScore,
+    timeRemaining,
+    activeTile,
+    isPaused,
+    toggleTimer,
+  };
 };

examples/typescript-jest/src/hooks/useTimer.ts

@@ -5,6 +5,12 @@ import { useCallback, useEffect, useState } from "react";
  */
 export const useTimer = (onFinish: () => void, time: number = 4000) => {
   const [timeRemaining, setTimeRemaining] = useState(time);
+  const [isPaused, setIsPaused] = useState(false);
+
+  const toggleTimer = useCallback(
+    () => setIsPaused((prev) => !prev),
+    [setIsPaused],
+  );
 
   const resetTimer = useCallback(
     () => setTimeRemaining(time),
@@ -13,18 +19,24 @@ export const useTimer = (onFinish: () => void, time: number = 4000) => {
 
   useEffect(() => {
     const timer = setInterval(() => {
+      if (isPaused) {
+        // Don't decrement the time remaining if the timer is paused.
+        return;
+      }
+
       setTimeRemaining((prev) => prev - 1);
     }, 1);
 
     if (timeRemaining <= 0) {
+      // The timers elapsed, so we call the onFinish callback and reset the timer.
       onFinish();
       resetTimer();
     }
 
     return () => {
       clearInterval(timer);
     };
-  }, [timeRemaining, onFinish, resetTimer, setTimeRemaining]);
+  }, [timeRemaining, onFinish, resetTimer, setTimeRemaining, isPaused]);
 
-  return { timeRemaining, resetTimer };
+  return { timeRemaining, resetTimer, isPaused, toggleTimer };
 };