Add some explanatory text when there aren't enough categories/votes

[lmno.games] / empathy / empathy.jsx

diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx
index 6e98b327be7ceea20096c3a4e5eb56f3d95c3f0d..37fd910e75eeca154e304b08dda107414456a9dc 100644 (file)
--- a/empathy/empathy.jsx
+++ b/empathy/empathy.jsx
@@ -433,14 +433,34 @@ const PromptOptions = React.memo(props => {
 
 const LetsPlay = React.memo(props => {
 
-  const quorum = Math.round((props.num_players + 1) / 2);
+  const quorum = Math.max(0, props.num_players - props.prompts.length);
   const max_votes = props.prompts.reduce(
     (max_so_far, v) => Math.max(max_so_far, v.votes.length), 0);
 
-  if (max_votes < quorum)
-    return null;
+  if (max_votes < quorum) {
+    let text = `Before we play, we should collect a bit
+                more information about what category would
+                be interesting for this group. So, either
+                type a new category option above, or else`;
+    if (props.prompts.length) {
+      if (props.prompts.length > 1)
+        text += " vote on some of the categories below.";
+      else
+        text += " vote on the category below.";
+    } else {
+      text += " wait for others to submit, and then vote on them below.";
+    }
+
+    return (
+      <div className="before-we-play">
+        <p>
+          {text}
+        </p>
+      </div>
+    );
+  }
 
-  const candidates = props.prompts.filter(p => p.votes.length >= quorum);
+  const candidates = props.prompts.filter(p => p.votes.length >= max_votes);
   const index = Math.floor(Math.random() * candidates.length);
   const winner = candidates[index];
 
@@ -1310,15 +1330,15 @@ class Game extends React.PureComponent {
       <CategoryRequest
         key="category-request"
       />,
-      <PromptOptions
-        key="prompts"
-        prompts={state.prompts}
-        player={state.player_info}
-      />,
       <LetsPlay
         key="lets-play"
         num_players={1+state.other_players.length}
         prompts={state.prompts}
+      />,
+      <PromptOptions
+        key="prompts"
+        prompts={state.prompts}
+        player={state.player_info}
       />
     ];
   }