2020-05-31 04:48:02 +02:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Blab</title>
|
|
|
|
|
</head>
|
2020-06-01 16:00:40 +02:00
|
|
|
|
2020-05-31 04:48:02 +02:00
|
|
|
<body>
|
|
|
|
|
<h1>Hello, world!</h1>
|
2020-06-01 16:24:57 +02:00
|
|
|
<p id="iteration">Iteration: {{ iteration }}<p>
|
|
|
|
|
<ul id="objects">
|
2020-05-31 04:48:02 +02:00
|
|
|
{% for object in objects %}
|
|
|
|
|
<li>{{ object.name }} @ {{ object.x }}, {{ object.y }}</li>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</ul>
|
2020-06-01 16:00:40 +02:00
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
ws = new WebSocket("ws://localhost:3030/state");
|
|
|
|
|
|
|
|
|
|
ws.onopen = function() {
|
|
|
|
|
console.log("Connected");
|
2020-06-01 18:58:26 +02:00
|
|
|
ws.send("MOAR");
|
2020-06-01 16:00:40 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ws.onmessage = function(e) {
|
2020-06-01 16:24:57 +02:00
|
|
|
const data = JSON.parse(e.data);
|
|
|
|
|
|
|
|
|
|
document.getElementById("iteration").innerText = `Iteration: ${data.iteration}`;
|
|
|
|
|
const ul = document.getElementById("objects");
|
|
|
|
|
while(ul.firstChild) { ul.removeChild(ul.lastChild) }
|
|
|
|
|
for (n in data.objects) {
|
|
|
|
|
const ob = data.objects[n];
|
|
|
|
|
const li = document.createElement("li");
|
|
|
|
|
li.innerText = `${ob.name} @ ${ob.x}, ${ob.y}`;
|
|
|
|
|
ul.append(li);
|
|
|
|
|
}
|
2020-06-01 18:58:26 +02:00
|
|
|
ws.send("MOAR");
|
2020-06-01 16:00:40 +02:00
|
|
|
};
|
|
|
|
|
</script>
|
2020-05-31 04:48:02 +02:00
|
|
|
</body>
|
|
|
|
|
</html>
|
