From 6aafb823cdc12d7404ae56cabce63d1dd8478922 Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Mon, 6 Jul 2020 23:10:53 -0700
Subject: [PATCH] Prep for stashing final scores against each mini grid

By turning each mini grid into an object rather than just an array of
squares. This new object now has a place to lodge scores and a final
winner for each mini grid, (though we aren't populating those yet).

This commit is intended to have no visible change on the game.
---
 scribe/scribe.jsx | 32 +++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/scribe/scribe.jsx b/scribe/scribe.jsx
index d8f6afc..1a2af6b 100644
--- a/scribe/scribe.jsx
+++ b/scribe/scribe.jsx
@@ -427,7 +427,7 @@ class Board extends React.Component {
          */
         const target = this.props.last_two_moves[0][1];
         let occupied = 0;
-        this.props.squares[target].forEach(element => {
+        this.props.mini_grids[target].squares.forEach(element => {
           if (element.symbol)
             occupied++;
         });
@@ -446,7 +446,7 @@ class Board extends React.Component {
     const last_moves = this.props.last_two_moves.filter(move => move[0] === i)
           .map(move => move[1]);
 
-    const squares = this.props.squares[i];
+    const squares = this.props.mini_grids[i].squares;
     return (
       <MiniGrid
         squares={squares}
@@ -502,9 +502,14 @@ class Game extends React.Component {
       game_info: {},
       player_info: {},
       other_players: [],
-      squares: [...Array(9)].map(() => Array(9).fill({
-        symbol: null,
-        glyph: false
+      mini_grids: [...Array(9)].map(() => ({
+        score_plus: null,
+        score_o: null,
+        winner: null,
+        squares: Array(9).fill({
+          symbol: null,
+          glyph: false
+        })
       })),
       moves: [],
       next_to_play: "+",
@@ -726,20 +731,25 @@ class Game extends React.Component {
 
     /* Set the team's symbol into the board state. */
     const symbol = team_symbol(this.state.next_to_play);
-    const new_squares = this.state.squares.map(arr => arr.slice());
-    new_squares[mini_grid_index][position] = {
+    const new_mini_grids = this.state.mini_grids.map(obj => {
+      const new_obj = {...obj};
+      new_obj.squares = obj.squares.slice();
+      return new_obj;
+    });
+    new_mini_grids[mini_grid_index].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_squares[mini_grid_index], position);
+    const connected = this.find_connected(
+      new_mini_grids[mini_grid_index].squares, position);
     const is_glyph = this.is_glyph(connected);
 
     for (let i = 0; i < 9; i++) {
       if (connected[i])
-        new_squares[mini_grid_index][i].glyph = is_glyph;
+        new_mini_grids[mini_grid_index].squares[i].glyph = is_glyph;
     }
 
     /* And append the move to the list of moves. */
@@ -754,7 +764,7 @@ class Game extends React.Component {
 
     /* And shove all those state modifications toward React. */
     this.setState({
-      squares: new_squares,
+      mini_grids: new_mini_grids,
       moves: new_moves,
       next_to_play: next_to_play
     });
@@ -847,7 +857,7 @@ class Game extends React.Component {
         <div className="game-board">
           <Board
             active={board_active}
-            squares={state.squares}
+            mini_grids={state.mini_grids}
             last_two_moves={state.moves.slice(-2)}
             onClick={(i,j) => this.handle_click(i, j, first_move)}
           />
-- 
2.43.0