From e4c308c3331de77071170b0711505a990eaba617 Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Sun, 28 Jun 2020 16:25:29 -0700
Subject: [PATCH] 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.
---
 empathy/empathy.css | 24 ++++++++++++++++++++++++
 empathy/empathy.jsx | 21 +++++++++++++++++++--
 2 files changed, 43 insertions(+), 2 deletions(-)

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