);
}
function Glyph(props) {
const glyph_dots = [];
let last_square = 0;
for (let i = 0; i < 9; i++) {
if (props.squares[i])
last_square = i;
}
const height = Math.floor(20 * (Math.floor(last_square / 3) + 1));
const viewbox=`0 0 60 ${height}`;
for (let row = 0; row < 3; row++) {
for (let col = 0; col < 3; col++) {
if (props.squares[3 * row + col]) {
let cy = 10 + 20 * row;
let cx = 10 + 20 * col;
glyph_dots.push(
);
}
}
}
return (
{props.name}
);
}
function Square(props) {
let className = "square";
if (props.value) {
className += " occupied";
} else if (props.active) {
className += " open";
}
if (props.last_move) {
className += " last-move";
}
const onClick = props.active ? props.onClick : null;
return (
{props.value}
);
}
function MiniGrid(props) {
function grid_square(j) {
const value = props.squares[j];
const last_move = props.last_moves.includes(j);
/* Even if the grid is active, the square is only active if
* unoccupied. */
const square_active = (props.active && (value === null));
return (
props.onClick(j)}
/>
);
}
/* Even if my parent thinks I'm active because of the last move, I
* might not _really_ be active if I'm full. */
let occupied = 0;
props.squares.forEach(element => {
if (element)
occupied++;
});
let class_name = "mini-grid";
if (props.active && occupied < 9)
class_name += " active";
return (
);
}
class Board extends React.Component {
mini_grid(i) {
/* This mini grid is active only if both:
*
* 1. It is our turn (this.props.active === true)
*
* 2. One of the following conditions is met:
*
* a. This is this players first turn (last_two_moves[0] === null)
* b. This mini grid corresponds to this players last turn
* c. The mini grid that corresponds to the players last turn is full
*/
let grid_active = false;
if (this.props.active) {
grid_active = true;
if (this.props.last_two_moves.length > 1) {
/* First index (0) gives us our last move, (that is, of the
* last two moves, it's the first one, so two moves ago).
*
* Second index (1) gives us the second number from that move,
* (that is, the index within the mini-grid that we last
* played).
*/
const target = this.props.last_two_moves[0][1];
let occupied = 0;
this.props.squares[target].forEach(element => {
if (element)
occupied++;
});
/* If the target mini-grid isn't full then this grid is
* only active if it is that target. */
if (occupied < 9)
grid_active = (i === target);
}
}
/* We want to highlight each of the last two moves (both "+" and
* "o"). So we filter the last two moves that have a first index
* that matches this mini_grid and pass down their second index
* be highlighted.
*/
const last_moves = this.props.last_two_moves.filter(move => move[0] === i)
.map(move => move[1]);
const squares = this.props.squares[i];
return (
this.props.onClick(i,j)}
/>
);
}
render() {
return (