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 21:25:40 +02:00
|
|
|
<p id="iteration">Iteration: {{ iteration }} messages 0.<p>
|
2020-06-01 16:24:57 +02:00
|
|
|
<ul id="objects">
|
2020-05-31 04:48:02 +02:00
|
|
|
{% for object in objects %}
|
2020-06-01 21:25:40 +02:00
|
|
|
<li id="object-{{ object.id }}">{{ object.name }} @ {{ object.x }}, {{ object.y }}</li>
|
2020-05-31 04:48:02 +02:00
|
|
|
{% 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
|
|
|
}
|
2020-06-01 21:25:40 +02:00
|
|
|
let messages = 0;
|
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);
|
2020-06-01 21:25:40 +02:00
|
|
|
messages += 1;
|
2020-06-01 16:24:57 +02:00
|
|
|
|
2020-06-01 21:25:40 +02:00
|
|
|
document.getElementById("iteration").innerText = `Iteration: ${data.iteration} messages ${messages}.`;
|
2020-06-01 16:24:57 +02:00
|
|
|
for (n in data.objects) {
|
|
|
|
|
const ob = data.objects[n];
|
2020-06-01 21:25:40 +02:00
|
|
|
const li = document.getElementById(`object-${ob.id}`);
|
2020-06-01 16:24:57 +02:00
|
|
|
li.innerText = `${ob.name} @ ${ob.x}, ${ob.y}`;
|
|
|
|
|
}
|
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>
|
