diff --git a/src/App.tsx b/src/App.tsx
deleted file mode 100644
index 1a6f099..0000000
--- a/src/App.tsx
+++ /dev/null
@@ -1,290 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import './App.css';
-import Dimension from './Dimension';
-
-type DimProps = {
- antimatter: number;
- dimCount: number;
- setDimCount: (fn: (dim: number) => void) => void;
- setAntimatter: (fn: ((antimatter: number) => void) | number) => void;
- price: number;
-};
-
-function App() {
- // tried to load the object data with the first opening of the page and then assign it to all the state but this was not sucessful. Loading ervery prop this way is very slow. CUrrently I do not know how to get the load data
-
- // the 2. thing I did not know how to do was the Buy max button. A while loop crashed the browser :( UPDATE: now it works with a recursion. are there better ways
- const dataRef = useRef(() => JSON.parse(localStorage.getItem('data')) ?? {});
- const canIstillBuyRef = useRef(0);
- const timerExpiredCallback = useRef(() => {});
- const clockSpeedRef = useRef(2000);
- const timerIdRef = useRef(-1);
- const idRef = useRef(-1);
- const timeIdRef = useRef(-1);
-
- // const dataRef = useRef({});
- const [tickspeedPrice, setTickspeedPrice] = useState(10);
- const [antimatter, setAntimatter] = useState(1000);
- const [resetGameCounter, setResetGameCounter] = useState(2);
- const [galaxyCounter, setGalaxyCounter] = useState(0);
- const [highesDim, setHighesDim] = useState(0);
-
- const [firstDimFactor, setFirstDimFactor] = useState(1.1);
- const [firstDimCount, setFirstDimCount] = useState(0);
- const [firstDimPrice, setFirstDimPrice] = useState(10);
- const [firstDimFactorCount, setFirstDimFactorCount] = useState(0);
-
- const [secondDimFactor, setSecondDimFactor] = useState(1.1);
- const [secondDimCount, setSecondDimCount] = useState(0);
- const [secondDimPrice, setSecondDimPrice] = useState(100);
- const [secondDimFactorCount, setSecondDimFactorCount] = useState(0);
-
- const [thirdDimFactor, setThirdDimFactor] = useState(1.1);
- const [thirdDimCount, setThirdDimCount] = useState(0);
- const [thirdDimPrice, setThirdDimPrice] = useState(1000);
- const [thirdDimFactorCount, setThirdDimFactorCount] = useState(0);
- // if the component updates, replace the timeout callback with one that references the new
- // values of `count` and `firstDimCount`
-
- timerExpiredCallback.current = () => {
- setAntimatter(prevAntimatter => prevAntimatter + firstDimCount * firstDimFactor);
- setFirstDimCount(prevFirstDim => prevFirstDim + (secondDimCount / 10) * secondDimFactor);
- setSecondDimCount(prevSecondDim => prevSecondDim + (thirdDimCount / 100) * thirdDimFactor);
- };
-
- useEffect(() => {
- const startTimer = () => {
- timerIdRef.current = setTimeout(() => {
- timerExpiredCallback.current();
- startTimer();
- }, clockSpeedRef.current);
- };
- startTimer();
-
- // if we ever unmount / destroy this component instance, clear the timeout
- return () => clearTimeout(timerIdRef.current);
- }, []);
-
- //-------------------------------------------
- // FROM HERE
-
- const handleTickBtnClick = () => {
- clockSpeedRef.current = clockSpeedRef.current * (1 - 0.11);
- setAntimatter(prevPrice => prevPrice - tickspeedPrice);
- setTickspeedPrice(prevPrice => prevPrice * 10);
- };
-
- useEffect(() => {
- canIstillBuyRef.current = antimatter - tickspeedPrice;
- }, [tickspeedPrice]);
-
- /* ref is needed to get the current state */
- const canIstillBuy = () => {
- if (canIstillBuyRef.current > 0) return true;
- else return false;
- };
-
- /* It works but I do not know if there are better ways */
- const handleBuyMaxClick = () => {
- const repeatMax = () => {
- timeIdRef.current = setTimeout(() => {
- if (canIstillBuy()) {
- console.log(canIstillBuy(), canIstillBuyRef.current, tickspeedPrice);
- handleTickBtnClick();
- repeatMax();
- }
- }, 20);
-
- return () => clearTimeout(timeIdRef.current);
- };
- repeatMax();
- };
-
- // creates constantly an uptodate object which is then saved later
- useEffect(() => {
- dataRef.current = {
- // ...dataRef.current,
- antimatter,
- tickspeedPrice,
- firstDimCount,
- firstDimFactor,
- firstDimPrice,
- firstDimFactorCount,
- secondDimCount,
- secondDimFactor,
- secondDimPrice,
- secondDimFactorCount,
- thirdDimCount,
- thirdDimFactor,
- thirdDimPrice,
- thirdDimFactorCount,
- resetGameCounter,
- highesDim,
- timerIdRef,
- idRef,
- clockSpeedRef,
- };
- //console.log('dataRef object update cycle: ', dataRef.current ?? '');
- });
-
- // saves the created object every minuit to localStorage
- useEffect(() => {
- const startSave = () => {
- timerIdRef.current = setTimeout(() => {
- //localStorage.removeItem('dataRef');
- localStorage.setItem('data', JSON.stringify(dataRef.current));
- console.log('data save cycle: ', dataRef.current);
- startSave();
- }, 60000);
- };
- startSave();
-
- // if we ever unmount / destroy this component instance, clear the timeout
- return () => clearTimeout(timerIdRef.current);
- }, []);
-
- // this prints the saved object from local storage. It is just for dev. No final purpose
- useEffect(() => {
- const printStorage = () => {
- idRef.current = setTimeout(() => {
- let savedDataRef = JSON.parse(localStorage.getItem('data') ?? '');
- console.log('dataRef from storage', savedDataRef);
- printStorage();
- }, 60000);
- };
- printStorage();
-
- return () => clearTimeout(idRef.current);
- }, []);
-
- /* resets the game to unlock new dimension */
- const handleResetGameClick = () => {
- clockSpeedRef.current = 2000;
- timerIdRef.current = -1;
- idRef.current = -1;
-
- setTickspeedPrice(10);
- setAntimatter(1000);
-
- setFirstDimFactor(1.1);
- setFirstDimCount(0);
- setFirstDimPrice(10);
- setFirstDimFactorCount(0);
-
- setSecondDimFactor(1.1);
- setSecondDimCount(0);
- setSecondDimPrice(100);
- setSecondDimFactorCount(0);
-
- setThirdDimFactor(1.1);
- setThirdDimCount(0);
- setThirdDimPrice(1000);
- setThirdDimFactorCount(0);
-
- // increase ResetCounter by one
- setResetGameCounter(prev => prev + 1);
- };
- /* saves the current DimCount of the highes Dim */
- useEffect(() => {
- /* higher dims have to be added when created */
- if (thirdDimCount !== 0) setHighesDim(thirdDimCount);
- else setHighesDim(secondDimCount);
- }, [secondDimCount, thirdDimCount]);
-
- //---------------------------------------------------
-
- return (
-
-
-
- You have {antimatter % 1 === 0 ? antimatter.toFixed(0) : antimatter.toFixed(1)}{' '}
- antimatters.
-
-
-
-
-
{`The current clockspeed is ${clockSpeedRef.current.toFixed(
- 0
- )} ms. Reduce the tickspeed by 11%.`}
-
-
-
-
-
-
-
- {`First Dimension Cost: ${firstDimPrice}`}
-
-
-
- {`Second Dimension Cost: ${secondDimPrice}`}
-
- {/* the 3. dimension must be unlocked */}
- {resetGameCounter > 2 && (
-
- {`Third Dimension Cost: ${thirdDimPrice}`}
-
-
- /* Here have to come all the other dims */
- )}
-
-
-
-
{`Dimension Shift (${resetGameCounter}) `}
-
{`requires 20 ${resetGameCounter}. Dimension `}
-
-
-
-
{`Antimatter Galaxies (${galaxyCounter})`}
-
{`requires 80 8. Dimension `}
-
-
-
-
-
- {`${ props.children.split(" ").slice(0,2).join(" ")} x${factor}`}
-
-
- {` ${dimCount % 1 === 0 ? dimCount.toFixed(0) : dimCount.toFixed(1)}
- (${dimFactorCount})
-
- `}
-
-
-
-
-
- );
-}
diff --git a/src/backup.ts b/src/backup.ts
deleted file mode 100644
index 7d26cd3..0000000
--- a/src/backup.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-const data = {
- timerId,
- toSaveId,
- clockSpeedRef,
- tickspeedPrice,
- antimatter,
- firstDimCount,
- firstDimFactor,
- firstDimPrice,
- firstDimFactorCount,
- secondDimCount,
- secondDimFactor,
- secondDimPrice,
- secondDimFactorCount,
- thirdDimCount,
- thirdDimFactor,
- thirdDimPrice,
- thirdDimFactorCount,
-};
-const canIstillBuy = () => {
- if (canIstillBuyRef.current > 0) true
- else false
-}
\ No newline at end of file
diff --git a/src/common/GameStateInterface.ts b/src/common/GameStateInterface.ts
new file mode 100644
index 0000000..a14c3c7
--- /dev/null
+++ b/src/common/GameStateInterface.ts
@@ -0,0 +1,25 @@
+import { Children } from 'react';
+export interface GameState {
+ antimatter: number;
+ tickspeedPrice: number;
+ tickspeedDeceaseRate: number,
+ resetGameCounter: number;
+ galaxyCounter: number;
+ lastSavedTime: number;
+ dims: Dim[];
+}
+
+export interface Dim {
+ nthDim: number;
+ dimFactor: number;
+ dimCount: number;
+ dimPrice: number;
+ dimFactorCount: number;
+}
+
+export type DimProps = {
+ nthDim: number;
+ gs: GameState;
+ setGameState: (fn: (gameState: GameState) => void) => void;
+ children: string;
+};
diff --git a/src/common/initialGameState.ts b/src/common/initialGameState.ts
new file mode 100644
index 0000000..b70445c
--- /dev/null
+++ b/src/common/initialGameState.ts
@@ -0,0 +1,77 @@
+import { GameState } from './GameStateInterface';
+
+let initialGameState: GameState = {
+ antimatter: 1000,
+ tickspeedPrice: 10,
+ tickspeedDeceaseRate: 0.11,
+ resetGameCounter: 2,
+ galaxyCounter: 0,
+ lastSavedTime: 0,
+ dims: [
+ {
+ nthDim: 0,
+ dimFactor: 1.1,
+ dimCount: 0,
+ dimPrice: 10,
+ dimFactorCount: 0,
+ },
+ {
+ nthDim: 1,
+ dimFactor: 1.1,
+ dimCount: 20,
+ dimPrice: 100,
+ dimFactorCount: 0,
+ },
+ {
+ nthDim: 2,
+ dimFactor: 1.1,
+ dimCount: 20,
+ dimPrice: 1000,
+ dimFactorCount: 0,
+ },
+ {
+ nthDim: 3,
+ dimFactor: 1.1,
+ dimCount: 20,
+ dimPrice: 10000,
+ dimFactorCount: 0,
+ },
+ {
+ nthDim: 4,
+ dimFactor: 1.1,
+ dimCount: 20,
+ dimPrice: 100000,
+ dimFactorCount: 0,
+ },
+ {
+ nthDim: 5,
+ dimFactor: 1.1,
+ dimCount: 20,
+ dimPrice: 1000000,
+ dimFactorCount: 0,
+ },
+ {
+ nthDim: 6,
+ dimFactor: 1.1,
+ dimCount: 20,
+ dimPrice: 10000000,
+ dimFactorCount: 0,
+ },
+ {
+ nthDim: 7,
+ dimFactor: 1.1,
+ dimCount: 20,
+ dimPrice: 100000000,
+ dimFactorCount: 0,
+ },
+ {
+ nthDim: 8,
+ dimFactor: 1.1,
+ dimCount: 20,
+ dimPrice: 1000000000,
+ dimFactorCount: 0,
+ },
+ ],
+};
+
+export default JSON.stringify(initialGameState);
diff --git a/src/components/App.tsx b/src/components/App.tsx
new file mode 100644
index 0000000..f44f9e2
--- /dev/null
+++ b/src/components/App.tsx
@@ -0,0 +1,110 @@
+import { useState, useEffect, useRef } 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 initialGameState from '../common/initialGameState';
+import DisplayAntimatter from './DisplayAntimatter';
+import { useSaveToLocalStorage } from './useSaveToLocalStorage';
+
+function App() {
+ const [gameState, setGameState] = useState(() =>
+ JSON.parse(localStorage.getItem('data') || initialGameState)
+ );
+ /* JSON.parse(localStorage.getItem('data')) */
+ const timerExpiredCallback = useRef(() => {});
+ const clockSpeedRef = useRef(2000);
+ const timerIdRef = useRef(-1);
+ useSaveToLocalStorage(gameState, setGameState);
+
+ 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),
+ };
+ }),
+ }));
+ };
+
+ useEffect(() => {
+ const startTimer = () => {
+ timerIdRef.current = setTimeout(() => {
+ timerExpiredCallback.current();
+ startTimer();
+ }, clockSpeedRef.current);
+ };
+ startTimer();
+
+ // if we ever unmount / destroy this component instance, clear the timeout
+ return () => clearTimeout(timerIdRef.current);
+ }, []);
+
+ return (
+
+
+
+
+
+
+ {`First Dimension Cost: ${gameState.dims[0].dimPrice}`}
+
+
+
+ {`Second Dimension Cost: ${gameState.dims[1].dimPrice}`}
+
+ {
+ //the 3. dimension must be unlocked
+ }
+ {gameState.resetGameCounter > 2 && (
+
+ {`Third Dimension Cost: ${gameState.dims[2].dimPrice}`}
+
+ )}
+ {gameState.resetGameCounter > 3 && (
+
+ {`Forth Dimension Cost: ${gameState.dims[2].dimPrice}`}
+
+ )}
+ {gameState.resetGameCounter > 4 && (
+
+ {`Fifth Dimension Cost: ${gameState.dims[2].dimPrice}`}
+
+ )}
+ {gameState.resetGameCounter > 5 && (
+
+ {`Sixth Dimension Cost: ${gameState.dims[2].dimPrice}`}
+
+ )}
+ {gameState.resetGameCounter > 6 && (
+
+ {`Seventh Dimension Cost: ${gameState.dims[2].dimPrice}`}
+
+ )}
+ {gameState.resetGameCounter > 7 && (
+
+ {`Eight Dimension Cost: ${gameState.dims[2].dimPrice}`}
+
+ )}
+
+
+
+
+
+
+ );
+}
+
+export default App;
diff --git a/src/components/Dimension.tsx b/src/components/Dimension.tsx
new file mode 100644
index 0000000..e06022d
--- /dev/null
+++ b/src/components/Dimension.tsx
@@ -0,0 +1,87 @@
+import { GameState, DimProps, Dim } from '../common/GameStateInterface';
+
+export default function Dimension(props: DimProps) {
+ const { nthDim, gs, setGameState } = 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,
+ };
+ }),
+ }));
+ }
+ 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,
+ };
+ }),
+ }));
+ }
+ };
+
+ return (
+ <>
+
+
+
+ {`${props.children.split(' ').slice(0, 2).join(' ')} x${
+ gs.dims[nthDim].dimFactor
+ }`}
+
+
+ {` ${
+ gs.dims[nthDim].dimCount % 1 === 0
+ ? gs.dims[nthDim].dimCount.toFixed(0)
+ : gs.dims[nthDim].dimCount.toFixed(1)
+ }
+ (${gs.dims[nthDim].dimFactorCount})
+
+ `}
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/DisplayAntimatter.tsx b/src/components/DisplayAntimatter.tsx
new file mode 100644
index 0000000..4e4c685
--- /dev/null
+++ b/src/components/DisplayAntimatter.tsx
@@ -0,0 +1,17 @@
+import { GameState } from '../common/GameStateInterface';
+
+export default function DisplayAntimatter(props: { gameState: GameState }) {
+ const { gameState } = props;
+
+ return (
+
+
+ You have{' '}
+ {gameState.antimatter % 1 === 0
+ ? gameState.antimatter.toFixed(0)
+ : gameState.antimatter.toFixed(1)}{' '}
+ antimatters.
+
+
+
{`Dimension Shift (${gameState.resetGameCounter}) `}
+
{`requires 20 ${gameState.resetGameCounter}. Dimension `}
+
+
+
{`Antimatter Galaxies (${gameState.galaxyCounter})`}
+
{`requires 80 8. Dimension `}
+
+
+
{`reset game`}
+
{`resets everything`}
+
+
+
{`The current clockspeed is ${clockSpeedRef.current.toFixed(
+ 0
+ )} ms. Reduce the tickspeed by ${gameState.tickspeedDeceaseRate * 100}%.`}
+
+
+
+
+