Fix bug preventing a user from being able to "unselect" a word while judging

[lmno.games] / empathy / empathy.jsx

diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx
index c4aafde512166824ab87651015b2dd8fccc5e01e..973a9537f591e34917ff5a476c997cb795ac3de5 100644 (file)
--- a/empathy/empathy.jsx
+++ b/empathy/empathy.jsx
@@ -349,10 +349,6 @@ const PromptOptions = React.memo(props => {
 
 const LetsPlay = React.memo(props => {
 
-  function handle_click(prompt_id) {
-    fetch_post_json
-  }
-
   const quorum = Math.round((props.num_players + 1) / 2);
   const max_votes = props.prompts.reduce(
     (max_so_far, v) => Math.max(max_so_far, v.votes.length), 0);
@@ -397,6 +393,8 @@ class Ambiguities extends React.PureComponent {
       submitted: false,
       selected: null
     };
+
+    this.judging_sent_recently = false;
   }
 
   async handle_submit() {
@@ -413,7 +411,7 @@ class Ambiguities extends React.PureComponent {
         return;
       }
     } else {
-      add_message("danger", "An error occurred submitting your answers");
+      add_message("danger", "An error occurred submitting the results of your judging");
       return;
     }
 
@@ -423,12 +421,30 @@ class Ambiguities extends React.PureComponent {
   }
 
   handle_click(word) {
+
+    /* Let the server know we are doing some judging, (but rate limit
+     * this so we don't send a "judging" notification more frquently
+     * than necessary.
+     */
+    if (! this.judging_sent_recently) {
+      fetch_post_json(`judging/${this.props.prompt.id}`);
+      this.judging_sent_recently = true;
+      setTimeout(() => { this.judging_sent_recently = false; }, 1000);
+    }
+
     if (this.state.selected == word) {
       /* Second click on same word removes the word from the group. */
       const idx = this.state.word_sets.findIndex(s => s.has(word));
       const set = this.state.word_sets[idx];
-      if (set.size === 1)
+      if (set.size === 1) {
+        /* When the word is already alone, there's nothing to do but
+         * to un-select it. */
+        this.setState({
+          selected: null
+        });
         return;
+      }
+
       const new_set = new Set([...set].filter(w => w !== word));
       this.setState({
         selected: null,
@@ -482,7 +498,7 @@ class Ambiguities extends React.PureComponent {
             Still waiting for the following players:
           </p>
           <ul>
-            {Object.entries(this.props.players_judging).map(player => {
+            {Object.keys(this.props.players_judging).map(player => {
               return (
                 <li
                   key={player}
@@ -573,7 +589,27 @@ class ActivePrompt extends React.PureComponent {
     };
 
     this.answers = [...Array(items)].map(() => React.createRef());
+    this.answering_sent_recently = false;
+
     this.handle_submit = this.handle_submit.bind(this);
+    this.handle_change = this.handle_change.bind(this);
+  }
+
+  handle_change(event) {
+    /* We don't care (or even look) at what the player is typing at
+     * this point. We simply want to be informed that the player _is_
+     * typing so that we can tell the server (which will tell other
+     * players) that there is activity here.
+     */
+
+    /* Rate limit so that we don't send an "answering" notification
+     * more frequently than necessary.
+     */
+    if (! this.answering_sent_recently) {
+      fetch_post_json(`answering/${this.props.prompt.id}`);
+      this.answering_sent_recently = true;
+      setTimeout(() => { this.answering_sent_recently = false; }, 1000);
+    }
   }
 
   async handle_submit(event) {
@@ -616,7 +652,7 @@ class ActivePrompt extends React.PureComponent {
           Still waiting for the following players:
           </p>
           <ul>
-            {Object.entries(this.props.players_answering).map(player => {
+            {Object.keys(this.props.players_answering).map(player => {
               return (
                 <li
                   key={player}
@@ -670,6 +706,7 @@ class ActivePrompt extends React.PureComponent {
                   name={`answer_${i}`}
                   required
                   autoComplete="off"
+                  onChange={this.handle_change}
                   ref={this.answers[i]}
                 />
               </div>