Beautify

index.html

@@ -21,9 +21,8 @@
     }
 
     #scoreboard .bar {
-      background-color: chartreuse;
-      width: 80%;
-      height: 0.8em;
+      height: 1.2em;
+      border-radius: 0.6em;
     }
   </style>
 

static/js/main.js

@@ -1,10 +1,38 @@
 "use strict"
 
+const COLORS = [
+    '#7FD9E2',
+    // '#8ED4F8',
+    '#ADCCFF',
+    // '#D1C2FC',
+    '#EDBAE9',
+    // '#FEB5CE',
+    '#FFB7B2',
+    // '#F3BE9C',
+    '#DCC892',
+    // '#BFD197',
+    '#A0D7AA',
+    // '#87DAC6',
+];
+
+// https://stackoverflow.com/a/7616484
+Object.defineProperty(String.prototype, 'hashCode', {
+    value: function () {
+        var hash = 0, i, chr;
+        for (i = 0; i < this.length; i++) {
+            chr = this.charCodeAt(i);
+            hash = ((hash << 5) - hash) + chr;
+            hash |= 0; // Convert to 32bit integer
+        }
+        return hash;
+    }
+});
+
 function render_scoreboard(data) {
     const users = Object.values(data.users);
 
     users.sort((a, b) => b.score - a.score);
-    const min_score = users[users.length-1].score,
+    const min_score = users[users.length - 1].score,
         max_score = users[0].score;
 
     const tbody = document.querySelector("#scoreboard tbody");
@@ -24,6 +52,8 @@ function render_scoreboard(data) {
 
         const score_percent = Math.floor(10 + (user.score - min_score) / (max_score - min_score) * 90) + "%";
         bar.style.width = score_percent;
+        const color_index = ((user.uuid.hashCode() % COLORS.length) + COLORS.length) % COLORS.length;
+        bar.style.backgroundColor = COLORS[color_index];
 
         name.innerText = user.name;
         score.innerText = user.score;
@@ -49,4 +79,4 @@ async function update_scoreboard() {
 }
 
 update_scoreboard();
-setInterval(update_scoreboard, 1000);
+// setInterval(update_scoreboard, 1000);