Add how to create token

.gitignore

@@ -22,3 +22,4 @@ pnpm-debug.log*
 /.astro-i18n/
 /bun.lockb
 /src/pages/de/
+/steamwar-website.zip

astro-i18n.config.ts

@@ -22,6 +22,7 @@ export default defineAstroI18nConfig({
 			stats: "statistiken",
 			announcements: "ankuendigungen",
 			"privacy-policy": "datenschutzerklaerung",
+			"create-token": "token-erstellen"
 		}
 	},
 })

astro.config.mjs

@@ -17,7 +17,9 @@ export default defineConfig({
   },
   compressHTML: true,
   site: "https://steamwar.de",
-  integrations: [svelte(), tailwind(), configureI18n(), sitemap({
+  integrations: [svelte(), tailwind({
+    configFile: "./tailwind.config.cjs"
+  }), configureI18n(), sitemap({
     i18n: {
       defaultLocale: "en",
       locales: {

package.json

@@ -11,7 +11,11 @@
 		"i18n:extract": "astro-i18n extract",
 		"i18n:generate:pages": "astro-i18n generate:pages --purge",
 		"i18n:generate:types": "astro-i18n generate:types",
-		"i18n:sync": "npm run i18n:generate:pages && npm run i18n:generate:types"
+		"i18n:sync": "pnpm run i18n:generate:pages && pnpm run i18n:generate:types",
+		"package": "cd dist && zip -r steamwar-website.zip * && cd ..",
+		"clean:dist": "rm -rf dist",
+		"clean:node_modules": "rm -rf node_modules",
+		"ci": "pnpm run clean:dist && pnpm install && pnpm run i18n:sync && pnpm run build && pnpm run package"
 	},
 	"devDependencies": {
 		"@astrojs/svelte": "^5.0.0",

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>

src/content/pages/de/about.md

@@ -4,7 +4,6 @@ description: Über SteamWar
 slug: ueber-uns
 ---
 
-
 # Sicherheit
 
 Wir legen Wert auf Sicherheit.

src/content/pages/de/join.md

@@ -1,10 +1,9 @@
 ---
-title: Join Now!
+title: Jetzt Spielen!
 description: SteamWar Joinen
 slug: jetzt-spielen
 ---
 
-
 # Minecraft Java Edition
 
 1. Klicke in Minecraft auf »Mehrspieler«

src/content/pages/de/token.md

@@ -0,0 +1,22 @@
+---
+title: Erstelle einen Token für die Webseite
+description: Erstelle einen Token für die Webseite
+slug: token-erstellen
+---
+
+Ein Token ist ein Schlüssel, mit dem du dich auf der Webseite als Spieler identifizieren kannst. Dieser wird benötigt, um z.B. deine Schematics anzuzeigen.
+
+## Token erstellen
+
+Um einen Token zu erstellen, musst du dich auf dem Minecraftserver einloggen und `/token create <name>` eingeben. Der Name ist frei wählbar und dient nur zur Identifikation. Du kannst auch mehrere Tokens erstellen.
+Du erhältst dann eine Nachricht, auf der du mit einem Klick den Token in die Zwischenablage kopieren kannst. Dieser Token ist nur einmal sichtbar, bei Verlust musst du einen neuen erstellen.
+
+## Token verwenden
+
+Um den Token zu verwenden, kannst du ihn unter dem Menüpunkt `Konto` auf der Webseite eingeben um dich zu identifizieren. Dazu wird dann auch dein Minecraftname benötigt.
+
+Wenn du erfolgreich mit dem Token eingeloggt wurdest, wirst du auf die Dashboardseite weitergeleitet. Dort kannst du dann deine Schematics und Statistiken sehen.
+
+## Token löschen
+
+Um einen Token zu löschen, musst du auf dem Minecraftserver `/token` eingeben. Dadurch wird eine Liste mit allen deinen Tokens angezeigt. Mit einem Klick auf den Token kannst du ihn löschen.

src/content/pages/en/about.md

@@ -4,7 +4,6 @@ description: About SteamWar
 slug: about
 ---
 
-
 # Security
 
 We value security. 

src/content/pages/en/coc.md

@@ -4,7 +4,6 @@ description: Code of Conduct of SteamWar.de
 slug: code-of-conduct
 ---
 
-
 # General behavior
 
 It is crucial to us, that our players find themselves in a friendly environment

src/content/pages/en/join.md

@@ -5,7 +5,6 @@ slug: join
 german: true
 ---
 
-
 # Minecraft Java Edition
 
 1. Klicke in Minecraft auf »Mehrspieler«

src/content/pages/en/token.md

@@ -0,0 +1,23 @@
+---
+title: Erstelle einen Token für die Webseite
+description: Erstelle einen Token für die Webseite
+german: true
+slug: create-token
+---
+
+Ein Token ist ein Schlüssel, mit dem du dich auf der Webseite als Spieler identifizieren kannst. Dieser wird benötigt, um z.B. deine Schematics anzuzeigen.
+
+## Token erstellen
+
+Um einen Token zu erstellen, musst du dich auf dem Minecraftserver einloggen und `/token create <name>` eingeben. Der Name ist frei wählbar und dient nur zur Identifikation. Du kannst auch mehrere Tokens erstellen.
+Du erhältst dann eine Nachricht, auf der du mit einem Klick den Token in die Zwischenablage kopieren kannst. Dieser Token ist nur einmal sichtbar, bei Verlust musst du einen neuen erstellen.
+
+## Token verwenden
+
+Um den Token zu verwenden, kannst du ihn unter dem Menüpunkt `Konto` auf der Webseite eingeben um dich zu identifizieren. Dazu wird dann auch dein Minecraftname benötigt.
+
+Wenn du erfolgreich mit dem Token eingeloggt wurdest, wirst du auf die Dashboardseite weitergeleitet. Dort kannst du dann deine Schematics und Statistiken sehen.
+
+## Token löschen
+
+Um einen Token zu löschen, musst du auf dem Minecraftserver `/token` eingeben. Dadurch wird eine Liste mit allen deinen Tokens angezeigt. Mit einem Klick auf den Token kannst du ihn löschen.

src/layouts/Basic.astro

@@ -1,5 +1,5 @@
 ---
-
+import '../styles/tailwind.css'
 import icon from '../images/logo.png';
 import {getImage} from "astro:assets";
 import {astroI18n} from "astro-i18n";

src/pages/index.astro

@@ -133,7 +133,7 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
 						<div class="bg-zinc-50 border-gray-100 py-24 px-12 border-2 m-2 transition duration-300 ease-in-out rounded-xl shadow-lg
 									hover:scale-105 hover:shadow-2xl
 									dark:bg-neutral-900 dark:border-gray-800 dark:text-white">
-							<figure>
+							<figure class="flex flex-col items-center">
 								<figcaption class="text-center mb-4 text-2xl">{v.name}</figcaption>
 								<Image src={`https://visage.surgeplay.com/bust/150/${v.uuid}`} class="transition duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl" alt={v.name + "s bust"} width="150" height="150"  />
 							</figure>

src/styles/tailwind.css

@@ -0,0 +1,22 @@
+/*
+ *   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/>.
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.cjs

@@ -17,4 +17,5 @@ module.exports = {
 	plugins: [
 		require('flowbite/plugin')
 	],
+	darkMode: 'class'
 }