diff --git a/index.html b/index.html
index 1421422..9079e36 100644
--- a/index.html
+++ b/index.html
@@ -21,9 +21,8 @@
}
#scoreboard .bar {
- background-color: chartreuse;
- width: 80%;
- height: 0.8em;
+ height: 1.2em;
+ border-radius: 0.6em;
}
diff --git a/static/js/main.js b/static/js/main.js
index 5592100..70c38d6 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,12 +1,40 @@
"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");
while (tbody.children.length) {
@@ -21,10 +49,12 @@ function render_scoreboard(data) {
const name = clone.querySelector(".name"),
score = clone.querySelector(".score"),
bar = clone.querySelector(".bar");
-
+
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);
\ No newline at end of file
+// setInterval(update_scoreboard, 1000);
\ No newline at end of file