Use reducer

package.json

@@ -9,6 +9,7 @@
     "test": "vitest"
   },
   "dependencies": {
+    "clsx": "^1.2.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

src/common/GameStateInterface.ts

@@ -2,10 +2,11 @@ import { Children } from 'react';
 export interface GameState {
    antimatter: number;
    tickspeedPrice: number;
-   tickspeedDeceaseRate: number,
+   tickspeedDeceaseRate: number;
    resetGameCounter: number;
    galaxyCounter: number;
    lastSavedTime: number;
+   showGameSavedNotification: boolean;
    dims: Dim[];
 }
 
@@ -20,6 +21,6 @@ export interface Dim {
 export type DimProps = {
    nthDim: number;
    gs: GameState;
-   setGameState: (fn: (gameState: GameState) => void) => void;
+   dispatch: Function;
    children: string;
 };

src/common/initialGameState.ts

@@ -6,7 +6,8 @@ let initialGameState: GameState = {
    tickspeedDeceaseRate: 0.11,
    resetGameCounter: 2,
    galaxyCounter: 0,
-   lastSavedTime: 0,
+   lastSavedTime: Date.now(),
+   showGameSavedNotification: false,
    dims: [
       {
          nthDim: 0,

src/common/reducer.tsx

@@ -0,0 +1,122 @@
+import { Dim, GameState } from './GameStateInterface';
+import initialGameState from './initialGameState';
+
+export const ACTIONS = {
+   TIMER_CALLBACK: 'TIMER_CALLBACK',
+   UPDATE_DIM: 'UPDATE_DIM',
+   UPDATE_10TH_DIM: 'UPDATE_10TH_DIM',
+   UPDATE_TICKSPEED_ONCE: 'UPDATE_TICKSPEED_ONCE',
+   UPDATE_TICKSPEED_MAX: 'UPDATE_TICKSPEED_MAX',
+   RESET_TO_UNLOCK_DIM: 'RESET_TO_UNLOCK_DIM',
+   RESET_TO_UNLOCK_TICKSPEED: 'RESET_TO_UNLOCK_TICKSPEED',
+   RESET_TO_INITIAL_VALUES: 'RESET_TO_INITIAL_VALUES',
+   POP_UP: 'POP_UP',
+   SAVE_DATA: 'SAVE_DATA',
+   TOOGLE_GAME_NOTIFICATION_OPEN: 'TOOGLE_GAME_NOTIFICATION_OPEN',
+   TOOGLE_GAME_NOTIFICATION_CLOSE: 'TOOGLE_GAME_NOTIFICATION_CLOSE',
+};
+
+export function reducer(state: GameState, action: { type: string; payload?: any }) {
+   switch (action.type) {
+      case ACTIONS.TIMER_CALLBACK:
+         return {
+            ...state,
+            antimatter: state.antimatter + state.dims[0].dimCount * state.dims[0].dimFactor,
+            dims: state.dims.map((dim: Dim, index: number) => {
+               return {
+                  ...dim,
+                  dimCount:
+                     dim.dimCount +
+                     ((state.dims[index + 1]?.dimCount ?? 0) *
+                        (state.dims[index + 1]?.dimFactor ?? 0)) /
+                        Math.pow(10, index + 1),
+               };
+            }),
+         };
+
+      case ACTIONS.UPDATE_DIM:
+         return {
+            ...state,
+            antimatter:
+               state.antimatter -
+               state.dims[action.payload.nthDim].dimPrice * action.payload.quantity,
+            dims: state.dims.map((dim: Dim) => {
+               if (dim.nthDim !== action.payload.nthDim) return dim;
+               return {
+                  ...dim,
+                  dimCount: dim.dimCount + action.payload.quantity,
+                  dimFactorCount: dim.dimFactorCount + action.payload.quantity,
+               };
+            }),
+         };
+
+      case ACTIONS.UPDATE_10TH_DIM:
+         return {
+            ...state,
+            dims: state.dims.map((dim: Dim) => {
+               if (dim.nthDim !== action.payload.nthDim) return dim;
+               return {
+                  ...dim,
+                  dimPrice: dim.dimPrice * 10,
+                  dimFactor: dim.dimFactor * 2,
+                  dimFactorCount: 0,
+               };
+            }),
+         };
+
+      case ACTIONS.UPDATE_TICKSPEED_ONCE:
+         return {
+            ...state,
+            antimatter: state.antimatter - state.tickspeedPrice,
+            tickspeedPrice: state.tickspeedPrice * 10,
+         };
+      case ACTIONS.UPDATE_TICKSPEED_MAX:
+         return {
+            ...state,
+            antimatter: state.antimatter - action.payload.purchasePrice,
+            tickspeedPrice: state.tickspeedPrice * 10 ** action.payload.maxPurchaseQtys,
+         };
+
+      case ACTIONS.RESET_TO_UNLOCK_DIM:
+         return {
+            ...JSON.parse(initialGameState),
+            galaxyCounter: state.galaxyCounter,
+            tickspeedDeceaseRate: state.tickspeedDeceaseRate,
+            resetGameCounter: state.resetGameCounter + 1,
+            lastSavedTime: state.lastSavedTime,
+         };
+
+      case ACTIONS.RESET_TO_UNLOCK_TICKSPEED:
+         return {
+            ...JSON.parse(initialGameState),
+            galaxyCounter: state.galaxyCounter + 1,
+            tickspeedDeceaseRate: state.tickspeedDeceaseRate * 1.1,
+            lastSavedTime: state.lastSavedTime,
+         };
+
+      case ACTIONS.RESET_TO_INITIAL_VALUES:
+         return JSON.parse(initialGameState);
+
+      case ACTIONS.SAVE_DATA:
+         return {
+            ...state,
+            lastSavedTime: Date.now(),
+         };
+
+      case ACTIONS.TOOGLE_GAME_NOTIFICATION_CLOSE: {
+         return {
+            ...state,
+            showGameSavedNotification: false,
+         };
+      }
+      case ACTIONS.TOOGLE_GAME_NOTIFICATION_OPEN: {
+         return {
+            ...state,
+            showGameSavedNotification: true,
+         };
+      }
+
+      default:
+         return state;
+   }
+}

src/components/App.tsx

@@ -1,47 +1,33 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useReducer } from 'react';
 import '../styles/App.css';
-import Dimension from './Dimension';
-import GameResets from './GameResets';
-import Tickspeed from './TickSpeed';
-
-import { GameState, Dim } from '../common/GameStateInterface';
+import Dimension from './Dimention/Dimension';
+import GameResets from './GameResetBtns/GameResets';
+import Tickspeed from './Tickspeed/TickSpeed';
+import DisplayAntimatter from './DisplayAntimatter/DisplayAntimatter';
 import initialGameState from '../common/initialGameState';
-import DisplayAntimatter from './DisplayAntimatter';
-import { useSaveToLocalStorage } from './useSaveToLocalStorage';
+
+import { useLocalStorage } from '../customeHooks/useLocalStorage';
+import { ACTIONS, reducer } from '../common/reducer';
+import GameSavedNotification from './GameSavedNotification/GameSavedNotification';
 
 function App() {
-   const [gameState, setGameState] = useState(() =>
+   const [state, dispatch] = useReducer(
+      reducer,
       JSON.parse(localStorage.getItem('data') || initialGameState)
    );
-   /*  JSON.parse(localStorage.getItem('data')) */
    const timerExpiredCallback = useRef(() => {});
-   const clockSpeedRef = useRef(2000);
+   const tickspeedRef = useRef(2000);
    const timerIdRef = useRef(-1);
-   useSaveToLocalStorage(gameState, setGameState);
+   useLocalStorage(state, dispatch);
 
-   timerExpiredCallback.current = () => {
-      setGameState((prevGS: GameState) => ({
-         ...prevGS,
-         antimatter: prevGS.antimatter + prevGS.dims[0].dimCount * prevGS.dims[0].dimFactor,
-         dims: gameState.dims.map((dim: Dim, index: number) => {
-            return {
-               ...dim,
-               dimCount:
-                  dim.dimCount +
-                  ((gameState.dims[index + 1]?.dimCount ?? 0) *
-                     (gameState.dims[index + 1]?.dimFactor ?? 0)) /
-                     Math.pow(10, index + 1),
-            };
-         }),
-      }));
-   };
+   timerExpiredCallback.current = () => dispatch({ type: ACTIONS.TIMER_CALLBACK });
 
    useEffect(() => {
       const startTimer = () => {
-         timerIdRef.current = setTimeout(() => {
+         timerIdRef.current = window.setTimeout(() => {
             timerExpiredCallback.current();
             startTimer();
-         }, clockSpeedRef.current);
+         }, tickspeedRef.current);
       };
       startTimer();
 
@@ -51,60 +37,65 @@ function App() {
 
    return (
       <div className='App'>
-         <DisplayAntimatter gameState={gameState} />
+         <DisplayAntimatter gameState={state} />
+
+         <GameSavedNotification gs={state} dispatch={dispatch} />
 
          <Tickspeed
-            gameState={gameState}
-            setGameState={setGameState}
-            clockSpeedRef={clockSpeedRef}></Tickspeed>
+            gs={state} // gs = gamestate
+            dispatch={dispatch}
+            tickspeedRef={tickspeedRef}></Tickspeed>
 
-         <Dimension nthDim={0} gs={gameState} setGameState={setGameState}>
-            {`First Dimension Cost: ${gameState.dims[0].dimPrice}`}
+         <Dimension nthDim={0} gs={state} dispatch={dispatch}>
+            {`First Dimension Cost: ${state.dims[0].dimPrice}`}
          </Dimension>
 
-         <Dimension nthDim={1} gs={gameState} setGameState={setGameState}>
-            {`Second Dimension Cost: ${gameState.dims[1].dimPrice}`}
+         <Dimension nthDim={1} gs={state} dispatch={dispatch}>
+            {`Second Dimension Cost: ${state.dims[1].dimPrice}`}
          </Dimension>
          {
             //the 3. dimension must be unlocked
          }
-         {gameState.resetGameCounter > 2 && (
-            <Dimension nthDim={2} gs={gameState} setGameState={setGameState}>
-               {`Third Dimension Cost: ${gameState.dims[2].dimPrice}`}
+         {state.resetGameCounter > 2 && (
+            <Dimension nthDim={2} gs={state} dispatch={dispatch}>
+               {`Third Dimension Cost: ${state.dims[2].dimPrice}`}
             </Dimension>
          )}
-         {gameState.resetGameCounter > 3 && (
-            <Dimension nthDim={3} gs={gameState} setGameState={setGameState}>
-               {`Forth Dimension Cost: ${gameState.dims[2].dimPrice}`}
+         {state.resetGameCounter > 3 && (
+            <Dimension nthDim={3} gs={state} dispatch={dispatch}>
+               {`Forth Dimension Cost: ${state.dims[2].dimPrice}`}
             </Dimension>
          )}
-         {gameState.resetGameCounter > 4 && (
-            <Dimension nthDim={4} gs={gameState} setGameState={setGameState}>
-               {`Fifth Dimension Cost: ${gameState.dims[2].dimPrice}`}
+         {state.resetGameCounter > 4 && (
+            <Dimension nthDim={4} gs={state} dispatch={dispatch}>
+               {`Fifth Dimension Cost: ${state.dims[2].dimPrice}`}
             </Dimension>
          )}
-         {gameState.resetGameCounter > 5 && (
-            <Dimension nthDim={5} gs={gameState} setGameState={setGameState}>
-               {`Sixth Dimension Cost: ${gameState.dims[2].dimPrice}`}
+         {state.resetGameCounter > 5 && (
+            <Dimension nthDim={5} gs={state} dispatch={dispatch}>
+               {`Sixth Dimension Cost: ${state.dims[2].dimPrice}`}
             </Dimension>
          )}
-         {gameState.resetGameCounter > 6 && (
-            <Dimension nthDim={6} gs={gameState} setGameState={setGameState}>
-               {`Seventh Dimension Cost: ${gameState.dims[2].dimPrice}`}
+         {state.resetGameCounter > 6 && (
+            <Dimension nthDim={6} gs={state} dispatch={dispatch}>
+               {`Seventh Dimension Cost: ${state.dims[2].dimPrice}`}
             </Dimension>
          )}
-         {gameState.resetGameCounter > 7 && (
-            <Dimension nthDim={8} gs={gameState} setGameState={setGameState}>
-               {`Eight Dimension Cost: ${gameState.dims[2].dimPrice}`}
+         {state.resetGameCounter > 7 && (
+            <Dimension nthDim={8} gs={state} dispatch={dispatch}>
+               {`Eight Dimension Cost: ${state.dims[2].dimPrice}`}
             </Dimension>
          )}
-         
+
          <hr />
          <br />
 
-         <GameResets gameState={gameState} setGameState={setGameState}></GameResets>
+         <GameResets gs={state} dispatch={dispatch}></GameResets>
       </div>
    );
 }
 
 export default App;
+function clsx(arg0: any) {
+   throw new Error('Function not implemented.');
+}

src/components/Dimension.tsx → src/components/Dimention/Dimension.tsx

@@ -1,49 +1,21 @@
-import { GameState, DimProps, Dim } from '../common/GameStateInterface';
+import { DimProps } from '../../common/GameStateInterface';
+import { ACTIONS } from '../../common/reducer';
 
 export default function Dimension(props: DimProps) {
-   const { nthDim, gs, setGameState } = props;
+   const { nthDim, gs, dispatch } = props;
 
    const handleDimBuy = (quantity: number) => {
-      const newDim = [gs.dims[nthDim].dimCount + quantity];
-
       if (gs.antimatter >= gs.dims[nthDim].dimPrice) {
-         /*    
-         setDimCount(dimCount => dimCount + quantity);
-         setAntimatter(prevValue => prevValue - price * quantity);
-         setDimFactorCount(prevCount => prevCount + 1); */
-         setGameState((prevGS: GameState) => ({
-            ...prevGS,
-            antimatter: prevGS.antimatter - prevGS.dims[nthDim].dimPrice * quantity,
-            dims: prevGS.dims.map((dim: Dim, index: number) => {
-               if (dim.nthDim !== nthDim) return dim;
-               return {
-                  ...dim,
-                  dimCount: dim.dimCount + quantity,
-                  dimFactorCount: dim.dimFactorCount + quantity,
-               };
-            }),
-         }));
+         dispatch({ type: ACTIONS.UPDATE_DIM, payload: { nthDim: nthDim, quantity: quantity } });
       }
       if (
          ((gs.dims[nthDim].dimCount + 1) % 10 === 0 && gs.dims[nthDim].dimCount > 1) ||
          quantity === 10
       ) {
-         /*          
-         setPrice(prevPrice => prevPrice * 10);
-         setFactor(prevFactor => prevFactor * 2)
-         setDimFactorCount(0) */
-         setGameState((prevGS: GameState) => ({
-            ...prevGS,
-            dims: prevGS.dims.map((dim: Dim, index: number) => {
-               if (dim.nthDim !== nthDim) return dim;
-               return {
-                  ...dim,
-                  dimPrice: dim.dimPrice * 10,
-                  dimFactor: dim.dimFactor * 2,
-                  dimFactorCount: 0,
-               };
-            }),
-         }));
+         dispatch({
+            type: ACTIONS.UPDATE_10TH_DIM,
+            payload: { nthDim: nthDim, quantity: quantity },
+         });
       }
    };
 

src/components/DisplayAntimatter.tsx → src/components/DisplayAntimatter/DisplayAntimatter.tsx

@@ -1,4 +1,4 @@
-import { GameState } from '../common/GameStateInterface';
+import { GameState } from '../../common/GameStateInterface';
 
 export default function DisplayAntimatter(props: { gameState: GameState }) {
    const { gameState } = props;