Add a "PERFECT" label for a player with a perfect score
authorCarl Worth <cworth@cworth.org>
Sun, 28 Jun 2020 22:28:34 +0000 (15:28 -0700)
committerCarl Worth <cworth@cworth.org>
Sun, 28 Jun 2020 22:31:29 +0000 (15:31 -0700)
It's nice to know when a player (or group of players) did as well as
could be done.

empathy/empathy.css
empathy/empathy.jsx

index 36281bc3ab37d6f24d072bd3f152e37d9a28d5c2..27d5a3d989d12cc58d95a155d169241ff549dee2 100644 (file)
     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;
+}
index 2867dab55c1873f97f79650f2774879c80ff8c11..9f187d8d582ba1d8b7bf0a6cd0824e430d568921 100644 (file)
@@ -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}