better documenting server status

Author: sojs-coder

src/lib/state.ts

@@ -16,6 +16,7 @@ export const SessionState = {
     dynamoDBClient: null as DynamoDBClient | null,
     s3Client: null as S3Client | null,
     devMode: (browser && window.location.hostname === "localhost"),
+    serverResponses: [] as { server: Server; success: boolean; time: number }[],
     plays: 0,
     user: null as null | { name: string; email: string; tokens: any } | undefined,
     loggedIn: false
@@ -61,7 +62,7 @@ export const State = createState({
     homeView: "grid",
     pinnedGames: [],
     games: [],
-    isAHost: () => (AHosts.some((h): boolean => browser && h.hostname === window.location.hostname)) || SessionState.devMode,
+    isAHost: () => (AHosts.some((h): boolean => browser && h.hostname === window.location.hostname)),
     localPlays: 0
 });
 
@@ -98,16 +99,26 @@ export async function initializeTooling() {
 export async function findServer(): Promise<Server | null> {
     const servers = await findServers();
     State.servers = servers;
+    SessionState.serverResponses = [];
     for (let server of State.servers.sort((a, b) => a.priority - b.priority)) {
+        const start = performance.now();
         const response = await fetch(`https://${server.hostname}/blocked_res.txt`);
+        let end = start;
+        if (response) end = performance.now();
+
         if (response.ok && response.status === 200) {
             const text = await response.text();
             if (text.includes("===NOT_BLOCKED===") && text.includes("SOmehtin23\"")) {
-                return server;
+                SessionState.serverResponses.push({ server, success: true, time: end - start });
+            } else {
+                SessionState.serverResponses.push({ server, success: false, time: end - start });
             }
+        } else {
+            SessionState.serverResponses.push({ server, success: false, time: end - start });
         }
     }
-    return null;
+    // Already sorted by priority, so first success is best
+    return SessionState.serverResponses.find(r => r.success)?.server || null;
 }
 
 export function loadState(state: StateType): StateType {

src/routes/+page.svelte

@@ -7,6 +7,7 @@
     import type { PageData } from "./$types.js";
     import { getTimeBetween } from "$lib/helpers.js";
     import { browser } from "$app/environment";
+    import { page } from "$app/state";
 
     const { data }: { data: PageData } = $props();
 
@@ -15,6 +16,7 @@
     let devMode = $state(true);
     let adblockEnabled = $state(SessionState.adBlockEnabled);
     let adsEnabled = $state(SessionState.adsEnabled);
+    let sResponses = $state(SessionState.serverResponses)
     onMount(async () => {
         await initializeTooling();
         isAHost = State.isAHost();
@@ -76,22 +78,65 @@
         Ads Enabled: {adsEnabled}<br />
         Current Server: {State.currentServer.name} (Loaded {State.servers
             .length})<br />
+        <table style="width:100%; margin: 10px 0; border-collapse: collapse; font-size: 12px;">
+            <thead>
+            <tr>
+                <th style="border-bottom: 1px solid #ccc; text-align: left;">Server</th>
+                <th style="border-bottom: 1px solid #ccc; text-align: left;">Status</th>
+                <th style="border-bottom: 1px solid #ccc; text-align: left;">Ping (ms)</th>
+            </tr>
+            </thead>    
+            <tbody>
+            {#each sResponses as r}
+                <tr>
+                <td>{r.server.name}</td>
+                <td>{r.success ? "Success" : "Failed"}</td>
+                <td>{r.time.toFixed(2)}</td>
+                </tr>
+            {/each}
+            </tbody>
+        </table>
         AHost: {State.isAHost()} (Loaded {State.aHosts.length})<br />
-        AHosts: {State.aHosts.map(h => h.hostname).join(", ")}
+        <table style="width:100%; margin: 10px 0; border-collapse: collapse; font-size: 12px;">
+            <thead>
+            <tr>
+                <th style="border-bottom: 1px solid #ccc; text-align: left;">AHost Hostname</th>
+                <th style="border-bottom: 1px solid #ccc; text-align: left;">ACode</th>
+            </tr>
+            </thead>
+            <tbody>
+            {#each State.aHosts as h}
+                <tr>
+                <td>{h.hostname}{(h.hostname && browser && h.hostname == page.url.hostname) ? " (Active)" : " (Inactive)"}</td>
+                <td>{h.acode}</td>
+                </tr>
+            {/each}
+            </tbody>
+        </table>
         <br />
         Games Loaded: {games.length} ({State.pinnedGames.length} pinned) - rendered
         {State.homeView}<br />
         Version: {State.version}<br />
         Logged In: {SessionState.loggedIn}<br />
         SSR: {SessionState.ssr}<br />
-        AWS Ready: {SessionState.awsReady}<br />
-        AWS Acting: {SessionState.credentials?.identityId} | {SessionState
-            .credentials?.accessKeyId}<br />
-        Credentials Expires: {SessionState.credentials?.expiration?.toLocaleTimeString()}
-        {getTimeBetween(
-            SessionState.credentials?.expiration || new Date(),
-            new Date(),
-        )} <br />
+        <table style="width:100%; margin: 10px 0; border-collapse: collapse; font-size: 12px;">
+            <thead>
+            <tr>
+                <th style="border-bottom: 1px solid #ccc; text-align: left;">AWS Ready</th>
+                <th style="border-bottom: 1px solid #ccc; text-align: left;">Identity ID</th>
+                <th style="border-bottom: 1px solid #ccc; text-align: left;">Access Key ID</th>
+                <th style="border-bottom: 1px solid #ccc; text-align: left;">Credentials Expires</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td>{SessionState.awsReady ? "Yes" : "No"}</td>
+                <td title={SessionState.credentials?.identityId || "-"}>{SessionState.credentials?.identityId.slice(0, 10) + "..." || "-"}</td>
+                <td title={SessionState.credentials?.accessKeyId || "-"}>{SessionState.credentials?.accessKeyId.slice(0, 6) + "..." || "-"}</td>
+                <td>{SessionState.credentials?.expiration?.toLocaleTimeString() || "-"}</td>
+            </tr>
+            </tbody>
+        </table>
         Plays: {SessionState.plays.toLocaleString()} ({State.localPlays.toLocaleString()}
         local)<br />
     </div>