From 62f67c1255f15f3314ca048d2dd710d0cbfa6275 Mon Sep 17 00:00:00 2001 From: cmavelis Date: Fri, 8 Mar 2019 16:15:13 -0500 Subject: [PATCH 1/9] removed cardID from Game state --- src/Game.js | 3 --- src/components/Board.js | 3 +-- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/src/Game.js b/src/Game.js index eccffc2..2fd1c3e 100644 --- a/src/Game.js +++ b/src/Game.js @@ -27,7 +27,6 @@ class Game extends React.Component { this.state = { words: Array(25).fill('-'), cardColors: cardColorsSample, - cardIDs: [0, 1, 2, 3, 4].map(i => Array(5).fill(i)), cardShownStatus: Array(25).fill(false), modalShown: false, cardClicked: null, @@ -235,7 +234,6 @@ class Game extends React.Component { const { cardShownStatus, words, - cardIDs, cardColors, modalShown, cardClicked, @@ -257,7 +255,6 @@ class Game extends React.Component { /> Array(5).fill(i)); // TODO: simplify into a range return (
{cardIDs.map((row, i) => ( @@ -58,7 +58,6 @@ Board.propTypes = { onClick: PropTypes.func.isRequired, words: PropTypes.arrayOf(PropTypes.string).isRequired, squares: PropTypes.arrayOf(PropTypes.bool).isRequired, - cardIDs: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)).isRequired, cardColors: PropTypes.arrayOf(PropTypes.string).isRequired, cardLeaderMarks: PropTypes.arrayOf(PropTypes.bool).isRequired, }; From cafbd61b29f9378cbf5554b1836830cbada7952e Mon Sep 17 00:00:00 2001 From: cmavelis Date: Fri, 8 Mar 2019 17:06:22 -0500 Subject: [PATCH 2/9] in the middle of ripping things apart --- src/Game.js | 62 +----------- src/{Game.css => GameContext.css} | 0 src/GameContext.js | 154 ++++++++++++++++++++++++++++++ src/index.js | 3 +- 4 files changed, 157 insertions(+), 62 deletions(-) rename src/{Game.css => GameContext.css} (100%) create mode 100644 src/GameContext.js diff --git a/src/Game.js b/src/Game.js index 2fd1c3e..c93a3fd 100644 --- a/src/Game.js +++ b/src/Game.js @@ -1,11 +1,8 @@ import _ from 'underscore'; -import axios from 'axios'; import React from 'react'; import Board from './components/Board'; import CardCounter from './components/CardCounter'; -import Header from './components/Header'; import Modal from './components/Modal'; -import './Game.css'; import 'seedrandom'; @@ -30,29 +27,8 @@ class Game extends React.Component { cardShownStatus: Array(25).fill(false), modalShown: false, cardClicked: null, - randomSeed: null, counts: _.countBy(cardColorsSample), - headerIsHidden: false, - leaderMode: false, cardLeaderMarks: Array(25).fill(false), - wordFiles: { - cardsClassic: { - fileName: 'words_classic.csv', - isLoading: true, - }, - cardsSimple: { - fileName: 'words_simple.csv', - isLoading: true, - }, - seedAdjectives: { - fileName: 'seed_adjectives.csv', - isLoading: true, - }, - seedNouns: { - fileName: 'seed_nouns.csv', - isLoading: true, - }, - }, }; } @@ -77,36 +53,7 @@ class Game extends React.Component { } } - getWordData = () => { - const { wordFiles } = this.state; - Object.entries(wordFiles) - .forEach(([objTitle, objContent]) => { - const { fileName } = objContent; - axios.get(fileName) - .then((wordsReceived) => { - const wordList = wordsReceived.data.split(/\r?\n/); - const listLength = wordList.length - 1; - return { - wordList, - listLength, - isLoading: false, - }; - }) - .then((wordData) => { - this.setState(prevState => ({ - wordFiles: { - ...prevState.wordFiles, - [objTitle]: - wordData, - }, - })); - }) - .catch(error => this.setState({ error, isLoading: false })); - }); - this.setState({ - isLoading: false, - }); - }; + showModal = (cardID) => { this.setState({ @@ -246,13 +193,6 @@ class Game extends React.Component { return (
-
{ +// const { wordFiles } = props; +// if (!Object.entries(wordFiles).some(obj => obj[1].isLoading) { +// return ( +// +// ) +// } +// } + +class GameContext extends React.Component { + constructor(props) { + super(props); + this.state = { + randomSeed: null, + headerIsHidden: false, + leaderMode: false, + wordFiles: { + cardsClassic: { + fileName: 'words_classic.csv', + isLoading: true, + }, + cardsSimple: { + fileName: 'words_simple.csv', + isLoading: true, + }, + seedAdjectives: { + fileName: 'seed_adjectives.csv', + isLoading: true, + }, + seedNouns: { + fileName: 'seed_nouns.csv', + isLoading: true, + }, + }, + }; + } + + componentDidMount() { + this.getWordData(); + } + + getWordData = () => { + const { wordFiles } = this.state; + Object.entries(wordFiles) + .forEach(([objTitle, objContent]) => { + const { fileName } = objContent; + axios.get(fileName) + .then((wordsReceived) => { + const wordList = wordsReceived.data.split(/\r?\n/); + const listLength = wordList.length - 1; + return { + wordList, + listLength, + isLoading: false, + }; + }) + .then((wordData) => { + this.setState(prevState => ({ + wordFiles: { + ...prevState.wordFiles, + [objTitle]: + wordData, + }, + })); + }) + .catch(error => this.setState({ error, })); + }); + }; + + render() { + const { + cardShownStatus, + words, + cardColors, + modalShown, + cardClicked, + counts, + randomSeed, + headerIsHidden, + cardLeaderMarks, + wordFiles, + } = this.state; + + return ( +
+ {/**/} + {wordFiles.cardsClassic.isLoading + ? + ( +

Loading Classic...

+ ) : + ( +

Classic loaded

+ ) + } + {wordFiles.cardsSimple.isLoading + ? + ( +

Loading...

+ ) : + ( +

Simple loaded

+ ) + } + {wordFiles.seedAdjectives.isLoading + ? + ( +

Loading...

+ ) : + ( +

Adj loaded

+ ) + } + {wordFiles.seedNouns.isLoading + ? + ( +

Loading...

+ ) : + ( +

Nouns loaded

+ ) + } + {/*{Object.entries(wordFiles).some(obj => obj[1].isLoading)*/} + {/*? (*/} + {/*

Loading...

*/} + {/*)*/} + {/*: (*/} + {/**/} + {/*)*/} + + {/*}*/} + +
+ ) + } + +} + +export default GameContext; diff --git a/src/index.js b/src/index.js index 7b9ce09..d71a2f1 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,8 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; -import Game from './Game'; +// import Game from './Game'; +import Game from './GameContext'; import registerServiceWorker from './registerServiceWorker'; ReactDOM.render(, document.getElementById('root')); From 3bc5c927467803e3f78472941c0e600728336a10 Mon Sep 17 00:00:00 2001 From: cmavelis Date: Mon, 11 Mar 2019 15:13:02 -0400 Subject: [PATCH 3/9] got basic functions back together and more streamlined --- src/Game.js | 66 +++++---- src/GameContext.js | 154 --------------------- src/GameLoader.js | 126 +++++++++++++++++ src/components/{Header.js => SetupMenu.js} | 6 +- src/index.js | 2 +- 5 files changed, 161 insertions(+), 193 deletions(-) delete mode 100644 src/GameContext.js create mode 100644 src/GameLoader.js rename src/components/{Header.js => SetupMenu.js} (94%) diff --git a/src/Game.js b/src/Game.js index c93a3fd..e3db9e3 100644 --- a/src/Game.js +++ b/src/Game.js @@ -33,27 +33,39 @@ class Game extends React.Component { } componentDidMount() { - this.getWordData(); + console.log('game mounted'); + const { wordFiles, setSeed } = this.props; + Math.seedrandom(Date.now()); + const randomAdjective = this.getRandomWord(wordFiles.seedAdjectives); + const randomNoun = this.getRandomWord(wordFiles.seedNouns); + const newSeed = `${randomAdjective} ${randomNoun}`; + setSeed(newSeed); + this.seedNewGame(newSeed); } - componentDidUpdate() { - const { wordFiles, randomSeed } = this.state; - - if (!randomSeed) { - if (!Object.entries(wordFiles).some(obj => obj[1].isLoading)) { - Math.seedrandom(Date.now()); - const randomAdjective = this.getRandomWord(wordFiles.seedAdjectives); - const randomNoun = this.getRandomWord(wordFiles.seedNouns); - const newSeed = `${randomAdjective} ${randomNoun}`; - this.setState( - { randomSeed: newSeed }, - ); - this.seedNewGame(newSeed); - } + componentDidUpdate(prevProps) { + const { randomSeed } = this.props; + console.log('game updated'); + if (prevProps.randomSeed !== randomSeed) { + this.seedNewGame(randomSeed); } - } - + // const { randomSeed } = this.props; + // if (randomSeed) { this.seedNewGame(randomSeed); } + + // if (!randomSeed) { + // if (!Object.entries(wordFiles).some(obj => obj[1].isLoading)) { + // Math.seedrandom(Date.now()); + // const randomAdjective = this.getRandomWord(wordFiles.seedAdjectives); + // const randomNoun = this.getRandomWord(wordFiles.seedNouns); + // const newSeed = `${randomAdjective} ${randomNoun}`; + // this.setState( + // { randomSeed: newSeed }, + // ); + // this.seedNewGame(newSeed); + // } + // } + } showModal = (cardID) => { this.setState({ @@ -66,13 +78,6 @@ class Game extends React.Component { this.setState({ modalShown: false, cardClicked: undefined }); }; - handleInputChange = (e) => { - const { name, value } = e.target; - const newSeed = value.toLowerCase(); - this.setState({ [name]: newSeed }); - this.seedNewGame(newSeed); - }; - getRandomWord = (wordObject) => { const { wordList, listLength } = wordObject; return wordList[Math.floor(Math.random() * listLength)]; @@ -80,7 +85,7 @@ class Game extends React.Component { seedNewGame = (newSeed) => { let randomSeed = newSeed; - const { wordFiles } = this.state; + const { wordFiles } = this.props; const { wordList, listLength } = wordFiles.cardsClassic; const today = new Date(); const todayValue = today.getUTCFullYear().toString() @@ -121,14 +126,7 @@ class Game extends React.Component { words: wordsSelected, leaderMode: false, }); - this.updateBoard(newCardColors); - }; - - toggleHeaderHide = () => { - const { headerIsHidden } = this.state; - this.setState({ - headerIsHidden: !headerIsHidden, - }); + // this.updateBoard(newCardColors); }; updateBoard = () => { @@ -185,8 +183,6 @@ class Game extends React.Component { modalShown, cardClicked, counts, - randomSeed, - headerIsHidden, cardLeaderMarks, } = this.state; diff --git a/src/GameContext.js b/src/GameContext.js deleted file mode 100644 index d55b068..0000000 --- a/src/GameContext.js +++ /dev/null @@ -1,154 +0,0 @@ -import Header from './components/Header'; -import Game from './Game.js'; -import './GameContext.css'; -import React from 'react'; -import axios from 'axios'; - - -// const loadedGame = (props) => { -// const { wordFiles } = props; -// if (!Object.entries(wordFiles).some(obj => obj[1].isLoading) { -// return ( -// -// ) -// } -// } - -class GameContext extends React.Component { - constructor(props) { - super(props); - this.state = { - randomSeed: null, - headerIsHidden: false, - leaderMode: false, - wordFiles: { - cardsClassic: { - fileName: 'words_classic.csv', - isLoading: true, - }, - cardsSimple: { - fileName: 'words_simple.csv', - isLoading: true, - }, - seedAdjectives: { - fileName: 'seed_adjectives.csv', - isLoading: true, - }, - seedNouns: { - fileName: 'seed_nouns.csv', - isLoading: true, - }, - }, - }; - } - - componentDidMount() { - this.getWordData(); - } - - getWordData = () => { - const { wordFiles } = this.state; - Object.entries(wordFiles) - .forEach(([objTitle, objContent]) => { - const { fileName } = objContent; - axios.get(fileName) - .then((wordsReceived) => { - const wordList = wordsReceived.data.split(/\r?\n/); - const listLength = wordList.length - 1; - return { - wordList, - listLength, - isLoading: false, - }; - }) - .then((wordData) => { - this.setState(prevState => ({ - wordFiles: { - ...prevState.wordFiles, - [objTitle]: - wordData, - }, - })); - }) - .catch(error => this.setState({ error, })); - }); - }; - - render() { - const { - cardShownStatus, - words, - cardColors, - modalShown, - cardClicked, - counts, - randomSeed, - headerIsHidden, - cardLeaderMarks, - wordFiles, - } = this.state; - - return ( -
- {/**/} - {wordFiles.cardsClassic.isLoading - ? - ( -

Loading Classic...

- ) : - ( -

Classic loaded

- ) - } - {wordFiles.cardsSimple.isLoading - ? - ( -

Loading...

- ) : - ( -

Simple loaded

- ) - } - {wordFiles.seedAdjectives.isLoading - ? - ( -

Loading...

- ) : - ( -

Adj loaded

- ) - } - {wordFiles.seedNouns.isLoading - ? - ( -

Loading...

- ) : - ( -

Nouns loaded

- ) - } - {/*{Object.entries(wordFiles).some(obj => obj[1].isLoading)*/} - {/*? (*/} - {/*

Loading...

*/} - {/*)*/} - {/*: (*/} - {/**/} - {/*)*/} - - {/*}*/} - -
- ) - } - -} - -export default GameContext; diff --git a/src/GameLoader.js b/src/GameLoader.js new file mode 100644 index 0000000..4cf4cb2 --- /dev/null +++ b/src/GameLoader.js @@ -0,0 +1,126 @@ +import React from 'react'; +import axios from 'axios'; +import Game from './Game'; +import SetupMenu from './components/SetupMenu'; +import './GameContext.css'; + + +// const loadedGame = (props) => { +// const { wordFiles } = props; +// if (!Object.entries(wordFiles).some(obj => obj[1].isLoading) { +// return ( +// +// ) +// } +// } + +class GameLoader extends React.Component { + constructor(props) { + super(props); + this.setSeed = this.setSeed.bind(this); + this.state = { + randomSeed: null, + headerIsHidden: false, + leaderMode: false, + wordFiles: { + cardsClassic: { + fileName: 'words_classic.csv', + isLoading: true, + }, + cardsSimple: { + fileName: 'words_simple.csv', + isLoading: true, + }, + seedAdjectives: { + fileName: 'seed_adjectives.csv', + isLoading: true, + }, + seedNouns: { + fileName: 'seed_nouns.csv', + isLoading: true, + }, + }, + }; + } + + componentDidMount() { + this.getWordData(); + } + + getWordData = () => { + const { wordFiles } = this.state; + Object.entries(wordFiles) + .forEach(([objTitle, objContent]) => { + const { fileName } = objContent; + axios.get(fileName) + .then((wordsReceived) => { + const wordList = wordsReceived.data.split(/\r?\n/); + const listLength = wordList.length - 1; + return { + wordList, + listLength, + isLoading: false, + }; + }) + .then((wordData) => { + this.setState(prevState => ({ + wordFiles: { + ...prevState.wordFiles, + [objTitle]: + wordData, + }, + })); + }) + .catch(error => this.setState({ error })); + }); + }; + + setSeed = (newSeed) => { + this.setState({ randomSeed: newSeed.toLowerCase() }); + }; + + handleInputChange = (e) => { + const { value } = e.target; + this.setSeed(value); + }; + + toggleHeaderHide = () => { + this.setState(prevState => ({ headerIsHidden: !prevState.headerIsHidden })); + }; + + render() { + const { + randomSeed, + headerIsHidden, + wordFiles, + } = this.state; + + return ( +
+ {Object.entries(wordFiles).some(obj => obj[1].isLoading) + ? ( +

Loading...

+ ) + : ( +
+ + +
+ ) + } +
+ ); + } +} + +export default GameLoader; diff --git a/src/components/Header.js b/src/components/SetupMenu.js similarity index 94% rename from src/components/Header.js rename to src/components/SetupMenu.js index 4cfb545..263e559 100644 --- a/src/components/Header.js +++ b/src/components/SetupMenu.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; -const Header = ({ +const SetupMenu = ({ randomSeed, headerIsHidden, toggleHeaderHide, @@ -38,7 +38,7 @@ const Header = ({
); -Header.propTypes = { +SetupMenu.propTypes = { randomSeed: PropTypes.string.isRequired, headerIsHidden: PropTypes.bool.isRequired, toggleHeaderHide: PropTypes.func.isRequired, @@ -46,4 +46,4 @@ Header.propTypes = { showModal: PropTypes.func.isRequired, }; -export default Header; +export default SetupMenu; diff --git a/src/index.js b/src/index.js index d71a2f1..a2f20bc 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; // import Game from './Game'; -import Game from './GameContext'; +import Game from './GameLoader'; import registerServiceWorker from './registerServiceWorker'; ReactDOM.render(, document.getElementById('root')); From 4214ac6327b7b466e0ccab9dbcda3f253be07394 Mon Sep 17 00:00:00 2001 From: cmavelis Date: Mon, 11 Mar 2019 16:11:23 -0400 Subject: [PATCH 4/9] added some defaultprops --- src/Game.js | 22 ++++++---------------- src/GameLoader.js | 6 +++--- src/components/SetupMenu.js | 1 + 3 files changed, 10 insertions(+), 19 deletions(-) diff --git a/src/Game.js b/src/Game.js index e3db9e3..1e98ed7 100644 --- a/src/Game.js +++ b/src/Game.js @@ -1,5 +1,6 @@ import _ from 'underscore'; import React from 'react'; +import PropTypes from 'prop-types'; import Board from './components/Board'; import CardCounter from './components/CardCounter'; import Modal from './components/Modal'; @@ -49,22 +50,6 @@ class Game extends React.Component { if (prevProps.randomSeed !== randomSeed) { this.seedNewGame(randomSeed); } - - // const { randomSeed } = this.props; - // if (randomSeed) { this.seedNewGame(randomSeed); } - - // if (!randomSeed) { - // if (!Object.entries(wordFiles).some(obj => obj[1].isLoading)) { - // Math.seedrandom(Date.now()); - // const randomAdjective = this.getRandomWord(wordFiles.seedAdjectives); - // const randomNoun = this.getRandomWord(wordFiles.seedNouns); - // const newSeed = `${randomAdjective} ${randomNoun}`; - // this.setState( - // { randomSeed: newSeed }, - // ); - // this.seedNewGame(newSeed); - // } - // } } showModal = (cardID) => { @@ -228,5 +213,10 @@ class Game extends React.Component { } } +Game.propTypes = { + setSeed: PropTypes.func.isRequired, + wordFiles: PropTypes.arrayOf(PropTypes.string).isRequired, + randomSeed: PropTypes.string.isRequired, +}; export default Game; diff --git a/src/GameLoader.js b/src/GameLoader.js index 4cf4cb2..add45a9 100644 --- a/src/GameLoader.js +++ b/src/GameLoader.js @@ -19,9 +19,9 @@ class GameLoader extends React.Component { super(props); this.setSeed = this.setSeed.bind(this); this.state = { - randomSeed: null, + randomSeed: '', headerIsHidden: false, - leaderMode: false, + // leaderMode: false, wordFiles: { cardsClassic: { fileName: 'words_classic.csv', @@ -71,7 +71,7 @@ class GameLoader extends React.Component { }, })); }) - .catch(error => this.setState({ error })); + // .catch(error => this.setState({ error })); }); }; diff --git a/src/components/SetupMenu.js b/src/components/SetupMenu.js index 263e559..1370846 100644 --- a/src/components/SetupMenu.js +++ b/src/components/SetupMenu.js @@ -20,6 +20,7 @@ const SetupMenu = ({

Game code

Date: Mon, 11 Mar 2019 17:08:50 -0400 Subject: [PATCH 5/9] adding a new Code button so you don't need to refresh page also simplifying code --- src/Game.js | 44 +++++++++++++++-------------------- src/GameLoader.js | 46 ++++++++++++++++++++++++++----------- src/components/SetupMenu.js | 17 ++++++++++++-- 3 files changed, 66 insertions(+), 41 deletions(-) diff --git a/src/Game.js b/src/Game.js index 1e98ed7..a2d47d6 100644 --- a/src/Game.js +++ b/src/Game.js @@ -34,14 +34,8 @@ class Game extends React.Component { } componentDidMount() { - console.log('game mounted'); - const { wordFiles, setSeed } = this.props; - Math.seedrandom(Date.now()); - const randomAdjective = this.getRandomWord(wordFiles.seedAdjectives); - const randomNoun = this.getRandomWord(wordFiles.seedNouns); - const newSeed = `${randomAdjective} ${randomNoun}`; - setSeed(newSeed); - this.seedNewGame(newSeed); + const { generateNewSeed } = this.props; + generateNewSeed(); } componentDidUpdate(prevProps) { @@ -63,15 +57,20 @@ class Game extends React.Component { this.setState({ modalShown: false, cardClicked: undefined }); }; - getRandomWord = (wordObject) => { - const { wordList, listLength } = wordObject; - return wordList[Math.floor(Math.random() * listLength)]; + updateCounter = () => { + this.setState(prevState => ( + { + counts: _.countBy(prevState.cardColors.filter( + (cc, i) => !prevState.cardShownStatus[i], + )), + } + )); }; - seedNewGame = (newSeed) => { - let randomSeed = newSeed; - const { wordFiles } = this.props; - const { wordList, listLength } = wordFiles.cardsClassic; + seedNewGame = () => { + let { randomSeed } = this.props; + const { wordFile } = this.props; + const { wordList, listLength } = wordFile; const today = new Date(); const todayValue = today.getUTCFullYear().toString() + today.getUTCMonth() + today.getUTCDate(); @@ -110,8 +109,9 @@ class Game extends React.Component { cardColors: newCardColors, words: wordsSelected, leaderMode: false, + cardShownStatus: Array(25).fill(false), }); - // this.updateBoard(newCardColors); + this.updateCounter(); }; updateBoard = () => { @@ -134,13 +134,7 @@ class Game extends React.Component { } return prevState; }); - this.setState(prevState => ( - { - counts: _.countBy(prevState.cardColors.filter( - (cc, i) => !prevState.cardShownStatus[i], - )), - } - )); + this.updateCounter(); }; handleCardToggle = () => { @@ -214,8 +208,8 @@ class Game extends React.Component { } Game.propTypes = { - setSeed: PropTypes.func.isRequired, - wordFiles: PropTypes.arrayOf(PropTypes.string).isRequired, + generateNewSeed: PropTypes.func.isRequired, + wordFile: PropTypes.arrayOf(PropTypes.string).isRequired, randomSeed: PropTypes.string.isRequired, }; diff --git a/src/GameLoader.js b/src/GameLoader.js index add45a9..0ec2541 100644 --- a/src/GameLoader.js +++ b/src/GameLoader.js @@ -18,6 +18,7 @@ class GameLoader extends React.Component { constructor(props) { super(props); this.setSeed = this.setSeed.bind(this); + // this.randomizeSeed = this.randomizeSeed.bind(this); this.state = { randomSeed: '', headerIsHidden: false, @@ -70,18 +71,32 @@ class GameLoader extends React.Component { wordData, }, })); - }) - // .catch(error => this.setState({ error })); + }); + // .catch(error => this.setState({ error })); }); }; + handleInputChange = (e) => { + const { value } = e.target; + this.setSeed(value); + }; + setSeed = (newSeed) => { this.setState({ randomSeed: newSeed.toLowerCase() }); }; - handleInputChange = (e) => { - const { value } = e.target; - this.setSeed(value); + getRandomWord = (wordObject) => { + const { wordList, listLength } = wordObject; + return wordList[Math.floor(Math.random() * listLength)]; + }; + + generateNewSeed = () => { + const { wordFiles } = this.state; + Math.seedrandom(Date.now()); + const randomAdjective = this.getRandomWord(wordFiles.seedAdjectives); + const randomNoun = this.getRandomWord(wordFiles.seedNouns); + const newSeed = `${randomAdjective} ${randomNoun}`; + this.setSeed(newSeed); }; toggleHeaderHide = () => { @@ -103,17 +118,20 @@ class GameLoader extends React.Component { ) : (
- +
+ +
) diff --git a/src/components/SetupMenu.js b/src/components/SetupMenu.js index 1370846..1d5a5a7 100644 --- a/src/components/SetupMenu.js +++ b/src/components/SetupMenu.js @@ -8,6 +8,7 @@ const SetupMenu = ({ toggleHeaderHide, handleInputChange, showModal, + generateNewSeed, }) => (
+
@@ -45,6 +57,7 @@ SetupMenu.propTypes = { toggleHeaderHide: PropTypes.func.isRequired, handleInputChange: PropTypes.func.isRequired, showModal: PropTypes.func.isRequired, + generateNewSeed: PropTypes.func.isRequired, }; export default SetupMenu; From 89caa342bb385de4a6135c0ba6d16de47d3d1bc2 Mon Sep 17 00:00:00 2001 From: cmavelis Date: Mon, 11 Mar 2019 17:33:42 -0400 Subject: [PATCH 6/9] getting all the features back, but need a solution for the modal --- src/Game.js | 26 ++++++++++++++++++++++---- src/GameLoader.js | 7 +++++++ src/components/SetupMenu.js | 6 +++--- 3 files changed, 32 insertions(+), 7 deletions(-) diff --git a/src/Game.js b/src/Game.js index a2d47d6..dc96f5d 100644 --- a/src/Game.js +++ b/src/Game.js @@ -39,11 +39,23 @@ class Game extends React.Component { } componentDidUpdate(prevProps) { - const { randomSeed } = this.props; + const { randomSeed, leaderMode } = this.props; console.log('game updated'); if (prevProps.randomSeed !== randomSeed) { this.seedNewGame(randomSeed); } + if (prevProps.leaderMode !== leaderMode) { + if (leaderMode) { + this.setState({ + cardShownStatus: Array(25).fill(leaderMode), + }); + } else { + this.setState({ + cardShownStatus: Array(25).fill(leaderMode), + cardLeaderMarks: Array(25).fill(false), + }); + } + } } showModal = (cardID) => { @@ -108,13 +120,14 @@ class Game extends React.Component { this.setState({ cardColors: newCardColors, words: wordsSelected, - leaderMode: false, cardShownStatus: Array(25).fill(false), + cardLeaderMarks: Array(25).fill(false), }); this.updateCounter(); }; updateBoard = () => { + const { leaderMode } = this.props; // change revealed status of clicked card // if LEADER, mark instead of reveal, since all will be revealed @@ -123,10 +136,14 @@ class Game extends React.Component { const prevClick = prevState.cardClicked; let updateArray; if (!_.isNaN(prevClick)) { - if (prevState.leaderMode) { + if (leaderMode) { updateArray = prevState.cardLeaderMarks; updateArray[prevClick] = !updateArray[prevClick]; - return { cardLeaderMarks: updateArray }; + return { + cardLeaderMarks: updateArray, + cardShownStatus: Array(25) + .fill(true), + }; } updateArray = prevState.cardShownStatus; updateArray[prevClick] = !updateArray[prevClick]; @@ -211,6 +228,7 @@ Game.propTypes = { generateNewSeed: PropTypes.func.isRequired, wordFile: PropTypes.arrayOf(PropTypes.string).isRequired, randomSeed: PropTypes.string.isRequired, + leaderMode: PropTypes.bool.isRequired, }; export default Game; diff --git a/src/GameLoader.js b/src/GameLoader.js index 0ec2541..b5d8b26 100644 --- a/src/GameLoader.js +++ b/src/GameLoader.js @@ -103,11 +103,16 @@ class GameLoader extends React.Component { this.setState(prevState => ({ headerIsHidden: !prevState.headerIsHidden })); }; + toggleLeaderMode = () => { + this.setState(prevState => ({ leaderMode: !prevState.leaderMode })); + }; + render() { const { randomSeed, headerIsHidden, wordFiles, + leaderMode, } = this.state; return ( @@ -123,6 +128,7 @@ class GameLoader extends React.Component { randomSeed={randomSeed} headerIsHidden={headerIsHidden} toggleHeaderHide={this.toggleHeaderHide} + toggleLeaderMode={this.toggleLeaderMode} handleInputChange={this.handleInputChange} showModal={this.showModal} generateNewSeed={this.generateNewSeed} @@ -132,6 +138,7 @@ class GameLoader extends React.Component { randomSeed={randomSeed} wordFile={wordFiles.cardsClassic} generateNewSeed={this.generateNewSeed} + leaderMode={leaderMode} />
) diff --git a/src/components/SetupMenu.js b/src/components/SetupMenu.js index 1d5a5a7..1ea5714 100644 --- a/src/components/SetupMenu.js +++ b/src/components/SetupMenu.js @@ -6,8 +6,8 @@ const SetupMenu = ({ randomSeed, headerIsHidden, toggleHeaderHide, + toggleLeaderMode, handleInputChange, - showModal, generateNewSeed, }) => (
@@ -42,7 +42,7 @@ const SetupMenu = ({ @@ -56,7 +56,7 @@ SetupMenu.propTypes = { headerIsHidden: PropTypes.bool.isRequired, toggleHeaderHide: PropTypes.func.isRequired, handleInputChange: PropTypes.func.isRequired, - showModal: PropTypes.func.isRequired, + toggleLeaderMode: PropTypes.func.isRequired, generateNewSeed: PropTypes.func.isRequired, }; From 2b2dbd84c1079e9f457b687ba00bf85e036e70d3 Mon Sep 17 00:00:00 2001 From: cmavelis Date: Mon, 11 Mar 2019 17:52:23 -0400 Subject: [PATCH 7/9] tiny edits --- src/GameLoader.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/GameLoader.js b/src/GameLoader.js index b5d8b26..5697be1 100644 --- a/src/GameLoader.js +++ b/src/GameLoader.js @@ -18,11 +18,10 @@ class GameLoader extends React.Component { constructor(props) { super(props); this.setSeed = this.setSeed.bind(this); - // this.randomizeSeed = this.randomizeSeed.bind(this); this.state = { randomSeed: '', headerIsHidden: false, - // leaderMode: false, + leaderMode: false, wordFiles: { cardsClassic: { fileName: 'words_classic.csv', From d7106d2cebc804b9f2f68dd17da6e57625e1537d Mon Sep 17 00:00:00 2001 From: cmavelis Date: Tue, 12 Mar 2019 12:19:14 -0400 Subject: [PATCH 8/9] moving css import --- src/GameContext.css | 230 ------------------------------------------- src/GameLoader.js | 1 - src/index.css | 231 +++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 228 insertions(+), 234 deletions(-) delete mode 100644 src/GameContext.css diff --git a/src/GameContext.css b/src/GameContext.css deleted file mode 100644 index 15d32da..0000000 --- a/src/GameContext.css +++ /dev/null @@ -1,230 +0,0 @@ -:root { - --main-bg-color:#384d48; - --palette-red:#db5a69; - --palette-blue:#5bafd9; - --card-bg-color:#ffeecf; - --card-border:#999 -} - -body { - font: 0.9rem "Century Gothic", Futura, sans-serif; - margin: 20px; - background: var(--main-bg-color); -} - -button { - font: inherit; - background: #ebe8e8; - border-radius: 0.2rem 0.6rem; -} - -input { - font: inherit; -} - -header { - background: var(--card-bg-color); - border-radius: 10px; - display: flex; - flex-direction: row; - justify-content: space-around; - padding: 0.8rem; - margin-bottom: 0.5rem; -} - -.hiding-box { - max-height: 20rem; - transition: max-height 1s ease-in-out; -} - -.hiding-box-hidden { - max-height: 1.2rem; -} -.hiding-box-hidden .utilities-box { - max-height: 0; -} - -.hide-button { - height: 1.2rem; - width: 1.2rem; -} - -ol, ul { - padding-left: 30px; -} - -p { - text-align: center; - margin-top: 0.3rem; - margin-bottom: 0.3rem; -} - -.board-row { - display: flex; - justify-content: center; - flex-shrink: initial; -} - -.board-row:after { - /*clear: both;*/ - /*content: "";*/ - /*display: table;*/ -} - -.card { - background: var(--card-bg-color); - border: 6px solid var(--card-border); - border-radius: 10px; - /*float: left;*/ - font-size: 2.2vw; - font-weight: bold; - line-height: 34px; - /*height: 10%;*/ - margin: 5px; - padding: 0.8vw 1vw; - text-align: center; - width: 20%; - /*max-width: 200px;*/ - flex-shrink: 0; - overflow-x: visible; - overflow-y: visible; -} - -.card-smaller-font { - font-size: 1.9vw; -} - -.card-color-w { - background: gray; - color: white; -} - -.card-color-k { - background: black; - color: var(--palette-red); -} - -.card-color-b { - background: var(--palette-blue); - color: white; -} - -.card-color-r { - background: var(--palette-red); - color: white; -} - -.card-color-blank { - background: var(--main-bg-color); - color:white -} - -.card-leader-mark { - border-color: cyan; - /*url(*/ -/*data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVQoU2NkYGD4z4AAjEhsOBMkCFOEVQFIHqYIpwKQcbgkQXJwZ+A1AeooRmyKMDyCrgirT5EV4QwKmCK8YQUA9ToLBy+JKFgAAAAASUVORK5CYII=*/ - /*) repeat;*/ -} - -.card:focus { - outline: none; -} - -.counter { - border-width: 1px; -} - -.any-width { - width: inherit !important; -} - -.display-block { - display: block; -} - -.display-none { - display: none; -} - -.div-center { - text-align: center; -} - -.game { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.game-board { - flex-direction: column; - justify-content: center; - margin: 0 auto; - min-width: 95%; -} - -.game-info { - margin-left: 20px; -} - -.input-elements { - margin: 0.5rem; - padding: 0.3rem; - width: 75%; - align-self: center; - text-wrap: avoid; -} - -.kbd-navigation .card:focus { - background: #9c9c9c; -} - -.modal { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.6); -} - -.modal-button { - max-width: 80%; - min-height: 1rem; - font-size: 1.5rem; -} - -.modal-main { - font-size: 1.5rem; - position: fixed; - background: var(--card-bg-color); - border-radius: 10px; - min-width: 40%; - min-height: 18rem; - top: 40%; - left: 50%; - transform: translate(-50%,-50%); - display: flex; - flex-direction: column; - justify-content: center; -} - -.status { - margin-bottom: 10px; -} - -.utility-row { - display: flex; - flex-direction: row; -} - -.utilities-box { - /*width: 30%;*/ - display: flex; - flex-direction: column; - justify-content: center; - transition: max-height 0.5s ease-in-out; - max-height: 20rem; - overflow: hidden; -} diff --git a/src/GameLoader.js b/src/GameLoader.js index 5697be1..ca65326 100644 --- a/src/GameLoader.js +++ b/src/GameLoader.js @@ -2,7 +2,6 @@ import React from 'react'; import axios from 'axios'; import Game from './Game'; import SetupMenu from './components/SetupMenu'; -import './GameContext.css'; // const loadedGame = (props) => { diff --git a/src/index.css b/src/index.css index b4cc725..15d32da 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,230 @@ +:root { + --main-bg-color:#384d48; + --palette-red:#db5a69; + --palette-blue:#5bafd9; + --card-bg-color:#ffeecf; + --card-border:#999 +} + body { - margin: 0; - padding: 0; - font-family: sans-serif; + font: 0.9rem "Century Gothic", Futura, sans-serif; + margin: 20px; + background: var(--main-bg-color); +} + +button { + font: inherit; + background: #ebe8e8; + border-radius: 0.2rem 0.6rem; +} + +input { + font: inherit; +} + +header { + background: var(--card-bg-color); + border-radius: 10px; + display: flex; + flex-direction: row; + justify-content: space-around; + padding: 0.8rem; + margin-bottom: 0.5rem; +} + +.hiding-box { + max-height: 20rem; + transition: max-height 1s ease-in-out; +} + +.hiding-box-hidden { + max-height: 1.2rem; +} +.hiding-box-hidden .utilities-box { + max-height: 0; +} + +.hide-button { + height: 1.2rem; + width: 1.2rem; +} + +ol, ul { + padding-left: 30px; +} + +p { + text-align: center; + margin-top: 0.3rem; + margin-bottom: 0.3rem; +} + +.board-row { + display: flex; + justify-content: center; + flex-shrink: initial; +} + +.board-row:after { + /*clear: both;*/ + /*content: "";*/ + /*display: table;*/ +} + +.card { + background: var(--card-bg-color); + border: 6px solid var(--card-border); + border-radius: 10px; + /*float: left;*/ + font-size: 2.2vw; + font-weight: bold; + line-height: 34px; + /*height: 10%;*/ + margin: 5px; + padding: 0.8vw 1vw; + text-align: center; + width: 20%; + /*max-width: 200px;*/ + flex-shrink: 0; + overflow-x: visible; + overflow-y: visible; +} + +.card-smaller-font { + font-size: 1.9vw; +} + +.card-color-w { + background: gray; + color: white; +} + +.card-color-k { + background: black; + color: var(--palette-red); +} + +.card-color-b { + background: var(--palette-blue); + color: white; +} + +.card-color-r { + background: var(--palette-red); + color: white; +} + +.card-color-blank { + background: var(--main-bg-color); + color:white +} + +.card-leader-mark { + border-color: cyan; + /*url(*/ +/*data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVQoU2NkYGD4z4AAjEhsOBMkCFOEVQFIHqYIpwKQcbgkQXJwZ+A1AeooRmyKMDyCrgirT5EV4QwKmCK8YQUA9ToLBy+JKFgAAAAASUVORK5CYII=*/ + /*) repeat;*/ +} + +.card:focus { + outline: none; +} + +.counter { + border-width: 1px; +} + +.any-width { + width: inherit !important; +} + +.display-block { + display: block; +} + +.display-none { + display: none; +} + +.div-center { + text-align: center; +} + +.game { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.game-board { + flex-direction: column; + justify-content: center; + margin: 0 auto; + min-width: 95%; +} + +.game-info { + margin-left: 20px; +} + +.input-elements { + margin: 0.5rem; + padding: 0.3rem; + width: 75%; + align-self: center; + text-wrap: avoid; +} + +.kbd-navigation .card:focus { + background: #9c9c9c; +} + +.modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.6); +} + +.modal-button { + max-width: 80%; + min-height: 1rem; + font-size: 1.5rem; +} + +.modal-main { + font-size: 1.5rem; + position: fixed; + background: var(--card-bg-color); + border-radius: 10px; + min-width: 40%; + min-height: 18rem; + top: 40%; + left: 50%; + transform: translate(-50%,-50%); + display: flex; + flex-direction: column; + justify-content: center; +} + +.status { + margin-bottom: 10px; +} + +.utility-row { + display: flex; + flex-direction: row; +} + +.utilities-box { + /*width: 30%;*/ + display: flex; + flex-direction: column; + justify-content: center; + transition: max-height 0.5s ease-in-out; + max-height: 20rem; + overflow: hidden; } From 4df7965cc522f6660216b9f4a5588487f1bf8c8c Mon Sep 17 00:00:00 2001 From: cmavelis Date: Tue, 12 Mar 2019 12:37:10 -0400 Subject: [PATCH 9/9] cleaning entrypoint --- src/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index a2f20bc..4775f0f 100644 --- a/src/index.js +++ b/src/index.js @@ -1,9 +1,8 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; -// import Game from './Game'; -import Game from './GameLoader'; +import GameLoader from './GameLoader'; import registerServiceWorker from './registerServiceWorker'; -ReactDOM.render(, document.getElementById('root')); +ReactDOM.render(, document.getElementById('root')); registerServiceWorker();