X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=blobdiff_plain;f=empathy%2Fempathy.jsx;h=39889f7d8d7d16e4aba10f4385d8564931696a57;hp=163b977cbb8c474560a4dfa9cf24c1a03926e56b;hb=78536d0d2b714d5a88dcb67124c2de963c2e316d;hpb=f9c9dec19b3ee6e272683301d49c3add6fb176f8

diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx
index 163b977..39889f7 100644
--- a/empathy/empathy.jsx
+++ b/empathy/empathy.jsx
@@ -283,7 +283,7 @@ class CategoryRequest extends React.PureComponent {
     const match = category.match(/[0-9]+/);
     if (match) {
       const num_items = parseInt(match[0], 10);
-      if (num_items <= MAX_PROMPT_ITEMS)
+      if (num_items > 0 && num_items <= MAX_PROMPT_ITEMS)
         category_input.setCustomValidity("");
     }
   }
@@ -311,6 +311,12 @@ class CategoryRequest extends React.PureComponent {
       return;
     }
 
+    if (num_items < 1) {
+      category_input.setCustomValidity("Category must require at least one item.");
+      form.reportValidity();
+      return;
+    }
+
     const response = await fetch_post_json("prompts", {
       items: num_items,
       prompt: category
@@ -363,6 +369,45 @@ class CategoryRequest extends React.PureComponent {
   }
 }
 
+const PromptOption = React.memo(props => {
+
+  const prompt = props.prompt;
+
+  if (prompt.votes_against.find(v => v === props.player.name))
+    return false;
+
+  return (
+    <button
+      className="vote-button"
+      key={prompt.id}
+      onClick={() => fetch_post_json(`vote/${prompt.id}`) }
+    >
+      <span
+        className="hide-button"
+        onClick={(event) => {
+          event.stopPropagation();
+          fetch_post_json(`vote_against/${prompt.id}`);
+        }}
+      >
+        &times;
+      </span>
+      {prompt.prompt}
+      <div className="vote-choices">
+        {prompt.votes.map(v => {
+          return (
+            <div
+              key={v}
+              className="vote-choice"
+            >
+              {v}
+            </div>
+          );
+        })}
+      </div>
+    </button>
+  );
+});
+
 const PromptOptions = React.memo(props => {
 
   if (props.prompts.length === 0)
@@ -375,43 +420,47 @@ const PromptOptions = React.memo(props => {
         Select any categories below that you'd like to play.
         You can choose as many as you'd like.
       </p>
-      {props.prompts.map(p => {
-        return (
-          <button
-            className="vote-button"
-            key={p.id}
-            onClick={() => fetch_post_json(`vote/${p.id}`) }
-          >
-            {p.prompt}
-            <div className="vote-choices">
-              {p.votes.map(v => {
-                return (
-                  <div
-                    key={v}
-                    className="vote-choice"
-                  >
-                    {v}
-                  </div>
-                );
-              })}
-            </div>
-          </button>
-        );
-      })}
+      {props.prompts.map(
+        prompt => <PromptOption
+                    key={prompt.id}
+                    prompt={prompt}
+                    player={props.player}
+                  />
+      )}
     </div>
   );
 });
 
 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];
 
@@ -437,15 +486,34 @@ class Ambiguities extends React.PureComponent {
   constructor(props) {
     super(props);
 
-    const word_sets = props.words.map(word => {
-      const set = new Set();
-      set.add(word);
-      return set;
-    });
+    function canonize(word) {
+      return word.replace(/((a|an|the) )?(.*?)s?$/i, '$3');
+    }
+
+    const word_sets = [];
+
+    for (let word of props.words) {
+      const word_canon = canonize(word);
+      let found_match = false;
+      for (let set of word_sets) {
+        const set_canon = canonize(set.values().next().value);
+        if (word_canon === set_canon) {
+          set.add(word);
+          found_match = true;;
+          break;
+        }
+      }
+      if (! found_match) {
+        const set = new Set();
+        set.add(word);
+        word_sets.push(set);
+      }
+    }
 
     this.state = {
       word_sets: word_sets,
-      selected: null
+      selected: null,
+      starred: null
     };
 
     this.submitted = false;
@@ -460,7 +528,11 @@ class Ambiguities extends React.PureComponent {
 
     const response = await fetch_post_json(
       `judged/${this.props.prompt.id}`,{
-        word_groups: this.state.word_sets.map(set => Array.from(set))
+        word_groups: this.state.word_sets.map(
+          set => ({
+            words: Array.from(set),
+            kudos: this.state.starred === set ? true : false
+          }))
       }
     );
 
@@ -552,7 +624,7 @@ class Ambiguities extends React.PureComponent {
           className="vote-button"
           onClick={() => fetch_post_json(`end-judging/${this.props.prompt.id}`) }
         >
-          Move On
+          Move On Without Their Input
           <div className="vote-choices">
             {[...this.props.votes].map(v => {
               return (
@@ -585,9 +657,14 @@ class Ambiguities extends React.PureComponent {
                 <li
                   key={player}
                 >
-                  {player}
-                  {this.props.players_judging[player] ?
-                   <span className="typing"/> : null }
+                  {player}{' '}
+                  <span className=
+                  {this.props.players_judging[player].active ?
+                   "typing active"
+                   :
+                   "typing idle"}>
+                    <span>{'.'}</span><span>{'.'}</span><span>{'.'}</span>
+                  </span>
                 </li>
               );
             })}
@@ -642,6 +719,21 @@ class Ambiguities extends React.PureComponent {
                   </button>
                 );
               })}
+              <span
+                className={this.state.starred === set ?
+                           "star-button selected" : "star-button"
+                          }
+                onClick={(event) => {
+                  event.stopPropagation();
+                  this.setState({
+                    starred: set
+                  });
+                }}
+              >
+              {this.state.starred === set ?
+               '★' : '☆'
+              }
+              </span>
             </div>
           );
         })}
@@ -720,29 +812,6 @@ class ActivePrompt extends React.PureComponent {
   }
 
   render() {
-    let move_on_button = null;
-    if (this.props.idle) {
-      move_on_button =(
-        <button
-          className="vote-button"
-          onClick={() => fetch_post_json(`end-answers/${this.props.prompt.id}`) }
-        >
-          Move On
-          <div className="vote-choices">
-            {[...this.props.votes].map(v => {
-              return (
-                <div
-                  key={v}
-                  className="vote-choice"
-                >
-                  {v}
-                </div>
-              );
-            })}
-          </div>
-        </button>
-      );
-    }
 
     let still_waiting = null;
     const answering_players = Object.keys(this.props.players_answering);;
@@ -760,9 +829,14 @@ class ActivePrompt extends React.PureComponent {
                 <li
                   key={player}
                 >
-                  {player}
-                  {this.props.players_answering[player] ?
-                   <span className="typing"/> : null }
+                  {player}{' '}
+                  <span className=
+                  {this.props.players_answering[player].active ?
+                   "typing active"
+                   :
+                   "typing idle"}>
+                    <span>{'.'}</span><span>{'.'}</span><span>{'.'}</span>
+                  </span>
                 </li>
               );
             })}
@@ -771,6 +845,32 @@ class ActivePrompt extends React.PureComponent {
       );
     }
 
+    let move_on_button = null;
+    if (this.props.idle) {
+      move_on_button =(
+        <button
+          className="vote-button"
+          onClick={() => fetch_post_json(`end-answers/${this.props.prompt.id}`) }
+        >
+          {answering_players.length ?
+           "Move On Without Their Answers" :
+           "Move On Without Anyone Else"}
+          <div className="vote-choices">
+            {[...this.props.votes].map(v => {
+              return (
+                <div
+                  key={v}
+                  className="vote-choice"
+                >
+                  {v}
+                </div>
+              );
+            })}
+          </div>
+        </button>
+      );
+    }
+
     if (this.props.players_answered.has(this.props.player.name)) {
       return (
         <div className="please-wait">
@@ -954,12 +1054,29 @@ class Game extends React.PureComponent {
   }
 
   set_player_answering(player) {
+    /* Set the player as actively answering now. */
     this.setState({
       players_answering: {
         ...this.state.players_answering,
         [player]: {active: true}
       }
     });
+    /* And arrange to have them marked idle very shortly.
+     *
+     * Note: This timeout is intentionally very, very short. We only
+     * need it long enough that the browser has latched onto the state
+     * change to "active" above. We actually use a CSS transition
+     * delay to control the user-perceptible length of time after
+     * which an active player appears inactive.
+     */
+    setTimeout(() => {
+      this.setState({
+        players_answering: {
+          ...this.state.players_answering,
+          [player]: {active: false}
+        }
+      });
+    }, 100);
   }
 
   set_answering_idle(value) {
@@ -1019,12 +1136,30 @@ class Game extends React.PureComponent {
   }
 
   set_player_judging(player) {
+    /* Set the player as actively judging now. */
     this.setState({
       players_judging: {
         ...this.state.players_judging,
         [player]: {active: true}
       }
     });
+    /* And arrange to have them marked idle very shortly.
+     *
+     * Note: This timeout is intentionally very, very short. We only
+     * need it long enough that the browser has latched onto the state
+     * change to "active" above. We actually use a CSS transition
+     * delay to control the user-perceptible length of time after
+     * which an active player appears inactive.
+     */
+    setTimeout(() => {
+      this.setState({
+        players_judging: {
+          ...this.state.players_judging,
+          [player]: {active: false}
+        }
+      });
+    }, 100);
+
   }
 
   set_judging_idle(value) {
@@ -1086,15 +1221,39 @@ class Game extends React.PureComponent {
     const players_total = 1 + state.other_players.length;
 
     if (state.scores) {
+
+      let perfect_score = 0;
+      for (let i = 0;
+           i < state.active_prompt.items &&
+           i < state.scores.words.length;
+           i++)
+      {
+        perfect_score += state.scores.words[i].players.length;
+      }
+
       return (
         <div className="scores">
           <h2>{state.active_prompt.prompt}</h2>
           <h2>Scores</h2>
           <ul>
             {state.scores.scores.map(score => {
+              let perfect = null;
+              if (score.score === perfect_score) {
+                perfect = <span className="achievement">Perfect!</span>;
+              }
+              let quirkster = null;
+              if (score.score === state.active_prompt.items) {
+                quirkster = <span className="achievement">Quirkster!</span>;
+              }
+              let kudos_slam = null;
+              if (score.kudos > 0 && score.kudos >= players_total - 1) {
+                kudos_slam = <span className="achievement">Kudos Slam!</span>;
+              }
               return (
-                <li key={score.player}>
+                <li key={score.players[0]}>
                   {score.players.join("/")}: {score.score}
+                  {score.kudos ? `, ${'★'.repeat(score.kudos)}` : ""}
+                  {' '}{perfect} {quirkster} {kudos_slam}
                 </li>
               );
             })}
@@ -1102,9 +1261,20 @@ class Game extends React.PureComponent {
           <h2>Words submitted</h2>
           <ul>
             {state.scores.words.map(word => {
+              let great_minds = null;
+              if (word.kudos.length && word.players.length > 1) {
+                great_minds = <span className="achievement">Great Minds!</span>;
+              }
+              let kudos_slam = null;
+              if (word.kudos.length > 0 && word.kudos.length >= players_total - 1) {
+                kudos_slam = <span className="achievement">Kudos Slam!</span>;
+              }
               return (
                 <li key={word.word}>
-                  {word.word} ({word.players.length}): {word.players.join(', ')}
+                  {word.word} ({word.players.length}
+                  {word.kudos.length ? `, ${'★'.repeat(word.kudos.length)}` : ""}
+                  ): {word.players.join(', ')}
+                  {' '}{great_minds}{kudos_slam}
                 </li>
               );
             })}
@@ -1173,14 +1343,15 @@ class Game extends React.PureComponent {
       <CategoryRequest
         key="category-request"
       />,
-      <PromptOptions
-        key="prompts"
-        prompts={state.prompts}
-      />,
       <LetsPlay
         key="lets-play"
         num_players={1+state.other_players.length}
         prompts={state.prompts}
+      />,
+      <PromptOptions
+        key="prompts"
+        prompts={state.prompts}
+        player={state.player_info}
       />
     ];
   }