author Carl Worth Tue, 7 Jul 2020 06:26:43 +0000 (23:26 -0700) committer Carl Worth Sat, 19 Sep 2020 19:51:13 +0000 (12:51 -0700)
At this point the game is almost totally complete. All that is missing
is the final-score indication of the majority winner and the
super-glyph winner.

index 1a2af6b14db47457d89385f5001623d7f6cb7d30..75742ca8ec160513fbde5f962298d747d12586df 100644 (file)
@@ -357,8 +357,12 @@ function Square(props) {
}

function MiniGrid(props) {
+
+  const mini_grid = props.mini_grid;
+  const squares = mini_grid.squares;
+
function grid_square(j) {
-    const value = props.squares[j];
+    const value = squares[j];
const last_move = props.last_moves.includes(j);

/* Even if the grid is active, the square is only active if
@@ -378,7 +382,7 @@ function MiniGrid(props) {
/* Even if my parent thinks I'm active because of the last move, I
* might not _really_ be active if I'm full. */
let occupied = 0;
-  props.squares.forEach(element => {
+  mini_grid.squares.forEach(element => {
if (element.symbol)
occupied++;
});
@@ -387,6 +391,11 @@ function MiniGrid(props) {
if (props.active && occupied < 9)
class_name += " active";

+  let winner = null;
+  if (mini_grid.winner) {
+    winner = <div className="winner">{mini_grid.winner}</div>;
+  }
+
return (
<div className={class_name}>
{grid_square(0)}
@@ -398,6 +407,7 @@ function MiniGrid(props) {
{grid_square(6)}
{grid_square(7)}
{grid_square(8)}
+      {winner}
</div>
);
}
@@ -446,10 +456,10 @@ class Board extends React.Component {
const last_moves = this.props.last_two_moves.filter(move => move === i)
.map(move => move);

-    const squares = this.props.mini_grids[i].squares;
+    const mini_grid = this.props.mini_grids[i];
return (
<MiniGrid
-        squares={squares}
+        mini_grid={mini_grid}
active={grid_active}
last_moves={last_moves}
onClick={(j) => this.props.onClick(i,j)}
@@ -736,20 +746,40 @@ class Game extends React.Component {
new_obj.squares = obj.squares.slice();
return new_obj;
});
-    new_mini_grids[mini_grid_index].squares[position] = {
+    const new_mini_grid = new_mini_grids[mini_grid_index];
+    new_mini_grid.squares[position] = {
symbol: symbol,
glyph: false
};

/* With the symbol added to the squares, we need to see if this
* newly-placed move forms a glyph or not. */
-    const connected = this.find_connected(
-      new_mini_grids[mini_grid_index].squares, position);
+    const connected = this.find_connected(new_mini_grid.squares, position);
const is_glyph = this.is_glyph(connected);

+    /* Either set (or clear) the glyph Boolean for each connected square. */
for (let i = 0; i < 9; i++) {
if (connected[i])
-        new_mini_grids[mini_grid_index].squares[i].glyph = is_glyph;
+        new_mini_grid.squares[i].glyph = is_glyph;
+    }
+
+    /* If this is the last cell of played in a mini-grid then it's
+     * time to score it. */
+    const occupied = new_mini_grid.squares.reduce(
+      (acc, val) => acc + (val.symbol !== null ? 1 : 0), 0);
+    if (occupied === 9) {
+      for (let i = 0; i < 9; i++) {
+        if (new_mini_grid.squares[i].glyph) {
+          if (new_mini_grid.squares[i].symbol === '+')
+            new_mini_grid.score_plus++;
+          else
+            new_mini_grid.score_o++;
+        }
+      }
+      if (new_mini_grid.score_plus > new_mini_grid.score_o)
+        new_mini_grid.winner = '+';
+      else
+        new_mini_grid.winner = 'o';
}

/* And append the move to the list of moves. */