The client already knows which squares are occupied, and when the game
is won, so it's pointless to ever send a move we know is going to be
rejected. And in fact, we shouldn't even give the user a hover
indication as if they could move there.
That's all implemented in this commit. The hover highlight and the
pointer cursor are both disabled for squares that are already
occupied, and for all squares once the game is over.
+.square.open {
+ cursor: pointer;
+}
+
+.square.occupied {
+ cursor: default;
+}
+
+.square.open:hover {
background-color: var(--accent-color-bright);
}
background-color: var(--accent-color-bright);
}
});
function Square(props) {
});
function Square(props) {
+ let className = "square";
+
+ if (props.value) {
+ className += " occupied";
+ } else if (props.active) {
+ className += " open";
+ }
+
+ const onClick = props.active ? props.onClick : null;
+
- <button className="square" onClick={props.onClick}>
+ <div className={className}
+ onClick={onClick}>
);
}
class Board extends React.Component {
renderSquare(i) {
);
}
class Board extends React.Component {
renderSquare(i) {
+ const value = this.props.squares[i];
- value={this.props.squares[i]}
+ value={value}
+ active={! this.props.gameOver && ! value}
onClick={() => this.props.onClick(i)}
/>
);
onClick={() => this.props.onClick(i)}
/>
);
</div>
<div className="game-board">
<Board
</div>
<div className="game-board">
<Board
squares={current.squares}
onClick={i => this.handleClick(i)}
/>
squares={current.squares}
onClick={i => this.handleClick(i)}
/>