diff --git a/assets/index.html b/assets/index.html index 02ebee2..62fadf6 100644 --- a/assets/index.html +++ b/assets/index.html @@ -5,11 +5,38 @@ Flurry - + + - The main pixelflut canvas +
+ Pixelflut canvas + + + + + + + + + + + + + + + +
StatTotalLast Second
Pixels changed in mainLoading...Loading...
+ + + + + + + +
Clients Connected right nowLoading...
+
diff --git a/assets/stats.js b/assets/stats.js new file mode 100644 index 0000000..dc63d78 --- /dev/null +++ b/assets/stats.js @@ -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); + }; +}; diff --git a/assets/style.css b/assets/style.css new file mode 100644 index 0000000..c76baad --- /dev/null +++ b/assets/style.css @@ -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; +}