Add a ready bit to client state, and render nothing before ready

The ready bit is set to true when the client receives a game-state
event from the server.

This commit fixes things so that users will not see a brief flash of
the category-input form before the actual content that is desired.

diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx
index 20612e35336576b229c4a8f9fccc7e7bd1179e97..c216e4921b9b5d68d8731defddc353125a010d68 100644 (file)
--- a/empathy/empathy.jsx
+++ b/empathy/empathy.jsx
@@ -88,6 +88,8 @@ events.addEventListener("game-state", event => {
   window.game.set_end_judging(state.end_judging);
 
   window.game.set_scores(state.scores);
+
+  window.game.state_ready();
 });
 
 events.addEventListener("prompt", event => {
@@ -804,7 +806,8 @@ class Game extends React.PureComponent {
       players_judging: {},
       judging_idle: false,
       end_judging_votes: new Set(),
-      scores: null
+      scores: null,
+      ready: false
     };
   }
 
@@ -852,7 +855,8 @@ class Game extends React.PureComponent {
       players_judging: {},
       judging_idle: false,
       end_judging_votes: new Set(),
-      scores: null
+      scores: null,
+      ready: false
     });
   }
 
@@ -982,7 +986,6 @@ class Game extends React.PureComponent {
   }
 
   set_judging_idle(value) {
-    console.log("Setting judging idle to " + value);
     this.setState({
       judging_idle: value
     });
@@ -1012,6 +1015,12 @@ class Game extends React.PureComponent {
     });
   }
 
+  state_ready() {
+    this.setState({
+      ready: true
+    });
+  }
+
   render() {
     const state = this.state;
     const players_total = 1 + state.other_players.length;
@@ -1072,6 +1081,9 @@ class Game extends React.PureComponent {
              />;
     }
 
+    if (! state.ready)
+      return null;
+
     return [
       <GameInfo
         key="game-info"