X-Git-Url: https://git.cworth.org/git?a=blobdiff_plain;f=scribe%2Fscribe.jsx;h=75742ca8ec160513fbde5f962298d747d12586df;hb=4151410b3562dc4d8c40edd2624558ca1180417d;hp=d8f6afc9bf334b9ff523626854ff6883bfa870a4;hpb=7274cc0cc286ead5e767155101658074353afb14;p=lmno.games
diff --git a/scribe/scribe.jsx b/scribe/scribe.jsx
index d8f6afc..75742ca 100644
--- a/scribe/scribe.jsx
+++ b/scribe/scribe.jsx
@@ -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 =
{mini_grid.winner}
;
+ }
+
return (
{grid_square(0)}
@@ -398,6 +407,7 @@ function MiniGrid(props) {
{grid_square(6)}
{grid_square(7)}
{grid_square(8)}
+ {winner}
);
}
@@ -427,7 +437,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,10 +456,10 @@ 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 mini_grid = this.props.mini_grids[i];
return (
this.props.onClick(i,j)}
@@ -502,9 +512,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 +741,45 @@ 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;
+ });
+ 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_squares[mini_grid_index], 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_squares[mini_grid_index][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. */
@@ -754,7 +794,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 +887,7 @@ class Game extends React.Component {
this.handle_click(i, j, first_move)}
/>