Add clean support for rejecting categories that are too large

[lmno.games] / empathy / empathy.jsx

diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx
index 60540c03b8246d84fcab3b5c9dc7507f500c10b4..3d7034527c0c8bd49dc8fea14dcf14af96b5520e 100644 (file)
--- a/empathy/empathy.jsx
+++ b/empathy/empathy.jsx
@@ -1,3 +1,5 @@
+const MAX_PROMPT_ITEMS = 20;
+
 function undisplay(element) {
   element.style.display="none";
 }
@@ -185,11 +187,15 @@ class CategoryRequest extends React.PureComponent {
     const category_input = this.category.current;
     const category = category_input.value;
 
-    if (/[0-9]/.test(category))
-      category_input.setCustomValidity("");
+    const match = category.match(/[0-9]+/);
+    if (match) {
+      const num_items = parseInt(match[0], 10);
+      if (num_items <= MAX_PROMPT_ITEMS)
+        category_input.setCustomValidity("");
+    }
   }
 
-  handle_submit(event) {
+  async handle_submit(event) {
     const form = event.currentTarget;
     const category_input = this.category.current;
     const category = category_input.value;
@@ -204,11 +210,30 @@ class CategoryRequest extends React.PureComponent {
       return;
     }
 
-    fetch_post_json("prompts", {
-      items: parseInt(match[0], 10),
+    const num_items = parseInt(match[0], 10);
+
+    if (num_items > MAX_PROMPT_ITEMS) {
+      category_input.setCustomValidity(`Maximum number of items is ${MAX_PROMPT_ITEMS}`);
+      form.reportValidity();
+      return;
+    }
+
+    const response = await fetch_post_json("prompts", {
+      items: num_items,
       prompt: category
     });
 
+    if (response.status === 200) {
+      const result = await response.json();
+      console.log(result);
+      if (! result.valid) {
+        add_message("danger", result.message);
+        return;
+      }
+    } else {
+      add_message("danger", "An error occurred submitting your category");
+    }
+
     form.reset();
   }
 
@@ -332,8 +357,11 @@ class Ambiguities extends React.PureComponent {
   }
 
   async handle_submit() {
-    const response = await fetch_post_json(`judging/${this.props.prompt.id}`,
-                                           this.state.word_groups);
+    const response = await fetch_post_json(
+      `judging/${this.props.prompt.id}`,{
+        word_groups: this.state.word_groups
+      }
+    );
 
     if (response.status === 200) {
       const result = await response.json();
@@ -653,12 +681,7 @@ class Game extends React.PureComponent {
             {state.scores.words.map(word => {
               return (
                 <li key={word.word}>
-                  {word.word}:
-                  {word.players.map(p => {
-                    return (
-                      <span key={p}>{p}{" "}</span>
-                    );
-                  })}
+                  {`${word.word}: ${word.players.join(', ')}`}
                 </li>
               );
             })}