Started implementing tutorials

Add tracer tutorial
2025-04-23 10:39:19 +02:00 · 2025-01-16 21:47:03 +01:00
16 changed files with 5333 additions and 3820 deletions
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/components/Navbar.svelte
+++ b/src/components/Navbar.svelte
@ -19,41 +19,64 @@

 <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 { 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 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}/>
+<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">
@ -62,13 +85,24 @@
          <a href={l("/")}>
            <span class="btn__text">{t("navbar.links.home.title")}</span>
          </a>
-                    <CaretDownOutline class="ml-2 mt-auto"/>
+          <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">
@ -76,20 +110,38 @@
          <a rel="prefetch" href={l("/rules")}>
            <span class="btn__text">{t("navbar.links.rules.title")}</span>
          </a>
-                    <CaretDownOutline class="ml-2 mt-auto"/>
+          <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>
      <!--
--- 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/downloads/advancedscripts.json
+++ b/src/content/downloads/advancedscripts.json
@ -2,9 +2,8 @@
  "name": "AdvancedScripts",
  "description": "Ein Fabric-Mod, der für den BauServer von SteamWar Hotkeys für das ScriptSystem hinzufügt. Hierzu werden die einzelnen Zeichen an den Server gesendet und vom Server verarbeitet.",
  "url": {
-    "1.21.4": "https://git.steamwar.de/SteamWar/AdvancedScripts/releases/download/2.2.0/AdvancedScripts-2.2.0.jar",
-    "1.20.6": "https://git.steamwar.de/SteamWar/AdvancedScripts/releases/download/2.1.0/AdvancedScripts-2.1.0.jar",
-    "1.19.3": "https://git.steamwar.de/SteamWar/AdvancedScripts/releases/download/2.0.0/AdvancedScripts-2.0.0.jar"
+    "1.20.1": "https://steamwar.de/AdvancedScriptsV3",
+    "1.19": "https://steamwar.de/AdvancedScripts"
  },
-  "sourceUrl": "https://git.steamwar.de/SteamWar/AdvancedScripts"
+  "sourceUrl": "https://steamwar.de/devlabs/SteamWar/AdvancedScripts"
 }
--- 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/content/tutorials/bausystem/tracer.md
+++ b/src/content/tutorials/bausystem/tracer.md
@ -0,0 +1,50 @@
+# Der Tracer
+![](../../../images/tutorials/bausystem/tracer/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": {
@ -240,9 +241,5 @@
  },
  "ranking": {
    "heading": "{# mode #} Rangliste"
-  },
-  "404": {
-    "title": "404 - Seite nicht gefunden",
-    "description": "Seite nicht gefunden"
  }
 }
--- 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": {
@ -180,9 +181,5 @@
  },
  "stats": {
    "title": "Fight Statistics"
-  },
-  "404": {
-    "title": "404 - Page not found",
-    "description": "Page not found"
  }
 }
--- a/src/images/tutorials/bausystem/tracer/tracer-cover.png
+++ b/src/images/tutorials/bausystem/tracer/tracer-cover.png
--- 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/not-found.astro
+++ b/src/pages/not-found.astro
@ -1,39 +0,0 @@
---
-import PageLayout from "../layouts/PageLayout.astro";
-import {t} from "astro-i18n";
---
-
-<PageLayout title={t("404.title")}>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
-        <!-- 404 Text - heller für besseren Kontrast -->
-        <text x="400" y="150" font-family="Arial Black" font-size="120" fill="#ffffff" text-anchor="middle">404</text>
-
-        <!-- Trauriger Roboter - hellere Farben für besseren Kontrast -->
-        <!-- Körper -->
-        <rect x="350" y="200" width="100" height="120" rx="10" fill="#888888"/>
-
-        <!-- Kopf -->
-        <rect x="365" y="160" width="70" height="60" rx="5" fill="#888888"/>
-
-        <!-- Augen -->
-        <circle cx="385" cy="185" r="8" fill="#ff6b6b"/>
-        <circle cx="415" cy="185" r="8" fill="#ff6b6b"/>
-
-        <!-- Antenne -->
-        <line x1="400" y1="160" x2="400" y2="140" stroke="#888888" stroke-width="4"/>
-        <circle cx="400" cy="135" r="5" fill="#888888"/>
-
-        <!-- Arme -->
-        <rect x="320" y="220" width="30" height="10" rx="5" fill="#888888"/>
-        <rect x="450" y="220" width="30" height="10" rx="5" fill="#888888"/>
-
-        <!-- Text unter dem Roboter - heller für besseren Kontrast -->
-        <text x="400" y="360" font-family="Arial" font-size="24" fill="#ffffff" text-anchor="middle">Seite nicht gefunden</text>
-
-        <!-- Dekorative Elemente - heller für besseren Kontrast -->
-        <circle cx="250" cy="100" r="5" fill="#bbbbbb"/>
-        <circle cx="550" cy="150" r="5" fill="#bbbbbb"/>
-        <circle cx="200" cy="300" r="5" fill="#bbbbbb"/>
-        <circle cx="600" cy="250" r="5" fill="#bbbbbb"/>
-    </svg>
-</PageLayout>
--- 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
--- a/steamwarci.yml
+++ b/steamwarci.yml
@ -1,7 +1,7 @@
 build:
-  - "echo 'PUBLIC_API_SERVER=https://api.steamwar.de' > .env"
+  - "echo 'PUBLIC_API_SERVER=https://dev.steamwar.de/api' > .env"
  - "pnpm run ci"

 release:
-  - "rm -r /var/www/html/*"
-  - "mv dist/* /var/www/html"
+  - "rm -r /var/www/dev/*"
+  - "mv dist/* /var/www/dev"
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@ -9,6 +9,7 @@ module.exports = {
 	theme: {
 		extend: {
 			colors: {
+				// flowbite-svelte
 				primary: { 50: '#FFF5F2', 100: '#FFF1EE', 200: '#FFE4DE', 300: '#FFD5CC', 400: '#FFBCAD', 500: '#FE795D', 600: '#EF562F', 700: '#EB4F27', 800: '#CC4522', 900: '#A5371B'},
 			}
 		},
Author	SHA1	Message	Date
D4rkr34lm	4d100fcafc	Started implementing tutorials Some checks failed SteamWarCI Build failed Details	2025-04-23 10:39:19 +02:00
D4rkr34lm	82f5ab48b8	Add tracer tutorial	2025-01-16 21:47:03 +01:00