X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=blobdiff_plain;f=scribe%2Fscribe.jsx;h=b736f78fceb813756fcfa3a684773dae186493c9;hp=ae05690dd42febe119b2541ab37b8e7ee6bf33f9;hb=bed0bfe82a872b741a51f95740fa2d3deb5e377a;hpb=ece82f79122ffd6f1e3c8fb0d0dac7daae824b92
diff --git a/scribe/scribe.jsx b/scribe/scribe.jsx
index ae05690..b736f78 100644
--- a/scribe/scribe.jsx
+++ b/scribe/scribe.jsx
@@ -329,12 +329,19 @@ function Glyph(props) {
function Square(props) {
let className = "square";
- if (props.value) {
+ if (props.value.symbol) {
className += " occupied";
} else if (props.active) {
className += " open";
}
+ if (props.value.glyph) {
+ if (props.value.symbol === '+')
+ className += " glyph-plus";
+ else
+ className += " glyph-o";
+ }
+
if (props.last_move) {
className += " last-move";
}
@@ -344,7 +351,7 @@ function Square(props) {
return (
- {props.value}
+ {props.value.symbol}
);
}
@@ -356,7 +363,7 @@ function MiniGrid(props) {
/* Even if the grid is active, the square is only active if
* unoccupied. */
- const square_active = (props.active && (value === null));
+ const square_active = (props.active && (value.symbol === null));
return (
{
- if (element)
+ if (element.symbol)
occupied++;
});
@@ -421,7 +428,7 @@ class Board extends React.Component {
const target = this.props.last_two_moves[0][1];
let occupied = 0;
this.props.squares[target].forEach(element => {
- if (element)
+ if (element.symbol)
occupied++;
});
/* If the target mini-grid isn't full then this grid is
@@ -495,7 +502,10 @@ class Game extends React.Component {
game_info: {},
player_info: {},
other_players: [],
- squares: [...Array(9)].map(() => Array(9).fill(null)),
+ squares: [...Array(9)].map(() => Array(9).fill({
+ symbol: null,
+ glyph: false
+ })),
moves: [],
next_to_play: "+",
};
@@ -532,19 +542,56 @@ class Game extends React.Component {
});
}
+ find_connected(mini_grid_index, position) {
+ /* TODO: Implement actual finding of connected squares here. */
+ let connected = Array(9).fill(false);
+
+ return connected;
+ }
+
+ detect_glyph(connected) {
+ /* TODO: Implement actual glyph detection here. */
+ return false;
+ }
+
receive_move(move) {
+ const mini_grid_index = move[0];
+ const position = move[1];
+
+ /* Don't allow any moves after the board is full */
if (this.state.moves.length === 81) {
return;
}
+
+ /* 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[move[0]][move[1]] = symbol;
+ new_squares[mini_grid_index][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(mini_grid_index, position);
+ const is_glyph = this.detect_glyph(connected);
+
+ for (let i = 0; i < 9; i++) {
+ if (connected[i])
+ new_squares[mini_grid_index][i].glyph = is_glyph;
+ }
+
+ /* And append the move to the list of moves. */
const new_moves = [...this.state.moves, move];
+
+ /* Finally, compute the next player to move. */
let next_to_play;
if (this.state.next_to_play === "+")
next_to_play = "o";
else
next_to_play = "+";
+
+ /* And shove all those state modifications toward React. */
this.setState({
squares: new_squares,
moves: new_moves,