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