changes

src/pages/regeln/[mode].astro

@@ -1,8 +1,11 @@
 ---
-import {getCollection, CollectionEntry} from "astro:content";
+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 { Image } from "astro:assets";
 
 export const getStaticPaths = createGetStaticPaths(async () => {
     let posts = await getCollection("rules", value => value.id.split("/")[0] === astroI18n.locale);
@@ -17,21 +20,55 @@ export const getStaticPaths = createGetStaticPaths(async () => {
         }
     });
 
+    const modes = await getCollection("modes");
+    const publics = await getCollection("publics");
+
     return posts.map((page) => ({
-        props: {page, german: page.id.split("/")[0] != astroI18n.locale}, params: {mode: page.slug.split("/")[1]},
-    }));
+        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]),
+        },
+        params: {
+            mode: page.slug.split("/")[1],
+        },
+    }),
+    );
 });
 
 interface Props {
     page: CollectionEntry<"rules">,
+    mode: CollectionEntry<"modes">,
+    publics: CollectionEntry<"publics">[],
     german: boolean
 }
 
-const {page, german} = Astro.props;
+const {page, german, mode, publics} = Astro.props;
+
 const {Content} = await page.render();
 ---
 
 <PageLayout title={t("rules.title", {mode: t(`${page.data.translationKey}.title`)})}>
+    <h1 class="text-3xl font-bold">{t(`${page.data.translationKey}.title`)}</h1>
+    {mode && mode.data.ranked && (
+        <Fragment>
+            <EloTable gamemode={page.id.split("/")[1].split(".")[0]} client:load/>
+            <a class="text-neutral-800 dark:text-neutral-400 hover:underline" href={l(`/rangliste/${page.id.split("/")[1].split(".")[0]}`)}>{t("rules.ranking")}</a>
+        </Fragment>
+    )}
+    {publics && (
+        <Fragment>
+            <div class="flex overflow-x-scroll">
+                {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} class="drop-shadow"></Image>
+                    </a>
+                ))}
+            </div>
+            <a class="text-neutral-800 dark:text-neutral-400 hover:underline" href={l(`/publics/${page.id.split("/")[1].split(".")[0]}`)}>{t("rules.publics")}</a>
+        </Fragment>
+    )}
     <article>
         {german && (
             <LanguageWarning/>

src/pages/regeln/index.astro

@@ -1,14 +1,9 @@
 ---
-import wg from "../../images/WarGears.png";
-import mwg from "../../images/MiniWarGears.png";
-import as from "../../images/AirShips.png";
-import ws from "../../images/WarShips.png";
 import {t} from "astro-i18n";
-import {getCollection} from "astro:content";
-import PageLayout from "../../layouts/PageLayout.astro";
+import {getCollection, type CollectionEntry} from "astro:content";
+import PageLayout from "@layouts/PageLayout.astro";
 import {Image} from "astro:assets";
-import {l} from "../../util/util";
-import {ImageMetadata} from "astro";
+import {l} from "@utils/util";
 
 const imageMap = {
     "wg": await getRandomFromMode("wargear"),
@@ -18,10 +13,10 @@ const imageMap = {
     "qg": await getRandomFromMode("quickgear"),
 };
 
-async function getRandomFromMode(mode: "wargear" | "airship" | "megawargear" | "microwargear" | "miniwargear" | "quickgear" | "streetfight" | "warship"): Promise<ImageMetadata> {
+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);
 
-    return publics[Math.floor(Math.random() * publics.length)].data.image;
+    return publics[Math.floor(Math.random() * publics.length)];
 }
 
 const modes = await getCollection("modes", entry => entry.data.main);
@@ -31,16 +26,16 @@ const modes = await getCollection("modes", entry => entry.data.main);
     {modes.map(value => (
         <div class="dark:bg-neutral-800 rounded-md p-4 border border-neutral-400 shadow-md my-4 flex flex-col
                  md:flex-row">
-            <Image height="300" width="300" src={imageMap[value.data.translationKey]}
-                alt={t("rules." + value.data.translationKey + ".title")}></Image>
+            <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">
                 <h1 class="text-2xl font-bold">{t(value.data.translationKey + ".title")}</h1>
                 <div>{t("rules." + value.data.translationKey + ".description")}</div>
                 <div class="mt-2 flex flex-col">
                     <a href={l(`/rules/${value.id}`)} class="text-yellow-300 hover:underline w-fit">{t("rules.rules")}</a>
                     <a href={l(`/publics/${value.id}`)} class="text-yellow-300 hover:underline w-fit">{t("rules.publics")}</a>
-                    <a href={l(`/announcements/tags/${value.id}`)}
-                        class="text-yellow-300 hover:underline w-fit">{t("rules.announcements")}</a>
                     {value.data.ranked
                         ? <a href={l(`/ranked/${value.id}`)}
                             class="text-yellow-300 hover:underline w-fit">{t("rules.ranking")}</a>