@@ -15,6 +15,7 @@ class Game extends React.Component {
15
15
history : [ {
16
16
squares : Array ( 9 ) . fill ( null ) ,
17
17
coordinates : Array ( 9 ) . fill ( null ) ,
18
+ lastPush : null
18
19
} ] ,
19
20
stepNumber : 0 ,
20
21
xIsNext : true ,
@@ -90,14 +91,14 @@ class Game extends React.Component {
90
91
} else {
91
92
status = 'Next Player: ' + ( this . state . xIsNext ? 'X' : 'O' ) ;
92
93
}
93
-
94
94
return (
95
95
< div className = "game" >
96
96
< div className = "game-board" >
97
- < Board
97
+ < Board
98
98
squares = { this . current . squares }
99
99
winnerLine = { winnerResult }
100
100
onClick = { ( i , pos ) => this . handleClick ( i , pos ) }
101
+ lastPush = { this . state . history [ this . state . stepNumber ] . lastPush }
101
102
/>
102
103
</ div >
103
104
< div className = "game-info" >
@@ -120,6 +121,7 @@ class Board extends React.Component {
120
121
var pos = calculatePos ( i ) ;
121
122
return (
122
123
< Square
124
+ selected = { this . props . lastPush === i }
123
125
winner = { isWinner ( i , this . props . winnerLine ) }
124
126
value = { this . props . squares [ i ] }
125
127
onClick = { ( ) => this . props . onClick ( i , pos ) }
@@ -153,7 +155,7 @@ class Board extends React.Component {
153
155
function Square ( props ) {
154
156
var liClasses = "square"
155
157
156
- if ( props . winner ) { liClasses = liClasses . concat ( " winner" ) }
158
+ liClasses = applyClasses ( props , liClasses ) ;
157
159
158
160
return (
159
161
< button className = { liClasses } onClick = { props . onClick } >
@@ -162,6 +164,15 @@ function Square(props) {
162
164
) ;
163
165
}
164
166
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
+
165
176
function calculateWinner ( squares ) {
166
177
const winnerLine = [ ] ;
167
178
const lines = [
0 commit comments