message_area.insertAdjacentHTML('beforeend', message);
}
+/*********************************************************
+ * Handling server-sent event stream *
+ *********************************************************/
+
const events = new EventSource("events");
events.onerror = function(event) {
}
};
+events.addEventListener("game-info", event => {
+ const info = JSON.parse(event.data);
+
+ window.game.set_game_info(info);
+});
+
events.addEventListener("move", event => {
const move = JSON.parse(event.data);
}
});
+/*********************************************************
+ * Game and supporting classes *
+ *********************************************************/
+
+function GameInfo(props) {
+ return (
+ <div className="game-info">
+ <h2>{props.id}</h2>
+ Invite a friend to play by sending this URL: {props.url}
+ </div>
+ );
+}
+
function Square(props) {
let className = "square";
constructor(props) {
super(props);
this.state = {
+ game_info: {},
history: [
{
squares: Array(9).fill(null)
};
}
+ set_game_info(info) {
+ this.setState({
+ game_info: info
+ });
+ }
+
send_move(i) {
return fetch_post_json("move", { move: i });
}
status = "Next player: " + (Team.properties[this.state.next_to_play].name);
}
- return (
+ return [
+ <GameInfo
+ id={this.state.game_info.id}
+ url={this.state.game_info.url}
+ />,
<div className="game">
- <div className="game-info">
- <div>{status}</div>
- </div>
+ <div>{status}</div>
<div className="game-board">
<Board
game_over={winner}
/>
</div>
</div>
- );
+ ];
}
}
-// ========================================
-
ReactDOM.render(<Game
ref={(me) => window.game = me}
/>, document.getElementById("tictactoe"));