ashpie/reactjs-tutorial-tictactoe
ashpie/reactjs-tutorial-tictactoe
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

When someone wins, highlight the three squares that caused the win

Browse Source
This commit is contained in:
Alice Gaudon 2022-03-13 19:21:25 +01:00
parent 6dcfb7ba49
commit c337a18e32
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/index.css
View File

@ -36,6 +36,10 @@ ol, ul {
outline: none; outline: none;
} }
.square.in-win-line {
background-color: #fff300;
}
.kbd-navigation .square:focus { .kbd-navigation .square:focus {
background: #ddd; background: #ddd;
} }

22
src/index.js
View File

@ -3,13 +3,17 @@ import ReactDOM from 'react-dom';
import './index.css'; import './index.css';
/*TODO /*TODO
When someone wins, highlight the three squares that caused the win.
When no one wins, display a message about the result being a draw. When no one wins, display a message about the result being a draw.
*/ */
function Square(props) { function Square(props) {
const classNames = ['square'];
if (props.isInWinLine) {
classNames.push('in-win-line');
}
return ( return (
<button className="square" onClick={props.onClick}> <button className={classNames.join(' ')} onClick={props.onClick}>
{props.value} {props.value}
</button> </button>
); );
@ -26,6 +30,7 @@ function Board(props) {
key={index} key={index}
value={props.squares[index]} value={props.squares[index]}
onClick={() => props.handleClick(index)} onClick={() => props.handleClick(index)}
isInWinLine={props.winLine?.indexOf(index) >= 0}
/> />
); );
} }
@ -55,7 +60,7 @@ class Game extends React.Component {
playTurn(i) { playTurn(i) {
const history = this.state.history.slice(0, this.state.currentMoveIndex + 1); const history = this.state.history.slice(0, this.state.currentMoveIndex + 1);
const currentState = history[history.length - 1]; const currentState = history[history.length - 1];
if (currentState.squares[i] || calculateWinner(currentState.squares)) { if (currentState.squares[i] || calculateWinState(currentState.squares)) {
return; return;
} }
@ -91,9 +96,9 @@ class Game extends React.Component {
const history = this.state.history; const history = this.state.history;
const currentState = history[this.state.currentMoveIndex]; const currentState = history[this.state.currentMoveIndex];
let status; let status;
const winner = calculateWinner(currentState.squares); const winState = calculateWinState(currentState.squares);
if (winner) { if (winState) {
status = `Winner: ${winner}`; status = `Winner: ${winState.winner}`;
} else { } else {
const nextPlayer = this.state.xIsNext ? 'X' : 'O'; const nextPlayer = this.state.xIsNext ? 'X' : 'O';
status = `Next player ${nextPlayer}`; status = `Next player ${nextPlayer}`;
@ -121,6 +126,7 @@ class Game extends React.Component {
squares={currentState.squares} squares={currentState.squares}
handleClick={(i) => this.playTurn(i)} handleClick={(i) => this.playTurn(i)}
xIsNext={this.state.xIsNext} xIsNext={this.state.xIsNext}
winLine={winState?.line}
/> />
</div> </div>
<div className="game-info"> <div className="game-info">
@ -133,7 +139,7 @@ class Game extends React.Component {
} }
} }
function calculateWinner(squares) { function calculateWinState(squares) {
const lines = [ const lines = [
[0, 1, 2], [0, 1, 2],
[3, 4, 5], [3, 4, 5],
@ -147,7 +153,7 @@ function calculateWinner(squares) {
for (let i = 0; i < lines.length; i++) { for (let i = 0; i < lines.length; i++) {
const [a, b, c] = lines[i]; const [a, b, c] = lines[i];
if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
return squares[a]; return {winner: squares[a], line: lines[i]};
} }
} }
return null; return null;