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 (
<Square
value={value}
- active={props.active}
+ active={square_active}
last_move={last_move}
onClick={() => props.onClick(j)}
/>
* b. This mini grid corresponds to this players last turn
* c. The mini grid that corresponds to the players last turn is full
*/
- let active = false;
+ let grid_active = false;
if (this.props.active) {
- active = true;
+ 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).
/* If the target mini-grid isn't full then this grid is
* only active if it is that target. */
if (occupied < 9)
- active = (i === target);
+ grid_active = (i === target);
}
}
return (
<MiniGrid
squares={squares}
- active={active}
+ active={grid_active}
last_moves={last_moves}
onClick={(j) => this.props.onClick(i,j)}
/>