From 6dd8d36f5731321923cbd8f1e8feb253c8d7d626 Mon Sep 17 00:00:00 2001
From: Daniel Flanagan <daniel@lyte.dev>
Date: Mon, 6 Nov 2023 17:19:44 -0600
Subject: [PATCH] Update minecraft server status page

---
 content/minecraft-server-status.md | 131 ++++++++++++-----------------
 1 file changed, 52 insertions(+), 79 deletions(-)

diff --git a/content/minecraft-server-status.md b/content/minecraft-server-status.md
index 6db0c6a..e445891 100644
--- a/content/minecraft-server-status.md
+++ b/content/minecraft-server-status.md
@@ -5,95 +5,68 @@ aliases:
     /ourcraft-status
 ---
 
-<p id="server-status-loading">
-    Checking minecraft servers' status...
-</p>
-
-<div id="server-status-check-failed">
+<noscript>
     <p>
-        Failed to retrieve <code>h.lyte.dev</code> server status. Unfortunately, that usually means we're <code><span style="color: var(--syntax-mag);">OFFLINE</span></code>.
+        It looks like you have javascript disabled! This page uses javascript to query a third-party server which fetches data from our minecraft servers.
     </p>
-    <p>
-        Please yell at <code>@lytedev</code> in Discord to fix it!
-    </p>
-    <p><button id="server-status-check-button">Try Again</button></p>
-</div>
+</noscript>
 
-<div id="server-status-online" style="display: none;">
-    <p>Server <code>h.lyte.dev</code> is <code><span style="color: var(--syntax-name);">ONLINE</span></code></p>
-    <p id="server-status-player-info" style="display: none;">There are currently <span id="server-status-current-num-players">0</span>/<span id="server-status-max-players">20</span> players online.</p>
-    <h3 id="server-status-player-sampling-header" style="display: none;">Online Players</h3>
-    <ul id="server-status-player-sampling" style="display: none;">
-        <li>Player</li>
+<button id="check-minecraft-server-status">Reload</button>
+
+<div id="server-status">
+    <p id="server-status-loading">
+        Checking minecraft servers' status...
+    </p>
+    <ul id="servers">
     </ul>
-    <p id="server-status-player-sampling-insufficient" style="display: none">... and more!</p>
 </div>
 
-<p id="server-status-offline" style="display: none;">
-    Server is <code><span style="color: var(--syntax-mag);">OFFLINE</span></code>
-</p>
-
-<script src="https://mcapi.us/scripts/minecraft.min.js"></script>
 <script>
-function showServerStatus(key) {
-    for (const name of ['server-status-check-failed', 'server-status-online', 'server-status-offline', 'server-status-loading']) {
-        if (name == key) {
-            document.getElementById(name).style.display = null
-        } else {
-            document.getElementById(name).style.display = 'none'
-        }
-    }
-}
-function checkServerStatus() {
-    showServerStatus('server-status-loading')
-    MinecraftAPI.getServerStatus('h.lyte.dev', {port: 25565}, function (err, status) {
-        console.debug("Status Errors:", err || false)
-        if (err || !('online' in status)) {
-            showServerStatus('server-status-check-failed')
-        } else {
-            handleOnlineStatus(status)
-        }
-    });
-}
-function handleOnlineStatus(status) {
-    console.debug("Status Data:", status)
-    if (status.online === true) {
-        showServerStatus('server-status-online')
-        const info = document.getElementById('server-status-player-info')
-        const samplingHeader = document.getElementById('server-status-player-sampling-header')
-        const samplingList = document.getElementById('server-status-player-sampling')
-        const insufficient = document.getElementById('server-status-player-sampling-insufficient')
+function checkMinecraftServerStatus() {
+    const loading = document.getElementById("server-status-loading")
+    const servers = document.getElementById("servers")
 
-        info.style.display = 'none'
-        samplingHeader.style.display = 'none'
-        samplingList.style.display = 'none'
-        insufficient.style.display = 'none'
-
-        if ('players' in status) {
-            if ('max' in status.players && 'now' in status.players) {
-                info.style.display = null
-                document.getElementById('server-status-current-num-players').textContent = status.players.now
-                document.getElementById('server-status-max-players').textContent = status.players.max
-                if ('sample' in status.players && status.players.now > 0) {
-                    samplingHeader.style.display = null
-                    samplingList.style.display = null
-                    samplingList.textContent = ''
-                    for (const player of status.players.sample) {
-                        const newListItem = document.createElement('li')
-                        newListItem.textContent = player.name
-                        newListItem.title = player.id
-                        samplingList.appendChild(newListItem)
-                    }
-                    if (status.players.sample.length != status.players.now) {
-                        document.getElementById('server-status-player-sampling-insufficient').style.display = null
+    loading.style.display = "inherit";
+    servers.style.display = "none";
+    try {
+        fetch("https://api.lyte.dev/minecraft-server-status").then(res => {
+            res.json().then(statuses => {
+                console.log(statuses)
+                loading.style.display = "none";
+                servers.style.display = "inherit";
+                const newChildren = [];
+                for (let k of Object.keys(statuses)) {
+                    const status = statuses[k]
+                    const el = document.createElement("li")
+                    const s = document.createElement("strong")
+                    s.textContent = k
+                    const c = document.createElement("code")
+                    c.className = "chroma"
+                    const cs = document.createElement("span")
+                    c.appendChild(cs)
+                    cs.className = (status.online ? "na" : "err")
+                    cs.textContent = status.online ? "ONLINE" : "OFFLINE"
+                    const p = document.createElement("span")
+                    p.style.marginLeft = "0.5em";
+                    if (status.players) {
+                        p.textContent = `(${status.players.online}/${status.players.max} players)`
                     }
+                    el.replaceChildren(
+                        s,
+                        document.createTextNode(": "),
+                        c,
+                        p,
+                    )
+                    newChildren.push(el)
+                    
                 }
-            }
-        }
-    } else {
-        showServerStatus('server-status-offline')
+                servers.replaceChildren(...newChildren)
+            })
+        }).catch(err => console.error(err))
+    } catch (err) {
+        console.err(err)
     }
 }
-document.getElementById("server-status-check-button").addEventListener("click", checkServerStatus)
-checkServerStatus()
+document.getElementById("check-minecraft-server-status").addEventListener("click", checkMinecraftServerStatus)
+document.addEventListener("DOMContentLoaded", checkMinecraftServerStatus)
 </script>