From 072a72cedd6adcdc46d869f0b9de2d96ef1c3459 Mon Sep 17 00:00:00 2001 From: Thomas Forgione Date: Thu, 28 Mar 2019 11:36:32 +0100 Subject: [PATCH] Much better --- pytron_run/refresh.py | 3 ++ server.js | 46 +++++++++++++++++++++++----- static/main.js | 60 ++++++++++++++++++++++++++++++++++++ views/base.pug | 1 + views/battles.pug | 22 ++++++++++++++ views/index.pug | 71 +++++++++++-------------------------------- views/leaderboard.pug | 30 ++++++++++++++++++ 7 files changed, 172 insertions(+), 61 deletions(-) create mode 100644 static/main.js create mode 100644 views/battles.pug create mode 100644 views/leaderboard.pug diff --git a/pytron_run/refresh.py b/pytron_run/refresh.py index 621d6c1..33cbc01 100755 --- a/pytron_run/refresh.py +++ b/pytron_run/refresh.py @@ -13,6 +13,9 @@ from tron.player import Direction, ConstantPlayer import ai_manager from utils import run_battle +import time +time.sleep(5) + ASSETS_PATH = "assets/data.json" LAST_REFRESH_PATH = "assets/refresh.dat" diff --git a/server.js b/server.js index 091a0eb..23402d2 100644 --- a/server.js +++ b/server.js @@ -56,9 +56,7 @@ function runPython() { } }); } - // parsed.ais.push({ - // }); function parse(data) { let content = JSON.parse(data); let parsed = {ais: [], battles: {}}; @@ -118,6 +116,18 @@ function parse(data) { return parsed; } +function readData(req, res, callback) { + fs.readFile('pytron_run/assets/data.json', 'utf-8', (err, data) => { + if (err != null) { + console.log(err); + res.render('error', {message: 'It seems like the site is broken :\'('}); + return; + } + let parsed = parse(data); + callback(parsed); + }); +} + function saveArchiveAndRun(req, res) { let path = pathtools.join(aisPath, req.body.name); @@ -152,11 +162,7 @@ function startServer() { app.use(fileUpload()); app.get('/', (req, res) => { - fs.readFile('pytron_run/assets/data.json', 'utf-8', (err, data) => { - if (err != null) { - console.log(err); - } - let parsed = parse(data); + readData(req, res, (parsed) => { res.render('index', { data: parsed, running: pythonRunning, @@ -164,6 +170,32 @@ function startServer() { }); }); + app.get('/is-running', (req, res) => { + if (pythonRunning) { + res.send('yes'); + } else { + res.send('no'); + } + }); + + app.get('/leaderboard', (req, res) => { + readData(req, res, (parsed) => { + res.render('leaderboard', { + data: parsed, + running: pythonRunning, + }); + }); + }); + + app.get('/battles', (req, res) => { + readData(req, res, (parsed) => { + res.render('battles', { + data: parsed, + running: pythonRunning, + }); + }); + }); + app.get('/upload', (req, res) => { res.render('upload', {}); }); diff --git a/static/main.js b/static/main.js new file mode 100644 index 0000000..6c2212f --- /dev/null +++ b/static/main.js @@ -0,0 +1,60 @@ +function request(url, callback) { + let xhr = new XMLHttpRequest(); + xhr.onreadystatechange = () => { + if (xhr.readyState === XMLHttpRequest.DONE) { + if (xhr.status === 200) { + callback(xhr.responseText); + } + } + }; + + xhr.open('GET', url, true); + xhr.send(null); +} + +function refreshElement(element, url) { + request(url, (response) => { element.innerHTML = response }); +} + +function isRunning(callback) { + request('is-running', (response) => { + callback(response === 'yes'); + }); +} + +function refresh() { + refreshElement(document.getElementById('leaderboard'), 'leaderboard'); + refreshElement(document.getElementById('battles'), 'battles'); +} + + +function watch() { + isRunning((running) => { + if (running) { + setTimeout(watch, 1000); + } else { + isCurrentlyRunning = false; + refresh(); + runningElement.style.display = "None"; + } + }); +} + +function updateDots() { + dotsElement.innerHTML += "."; + if (dotsElement.innerHTML === "....") { + dotsElement.innerHTML = "."; + } + if (isCurrentlyRunning) { + setTimeout(updateDots, 500); + } +} + +let runningElement = document.getElementById('running'); +let dotsElement = document.getElementById('dots'); +let isCurrentlyRunning = runningElement.style.display === ''; + +if (isCurrentlyRunning) { + watch(); + updateDots(); +} diff --git a/views/base.pug b/views/base.pug index 228fc3e..e7b0494 100644 --- a/views/base.pug +++ b/views/base.pug @@ -35,3 +35,4 @@ html(lang='en') }); } }); + block extrajs diff --git a/views/battles.pug b/views/battles.pug new file mode 100644 index 0000000..99a7710 --- /dev/null +++ b/views/battles.pug @@ -0,0 +1,22 @@ +table.table.is-bordered.is-striped.is-narrow.is-hoverable + tr + th + for ai in data.ais + th.has-text-centered= ai.name + for ai1 in data.ais + tr + th.has-text-centered= ai1.name + for ai2 in data.ais + if ai1.name == ai2.name + td + else if data.battles[ai1.name + "/" + ai2.name] > data.battles[ai2.name + "/" + ai1.name] + td.has-text-centered.has-text-success= data.battles[ai1.name + "/" + ai2.name] + else if data.battles[ai1.name + "/" + ai2.name] < data.battles[ai2.name + "/" + ai1.name] + td.has-text-centered.has-text-danger= data.battles[ai1.name + "/" + ai2.name] + else + td.has-text-centered= data.battles[ai1.name + "/" + ai2.name] + +.columns.is-centered + .column.is-narrow + caption + strong All battles diff --git a/views/index.pug b/views/index.pug index 399090b..e65783f 100644 --- a/views/index.pug +++ b/views/index.pug @@ -7,64 +7,27 @@ block content section.section .container if running - .columns.is-centered - .column.is-narrow.is-desktop - h5.title.is-5 Some battles are running... + #running + .columns.is-centered + .column.is-3.is-desktop + h5.title.is-5 Some battles are running + span#dots ... + else + #running(style="display:none") + .columns.is-centered + .column.is-3.is-desktop + h5.title.is-5 Some battles are running + span#dots ... .columns.is-centered .column.is-narrow.is-desktop - table.table.is-bordered.is-striped.is-hoverable - tr - th.has-text-centered AI - th.has-text-centered Victories - th.has-text-centered Nulls - th.has-text-centered Defeats - th.has-text-centered Score - for ai in data.sortedAis - tr - td.has-text-centered - if ai.rank === 1 - span.icon - i.fas.fa-trophy(style="color:#FFD700") - else if ai.rank === 2 - span.icon - i.fas.fa-trophy(style="color:#C0C0C0") - else if ai.rank === 3 - span.icon - i.fas.fa-trophy(style="color:#CD7F32") - strong= ai.name - td.has-text-centered= ai.victories - td.has-text-centered= ai.nulls - td.has-text-centered= ai.defeats - td.has-text-centered - strong= ai.score - .columns.is-centered - .column.is-narrow - caption - strong Leaderboard + #leaderboard + include leaderboard .columns.is-centered .column.is-narrow.is-desktop - table.table.is-bordered.is-striped.is-narrow.is-hoverable - tr - th - for ai in data.ais - th.has-text-centered= ai.name - for ai1 in data.ais - tr - th.has-text-centered= ai1.name - for ai2 in data.ais - if ai1.name == ai2.name - td - else if data.battles[ai1.name + "/" + ai2.name] > data.battles[ai2.name + "/" + ai1.name] - td.has-text-centered.has-text-success= data.battles[ai1.name + "/" + ai2.name] - else if data.battles[ai1.name + "/" + ai2.name] < data.battles[ai2.name + "/" + ai1.name] - td.has-text-centered.has-text-danger= data.battles[ai1.name + "/" + ai2.name] - else - td.has-text-centered= data.battles[ai1.name + "/" + ai2.name] - .columns.is-centered - .column.is-narrow - caption - strong All battles - + #battles + include battles +block extrajs + script(src="static/main.js") diff --git a/views/leaderboard.pug b/views/leaderboard.pug new file mode 100644 index 0000000..1ec577f --- /dev/null +++ b/views/leaderboard.pug @@ -0,0 +1,30 @@ +table.table.is-bordered.is-striped.is-hoverable + tr + th.has-text-centered AI + th.has-text-centered Victories + th.has-text-centered Nulls + th.has-text-centered Defeats + th.has-text-centered Score + for ai in data.sortedAis + tr + td.has-text-centered + if ai.rank === 1 + span.icon + i.fas.fa-trophy(style="color:#FFD700") + else if ai.rank === 2 + span.icon + i.fas.fa-trophy(style="color:#C0C0C0") + else if ai.rank === 3 + span.icon + i.fas.fa-trophy(style="color:#CD7F32") + strong= ai.name + td.has-text-centered= ai.victories + td.has-text-centered= ai.nulls + td.has-text-centered= ai.defeats + td.has-text-centered + strong= ai.score +.columns.is-centered + .column.is-narrow + caption + strong Leaderboard +