feat: Add error page

Author: TAEMBO

src/lib/utils/setTheme.ts

@@ -2,20 +2,16 @@ export function setTheme(theme: "light" | "dark") {
     const cards = document.getElementsByClassName("card");
     const listGroups = document.getElementsByClassName("list-group");
     const listGroupAnchors = document.getElementsByClassName("list-group-anchor");
+    const error = document.getElementsByClassName("error")[0];
+    const action = theme === "light" ? "remove" : "add";
 
-    if (theme === "light") {
-        document.body.classList.remove("dark-mode");
-        
-        for (const card of cards) card.classList.remove("dark-mode-card");
-        for (const listGroup of listGroups) listGroup.classList.remove("dark-mode-list-group");
-        for (const listGroupAnchor of listGroupAnchors) listGroupAnchor.classList.remove("dark-mode-list-group-anchor");
-    } else {
-        document.body.classList.add("dark-mode");
+    document.body.classList[action]("dark-mode");
 
-        for (const card of cards) card.classList.add("dark-mode-card");
-        for (const listGroup of listGroups) listGroup.classList.add("dark-mode-list-group");
-        for (const listGroupAnchor of listGroupAnchors) listGroupAnchor.classList.add("dark-mode-list-group-anchor");
-    }
+    for (const card of cards) card.classList[action]("dark-mode-card");
+    for (const listGroup of listGroups) listGroup.classList[action]("dark-mode-list-group");
+    for (const listGroupAnchor of listGroupAnchors) listGroupAnchor.classList[action]("dark-mode-list-group-anchor");
+
+    error?.classList[action]("dark-mode-error");
 
     localStorage.setItem("theme", theme);
 }

src/routes/+error.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { page } from "$app/state";
+    import Header from "../components/Header.svelte";
+    import Main from "../components/Main.svelte";
+</script>
+
+<svelte:head>
+    <title>{page.status.toString()} | IRT Livemap</title>
+</svelte:head>
+
+<Header name="Error" />
+<Main>
+    <div class="error">
+        <img class="d-inline-block align-center flipped" src="/favicon.png" height="256" alt="Main icon" />
+        <span class="list-group float-end">{page.error?.message || "Unknown error"}</span>
+    </div>
+</Main>

src/routes/servers/[serverAcro]/+page.server.ts

@@ -19,13 +19,13 @@ export async function load({ fetch, params: { serverAcro }, request: { headers }
 
     console.log(`[${(new Date()).toLocaleString("en-GB")}] ${address} - ${serverAcro}`);
 
-    if (!serverObj) return error(404, `Unknown server key "/servers/${serverAcro}"`);
+    if (!serverObj) return error(404, `Unknown server "${serverAcro}"`);
 
     const dss = await (async () => {
         const res = await fetch(
             serverObj.url + Feeds.dedicatedServerStats(serverObj.code, DSSExtension.JSON),
             {
-                signal: AbortSignal.timeout(5_000),
+                signal: AbortSignal.timeout(3_000),
                 headers: { "User-Agent": USER_AGENT_TEXT }
             }
         ).catch(err => console.log("DSS Fetch error:", err.message));
@@ -45,7 +45,7 @@ export async function load({ fetch, params: { serverAcro }, request: { headers }
         const res = await fetch(
             serverObj.url + Feeds.dedicatedServerSavegame(serverObj.code, DSSFile.CareerSavegame),
             {
-                signal: AbortSignal.timeout(5_000),
+                signal: AbortSignal.timeout(3_000),
                 headers: { "User-Agent": USER_AGENT_TEXT }
             }
         ).catch(err => console.log("CSG Fetch error:", err.message));

static/style.css

@@ -24,6 +24,10 @@ body {
     --bs-list-group-border-color: rgba(255, 255, 255, 0.13);
 }
 
+.dark-mode-error > span {
+    --bs-list-group-color: #fff;
+}
+
 .dark-mode-list-group-anchor {
     color: #06860a;
 }
@@ -108,6 +112,28 @@ main > .container {
     height: calc(95vh - 80px);
 }
 
+.error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.error > * {
+    margin-top: 50px;
+    margin-bottom: 50px;
+}
+
+.error > span {
+    font-size: x-large;
+    color: var(--bs-list-group-color);
+}
+
+.error > img {
+    filter: grayscale(100%);
+    transform: scaleY(-1);
+    aspect-ratio: 1 / 1;
+}
+
 button {
     border: none;
     background-color: transparent;