Update user.html

This commit is contained in:
Dominic Zimmer 2020-07-17 23:30:35 +02:00
parent fe01c162d8
commit 260aa3fad0
5 changed files with 130 additions and 9 deletions

View File

@ -95,10 +95,14 @@ async def handler(request: aiohttp.web.Request):
return aiohttp.web.json_response(model.model) return aiohttp.web.json_response(model.model)
@routes.get('/dealer/{usertoken}')
async def handler(request):
del request # unused
return aiohttp.web.FileResponse('user.html')
@routes.get('/') @routes.get('/')
async def handler(request): async def handler(request):
del request # unused del request # unused
return aiohttp.web.FileResponse('index.html') return aiohttp.web.FileResponse('index.html')

View File

@ -6,9 +6,9 @@ import datetime
import hashlib import hashlib
def generate_random_id(_s=set()): def generate_random_id(_s=set()):
new_id = base64.b32encode(bytearray(random.randint(0, 0xFF) for _ in range(10)))[:16].decode().lower() new_id = base64.b32encode(bytearray(random.randint(0, 0xFF) for _ in range(32)))[:32].decode().lower()
while (new_id in _s): while (new_id in _s):
new_id = base64.b32encode(bytearray(random.randint(0, 0xFF) for _ in range(10)))[:16].decode().lower() new_id = base64.b32encode(bytearray(random.randint(0, 0xFF) for _ in range(32)))[:32].decode().lower()
_s.add(new_id) _s.add(new_id)
return new_id return new_id

View File

@ -1,35 +1,35 @@
{ {
"users": { "users": {
"zgzbbdf5ulagy5md": { "zgzbbdf5ulagy5md": {
"uuid": "zgzbbdf5ulagy5md", "uuid": "u4zhlm4y2w4alg4adpj3amw67ivhtfbx",
"name": "Andi", "name": "Andi",
"score": 78, "score": 78,
"maxscore": 100, "maxscore": 100,
"timeout": 0 "timeout": 0
}, },
"zjik7wdl7yrm6bb3": { "zjik7wdl7yrm6bb3": {
"uuid": "zjik7wdl7yrm6bb3", "uuid": "bd63gy2wfdk72q3mk6ooesanx4mo33ao",
"name": "Felix", "name": "Felix",
"score": 52, "score": 52,
"maxscore": 75, "maxscore": 75,
"timeout": 0 "timeout": 0
}, },
"zp7v3lnpapnndclk": { "zp7v3lnpapnndclk": {
"uuid": "zp7v3lnpapnndclk", "uuid": "5wn24yko36muqoxohczbf53i6p3hx2pa",
"name": "Daki", "name": "Daki",
"score": 62, "score": 62,
"maxscore": 100, "maxscore": 100,
"timeout": 0 "timeout": 0
}, },
"2vsxkkw3d547jhqk": { "2vsxkkw3d547jhqk": {
"uuid": "2vsxkkw3d547jhqk", "uuid": "iz2z4c5wkxldc2vdjh66zubxcsvb5qjs",
"name": "Cindy", "name": "Cindy",
"score": 91, "score": 91,
"maxscore": 100, "maxscore": 100,
"timeout": 0 "timeout": 0
}, },
"66w5o44yc7wf7y27": { "66w5o44yc7wf7y27": {
"uuid": "66w5o44yc7wf7y27", "uuid": "pfkkuzo4y2tmopgc5o6n6zvhy7dyvqdy",
"name": "Dominik", "name": "Dominik",
"score": 46, "score": 46,
"maxscore": 50, "maxscore": 50,

52
static/js/user.js Normal file
View File

@ -0,0 +1,52 @@
"use strict"
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;
name.innerText = user.name;
score.innerText = user.score;
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);

65
user.html Normal file
View File

@ -0,0 +1,65 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Waschmarken.io</title>
<meta name="description" content="Waschmarken Scoreboard">
<link rel="stylesheet" href="../../static/css/normalize.css">
<link rel="stylesheet" href="../../static/css/sakura-dark.css">
<style>
.heading {
text-align: center;
}
#thetable {
margin-bottom : 2rem;
}
.biceps {
display: flex;
justify-content: space-around;
}
</style>
</head>
<body>
<h1 class="heading">Waschmarken Scoreboard</h1>
<h2><span id="greeting">Henlo</span></h2>
<table id="thetable">
<tbody>
<tr>
<td>Current Washing Coins:</td>
<td id="currentcoins">42</td>
</tr>
<tr>
<td>Maximally Available:</td>
<td>69</td>
</tr>
</tbody>
</table>
<div class="biceps">
<div>
<button>Click me</button>
</div>
<div>
<input type="number" value = "42" >
<button>Click me</button>
</div>
<div>
<button>Click me</button>
</div>
</div>
<script src="../../static/js/user.js"></script>
</body>
</html>