cleanup and bugfixes related to leaderMode

cmavelis · Mar 22, 2019 · 0eb9599 · 0eb9599
1 parent e23b94d
commit 0eb9599
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 9 deletions.
diff --git a/src/Game.js b/src/Game.js
@@ -40,17 +40,16 @@ class Game extends React.Component {
 
     componentDidUpdate(prevProps) {
         const { randomSeed, leaderMode } = this.props;
-        console.log('game updated');
         if (prevProps.randomSeed !== randomSeed) {
             this.seedNewGame(randomSeed);
         }
         if (prevProps.leaderMode !== leaderMode) {
-            if (leaderMode) {
-                this.setState({
+            if (leaderMode) { // TODO: find alternative to setState here, avoid double render too
+                this.setState({ // eslint-disable-line
                     cardShownStatus: Array(25).fill(leaderMode),
                 });
             } else {
-                this.setState({
+                this.setState({ // eslint-disable-line
                     cardShownStatus: Array(25).fill(leaderMode),
                     cardLeaderMarks: Array(25).fill(false),
                 });
@@ -227,7 +226,7 @@ class Game extends React.Component {
 
 Game.propTypes = {
     generateNewSeed: PropTypes.func.isRequired,
-    wordFile: PropTypes.object.isRequired,
+    wordFile: PropTypes.objectOf(PropTypes.any).isRequired,
     randomSeed: PropTypes.string.isRequired,
     leaderMode: PropTypes.bool.isRequired,
 };

diff --git a/src/GameLoader.js b/src/GameLoader.js
@@ -95,14 +95,19 @@ class GameLoader extends React.Component {
         const randomNoun = this.getRandomWord(wordFiles.seedNouns);
         const newSeed = `${randomAdjective} ${randomNoun}`;
         this.setSeed(newSeed);
+        this.toggleLeaderMode(false);
     };
 
      toggleHeaderHide = () => {
          this.setState(prevState => ({ headerIsHidden: !prevState.headerIsHidden }));
      };
 
-     toggleLeaderMode = () => {
-         this.setState(prevState => ({ leaderMode: !prevState.leaderMode }));
+     toggleLeaderMode = (force = null) => {
+         if (force !== null) {
+             this.setState({ leaderMode: force });
+         } else {
+             this.setState(prevState => ({ leaderMode: !prevState.leaderMode }));
+         }
      };
 
      render() {
@@ -117,7 +122,7 @@ class GameLoader extends React.Component {
              <div>
                  {Object.entries(wordFiles).some(obj => obj[1].isLoading)
                      ? (
-                         <p> Loading... </p>
+                         <div className="card counter card-color-blank"> Loading... </div>
                      )
                      : (
                          <div>

diff --git a/src/components/Board.js b/src/components/Board.js
@@ -10,7 +10,7 @@ function Card(props) {
         leaderMark,
     } = props;
     const cls = `card${status ? ` card-color-${color}` : ''}
-        ${leaderMark ? ' card-leader-mark' : ''}`;
+        ${leaderMark ? ' card-leader-mark ' : ''}`;
     const smallerFontClass = value.length > 8 ? 'card-smaller-font' : '';
     return (
         <button type="button" className={cls + smallerFontClass} onClick={onClick}>