From: Carl Worth <cworth@cworth.org>
Date: Thu, 4 Jun 2020 00:37:59 +0000 (-0700)
Subject: tictactoe: Don't let the user send an illegal move
X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=commitdiff_plain;h=cd1247338dd987b8796ad5ca6d0f655ececa22ee;ds=sidebyside

tictactoe: Don't let the user send an illegal move

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.
---

diff --git a/tictactoe/tictactoe.css b/tictactoe/tictactoe.css
index 52a8e87..a987933 100644
--- a/tictactoe/tictactoe.css
+++ b/tictactoe/tictactoe.css
@@ -29,7 +29,15 @@ ol, ul {
   border-radius: 4px;
 }
 
-.square:hover {
+.square.open {
+    cursor: pointer;
+}
+
+.square.occupied {
+    cursor: default;
+}
+
+.square.open:hover {
     background-color: var(--accent-color-bright);
 }
 
diff --git a/tictactoe/tictactoe.jsx b/tictactoe/tictactoe.jsx
index 61a828e..d92b698 100644
--- a/tictactoe/tictactoe.jsx
+++ b/tictactoe/tictactoe.jsx
@@ -36,18 +36,31 @@ events.addEventListener("game-state", event => {
 });
 
 function Square(props) {
+  let className = "square";
+
+  if (props.value) {
+    className += " occupied";
+  } else if (props.active) {
+    className += " open";
+  }
+
+  const onClick = props.active ? props.onClick : null;
+
   return (
-    <button className="square" onClick={props.onClick}>
+    <div className={className}
+         onClick={onClick}>
       {props.value}
-    </button>
+    </div>
   );
 }
 
 class Board extends React.Component {
   renderSquare(i) {
+    const value = this.props.squares[i];
     return (
       <Square
-        value={this.props.squares[i]}
+        value={value}
+        active={! this.props.gameOver && ! value}
         onClick={() => this.props.onClick(i)}
       />
     );
@@ -173,6 +186,7 @@ class Game extends React.Component {
         </div>
         <div className="game-board">
           <Board
+            gameOver={winner}
             squares={current.squares}
             onClick={i => this.handleClick(i)}
           />