From d01d6fa39a5616a147e16a51c32f84eafc1280cf Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Thu, 4 Jun 2020 18:19:41 -0700
Subject: [PATCH] tictactoe: Add a simple game-info div

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).
---
 tictactoe/tictactoe.jsx | 44 ++++++++++++++++++++++++++++++++++-------
 1 file changed, 37 insertions(+), 7 deletions(-)

diff --git a/tictactoe/tictactoe.jsx b/tictactoe/tictactoe.jsx
index 153dd74..7ea8c6f 100644
--- a/tictactoe/tictactoe.jsx
+++ b/tictactoe/tictactoe.jsx
@@ -20,6 +20,10 @@ ${message}
   message_area.insertAdjacentHTML('beforeend', message);
 }
 
+/*********************************************************
+ * Handling server-sent event stream                     *
+ *********************************************************/
+
 const events = new EventSource("events");
 
 events.onerror = function(event) {
@@ -28,6 +32,12 @@ 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);
 
@@ -44,6 +54,19 @@ events.addEventListener("game-state", event => {
   }
 });
 
+/*********************************************************
+ * 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";
 
@@ -113,6 +136,7 @@ class Game extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      game_info: {},
       history: [
         {
           squares: Array(9).fill(null)
@@ -123,6 +147,12 @@ class Game extends React.Component {
     };
   }
 
+  set_game_info(info) {
+    this.setState({
+      game_info: info
+    });
+  }
+
   send_move(i) {
     return fetch_post_json("move", { move: i });
   }
@@ -186,11 +216,13 @@ class Game extends React.Component {
       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}
@@ -199,12 +231,10 @@ class Game extends React.Component {
           />
         </div>
       </div>
-    );
+    ];
   }
 }
 
-// ========================================
-
 ReactDOM.render(<Game
                   ref={(me) => window.game = me}
                 />, document.getElementById("tictactoe"));
-- 
2.43.0