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;hp=d49e0aa05e9204fcefa2e7e88653dcd5bdc73a06

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>
           );
         })}