Add how to create token

src/components/FightStatsChart.svelte

@@ -44,7 +44,17 @@
         }
 
         const colors = ["#abfa91", "#279900", "#00ffbe", "#9297fb", "#050b9d", "#b60fff", "#8dddfc", "#0880ad", "#41ff00", "#039973", "#96fce2", "#0009ff", "#7501a4", "#e2a2fb", "#00b9ff"];
-        const map = Map.groupBy(data, entry => entry.gamemode);
+        const map = new Map<string, { x: string, y: number }[]>()
+        for (const point of data) {
+            const dataset = map.get(point.gamemode) ?? []
+
+            dataset.push({
+                x: point.date,
+                y: point.count
+            })
+
+            map.set(point.gamemode, dataset)
+        }
 
         chart = new Chart(
             canvas,

src/components/Login.svelte

@@ -65,7 +65,7 @@
         <input type="password" id="token" name="token" placeholder={t("login.placeholder.token")} bind:value={token} />
     </div>
     <p class="mt-2">
-        <a class="text-neutral-500 hover:underline" href={l("/help/token")}>{t("login.generateToken")}</a></p>
+        <a class="text-neutral-500 hover:underline" href={l("/token-erstellen")}>{t("login.generateToken")}</a></p>
 
     {#if error}
         <p class="mt-2 text-red-500">{error}</p>

src/components/dashboard/SchematicInfoModal.svelte

@@ -68,12 +68,12 @@
         }).format(dayjs(info.schem.lastUpdate).utc(false).toDate())})}</p>
     <p class="!mt-0">{t("dashboard.schematic.info.item", {item: info.schem.item ?? (info.schem.type == null ? "CHEST" : "CAULDRON_ITEM")})}</p>
     {#if info.members.length !== 0}
-        <p class="!mt-0">{t("dashboard.schematic.info.members", {members: info.members.join(", ")})}</p>
+        <p class="!mt-0">{t("dashboard.schematic.info.members", {members: info.members.map(value => value.name).join(", ")})}</p>
     {/if}
     <svelte:fragment slot="footer">
         {#if (info.schem.owner === user.id)}
             <button class="btn !ml-auto" on:click={download}>{t("dashboard.schematic.info.btn.download")}</button>
         {/if}
-        <button class="btn" on:click={() => dispatch("reset")}>{t("dashboard.schematic.info.btn.close")}</button>
+        <button class="btn" class:!ml-auto={info.schem.owner !== user.id} on:click={() => dispatch("reset")}>{t("dashboard.schematic.info.btn.close")}</button>
     </svelte:fragment>
 </Modal>

src/components/dashboard/SchematicList.svelte

@@ -27,6 +27,7 @@
     import SchematicInfo from "./SchematicInfo.svelte";
     import UploadModal from "./UploadModal.svelte";
     import type {Player} from "../types/data.ts";
+    import SWButton from "../styled/SWButton.svelte";
 
     const dispatch = createEventDispatcher();
 
@@ -63,9 +64,9 @@
         {/each}
     </Breadcrumb>
     <div class="flex flex-col justify-center">
-        <button class="btn" on:click={() => uploadOpen = true}>
+        <SWButton on:click={() => uploadOpen = true}>
             {t("dashboard.schematic.upload")}
-        </button>
+        </SWButton>
     </div>
 </div>
 <table>

src/components/dashboard/Statistics.svelte

@@ -20,7 +20,7 @@
 <script lang="ts">
     import type {Player} from "../types/data.ts";
     import {statsRepo} from "../repo/repo.ts";
-    import {t} from "astro-i18n"
+    import {astroI18n, t} from "astro-i18n"
 
     export let user: Player;
 
@@ -34,7 +34,10 @@
 {#await request}
     <p>{t("status.loading")}</p>
 {:then data}
-    <p>Playtime: {data.playtime}h</p>
+    <p>Playtime: {new Intl.NumberFormat(astroI18n.locale, {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+    }).format(data.playtime)}h</p>
     <p>Fights: {data.fights}</p>
     {#if user.perms.includes("CHECK")}
         <p>Schematics Checked: {data.acceptedSchematics}</p>

src/components/styled/SWButton.svelte

@@ -0,0 +1,27 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2023 SteamWar.de-Serverteam
+  -
+  -   This program is free software: you can redistribute it and/or modify
+  -   it under the terms of the GNU Affero General Public License as published by
+  -   the Free Software Foundation, either version 3 of the License, or
+  -   (at your option) any later version.
+  -
+  -   This program is distributed in the hope that it will be useful,
+  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  -   GNU Affero General Public License for more details.
+  -
+  -   You should have received a copy of the GNU Affero General Public License
+  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<script lang="ts">
+
+    export let type: "primary" | "ghost" | "gray" = "primary";
+</script>
+
+<button on:click class="btn" class:btn-gray={type === "gray"} class:btn-text={type === "ghost"}>
+    <slot />
+</button>