Started implementing tutorials

src/components/Navbar.svelte

@@ -23,37 +23,60 @@
   import { t } from "astro-i18n";
   import { l } from "../util/util";
   import { onMount } from "svelte";
+  import { loggedIn } from "@repo/authv2.ts";
   interface Props {
-    logo?: import('svelte').Snippet;
+    logo?: import("svelte").Snippet;
   }
 
   let { logo }: Props = $props();
 
-    let navbar: HTMLDivElement = $state();
+  let navbar = $state<HTMLDivElement>();
   let searchOpen = $state(false);
 
+  let accountBtn = $state<HTMLAnchorElement>();
+
+  $effect(() => {
+    if ($loggedIn) {
+      accountBtn!.href = l("/dashboard");
+    } else {
+      accountBtn!.href = l("/login");
+    }
+  });
+
   onMount(() => {
     handleScroll();
-    })
+  });
 
   function handleScroll() {
     if (window.scrollY > 0) {
-            navbar.classList.add("before:scale-y-100");
+      navbar!.classList.add("before:scale-y-100");
     } else {
-            navbar.classList.remove("before:scale-y-100");
+      navbar!.classList.remove("before:scale-y-100");
     }
   }
 </script>
 
 <svelte:window onscroll={handleScroll} />
 
-<nav data-pagefind-ignore class="fixed top-0 left-0 right-0 sm:px-4 py-1 transition-colors z-10 flex justify-center before:backdrop-blur before:shadow-2xl before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:-z-10 before:scale-y-0 before:transition-transform before:origin-top"  bind:this={navbar}>
-    <div class="flex flex-row items-center justify-evenly md:justify-between match">
+<nav
+  data-pagefind-ignore
+  class="fixed top-0 left-0 right-0 sm:px-4 py-1 transition-colors z-10 flex justify-center before:backdrop-blur before:shadow-2xl before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:-z-10 before:scale-y-0 before:transition-transform before:origin-top"
+  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?.()}
-            <span class="text-2xl uppercase font-bold dark:text-white hidden md:inline-block">
+      <span
+        class="text-2xl uppercase font-bold dark:text-white hidden md:inline-block"
+      >
         {t("navbar.title")}
-                <span class="before:scale-y-100" style="display: none" aria-hidden="true"></span>
+        <span
+          class="before:scale-y-100"
+          style="display: none"
+          aria-hidden="true"
+        ></span>
       </span>
     </a>
     <div class="flex justify-center flex-wrap">
@@ -65,10 +88,21 @@
           <CaretDownOutline class="ml-2 mt-auto" />
         </button>
         <div>
-                    <a class="btn btn-gray" href={l("/announcements")}>{t("navbar.links.home.announcements")}</a>
-                    <a class="btn btn-gray" href={l("/downloads")}>{t("navbar.links.home.downloads")}</a>
-                    <a class="btn btn-gray" href={l("/faq")}>{t("navbar.links.home.faq")}</a>
-                    <a class="btn btn-gray" href={l("/code-of-conduct")}>{t("navbar.links.rules.coc")}</a>
+          <a class="btn btn-gray" href={l("/announcements")}
+            >{t("navbar.links.home.announcements")}</a
+          >
+          <a class="btn btn-gray" href={l("/downloads")}
+            >{t("navbar.links.home.downloads")}</a
+          >
+          <a class="btn btn-gray" href={l("/tutorials")}
+            >{t("navbar.links.home.tutorials")}</a
+          >
+          <a class="btn btn-gray" href={l("/faq")}
+            >{t("navbar.links.home.faq")}</a
+          >
+          <a class="btn btn-gray" href={l("/code-of-conduct")}
+            >{t("navbar.links.rules.coc")}</a
+          >
         </div>
       </div>
       <div class="btn-dropdown">
@@ -79,17 +113,35 @@
           <CaretDownOutline class="ml-2 mt-auto" />
         </button>
         <div>
-                    <a href={l("/rules/wargear")} class="btn btn-gray">{t("navbar.links.rules.wg")}</a>
-                    <a href={l("/rules/miniwargear")} class="btn btn-gray">{t("navbar.links.rules.mwg")}</a>
-                    <a href={l("/rules/warship")} class="btn btn-gray">{t("navbar.links.rules.ws")}</a>
-                    <a href={l("/rules/airship")} class="btn btn-gray">{t("navbar.links.rules.as")}</a>
-                    <a href={l("/rules/quickgear")} class="btn btn-gray">{t("navbar.links.rules.qg")}</a>
+          <a href={l("/rules/wargear")} class="btn btn-gray"
+            >{t("navbar.links.rules.wg")}</a
+          >
+          <a href={l("/rules/miniwargear")} class="btn btn-gray"
+            >{t("navbar.links.rules.mwg")}</a
+          >
+          <a href={l("/rules/warship")} class="btn btn-gray"
+            >{t("navbar.links.rules.ws")}</a
+          >
+          <a href={l("/rules/airship")} class="btn btn-gray"
+            >{t("navbar.links.rules.as")}</a
+          >
+          <a href={l("/rules/quickgear")} class="btn btn-gray"
+            >{t("navbar.links.rules.qg")}</a
+          >
           <h2 class="px-2 text-gray-300">{t("navbar.links.rules.rotating")}</h2>
-                    <a href={l("/rules/megawargear")}
-                       class="btn btn-gray">{t("navbar.links.rules.megawg")}</a>
-                    <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>
+          <a href={l("/rules/megawargear")} class="btn btn-gray"
+            >{t("navbar.links.rules.megawg")}</a
+          >
+          <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.ranked")}</h2>
+          <a href={l("/rangliste/missilewars")} class="btn btn-gray"
+            >{t("navbar.links.ranked.mw")}</a
+          >
         </div>
       </div>
       <!-- TODO: Add help center
@@ -106,7 +158,7 @@
                 </div>
             </div>
             -->
-            <a class="btn" href={l("/login")}>
+      <a class="btn" href={l("/login")} bind:this={accountBtn}>
         <span class="btn__text">{t("navbar.links.account")}</span>
       </a>
       <!--

src/content/config.ts

@@ -104,6 +104,14 @@ export const publics = defineCollection({
     }),
 });
 
+export const tutorials = defineCollection({
+    type: "content",
+    schema: z.object({
+        title: z.string(),
+        translationKey: z.string(),
+    }),
+});
+
 export const collections = {
     "pages": pages,
     "help": help,
@@ -112,4 +120,5 @@ export const collections = {
     "downloads": downloads,
     "announcements": announcements,
     "publics": publics,
+    "tutorials": tutorials
 };

src/content/tutorials/Tracer.md

@@ -0,0 +1,56 @@
+---
+title: Tracer
+translationKey: tracer
+slug: tracer
+---
+
+# Der Tracer
+![](../../images/tutorials/tracer-cover.png)
+
+Der Tracer ist eines der Kern-Tools unseres BauSystems. Durch ihn kannst du 
+dir komfortabel angucken wie sich die TNT deiner Kanonen Tick für Tick 
+verhalten. Dies tut der Tracer, indem er alle Daten der auf einem Plot 
+gezündeten TNTs aufnimmt und speichert. Du kannst dir dann verschiedene 
+Darstellungsformen der aufgezeichneten TNTs angucken.
+
+## Den Tracer starten
+Um die Schüsse deiner Kanone auf einem Plot aufzunehmen, musst du den Tracer 
+für diese Plot einschalten. Nutze hierfür `/trace auto`.  
+Nun da der Tracer an ist, wird für jeden Kanonenschuss ein Trace erstellt.
+
+## Traces anzeigen und analysieren
+Jetzt da der Tracer an ist und du einen Schuss abgegeben hast, kannst du dir 
+den Trace mit  
+`/trace show` anzeigen (Falls du mehrere Schüsse abgegeben hast kannst du 
+dir mit  
+`/trace isolate [Schuss-Nummer]` den Trace eines einzelnen Schusses anzeigen). 
+ 
+
+Zur Analyse eines Schusses stellen wir dir verschiedene **View-Flags** zur 
+Verfügung. Diese aktivierst du, indem du sie an den Trace-show Command 
+anhängst.
+
+| Flag                     | Beschreibung                                                                                                                                            |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `count`                  | Zeige dir die Zahl der TNTs an die an einem Trace-Punkt aufgenommen wurden                                                                              |
+| `explosion`              | Zeige dir nur die Trace-Punkte an, an denen TNT explodiert ist                                                                                          |
+| `fuse`                   | Zeige dir an wie weit die TNTs an einem Trace Punkt von der Explosion weg waren                                                                         |
+| `ignite`                 | Ohne diese Flag zeigt der Tracer nur Trace-Punkte an, die nach der ersten Explosion entstanden sind. Mit dieser Flag werden alle Trace-Punkte angezeigt |
+| `micromotion`            | Zeige nur TNT an, die sich zu einem beliebigen Zeitpunkt mir einer Geschwindigkeit von kleiner 0.001 bewegt haben                                       |
+| `source`                 | Zeige dir nur Trace-Punkte an, bei denen TNT gezündet wurde                                                                                             |
+| `build-destroy-only`     | Zeige dir nur TNT an, die im Bau-Bereich explodiert sind                                                                                                |
+| `testblock-destroy-only` | Zeige dir nur TNT an, die im Testblock-Bereich explodiert sind                                                                                          |
+| `advanced`               | Zeige dir die TNT-Zwischenberechnungspunkte auf den einzelnen Achsen an                                                                                 |
+
+\
+Du kannst dir auch nur einen Abschnitt des Traces mit   
+`\trace show from [Start-Zeit] to [End-Zeit] with [View-Flags]` anzeigen. Du kann auch `from` oder `to` weglassen, um dir den Trace von bzw. bis zu einem gewissen Zeitpunkt angucken.
+
+## Traces löschen
+Allgemein empfiehlt es sich Traces nicht ewig rumliegen zu lassen, da ein 
+`/trace show` schnell den PC zum erliegen bringen kann. Nutze `/trace 
+delete [Schuss-Nummer]` um einzelne Traces zu löschen und `/trace clear` 
+um alle Traces auf einem Plot zu löschen.
+
+## Traces gemeinsam betrachten
+Wenn man zusammen an einer Kanonen arbeitet kann es praktisch sein, die selben Traces, mit den selben View-Flags zu betrachten. Dies kannst du machen mit `/trace follow [Spieler]`. Den Follow kannst du mit `/trace unfollow` wieder aufheben. Zusätzlich kannst du alle Spieler auf einem Bau-Server mit `/trace broadcast` einladen deiner Trace-View zu folgen. 

src/i18n/common/de.json

@@ -63,6 +63,7 @@
         "announcements": "Ankündigungen",
         "about": "Über Uns",
         "downloads": "Downloads",
+        "tutorials": "Tutorials",
         "faq": "FAQ"
       },
       "rules": {

src/i18n/common/en.json

@@ -6,6 +6,7 @@
         "announcements": "Announcements",
         "about": "About",
         "downloads": "Downloads",
+        "tutorials": "Tutorials",
         "faq": "FAQ"
       },
       "rules": {

src/pages/index.astro

@@ -15,7 +15,7 @@ import {type Player} from "../components/types/data";
 import PostComponent from "../components/PostComponent.astro";
 import BackgroundImage from "../components/BackgroundImage.astro";
 
-const teamMember: { [key: string]: Player[]} = await fetch("http://127.0.0.1:1337/data/team")
+const teamMember: { [key: string]: Player[]} = await fetch("https://api.steamwar.de/data/team")
     .then(value => value.json());
 
 const posts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.locale);

src/pages/tutorials/[tutorial].astro

@@ -0,0 +1,19 @@
+---
+import { createGetStaticPaths } from "astro-i18n";
+import { getCollection } from "astro:content";
+
+const { tutorial } = Astro.props;
+
+export const getStaticPaths = createGetStaticPaths(async () => {
+  const tutorials = await getCollection("tutorials");
+
+  return tutorials.map((entry) => ({
+    props: {
+      title: entry.data.title 
+    },
+    params: {
+      title: entry.slug,
+    },
+  }));
+});
+---