waschmarken/static/js/main.js
2020-08-13 13:11:08 +02:00

90 lines
2.3 KiB
JavaScript

"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,
max_score = users[0].score;
const tbody = document.querySelector("#scoreboard tbody");
while (tbody.children.length) {
tbody.removeChild(tbody.firstChild);
}
const template = document.querySelector("#scoreboard template");
for (const user of users) {
const clone = template.content.cloneNode(true);
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];
score.innerText = user.score;
const onlineIcon = document.createElement("img");
onlineIcon.src = "static/coin.png";
onlineIcon.classList.add("online")
const nameSpan = document.createElement("span");
nameSpan.innerText = user.name;
name.appendChild(onlineIcon);
name.appendChild(nameSpan);
tbody.appendChild(clone);
}
}
async function update_scoreboard() {
const r = await fetch('api/get_public_model', {
method: 'POST',
body: JSON.stringify({}),
});
if (r.status !== 200) {
console.log("oh no");
return;
}
const data = await r.json();
render_scoreboard(data);
}
update_scoreboard();
// setInterval(update_scoreboard, 1000);