Started implementing tutorials

2025-04-23 10:39:19 +02:00
parent 82f5ab48b8
commit 4d100fcafc
9 changed files with 215 additions and 77 deletions
--- a/src/components/Navbar.svelte
+++ b/src/components/Navbar.svelte
@ -18,81 +18,133 @@
  -->

 <script lang="ts">
-    import "../styles/button.css";
-    import {CaretDownOutline, SearchOutline} from "flowbite-svelte-icons";
-    import {t} from "astro-i18n";
-    import {l} from "../util/util";
-    import {onMount} from "svelte";
+  import "../styles/button.css";
+  import { CaretDownOutline, SearchOutline } from "flowbite-svelte-icons";
+  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 searchOpen = $state(false);
+  let navbar = $state<HTMLDivElement>();
+  let searchOpen = $state(false);

-    onMount(() => {
-        handleScroll();
-    })
+  let accountBtn = $state<HTMLAnchorElement>();

-    function handleScroll() {
-        if (window.scrollY > 0) {
-            navbar.classList.add("before:scale-y-100");
-        } else {
-            navbar.classList.remove("before:scale-y-100");
-        }
+  $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");
+    } else {
+      navbar!.classList.remove("before:scale-y-100");
+    }
+  }
 </script>

-<svelte:window onscroll={handleScroll}/>
+<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">
-        <a class="flex items-center" href={l("/")}>
-            {@render logo?.()}
-            <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>
-        </a>
-        <div class="flex justify-center flex-wrap">
-            <div class="btn-dropdown">
-                <button class="btn btn-gray">
-                    <a href={l("/")}>
-                        <span class="btn__text">{t("navbar.links.home.title")}</span>
-                    </a>
-                    <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>
-                </div>
-            </div>
-            <div class="btn-dropdown">
-                <button class="btn btn-gray">
-                    <a rel="prefetch" href={l("/rules")}>
-                        <span class="btn__text">{t("navbar.links.rules.title")}</span>
-                    </a>
-                    <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>
-                    <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>
-                </div>
-            </div>
-            <!-- TODO: Add help center
+<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"
+      >
+        {t("navbar.title")}
+        <span
+          class="before:scale-y-100"
+          style="display: none"
+          aria-hidden="true"
+        ></span>
+      </span>
+    </a>
+    <div class="flex justify-center flex-wrap">
+      <div class="btn-dropdown">
+        <button class="btn btn-gray">
+          <a href={l("/")}>
+            <span class="btn__text">{t("navbar.links.home.title")}</span>
+          </a>
+          <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("/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">
+        <button class="btn btn-gray">
+          <a rel="prefetch" href={l("/rules")}>
+            <span class="btn__text">{t("navbar.links.rules.title")}</span>
+          </a>
+          <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
+          >
+          <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
+          >
+          <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
            <div class="btn-dropdown my-1">
                <div class="btn btn-gray" tabindex="1">
                    <a rel="prefetch">
@ -106,26 +158,26 @@
                </div>
            </div>
            -->
-            <a class="btn" href={l("/login")}>
-                <span class="btn__text">{t("navbar.links.account")}</span>
-            </a>
-            <!--
+      <a class="btn" href={l("/login")} bind:this={accountBtn}>
+        <span class="btn__text">{t("navbar.links.account")}</span>
+      </a>
+      <!--
            <button class="btn my-1" onclick={() => searchOpen = true}>
                <SearchOutline ariaLabel="Site Search" class="inline-block h-6"/>
            </button>
            -->
-        </div>
    </div>
+  </div>
 </nav>

 {#if searchOpen}
-    {#await import("./SearchComponent.svelte") then c}
-        <c.default bind:open={searchOpen} />
-    {/await}
+  {#await import("./SearchComponent.svelte") then c}
+    <c.default bind:open={searchOpen} />
+  {/await}
 {/if}

 <style lang="scss">
-    .match {
-        width: min(100vw, 70em);
-    }
-</style>
+  .match {
+    width: min(100vw, 70em);
+  }
+</style>
--- a/src/content/config.ts
+++ b/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
 };
--- a/src/content/tutorials/Tracer.md
+++ b/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. 
--- a/src/i18n/common/de.json
+++ b/src/i18n/common/de.json
@ -63,6 +63,7 @@
        "announcements": "Ankündigungen",
        "about": "Über Uns",
        "downloads": "Downloads",
+        "tutorials": "Tutorials",
        "faq": "FAQ"
      },
      "rules": {
--- a/src/i18n/common/en.json
+++ b/src/i18n/common/en.json
@ -6,6 +6,7 @@
        "announcements": "Announcements",
        "about": "About",
        "downloads": "Downloads",
+        "tutorials": "Tutorials",
        "faq": "FAQ"
      },
      "rules": {
--- a/src/images/tutorials/tracer-cover.png
+++ b/src/images/tutorials/tracer-cover.png
--- a/src/pages/index.astro
+++ b/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);
--- a/src/pages/tutorials/[tutorial].astro
+++ b/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,
+    },
+  }));
+});
+---
--- a/src/pages/tutorials/index.astro
+++ b/src/pages/tutorials/index.astro