Add bars in background

Author: klieret

static/css/layout.css

@@ -219,7 +219,7 @@ nav {
 .leaderboard-table td:first-child,
 .leaderboard-table th:first-child {
     text-align: left;
-    width: 3rem;
+    width: 1rem;
 }
 
 .leaderboard-table td:last-child,
@@ -228,6 +228,21 @@ nav {
     width: 8rem;
 }
 
+/* ELO row with background bar visualization spanning entire row */
+.elo-row {
+    position: relative;
+    background: linear-gradient(
+        to right,
+        rgba(34, 197, 94, 0.25) calc(var(--elo-percent) * 1%),
+        transparent calc(var(--elo-percent) * 1%)
+    );
+}
+
+.elo-row td {
+    position: relative;
+    z-index: 1;
+}
+
 /* Insights */
 .insights-container {
     width: 75%;

templates/_leaderboard.html

@@ -1,3 +1,6 @@
+{% set elo_min_scale = 700 %}
+{% set elo_max_scale = leaderboard.board | map(attribute='elo') | max %}
+{% set elo_scale_range = elo_max_scale - elo_min_scale %}
 <table class="leaderboard-table">
     <thead>
         <tr>
@@ -8,7 +11,9 @@
     </thead>
     <tbody>
         {% for entry in leaderboard.board %}
-        <tr>
+        {% set elo_percent_raw = (entry.elo - elo_min_scale) / elo_scale_range * 100 %}
+        {% set elo_percent = [0, [elo_percent_raw, 100] | min] | max %}
+        <tr class="elo-row" style="--elo-percent: {{ '%.1f' | format(elo_percent) }}">
             <td>{{ entry.rank }}</td>
             <td>
                 {% set logos = {
@@ -28,7 +33,7 @@
                  />
                 {{ entry.model }}
             </td>
-            <td>{{ entry.elo }} ± {{ entry.elo_std }}</td>
+            <td class="elo-value">{{ entry.elo }} ± {{ entry.elo_std }}</td>
         </tr>
         {% endfor %}
     </tbody>