From 767b68639ca150cc130472dd8df68ea7eb2cc53e Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Sun, 8 Mar 2026 11:11:10 -0400
Subject: [PATCH] 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.
---
 anagrams/anagrams.jsx   | 34 +++++++++++++---------------------
 letterrip/letterrip.jsx | 26 ++++++++++++--------------
 2 files changed, 25 insertions(+), 35 deletions(-)

diff --git a/anagrams/anagrams.jsx b/anagrams/anagrams.jsx
index 631b913..e150b9a 100644
--- 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 620cfbc..7ce0265 100644
--- 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));
 });
-- 
2.45.2