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.

diff --git a/empathy/empathy.css b/empathy/empathy.css
index 36281bc3ab37d6f24d072bd3f152e37d9a28d5c2..27d5a3d989d12cc58d95a155d169241ff549dee2 100644 (file)
--- 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 2867dab55c1873f97f79650f2774879c80ff8c11..9f187d8d582ba1d8b7bf0a6cd0824e430d568921 100644 (file)
--- 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}