);
}
@@ -186,7 +227,7 @@ class Game extends React.Component {
this.state = {
game_info: {},
player_info: {},
- opponent_info: {},
+ opponent_info: [],
history: [
{
squares: Array(9).fill(null)
@@ -210,8 +251,15 @@ class Game extends React.Component {
}
set_opponent_info(info) {
+ const new_opponents = [...this.state.opponent_info];
+ const idx = new_opponents.findIndex(o => o.id === info.id);
+ if (idx >= 0) {
+ new_opponents[idx] = info;
+ } else {
+ new_opponents.push(info);
+ }
this.setState({
- opponent_info: info
+ opponent_info: new_opponents
});
}
@@ -294,7 +342,17 @@ class Game extends React.Component {
}
else if (first_move)
{
- status = "Either player can make the first move.";
+ if (state.opponent_info.length == 0) {
+ status = "You can make the first move or wait for an opponent to join.";
+ } else {
+ let qualifier;
+ if (state.opponent_info.length == 1) {
+ qualifier = "Either";
+ } else {
+ qualifier = "Any";
+ }
+ status = `${qualifier} player can make the first move.`;
+ }
board_active = true;
}
else if (my_team === "")
@@ -309,7 +367,12 @@ class Game extends React.Component {
}
else
{
- status = "Waiting for your opponent to move.";
+ status = "Waiting for your opponent to ";
+ if (state.opponent_info.length == 0) {
+ status += "join.";
+ } else {
+ status += "move.";
+ }
board_active = false;
}
@@ -321,15 +384,12 @@ class Game extends React.Component {
/>,
,