*/
const target = this.props.last_two_moves[0][1];
let occupied = 0;
- this.props.squares[target].forEach(element => {
+ this.props.mini_grids[target].squares.forEach(element => {
if (element.symbol)
occupied++;
});
const last_moves = this.props.last_two_moves.filter(move => move[0] === i)
.map(move => move[1]);
- const squares = this.props.squares[i];
+ const squares = this.props.mini_grids[i].squares;
return (
<MiniGrid
squares={squares}
game_info: {},
player_info: {},
other_players: [],
- squares: [...Array(9)].map(() => Array(9).fill({
- symbol: null,
- glyph: false
+ mini_grids: [...Array(9)].map(() => ({
+ score_plus: null,
+ score_o: null,
+ winner: null,
+ squares: Array(9).fill({
+ symbol: null,
+ glyph: false
+ })
})),
moves: [],
next_to_play: "+",
/* Set the team's symbol into the board state. */
const symbol = team_symbol(this.state.next_to_play);
- const new_squares = this.state.squares.map(arr => arr.slice());
- new_squares[mini_grid_index][position] = {
+ const new_mini_grids = this.state.mini_grids.map(obj => {
+ const new_obj = {...obj};
+ new_obj.squares = obj.squares.slice();
+ return new_obj;
+ });
+ new_mini_grids[mini_grid_index].squares[position] = {
symbol: symbol,
glyph: false
};
/* With the symbol added to the squares, we need to see if this
* newly-placed move forms a glyph or not. */
- const connected = this.find_connected(new_squares[mini_grid_index], position);
+ const connected = this.find_connected(
+ new_mini_grids[mini_grid_index].squares, position);
const is_glyph = this.is_glyph(connected);
for (let i = 0; i < 9; i++) {
if (connected[i])
- new_squares[mini_grid_index][i].glyph = is_glyph;
+ new_mini_grids[mini_grid_index].squares[i].glyph = is_glyph;
}
/* And append the move to the list of moves. */
/* And shove all those state modifications toward React. */
this.setState({
- squares: new_squares,
+ mini_grids: new_mini_grids,
moves: new_moves,
next_to_play: next_to_play
});
<div className="game-board">
<Board
active={board_active}
- squares={state.squares}
+ mini_grids={state.mini_grids}
last_two_moves={state.moves.slice(-2)}
onClick={(i,j) => this.handle_click(i, j, first_move)}
/>