From: Carl Worth <cworth@cworth.org>
Date: Mon, 8 Jun 2020 16:15:00 +0000 (-0700)
Subject: Add display of votes on top of each prompt's vote button
X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=commitdiff_plain;h=dee335da95357a8993a22aab01809d5bbd3e9b57

Add display of votes on top of each prompt's vote button

This is a simple bit of feedback so players can see which options are
being voted on by other players. I won't claim that there's anything
inspired about the stlying or color selection here. Maybe Karen will
have some suggestions to improve this later.
---

diff --git a/empathy/empathy.css b/empathy/empathy.css
index f3a4c4b..d553597 100644
--- a/empathy/empathy.css
+++ b/empathy/empathy.css
@@ -8,3 +8,24 @@
     padding: 1em;
     margin-top: 0.25em;
 }
+
+.vote-choices {
+    display: flex;
+}
+
+.vote-choice {
+    font-size: 40%;
+    background-color: var(--accent-color-bright);
+    color: var(--text-fg-on-accent-bright);
+    border-radius: 4px;
+    padding-left: 4px;
+    padding-right: 4px;
+    margin-right: 0.5em;
+}
+
+@media (hover:hover) {
+    button:hover .vote-choice {
+        background-color: var(--accent-color);
+        color: var(--text-fg-on-accent);
+    }
+}
diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx
index 1867381..b69ce6f 100644
--- a/empathy/empathy.jsx
+++ b/empathy/empathy.jsx
@@ -234,6 +234,18 @@ function PromptOptions(props) {
             onClick={() => handle_click(p.id)}
           >
             {p.prompt}
+            <div className="vote-choices">
+              {p.votes.map(v => {
+                return (
+                  <div
+                    key={v}
+                    className="vote-choice"
+                  >
+                    {v}
+                  </div>
+                );
+              })}
+            </div>
           </button>
         );
       })}