empathy: Add the ability to star one favorite item
authorCarl Worth <cworth@cworth.org>
Sun, 28 Jun 2020 23:25:29 +0000 (16:25 -0700)
committerCarl Worth <cworth@cworth.org>
Sun, 28 Jun 2020 23:25:29 +0000 (16:25 -0700)
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
empathy/empathy.jsx

index 27d5a3d989d12cc58d95a155d169241ff549dee2..8a3f36c7384aeaf3596fedc35fecc40963de2097 100644 (file)
@@ -42,6 +42,7 @@
     margin-bottom: 0.25em;
     padding: 0;
     border-radius: 10px;
+    position: relative;
 }
 
 .ambiguity-button {
     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;
+}
index 0789b463fe5813cb3fc23b8cb4a84610dd32b2a5..4151cf729edf1de6a53151ad49b947aeb2e504d9 100644 (file)
@@ -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>
           );
         })}