From f5f7f958db494b79628d3c3e64f8f91e1b613b5a Mon Sep 17 00:00:00 2001
From: Andrew Nessin <andrewnessinjim@yahoo.com>
Date: Sat, 22 Feb 2025 19:21:36 +0530
Subject: [PATCH 1/6] Improve code readability

---
 src/components/App/App.tsx                     |  4 ++--
 src/components/Game/Game.tsx                   | 18 +++---------------
 .../GameResetController.tsx                    | 14 ++++++++++++++
 src/components/GameResetController/index.ts    |  2 ++
 4 files changed, 21 insertions(+), 17 deletions(-)
 create mode 100644 src/components/GameResetController/GameResetController.tsx
 create mode 100644 src/components/GameResetController/index.ts

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 2ec43b6..b99b395 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,6 +1,6 @@
 import { MotionConfig } from 'motion/react';
-import Game from '../Game';
 import styles from './App.module.css';
+import GameResetController from '../GameResetController';
 
 function App() {
   return (
@@ -10,7 +10,7 @@ function App() {
         <p>Match pieces to get the longest streak</p>
       </header>
       <main className="main container">
-        <Game />
+        <GameResetController />
       </main>
       <footer className={styles.footer}>
         <div className={`container ${styles.footerContainer}`}>
diff --git a/src/components/Game/Game.tsx b/src/components/Game/Game.tsx
index 756b0a3..7b5a718 100644
--- a/src/components/Game/Game.tsx
+++ b/src/components/Game/Game.tsx
@@ -11,15 +11,12 @@ import { AnimatePresence, motion } from 'motion/react';
 
 const MotionBanner = motion.create(Banner);
 
-// Create new game cells
-const initialCells = createCells(GRID_CELLS);
-
-function Game() {
+function Game({ onReset }: { onReset: () => void }) {
   const [gameStatus, setGameStatus] = useState<GameStatus>('running');
   const [noMatchCount, setNoMatchCount] = useState(0);
   const [streak, setStreak] = useState<number>(0);
   const [longestStreak, setLongestStreak] = useState<number>(0);
-  const [cells, setCells] = useState<GameCell[]>(initialCells);
+  const [cells, setCells] = useState<GameCell[]>(() => createCells(GRID_CELLS));
 
   useEffect(() => {
     const allEmpty = cells.every((cell) => cell.pieces.length === 0);
@@ -30,15 +27,6 @@ function Game() {
     setGameStatus(noMatchCount === 0 ? 'won' : 'complete');
   }, [cells, noMatchCount]);
 
-  const handleRestart = () => {
-    const newCells = createCells(GRID_CELLS);
-    setCells(newCells);
-    setGameStatus('running');
-    setNoMatchCount(0);
-    setStreak(0);
-    setLongestStreak(0);
-  };
-
   const removeMatchingPieces = (
     activeCell: GameCell,
     nextCell: GameCell,
@@ -150,7 +138,7 @@ function Game() {
           <MotionBanner
             status={gameStatus}
             longestStreak={longestStreak}
-            resetGame={handleRestart}
+            resetGame={onReset}
           />
         )}
       </AnimatePresence>
diff --git a/src/components/GameResetController/GameResetController.tsx b/src/components/GameResetController/GameResetController.tsx
new file mode 100644
index 0000000..14a5190
--- /dev/null
+++ b/src/components/GameResetController/GameResetController.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Game from '../Game/Game';
+
+function GameResetController() {
+  const [resetKey, setResetKey] = React.useState(crypto.randomUUID());
+
+  function resetGame() {
+    setResetKey(crypto.randomUUID())
+  }
+
+  return <Game key={resetKey} onReset={resetGame}></Game>;
+}
+
+export default GameResetController;
diff --git a/src/components/GameResetController/index.ts b/src/components/GameResetController/index.ts
new file mode 100644
index 0000000..aca2c6b
--- /dev/null
+++ b/src/components/GameResetController/index.ts
@@ -0,0 +1,2 @@
+export * from './GameResetController';
+export { default } from './GameResetController';

From e8beb58b60765c6628b2d09642480bf7f20808ea Mon Sep 17 00:00:00 2001
From: Andrew Nessin <andrewnessinjim@yahoo.com>
Date: Mon, 24 Feb 2025 11:02:12 +0530
Subject: [PATCH 2/6] Organize animation settings

---
 src/components/Cell/Cell.tsx      | 20 ++------------------
 src/components/Cell/animations.ts | 22 ++++++++++++++++++++++
 2 files changed, 24 insertions(+), 18 deletions(-)
 create mode 100644 src/components/Cell/animations.ts

diff --git a/src/components/Cell/Cell.tsx b/src/components/Cell/Cell.tsx
index a760a16..fa5761a 100644
--- a/src/components/Cell/Cell.tsx
+++ b/src/components/Cell/Cell.tsx
@@ -4,6 +4,7 @@ import { getMatches } from '@/helpers/game.helpers';
 import { AnimatePresence, motion } from 'motion/react';
 import VisuallyHidden from '../VisuallyHidden';
 import styles from './Cell.module.css';
+import { staggeredScaleRotate } from './animations';
 
 type CellProps = {
   id: string;
@@ -69,24 +70,7 @@ function Cell({
             <motion.svg
               key={pieceId}
               data-piece={pieceId}
-              animate={{
-                scale: [0, 1.5, 1],
-                rotate: [180, 360, 360],
-                transition: {
-                  duration: 2,
-                  delay: i * 0.3,
-                  times: [0, 0.25, 0.5],
-                },
-              }}
-              exit={{
-                scale: [1, 1.5, 0],
-                rotate: [0, 0, 0],
-                transition: {
-                  duration: 1,
-                  delay: i * 0.15,
-                  times: [0, 0.25, 0.5],
-                },
-              }}
+              {...staggeredScaleRotate(i)}
             >
               <use xlinkHref={`/svg-sprite.svg#${pieceId}`} />
             </motion.svg>
diff --git a/src/components/Cell/animations.ts b/src/components/Cell/animations.ts
new file mode 100644
index 0000000..dcd07f2
--- /dev/null
+++ b/src/components/Cell/animations.ts
@@ -0,0 +1,22 @@
+export function staggeredScaleRotate(index: number) {
+  return {
+    animate: {
+      scale: [0, 1.5, 1],
+      rotate: [180, 360, 360],
+      transition: {
+        duration: 2,
+        delay: index * 0.3,
+        times: [0, 0.25, 0.5],
+      },
+    },
+    exit: {
+      scale: [1, 1.5, 0],
+      rotate: [0, 0, 0],
+      transition: {
+        duration: 1,
+        delay: index * 0.15,
+        times: [0, 0.25, 0.5],
+      },
+    },
+  };
+}

From eaa8a4f832df2a2d4a83c97b994a1a096b0481f5 Mon Sep 17 00:00:00 2001
From: Andrew Nessin <andrewnessinjim@yahoo.com>
Date: Mon, 24 Feb 2025 11:50:25 +0530
Subject: [PATCH 3/6] refactor: unify prop values

---
 src/components/Cell/Cell.tsx | 18 +++---------------
 src/components/Game/Game.tsx | 12 +++++++++++-
 src/globals.d.ts             |  9 +++++++--
 3 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/components/Cell/Cell.tsx b/src/components/Cell/Cell.tsx
index fa5761a..8a6f343 100644
--- a/src/components/Cell/Cell.tsx
+++ b/src/components/Cell/Cell.tsx
@@ -8,21 +8,13 @@ import { staggeredScaleRotate } from './animations';
 
 type CellProps = {
   id: string;
-  disabled: boolean;
   status: CellStatus;
   pieces: string[];
   previous: GameCell | undefined;
   updateCellsState: (id: string, matches?: string[]) => void;
 };
 
-function Cell({
-  id,
-  disabled,
-  status,
-  pieces,
-  previous,
-  updateCellsState,
-}: CellProps) {
+function Cell({ id, status, pieces, previous, updateCellsState }: CellProps) {
   const [showNoMatch, setShowNoMatch] = useState(false);
 
   useEffect(() => {
@@ -36,7 +28,7 @@ function Cell({
 
   function handleClick() {
     // do nothing if same cell is clicked twice OR game is over
-    if (status === 'active' || disabled) return;
+    if (status === 'active' || status === 'inactive') return;
 
     // only one cell has been clicked, comparison can't be run
     if (!previous) {
@@ -53,11 +45,7 @@ function Cell({
   }
 
   return (
-    <div
-      id={id}
-      className={styles.cell}
-      data-status={disabled ? 'default' : status}
-    >
+    <div id={id} className={styles.cell} data-status={status}>
       <div className={styles.message}>{showNoMatch && <p>no match</p>}</div>
       <button className={styles.btn} onClick={handleClick}>
         <VisuallyHidden>
diff --git a/src/components/Game/Game.tsx b/src/components/Game/Game.tsx
index 7b5a718..452a1d8 100644
--- a/src/components/Game/Game.tsx
+++ b/src/components/Game/Game.tsx
@@ -24,7 +24,18 @@ function Game({ onReset }: { onReset: () => void }) {
       return;
     }
 
+    function deactivateCells() {
+      setCells(
+        produce(cells, (draftCells) => {
+          for (const cell of draftCells) {
+            cell.status = 'inactive';
+          }
+        }),
+      );
+    }
+
     setGameStatus(noMatchCount === 0 ? 'won' : 'complete');
+    deactivateCells();
   }, [cells, noMatchCount]);
 
   const removeMatchingPieces = (
@@ -122,7 +133,6 @@ function Game({ onReset }: { onReset: () => void }) {
               key={id}
               id={id}
               status={status}
-              disabled={gameStatus !== 'running'}
               pieces={pieces}
               previous={cells.find(
                 (cell: GameCell) => cell.status === 'active',
diff --git a/src/globals.d.ts b/src/globals.d.ts
index 420f025..b10241b 100644
--- a/src/globals.d.ts
+++ b/src/globals.d.ts
@@ -1,9 +1,14 @@
 export type GameCell = {
   id: string;
-  status: 'default' | 'previous' | 'active' | 'empty';
+  status: CellStatus;
   pieces: string[];
 };
 
-export type CellStatus = 'default' | 'previous' | 'active' | 'empty';
+export type CellStatus =
+  | 'default'
+  | 'previous'
+  | 'active'
+  | 'empty'
+  | 'inactive';
 
 export type GameStatus = 'running' | 'won' | 'complete';

From 3bf5b8e8fdef8c4f2fe6bf8b0d2de51e3396ecbd Mon Sep 17 00:00:00 2001
From: Andrew Nessin <andrewnessinjim@yahoo.com>
Date: Mon, 24 Feb 2025 18:11:57 +0530
Subject: [PATCH 4/6] Organize code with useCellData hook

---
 src/components/Cell/Cell.module.css |   2 +-
 src/components/Cell/Cell.tsx        |  47 ++------
 src/components/Game/Game.tsx        | 176 +++++++++++-----------------
 src/globals.d.ts                    |  17 +--
 src/helpers/game.helpers.ts         |  12 +-
 src/hooks/useCellData.ts            |  40 +++++++
 6 files changed, 137 insertions(+), 157 deletions(-)
 create mode 100644 src/hooks/useCellData.ts

diff --git a/src/components/Cell/Cell.module.css b/src/components/Cell/Cell.module.css
index 5f008ed..06de68a 100644
--- a/src/components/Cell/Cell.module.css
+++ b/src/components/Cell/Cell.module.css
@@ -21,7 +21,7 @@
     border: var(--border-width) solid var(--border-color);
   }
 
-  .cell[data-status='empty'] & {
+  .cell[data-status='all_match'] & {
     border: var(--border-width) dotted var(--border-color);
   }
 
diff --git a/src/components/Cell/Cell.tsx b/src/components/Cell/Cell.tsx
index 8a6f343..79aaf29 100644
--- a/src/components/Cell/Cell.tsx
+++ b/src/components/Cell/Cell.tsx
@@ -1,6 +1,5 @@
-import { useEffect, useState } from 'react';
-import { CellStatus, GameCell } from '@/globals';
-import { getMatches } from '@/helpers/game.helpers';
+import { CellStatus } from '@/globals';
+
 import { AnimatePresence, motion } from 'motion/react';
 import VisuallyHidden from '../VisuallyHidden';
 import styles from './Cell.module.css';
@@ -10,44 +9,22 @@ type CellProps = {
   id: string;
   status: CellStatus;
   pieces: string[];
-  previous: GameCell | undefined;
-  updateCellsState: (id: string, matches?: string[]) => void;
+  onClick: (id: string) => void;
 };
 
-function Cell({ id, status, pieces, previous, updateCellsState }: CellProps) {
-  const [showNoMatch, setShowNoMatch] = useState(false);
-
-  useEffect(() => {
-    if (setShowNoMatch) {
-      const timerId = setTimeout(() => {
-        setShowNoMatch(false);
-      }, 2500);
-      return () => clearTimeout(timerId);
-    }
-  }, [showNoMatch]);
-
-  function handleClick() {
-    // do nothing if same cell is clicked twice OR game is over
-    if (status === 'active' || status === 'inactive') return;
-
-    // only one cell has been clicked, comparison can't be run
-    if (!previous) {
-      updateCellsState(id);
-      return;
-    }
-
-    const matches = getMatches(previous.pieces, pieces);
-    if (matches.length === 0) {
-      setShowNoMatch(true);
-    }
-
-    updateCellsState(id, matches);
-  }
+function Cell({ id, status, pieces, onClick }: CellProps) {
+  const showNoMatch = status === 'no_match';
 
   return (
     <div id={id} className={styles.cell} data-status={status}>
       <div className={styles.message}>{showNoMatch && <p>no match</p>}</div>
-      <button className={styles.btn} onClick={handleClick}>
+      <button
+        className={styles.btn}
+        onClick={() => {
+          if(status === 'inactive') return; //do nothing
+          onClick(id);
+        }}
+      >
         <VisuallyHidden>
           {`Select cell with pieces ${pieces.join(', ')}`}
         </VisuallyHidden>
diff --git a/src/components/Game/Game.tsx b/src/components/Game/Game.tsx
index 452a1d8..45373de 100644
--- a/src/components/Game/Game.tsx
+++ b/src/components/Game/Game.tsx
@@ -1,13 +1,12 @@
-import { useEffect, useState } from 'react';
-import { produce } from 'immer';
-import { GRID_CELLS } from '@/constants';
-import { createCells } from '@/helpers/game.helpers';
-import { GameStatus, GameCell } from '@/globals';
+import { useState } from 'react';
+
+import { GameStatus, MatchCellStatus } from '@/globals';
 import Cell from '@components/Cell';
 import styles from './Game.module.css';
 import Banner from '../Banner';
 import Stats from '../Stats';
 import { AnimatePresence, motion } from 'motion/react';
+import useCellData from '@/hooks/useCellData';
 
 const MotionBanner = motion.create(Banner);
 
@@ -16,128 +15,93 @@ function Game({ onReset }: { onReset: () => void }) {
   const [noMatchCount, setNoMatchCount] = useState(0);
   const [streak, setStreak] = useState<number>(0);
   const [longestStreak, setLongestStreak] = useState<number>(0);
-  const [cells, setCells] = useState<GameCell[]>(() => createCells(GRID_CELLS));
-
-  useEffect(() => {
-    const allEmpty = cells.every((cell) => cell.pieces.length === 0);
-    if (!allEmpty) {
+  const { cells, dropMatches, areAllEmpty } = useCellData();
+  const [activeCellId, setActiveCellId] = useState<string | null>(null);
+  const [matchCellId, setMatchCellId] = useState<string | null>(null);
+  const [matchCellStatus, setMatchCellStatus] =
+    useState<MatchCellStatus | null>(null);
+
+  if (areAllEmpty() && gameStatus === 'running') {
+    if (noMatchCount > 0) {
+      setGameStatus('complete');
+    } else {
+      setGameStatus('won');
+    }
+  }
+  function handleClick(cellId: string) {
+    if (activeCellId === cellId) {
+      //do nothing if the same cell is clicked
       return;
     }
 
-    function deactivateCells() {
-      setCells(
-        produce(cells, (draftCells) => {
-          for (const cell of draftCells) {
-            cell.status = 'inactive';
-          }
-        }),
-      );
+    if (activeCellId == null) {
+      setActiveCellId(cellId);
+      setMatchCellId(null);
+      setMatchCellStatus(null);
+      return;
     }
 
-    setGameStatus(noMatchCount === 0 ? 'won' : 'complete');
-    deactivateCells();
-  }, [cells, noMatchCount]);
-
-  const removeMatchingPieces = (
-    activeCell: GameCell,
-    nextCell: GameCell,
-    matches: string[],
-  ) => {
-    matches.forEach((pieceId) => {
-      activeCell.pieces = activeCell.pieces.filter((item) => item !== pieceId);
-      nextCell.pieces = nextCell.pieces.filter((item) => item !== pieceId);
-    });
-  };
+    const nextMatchCellId = cellId;
+    setMatchCellId(nextMatchCellId);
+    const dropResult = dropMatches(activeCellId, nextMatchCellId);
 
-  const resetCellStatuses = (
-    prevActiveCell: GameCell | undefined,
-    activeCell?: GameCell | undefined,
-  ) => {
-    if (prevActiveCell) {
-      prevActiveCell.status = 'default';
-    }
-    if (activeCell) {
-      activeCell.status = 'default';
+    if (dropResult === 'no_match') {
+      setActiveCellId(null);
+      setMatchCellId(nextMatchCellId);
+      setMatchCellStatus('no_match');
+      setNoMatchCount(noMatchCount + 1);
+      setStreak(0);
+      return;
     }
-  };
 
-  const updateCellStatuses = (
-    emptyCell: GameCell | undefined,
-    activeCell: GameCell | undefined,
-    nextCell: GameCell,
-  ) => {
-    if (emptyCell) {
-      emptyCell.status = 'default';
-    }
-    if (activeCell) {
-      activeCell.status = nextCell.pieces.length > 0 ? 'previous' : 'default';
-    }
-    nextCell.status = nextCell.pieces.length > 0 ? 'active' : 'empty';
-  };
+    if (dropResult === 'all_match') {
+      setMatchCellStatus('all_match');
+      setActiveCellId(null);
 
-  const updateCounts = (hasMatches: boolean) => {
-    if (!hasMatches) {
-      setNoMatchCount((c) => c + 1);
-      setStreak(0);
+      const nextStreak = streak + 1;
+      setStreak(nextStreak);
+      if (nextStreak > longestStreak) {
+        setLongestStreak(nextStreak);
+      }
       return;
     }
 
-    setLongestStreak((ls) => {
-      if (ls > streak) {
-        return ls;
-      } else {
-        return ls + 1;
+    if (dropResult === 'partial_match') {
+      setActiveCellId(nextMatchCellId);
+      setMatchCellId(null);
+      setMatchCellStatus(null);
+      const nextStreak = streak + 1;
+      setStreak(nextStreak);
+      if (nextStreak > longestStreak) {
+        setLongestStreak(nextStreak);
       }
-    });
-    setStreak((s) => s + 1);
-  };
-
-  const updateCellsState = (id: string, matches?: string[]) => {
-    if (matches) {
-      updateCounts(matches.length > 0);
     }
+  }
 
-    setCells(
-      produce(cells, (draft) => {
-        const nextCell = draft.find((item) => item.id === id)!;
-        const activeCell = draft.find((item) => item.status === 'active');
-        const prevActiveCell = draft.find((item) => item.status === 'previous');
-        const emptyCell = draft.find((item) => item.status === 'empty');
-
-        // zero matches
-        if (matches && matches.length === 0) {
-          resetCellStatuses(prevActiveCell, activeCell);
-        }
-
-        // has matches
-        if (matches && matches.length > 0) {
-          removeMatchingPieces(activeCell!, nextCell!, matches);
-          resetCellStatuses(prevActiveCell);
-          updateCellStatuses(emptyCell, activeCell, nextCell);
-        }
-
-        // comparison hasn't happened yet
-        if (typeof matches === 'undefined') {
-          updateCellStatuses(emptyCell, activeCell, nextCell);
-        }
-      }),
-    );
-  };
+  function getCellStatus(cellId: string) {
+    if (gameStatus !== 'running') {
+      return 'inactive';
+    }
+    if (activeCellId === cellId) {
+      return 'active';
+    }
+    if (matchCellId === cellId && matchCellStatus !== null) {
+      return matchCellStatus;
+    }
+    return 'default';
+  }
 
   return (
     <>
       <section className={styles.grid}>
-        {cells.map(({ id, status, pieces }) => {
+        {Object.keys(cells).map((cellId) => {
           return (
             <Cell
-              key={id}
-              id={id}
-              status={status}
-              pieces={pieces}
-              previous={cells.find(
-                (cell: GameCell) => cell.status === 'active',
-              )}
-              updateCellsState={updateCellsState}
+              id={cellId}
+              key={cellId}
+              pieces={cells[cellId]}
+              status={getCellStatus(cellId)}
+              onClick={handleClick}
             />
           );
         })}
diff --git a/src/globals.d.ts b/src/globals.d.ts
index b10241b..c677460 100644
--- a/src/globals.d.ts
+++ b/src/globals.d.ts
@@ -1,14 +1,17 @@
-export type GameCell = {
+export type CellData = {
   id: string;
-  status: CellStatus;
-  pieces: string[];
-};
+  pieces: []
+}
+
+export type ActiveCellStatus = "active";
+export type MatchCellStatus = "no_match" | "all_match";
+
+export type GameCells = { [key: string]: string[] };
 
 export type CellStatus =
   | 'default'
-  | 'previous'
-  | 'active'
-  | 'empty'
+  | ActiveCellStatus
+  | MatchCellStatus
   | 'inactive';
 
 export type GameStatus = 'running' | 'won' | 'complete';
diff --git a/src/helpers/game.helpers.ts b/src/helpers/game.helpers.ts
index 3e733ae..5e6c945 100644
--- a/src/helpers/game.helpers.ts
+++ b/src/helpers/game.helpers.ts
@@ -1,5 +1,5 @@
 import { v4 as uuidv4 } from 'uuid';
-import { GameCell } from '@/globals';
+import { GameCells } from '@/globals';
 import { random } from '@/utils';
 import { GAME_SET } from '@/constants';
 
@@ -18,16 +18,12 @@ export const getMatches = (
   return matching;
 };
 
-export const createCells = (amountOfCells: number): GameCell[] => {
-  const output = [];
+export const createCells = (amountOfCells: number): GameCells => {
+  const output: GameCells = {};
   const gamePieces = getGamePieces(amountOfCells);
 
   for (let i = 0; i < amountOfCells; i += 1) {
-    output.push({
-      id: uuidv4(),
-      status: 'default' as const,
-      pieces: gamePieces[i],
-    });
+    output[uuidv4()] = gamePieces[i];
   }
 
   return output;
diff --git a/src/hooks/useCellData.ts b/src/hooks/useCellData.ts
new file mode 100644
index 0000000..877c21e
--- /dev/null
+++ b/src/hooks/useCellData.ts
@@ -0,0 +1,40 @@
+import { GRID_CELLS } from '@/constants';
+import { GameCells } from '@/globals';
+import { createCells } from '@/helpers/game.helpers';
+import { produce } from 'immer';
+import { useState } from 'react';
+
+export type DropResult = 'no_match' | 'all_match' | 'partial_match';
+
+export default function useCellData() {
+  const [cells, setCells] = useState<GameCells>(() => createCells(GRID_CELLS));
+
+  function areAllEmpty(): boolean {
+    return Object.values(cells).every((cell) => cell.length === 0);
+  }
+
+  function dropMatches(cellId1: string, cellId2: string): DropResult {
+    const cell1 = cells[cellId1];
+    const cell2 = cells[cellId2];
+
+    const matches = cell1.filter((piece) => cell2.includes(piece));
+
+    if (matches.length === 0) {
+      return 'no_match';
+    }
+
+    const nextCells = produce(cells, (draftCells) => {
+      draftCells[cellId1] = cell1.filter((piece) => !matches.includes(piece));
+      draftCells[cellId2] = cell2.filter((piece) => !matches.includes(piece));
+    });
+
+    setCells(nextCells);
+    return nextCells[cellId2].length === 0 ? 'all_match' : 'partial_match';
+  }
+
+  return {
+    areAllEmpty,
+    dropMatches,
+    cells,
+  };
+}

From 348c61f711e02d18424cda2f8ccc16832bf2c6ac Mon Sep 17 00:00:00 2001
From: Andrew Nessin <andrewnessinjim@yahoo.com>
Date: Mon, 24 Feb 2025 18:17:21 +0530
Subject: [PATCH 5/6] Organize code with useStreak hook

---
 src/components/Game/Game.tsx | 19 +++++--------------
 src/hooks/useStreak.ts       | 25 +++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 14 deletions(-)
 create mode 100644 src/hooks/useStreak.ts

diff --git a/src/components/Game/Game.tsx b/src/components/Game/Game.tsx
index 45373de..3febfc6 100644
--- a/src/components/Game/Game.tsx
+++ b/src/components/Game/Game.tsx
@@ -7,14 +7,14 @@ import Banner from '../Banner';
 import Stats from '../Stats';
 import { AnimatePresence, motion } from 'motion/react';
 import useCellData from '@/hooks/useCellData';
+import { useStreak } from '@/hooks/useStreak';
 
 const MotionBanner = motion.create(Banner);
 
 function Game({ onReset }: { onReset: () => void }) {
   const [gameStatus, setGameStatus] = useState<GameStatus>('running');
   const [noMatchCount, setNoMatchCount] = useState(0);
-  const [streak, setStreak] = useState<number>(0);
-  const [longestStreak, setLongestStreak] = useState<number>(0);
+  const {longestStreak, streak, resetStreak, incrementStreak} = useStreak();
   const { cells, dropMatches, areAllEmpty } = useCellData();
   const [activeCellId, setActiveCellId] = useState<string | null>(null);
   const [matchCellId, setMatchCellId] = useState<string | null>(null);
@@ -50,19 +50,14 @@ function Game({ onReset }: { onReset: () => void }) {
       setMatchCellId(nextMatchCellId);
       setMatchCellStatus('no_match');
       setNoMatchCount(noMatchCount + 1);
-      setStreak(0);
+      resetStreak();
       return;
     }
 
     if (dropResult === 'all_match') {
       setMatchCellStatus('all_match');
       setActiveCellId(null);
-
-      const nextStreak = streak + 1;
-      setStreak(nextStreak);
-      if (nextStreak > longestStreak) {
-        setLongestStreak(nextStreak);
-      }
+      incrementStreak()
       return;
     }
 
@@ -70,11 +65,7 @@ function Game({ onReset }: { onReset: () => void }) {
       setActiveCellId(nextMatchCellId);
       setMatchCellId(null);
       setMatchCellStatus(null);
-      const nextStreak = streak + 1;
-      setStreak(nextStreak);
-      if (nextStreak > longestStreak) {
-        setLongestStreak(nextStreak);
-      }
+      incrementStreak();
     }
   }
 
diff --git a/src/hooks/useStreak.ts b/src/hooks/useStreak.ts
new file mode 100644
index 0000000..ee9af4e
--- /dev/null
+++ b/src/hooks/useStreak.ts
@@ -0,0 +1,25 @@
+import { useState } from 'react';
+
+export function useStreak() {
+  const [streak, setStreak] = useState<number>(0);
+  const [longestStreak, setLongestStreak] = useState<number>(0);
+
+  function resetStreak() {
+    setStreak(0);
+  }
+
+  function incrementStreak() {
+    const nextStreak = streak + 1;
+    setStreak(nextStreak);
+    if (nextStreak > longestStreak) {
+      setLongestStreak(nextStreak);
+    }
+  }
+
+  return {
+    streak,
+    longestStreak,
+    resetStreak,
+    incrementStreak
+  };
+}

From fa29d99fdda92e3af57aef134a7b990f1efeb685 Mon Sep 17 00:00:00 2001
From: Andrew Nessin <andrewnessinjim@yahoo.com>
Date: Mon, 24 Feb 2025 18:39:03 +0530
Subject: [PATCH 6/6] Organize code with useActiveAndMatchCell hook

---
 src/components/Game/Game.tsx        | 52 ++++++++++++++---------------
 src/hooks/useActiveAndMatchCells.ts | 41 +++++++++++++++++++++++
 2 files changed, 67 insertions(+), 26 deletions(-)
 create mode 100644 src/hooks/useActiveAndMatchCells.ts

diff --git a/src/components/Game/Game.tsx b/src/components/Game/Game.tsx
index 3febfc6..b0467dc 100644
--- a/src/components/Game/Game.tsx
+++ b/src/components/Game/Game.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { GameStatus, MatchCellStatus } from '@/globals';
+import { GameStatus } from '@/globals';
 import Cell from '@components/Cell';
 import styles from './Game.module.css';
 import Banner from '../Banner';
@@ -8,26 +8,26 @@ import Stats from '../Stats';
 import { AnimatePresence, motion } from 'motion/react';
 import useCellData from '@/hooks/useCellData';
 import { useStreak } from '@/hooks/useStreak';
+import { useActiveAndMatchCells } from '@/hooks/useActiveAndMatchCells';
 
 const MotionBanner = motion.create(Banner);
 
 function Game({ onReset }: { onReset: () => void }) {
   const [gameStatus, setGameStatus] = useState<GameStatus>('running');
   const [noMatchCount, setNoMatchCount] = useState(0);
-  const {longestStreak, streak, resetStreak, incrementStreak} = useStreak();
+  const { longestStreak, streak, resetStreak, incrementStreak } = useStreak();
   const { cells, dropMatches, areAllEmpty } = useCellData();
-  const [activeCellId, setActiveCellId] = useState<string | null>(null);
-  const [matchCellId, setMatchCellId] = useState<string | null>(null);
-  const [matchCellStatus, setMatchCellStatus] =
-    useState<MatchCellStatus | null>(null);
 
-  if (areAllEmpty() && gameStatus === 'running') {
-    if (noMatchCount > 0) {
-      setGameStatus('complete');
-    } else {
-      setGameStatus('won');
-    }
-  }
+  const {
+    activeCellId,
+    matchCellId,
+    matchCellStatus,
+    activateCell,
+    markNoMatch,
+    markAllMatch,
+    markPartialMatch,
+  } = useActiveAndMatchCells();
+
   function handleClick(cellId: string) {
     if (activeCellId === cellId) {
       //do nothing if the same cell is clicked
@@ -35,36 +35,28 @@ function Game({ onReset }: { onReset: () => void }) {
     }
 
     if (activeCellId == null) {
-      setActiveCellId(cellId);
-      setMatchCellId(null);
-      setMatchCellStatus(null);
+      activateCell(cellId);
       return;
     }
 
     const nextMatchCellId = cellId;
-    setMatchCellId(nextMatchCellId);
     const dropResult = dropMatches(activeCellId, nextMatchCellId);
 
     if (dropResult === 'no_match') {
-      setActiveCellId(null);
-      setMatchCellId(nextMatchCellId);
-      setMatchCellStatus('no_match');
+      markNoMatch(nextMatchCellId);
       setNoMatchCount(noMatchCount + 1);
       resetStreak();
       return;
     }
 
     if (dropResult === 'all_match') {
-      setMatchCellStatus('all_match');
-      setActiveCellId(null);
-      incrementStreak()
+      markAllMatch(nextMatchCellId);
+      incrementStreak();
       return;
     }
 
     if (dropResult === 'partial_match') {
-      setActiveCellId(nextMatchCellId);
-      setMatchCellId(null);
-      setMatchCellStatus(null);
+      markPartialMatch(nextMatchCellId);
       incrementStreak();
     }
   }
@@ -82,6 +74,14 @@ function Game({ onReset }: { onReset: () => void }) {
     return 'default';
   }
 
+  if (areAllEmpty() && gameStatus === 'running') {
+    if (noMatchCount > 0) {
+      setGameStatus('complete');
+    } else {
+      setGameStatus('won');
+    }
+  }
+
   return (
     <>
       <section className={styles.grid}>
diff --git a/src/hooks/useActiveAndMatchCells.ts b/src/hooks/useActiveAndMatchCells.ts
new file mode 100644
index 0000000..c6e748e
--- /dev/null
+++ b/src/hooks/useActiveAndMatchCells.ts
@@ -0,0 +1,41 @@
+import { MatchCellStatus } from '@/globals';
+import { useState } from 'react';
+
+export function useActiveAndMatchCells() {
+  const [activeCellId, setActiveCellId] = useState<string | null>(null);
+  const [matchCellId, setMatchCellId] = useState<string | null>(null);
+  const [matchCellStatus, setMatchCellStatus] =
+    useState<MatchCellStatus | null>(null);
+
+  function activateCell(cellId: string) {
+    setActiveCellId(cellId);
+    setMatchCellId(null);
+    setMatchCellStatus(null);
+  }
+
+  function markNoMatch(cellId: string) {
+    setActiveCellId(null);
+    setMatchCellId(cellId);
+    setMatchCellStatus('no_match');
+  }
+
+  function markAllMatch(cellId: string) {
+    setActiveCellId(null);
+    setMatchCellStatus('all_match');
+    setMatchCellId(cellId);
+  }
+
+  function markPartialMatch(cellId: string) {
+    activateCell(cellId);
+  }
+
+  return {
+    activeCellId,
+    matchCellId,
+    matchCellStatus,
+    activateCell,
+    markNoMatch,
+    markAllMatch,
+    markPartialMatch,
+  };
+}