Skip to content

Commit a9ecb61

Browse files
committed
1st step: Added highlight last move functionality.
1 parent ab17d17 commit a9ecb61

File tree

2 files changed

+18
-3
lines changed

2 files changed

+18
-3
lines changed

src/index.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,4 +58,8 @@ ol, ul {
5858

5959
.coordinates {
6060
list-style: none;
61+
}
62+
63+
.selected {
64+
color: greenyellow;
6165
}

src/index.js

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ class Game extends React.Component {
1515
history: [{
1616
squares: Array(9).fill(null),
1717
coordinates: Array(9).fill(null),
18+
lastPush: null
1819
}],
1920
stepNumber: 0,
2021
xIsNext: true,
@@ -90,14 +91,14 @@ class Game extends React.Component {
9091
} else {
9192
status = 'Next Player: ' + (this.state.xIsNext ? 'X' : 'O');
9293
}
93-
9494
return (
9595
<div className="game">
9696
<div className="game-board">
97-
<Board
97+
<Board
9898
squares={this.current.squares}
9999
winnerLine={winnerResult}
100100
onClick={(i, pos) => this.handleClick(i, pos)}
101+
lastPush={this.state.history[this.state.stepNumber].lastPush}
101102
/>
102103
</div>
103104
<div className="game-info">
@@ -120,6 +121,7 @@ class Board extends React.Component {
120121
var pos = calculatePos(i);
121122
return (
122123
<Square
124+
selected={this.props.lastPush === i}
123125
winner={isWinner(i, this.props.winnerLine)}
124126
value={this.props.squares[i]}
125127
onClick={() => this.props.onClick(i, pos)}
@@ -153,7 +155,7 @@ class Board extends React.Component {
153155
function Square(props) {
154156
var liClasses = "square"
155157

156-
if (props.winner) { liClasses = liClasses.concat(" winner") }
158+
liClasses = applyClasses(props, liClasses);
157159

158160
return (
159161
<button className={liClasses} onClick={props.onClick}>
@@ -162,6 +164,15 @@ function Square(props) {
162164
);
163165
}
164166

167+
function applyClasses(props, liClasses) {
168+
if (props.winner) {
169+
liClasses = liClasses.concat(" winner")
170+
} else if (props.selected) {
171+
liClasses = liClasses.concat(" selected")
172+
}
173+
return liClasses;
174+
}
175+
165176
function calculateWinner(squares) {
166177
const winnerLine = [];
167178
const lines = [

0 commit comments

Comments
 (0)