noa/flurry
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add website components

Browse source
This commit is contained in:
Noa Aarts 2024-12-12 15:09:16 +01:00
parent 365701eebd
commit c050d8bfb0
Signed by: noa
GPG key ID: 1850932741EFF672
3 changed files with 98 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

31
assets/index.html
View file

@ -5,11 +5,38 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flurry</title> <title>Flurry</title>
<link href="css/style.css" rel="stylesheet"> <link href="/style.css" rel="stylesheet">
<script src="/stats.js"></script>
</head> </head>
<body> <body>
<img src="/imgstream?canvas=0" alt="The main pixelflut canvas"> <div>
<img class="grid" src="/imgstream?canvas=0" draggable="false" alt="Pixelflut canvas">
<table>
<thead>
<tr>
<th>Stat</th>
<th>Total</th>
<th>Last Second</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pixels changed in main</td>
<td id="pixelCounter">Loading...</td>
<td id="pixelCounterAvg">Loading...</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Clients Connected right now</td>
<td id="clientCounter">Loading...</td>
</tr>
</tbody>
</table>
</div>
</body> </body>
</html> </html>

39
assets/stats.js Normal file
View file

@ -0,0 +1,39 @@
const formatter = Intl.NumberFormat("en", { notation: "compact" });
function nString(value) {
return formatter.format(value);
}
window.onload = function() {
var client = document.getElementById("clientCounter");
var pixel = document.getElementById("pixelCounter");
var pixelAvg = document.getElementById("pixelCounterAvg");
var pixelQueue = [];
for (i = 0; i < 5; i++) {
pixelQueue.push(0);
}
const stats = new WebSocket("/stats");
stats.onopen = function() {
console.log("Connected to flut-stats.");
};
stats.onerror = function(error) {
console.error("An unknown error occured", error);
};
stats.onclose = function(event) {
console.log("Server closed connection", event);
};
stats.onmessage = function(event) {
const obj = JSON.parse(event.data);
client.innerText = nString(obj.c);
pixel.innerText = nString(obj.p);
pixelQueue.push(obj.p);
var old = pixelQueue.shift();
pixelAvg.innerText = nString(obj.p - old);
};
};

30
assets/style.css Normal file
View file

@ -0,0 +1,30 @@
:root {
--background-primary: rgba(2, 0, 36, 1);
--background-secondary: rgba(0, 0, 0, 1);
}
body {
background: var(--background-primary);
background: radial-gradient(circle, var(--background-primary) 0%, var(--background-secondary) 100%);
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
}
body>div {
max-width: fit-content;
margin-inline: auto;
background: #DDDDDD;
margin-top: 3rem;
padding: 0.75rem;
border-radius: 1.5rem;
}
img.grid {
border-radius: 0.75rem;
max-width: 80vw;
min-width: 60vw;
height: auto;
image-rendering: pixelated;
user-select: none;
}