This is populated dynamically by the server sending the game-info
event and contains both the game ID as well as the URL.
We're not yet doing any interesting styling here, (it should get
tucked up into the upper-left corner as just a button with the game
ID, and when clicked on it will expand to show the URL to share).
message_area.insertAdjacentHTML('beforeend', message);
}
message_area.insertAdjacentHTML('beforeend', message);
}
+/*********************************************************
+ * Handling server-sent event stream *
+ *********************************************************/
+
const events = new EventSource("events");
events.onerror = function(event) {
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);
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";
function Square(props) {
let className = "square";
constructor(props) {
super(props);
this.state = {
constructor(props) {
super(props);
this.state = {
history: [
{
squares: Array(9).fill(null)
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 });
}
send_move(i) {
return fetch_post_json("move", { move: i });
}
status = "Next player: " + (Team.properties[this.state.next_to_play].name);
}
status = "Next player: " + (Team.properties[this.state.next_to_play].name);
}
+ return [
+ <GameInfo
+ id={this.state.game_info.id}
+ url={this.state.game_info.url}
+ />,
- <div className="game-info">
- <div>{status}</div>
- </div>
<div className="game-board">
<Board
game_over={winner}
<div className="game-board">
<Board
game_over={winner}
-// ========================================
-
ReactDOM.render(<Game
ref={(me) => window.game = me}
/>, document.getElementById("tictactoe"));
ReactDOM.render(<Game
ref={(me) => window.game = me}
/>, document.getElementById("tictactoe"));