From 5d365bc744e3f23bc892ad861c1f81f9a645b481 Mon Sep 17 00:00:00 2001
From: Chaoscaot <max@maxsp.de>
Date: Sat, 28 Mar 2026 15:56:56 +0100
Subject: [PATCH] Refactor components and pages for improved readability and
 consistency

- Updated BackgroundImage.astro to format props for better readability.
- Adjusted FightTable.svelte to remove unnecessary trailing commas.
- Modified GroupTable.svelte to fix sorting syntax.
- Cleaned up LanguageWarning.astro by standardizing import statements.
- Enhanced Login.svelte for better formatting and readability.
- Simplified Navbar.svelte by merging multi-line attributes into single lines.
- Streamlined PostComponent.astro by condensing Image component props.
- Improved SearchComponent.svelte for consistent spacing and formatting.
- Refined TagComponent.astro for better readability and structure.
- Updated PageLayout.astro to simplify div structure.
- Enhanced downloads.astro for improved readability and consistency.
- Cleaned up index.astro in help directory for better formatting.
- Refactored index.astro in main pages for improved readability.
- Standardized login.astro for better formatting.
- Cleaned up not-found.astro for consistent import formatting.
- Enhanced [...schem].astro for better readability.
- Refactored [mode].astro for consistent import formatting.
- Improved [...gamemode].astro for better readability.
- Cleaned up [mode].astro in regeln directory for consistent formatting.
- Refactored index.astro in regeln directory for improved readability.
- Enhanced fight.astro for consistent import formatting.
---
 src/components/BackgroundImage.astro    | 12 +++-
 src/components/FightTable.svelte        |  2 +-
 src/components/GroupTable.svelte        |  2 +-
 src/components/LanguageWarning.astro    |  2 +-
 src/components/Login.svelte             |  9 ++-
 src/components/Navbar.svelte            | 11 ++--
 src/components/PostComponent.astro      |  7 +-
 src/components/SearchComponent.svelte   | 28 ++++----
 src/components/TagComponent.astro       | 31 +++++----
 src/layouts/PageLayout.astro            |  5 +-
 src/pages/downloads.astro               | 57 ++++++++++-------
 src/pages/help/index.astro              | 22 ++++---
 src/pages/index.astro                   | 38 ++++-------
 src/pages/login.astro                   |  3 +-
 src/pages/not-found.astro               |  4 +-
 src/pages/publics/[...schem].astro      |  8 +--
 src/pages/publics/[mode].astro          | 42 ++++++------
 src/pages/rangliste/[...gamemode].astro | 18 +++---
 src/pages/regeln/[mode].astro           | 85 +++++++++++++------------
 src/pages/regeln/index.astro            | 71 ++++++++++++---------
 src/pages/statistiken/fight.astro       |  6 +-
 21 files changed, 247 insertions(+), 216 deletions(-)

diff --git a/src/components/BackgroundImage.astro b/src/components/BackgroundImage.astro
index 458f78f..67f12f0 100644
--- a/src/components/BackgroundImage.astro
+++ b/src/components/BackgroundImage.astro
@@ -3,7 +3,13 @@ import { Image } from "astro:assets";
 import localBau from "@images/90.png";
 ---
 
-<Image src={localBau} alt="Bau" widths={[240, 540, 720, 1080, 1920, localBau.width]}
+<Image
+    src={localBau}
+    alt="Bau"
+    widths={[240, 540, 720, 1080, 1920, localBau.width]}
     sizes={`(max-width: 240px) 240px, (max-width: 540px) 540px, (max-width: 720px) 720px, (max-width: 1080px) 1080px, (max-width: 1920px) 1920px, ${localBau.width}px`}
-    class="w-full h-full object-cover" quality={100}
-    draggable="false" loading="eager"/>
+    class="w-full h-full object-cover"
+    quality={100}
+    draggable="false"
+    loading="eager"
+/>
diff --git a/src/components/FightTable.svelte b/src/components/FightTable.svelte
index a706088..7637710 100644
--- a/src/components/FightTable.svelte
+++ b/src/components/FightTable.svelte
@@ -57,7 +57,7 @@
             </tr>
         </thead>
         <tbody>
-            {#each window( event.fights.filter((f) => (group === undefined ? true : f.group?.id === group)), rows ) as fights}
+            {#each window( event.fights.filter((f) => (group === undefined ? true : f.group?.id === group)), rows, ) as fights}
                 <tr>
                     {#each fights as fight (fight.id)}
                         <td
diff --git a/src/components/GroupTable.svelte b/src/components/GroupTable.svelte
index f9d0a0c..8ed8cba 100644
--- a/src/components/GroupTable.svelte
+++ b/src/components/GroupTable.svelte
@@ -40,7 +40,7 @@
                 team: event.teams.find((t) => t.id === Number(teamId))!!,
                 points: points,
             }))
-            .sort((a, b) => b.points - a.points)
+            .sort((a, b) => b.points - a.points),
     );
 </script>
 
diff --git a/src/components/LanguageWarning.astro b/src/components/LanguageWarning.astro
index e6936f1..7ee560e 100644
--- a/src/components/LanguageWarning.astro
+++ b/src/components/LanguageWarning.astro
@@ -1,5 +1,5 @@
 ---
-import {t} from "astro-i18n";
+import { t } from "astro-i18n";
 ---
 
 <div class="border-l-2 border-amber-500 bg-amber-500/5 p-4" role="alert">
diff --git a/src/components/Login.svelte b/src/components/Login.svelte
index 4658980..f26ce72 100644
--- a/src/components/Login.svelte
+++ b/src/components/Login.svelte
@@ -90,7 +90,10 @@
         <p class="mt-2 text-red-500">{error}</p>
     {/if}
     <button class="btn mt-4 justify-center w-full" type="submit" onclick={preventDefault(login)}>{t("login.submit")}</button>
-    <a class="btn mt-4 justify-center w-full" href="https://discord.com/oauth2/authorize?client_id=869606970099904562&response_type=token&redirect_uri=https%3A%2F%2Fsteamwar.de%2Flogin&scope=identify">
+    <a
+        class="btn mt-4 justify-center w-full"
+        href="https://discord.com/oauth2/authorize?client_id=869606970099904562&response_type=token&redirect_uri=https%3A%2F%2Fsteamwar.de%2Flogin&scope=identify"
+    >
         {t("login.discord")}
     </a>
 </form>
@@ -137,7 +140,9 @@
         text-decoration: none;
         font-size: 0.85rem;
         border-bottom: 1px solid transparent;
-        transition: color 0.2s, border-color 0.2s;
+        transition:
+            color 0.2s,
+            border-color 0.2s;
     }
 
     .sw-link:hover {
diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
index 11edce6..ae5381e 100644
--- a/src/components/Navbar.svelte
+++ b/src/components/Navbar.svelte
@@ -58,11 +58,7 @@
 
 <svelte:window onscroll={handleScroll} />
 
-<nav
-    data-pagefind-ignore
-    class="sw-nav z-20 fixed top-0 left-0 right-0 sm:px-4 py-1 transition-colors flex justify-center"
-    bind:this={navbar}
->
+<nav data-pagefind-ignore class="sw-nav z-20 fixed top-0 left-0 right-0 sm:px-4 py-1 transition-colors flex justify-center" bind:this={navbar}>
     <div class="flex flex-row items-center justify-evenly md:justify-between match">
         <a class="flex items-center" href={l("/")}>
             {@render logo?.()}
@@ -148,7 +144,10 @@
     :global(.sw-nav) {
         backdrop-filter: none;
         background: transparent;
-        transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
+        transition:
+            background 0.3s ease,
+            backdrop-filter 0.3s ease,
+            border-color 0.3s ease;
         border-bottom: 1px solid transparent;
     }
 
diff --git a/src/components/PostComponent.astro b/src/components/PostComponent.astro
index cb338d4..1ecbde7 100644
--- a/src/components/PostComponent.astro
+++ b/src/components/PostComponent.astro
@@ -28,12 +28,7 @@ const postUrl = l(`/announcements/${post.slug.split("/").slice(1).join("/")}`);
             post.data.image != null ? (
                 <a href={postUrl}>
                     <div class="flex-shrink-0 pr-2">
-                        <Image
-                            transition:name={post.data.title + "-image"}
-                            src={post.data.image}
-                            alt="Post Image"
-                            class="object-cover h-32 w-32 max-w-none transition-transform hover:scale-105"
-                        />
+                        <Image transition:name={post.data.title + "-image"} src={post.data.image} alt="Post Image" class="object-cover h-32 w-32 max-w-none transition-transform hover:scale-105" />
                     </div>
                 </a>
             ) : null
diff --git a/src/components/SearchComponent.svelte b/src/components/SearchComponent.svelte
index 5963bb4..2e2a3ce 100644
--- a/src/components/SearchComponent.svelte
+++ b/src/components/SearchComponent.svelte
@@ -18,12 +18,11 @@
   -->
 
 <script lang="ts">
-
-    import {slide, fade} from "svelte/transition";
-    import {onMount} from "svelte";
-    import {importPagefind, type Pagefind, type PagefindDocument} from "@type/pagefind.js";
+    import { slide, fade } from "svelte/transition";
+    import { onMount } from "svelte";
+    import { importPagefind, type Pagefind, type PagefindDocument } from "@type/pagefind.js";
     import Card from "@components/Card.svelte";
-    import {l} from "@utils/util.ts";
+    import { l } from "@utils/util.ts";
     let pagefind: Pagefind;
 
     onMount(async () => {
@@ -36,23 +35,22 @@
 
     async function search(e: KeyboardEvent) {
         if (e.target instanceof HTMLInputElement) {
-            let search: {results: any[]} = await pagefind.debouncedSearch(e.target.value);
+            let search: { results: any[] } = await pagefind.debouncedSearch(e.target.value);
 
-            results = await Promise.all(search.results.slice(0, 10).map(value => value.data()))
+            results = await Promise.all(search.results.slice(0, 10).map((value) => value.data()));
         }
     }
 
-  interface Props {
-    open?: boolean;
-  }
+    interface Props {
+        open?: boolean;
+    }
 
-  let { open = $bindable(false) }: Props = $props();
+    let { open = $bindable(false) }: Props = $props();
 </script>
 
-<button transition:fade class="fixed top-0 left-0 w-screen h-screen bg-black/60 backdrop-blur-sm z-20 cursor-default" onclick={() => open = false}>
-</button>
+<button transition:fade class="fixed top-0 left-0 w-screen h-screen bg-black/60 backdrop-blur-sm z-20 cursor-default" onclick={() => (open = false)}> </button>
 <div transition:slide style="width: min(100%, 75em);" class="fixed top-0 left-1/2 -translate-x-1/2 h-2/3 z-30 p-4 text-white flex flex-col sw-search-panel">
-    <input placeholder="Search..." onkeypress={search}>
+    <input placeholder="Search..." onkeypress={search} />
 
     <div class="overflow-y-scroll flex-1 w-full mt-2">
         {#each results as result}
@@ -93,4 +91,4 @@
     label {
         color: rgba(163, 163, 163, 0.7);
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/TagComponent.astro b/src/components/TagComponent.astro
index 7267035..07bfc5c 100644
--- a/src/components/TagComponent.astro
+++ b/src/components/TagComponent.astro
@@ -1,22 +1,31 @@
 ---
-
-import {l} from "../util/util";
-import {capitalize} from "./admin/util";
+import { l } from "../util/util";
+import { capitalize } from "./admin/util";
 
 interface Props {
     tag: string;
     noLink?: boolean;
 }
 
-const {tag, noLink} = Astro.props;
+const { tag, noLink } = Astro.props;
 ---
 
-{noLink
-    ? (
-        <span class="inline-block bg-transparent border border-amber-500/30 px-3 py-0.5 text-xs font-semibold text-amber-400 mr-2 uppercase tracking-wider" style="font-family: 'Barlow Condensed', sans-serif;">{capitalize(tag)}</span>
-    )
-    : (
+{
+    noLink ? (
+        <span
+            class="inline-block bg-transparent border border-amber-500/30 px-3 py-0.5 text-xs font-semibold text-amber-400 mr-2 uppercase tracking-wider"
+            style="font-family: 'Barlow Condensed', sans-serif;"
+        >
+            {capitalize(tag)}
+        </span>
+    ) : (
         <a href={l(`/announcements/tags/${tag}`)}>
-            <span class="inline-block bg-transparent border border-amber-500/30 px-3 py-0.5 text-xs font-semibold text-amber-400 mr-2 uppercase tracking-wider hover:border-amber-400 hover:text-amber-300 transition-colors" style="font-family: 'Barlow Condensed', sans-serif;">{capitalize(tag)}</span>
+            <span
+                class="inline-block bg-transparent border border-amber-500/30 px-3 py-0.5 text-xs font-semibold text-amber-400 mr-2 uppercase tracking-wider hover:border-amber-400 hover:text-amber-300 transition-colors"
+                style="font-family: 'Barlow Condensed', sans-serif;"
+            >
+                {capitalize(tag)}
+            </span>
         </a>
-    )}
+    )
+}
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
index 43b27a3..f137527 100644
--- a/src/layouts/PageLayout.astro
+++ b/src/layouts/PageLayout.astro
@@ -10,10 +10,7 @@ const { title, description, wide = false } = Astro.props;
     <div class="h-screen w-screen fixed -z-10">
         <BackgroundImage />
     </div>
-    <div
-        class="sw-page-content"
-        style={wide ? "width: clamp(80%, 75em, 100%);" : "width: min(100%, 75em);"}
-    >
+    <div class="sw-page-content" style={wide ? "width: clamp(80%, 75em, 100%);" : "width: min(100%, 75em);"}>
         <slot />
     </div>
 </NavbarLayout>
diff --git a/src/pages/downloads.astro b/src/pages/downloads.astro
index 1014cb5..08ec1b6 100644
--- a/src/pages/downloads.astro
+++ b/src/pages/downloads.astro
@@ -1,31 +1,44 @@
 ---
 import PageLayout from "../layouts/PageLayout.astro";
-import {getCollection} from "astro:content";
-import {t} from "astro-i18n";
-import {l} from "../util/util";
+import { getCollection } from "astro:content";
+import { t } from "astro-i18n";
+import { l } from "../util/util";
 
 const downloads = await getCollection("downloads");
 ---
 
 <PageLayout title="Downloads">
-    {downloads.map(e => (
-        <div class="pt-6 pb-4" style="border-bottom: 1px solid rgba(255,255,255,0.04);">
-            <h1 class="font-bold text-2xl" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.06em;">{e.data.name}</h1>
-            <div class="py-3 text-gray-400 text-sm">{t(e.data.description)}</div>
+    {
+        downloads.map((e) => (
+            <div class="pt-6 pb-4" style="border-bottom: 1px solid rgba(255,255,255,0.04);">
+                <h1 class="font-bold text-2xl" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.06em;">
+                    {e.data.name}
+                </h1>
+                <div class="py-3 text-gray-400 text-sm">{t(e.data.description)}</div>
 
-            <div class="flex flex-col gap-1">
-                {typeof e.data.url === "object" ?
-                    Object.entries(e.data.url).map(value => (
-                        <a href={value[1].startsWith("/") ? l(value[1]) : value[1]}
-                            class="text-amber-400 hover:text-amber-300 w-fit text-sm" style="border-bottom: 1px solid transparent; transition: border-color 0.2s;">{t(value[0])}</a>
-                    ))
-                    :
-                    <a href={e.data.url} class="text-amber-400 hover:text-amber-300 w-fit text-sm">{t("Download")}</a>
-                }
-                {e.data.sourceUrl ?
-                    <a class="text-amber-400 hover:text-amber-300 w-fit text-sm" href={e.data.sourceUrl}>Quelle</a>
-                    : null}
+                <div class="flex flex-col gap-1">
+                    {typeof e.data.url === "object" ? (
+                        Object.entries(e.data.url).map((value) => (
+                            <a
+                                href={value[1].startsWith("/") ? l(value[1]) : value[1]}
+                                class="text-amber-400 hover:text-amber-300 w-fit text-sm"
+                                style="border-bottom: 1px solid transparent; transition: border-color 0.2s;"
+                            >
+                                {t(value[0])}
+                            </a>
+                        ))
+                    ) : (
+                        <a href={e.data.url} class="text-amber-400 hover:text-amber-300 w-fit text-sm">
+                            {t("Download")}
+                        </a>
+                    )}
+                    {e.data.sourceUrl ? (
+                        <a class="text-amber-400 hover:text-amber-300 w-fit text-sm" href={e.data.sourceUrl}>
+                            Quelle
+                        </a>
+                    ) : null}
+                </div>
             </div>
-        </div>
-    ))}
-</PageLayout>
\ No newline at end of file
+        ))
+    }
+</PageLayout>
diff --git a/src/pages/help/index.astro b/src/pages/help/index.astro
index fb8bb73..68e0a1d 100644
--- a/src/pages/help/index.astro
+++ b/src/pages/help/index.astro
@@ -1,21 +1,23 @@
 ---
-import {getCollection} from "astro:content";
-import {astroI18n} from "astro-i18n";
+import { getCollection } from "astro:content";
+import { astroI18n } from "astro-i18n";
 
-import {l} from "../../util/util";
+import { l } from "../../util/util";
 import PageLayout from "../../layouts/PageLayout.astro";
-let posts = await getCollection("help", entry => entry.id.split("/")[0] === astroI18n.locale);
+let posts = await getCollection("help", (entry) => entry.id.split("/")[0] === astroI18n.locale);
 ---
 
 <PageLayout title="Helpcenter">
     <div>
         <h1 style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.06em;">Helpcenter</h1>
         <h1 class="text-amber-500 text-2xl" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.8rem;">WIP</h1>
-        {posts.map(value => (
-            <a href={l("/help/" + value.slug)} class="block py-2 text-gray-400 hover:text-amber-400 transition-colors">
-                <h2>{value.data.title}</h2>
-            </a>
-        ))}
+        {
+            posts.map((value) => (
+                <a href={l("/help/" + value.slug)} class="block py-2 text-gray-400 hover:text-amber-400 transition-colors">
+                    <h2>{value.data.title}</h2>
+                </a>
+            ))
+        }
     </div>
 </PageLayout>
 
@@ -24,4 +26,4 @@ let posts = await getCollection("help", entry => entry.id.split("/")[0] === astr
         margin: 0 auto;
         padding: 3.5rem 1rem 2rem;
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 61440b1..d7a3647 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -39,7 +39,6 @@ const prefixColors: { [key: string]: string } = {
 ---
 
 <NavbarLayout title={t("home.page")} description="SteamWar.de Homepage" transparentFooter={false}>
-
     <!-- ═══════════ HERO ═══════════ -->
     <section class="hero">
         <div class="hero-bg">
@@ -204,13 +203,7 @@ const prefixColors: { [key: string]: string } = {
         position: absolute;
         inset: 0;
         z-index: 2;
-        background: linear-gradient(
-            to bottom,
-            rgba(0, 0, 0, 0.6) 0%,
-            rgba(0, 0, 0, 0.2) 35%,
-            rgba(0, 0, 0, 0.45) 65%,
-            #080808 100%
-        );
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0.45) 65%, #080808 100%);
     }
 
     .hero-scanlines {
@@ -218,13 +211,7 @@ const prefixColors: { [key: string]: string } = {
         inset: 0;
         z-index: 3;
         pointer-events: none;
-        background: repeating-linear-gradient(
-            0deg,
-            transparent 0px,
-            transparent 3px,
-            rgba(0, 0, 0, 0.06) 3px,
-            rgba(0, 0, 0, 0.06) 4px
-        );
+        background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0, 0, 0, 0.06) 3px, rgba(0, 0, 0, 0.06) 4px);
     }
 
     .hero-content {
@@ -248,7 +235,9 @@ const prefixColors: { [key: string]: string } = {
     }
 
     @media (min-width: 640px) {
-        .hero-label { font-size: 0.8rem; }
+        .hero-label {
+            font-size: 0.8rem;
+        }
     }
 
     .hero-title {
@@ -314,7 +303,9 @@ const prefixColors: { [key: string]: string } = {
     }
 
     @media (min-width: 640px) {
-        text-carousel > * { font-size: 1.15rem; }
+        text-carousel > * {
+            font-size: 1.15rem;
+        }
     }
 
     /* CTA */
@@ -331,14 +322,7 @@ const prefixColors: { [key: string]: string } = {
         text-transform: uppercase;
         background: rgba(245, 158, 11, 0.04);
         backdrop-filter: blur(12px);
-        clip-path: polygon(
-            0 0,
-            calc(100% - 14px) 0,
-            100% 14px,
-            100% 100%,
-            14px 100%,
-            0 calc(100% - 14px)
-        );
+        clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
         transition: all 0.35s ease;
         animation: fadeUp 0.6s 1s ease-out both;
     }
@@ -424,7 +408,9 @@ const prefixColors: { [key: string]: string } = {
             border-bottom: none;
             border-right: 1px solid rgba(255, 255, 255, 0.04);
         }
-        .feat:last-child { border-right: none; }
+        .feat:last-child {
+            border-right: none;
+        }
     }
 
     .feat:hover {
diff --git a/src/pages/login.astro b/src/pages/login.astro
index d975f48..40967bc 100644
--- a/src/pages/login.astro
+++ b/src/pages/login.astro
@@ -23,8 +23,7 @@ import BackgroundImage from "../components/BackgroundImage.astro";
     <div class="h-screen w-screen fixed -z-10">
         <BackgroundImage />
     </div>
-    <div class="h-screen mx-auto p-8 pt-40 sm:pt-28 md:pt-14 flex flex-col justify-center items-center"
-            style="width: min(100vw, 75em);">
+    <div class="h-screen mx-auto p-8 pt-40 sm:pt-28 md:pt-14 flex flex-col justify-center items-center" style="width: min(100vw, 75em);">
         <LoginComponent client:load />
     </div>
 </NavbarLayout>
diff --git a/src/pages/not-found.astro b/src/pages/not-found.astro
index 5d9b7b0..7355850 100644
--- a/src/pages/not-found.astro
+++ b/src/pages/not-found.astro
@@ -1,6 +1,6 @@
 ---
 import PageLayout from "../layouts/PageLayout.astro";
-import {t} from "astro-i18n";
+import { t } from "astro-i18n";
 ---
 
 <PageLayout title={t("404.title")}>
@@ -9,4 +9,4 @@ import {t} from "astro-i18n";
         <div style="width: 4rem; height: 2px; background: linear-gradient(90deg, transparent, #f59e0b, transparent); margin: 1.5rem 0;"></div>
         <p style="font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(163, 163, 163, 0.7);">{t("404.description")}</p>
     </div>
-</PageLayout>
\ No newline at end of file
+</PageLayout>
diff --git a/src/pages/publics/[...schem].astro b/src/pages/publics/[...schem].astro
index efc9296..03f6980 100644
--- a/src/pages/publics/[...schem].astro
+++ b/src/pages/publics/[...schem].astro
@@ -1,5 +1,5 @@
 ---
-import {createGetStaticPaths} from "astro-i18n";
+import { createGetStaticPaths } from "astro-i18n";
 import { getCollection, CollectionEntry } from "astro:content";
 import PageLayout from "../../layouts/PageLayout.astro";
 import PublicPreview from "@components/publics/PublicPreview.svelte";
@@ -18,17 +18,17 @@ export const getStaticPaths = createGetStaticPaths(async () => {
     }));
 });
 
-const { schem }: { schem: CollectionEntry<"publics">} = Astro.props;
+const { schem }: { schem: CollectionEntry<"publics"> } = Astro.props;
 ---
 
 <PageLayout title={schem.data.name}>
     <h1 class="text-5xl font-bold w-fit" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;" transition:name={schem.data.id + "-title"}>{schem.data.name}</h1>
     <PublicPreview client:idle pub={schem} imageHeight={schem.data.image.height}>
-        <Image class="object-contain" transition:name={schem.data.id + "-img"} src={schem.data.alt || schem.data.image} alt={schem.data.name}></Image>
+        <Image class="object-contain" transition:name={schem.data.id + "-img"} src={schem.data.alt || schem.data.image} alt={schem.data.name} />
     </PublicPreview>
     <!--
     <p transition:name={schem.data.id + "-desc"}>{schem.data.description}</p>
     <p>
         Erbauer: {schem.data.creator.join(", ")}
     </p>-->
-</PageLayout>
\ No newline at end of file
+</PageLayout>
diff --git a/src/pages/publics/[mode].astro b/src/pages/publics/[mode].astro
index 3a018bc..a76562e 100644
--- a/src/pages/publics/[mode].astro
+++ b/src/pages/publics/[mode].astro
@@ -1,18 +1,18 @@
 ---
-import {createGetStaticPaths} from "astro-i18n";
+import { createGetStaticPaths } from "astro-i18n";
 import PageLayout from "../../layouts/PageLayout.astro";
-import {getCollection} from "astro:content";
-import {l} from "../../util/util";
+import { getCollection } from "astro:content";
+import { l } from "../../util/util";
 import { Image } from "astro:assets";
 import Card from "@components/Card.svelte";
 import XRayPreview from "@components/publics/XRayPreview.svelte";
-import {t} from "astro-i18n";
+import { t } from "astro-i18n";
 
 const { mode } = Astro.props;
 
 export const getStaticPaths = createGetStaticPaths(async () => {
     const gamemodes = await getCollection("modes");
-    
+
     return gamemodes.map((entry) => ({
         props: {
             mode: entry,
@@ -23,24 +23,28 @@ export const getStaticPaths = createGetStaticPaths(async () => {
     }));
 });
 
-const publics = await getCollection("publics", entry => entry.data.gamemode.id == mode.id);
+const publics = await getCollection("publics", (entry) => entry.data.gamemode.id == mode.id);
 ---
 
 <PageLayout title="Publics">
     <h1 class="text-4xl font-bold" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;">{t(`${mode.data.translationKey}.title`)}</h1>
     <div class="grid grid-cols-2 gap-2 mt-4">
-        {publics.map((pub) => (
-            <a href={l("/publics/" + pub.id)}>
-                <Card extraClasses="w-full m-0 border-t-2 border-t-amber-500/30" hoverEffect={false}>
-                    <div class="flex justify-center">
-                        <XRayPreview client:load>
-                            <Image style="width: 500px" slot="normal" src={pub.data.image} alt={pub.data.name} transition:name={pub.data.id + "-img"} />
-                            {pub.data.xray && <Image slot="xray" src={pub.data.xray} alt={pub.data.name} />}
-                        </XRayPreview>
-                    </div>
-                    <h2 class="font-bold text-3xl" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;" transition:name={pub.data.id + "-title"}>{pub.data.name}</h2>
-                </Card>
-            </a>
-        ))}
+        {
+            publics.map((pub) => (
+                <a href={l("/publics/" + pub.id)}>
+                    <Card extraClasses="w-full m-0 border-t-2 border-t-amber-500/30" hoverEffect={false}>
+                        <div class="flex justify-center">
+                            <XRayPreview client:load>
+                                <Image style="width: 500px" slot="normal" src={pub.data.image} alt={pub.data.name} transition:name={pub.data.id + "-img"} />
+                                {pub.data.xray && <Image slot="xray" src={pub.data.xray} alt={pub.data.name} />}
+                            </XRayPreview>
+                        </div>
+                        <h2 class="font-bold text-3xl" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;" transition:name={pub.data.id + "-title"}>
+                            {pub.data.name}
+                        </h2>
+                    </Card>
+                </a>
+            ))
+        }
     </div>
 </PageLayout>
diff --git a/src/pages/rangliste/[...gamemode].astro b/src/pages/rangliste/[...gamemode].astro
index 668b564..4c9d63a 100644
--- a/src/pages/rangliste/[...gamemode].astro
+++ b/src/pages/rangliste/[...gamemode].astro
@@ -1,13 +1,13 @@
 ---
-import {createGetStaticPaths, t} from "astro-i18n";
-import {getCollection, type CollectionEntry} from "astro:content";
+import { createGetStaticPaths, t } from "astro-i18n";
+import { getCollection, type CollectionEntry } from "astro:content";
 import PageLayout from "../../layouts/PageLayout.astro";
 import EloTable from "../../components/EloTable.svelte";
 
 export const getStaticPaths = createGetStaticPaths(async () => {
-    const modes = await getCollection("modes", entry => entry.data.ranked);
+    const modes = await getCollection("modes", (entry) => entry.data.ranked);
 
-    return modes.map(value => ({
+    return modes.map((value) => ({
         props: {
             mode: value,
         },
@@ -21,10 +21,10 @@ interface Props {
     mode: CollectionEntry<"modes">;
 }
 
-const {mode} = Astro.props;
+const { mode } = Astro.props;
 ---
 
-<PageLayout title={t("ranking.heading", {mode: t(`${mode.data.translationKey}.title`)})}>
-    <h1 class="text-2xl mb-2" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.06em;">{t("ranking.heading", {mode: t(`${mode.data.translationKey}.title`)})}</h1>
-    <EloTable gamemode={mode.id} client:load/>
-</PageLayout>
\ No newline at end of file
+<PageLayout title={t("ranking.heading", { mode: t(`${mode.data.translationKey}.title`) })}>
+    <h1 class="text-2xl mb-2" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.06em;">{t("ranking.heading", { mode: t(`${mode.data.translationKey}.title`) })}</h1>
+    <EloTable gamemode={mode.id} client:load />
+</PageLayout>
diff --git a/src/pages/regeln/[mode].astro b/src/pages/regeln/[mode].astro
index c2850b8..de9fb84 100644
--- a/src/pages/regeln/[mode].astro
+++ b/src/pages/regeln/[mode].astro
@@ -1,19 +1,19 @@
 ---
-import {getCollection, type CollectionEntry} from "astro:content";
-import {astroI18n, createGetStaticPaths, t} from "astro-i18n";
+import { getCollection, type CollectionEntry } from "astro:content";
+import { astroI18n, createGetStaticPaths, t } from "astro-i18n";
 import PageLayout from "@layouts/PageLayout.astro";
 import LanguageWarning from "@components/LanguageWarning.astro";
 import EloTable from "@components/EloTable.svelte";
-import {l} from "../../util/util";
+import { l } from "../../util/util";
 import { Image } from "astro:assets";
 
 export const getStaticPaths = createGetStaticPaths(async () => {
-    let posts = await getCollection("rules", value => value.id.split("/")[0] === astroI18n.locale);
+    let posts = await getCollection("rules", (value) => value.id.split("/")[0] === astroI18n.locale);
 
-    const germanPosts = await getCollection("rules", entry => entry.id.split("/")[0] === astroI18n.fallbackLocale);
+    const germanPosts = await getCollection("rules", (entry) => entry.id.split("/")[0] === astroI18n.fallbackLocale);
 
-    germanPosts.forEach(value => {
-        if (posts.find(post => post.id.split("/")[1] === value.id.split("/")[1])) {
+    germanPosts.forEach((value) => {
+        if (posts.find((post) => post.id.split("/")[1] === value.id.split("/")[1])) {
             return;
         } else {
             posts.push(value);
@@ -27,53 +27,58 @@ export const getStaticPaths = createGetStaticPaths(async () => {
         props: {
             page,
             german: page.id.split("/")[0] != astroI18n.locale,
-            mode: modes.find(value => value.id === page.id.split("/")[1].split(".")[0]),
-            publics: publics.filter(value => value.data.gamemode.id === page.id.split("/")[1].split(".")[0]),
+            mode: modes.find((value) => value.id === page.id.split("/")[1].split(".")[0]),
+            publics: publics.filter((value) => value.data.gamemode.id === page.id.split("/")[1].split(".")[0]),
         },
         params: {
             mode: page.slug.split("/")[1],
         },
-    }),
-    );
+    }));
 });
 
 interface Props {
-    page: CollectionEntry<"rules">,
-    mode: CollectionEntry<"modes">,
-    publics: CollectionEntry<"publics">[],
-    german: boolean
+    page: CollectionEntry<"rules">;
+    mode: CollectionEntry<"modes">;
+    publics: CollectionEntry<"publics">[];
+    german: boolean;
 }
 
-const {page, german, mode, publics} = Astro.props;
+const { page, german, mode, publics } = Astro.props;
 
-const {Content} = await page.render();
+const { Content } = await page.render();
 ---
 
-<PageLayout title={t("rules.title", {mode: t(`${page.data.translationKey}.title`)})}>
+<PageLayout title={t("rules.title", { mode: t(`${page.data.translationKey}.title`) })}>
     <h1 class="text-3xl font-bold" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;">{t(`${page.data.translationKey}.title`)}</h1>
-    {mode && mode.data.ranked && (
-        <Fragment>
-            <EloTable gamemode={page.id.split("/")[1].split(".")[0]} client:load topFive={true}/>
-            <a class="text-amber-400 hover:text-amber-300 transition-colors text-sm" href={l(`/rangliste/${page.id.split("/")[1].split(".")[0]}`)}>{t("rules.ranking")}</a>
-        </Fragment>
-    )}
-    {publics && publics.length != 0 && (
-        <Fragment>
-            <div class="flex overflow-x-scroll gap-2 py-4">
-                {publics.map(value => (
-                    <a href={l(`/publics/${value.id}`)} style="display: contents">
-                        <Image src={value.data.image} alt={value.data.name} height={300} width={300}></Image>
-                    </a>
-                ))}
-            </div>
-            <a class="text-amber-400 hover:text-amber-300 transition-colors text-sm" href={l(`/publics/${page.id.split("/")[1].split(".")[0]}`)}>{t("rules.publics")}</a>
-        </Fragment>
-    )}
+    {
+        mode && mode.data.ranked && (
+            <Fragment>
+                <EloTable gamemode={page.id.split("/")[1].split(".")[0]} client:load topFive={true} />
+                <a class="text-amber-400 hover:text-amber-300 transition-colors text-sm" href={l(`/rangliste/${page.id.split("/")[1].split(".")[0]}`)}>
+                    {t("rules.ranking")}
+                </a>
+            </Fragment>
+        )
+    }
+    {
+        publics && publics.length != 0 && (
+            <Fragment>
+                <div class="flex overflow-x-scroll gap-2 py-4">
+                    {publics.map((value) => (
+                        <a href={l(`/publics/${value.id}`)} style="display: contents">
+                            <Image src={value.data.image} alt={value.data.name} height={300} width={300} />
+                        </a>
+                    ))}
+                </div>
+                <a class="text-amber-400 hover:text-amber-300 transition-colors text-sm" href={l(`/publics/${page.id.split("/")[1].split(".")[0]}`)}>
+                    {t("rules.publics")}
+                </a>
+            </Fragment>
+        )
+    }
     <article>
-        {german && (
-            <LanguageWarning/>
-        )}
-        <Content/>
+        {german && <LanguageWarning />}
+        <Content />
     </article>
 </PageLayout>
 
diff --git a/src/pages/regeln/index.astro b/src/pages/regeln/index.astro
index 6a562b5..bf10b44 100644
--- a/src/pages/regeln/index.astro
+++ b/src/pages/regeln/index.astro
@@ -1,48 +1,61 @@
 ---
-import {t} from "astro-i18n";
-import {getCollection, type CollectionEntry} from "astro:content";
+import { t } from "astro-i18n";
+import { getCollection, type CollectionEntry } from "astro:content";
 import PageLayout from "@layouts/PageLayout.astro";
-import {Image} from "astro:assets";
-import {l} from "@utils/util";
+import { Image } from "astro:assets";
+import { l } from "@utils/util";
 
 const imageMap = {
-    "wg": await getRandomFromMode("wargear"),
-    "mwg": await getRandomFromMode("miniwargear"),
-    "as": await getRandomFromMode("airship"),
-    "ws": await getRandomFromMode("warship"),
-    "qg": await getRandomFromMode("quickgear"),
+    wg: await getRandomFromMode("wargear"),
+    mwg: await getRandomFromMode("miniwargear"),
+    as: await getRandomFromMode("airship"),
+    ws: await getRandomFromMode("warship"),
+    qg: await getRandomFromMode("quickgear"),
 };
 
 async function getRandomFromMode(mode: "wargear" | "airship" | "megawargear" | "microwargear" | "miniwargear" | "quickgear" | "streetfight" | "warship"): Promise<CollectionEntry<"publics">> {
-    const publics = await getCollection("publics", entry => entry.data.gamemode.id === mode);
+    const publics = await getCollection("publics", (entry) => entry.data.gamemode.id === mode);
 
     return publics[Math.floor(Math.random() * publics.length)];
 }
 
-const modes = await getCollection("modes", entry => entry.data.main);
+const modes = await getCollection("modes", (entry) => entry.data.main);
 ---
 
 <PageLayout title={t("rules.page")}>
-    {modes.map(value => (
-        <div class="sw-mode-card">
-            <a href={l(`/publics/${imageMap[value.data.translationKey].id}`)}>
-                <Image height="200" width="200" src={imageMap[value.data.translationKey].data.image}
-                    alt={t("rules." + value.data.translationKey + ".title")} class="h-full aspect-square max-w-fit"></Image>
-            </a>
-            <div class="ml-4">
-                <a href={l(`/rules/${value.id}`)}>
-                    <h1 class="text-2xl font-bold" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;">{t(value.data.translationKey + ".title")}</h1>
-                    <div class="text-gray-400 text-sm mt-1">{t("rules." + value.data.translationKey + ".description")}</div>
+    {
+        modes.map((value) => (
+            <div class="sw-mode-card">
+                <a href={l(`/publics/${imageMap[value.data.translationKey].id}`)}>
+                    <Image
+                        height="200"
+                        width="200"
+                        src={imageMap[value.data.translationKey].data.image}
+                        alt={t("rules." + value.data.translationKey + ".title")}
+                        class="h-full aspect-square max-w-fit"
+                    />
                 </a>
-                <div class="mt-2 flex flex-col gap-0.5">
-                    <a href={l(`/publics/${value.id}`)} class="text-amber-400 hover:text-amber-300 w-fit text-sm transition-colors">{t("rules.publics")}</a>
-                    {value.data.ranked
-                        ? <a href={l(`/ranked/${value.id}`)}
-                            class="text-amber-400 hover:text-amber-300 w-fit text-sm transition-colors">{t("rules.ranking")}</a>
-                        : null}
+                <div class="ml-4">
+                    <a href={l(`/rules/${value.id}`)}>
+                        <h1 class="text-2xl font-bold" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;">
+                            {t(value.data.translationKey + ".title")}
+                        </h1>
+                        <div class="text-gray-400 text-sm mt-1">{t("rules." + value.data.translationKey + ".description")}</div>
+                    </a>
+                    <div class="mt-2 flex flex-col gap-0.5">
+                        <a href={l(`/publics/${value.id}`)} class="text-amber-400 hover:text-amber-300 w-fit text-sm transition-colors">
+                            {t("rules.publics")}
+                        </a>
+                        {value.data.ranked ? (
+                            <a href={l(`/ranked/${value.id}`)} class="text-amber-400 hover:text-amber-300 w-fit text-sm transition-colors">
+                                {t("rules.ranking")}
+                            </a>
+                        ) : null}
+                    </div>
                 </div>
             </div>
-        </div>))}
+        ))
+    }
     <a href={l("/rangliste/MissileWars")} class="text-amber-400 hover:text-amber-300 transition-colors">MissileWars Rangliste</a>
 </PageLayout>
 
@@ -67,4 +80,4 @@ const modes = await getCollection("modes", entry => entry.data.main);
             flex-direction: row;
         }
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/pages/statistiken/fight.astro b/src/pages/statistiken/fight.astro
index 473bfc4..159fdae 100644
--- a/src/pages/statistiken/fight.astro
+++ b/src/pages/statistiken/fight.astro
@@ -1,10 +1,10 @@
 ---
 import PageLayout from "../../layouts/PageLayout.astro";
 import FightStatistics from "../../components/FightStatistics.svelte";
-import {t} from "astro-i18n";
+import { t } from "astro-i18n";
 ---
 
 <PageLayout title={t("stats.title")}>
     <h1 style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.06em;">{t("stats.title")}</h1>
-    <FightStatistics client:only="svelte"/>
-</PageLayout>
\ No newline at end of file
+    <FightStatistics client:only="svelte" />
+</PageLayout>