EightQueens v0.4.0 - attack paths

attogram · May 17, 2019 · d611c74 · d611c74
1 parent a7db9a7
commit d611c74
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 10 deletions.
diff --git a/src/DidYouKnow.css b/src/DidYouKnow.css
@@ -1,4 +1,5 @@
 .EightQueens-didyouknow {
+    color: saddlebrown;
     font-size: 14px;
     margin: 5px 0 5px 0;
 }
diff --git a/src/EightQueens.css b/src/EightQueens.css
@@ -15,14 +15,22 @@
   font-size: 90%;
 }
 
+.EightQueens-paths {
+  color: #373737;
+  font-size: 12px;
+  margin: 8px 15px 0 0;
+  padding: 4px;
+}
+
 .EightQueens-restart {
-  margin-top: 8px;
+  font-size: 12px;
+  margin: 8px 0 0 0;
 }
 
 .EightQueens-restart a {
-  border: 1px solid darkgrey;
-  color: darkgrey;
-  font-size: 85%;
-  padding: 5px;
+  color: #373737;
+  padding: 4px;
   text-decoration: none;
 }
+
+
diff --git a/src/EightQueens.js b/src/EightQueens.js
@@ -13,7 +13,7 @@ import Title from './Title.js';
 import queenUnderAttackSvg from './queenUnderAttack.svg';
 
 const gameName    = 'Eight Queens';
-const gameVersion = '0.3.6';
+const gameVersion = '0.4.0';
 const gameHome    = 'https://github.com/attogram/EightQueens';
 
 class EightQueens extends Component {
@@ -28,7 +28,11 @@ class EightQueens extends Component {
             gameStatus: 'playing',
             queensOnBoard: 0,
             queensUnderAttack: 0,
-        }
+            showAttackPaths: false,
+            attackedSquares: 0,
+        };
+        this.onSquareClick = this.onSquareClick.bind(this);
+        this.toggleAttackPaths = this.toggleAttackPaths.bind(this);
     }
 
     /**
@@ -72,16 +76,47 @@ class EightQueens extends Component {
             position: position,
             queensOnBoard: queensOnBoard,
             queensUnderAttack: queensUnderAttack,
+            attackedSquares: attack.attackedSquares(position),
             gameStatus: gameStatus,
         });
     };
 
+    /**
+     * Play clicked the Attack Paths button
+     */
+    toggleAttackPaths() {
+        const showAttackPaths = !this.state.showAttackPaths;
+        let attackedSquares = this.state.attackedSquares;
+        if (!showAttackPaths) {
+            attackedSquares = attack.attackedSquares(this.state.position);
+        }
+        this.setState({
+            showAttackPaths: showAttackPaths,
+            attackedSquares: attackedSquares,
+        });
+    }
+
     /**
      * @returns {*}
      */
     render() {
         // force board refresh by using FEN string in _position_ and _key_ Chessboard props
         const fenPosition = helpers.objToFen(this.state.position);
+
+        // Highlight squares under attack
+        let squareStyles = {};
+        let showAttackPathsText = 'Show';
+        if (this.state.showAttackPaths) {
+            showAttackPathsText = 'Hide';
+            if (this.state.attackedSquares.length) {
+                this.state.attackedSquares.forEach(function(square) {
+                    squareStyles[square]= {
+                        background: "radial-gradient(circle, orange, transparent 50%)",
+                    };
+                });
+            }
+        }
+
         return (
             <div className="EightQueens">
                 <div className="EightQueens-header">
@@ -106,6 +141,7 @@ class EightQueens extends Component {
                     draggable={false}
                     calcWidth={({screenWidth}) => (screenWidth < 500 ? 350 : 480)}
                     onSquareClick={this.onSquareClick}
+                    squareStyles={squareStyles}
                     pieces={{
                         bQ: ({ squareWidth, isDragging }) => (
                             <img
@@ -123,10 +159,18 @@ class EightQueens extends Component {
                 <div className="EightQueens-instructions">
                     - Place <b>Eight Queens</b> with none under attack!
                     <br />
-                    - Click a square to place a Queen. Click a Queen to remove it
+                    - Click a square to place a Queen. Click a Queen to remove it.
                 </div>
-                <div className="EightQueens-restart">
-                    <a href="." >restart</a>
+                <div className="EightQueens-header">
+                    <button
+                        className="EightQueens-paths"
+                        onClick={this.toggleAttackPaths}
+                    >
+                        {showAttackPathsText} attack paths
+                    </button>
+                    <button className="EightQueens-restart">
+                        <a href="." >Restart</a>
+                    </button>
                 </div>
             </div>
         );

diff --git a/src/UnderAttack.js b/src/UnderAttack.js
@@ -17,6 +17,19 @@ export function underAttack(position) {
     return attacked;
 }
 
+export function attackedSquares(position) {
+    let attackedSquares = [];
+    Object.keys(position).forEach(function(square) {
+        getQueenPaths(square).forEach(function(square) {
+            if (attackedSquares.indexOf(square) === -1) {
+                attackedSquares.push(square);
+            }
+        });
+    });
+
+    return attackedSquares;
+}
+
 /**
  * Get all possible attack paths of a Queen
  *