1st step: Added highlight last move functionality.

Mrcel97 · Aug 23, 2018 · a9ecb61 · a9ecb61
1 parent ab17d17
commit a9ecb61
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/src/index.css b/src/index.css
@@ -58,4 +58,8 @@ ol, ul {
 
 .coordinates {
     list-style: none;
+}
+
+.selected {
+    color: greenyellow;
 }
diff --git a/src/index.js b/src/index.js
@@ -15,6 +15,7 @@ class Game extends React.Component {
             history: [{
                 squares: Array(9).fill(null),
                 coordinates: Array(9).fill(null),
+                lastPush: null
             }],
             stepNumber: 0,
             xIsNext: true,
@@ -90,14 +91,14 @@ class Game extends React.Component {
         } else {
             status = 'Next Player: ' + (this.state.xIsNext ? 'X' : 'O');
         }
-
         return (
         <div className="game">
             <div className="game-board">
-                <Board 
+                <Board
                     squares={this.current.squares}
                     winnerLine={winnerResult}
                     onClick={(i, pos) => this.handleClick(i, pos)}
+                    lastPush={this.state.history[this.state.stepNumber].lastPush}
                 />
             </div>
             <div className="game-info">
@@ -120,6 +121,7 @@ class Board extends React.Component {
         var pos = calculatePos(i);
         return (
             <Square
+                selected={this.props.lastPush === i}
                 winner={isWinner(i, this.props.winnerLine)}
                 value={this.props.squares[i]}
                 onClick={() => this.props.onClick(i, pos)}
@@ -153,7 +155,7 @@ class Board extends React.Component {
 function Square(props) {
     var liClasses = "square"
 
-    if (props.winner) { liClasses = liClasses.concat(" winner") }
+    liClasses = applyClasses(props, liClasses);
 
     return (
         <button className={liClasses} onClick={props.onClick}>
@@ -162,6 +164,15 @@ function Square(props) {
     );
 }
 
+function applyClasses(props, liClasses) {
+    if (props.winner) { 
+        liClasses = liClasses.concat(" winner") 
+    } else if (props.selected) { 
+        liClasses = liClasses.concat(" selected") 
+    }
+    return liClasses;
+}
+
 function calculateWinner(squares) {
     const winnerLine = [];
     const lines = [