3 files changed, 78 insertions, 1 deletions
diff --git a/src/app/css/launcher.css b/src/app/css/launcher.css
index 03812c6..ce54ddf 100644
--- a/src/app/css/launcher.css
+++ b/src/app/css/launcher.css
@@ -297,3 +297,32 @@ code {
 	margin-top: calc(var(--spacing) / 2);
 	margin-bottom: calc(var(--spacing) / 2);
 }
+
+#serverstatus {
+	--spacing: calc(var(--padding) / 5);
+	
+	transition-duration: 0.2s;
+	transition-timing-function: ease-in-out;
+	transition-property: background, opacity;
+
+	opacity: 0.0;
+	display: block;
+	margin: 0 auto;
+	font-weight: 700;
+	width: fit-content;
+	color: transparent;
+	border-radius: 50px;
+	flex-basis: max-content;
+	background: transparent;
+	margin-top: calc(var(--spacing) * 2);
+	padding: var(--spacing) calc(var(--spacing) * 3);
+}
+
+#serverstatus.up,
+#serverstatus.down {
+	color: white;
+	opacity: 1.0;
+}
+
+#serverstatus.up {background: rgb(var(--blue));}
+#serverstatus.down {background: rgb(var(--red));}
diff --git a/src/app/index.html b/src/app/index.html
index f67a7a8..2305e4c 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -197,6 +197,7 @@
 							<div class="inline">
 								<div id="nsversion"></div>
 								<a id="update" href="#" onclick="update()">(%%gui.update.check%%)</a>
+								<div id="serverstatus" class="checking"></div>
 							</div>
 						</div>
 					</div>
@@ -240,4 +241,4 @@
 		<script src="settings.js"></script>
 		<script src="launcher.js"></script>
 	</body>
-</html>
+<
diff --git a/src/app/launcher.js b/src/app/launcher.js
index e0b56db..fbeb703 100644
--- a/src/app/launcher.js
+++ b/src/app/launcher.js
@@ -1,5 +1,9 @@
 const markdown = require("marked").parse;
 
+var servercount;
+var playercount;
+var masterserver;
+
 // Changes the main page
 // This is the tabs in the sidebar
 function page(page) {
@@ -110,3 +114,46 @@ function showNsSection(section) {
 			break;
 	}
 }
+
+async function loadServers() {
+	serverstatus.classList.add("checking");
+
+	try {
+		let servers = await (await fetch("https://northstar.tf/client/servers")).json();
+		masterserver = true;
+
+		playercount = 0;
+		servercount = servers.length;
+
+		for (let i = 0; i < servers.length; i++) {
+			playercount += servers[i].playerCount
+		}
+	}catch (err) {
+		playercount = 0;
+		servercount = 0;
+		masterserver = false;
+	}
+
+	serverstatus.classList.remove("checking");
+
+	if (servercount == 0 || ! servercount || ! playercount) {masterserver = false}
+
+	let playerstr = lang("gui.server.players");
+	if (playercount == 1) {
+		playerstr = lang("gui.server.player");
+	}
+
+	if (masterserver) {
+		serverstatus.classList.add("up");
+		serverstatus.innerHTML = `${servercount} ${lang("gui.server.servers")} - ${playercount} ${playerstr}`;
+	} else {
+		serverstatus.classList.add("down");
+		serverstatus.innerHTML = lang("gui.server.offline");
+
+	}
+}; loadServers()
+
+// Refreshes every 5 minutes
+setInterval(() => {
+	loadServers();
+}, 300000)