From a0a9714475109a0369dbe57d488ae6fbbcb636b1 Mon Sep 17 00:00:00 2001 From: Andrew Bonnell Date: Tue, 22 Sep 2020 18:35:06 -0700 Subject: [PATCH 1/7] full refactor to functional component and hooks --- .vercel/README.txt | 11 +++++ .vercel/project.json | 1 + TODO.md | 7 +++ src/App.js | 88 +++++++++++++++++++++++++++++++++++ src/index.js | 107 +------------------------------------------ 5 files changed, 108 insertions(+), 106 deletions(-) create mode 100644 .vercel/README.txt create mode 100644 .vercel/project.json create mode 100644 TODO.md create mode 100644 src/App.js diff --git a/.vercel/README.txt b/.vercel/README.txt new file mode 100644 index 0000000..525d8ce --- /dev/null +++ b/.vercel/README.txt @@ -0,0 +1,11 @@ +> Why do I have a folder named ".vercel" in my project? +The ".vercel" folder is created when you link a directory to a Vercel project. + +> What does the "project.json" file contain? +The "project.json" file contains: +- The ID of the Vercel project that you linked ("projectId") +- The ID of the user or team your Vercel project is owned by ("orgId") + +> Should I commit the ".vercel" folder? +No, you should not share the ".vercel" folder with anyone. +Upon creation, it will be automatically added to your ".gitignore" file. diff --git a/.vercel/project.json b/.vercel/project.json new file mode 100644 index 0000000..84ae2f8 --- /dev/null +++ b/.vercel/project.json @@ -0,0 +1 @@ +{"orgId":"Lk5ehVPmtW9fKP4yoiVKOS6f","projectId":"QmaCm9sa4yNR1q6TEo5RwtPXm5yFmPurDnS2DB6vjNKFnt"} \ No newline at end of file diff --git a/TODO.md b/TODO.md new file mode 100644 index 0000000..5cee354 --- /dev/null +++ b/TODO.md @@ -0,0 +1,7 @@ +Refactor to use hooks +Previous rolls in sidebar +Animated dice roll, send alert w/ iframe? + +- https://codesandbox.io/s/r3f-cannon-instanced-physics-l40oh + +Complications diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..21cff68 --- /dev/null +++ b/src/App.js @@ -0,0 +1,88 @@ +import './index.css'; + +import React, { useState, useEffect } from 'react'; +import TensionButton from './TensionButton/TensionButton'; +import TensionCard from './TensionCard/TensionCard'; +// import RollHistory from './RollHistory'; +import Usage from './Usage'; + +const App = () => { + const [currentPool, setCurrentPool] = useState(0); + const [rollResults, setRollResults] = useState([]); + //addAndRoll toggles when incrementPoolAndRoll is called, triggering rollHelper(currentPool) via an Effect Hook + const [addAndRoll, setAddAndRoll] = useState(false); + + //Adds one to state of currentPool + const incrementPool = () => { + //setCurrentPool(() => {...}) is used to force a state change and render immediately rather than waiting for next batch + setCurrentPool(currentPool + 1); + }; + + const rollHelper = pool => { + //Forced state change repeated from above + return setRollResults( + //Creates an array of length = state.currentPool by defining an object { length: currentPool } + //Fills array with random numbers 1-6 + //Concats array values and returns as string seperated by ', ' to be readable + Array.from({ length: pool }, () => Math.ceil(Math.random() * 6)) + ); + }; + + //ALWAYS ROLL ONE DIE, even if the current pool has no dice in it + //If currentPool === 0, sets currentPool = 1, calls rollHelper, then sets back to 0 + //If currentPool > 0, calls rollHelper + const rollAndKeep = () => { + //If currentPool === 0, is falsy. 1 is truthy. Or will return truthy value. + rollHelper(currentPool || 1); + }; + + //Increments pool, changes state of addAndRoll + const incrementPoolAndRoll = () => { + incrementPool(); + setAddAndRoll(!addAndRoll); + }; + + //When addAndRoll changes state, roll currentPool + //addAndRoll ONLY CHANGES when incrementPoolAndRoll is called + useEffect(() => { + rollHelper(currentPool); + }, [addAndRoll]); + + //Rolls pool and resets to 0 if it hits 6 or more + useEffect(() => { + if (currentPool >= 6) { + rollHelper(currentPool); + setCurrentPool(0); + } + }, [currentPool]); + + return ( +
+
+ + +
+
+ + + +
+
+ {/*TODO implement rollResults history logging. Requires redux?*/} + {/* Cant get this to work. Will need to revisit at later date. */} + {/* */} +
+
+ +
+
+ ); +}; + +export default App; diff --git a/src/index.js b/src/index.js index d6b38f1..f1d1376 100644 --- a/src/index.js +++ b/src/index.js @@ -1,110 +1,5 @@ -import './index.css'; - import React from 'react'; import ReactDOM from 'react-dom'; -import TensionButton from './TensionButton/TensionButton'; -import TensionCard from './TensionCard/TensionCard'; -// import RollHistory from './RollHistory'; -import Usage from './Usage'; - -class App extends React.Component { - state = { currentPool: 0, rollResults: [] }; - - //Adds one to state of currentPool - incrementPool = () => { - //setState(state => {...}) is used to force a state change and render immediately rather than waiting for next batch - this.setState(state => { - return { currentPool: state.currentPool + 1 }; - }); - }; - - //Increments and rolls - incrementPoolAndRoll = () => { - this.incrementPool(); - this.rollAndKeep(); - }; - - //ALWAYS ROLL ONE DIE, even if the current pool has no dice in it - //If currentPool === 0, sets currentPool = 1, calls rollHelper, then sets back to 0 - //If currentPool > 0, calls rollHelper - rollAndKeep = () => { - if (this.state.currentPool === 0) { - this.setState(() => { - return { - currentPool: 1, - }; - }); - this.rollHelper(); - this.setState(() => { - return { - currentPool: 0, - }; - }); - } else { - this.rollHelper(); - } - }; - - //Sets state of rollResults to array of length this.state.currentPool filled with random values between 1 and 6 - rollHelper = () => { - //Forced state change repeated from above - this.setState(state => { - return { - //Creates an array of length = state.currentPool by defining an object { length: state.currentPool } - //Fills array with random numbers 1-6 - //Concats array values and returns as string seperated by ', ' to be readable - rollResults: Array.from({ length: state.currentPool }, () => - Math.ceil(Math.random() * 6) - ), - }; - }); - }; - - render() { - return ( -
-
- - -
-
- - - -
-
- {/*TODO implement rollResults history logging. Requires redux?*/} - {/* Cant get this to work. Will need to revisit at later date. */} - {/* */} -
-
- -
-
- ); - } - - componentDidUpdate() { - if (this.state.currentPool >= 6) { - this.rollHelper(); - this.setState({ currentPool: 0 }); - } - } -} +import App from './App'; ReactDOM.render(, document.querySelector('#root')); From a206a85c0bb7e23f50b4b31471cddbbf85fdd3c7 Mon Sep 17 00:00:00 2001 From: Andrew Bonnell Date: Tue, 22 Sep 2020 18:48:50 -0700 Subject: [PATCH 2/7] component cleanup, convert to jsx --- src/{index.css => App.css} | 0 src/{App.js => App.jsx} | 8 ++++---- src/{ => Components}/RollHistory.js | 0 .../TensionButton/TensionButton.jsx} | 0 src/{ => Components}/TensionCard/TensionCard.css | 0 .../TensionCard/TensionCard.jsx} | 4 ---- src/{ => Components/Usage}/Usage.css | 0 src/{Usage.js => Components/Usage/Usage.jsx} | 0 src/{index.js => index.jsx} | 0 9 files changed, 4 insertions(+), 8 deletions(-) rename src/{index.css => App.css} (100%) rename src/{App.js => App.jsx} (93%) rename src/{ => Components}/RollHistory.js (100%) rename src/{TensionButton/TensionButton.js => Components/TensionButton/TensionButton.jsx} (100%) rename src/{ => Components}/TensionCard/TensionCard.css (100%) rename src/{TensionCard/TensionCard.js => Components/TensionCard/TensionCard.jsx} (87%) rename src/{ => Components/Usage}/Usage.css (100%) rename src/{Usage.js => Components/Usage/Usage.jsx} (100%) rename src/{index.js => index.jsx} (100%) diff --git a/src/index.css b/src/App.css similarity index 100% rename from src/index.css rename to src/App.css diff --git a/src/App.js b/src/App.jsx similarity index 93% rename from src/App.js rename to src/App.jsx index 21cff68..ba3ce92 100644 --- a/src/App.js +++ b/src/App.jsx @@ -1,10 +1,10 @@ -import './index.css'; +import './App.css'; import React, { useState, useEffect } from 'react'; -import TensionButton from './TensionButton/TensionButton'; -import TensionCard from './TensionCard/TensionCard'; +import TensionButton from './Components/TensionButton/TensionButton'; +import TensionCard from './Components/TensionCard/TensionCard'; // import RollHistory from './RollHistory'; -import Usage from './Usage'; +import Usage from './Components/Usage/Usage'; const App = () => { const [currentPool, setCurrentPool] = useState(0); diff --git a/src/RollHistory.js b/src/Components/RollHistory.js similarity index 100% rename from src/RollHistory.js rename to src/Components/RollHistory.js diff --git a/src/TensionButton/TensionButton.js b/src/Components/TensionButton/TensionButton.jsx similarity index 100% rename from src/TensionButton/TensionButton.js rename to src/Components/TensionButton/TensionButton.jsx diff --git a/src/TensionCard/TensionCard.css b/src/Components/TensionCard/TensionCard.css similarity index 100% rename from src/TensionCard/TensionCard.css rename to src/Components/TensionCard/TensionCard.css diff --git a/src/TensionCard/TensionCard.js b/src/Components/TensionCard/TensionCard.jsx similarity index 87% rename from src/TensionCard/TensionCard.js rename to src/Components/TensionCard/TensionCard.jsx index 9834dd9..f423108 100644 --- a/src/TensionCard/TensionCard.js +++ b/src/Components/TensionCard/TensionCard.jsx @@ -12,8 +12,4 @@ const TensionCard = ({ label, value }) => { ); }; -TensionCard.defaultProps = { - value: 5, -}; - export default TensionCard; diff --git a/src/Usage.css b/src/Components/Usage/Usage.css similarity index 100% rename from src/Usage.css rename to src/Components/Usage/Usage.css diff --git a/src/Usage.js b/src/Components/Usage/Usage.jsx similarity index 100% rename from src/Usage.js rename to src/Components/Usage/Usage.jsx diff --git a/src/index.js b/src/index.jsx similarity index 100% rename from src/index.js rename to src/index.jsx From 199f48ebad1eb79566e6e8027a63416865ac7ff1 Mon Sep 17 00:00:00 2001 From: Andrew Bonnell Date: Tue, 22 Sep 2020 19:00:36 -0700 Subject: [PATCH 3/7] todo --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index 4d29575..d460ac3 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +TODO.md \ No newline at end of file From fc46ff881ad9487538733865a8a5817f5c40db0e Mon Sep 17 00:00:00 2001 From: Andrew Bonnell <62351448+abonnell@users.noreply.github.com> Date: Tue, 22 Sep 2020 19:01:09 -0700 Subject: [PATCH 4/7] Delete TODO.md --- TODO.md | 7 ------- 1 file changed, 7 deletions(-) delete mode 100644 TODO.md diff --git a/TODO.md b/TODO.md deleted file mode 100644 index 5cee354..0000000 --- a/TODO.md +++ /dev/null @@ -1,7 +0,0 @@ -Refactor to use hooks -Previous rolls in sidebar -Animated dice roll, send alert w/ iframe? - -- https://codesandbox.io/s/r3f-cannon-instanced-physics-l40oh - -Complications From 6d279c1c4bbf57dc58d352805f1d4dc5fe1d2c7c Mon Sep 17 00:00:00 2001 From: Andrew Bonnell Date: Tue, 22 Sep 2020 19:02:40 -0700 Subject: [PATCH 5/7] vercel gitignore --- .gitignore | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index d460ac3..5221c19 100644 --- a/.gitignore +++ b/.gitignore @@ -22,4 +22,6 @@ npm-debug.log* yarn-debug.log* yarn-error.log* -TODO.md \ No newline at end of file +TODO.md + +.vercel \ No newline at end of file From f56c579d534f209cb86aab62ee149662ea981397 Mon Sep 17 00:00:00 2001 From: Andrew Bonnell <62351448+abonnell@users.noreply.github.com> Date: Tue, 22 Sep 2020 19:04:33 -0700 Subject: [PATCH 6/7] Delete README.txt --- .vercel/README.txt | 11 ----------- 1 file changed, 11 deletions(-) delete mode 100644 .vercel/README.txt diff --git a/.vercel/README.txt b/.vercel/README.txt deleted file mode 100644 index 525d8ce..0000000 --- a/.vercel/README.txt +++ /dev/null @@ -1,11 +0,0 @@ -> Why do I have a folder named ".vercel" in my project? -The ".vercel" folder is created when you link a directory to a Vercel project. - -> What does the "project.json" file contain? -The "project.json" file contains: -- The ID of the Vercel project that you linked ("projectId") -- The ID of the user or team your Vercel project is owned by ("orgId") - -> Should I commit the ".vercel" folder? -No, you should not share the ".vercel" folder with anyone. -Upon creation, it will be automatically added to your ".gitignore" file. From 0b09db8febd8936480cadfabbe8300a29270e1d1 Mon Sep 17 00:00:00 2001 From: Andrew Bonnell <62351448+abonnell@users.noreply.github.com> Date: Tue, 22 Sep 2020 19:04:38 -0700 Subject: [PATCH 7/7] Delete project.json --- .vercel/project.json | 1 - 1 file changed, 1 deletion(-) delete mode 100644 .vercel/project.json diff --git a/.vercel/project.json b/.vercel/project.json deleted file mode 100644 index 84ae2f8..0000000 --- a/.vercel/project.json +++ /dev/null @@ -1 +0,0 @@ -{"orgId":"Lk5ehVPmtW9fKP4yoiVKOS6f","projectId":"QmaCm9sa4yNR1q6TEo5RwtPXm5yFmPurDnS2DB6vjNKFnt"} \ No newline at end of file