Fix square to not be active if occupied

[lmno.games] / scribe / scribe.jsx

diff --git a/scribe/scribe.jsx b/scribe/scribe.jsx
index 2cc51483c3a429f5a2f0d0e91d7ddf0deda8109c..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)}
       />
@@ -402,9 +407,9 @@ class Board extends React.Component {
      *    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).
@@ -422,7 +427,7 @@ class Board extends React.Component {
         /* 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);
       }
     }
 
@@ -438,7 +443,7 @@ class Board extends React.Component {
     return (
       <MiniGrid
         squares={squares}
-        active={active}
+        active={grid_active}
         last_moves={last_moves}
         onClick={(j) => this.props.onClick(i,j)}
       />