Skip to content
Permalink
Browse files

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

  • Loading branch information...
Sercan Leylek
Sercan Leylek committed Mar 2, 2019
1 parent a1fa28b commit 25976e2fc392f6b33a4e21437261bbe3d030db7a
@@ -3,24 +3,38 @@ import Square from '../Square/Square';

class Board extends React.Component {

renderSquare(i) {
renderSquare(i, winnerSquare) {
return (<Square
key={i}
value={this.props.squares[i]}
onClick={() => this.props.onClick(i)}
winnerSquare={winnerSquare}
/>
);
}

isWinnerSquare(arrayPos) {
const coordinates = this.props.coordinates;
if (!coordinates) {
return false;
}
for (let i = 0; i < coordinates.length; i++) {
if (coordinates[i] === arrayPos) {
return true;
}
}
return false;
}

createTheBoard() {
let board = [];

let counter = 0;
let arrayPos = 0;
for (let i = 0; i < 3; i++) {
let children = [];
for (let j = 0; j < 3; j++) {
children.push(this.renderSquare(counter));
counter++;
children.push(this.renderSquare(arrayPos, this.isWinnerSquare(arrayPos)));
arrayPos++;
}
board.push(<div className="board-row" key={i}>{children}</div>);
}
@@ -97,7 +97,7 @@ class Game extends React.Component {

let status;
if (winner) {
status = "Winner: " + winner;
status = "Winner: " + winner.name;
}
else {
status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
@@ -115,6 +115,7 @@ class Game extends React.Component {
<div className="game">
<div className="game-board">
<Board
coordinates={winner ? winner.coordinates : null}
squares={current.squares}
onClick={(i) => this.handleClick(i)}
/>
@@ -143,10 +144,18 @@ function calculateWinner(squares) {
[0, 4, 8],
[2, 4, 6],
];

let winner = {
name: "",
coordinates: null
};

for (let i = 0; i < lines.length; i++) {
const [a, b, c] = lines[i];
if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
return squares[a];
winner.coordinates = lines[i];
winner.name = squares[a];
return winner;
}
}
return null;
@@ -3,8 +3,12 @@ import React from 'react';
class Square extends React.Component {

render() {
let squareClassName = "square";
if (this.props.winnerSquare) {
squareClassName += " winnerSquare";
}
return (
<button className="square" onClick={
<button className={squareClassName} onClick={
() => this.props.onClick()
}>
{this.props.value}
@@ -36,6 +36,10 @@ ol, ul {
outline: none;
}

.winnerSquare {
background-color: #aaaaab;
}

.kbd-navigation .square:focus {
background: #ddd;
}

0 comments on commit 25976e2

Please sign in to comment.
You can’t perform that action at this time.