Add Public Images

src/pages/publics/[...schem].astro

@@ -24,7 +24,7 @@ const { schem }: { schem: CollectionEntry<"publics">} = Astro.props;
 <PageLayout title={schem.data.name}>
     <h1 class="text-5xl font-bold w-fit" 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.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}></Image>
     </PublicPreview>
     <p transition:name={schem.data.id + "-desc"}>{schem.data.description}</p>
     <p>

src/pages/regeln/index.astro

@@ -8,15 +8,22 @@ import {getCollection} from "astro:content";
 import PageLayout from "../../layouts/PageLayout.astro";
 import {Image} from "astro:assets";
 import {l} from "../../util/util";
+import {ImageMetadata} from "astro";
 
 const imageMap = {
-    "wg": wg,
-    "mwg": mwg,
-    "as": as,
-    "ws": ws,
-    "qg": mwg,
+    "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<ImageMetadata> {
+    const publics = await getCollection("publics", entry => entry.data.gamemode.id === mode);
+
+    return publics[Math.floor(Math.random() * publics.length)].data.image;
+}
+
 const modes = await getCollection("modes", entry => entry.data.main);
 ---
 
@@ -25,7 +32,7 @@ const modes = await getCollection("modes", entry => entry.data.main);
         <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")} class="dark:invert"></Image>
+                alt={t("rules." + value.data.translationKey + ".title")}></Image>
             <div class="ml-4">
                 <h1 class="text-2xl font-bold">{t(value.data.translationKey + ".title")}</h1>
                 <div>{t("rules." + value.data.translationKey + ".description")}</div>