Fix square to not be active if occupied

Thanks to Scott who noticed yesterday he could tap on an occupied
square and get an error message including "Square is already
occupied". It's good the server catches that case and sends an
error. And it's good the client presentes that cleanly.

But the client shouldn't ever even let the user submit a move that the
client already know is not legal.

In this commit we appropriately set a square to not be active if it is
already occupied. This fixes the case described above, and further
makes it so that hovering over an occupied square won't even present
the user with a cursor suggesting the square is "clickable".

diff --git a/scribe/scribe.jsx b/scribe/scribe.jsx
index d66fc049b9a90b7c17c94ad39942b6d03312f17a..ae05690dd42febe119b2541ab37b8e7ee6bf33f9 100644 (file)
--- a/scribe/scribe.jsx
+++ b/scribe/scribe.jsx
@@ -353,10 +353,15 @@ 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 (
       <Square
         value={value}
-        active={props.active}
+        active={square_active}
         last_move={last_move}
         onClick={() => props.onClick(j)}
       />