empathy: Add the ability to star one favorite item

The client isn't currently saving information about which words the
player themself submitted, so it isn't yet preventing the user from
sending kudos to an item they submitted themself.

diff --git a/empathy/empathy.css b/empathy/empathy.css
index 27d5a3d989d12cc58d95a155d169241ff549dee2..8a3f36c7384aeaf3596fedc35fecc40963de2097 100644 (file)
--- a/empathy/empathy.css
+++ b/empathy/empathy.css
@@ -42,6 +42,7 @@
     margin-bottom: 0.25em;
     padding: 0;
     border-radius: 10px;
     margin-bottom: 0.25em;
     padding: 0;
     border-radius: 10px;

+    position: relative;

 }
 
 .ambiguity-button {
 }
 
 .ambiguity-button {


@@ -110,3 +111,26 @@
     padding: 0.25em;
     text-transform: uppercase;
 }
     padding: 0.25em;
     text-transform: uppercase;
 }

+
+.star-button {
+    color: white;
+    opacity: 0.5;
+    font-size: 125%;
+    font-weight: bold;
+    cursor: pointer;
+    position: absolute;
+    right: 0.5em;
+    top: 0;
+}
+
+@media (hover:hover) {
+    .star-button:hover {
+        color: var(--accent-color-bright);
+        opacity: 1.0;
+    }
+}
+
+.star-button.selected {
+    color: var(--accent-color-bright);
+    opacity: 1.0;
+}

diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx
index 0789b463fe5813cb3fc23b8cb4a84610dd32b2a5..4151cf729edf1de6a53151ad49b947aeb2e504d9 100644 (file)
--- a/empathy/empathy.jsx
+++ b/empathy/empathy.jsx
@@ -482,7 +482,8 @@ class Ambiguities extends React.PureComponent {
 
     this.state = {
       word_sets: word_sets,
 
     this.state = {
       word_sets: word_sets,

-      selected: null
+      selected: null,
+      starred: null

     };
 
     this.submitted = false;
     };
 
     this.submitted = false;


@@ -497,7 +498,8 @@ class Ambiguities extends React.PureComponent {
 
     const response = await fetch_post_json(
       `judged/${this.props.prompt.id}`,{
 
     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 => Array.from(set)),
+        kudos: Array.from(this.state.starred)

       }
     );
 
       }
     );
 


@@ -684,6 +686,21 @@ class Ambiguities extends React.PureComponent {
                   </button>
                 );
               })}
                   </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>
           );
         })}
             </div>
           );
         })}