From: Carl Worth <cworth@cworth.org>
Date: Sun, 28 Jun 2020 23:25:29 +0000 (-0700)
Subject: empathy: Add the ability to star one favorite item
X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=commitdiff_plain;h=e4c308c3331de77071170b0711505a990eaba617

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 27d5a3d..8a3f36c 100644
--- a/empathy/empathy.css
+++ b/empathy/empathy.css
@@ -42,6 +42,7 @@
     margin-bottom: 0.25em;
     padding: 0;
     border-radius: 10px;
+    position: relative;
 }
 
 .ambiguity-button {
@@ -110,3 +111,26 @@
     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 0789b46..4151cf7 100644
--- a/empathy/empathy.jsx
+++ b/empathy/empathy.jsx
@@ -482,7 +482,8 @@ class Ambiguities extends React.PureComponent {
 
     this.state = {
       word_sets: word_sets,
-      selected: null
+      selected: null,
+      starred: null
     };
 
     this.submitted = false;
@@ -497,7 +498,8 @@ 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 => Array.from(set)),
+        kudos: Array.from(this.state.starred)
       }
     );
 
@@ -684,6 +686,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>
           );
         })}