fix: Add zustand to persist stats

#9

package.json

@@ -16,7 +16,8 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "^5.0.1",
-    "sass": "^1.44.0"
+    "sass": "^1.44.0",
+    "zustand": "^4.3.8"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -47,19 +48,19 @@
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/npm": "^10.0.4",
+    "@testing-library/jest-dom": "^5.15.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "@types/jest": "^26.0.24",
     "concurrently": "^6.4.0",
     "cross-env": "^7.0.3",
     "electron": "^25.2.0",
     "electron-builder": "^24.4.0",
     "electron-devtools-installer": "^3.2.0",
     "electronmon": "^2.0.2",
     "semantic-release": "^21.0.5",
-    "wait-on": "^6.0.0",
-    "@testing-library/jest-dom": "^5.15.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "@types/jest": "^26.0.24",
-    "typescript": "^4.5.2"
+    "typescript": "^4.5.2",
+    "wait-on": "^6.0.0"
   },
   "build": {
     "appId": "com.devklick.BasicBlackjack",

src/components/InfoHud/hooks/useGameStats.tsx

@@ -1,35 +1,27 @@
 import { Participant } from "../../Table/hooks/useGame";
-import useParticipantStats from "./useParticipantStats";
+import { useGameStatsStore } from "../stores/gameStatsStore";
 
 function useGameStats() {
-  const playerStats = useParticipantStats();
-  const dealerStats = useParticipantStats();
+  const statsStore = useGameStatsStore();
 
   /**
    * Updates the specified participants stats,
    * incrementing the number of games they have won by 1.
    * @param winner The winning participant
    */
   function updateWinnerStats(winner: Participant) {
-    switch (winner) {
-      case "Dealer":
-        dealerStats.incrementWins();
-        break;
-      case "Player":
-        playerStats.incrementWins();
-        break;
-    }
+    statsStore.incrementWins(winner);
   }
 
   return {
     /**
      * The number of games the player has won during this session
      */
-    playerWins: playerStats.wins,
+    playerWins: statsStore.playerWins,
     /**
      * The number of games the dealer has won during this session.
      */
-    dealerWins: dealerStats.wins,
+    dealerWins: statsStore.dealerWins,
     updateWinnerStats,
   };
 }

src/components/InfoHud/stores/gameStatsStore.ts

@@ -0,0 +1,36 @@
+import { create } from "zustand";
+import { persist, devtools } from "zustand/middleware";
+import { Participant } from "../../Table/hooks/useGame";
+
+export interface GameStatsStoreState {
+  playerWins: number;
+  dealerWins: number;
+  incrementWins: (participant: Participant) => void;
+}
+
+export const useGameStatsStore = create<GameStatsStoreState>()(
+  devtools(
+    persist(
+      (set, get) => ({
+        dealerWins: 0,
+        playerWins: 0,
+        incrementWins: (participant) => {
+          let dealerWins = get().dealerWins;
+          let playerWins = get().playerWins;
+          switch (participant) {
+            case "Dealer":
+              dealerWins++;
+              break;
+            case "Player":
+              playerWins++;
+              break;
+          }
+          set({ dealerWins, playerWins });
+        },
+      }),
+      {
+        name: "gameStats",
+      }
+    )
+  )
+);