From 03ec08e67b15cfb053bb8e7d48aefc331fdbda33 Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Sun, 28 Jun 2020 15:28:34 -0700
Subject: [PATCH] Add a "PERFECT" label for a player with a perfect score

It's nice to know when a player (or group of players) did as well as
could be done.
---
 empathy/empathy.css | 10 ++++++++++
 empathy/empathy.jsx | 14 ++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/empathy/empathy.css b/empathy/empathy.css
index 36281bc..27d5a3d 100644
--- a/empathy/empathy.css
+++ b/empathy/empathy.css
@@ -100,3 +100,13 @@
     transition-duration: 2s;
     transition-delay: 1s;
 }
+
+.label {
+    border-radius: 4px;
+    background-color: var(--accent-color-bright);
+    color: var(--text-fg-on-accent-bright);
+    font-size: 72%;
+    font-weight: bold;
+    padding: 0.25em;
+    text-transform: uppercase;
+}
diff --git a/empathy/empathy.jsx b/empathy/empathy.jsx
index 2867dab..9f187d8 100644
--- a/empathy/empathy.jsx
+++ b/empathy/empathy.jsx
@@ -1148,12 +1148,26 @@ class Game extends React.PureComponent {
     const players_total = 1 + state.other_players.length;
 
     if (state.scores) {
+
+      let perfect_score = 0;
+      for (let i = 0;
+           i < state.active_prompt.items &&
+           i < state.scores.words.length;
+           i++)
+      {
+        perfect_score += state.scores.words[i].players.length;
+      }
+
       return (
         <div className="scores">
           <h2>{state.active_prompt.prompt}</h2>
           <h2>Scores</h2>
           <ul>
             {state.scores.scores.map(score => {
+              let perfect = null;
+              if (score.score == perfect_score) {
+                perfect = <span className="label">Perfect!</span>;
+              }
               return (
                 <li key={score.players[0]}>
                   {score.players.join("/")}: {score.score} {perfect}
-- 
2.43.0