From 2ceaec5a8fce4ac4d2087183a7fa2b76901377dc Mon Sep 17 00:00:00 2001
From: Michael Urich <80188367+mturich@users.noreply.github.com>
Date: Thu, 23 Jun 2022 22:14:09 +0200
Subject: [PATCH 4/5] dimension shift and galaxy added, data is save to local
but not loaded correcty
---
src/App.css | 5 ++
src/App.tsx | 176 ++++++++++++++++++++++++++++++++++++++------------
src/backup.ts | 19 ++++++
3 files changed, 158 insertions(+), 42 deletions(-)
create mode 100644 src/backup.ts
diff --git a/src/App.css b/src/App.css
index 5b28302..43d9fa5 100644
--- a/src/App.css
+++ b/src/App.css
@@ -41,6 +41,11 @@
text-align: center;
}
+.cols-2{
+ grid-template-columns: repeat(3, 1fr);
+ margin: auto 5rem;
+}
+
.btn {
font-size: calc(10px + 1vmin);
padding: 0.2em 1em 0.2em 1em;
diff --git a/src/App.tsx b/src/App.tsx
index 2538bfa..cb74e73 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,12 +11,22 @@ 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
+
+ // the 2. thing I did not know how to do was the Buy max button. A while loop crashed the browser :( maybe it works recursive
+ const dataRef = useRef(() => JSON.parse(localStorage.getItem('data')) ?? {});
+
const timerExpiredCallback = useRef(() => {});
const clockSpeedRef = useRef(2000);
- const timerId = useRef(-1);
- const toSaveId = useRef(-1);
+ const timerIdRef = useRef(-1);
+ const idRef = useRef(-1);
+
+ // const dataRef = useRef({});
const [tickspeedPrice, setTickspeedPrice] = useState(10);
- const [antimatter, setAntimatter] = useState(200);
+ 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);
@@ -35,47 +45,15 @@ function App() {
// if the component updates, replace the timeout callback with one that references the new
// values of `count` and `firstDimCount`
- useEffect(() => {
- const startSave = () => {
- timerId.current = setTimeout(() => {
- const toSave = {
- timerId,
- clockSpeedRef,
- tickspeedPrice,
- antimatter,
- firstDimCount,
- firstDimFactor,
- firstDimPrice,
- firstDimFactorCount,
- secondDimCount,
- secondDimFactor,
- secondDimPrice,
- secondDimFactorCount,
- thirdDimCount,
- thirdDimFactor,
- thirdDimPrice,
- thirdDimFactorCount,
- };
- console.log(toSave);
- //localStorage.setItem("data", JSON.stringify(toSave));
- startSave();
- }, 5 * 60 * 1000);
- };
- startSave();
-
- // if we ever unmount / destroy this component instance, clear the timeout
- return () => clearTimeout(timerId.current);
- }, []);
-
timerExpiredCallback.current = () => {
- setAntimatter(prevantimatter => prevantimatter + firstDimCount * firstDimFactor);
+ setAntimatter(prevAntimatter => prevAntimatter + firstDimCount * firstDimFactor);
setFirstDimCount(prevFirstDim => prevFirstDim + (secondDimCount / 10) * secondDimFactor);
setSecondDimCount(prevSecondDim => prevSecondDim + (thirdDimCount / 100) * thirdDimFactor);
};
useEffect(() => {
const startTimer = () => {
- timerId.current = setTimeout(() => {
+ timerIdRef.current = setTimeout(() => {
timerExpiredCallback.current();
startTimer();
}, clockSpeedRef.current);
@@ -83,7 +61,7 @@ function App() {
startTimer();
// if we ever unmount / destroy this component instance, clear the timeout
- return () => clearTimeout(timerId.current);
+ return () => clearTimeout(timerIdRef.current);
}, []);
const handleTickBtnClick = () => {
@@ -92,6 +70,102 @@ function App() {
setTickspeedPrice(prevPrice => prevPrice * 10);
};
+ //-------------------------------------------
+
+ // FROM HERE
+ // 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 (
@@ -105,12 +179,12 @@ function App() {
{`The current clockspeed is ${clockSpeedRef.current} ms. Reduce the tickspeed by 11%.`}
-
@@ -143,8 +217,8 @@ function App() {
setDimFactorCount={setSecondDimFactorCount}>
{`Second Dimension Cost: ${secondDimPrice}`}
-
- {secondDimCount > 0 && (
+ {/* 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 `}
+
+
);
}
diff --git a/src/backup.ts b/src/backup.ts
new file mode 100644
index 0000000..e481ec0
--- /dev/null
+++ b/src/backup.ts
@@ -0,0 +1,19 @@
+const data = {
+ timerId,
+ toSaveId,
+ clockSpeedRef,
+ tickspeedPrice,
+ antimatter,
+ firstDimCount,
+ firstDimFactor,
+ firstDimPrice,
+ firstDimFactorCount,
+ secondDimCount,
+ secondDimFactor,
+ secondDimPrice,
+ secondDimFactorCount,
+ thirdDimCount,
+ thirdDimFactor,
+ thirdDimPrice,
+ thirdDimFactorCount,
+};
From d4490e12498503a77124b881e26aaf1fa3ed2953 Mon Sep 17 00:00:00 2001
From: Michael Urich <80188367+mturich@users.noreply.github.com>
Date: Fri, 24 Jun 2022 07:45:39 +0200
Subject: [PATCH 5/5] buy max button works
---
src/App.tsx | 50 +++++++++++++++++++++++++++++++++++++++++---------
src/backup.ts | 4 ++++
2 files changed, 45 insertions(+), 9 deletions(-)
diff --git a/src/App.tsx b/src/App.tsx
index cb74e73..1a6f099 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,15 +11,16 @@ 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
+ // 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 :( maybe it works recursive
+ // 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);
@@ -64,15 +65,41 @@ function App() {
return () => clearTimeout(timerIdRef.current);
}, []);
+ //-------------------------------------------
+ // FROM HERE
+
const handleTickBtnClick = () => {
clockSpeedRef.current = clockSpeedRef.current * (1 - 0.11);
setAntimatter(prevPrice => prevPrice - tickspeedPrice);
setTickspeedPrice(prevPrice => prevPrice * 10);
};
- //-------------------------------------------
-
- // FROM HERE
+ 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 = {
@@ -116,7 +143,7 @@ function App() {
return () => clearTimeout(timerIdRef.current);
}, []);
- // this prints the saved object from local storage. It is just for dev. No final purpose
+ // this prints the saved object from local storage. It is just for dev. No final purpose
useEffect(() => {
const printStorage = () => {
idRef.current = setTimeout(() => {
@@ -176,7 +203,9 @@ function App() {
-
{`The current clockspeed is ${clockSpeedRef.current} ms. Reduce the tickspeed by 11%.`}
+
{`The current clockspeed is ${clockSpeedRef.current.toFixed(
+ 0
+ )} ms. Reduce the tickspeed by 11%.`}
-
diff --git a/src/backup.ts b/src/backup.ts
index e481ec0..7d26cd3 100644
--- a/src/backup.ts
+++ b/src/backup.ts
@@ -17,3 +17,7 @@ const data = {
thirdDimPrice,
thirdDimFactorCount,
};
+const canIstillBuy = () => {
+ if (canIstillBuyRef.current > 0) true
+ else false
+}
\ No newline at end of file