Fix to use server-sent state for whether player has answered/judged

Previously we were using a component state Boolean "submitted" for
this information, but that's fundamentally broken since if the client
reloads the page that state is lost, resulting in the user being
presented with the form as to submit a second time (which is not
allowed by the game).

So, now the rendering looks to see whether the current player's name
is in the list of submitted players, and if so, it does not display
the form. This is exactly what we want.

diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx
index 566ad105c5e3cdb3727ffe504d74ca52e9c0efc4..80069426d941666e2a812434bef72d2663995bbf 100644 (file)
--- a/empathy/empathy.jsx
+++ b/empathy/empathy.jsx
@@ -402,14 +402,19 @@ class Ambiguities extends React.PureComponent {
 
     this.state = {
       word_sets: word_sets,
 
     this.state = {
       word_sets: word_sets,

-      submitted: false,

       selected: null
     };
 
       selected: null
     };
 

+    this.submitted = false;

     this.judging_sent_recently = false;
   }
 
   async handle_submit() {
     this.judging_sent_recently = false;
   }
 
   async handle_submit() {

+
+    /* Don't submit a second time. */
+    if (this.submitted)
+      return;
+

     const response = await fetch_post_json(
       `judged/${this.props.prompt.id}`,{
         word_groups: this.state.word_sets.map(set => Array.from(set))
     const response = await fetch_post_json(
       `judged/${this.props.prompt.id}`,{
         word_groups: this.state.word_sets.map(set => Array.from(set))


@@ -427,9 +432,7 @@ class Ambiguities extends React.PureComponent {
       return;
     }
 
       return;
     }
 

-    this.setState({
-      submitted: true
-    });
+    this.submitted = true;

   }
 
   handle_click(word) {
   }
 
   handle_click(word) {


@@ -498,7 +501,7 @@ class Ambiguities extends React.PureComponent {
   }
 
   render() {
   }
 
   render() {

-    if (this.state.submitted)
+    if (this.props.players_judged.has(this.props.player.name)) {

       return (
         <div className="please-wait">
           <h2>Submission received</h2>
       return (
         <div className="please-wait">
           <h2>Submission received</h2>


@@ -543,6 +546,7 @@ class Ambiguities extends React.PureComponent {
 
         </div>
       );
 
         </div>
       );

+    }

 
     const btn_class = "ambiguity-button";
     const btn_selected_class = btn_class + " selected";
 
     const btn_class = "ambiguity-button";
     const btn_selected_class = btn_class + " selected";


@@ -596,9 +600,7 @@ class ActivePrompt extends React.PureComponent {
     super(props);
     const items = props.prompt.items;
 
     super(props);
     const items = props.prompt.items;
 

-    this.state = {
-      submitted: false
-    };
+    this.submitted = false;

 
     this.answers = [...Array(items)].map(() => React.createRef());
     this.answering_sent_recently = false;
 
     this.answers = [...Array(items)].map(() => React.createRef());
     this.answering_sent_recently = false;


@@ -630,6 +632,10 @@ class ActivePrompt extends React.PureComponent {
     /* Prevent the default page-changing form-submission behavior. */
     event.preventDefault();
 
     /* Prevent the default page-changing form-submission behavior. */
     event.preventDefault();
 

+    /* And don't submit a second time. */
+    if (this.submitted)
+      return;
+

     const response = await fetch_post_json(`answer/${this.props.prompt.id}`, {
       answers: this.answers.map(r => r.current.value)
     });
     const response = await fetch_post_json(`answer/${this.props.prompt.id}`, {
       answers: this.answers.map(r => r.current.value)
     });


@@ -646,13 +652,11 @@ class ActivePrompt extends React.PureComponent {
 
     /* Everything worked. Server is happy with our answers. */
     form.reset();
 
     /* Everything worked. Server is happy with our answers. */
     form.reset();

-    this.setState({
-        submitted: true
-    });
+    this.submitted = true;

   }
 
   render() {
   }
 
   render() {

-    if (this.state.submitted)
+    if (this.props.players_answered.has(this.props.player.name)) {

       return (
         <div className="please-wait">
           <h2>Submission received</h2>
       return (
         <div className="please-wait">
           <h2>Submission received</h2>


@@ -697,6 +701,7 @@ class ActivePrompt extends React.PureComponent {
 
         </div>
       );
 
         </div>
       );

+    }

 
     return (
       <div className="active-prompt">
 
     return (
       <div className="active-prompt">


@@ -983,6 +988,7 @@ class Game extends React.PureComponent {
       return <Ambiguities
                prompt={state.active_prompt}
                words={state.ambiguities}
       return <Ambiguities
                prompt={state.active_prompt}
                words={state.ambiguities}

+               player={state.player_info}

                players_judged={state.players_judged}
                players_judging={state.players_judging}
                votes={state.end_judging_votes}
                players_judged={state.players_judged}
                players_judging={state.players_judging}
                votes={state.end_judging_votes}


@@ -992,6 +998,7 @@ class Game extends React.PureComponent {
     if (state.active_prompt) {
       return <ActivePrompt
                prompt={state.active_prompt}
     if (state.active_prompt) {
       return <ActivePrompt
                prompt={state.active_prompt}

+               player={state.player_info}

                players_answered={state.players_answered}
                players_answering={state.players_answering}
                votes={state.end_answers_votes}
                players_answered={state.players_answered}
                players_answering={state.players_answering}
                votes={state.end_answers_votes}