Skip to content

Instantly share code, notes, and snippets.

@ksm
Created May 3, 2020
Embed
What would you like to do?
import React, { Component } from "react";
import Board from "./Board";
export default class Game extends Component {
constructor(props) {
super(props);
this.state = {
xIsNext: true,
stepNumber: 0,
history: [{ squares: Array(9).fill(null) }],
};
}
jumpTo(step) {
this.setState({
stepNumber: step,
xIsNext: step % 2 === 0,
});
}
currentSquares() {
const history = this.state.history;
const current = history[this.state.stepNumber];
return current.squares;
}
handleClick(i, isComputer) {
const history = this.state.history.slice(0, this.state.stepNumber + 1);
const current = history[history.length - 1];
const squares = current.squares.slice();
const winner = calculateWinner(squares);
//stops player from picking a chosen square
if (winner || squares[i]) {
return;
}
squares[i] = this.state.xIsNext ? "X" : "0";
this.setState({
history: history.concat({
squares: squares,
}),
xIsNext: !this.state.xIsNext,
stepNumber: history.length,
});
}
render() {
const history = this.state.history;
const current = history[this.state.stepNumber];
const winner = calculateWinner(current.squares);
const moves = history.map((step, move) => {
const desc = move
? "Go to #" + move
: "Choose a square to begin the game";
return (
<li key={move}>
<button
onClick={() => {
this.jumpTo(move);
}}
>
{desc}
</button>
</li>
);
});
let status;
if (winner) {
status = "Winner is " + winner;
} else {
status = "Next Player is " + (this.state.xIsNext ? "X" : "0");
}
return (
<div className="game">
<div className="game-board">
<Board
onClick={(i) => {
// Players presses button.
this.handleClick(i, false);
// Computer presses button.
// const randomIndex = getRandomIndex();
// console.log(randomIndex);
// console.log(JSON.stringify(this.currentState()));
// this.handleClick(randomIndex, true);
const randomIndex = getRandomIndexNotOccupied(
this.currentSquares(),
i
);
this.handleClick(randomIndex, true);
// console.log(randomIndex);
}}
squares={current.squares}
/>
</div>
<div>{status}</div>
<ul>{moves}</ul>
</div>
);
}
}
//sets win condition
function calculateWinner(squares) {
const lines = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
];
for (let i = 0; i < lines.length; i++) {
const [a, b, c] = lines[i];
if (squares[a] && squares[a] === squares[b] && squares[b] === squares[c]) {
return squares[a];
}
}
return null;
}
function getRandomIndex() {
const min = Math.ceil(0);
const max = Math.floor(9);
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}
function getRandomIndexNotOccupied(state, index) {
var randomIndex = null;
// console.log(JSON.stringify(state));
// state[randomIndex]
console.log("selected ", index);
do {
randomIndex = getRandomIndex();
// console.log(
// "state under random index ",
// randomIndex,
// " is: ",
// state[randomIndex]
// );
// console.log("getRandom randomIndex ", randomIndex);
// console.log("whats in the state ", state[randomIndex]);
} while (randomIndex !== index && state[randomIndex]);
return randomIndex;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment