Merge pull request #34 from cmavelis/leader-mode

Leader mode added
cmavelis · Mar 8, 2019 · b4cb6f7 · b4cb6f7
2 parents 825c147 + e6f8f9e
commit b4cb6f7
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 70 deletions.
diff --git a/src/Game.css b/src/Game.css
@@ -119,6 +119,13 @@ p {
     color:white
 }
 
+.card-leader-mark {
+    border-color: cyan;
+   /*url(*/
+/*data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVQoU2NkYGD4z4AAjEhsOBMkCFOEVQFIHqYIpwKQcbgkQXJwZ+A1AeooRmyKMDyCrgirT5EV4QwKmCK8YQUA9ToLBy+JKFgAAAAASUVORK5CYII=*/
+    /*) repeat;*/
+}
+
 .card:focus {
     outline: none;
 }

diff --git a/src/Game.js b/src/Game.js
@@ -59,7 +59,7 @@ const getWords = () => {
         });
 };
 
-const promiseGetWords = new Promise((succeed, fail) => {
+const promiseGetWords = new Promise((succeed) => {
     succeed(getWords());
 });
 
@@ -82,16 +82,14 @@ class Game extends React.Component {
             words: Array(25).fill(''),
             cardColors: cardColorsSample,
             cardIDs: [0, 1, 2, 3, 4].map(i => Array(5).fill(i)),
-            history: [{
-                squares: Array(25).fill(false),
-            }],
-            xIsNext: true,
-            stepNumber: 0,
+            cardShownStatus: Array(25).fill(false),
             modalShown: false,
             cardClicked: null,
             randomSeed: '1',
             counts: _.countBy(cardColorsSample),
             headerIsHidden: false,
+            leaderMode: false,
+            cardLeaderMarks: Array(25).fill(false),
         };
     }
 
@@ -123,16 +121,18 @@ class Game extends React.Component {
 
     handleInputChange = (e) => {
         const { name, value } = e.target;
-        this.setState({ [name]: value.toLowerCase() });
+        const newSeed = value.toLowerCase();
+        this.setState({ [name]: newSeed });
+        this.seedNewGame(newSeed);
     };
 
     getRandomWord = (wordObject) => {
         const { wordList, listLength } = wordObject;
         return wordList[Math.floor(Math.random() * listLength)];
     };
 
-    seedNewGame = () => {
-        let { randomSeed } = this.state;
+    seedNewGame = (newSeed) => {
+        let randomSeed = newSeed;
         const { wordList, listLength } = wordFiles.cardsClassic;
         const today = new Date();
         const todayValue = today.getUTCFullYear().toString()
@@ -171,6 +171,7 @@ class Game extends React.Component {
         this.setState({
             cardColors: newCardColors,
             words: wordsSelected,
+            leaderMode: false,
         });
         this.updateBoard(newCardColors);
     };
@@ -182,61 +183,65 @@ class Game extends React.Component {
         });
     };
 
-    updateBoard = (cardColors = this.state.cardColors) => {
-        const {
-            xIsNext,
-            cardClicked,
-            history,
-            stepNumber,
-        } = this.state;
-        // get current board
-        const historySlice = history.slice(0, stepNumber + 1);
-        const current = historySlice[historySlice.length - 1];
-        const squares = current.squares.slice();
-
+    updateBoard = () => {
         // change revealed status of clicked card
-        // if LEADER, reveal all
-        if (cardClicked === 'REVEAL') {
-            squares.fill(true);
-        } if (cardClicked === 'HIDE') {
-            squares.fill(false);
-        } if (!_.isNaN(cardClicked)) {
-            squares[cardClicked] = !squares[cardClicked];
-        }
+        // if LEADER, mark instead of reveal, since all will be revealed
 
         // update state
-        this.setState({
-            xIsNext: !xIsNext,
-            history: historySlice.concat([{
-                squares,
-                whoMoved: xIsNext ? 'X' : 'O',
-                moveLocation: [Math.floor(cardClicked / 5), cardClicked % 5],
-            }]),
-            stepNumber: historySlice.length,
-            counts: _.countBy(cardColors.filter((cc, i) => !squares[i])),
+        this.setState((prevState) => {
+            const prevClick = prevState.cardClicked;
+            let updateArray;
+            if (!_.isNaN(prevClick)) {
+                if (prevState.leaderMode) {
+                    updateArray = prevState.cardLeaderMarks;
+                    updateArray[prevClick] = !updateArray[prevClick];
+                    return { cardLeaderMarks: updateArray };
+                }
+                updateArray = prevState.cardShownStatus;
+                updateArray[prevClick] = !updateArray[prevClick];
+                return { cardShownStatus: updateArray };
+            }
+            return prevState;
         });
+        this.setState(prevState => (
+            {
+                counts: _.countBy(prevState.cardColors.filter(
+                    (cc, i) => !prevState.cardShownStatus[i],
+                )),
+            }
+        ));
     };
 
     handleCardToggle = () => {
+        this.setState((prevState) => {
+            if (prevState.cardClicked === 'leader_mode') {
+                return {
+                    leaderMode: true,
+                    cardShownStatus: Array(25)
+                        .fill(true),
+                };
+            }
+            return {
+                prevState,
+            };
+        });
         this.updateBoard();
         this.hideModal();
     };
 
     render() {
         const {
-            history,
+            cardShownStatus,
             words,
             cardIDs,
             cardColors,
-            stepNumber,
             modalShown,
             cardClicked,
             counts,
             randomSeed,
             headerIsHidden,
+            cardLeaderMarks,
         } = this.state;
-        const current = history[stepNumber];
-        const squares = current.squares.slice();
 
         return (
             <div>
@@ -246,16 +251,16 @@ class Game extends React.Component {
                         headerIsHidden={headerIsHidden}
                         toggleHeaderHide={this.toggleHeaderHide}
                         handleInputChange={this.handleInputChange}
-                        seedNewGame={this.seedNewGame}
                         showModal={this.showModal}
                     />
                     <Board
                         words={words}
                         cardIDs={cardIDs}
-                        squares={current.squares}
+                        squares={cardShownStatus}
                         onClick={this.showModal}
                         modalClick={this.handleCardToggle}
                         cardColors={cardColors}
+                        cardLeaderMarks={cardLeaderMarks}
                     />
                     <CardCounter
                         counts={counts}
@@ -269,9 +274,18 @@ class Game extends React.Component {
                         cardClicked={cardClicked}
                         wordClicked={words[cardClicked]}
                     >
-                        <p>
-                            {squares[cardClicked] ? 'Hide card?' : 'Reveal card?'}
-                        </p>
+                        {cardClicked === 'leader_mode'
+                            ? (
+                                <p>
+                                    Turn on leader mode?
+                                </p>
+                            )
+                            : (
+                                <p>
+                                    {cardShownStatus[cardClicked] ? 'Hide card?' : 'Reveal card?'}
+                                </p>
+                            )
+                        }
                     </Modal>
                 </div>
             </div>

diff --git a/src/components/Board.js b/src/components/Board.js
@@ -7,10 +7,11 @@ function Card(props) {
         status,
         value,
         color,
+        leaderMark,
     } = props;
-    const cls = `card ${status ? `card-color-${color}` : ''}`;
+    const cls = `card${status ? ` card-color-${color}` : ''}
+        ${leaderMark ? ' card-leader-mark' : ''}`;
     const smallerFontClass = value.length > 8 ? 'card-smaller-font' : '';
-
     return (
         <button type="button" className={cls + smallerFontClass} onClick={onClick}>
             {value}
@@ -25,6 +26,7 @@ class Board extends React.Component {
             onClick,
             squares,
             cardColors,
+            cardLeaderMarks,
         } = this.props;
         return (
             <Card
@@ -33,6 +35,7 @@ class Board extends React.Component {
                 onClick={() => onClick(i)}
                 status={squares[i]}
                 color={cardColors[i]}
+                leaderMark={cardLeaderMarks[i]}
             />
         );
     }
@@ -42,7 +45,7 @@ class Board extends React.Component {
         return (
             <div className="game-board">
                 {cardIDs.map((row, i) => (
-                    <div className="board-row" key={`row ${i}`}>
+                    <div className="board-row" key={row.id}>
                         {row.map((card, j) => this.renderCard(i * 5 + j))}
                     </div>
                 ))}
@@ -57,11 +60,13 @@ Board.propTypes = {
     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,
 };
 Card.propTypes = {
     onClick: PropTypes.func.isRequired,
     status: PropTypes.bool.isRequired,
     value: PropTypes.string.isRequired,
     color: PropTypes.string.isRequired,
+    leaderMark: PropTypes.bool.isRequired,
 };
 export default Board;
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -7,7 +7,6 @@ const Header = ({
     headerIsHidden,
     toggleHeaderHide,
     handleInputChange,
-    seedNewGame,
     showModal,
 }) => (
     <header className={`hiding-box ${headerIsHidden ? 'hiding-box-hidden' : ''}`}>
@@ -30,25 +29,9 @@ const Header = ({
                 <button
                     type="button"
                     className="input-elements"
-                    onClick={seedNewGame}
+                    onClick={() => showModal('leader_mode')}
                 >
-                    Refresh game
-                </button>
-            </div>
-            <div className="utilities-box">
-                <button
-                    type="button"
-                    className="input-elements"
-                    onClick={() => showModal('REVEAL')}
-                >
-                    REVEAL ALL
-                </button>
-                <button
-                    type="button"
-                    className="input-elements"
-                    onClick={() => showModal('HIDE')}
-                >
-                    HIDE ALL
+                    LEADER MODE
                 </button>
             </div>
         </div>
@@ -60,7 +43,6 @@ Header.propTypes = {
     headerIsHidden: PropTypes.bool.isRequired,
     toggleHeaderHide: PropTypes.func.isRequired,
     handleInputChange: PropTypes.func.isRequired,
-    seedNewGame: PropTypes.func.isRequired,
     showModal: PropTypes.func.isRequired,
 };