function Square(props) {
let className = "square";
- if (props.value) {
+ if (props.value.symbol) {
className += " occupied";
} else if (props.active) {
className += " open";
}
+ if (props.value.glyph) {
+ if (props.value.symbol === '+')
+ className += " glyph-plus";
+ else
+ className += " glyph-o";
+ }
+
if (props.last_move) {
className += " last-move";
}
return (
<div className={className}
onClick={onClick}>
- {props.value}
+ {props.value.symbol}
</div>
);
}
/* Even if the grid is active, the square is only active if
* unoccupied. */
- const square_active = (props.active && (value === null));
+ const square_active = (props.active && (value.symbol === null));
return (
<Square
* might not _really_ be active if I'm full. */
let occupied = 0;
props.squares.forEach(element => {
- if (element)
+ if (element.symbol)
occupied++;
});
const target = this.props.last_two_moves[0][1];
let occupied = 0;
this.props.squares[target].forEach(element => {
- if (element)
+ if (element.symbol)
occupied++;
});
/* If the target mini-grid isn't full then this grid is
game_info: {},
player_info: {},
other_players: [],
- squares: [...Array(9)].map(() => Array(9).fill(null)),
+ squares: [...Array(9)].map(() => Array(9).fill({
+ symbol: null,
+ glyph: false
+ })),
moves: [],
next_to_play: "+",
};
});
}
+ find_connected(mini_grid_index, position) {
+ /* TODO: Implement actual finding of connected squares here. */
+ let connected = Array(9).fill(false);
+
+ return connected;
+ }
+
+ detect_glyph(connected) {
+ /* TODO: Implement actual glyph detection here. */
+ return false;
+ }
+
receive_move(move) {
+ const mini_grid_index = move[0];
+ const position = move[1];
+
+ /* Don't allow any moves after the board is full */
if (this.state.moves.length === 81) {
return;
}
+
+ /* 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[move[0]][move[1]] = symbol;
+ new_squares[mini_grid_index][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(mini_grid_index, position);
+ const is_glyph = this.detect_glyph(connected);
+
+ for (let i = 0; i < 9; i++) {
+ if (connected[i])
+ new_squares[mini_grid_index][i].glyph = is_glyph;
+ }
+
+ /* And append the move to the list of moves. */
const new_moves = [...this.state.moves, move];
+
+ /* Finally, compute the next player to move. */
let next_to_play;
if (this.state.next_to_play === "+")
next_to_play = "o";
else
next_to_play = "+";
+
+ /* And shove all those state modifications toward React. */
this.setState({
squares: new_squares,
moves: new_moves,