Lixfel anmerkungen #2

src/components/Navbar.svelte

@@ -85,9 +85,6 @@
                     <a href={l("/rules/microwargear")}
                        class="btn btn-gray">{t("navbar.links.rules.micro")}</a>
                     <a href={l("/rules/streetfight")} class="btn btn-gray">{t("navbar.links.rules.sf")}</a>
-                    <h2 class="px-2 text-gray-300">{t("navbar.links.rules.general")}</h2>
-                    <a class="btn btn-gray" href={l("/publics")}>{t("navbar.links.rules.publics")}</a>
-                    <a class="btn btn-gray" href={l("/ranked")}>{t("navbar.links.rules.ranked")}</a>
                 </div>
             </div>
             <!-- TODO: Add help center
@@ -107,9 +104,11 @@
             <a class="btn my-1" href={l("/login")}>
                 <span class="btn__text">{t("navbar.links.account")}</span>
             </a>
+            <!--
             <button class="btn my-1" on:click={() => searchOpen = true}>
                 <SearchOutline ariaLabel="Site Search" class="inline-block h-6"/>
             </button>
+            -->
         </div>
     </div>
 </nav>

src/components/PostComponent.astro

@@ -11,13 +11,16 @@ interface Props {
     post: CollectionEntry<"announcements">
 }
 
-const { post } = Astro.props as Props;
+const { post, slim }: {
+    post: CollectionEntry<"announcements">,
+    slim: boolean,
+} = Astro.props as Props;
 
 const postUrl = l(`/announcements/${post.slug.split("/").slice(1).join("/")}`);
 ---
 
-<Card extraClasses="w-full items-start mx-0" hoverEffect={false}>
+<Card extraClasses={`w-full items-start mx-0 ${slim ? "m-0 p-1" : ""}`} hoverEffect={false}>
-    <div class="p-4 flex flex-row">
+    <div class={`flex flex-row ${slim ? "":"p-4"}`}>
         {post.data.image != null
             ? (
                 <a href={postUrl}>

src/i18n/common/de.json

@@ -12,32 +12,36 @@
     },
     "join": "Jetzt Spielen",
     "benefits": {
-      "historic": {
+      "fights": {
-        "title": "Historische Spielmodi",
+        "title": "Spannende Kämpfe",
         "description": {
-          "1": "Kämpfe mit Deinen alten WarGears und WarShips!",
+          "1": "Messe dich mit anderen Spielern in der Arena und zeige, dass du der beste bist.",
-          "2": "von 1.7 WarGears bis 1.12 WarShips kannst du deine alte Technik wiederverwenden!"
+          "2": "Von der kleinen Kampfmaschine bis zum riesigen Schlachtschiff kann alles gebaut werden."
         }
       },
-      "server": {
+      "bau": {
         "title": "Eigene Bauserver",
-        "description": "Um beste Performance zu gewährleisten verfügt jeder Spieler einen eigenen Bauserver, welcher unabhängig von anderen Bauservern arbeitet."
+        "description": "Jeder Spieler bekommt einen eigenen Bauserver, auf dem ohne Einschränkungen und Lags mit FaWe und Axiom gebaut werden kann."
       },
-      "events": {
+      "minigames": {
-        "title": "Regelmäßige Events",
+        "title": "Kleine Pause gefällig?",
         "description": {
-          "1": "Teste dein Können mit deinem Team bei regelmäßig stattfindenden Events.",
+          "1": "Neben der Arena gibt es auch noch Minigames, die du mit anderen Spielern spielen kannst.",
-          "2": "Unser eigenes Eventsystem ist vielseitig verwendbar und ermöglicht einzigartige Kämpfe!"
+          "2": "Klassiker wie MissleWars, TowerRun oder TNTLeague warten auf dich."
         }
       },
+      "open": {
+        "title": "Free & Open",
+        "description": "Das Spielen auf SteamWar ist komplett Kostenlos und unsere Software ist Open Source."
+      },
       "read": "Mehr Lesen"
     },
     "prefix": {
-      "Admin": "Administrator",
+      "admin": "Administrator",
-      "Dev": "Developer",
+      "developer": "Developer",
-      "Mod": "Moderator",
+      "moderator": "Moderator",
-      "Sup": "Supporter",
+      "supporter": "Supporter",
-      "Arch": "Architekt"
+      "builder": "Architekt"
     }
   },
   "status": {
@@ -218,7 +222,8 @@
     "rules": "Regelwerk »",
     "announcements": "Ankündigungen »",
     "ranking": "Rangliste »",
-    "title": "{# mode #} - Regelwerk"
+    "title": "{# mode #} - Regelwerk",
+    "publics": "Publics »"
   },
   "stats": {
     "title": "Kampf Statistiken"

src/i18n/common/en.json

@@ -34,32 +34,35 @@
     },
     "join": "Join Now",
     "benefits": {
-      "historic": {
+      "fights": {
-        "title": "Historical Gamemodes",
+        "title": "Exciting Fights",
         "description": {
-          "1": "Play with your old WarGears and WarShips!",
+          "1": "Compete with other players in the arena and show that you are the best.",
-          "2": "You can play with your old tech from 1.7 WarGear to 1.12 WarShips"
+          "2": "From small combat machines to huge battleships, everything can be built."
         }
       },
       "server": {
         "title": "Own Build Server",
-        "description": "To garantuee the best performance, every player has his own build server, which runs independently from other servers."
+        "description": "Every player gets their own build server to ensure maximum performance and minimal limitations with leading tools like FaWe or Axiom"
       },
-      "events": {
+      "minigames": {
-        "title": "Regular Turnaments",
+        "title": "Need a Break?",
         "description": {
-          "1": "Test your skills in regular turnaments!",
+          "1": "Besides the Arena, you can also play minigames with other players.",
-          "2": "Our own event system is very flexible and allows us to create unique turnaments."
+          "2": "like MissleWars, Towerrun or TNTLeague"
         }
       },
+      "open": {
+        "description": "Playing on SteamWar is completely free and our software is open source."
+      },
       "read": "Read More"
     },
     "prefix": {
-      "Admin": "Admin",
+      "admin": "Admin",
-      "Dev": "Developer",
+      "developer": "Developer",
-      "Mod": "Moderator",
+      "moderator": "Moderator",
-      "Sup": "Supporter",
+      "supporter": "Supporter",
-      "Arch": "Builder"
+      "builder": "Builder"
     }
   },
   "footer": {

src/pages/index.astro

@@ -1,18 +1,36 @@
 ---
+import dayjs from "dayjs";
 import NavbarLayout from "@layouts/NavbarLayout.astro";
+import {getCollection} from "astro:content";
+import {astroI18n} from "astro-i18n";
 
 import {Image} from "astro:assets";
 import Card from "@components/Card.svelte";
 import localBau from "@images/2023-10-08_20.43.43.png";
-import {CaretRight, Archive, Rocket, Bell} from "@astropub/icons";
+import {CaretRight, Pause, Rocket, Code, Crosshair1} from "@astropub/icons";
 import {t} from "astro-i18n";
 import {l} from "@utils/util";
 import PlayerCount from "@components/PlayerCount.svelte";
 import "../../public/fonts/barlow-condensed/barlow-condensed.css";
 import {Player} from "../components/types/data";
+import PostComponent from "../components/PostComponent.astro";
 
 const teamMember: { [key: string]: Player[]} = await fetch("http://127.0.0.1:1337/data/team")
     .then(value => value.json());
+
+const posts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.locale);
+
+const germanPosts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.fallbackLocale);
+
+germanPosts.forEach(value => {
+    if (posts.find(post => post.data.key === value.data.key)) {
+        return;
+    } else {
+        posts.push(value);
+    }
+});
+
+const latestPost = posts.sort((a, b) => dayjs(b.data.created).unix() - dayjs(a.data.created).unix()).at(0);
 ---
 
 <NavbarLayout title={t("home.page")} description="SteamWar.de Homepage">
@@ -106,32 +124,40 @@ const teamMember: { [key: string]: Player[]} = await fetch("http://127.0.0.1:133
                 customElements.define("drop-in", DropIn);
             </script>
         </drop-in>
+        <div class="absolute left-1/2 bottom-6 -translate-x-1/2">
+            <PostComponent post={latestPost} slim={true} />
+        </div>
     </div>
     <section class="w-full flex flex-col items-center justify-center shadow-2xl rounded-b-2xl pb-8">
         <div class="py-10 flex flex-col lg:flex-row">
             <Card client:idle>
-                <Archive heigth="64" width="64"/>
+                <Crosshair1 heigth="64" width="64"/>
-                <h1>{t("home.benefits.historic.title")}</h1>
+                <h1>{t("home.benefits.fights.title")}</h1>
-                <p class="mt-4">{t("home.benefits.historic.description.1")}</p>
+                <p class="mt-4">{t("home.benefits.fights.description.1")}</p>
-                <p class="mt-4">{t("home.benefits.historic.description.2")}</p>
+                <p class="mt-4">{t("home.benefits.fights.description.2")}</p>
             </Card>
             <Card client:idle>
                 <Rocket heigth="64" width="64"/>
-                <h1>{t("home.benefits.server.title")}</h1>
+                <h1>{t("home.benefits.bau.title")}</h1>
-                <p class="mt-4">{t("home.benefits.server.description")}</p>
+                <p class="mt-4">{t("home.benefits.bau.description")}</p>
             </Card>
             <Card client:idle>
-                <Bell heigth="64" width="64"/>
+                <Pause heigth="64" width="64"/>
-                <h1>{t("home.benefits.events.title")}</h1>
+                <h1>{t("home.benefits.minigames.title")}</h1>
-                <p class="mt-4">{t("home.benefits.events.description.1")}</p>
+                <p class="mt-4">{t("home.benefits.minigames.description.1")}</p>
-                <p class="mt-4">{t("home.benefits.events.description.2")}</p>
+                <p class="mt-4">{t("home.benefits.minigames.description.2")}</p>
+            </Card>
+            <Card client:idle>
+                <Code heigth="64" width="64"/>
+                <h1>{t("home.benefits.open.title")}</h1>
+                <p class="mt-4">{t("home.benefits.open.description")}</p>
             </Card>
         </div>
     </section>
     <section class="w-full py-12">
         {Object.entries(teamMember).map(([prefix, players]) => (
             <div class="flex items-center flex-col">
-                <h2 class="dark:text-white text-4xl font-bold">{t("home.prefix." + prefix)}</h2>
+                <h2 class="dark:text-white text-4xl font-bold">{t("home.prefix." + prefix.replace("PREFIX_", "").toLowerCase())}</h2>
                 <div class="flex my-4 md:flex-row flex-col flex-wrap justify-center">
                     {players.map(v => (
                         <Card extraClasses="py-24 px-12" client:idle>

src/pages/publics/[mode].astro

@@ -0,0 +1,47 @@
+---
+import {createGetStaticPaths} from "astro-i18n";
+import PageLayout from "../../layouts/PageLayout.astro";
+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";
+
+const { mode } = Astro.props;
+
+export const getStaticPaths = createGetStaticPaths(async () => {
+    const gamemodes = await getCollection("modes");
+    
+    return gamemodes.map((entry) => ({
+        props: {
+            mode: entry,
+        },
+        params: {
+            mode: entry.id,
+        },
+    }));
+});
+
+const publics = await getCollection("publics", entry => entry.data.gamemode.id == mode.id);
+---
+
+<PageLayout title="Publics">
+    <h1 class="text-4xl font-bold">{t(`${mode.data.translationKey}.title`)}</h1>
+    <div class="grid grid-cols-2 gap-2">
+        {publics.map((pub) => (
+            <a href={l("/publics/" + pub.id)}>
+                <Card extraClasses="w-full m-0" 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" class="bg-zinc-50 dark:bg-zinc-900" src={pub.data.xray} alt={pub.data.name} />}
+                        </XRayPreview>
+                    </div>
+                    <h2 class="font-bold text-3xl" transition:name={pub.data.id + "-title"}>{pub.data.name}</h2>
+                    <h3 transition:name={pub.data.id + "-desc"}>{pub.data.description}</h3>
+                </Card>
+            </a>
+        ))}
+    </div>
+</PageLayout>

src/pages/publics/index.astro

@@ -1,34 +0,0 @@
----
-import PageLayout from "../../layouts/PageLayout.astro";
-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";
-
-const gamemodes = await getCollection("modes");
-const publics = await getCollection("publics");
----
-
-<PageLayout title="Publics">
-    {gamemodes.filter(value => publics.map(value1 => value1.data.gamemode.id).includes(value.id)).map((gamemode) => (
-        <h1 class="text-4xl font-bold">{t(`${gamemode.data.translationKey}.title`)}</h1>
-        <div class="grid grid-cols-2 gap-2">
-            {publics.filter(value => value.data.gamemode.id == gamemode.id).map((pub) => (
-                <a href={l("/publics/" + pub.id)}>
-                    <Card extraClasses="w-full m-0" 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" class="bg-zinc-50 dark:bg-zinc-900" src={pub.data.xray} alt={pub.data.name} />}
-                            </XRayPreview>
-                        </div>
-                        <h2 class="font-bold text-3xl" transition:name={pub.data.id + "-title"}>{pub.data.name}</h2>
-                        <h3 transition:name={pub.data.id + "-desc"}>{pub.data.description}</h3>
-                    </Card>
-                </a>
-            ))}
-        </div>
-    ))}
-</PageLayout>

src/pages/regeln/index.astro

@@ -31,6 +31,7 @@ const modes = await getCollection("modes", entry => entry.data.main);
                 <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