From bc96b8a005f7fc7b3f23ff80ebb3070716d2a9c9 Mon Sep 17 00:00:00 2001 From: Michael Urich <80188367+mturich@users.noreply.github.com> Date: Tue, 5 Jul 2022 20:41:50 +0200 Subject: [PATCH 01/16] indroduced gameState --- src/App.tsx | 27 +++++++++++++++++++-------- src/initialGameState.js | 33 +++++++++++++++++++++++++++++++++ 2 files changed, 52 insertions(+), 8 deletions(-) create mode 100644 src/initialGameState.js diff --git a/src/App.tsx b/src/App.tsx index 1a6f099..0b97958 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,7 @@ import { useState, useEffect, useRef } from 'react'; import './App.css'; import Dimension from './Dimension'; +import initialGameState from './initialGameState.js'; type DimProps = { antimatter: number; @@ -12,7 +13,7 @@ type DimProps = { 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 - + const [gameState, setGameState] = useState(() => JSON.parse(initialGameState)); // 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); @@ -46,12 +47,22 @@ function App() { // if the component updates, replace the timeout callback with one that references the new // values of `count` and `firstDimCount` - timerExpiredCallback.current = () => { + /* timerExpiredCallback.current = () => { setAntimatter(prevAntimatter => prevAntimatter + firstDimCount * firstDimFactor); setFirstDimCount(prevFirstDim => prevFirstDim + (secondDimCount / 10) * secondDimFactor); setSecondDimCount(prevSecondDim => prevSecondDim + (thirdDimCount / 100) * thirdDimFactor); + }; */ + timerExpiredCallback.current = () => { + setGameState((prevGameState: initialGameState) => ({ + ...prevGameState, + antimatter: gameState.antimatter + 5, + })); }; + useEffect(() => { + console.log( gameState ); + }); + useEffect(() => { const startTimer = () => { timerIdRef.current = setTimeout(() => { @@ -100,7 +111,7 @@ function App() { repeatMax(); }; - // creates constantly an uptodate object which is then saved later + /* // creates constantly an uptodate object which is then saved later useEffect(() => { dataRef.current = { // ...dataRef.current, @@ -132,10 +143,10 @@ function App() { const startSave = () => { timerIdRef.current = setTimeout(() => { //localStorage.removeItem('dataRef'); - localStorage.setItem('data', JSON.stringify(dataRef.current)); - console.log('data save cycle: ', dataRef.current); + localStorage.setItem('data', JSON.stringify(gameState)); + console.log('data save cycle: ', gameState); startSave(); - }, 60000); + }, 10000); }; startSave(); @@ -156,7 +167,7 @@ function App() { return () => clearTimeout(idRef.current); }, []); - + */ /* resets the game to unlock new dimension */ const handleResetGameClick = () => { clockSpeedRef.current = 2000; @@ -233,7 +244,7 @@ function App() { setFactor={setFirstDimFactor} dimFactorCount={firstDimFactorCount} setDimFactorCount={setFirstDimFactorCount}> - {`First Dimension Cost: ${firstDimPrice}`} + {`First Dimension Cost: ${gameState.firstDimPrice}`} Date: Tue, 5 Jul 2022 20:47:36 +0200 Subject: [PATCH 02/16] handleResetBtnClick updated to gameState --- src/App.tsx | 26 ++------------------------ src/initialGameState.js | 5 ++--- 2 files changed, 4 insertions(+), 27 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 0b97958..e3b9aa6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -170,31 +170,9 @@ function App() { */ /* 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); + setGameState(JSON.parse(initialGameState)) }; + /* saves the current DimCount of the highes Dim */ useEffect(() => { /* higher dims have to be added when created */ diff --git a/src/initialGameState.js b/src/initialGameState.js index 9274710..f711471 100644 --- a/src/initialGameState.js +++ b/src/initialGameState.js @@ -8,7 +8,6 @@ const initialGameState = { timeIdRef: -1, tickspeedPrice: 10, - resetGameCounter: 2, galaxyCounter: 0, highesDim: 0, @@ -18,7 +17,7 @@ const initialGameState = { firstDimPrice: 10, firstDimFactorCount: 0, - /* secondDimFactor: 1.1, + secondDimFactor: 1.1, secondDimCount: 0, secondDimPrice: 100, secondDimFactorCount: 0, @@ -27,7 +26,7 @@ const initialGameState = { thirdDimCount: 0, thirdDimPrice: 1000, thirdDimFactorCount: 0, - */ + }; export default JSON.stringify(initialGameState); From 0d1affc3d2963fd1814f28416c4a83c047704179 Mon Sep 17 00:00:00 2001 From: Michael Urich <80188367+mturich@users.noreply.github.com> Date: Tue, 5 Jul 2022 21:13:24 +0200 Subject: [PATCH 03/16] added an GameStateInterface --- src/App.tsx | 5 ++-- src/backup.ts | 23 --------------- src/common/GameStateInterface.ts | 29 +++++++++++++++++++ .../initialGameState.ts} | 10 +++++-- src/favicon.svg | 15 ---------- src/logo.svg | 7 ----- tsconfig.json | 2 +- 7 files changed, 40 insertions(+), 51 deletions(-) delete mode 100644 src/backup.ts create mode 100644 src/common/GameStateInterface.ts rename src/{initialGameState.js => common/initialGameState.ts} (76%) delete mode 100644 src/favicon.svg delete mode 100644 src/logo.svg diff --git a/src/App.tsx b/src/App.tsx index e3b9aa6..4f44389 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,8 @@ import { useState, useEffect, useRef } from 'react'; import './App.css'; import Dimension from './Dimension'; -import initialGameState from './initialGameState.js'; +import initialGameState from './common/initialGameState'; +import {GameStateInterface} from './common/GameStateInterface' type DimProps = { antimatter: number; @@ -53,7 +54,7 @@ function App() { setSecondDimCount(prevSecondDim => prevSecondDim + (thirdDimCount / 100) * thirdDimFactor); }; */ timerExpiredCallback.current = () => { - setGameState((prevGameState: initialGameState) => ({ + setGameState((prevGameState: GameStateInterface) => ({ ...prevGameState, antimatter: gameState.antimatter + 5, })); 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..f5ad0e0 --- /dev/null +++ b/src/common/GameStateInterface.ts @@ -0,0 +1,29 @@ +export interface GameStateInterface { + antimatter: number; + + canIstillBuyRef: number; + clockSpeedRef: number; + timerIdRef: number; + idRef: number; + timeIdRef: number; + + tickspeedPrice: number; + resetGameCounter: number; + galaxyCounter: number; + highesDim: number; + + firstDimFactor: number; + firstDimCount: number; + firstDimPrice: number; + firstDimFactorCount: number; + + secondDimFactor: number; + secondDimCount: number; + secondDimPrice: number; + secondDimFactorCount: number; + + thirdDimFactor: number; + thirdDimCount: number; + thirdDimPrice: number; + thirdDimFactorCount: number; +} diff --git a/src/initialGameState.js b/src/common/initialGameState.ts similarity index 76% rename from src/initialGameState.js rename to src/common/initialGameState.ts index f711471..388786f 100644 --- a/src/initialGameState.js +++ b/src/common/initialGameState.ts @@ -1,4 +1,7 @@ -const initialGameState = { +import {GameStateInterface} from './GameStateInterface' + + +let initialGameState:GameStateInterface = { antimatter: 1000, canIstillBuyRef: 0, @@ -27,6 +30,7 @@ const initialGameState = { thirdDimPrice: 1000, thirdDimFactorCount: 0, -}; +} + +export default JSON.stringify(initialGameState) -export default JSON.stringify(initialGameState); diff --git a/src/favicon.svg b/src/favicon.svg deleted file mode 100644 index de4aedd..0000000 --- a/src/favicon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 6b60c10..0000000 --- a/src/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/tsconfig.json b/tsconfig.json index 3d0a51a..ceadf44 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -16,6 +16,6 @@ "noEmit": true, "jsx": "react-jsx" }, - "include": ["src"], + "include": ["src","**/*.ts", "**/*.tsx"], "references": [{ "path": "./tsconfig.node.json" }] } From e46f76c2449923743fd161a6e1f179d8ee872ce9 Mon Sep 17 00:00:00 2001 From: Michael Urich <80188367+mturich@users.noreply.github.com> Date: Tue, 5 Jul 2022 21:34:05 +0200 Subject: [PATCH 04/16] changed timerExpireCallback to gameState logic --- src/App.tsx | 57 +++++++++++--------------------- src/common/GameStateInterface.ts | 4 +-- src/common/initialGameState.ts | 4 +-- 3 files changed, 24 insertions(+), 41 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 4f44389..c0fc400 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,12 +16,11 @@ 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 const [gameState, setGameState] = useState(() => JSON.parse(initialGameState)); // 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')) ?? {}); +/* 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({}); @@ -54,14 +53,16 @@ function App() { setSecondDimCount(prevSecondDim => prevSecondDim + (thirdDimCount / 100) * thirdDimFactor); }; */ timerExpiredCallback.current = () => { - setGameState((prevGameState: GameStateInterface) => ({ - ...prevGameState, - antimatter: gameState.antimatter + 5, + setGameState((prevGS: GameStateInterface) => ({ + ...prevGS, + antimatter: prevGS.antimatter + prevGS.firstDimCount * prevGS.firstDimFactor, + firstDimCount: prevGS.firstDimCount + prevGS.secondDimCount / 10 * prevGS.secondDimFactor, + secondDimCount: prevGS.secondDimCount + prevGS.thirdDimCount / 100 * prevGS.thirdDimFactor })); }; useEffect(() => { - console.log( gameState ); + console.log( gameState.antimatter ); }); useEffect(() => { @@ -82,8 +83,14 @@ function App() { const handleTickBtnClick = () => { clockSpeedRef.current = clockSpeedRef.current * (1 - 0.11); - setAntimatter(prevPrice => prevPrice - tickspeedPrice); - setTickspeedPrice(prevPrice => prevPrice * 10); + /* setAntimatter(prevPrice => prevPrice - tickspeedPrice); + setTickspeedPrice(prevPrice => prevPrice * 10); */ + setGameState((prevGS: GameStateInterface) => ({ + ...prevGS, + antimatter: prevGS.antimatter - prevGS.tickspeedPrice, + tickspeedPrice: prevGS.tickspeedPrice * 10, + + })) }; useEffect(() => { @@ -113,31 +120,6 @@ function App() { }; /* // 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(() => { @@ -169,6 +151,7 @@ function App() { return () => clearTimeout(idRef.current); }, []); */ + /* resets the game to unlock new dimension */ const handleResetGameClick = () => { setGameState(JSON.parse(initialGameState)) @@ -187,7 +170,7 @@ function App() {

- You have {antimatter % 1 === 0 ? antimatter.toFixed(0) : antimatter.toFixed(1)}{' '} + You have {gameState.antimatter % 1 === 0 ? gameState.antimatter.toFixed(0) : gameState.antimatter.toFixed(1)}{' '} antimatters.

@@ -200,13 +183,13 @@ function App() {
diff --git a/src/common/GameStateInterface.ts b/src/common/GameStateInterface.ts index f5ad0e0..6040797 100644 --- a/src/common/GameStateInterface.ts +++ b/src/common/GameStateInterface.ts @@ -1,11 +1,11 @@ export interface GameStateInterface { antimatter: number; - canIstillBuyRef: number; +/* canIstillBuyRef: number; clockSpeedRef: number; timerIdRef: number; idRef: number; - timeIdRef: number; + timeIdRef: number; */ tickspeedPrice: number; resetGameCounter: number; diff --git a/src/common/initialGameState.ts b/src/common/initialGameState.ts index 388786f..c0ddb41 100644 --- a/src/common/initialGameState.ts +++ b/src/common/initialGameState.ts @@ -4,11 +4,11 @@ import {GameStateInterface} from './GameStateInterface' let initialGameState:GameStateInterface = { antimatter: 1000, - canIstillBuyRef: 0, +/* canIstillBuyRef: 0, clockSpeedRef: 2000, timerIdRef: -1, idRef: -1, - timeIdRef: -1, + timeIdRef: -1, */ tickspeedPrice: 10, resetGameCounter: 2, From c70fa82b6a13479e5f88971e820da4126dc73243 Mon Sep 17 00:00:00 2001 From: Michael Urich <80188367+mturich@users.noreply.github.com> Date: Wed, 6 Jul 2022 22:53:32 +0200 Subject: [PATCH 05/16] three dimensions work are displayed. buttons not working currently --- src/App.tsx | 148 ++++++++++--------------------- src/Dimension.tsx | 60 ++++++------- src/common/GameStateInterface.ts | 41 ++++----- src/common/initialGameState.ts | 62 +++++++------ 4 files changed, 124 insertions(+), 187 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index c0fc400..95bd999 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,67 +2,42 @@ import { useState, useEffect, useRef } from 'react'; import './App.css'; import Dimension from './Dimension'; import initialGameState from './common/initialGameState'; -import {GameStateInterface} from './common/GameStateInterface' - -type DimProps = { - antimatter: number; - dimCount: number; - setDimCount: (fn: (dim: number) => void) => void; - setAntimatter: (fn: ((antimatter: number) => void) | number) => void; - price: number; -}; +import { GameState, Dim } from './common/GameStateInterface'; 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 const [gameState, setGameState] = useState(() => JSON.parse(initialGameState)); - // 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 -/* JSON.parse(localStorage.getItem('data')) */ + /* JSON.parse(localStorage.getItem('data')) */ const canIstillBuyRef = useRef(0); const timerExpiredCallback = useRef(() => {}); const clockSpeedRef = useRef(2000); const timerIdRef = 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); }; */ + + /* firstDimCount: + prevGS.firstDimCount + (prevGS.secondDimCount / 10) * prevGS.secondDimFactor, + secondDimCount: + prevGS.secondDimCount + (prevGS.thirdDimCount / 100) * prevGS.thirdDimFactor, */ timerExpiredCallback.current = () => { - setGameState((prevGS: GameStateInterface) => ({ + setGameState((prevGS: GameState) => ({ ...prevGS, - antimatter: prevGS.antimatter + prevGS.firstDimCount * prevGS.firstDimFactor, - firstDimCount: prevGS.firstDimCount + prevGS.secondDimCount / 10 * prevGS.secondDimFactor, - secondDimCount: prevGS.secondDimCount + prevGS.thirdDimCount / 100 * prevGS.thirdDimFactor + antimatter: prevGS.antimatter + prevGS.dims[0].dimCount * prevGS.dims[0].dimFactor, + /* dims: [ + ...prevGS.dims + + ].forEach(dim => dim.dimCount + (prevGS?.dims[dim.nthDim+1]?.dimCount ?? 0) * (prevGS?.dims[dim.nthDim+1]?.dimFactor ?? 0)/10) + */ })); }; useEffect(() => { - console.log( gameState.antimatter ); + let test = gameState.dims.forEach(dim => dim.dimCount + 5); + console.log(test); }); useEffect(() => { @@ -83,19 +58,16 @@ function App() { const handleTickBtnClick = () => { clockSpeedRef.current = clockSpeedRef.current * (1 - 0.11); - /* setAntimatter(prevPrice => prevPrice - tickspeedPrice); - setTickspeedPrice(prevPrice => prevPrice * 10); */ - setGameState((prevGS: GameStateInterface) => ({ + setGameState((prevGS: GameState) => ({ ...prevGS, antimatter: prevGS.antimatter - prevGS.tickspeedPrice, tickspeedPrice: prevGS.tickspeedPrice * 10, - - })) + })); }; useEffect(() => { - canIstillBuyRef.current = antimatter - tickspeedPrice; - }, [tickspeedPrice]); + canIstillBuyRef.current = gameState.antimatter - gameState.tickspeedPrice; + }, [gameState.tickspeedPrice]); /* ref is needed to get the current state */ const canIstillBuy = () => { @@ -108,7 +80,7 @@ function App() { const repeatMax = () => { timeIdRef.current = setTimeout(() => { if (canIstillBuy()) { - console.log(canIstillBuy(), canIstillBuyRef.current, tickspeedPrice); + console.log(canIstillBuy(), canIstillBuyRef.current, gameState.tickspeedPrice); handleTickBtnClick(); repeatMax(); } @@ -151,26 +123,22 @@ function App() { return () => clearTimeout(idRef.current); }, []); */ - + /* resets the game to unlock new dimension */ const handleResetGameClick = () => { - setGameState(JSON.parse(initialGameState)) + setGameState(JSON.parse(initialGameState)); }; - /* 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 {gameState.antimatter % 1 === 0 ? gameState.antimatter.toFixed(0) : gameState.antimatter.toFixed(1)}{' '} + You have{' '} + {gameState.antimatter % 1 === 0 + ? gameState.antimatter.toFixed(0) + : gameState.antimatter.toFixed(1)}{' '} antimatters.

@@ -195,62 +163,38 @@ function App() {
- - {`First Dimension Cost: ${gameState.firstDimPrice}`} + + {`First Dimension Cost: ${gameState.dims[0].dimPrice}`} - - {`Second Dimension Cost: ${secondDimPrice}`} + + {`Second Dimension Cost: ${gameState.dims[1].dimPrice}`} - {/* the 3. dimension must be unlocked */} - {resetGameCounter > 2 && ( - - {`Third Dimension Cost: ${thirdDimPrice}`} + { + //the 3. dimension must be unlocked + } + {gameState.resetGameCounter > 2 && ( + + {`Third Dimension Cost: ${gameState.dims[2].dimPrice}`} - /* Here have to come all the other dims */ + // Here have to come all the other dims )} +

-

{`Dimension Shift (${resetGameCounter}) `}

-

{`requires 20 ${resetGameCounter}. Dimension `}

-
-

{`Antimatter Galaxies (${galaxyCounter})`}

+

{`Antimatter Galaxies (${gameState.galaxyCounter})`}

{`requires 80 8. Dimension `}

diff --git a/src/common/GameStateInterface.ts b/src/common/GameStateInterface.ts index 6040797..e09469e 100644 --- a/src/common/GameStateInterface.ts +++ b/src/common/GameStateInterface.ts @@ -1,29 +1,24 @@ -export interface GameStateInterface { +import { Children } from 'react'; +export interface GameState { antimatter: number; - -/* canIstillBuyRef: number; - clockSpeedRef: number; - timerIdRef: number; - idRef: number; - timeIdRef: number; */ - tickspeedPrice: number; resetGameCounter: number; galaxyCounter: number; - highesDim: number; - - firstDimFactor: number; - firstDimCount: number; - firstDimPrice: number; - firstDimFactorCount: number; - - secondDimFactor: number; - secondDimCount: number; - secondDimPrice: number; - secondDimFactorCount: number; + // highesDim: number; + dims: Dim[]; +} - thirdDimFactor: number; - thirdDimCount: number; - thirdDimPrice: number; - thirdDimFactorCount: number; +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 index c0ddb41..4e82a19 100644 --- a/src/common/initialGameState.ts +++ b/src/common/initialGameState.ts @@ -1,36 +1,34 @@ -import {GameStateInterface} from './GameStateInterface' +import { GameState } from './GameStateInterface'; - -let initialGameState:GameStateInterface = { +let initialGameState: GameState = { antimatter: 1000, - -/* canIstillBuyRef: 0, - clockSpeedRef: 2000, - timerIdRef: -1, - idRef: -1, - timeIdRef: -1, */ - tickspeedPrice: 10, - resetGameCounter: 2, + resetGameCounter: 3, galaxyCounter: 0, - highesDim: 0, - - firstDimFactor: 1.1, - firstDimCount: 0, - firstDimPrice: 10, - firstDimFactorCount: 0, - - secondDimFactor: 1.1, - secondDimCount: 0, - secondDimPrice: 100, - secondDimFactorCount: 0, - - thirdDimFactor: 1.1, - thirdDimCount: 0, - thirdDimPrice: 1000, - thirdDimFactorCount: 0, - -} - -export default JSON.stringify(initialGameState) - + //highesDim: 0, + dims: [ + { + nthDim: 0, + dimFactor: 1.1, + dimCount: 0, + dimPrice: 10, + dimFactorCount: 0, + }, + { + nthDim: 1, + dimFactor: 1.1, + dimCount: 0, + dimPrice: 100, + dimFactorCount: 0, + }, + { + nthDim: 2, + dimFactor: 1.1, + dimCount: 0, + dimPrice: 1000, + dimFactorCount: 0, + }, + ], +}; + +export default JSON.stringify(initialGameState); From f0062d47e49eea710a7197caf34ce00106e118e3 Mon Sep 17 00:00:00 2001 From: Michael Urich <80188367+mturich@users.noreply.github.com> Date: Wed, 6 Jul 2022 23:15:47 +0200 Subject: [PATCH 06/16] counting works --- src/App.tsx | 30 ++++++++++++++++++------------ src/common/initialGameState.ts | 2 +- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 95bd999..f3b8070 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -19,26 +19,32 @@ function App() { setSecondDimCount(prevSecondDim => prevSecondDim + (thirdDimCount / 100) * thirdDimFactor); }; */ - /* firstDimCount: - prevGS.firstDimCount + (prevGS.secondDimCount / 10) * prevGS.secondDimFactor, - secondDimCount: - prevGS.secondDimCount + (prevGS.thirdDimCount / 100) * prevGS.thirdDimFactor, */ timerExpiredCallback.current = () => { setGameState((prevGS: GameState) => ({ ...prevGS, antimatter: prevGS.antimatter + prevGS.dims[0].dimCount * prevGS.dims[0].dimFactor, - /* dims: [ - ...prevGS.dims - - ].forEach(dim => dim.dimCount + (prevGS?.dims[dim.nthDim+1]?.dimCount ?? 0) * (prevGS?.dims[dim.nthDim+1]?.dimFactor ?? 0)/10) - */ + dims: [...gameState.dims].map((dim, index) => { + return { + ...dim, + dimCount: + dim.dimCount + + ((gameState.dims[index + 1]?.dimCount ?? 0) * + (gameState.dims[index + 1]?.dimFactor ?? 0)) / + Math.pow(10, index + 1), + }; + }), })); }; useEffect(() => { - let test = gameState.dims.forEach(dim => dim.dimCount + 5); - console.log(test); - }); + /* [...gameState.dims].map((dim, index) => { return { + ...dim, + dimCount: dim.dimCount + (gameState.dims[index + 1]?.dimCount ?? 0) * (gameState.dims[index + 1]?.dimFactor ?? 0) / 10 + + } + }) + */ + }, []); useEffect(() => { const startTimer = () => { diff --git a/src/common/initialGameState.ts b/src/common/initialGameState.ts index 4e82a19..05be278 100644 --- a/src/common/initialGameState.ts +++ b/src/common/initialGameState.ts @@ -24,7 +24,7 @@ let initialGameState: GameState = { { nthDim: 2, dimFactor: 1.1, - dimCount: 0, + dimCount: 5, dimPrice: 1000, dimFactorCount: 0, }, From 6d878c1100878f4fe0755729d0b28da37c3f4936 Mon Sep 17 00:00:00 2001 From: Michael Urich <80188367+mturich@users.noreply.github.com> Date: Thu, 7 Jul 2022 10:17:29 +0200 Subject: [PATCH 07/16] updateDim --- src/Dimension.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/Dimension.tsx b/src/Dimension.tsx index 32e98c4..da74d70 100644 --- a/src/Dimension.tsx +++ b/src/Dimension.tsx @@ -5,12 +5,18 @@ 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); + /* + 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, + dim: [...dim] })); } if ( From eb3aacc3133134fa241eaa2e71985ef9e5916040 Mon Sep 17 00:00:00 2001 From: Michael Urich <80188367+mturich@users.noreply.github.com> Date: Thu, 7 Jul 2022 10:34:45 +0200 Subject: [PATCH 08/16] btn work --- src/App.tsx | 2 +- src/Dimension.tsx | 29 ++++++++++++++++++++++++----- src/common/initialGameState.ts | 2 +- 3 files changed, 26 insertions(+), 7 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index f3b8070..3742aeb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -23,7 +23,7 @@ function App() { setGameState((prevGS: GameState) => ({ ...prevGS, antimatter: prevGS.antimatter + prevGS.dims[0].dimCount * prevGS.dims[0].dimFactor, - dims: [...gameState.dims].map((dim, index) => { + dims: gameState.dims.map((dim:Dim, index:number) => { return { ...dim, dimCount: diff --git a/src/Dimension.tsx b/src/Dimension.tsx index da74d70..82603d5 100644 --- a/src/Dimension.tsx +++ b/src/Dimension.tsx @@ -1,12 +1,11 @@ import './Dimentions.css'; -import { GameState, DimProps } from './common/GameStateInterface'; +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] + const newDim = [gs.dims[nthDim].dimCount + quantity]; if (gs.antimatter >= gs.dims[nthDim].dimPrice) { /* @@ -16,16 +15,36 @@ export default function Dimension(props: DimProps) { setGameState((prevGS: GameState) => ({ ...prevGS, antimatter: prevGS.antimatter - prevGS.dims[nthDim].dimPrice * quantity, - dim: [...dim] + 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); + /* + 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, + }; + }), + })); } }; diff --git a/src/common/initialGameState.ts b/src/common/initialGameState.ts index 05be278..4e82a19 100644 --- a/src/common/initialGameState.ts +++ b/src/common/initialGameState.ts @@ -24,7 +24,7 @@ let initialGameState: GameState = { { nthDim: 2, dimFactor: 1.1, - dimCount: 5, + dimCount: 0, dimPrice: 1000, dimFactorCount: 0, }, From abdea5e78599e59f16e69ff6b7e207ad8c52967b Mon Sep 17 00:00:00 2001 From: Michael Urich <80188367+mturich@users.noreply.github.com> Date: Thu, 7 Jul 2022 15:18:36 +0200 Subject: [PATCH 09/16] refactored GameResets --- src/App.tsx | 41 +++-------------------------------------- src/Dimension.tsx | 1 + src/GameResets.tsx | 33 +++++++++++++++++++++++++++++++++ 3 files changed, 37 insertions(+), 38 deletions(-) create mode 100644 src/GameResets.tsx diff --git a/src/App.tsx b/src/App.tsx index 3742aeb..7d0980a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,6 +3,7 @@ import './App.css'; import Dimension from './Dimension'; import initialGameState from './common/initialGameState'; import { GameState, Dim } from './common/GameStateInterface'; +import GameResets from './GameResets'; function App() { const [gameState, setGameState] = useState(() => JSON.parse(initialGameState)); @@ -13,12 +14,6 @@ function App() { const timerIdRef = useRef(-1); const timeIdRef = useRef(-1); - /* timerExpiredCallback.current = () => { - setAntimatter(prevAntimatter => prevAntimatter + firstDimCount * firstDimFactor); - setFirstDimCount(prevFirstDim => prevFirstDim + (secondDimCount / 10) * secondDimFactor); - setSecondDimCount(prevSecondDim => prevSecondDim + (thirdDimCount / 100) * thirdDimFactor); - }; */ - timerExpiredCallback.current = () => { setGameState((prevGS: GameState) => ({ ...prevGS, @@ -36,16 +31,6 @@ function App() { })); }; - useEffect(() => { - /* [...gameState.dims].map((dim, index) => { return { - ...dim, - dimCount: dim.dimCount + (gameState.dims[index + 1]?.dimCount ?? 0) * (gameState.dims[index + 1]?.dimFactor ?? 0) / 10 - - } - }) - */ - }, []); - useEffect(() => { const startTimer = () => { timerIdRef.current = setTimeout(() => { @@ -130,11 +115,6 @@ function App() { }, []); */ - /* resets the game to unlock new dimension */ - const handleResetGameClick = () => { - setGameState(JSON.parse(initialGameState)); - }; - //--------------------------------------------------- return ( @@ -189,23 +169,8 @@ function App() {

-
-

{`Dimension Shift (${gameState.resetGameCounter}) `}

-

{`requires 20 ${gameState.resetGameCounter}. Dimension `}

- -
-
-

{`Antimatter Galaxies (${gameState.galaxyCounter})`}

-

{`requires 80 8. Dimension `}

- -
+ + ); } diff --git a/src/Dimension.tsx b/src/Dimension.tsx index 82603d5..0f6f616 100644 --- a/src/Dimension.tsx +++ b/src/Dimension.tsx @@ -67,6 +67,7 @@ export default function Dimension(props: DimProps) { `}

+ + +
+

{`Antimatter Galaxies (${gameState.galaxyCounter})`}

+

{`requires 80 8. Dimension `}

+ +
+ +); +} \ No newline at end of file From ce66f24f480e72c5f6e4402ee5aa35c2d6b3d5a5 Mon Sep 17 00:00:00 2001 From: Michael Urich <80188367+mturich@users.noreply.github.com> Date: Thu, 7 Jul 2022 15:35:21 +0200 Subject: [PATCH 10/16] added tickspeedDecreaseRate, Antimatter Galaxy working --- src/App.tsx | 6 +-- src/GameResets.tsx | 66 +++++++++++++++++++------------- src/common/GameStateInterface.ts | 1 + src/common/initialGameState.ts | 38 +++++++++++++++++- 4 files changed, 81 insertions(+), 30 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 7d0980a..c92e2e7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -48,7 +48,7 @@ function App() { // FROM HERE const handleTickBtnClick = () => { - clockSpeedRef.current = clockSpeedRef.current * (1 - 0.11); + clockSpeedRef.current = clockSpeedRef.current * (1 - gameState.tickspeedDeceaseRate); setGameState((prevGS: GameState) => ({ ...prevGS, antimatter: prevGS.antimatter - prevGS.tickspeedPrice, @@ -132,7 +132,7 @@ function App() {

{`The current clockspeed is ${clockSpeedRef.current.toFixed( 0 - )} ms. Reduce the tickspeed by 11%.`}

+ )} ms. Reduce the tickspeed by ${gameState.tickspeedDeceaseRate*100}%.`}

); diff --git a/src/GameResets.tsx b/src/GameResets.tsx index d7cc4de..fe005ba 100644 --- a/src/GameResets.tsx +++ b/src/GameResets.tsx @@ -1,33 +1,47 @@ -import React from 'react'; +import React, { useEffect } from 'react'; +import { GameState } from './common/GameStateInterface'; import initialGameState from './common/initialGameState'; -export default function GameResets(props: { gameState: any; setGameState: any; }) { - - const {gameState, setGameState} = props; +export default function GameResets(props: { gameState: any; setGameState: any }) { + const { gameState, setGameState } = props; const handleResetGameClick = () => { setGameState(JSON.parse(initialGameState)); }; -return ( - <> -
-

{`Dimension Shift (${gameState.resetGameCounter}) `}

-

{`requires 20 ${gameState.resetGameCounter}. Dimension `}

- -
-
-

{`Antimatter Galaxies (${gameState.galaxyCounter})`}

-

{`requires 80 8. Dimension `}

- -
- -); -} \ No newline at end of file + const handleTickDecreseBtn = () => { + setGameState((prevGS: GameState) => ({ + ...JSON.parse(initialGameState), + tickspeedDeceaseRate: 0.12, + })); + }; + + useEffect(() => { + console.log(gameState.tickspeedDeceaseRate); + }); + + return ( + <> +
+

{`Dimension Shift (${gameState.resetGameCounter}) `}

+

{`requires 20 ${gameState.resetGameCounter}. Dimension `}

+ +
+
+

{`Antimatter Galaxies (${gameState.galaxyCounter})`}

+

{`requires 80 8. Dimension `}

+ +
+ + ); +} diff --git a/src/common/GameStateInterface.ts b/src/common/GameStateInterface.ts index e09469e..fd9de0f 100644 --- a/src/common/GameStateInterface.ts +++ b/src/common/GameStateInterface.ts @@ -2,6 +2,7 @@ import { Children } from 'react'; export interface GameState { antimatter: number; tickspeedPrice: number; + tickspeedDeceaseRate: number, resetGameCounter: number; galaxyCounter: number; // highesDim: number; diff --git a/src/common/initialGameState.ts b/src/common/initialGameState.ts index 4e82a19..76b5881 100644 --- a/src/common/initialGameState.ts +++ b/src/common/initialGameState.ts @@ -3,6 +3,7 @@ import { GameState } from './GameStateInterface'; let initialGameState: GameState = { antimatter: 1000, tickspeedPrice: 10, + tickspeedDeceaseRate: 0.11, resetGameCounter: 3, galaxyCounter: 0, //highesDim: 0, @@ -24,10 +25,45 @@ let initialGameState: GameState = { { nthDim: 2, dimFactor: 1.1, - dimCount: 0, + dimCount: 500000, dimPrice: 1000, dimFactorCount: 0, }, + { + nthDim: 3, + dimFactor: 1.1, + dimCount: 0, + dimPrice: 10000, + dimFactorCount: 0, + }, + { + nthDim: 4, + dimFactor: 1.1, + dimCount: 0, + dimPrice: 100000, + dimFactorCount: 0, + }, + { + nthDim: 5, + dimFactor: 1.1, + dimCount: 0, + dimPrice: 1000000, + dimFactorCount: 0, + }, + { + nthDim: 6, + dimFactor: 1.1, + dimCount: 0, + dimPrice: 10000000, + dimFactorCount: 0, + }, + { + nthDim: 7, + dimFactor: 1.1, + dimCount: 80, + dimPrice: 100000000, + dimFactorCount: 0, + }, ], }; From 85c3384d7ebc3c14455147e8bb485324845fccd9 Mon Sep 17 00:00:00 2001 From: Michael Urich <80188367+mturich@users.noreply.github.com> Date: Thu, 7 Jul 2022 15:51:05 +0200 Subject: [PATCH 11/16] TickSpeed Component --- src/App.css | 6 ++- src/App.tsx | 52 ++++++-------------------- src/GameResets.tsx | 10 +---- src/TickSpeed.tsx | 67 ++++++++++++++++++++++++++++++++++ src/common/initialGameState.ts | 2 +- 5 files changed, 85 insertions(+), 52 deletions(-) create mode 100644 src/TickSpeed.tsx diff --git a/src/App.css b/src/App.css index 43d9fa5..3ee50dc 100644 --- a/src/App.css +++ b/src/App.css @@ -1,5 +1,5 @@ * { - /* border: 1px solid black; */ +/* border: 1px solid black; */ } .App { @@ -24,6 +24,7 @@ grid-template-columns: repeat(4, 1fr); gap: 10px; grid-auto-rows: minmax(40px, auto); + } .gridContainer3Rows { @@ -31,6 +32,7 @@ grid-template-rows: repeat(3, 1fr); gap: 4px; grid-auto-rows: minmax(40px, auto); + margin: 1rem auto; } .centered { @@ -43,7 +45,7 @@ .cols-2{ grid-template-columns: repeat(3, 1fr); - margin: auto 5rem; + margin: 2rem 5rem; } .btn { diff --git a/src/App.tsx b/src/App.tsx index c92e2e7..d51c175 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,21 +4,21 @@ import Dimension from './Dimension'; import initialGameState from './common/initialGameState'; import { GameState, Dim } from './common/GameStateInterface'; import GameResets from './GameResets'; +import Tickspeed from './TickSpeed'; function App() { const [gameState, setGameState] = useState(() => JSON.parse(initialGameState)); /* JSON.parse(localStorage.getItem('data')) */ - const canIstillBuyRef = useRef(0); + const timerExpiredCallback = useRef(() => {}); const clockSpeedRef = useRef(2000); const timerIdRef = useRef(-1); - const timeIdRef = useRef(-1); 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) => { + dims: gameState.dims.map((dim: Dim, index: number) => { return { ...dim, dimCount: @@ -47,42 +47,7 @@ function App() { //------------------------------------------- // FROM HERE - const handleTickBtnClick = () => { - clockSpeedRef.current = clockSpeedRef.current * (1 - gameState.tickspeedDeceaseRate); - setGameState((prevGS: GameState) => ({ - ...prevGS, - antimatter: prevGS.antimatter - prevGS.tickspeedPrice, - tickspeedPrice: prevGS.tickspeedPrice * 10, - })); - }; - - useEffect(() => { - canIstillBuyRef.current = gameState.antimatter - gameState.tickspeedPrice; - }, [gameState.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, gameState.tickspeedPrice); - handleTickBtnClick(); - repeatMax(); - } - }, 20); - - return () => clearTimeout(timeIdRef.current); - }; - repeatMax(); - }; - - /* // creates constantly an uptodate object which is then saved later + /* // saves the created object every minuit to localStorage useEffect(() => { @@ -129,7 +94,7 @@ function App() {

-
+ {/*

{`The current clockspeed is ${clockSpeedRef.current.toFixed( 0 )} ms. Reduce the tickspeed by ${gameState.tickspeedDeceaseRate*100}%.`}

@@ -147,7 +112,12 @@ function App() { Buy Max
-
+ */} + + {`First Dimension Cost: ${gameState.dims[0].dimPrice}`} diff --git a/src/GameResets.tsx b/src/GameResets.tsx index fe005ba..27aa511 100644 --- a/src/GameResets.tsx +++ b/src/GameResets.tsx @@ -1,25 +1,19 @@ -import React, { useEffect } from 'react'; -import { GameState } from './common/GameStateInterface'; import initialGameState from './common/initialGameState'; export default function GameResets(props: { gameState: any; setGameState: any }) { const { gameState, setGameState } = props; const handleResetGameClick = () => { - setGameState(JSON.parse(initialGameState)); + setGameState(() => JSON.parse(initialGameState)); }; const handleTickDecreseBtn = () => { - setGameState((prevGS: GameState) => ({ + setGameState(() => ({ ...JSON.parse(initialGameState), tickspeedDeceaseRate: 0.12, })); }; - useEffect(() => { - console.log(gameState.tickspeedDeceaseRate); - }); - return ( <>
diff --git a/src/TickSpeed.tsx b/src/TickSpeed.tsx new file mode 100644 index 0000000..4b817fe --- /dev/null +++ b/src/TickSpeed.tsx @@ -0,0 +1,67 @@ +import { useRef, useEffect } from "react"; +import { GameState } from "./common/GameStateInterface"; + +export default function Tickspeed(props) { + const timeIdRef = useRef(-1); + const canIstillBuyRef = useRef(0); + const { gameState, setGameState, clockSpeedRef} = props; + + + const handleTickBtnClick = () => { + clockSpeedRef.current = clockSpeedRef.current * (1 - gameState.tickspeedDeceaseRate); + setGameState((prevGS: GameState) => ({ + ...prevGS, + antimatter: prevGS.antimatter - prevGS.tickspeedPrice, + tickspeedPrice: prevGS.tickspeedPrice * 10, + })); + }; + + useEffect(() => { + canIstillBuyRef.current = gameState.antimatter - gameState.tickspeedPrice; + }, [gameState.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, gameState.tickspeedPrice); + handleTickBtnClick(); + repeatMax(); + } + }, 20); + + return () => clearTimeout(timeIdRef.current); + }; + repeatMax(); + }; + + + return ( +
+

{`The current clockspeed is ${clockSpeedRef.current.toFixed( + 0 + )} ms. Reduce the tickspeed by ${gameState.tickspeedDeceaseRate * 100}%.`}

+
+ + +
+
+ ); +} diff --git a/src/common/initialGameState.ts b/src/common/initialGameState.ts index 76b5881..5586b35 100644 --- a/src/common/initialGameState.ts +++ b/src/common/initialGameState.ts @@ -60,7 +60,7 @@ let initialGameState: GameState = { { nthDim: 7, dimFactor: 1.1, - dimCount: 80, + dimCount: 0, dimPrice: 100000000, dimFactorCount: 0, }, From 00696d8d4ed04c50918b5b65504904a336eaa4c8 Mon Sep 17 00:00:00 2001 From: Michael Urich <80188367+mturich@users.noreply.github.com> Date: Thu, 7 Jul 2022 15:59:43 +0200 Subject: [PATCH 12/16] changed structure in folder --- src/{ => components}/App.tsx | 7 ++++--- src/{ => components}/Dimension.tsx | 5 ++--- src/{ => components}/GameResets.tsx | 2 +- src/{ => components}/TickSpeed.tsx | 2 +- src/main.tsx | 17 +++++++++-------- src/{ => styles}/App.css | 0 src/{ => styles}/Dimentions.css | 0 src/{ => styles}/index.css | 0 8 files changed, 17 insertions(+), 16 deletions(-) rename src/{ => components}/App.tsx (96%) rename src/{ => components}/Dimension.tsx (96%) rename src/{ => components}/GameResets.tsx (95%) rename src/{ => components}/TickSpeed.tsx (97%) rename src/{ => styles}/App.css (100%) rename src/{ => styles}/Dimentions.css (100%) rename src/{ => styles}/index.css (100%) diff --git a/src/App.tsx b/src/components/App.tsx similarity index 96% rename from src/App.tsx rename to src/components/App.tsx index d51c175..21d588b 100644 --- a/src/App.tsx +++ b/src/components/App.tsx @@ -1,11 +1,12 @@ import { useState, useEffect, useRef } from 'react'; -import './App.css'; +import '../styles/App.css'; import Dimension from './Dimension'; -import initialGameState from './common/initialGameState'; -import { GameState, Dim } from './common/GameStateInterface'; import GameResets from './GameResets'; import Tickspeed from './TickSpeed'; +import { GameState, Dim } from '../common/GameStateInterface'; +import initialGameState from '../common/initialGameState'; + function App() { const [gameState, setGameState] = useState(() => JSON.parse(initialGameState)); /* JSON.parse(localStorage.getItem('data')) */ diff --git a/src/Dimension.tsx b/src/components/Dimension.tsx similarity index 96% rename from src/Dimension.tsx rename to src/components/Dimension.tsx index 0f6f616..e06022d 100644 --- a/src/Dimension.tsx +++ b/src/components/Dimension.tsx @@ -1,5 +1,4 @@ -import './Dimentions.css'; -import { GameState, DimProps, Dim } from './common/GameStateInterface'; +import { GameState, DimProps, Dim } from '../common/GameStateInterface'; export default function Dimension(props: DimProps) { const { nthDim, gs, setGameState } = props; @@ -67,7 +66,7 @@ export default function Dimension(props: DimProps) { `}

- + - -
- */} + + +

+ You have{' '} + {gameState.antimatter % 1 === 0 + ? gameState.antimatter.toFixed(0) + : gameState.antimatter.toFixed(1)}{' '} + antimatters. +

+ + ); +} diff --git a/src/components/GameResets.tsx b/src/components/GameResets.tsx index c44e617..71db03e 100644 --- a/src/components/GameResets.tsx +++ b/src/components/GameResets.tsx @@ -1,6 +1,7 @@ +import { GameState } from '../common/GameStateInterface'; import initialGameState from '../common/initialGameState'; -export default function GameResets(props: { gameState: any; setGameState: any }) { +export default function GameResets(props: { gameState: GameState; setGameState: any }) { const { gameState, setGameState } = props; const handleResetGameClick = () => { diff --git a/src/components/TickSpeed.tsx b/src/components/TickSpeed.tsx index aa729ea..af6e856 100644 --- a/src/components/TickSpeed.tsx +++ b/src/components/TickSpeed.tsx @@ -1,7 +1,7 @@ import { useRef, useEffect } from "react"; import { GameState } from "../common/GameStateInterface"; -export default function Tickspeed(props) { +export default function Tickspeed(props: { gameState: GameState; setGameState: any; clockSpeedRef: any; }) { const timeIdRef = useRef(-1); const canIstillBuyRef = useRef(0); const { gameState, setGameState, clockSpeedRef} = props; From 627b5f9bd70517de38d9bcca0a2a5be74503f7f6 Mon Sep 17 00:00:00 2001 From: Michael Urich <80188367+mturich@users.noreply.github.com> Date: Thu, 7 Jul 2022 16:14:22 +0200 Subject: [PATCH 14/16] refactored saveToLocalStorage to customHook, but no function change --- src/components/App.tsx | 41 ++---------------------- src/components/useSaveToLocalStorage.tsx | 37 +++++++++++++++++++++ 2 files changed, 39 insertions(+), 39 deletions(-) create mode 100644 src/components/useSaveToLocalStorage.tsx diff --git a/src/components/App.tsx b/src/components/App.tsx index 1ba6a07..9960b8c 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -7,14 +7,15 @@ 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(initialGameState)); /* JSON.parse(localStorage.getItem('data')) */ - const timerExpiredCallback = useRef(() => {}); const clockSpeedRef = useRef(2000); const timerIdRef = useRef(-1); + //useSaveToLocalStorage(gameState) timerExpiredCallback.current = () => { setGameState((prevGS: GameState) => ({ @@ -46,44 +47,6 @@ function App() { return () => clearTimeout(timerIdRef.current); }, []); - //------------------------------------------- - // FROM HERE - - /* - - // saves the created object every minuit to localStorage - useEffect(() => { - const startSave = () => { - timerIdRef.current = setTimeout(() => { - //localStorage.removeItem('dataRef'); - localStorage.setItem('data', JSON.stringify(gameState)); - console.log('data save cycle: ', gameState); - startSave(); - }, 10000); - }; - 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); - }, []); - */ - - //--------------------------------------------------- - return (
diff --git a/src/components/useSaveToLocalStorage.tsx b/src/components/useSaveToLocalStorage.tsx new file mode 100644 index 0000000..5bdd8cb --- /dev/null +++ b/src/components/useSaveToLocalStorage.tsx @@ -0,0 +1,37 @@ +import { useEffect, useRef } from 'react'; +import { GameState } from '../common/GameStateInterface'; + +export function useSaveToLocalStorage(gameState: GameState) { + const saveLocStorageRef = useRef(-1); + const displayLocStorageRef = useRef(-1); + + // saves the created object every minuit to localStorage + useEffect(() => { + const startSave = () => { + saveLocStorageRef.current = setTimeout(() => { + //localStorage.removeItem('dataRef'); + localStorage.setItem('data', JSON.stringify(gameState)); + console.log('data save cycle: ', gameState); + startSave(); + }, 10000); + }; + startSave(); + + // if we ever unmount / destroy this component instance, clear the timeout + return () => clearTimeout(saveLocStorageRef.current); + }, []); + + // this prints the saved object from local storage. It is just for dev. No final purpose + useEffect(() => { + const printStorage = () => { + displayLocStorageRef.current = setTimeout(() => { + let savedDataRef = JSON.parse(localStorage.getItem('data') ?? ''); + console.log('dataRef from storage', savedDataRef); + printStorage(); + }, 10000); + }; + printStorage(); + + return () => clearTimeout(displayLocStorageRef.current); + }, []); +} From 685c89ce221227d888ce5120f998b3fedcd29c34 Mon Sep 17 00:00:00 2001 From: Michael Urich <80188367+mturich@users.noreply.github.com> Date: Thu, 7 Jul 2022 23:12:59 +0200 Subject: [PATCH 15/16] buyMax changed to recursive approach --- src/common/initialGameState.ts | 2 +- src/components/TickSpeed.tsx | 61 +++++++++++++++++----------------- 2 files changed, 31 insertions(+), 32 deletions(-) diff --git a/src/common/initialGameState.ts b/src/common/initialGameState.ts index 5586b35..dcb6cfd 100644 --- a/src/common/initialGameState.ts +++ b/src/common/initialGameState.ts @@ -25,7 +25,7 @@ let initialGameState: GameState = { { nthDim: 2, dimFactor: 1.1, - dimCount: 500000, + dimCount: 50, dimPrice: 1000, dimFactorCount: 0, }, diff --git a/src/components/TickSpeed.tsx b/src/components/TickSpeed.tsx index af6e856..404c710 100644 --- a/src/components/TickSpeed.tsx +++ b/src/components/TickSpeed.tsx @@ -1,12 +1,16 @@ -import { useRef, useEffect } from "react"; -import { GameState } from "../common/GameStateInterface"; - -export default function Tickspeed(props: { gameState: GameState; setGameState: any; clockSpeedRef: any; }) { - const timeIdRef = useRef(-1); - const canIstillBuyRef = useRef(0); - const { gameState, setGameState, clockSpeedRef} = props; - +import { useRef, useEffect, useState } from 'react'; +import { GameState } from '../common/GameStateInterface'; +export default function Tickspeed(props: { + gameState: GameState; + setGameState: any; + clockSpeedRef: any; +}) { + const { gameState, setGameState, clockSpeedRef } = props; + const [buyMax, setBuyMax] = useState( + Math.log10(gameState.antimatter / gameState.tickspeedPrice) + ); + const maxPossibleBuys = useRef(~~Math.log10(gameState.antimatter / gameState.tickspeedPrice)); const handleTickBtnClick = () => { clockSpeedRef.current = clockSpeedRef.current * (1 - gameState.tickspeedDeceaseRate); setGameState((prevGS: GameState) => ({ @@ -17,32 +21,27 @@ export default function Tickspeed(props: { gameState: GameState; setGameState: a }; useEffect(() => { - canIstillBuyRef.current = gameState.antimatter - gameState.tickspeedPrice; - }, [gameState.tickspeedPrice]); + const getCostForPurchaseQtyRecursive = (price: number, antimatter: number, quantity = 0) => { + if (antimatter < price) { + return quantity; + } else { + return getCostForPurchaseQtyRecursive(price * 10, antimatter - price, quantity + 1); + } + }; - /* ref is needed to get the current state */ - const canIstillBuy = () => { - if (canIstillBuyRef.current > 0) return true; - else return false; - }; + maxPossibleBuys.current = getCostForPurchaseQtyRecursive( + gameState.tickspeedPrice, + gameState.antimatter, + 0 + ); + }, [gameState]); - /* 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, gameState.tickspeedPrice); - handleTickBtnClick(); - repeatMax(); - } - }, 20); - - return () => clearTimeout(timeIdRef.current); - }; - repeatMax(); + for (let i = 0; i < maxPossibleBuys.current; i++) { + handleTickBtnClick(); + } }; - return (

{`The current clockspeed is ${clockSpeedRef.current.toFixed( @@ -58,8 +57,8 @@ export default function Tickspeed(props: { gameState: GameState; setGameState: a

From 2dfdf81f9c28a5cb71f5de0baee7423a6c5022a0 Mon Sep 17 00:00:00 2001 From: Michael Urich <80188367+mturich@users.noreply.github.com> Date: Fri, 8 Jul 2022 17:20:27 +0200 Subject: [PATCH 16/16] updated save to localstorage --- src/common/GameStateInterface.ts | 2 +- src/common/initialGameState.ts | 25 ++++++++----- src/components/App.tsx | 38 +++++++++++++++---- src/components/GameResets.tsx | 47 ++++++++++++++++++++---- src/components/useSaveToLocalStorage.tsx | 33 +++++++++-------- tsconfig.json | 22 ++++++++--- 6 files changed, 121 insertions(+), 46 deletions(-) diff --git a/src/common/GameStateInterface.ts b/src/common/GameStateInterface.ts index fd9de0f..a14c3c7 100644 --- a/src/common/GameStateInterface.ts +++ b/src/common/GameStateInterface.ts @@ -5,7 +5,7 @@ export interface GameState { tickspeedDeceaseRate: number, resetGameCounter: number; galaxyCounter: number; - // highesDim: number; + lastSavedTime: number; dims: Dim[]; } diff --git a/src/common/initialGameState.ts b/src/common/initialGameState.ts index dcb6cfd..b70445c 100644 --- a/src/common/initialGameState.ts +++ b/src/common/initialGameState.ts @@ -4,9 +4,9 @@ let initialGameState: GameState = { antimatter: 1000, tickspeedPrice: 10, tickspeedDeceaseRate: 0.11, - resetGameCounter: 3, + resetGameCounter: 2, galaxyCounter: 0, - //highesDim: 0, + lastSavedTime: 0, dims: [ { nthDim: 0, @@ -18,52 +18,59 @@ let initialGameState: GameState = { { nthDim: 1, dimFactor: 1.1, - dimCount: 0, + dimCount: 20, dimPrice: 100, dimFactorCount: 0, }, { nthDim: 2, dimFactor: 1.1, - dimCount: 50, + dimCount: 20, dimPrice: 1000, dimFactorCount: 0, }, { nthDim: 3, dimFactor: 1.1, - dimCount: 0, + dimCount: 20, dimPrice: 10000, dimFactorCount: 0, }, { nthDim: 4, dimFactor: 1.1, - dimCount: 0, + dimCount: 20, dimPrice: 100000, dimFactorCount: 0, }, { nthDim: 5, dimFactor: 1.1, - dimCount: 0, + dimCount: 20, dimPrice: 1000000, dimFactorCount: 0, }, { nthDim: 6, dimFactor: 1.1, - dimCount: 0, + dimCount: 20, dimPrice: 10000000, dimFactorCount: 0, }, { nthDim: 7, dimFactor: 1.1, - dimCount: 0, + dimCount: 20, dimPrice: 100000000, dimFactorCount: 0, }, + { + nthDim: 8, + dimFactor: 1.1, + dimCount: 20, + dimPrice: 1000000000, + dimFactorCount: 0, + }, ], }; diff --git a/src/components/App.tsx b/src/components/App.tsx index 9960b8c..f44f9e2 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -10,12 +10,14 @@ import DisplayAntimatter from './DisplayAntimatter'; import { useSaveToLocalStorage } from './useSaveToLocalStorage'; function App() { - const [gameState, setGameState] = useState(() => JSON.parse(initialGameState)); + 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) + useSaveToLocalStorage(gameState, setGameState); timerExpiredCallback.current = () => { setGameState((prevGS: GameState) => ({ @@ -49,8 +51,7 @@ function App() { return (
- - + {`Third Dimension Cost: ${gameState.dims[2].dimPrice}`} - - // Here have to come all the other dims )} - + {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}`} + + )} +

diff --git a/src/components/GameResets.tsx b/src/components/GameResets.tsx index 71db03e..cdb2364 100644 --- a/src/components/GameResets.tsx +++ b/src/components/GameResets.tsx @@ -1,29 +1,50 @@ +import { useEffect, useRef } from 'react'; import { GameState } from '../common/GameStateInterface'; import initialGameState from '../common/initialGameState'; export default function GameResets(props: { gameState: GameState; setGameState: any }) { const { gameState, setGameState } = props; + const resetGameCounterRef = useRef(gameState.resetGameCounter); + + useEffect(() => { + resetGameCounterRef.current = gameState.resetGameCounter; + }, [gameState.resetGameCounter]); const handleResetGameClick = () => { - setGameState(() => JSON.parse(initialGameState)); + setGameState((prevGS: GameState) => ({ + ...JSON.parse(initialGameState), + galaxyCounter: prevGS.galaxyCounter, + resetGameCounter: prevGS.resetGameCounter + 1, + lastSavedTime: prevGS.lastSavedTime, + })); }; - const handleTickDecreseBtn = () => { - setGameState(() => ({ + const handleGalaxyBtn = () => { + setGameState((prevGS: GameState) => ({ ...JSON.parse(initialGameState), + galaxyCounter: prevGS.galaxyCounter + 1, tickspeedDeceaseRate: 0.12, + resetGameCounter: prevGS.resetGameCounter, + lastSavedTime: prevGS.lastSavedTime, })); }; + const disableResetBtn = () => { + if ( + gameState.resetGameCounter < 7 && + gameState.dims[gameState.resetGameCounter - 1].dimCount < 20 + ) + return true; + else return false; + }; + return ( <>

{`Dimension Shift (${gameState.resetGameCounter}) `}

{`requires 20 ${gameState.resetGameCounter}. Dimension `}

-
@@ -32,11 +53,21 @@ export default function GameResets(props: { gameState: GameState; setGameState:

{`requires 80 8. Dimension `}

+
+

{`reset game`}

+

{`resets everything`}

+ +
); } diff --git a/src/components/useSaveToLocalStorage.tsx b/src/components/useSaveToLocalStorage.tsx index 5bdd8cb..67fba85 100644 --- a/src/components/useSaveToLocalStorage.tsx +++ b/src/components/useSaveToLocalStorage.tsx @@ -1,37 +1,38 @@ import { useEffect, useRef } from 'react'; -import { GameState } from '../common/GameStateInterface'; +import { Dim, GameState } from '../common/GameStateInterface'; -export function useSaveToLocalStorage(gameState: GameState) { +export function useSaveToLocalStorage(gameState: GameState, setGameState) { const saveLocStorageRef = useRef(-1); const displayLocStorageRef = useRef(-1); // saves the created object every minuit to localStorage + useEffect(() => { - const startSave = () => { - saveLocStorageRef.current = setTimeout(() => { - //localStorage.removeItem('dataRef'); + const saveDateRecursive = (gameState: GameState) => { + if (Date.now() > gameState.lastSavedTime + 60 * 1000) { localStorage.setItem('data', JSON.stringify(gameState)); - console.log('data save cycle: ', gameState); - startSave(); - }, 10000); + console.log('data saved', gameState.lastSavedTime); + setGameState((prevGS: GameState) => ({ + ...prevGS, + lastSavedTime: Date.now(), + })); + } }; - startSave(); + saveDateRecursive(gameState); - // if we ever unmount / destroy this component instance, clear the timeout - return () => clearTimeout(saveLocStorageRef.current); - }, []); + }, [gameState]); // this prints the saved object from local storage. It is just for dev. No final purpose - useEffect(() => { + /* useEffect(() => { const printStorage = () => { displayLocStorageRef.current = setTimeout(() => { - let savedDataRef = JSON.parse(localStorage.getItem('data') ?? ''); - console.log('dataRef from storage', savedDataRef); + let savedData= JSON.parse(localStorage.getItem('data') ?? ''); + console.log('dataRef from storage', savedData); printStorage(); }, 10000); }; printStorage(); return () => clearTimeout(displayLocStorageRef.current); - }, []); + }, []); */ } diff --git a/tsconfig.json b/tsconfig.json index ceadf44..5dafb29 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,7 +2,11 @@ "compilerOptions": { "target": "ESNext", "useDefineForClassFields": true, - "lib": ["DOM", "DOM.Iterable", "ESNext"], + "lib": [ + "DOM", + "DOM.Iterable", + "ESNext" + ], "allowJs": false, "skipLibCheck": true, "esModuleInterop": false, @@ -14,8 +18,16 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "react-jsx" + "jsx": "react-jsx", }, - "include": ["src","**/*.ts", "**/*.tsx"], - "references": [{ "path": "./tsconfig.node.json" }] -} + "include": [ + "src", + "**/*.ts", + "**/*.tsx" + ], + "references": [ + { + "path": "./tsconfig.node.json" + } + ] +} \ No newline at end of file