letterrip, anagrams: Make game reload smoother

Previously we were requiring each player to do a separate join_game
(even after they were already part of the game). Notably, if the user
ever reloaded their browser, they had to click "Join game" yet again.

Instead, in this commit we add a game.started state. And we only need
one player to start the game, triggering the send of the started game
state to all players.

Now, if a player reloads their browser, they will just see the game
state, and not a "join game" button.

diff --git a/anagrams/anagrams.jsx b/anagrams/anagrams.jsx
index 631b91374c0f879dce1c31b97faea762d671eebf..e150b9aa8b2c0773f0b3229b7f67f29c80ad53c2 100644 (file)
--- a/anagrams/anagrams.jsx
+++ b/anagrams/anagrams.jsx
@@ -362,24 +362,12 @@ class Game extends React.Component {
    * Actions                                           *
    *****************************************************/
 
-  async join_game() {
-    const response = await fetch_post_json("join");
-    if (response.ok) {
-      const data = await response.json();
-      this.setState({
-        joined: true,
-        center: data.center,
-        player_words: data.player_words,
-        scores: data.scores,
-        bag_remaining: data.remaining
-      });
-      /* Initialize positions for center tiles. */
-      const positions = {};
-      for (const tile of data.center) {
-        positions[tile.id] = this._random_position();
-      }
-      this.setState({ tile_positions: positions });
-    }
+  async start_game() {
+    await fetch_post_json("start");
+  }
+
+  receive_game_started() {
+    this.setState({ joined: true });
   }
 
   async deal_letter() {
@@ -810,9 +798,9 @@ class Game extends React.Component {
                 url={state.game_info.url} />,
 
       !state.joined ? (
-        <button key="join"
-                onClick={() => this.join_game()}>
-          Join Game
+        <button key="start"
+                onClick={() => this.start_game()}>
+          Start Game
         </button>
       ) : null,
 
@@ -1136,6 +1124,10 @@ events.addEventListener("player-exit", event => {
   window.game.remove_other_player(JSON.parse(event.data));
 });
 
+events.addEventListener("game-started", event => {
+  window.game.receive_game_started();
+});
+
 events.addEventListener("center", event => {
   window.game.receive_center(JSON.parse(event.data));
 });

diff --git a/letterrip/letterrip.jsx b/letterrip/letterrip.jsx
index 620cfbcc9ddca8e45ffe28b645a332a67deced43..7ce0265e6ece4ec5115679e27230b2026b1841f6 100644 (file)
--- a/letterrip/letterrip.jsx
+++ b/letterrip/letterrip.jsx
@@ -421,18 +421,12 @@ class Game extends React.Component {
    * Actions                                           *
    *****************************************************/
 
-  async join_game() {
-    const response = await fetch_post_json("join");
-    if (response.ok) {
-      const data = await response.json();
-      const tiles = data.tiles;
-      this.setState({
-        joined: true,
-        tiles: tiles,
-        rack: tiles.map((_, i) => i),
-        bag_remaining: data.remaining
-      });
-    }
+  async start_game() {
+    await fetch_post_json("start");
+  }
+
+  receive_game_started() {
+    this.setState({ joined: true });
   }
 
   async toggle_stuck() {
@@ -868,8 +862,8 @@ class Game extends React.Component {
       ) : null,
 
       !state.joined && !state.game_over ? (
-        <button key="join" onClick={() => this.join_game()}>
-          Join Game
+        <button key="start" onClick={() => this.start_game()}>
+          Start Game
         </button>
       ) : null,
 
@@ -1097,6 +1091,10 @@ events.addEventListener("player-exit", event => {
   window.game.remove_other_player(JSON.parse(event.data));
 });
 
+events.addEventListener("game-started", event => {
+  window.game.receive_game_started();
+});
+
 events.addEventListener("tiles", event => {
   window.game.receive_tiles(JSON.parse(event.data));
 });