SteamWar/Website
10
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Refactor components and pages for improved readability and consistency

Browse Source 
- Updated BackgroundImage.astro to format props for better readability.
- Adjusted FightTable.svelte to remove unnecessary trailing commas.
- Modified GroupTable.svelte to fix sorting syntax.
- Cleaned up LanguageWarning.astro by standardizing import statements.
- Enhanced Login.svelte for better formatting and readability.
- Simplified Navbar.svelte by merging multi-line attributes into single lines.
- Streamlined PostComponent.astro by condensing Image component props.
- Improved SearchComponent.svelte for consistent spacing and formatting.
- Refined TagComponent.astro for better readability and structure.
- Updated PageLayout.astro to simplify div structure.
- Enhanced downloads.astro for improved readability and consistency.
- Cleaned up index.astro in help directory for better formatting.
- Refactored index.astro in main pages for improved readability.
- Standardized login.astro for better formatting.
- Cleaned up not-found.astro for consistent import formatting.
- Enhanced [...schem].astro for better readability.
- Refactored [mode].astro for consistent import formatting.
- Improved [...gamemode].astro for better readability.
- Cleaned up [mode].astro in regeln directory for consistent formatting.
- Refactored index.astro in regeln directory for improved readability.
- Enhanced fight.astro for consistent import formatting.
This commit is contained in:
Chaoscaot
2026-03-28 15:56:56 +01:00
parent d2ee422d6d
commit 5d365bc744
21 changed files with 247 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/BackgroundImage.astro
View File

@@ -3,7 +3,13 @@ import { Image } from "astro:assets";
import localBau from "@images/90.png"; import localBau from "@images/90.png";
--- ---
<Image src={localBau} alt="Bau" widths={[240, 540, 720, 1080, 1920, localBau.width]} <Image
src={localBau}
alt="Bau"
widths={[240, 540, 720, 1080, 1920, localBau.width]}
sizes={`(max-width: 240px) 240px, (max-width: 540px) 540px, (max-width: 720px) 720px, (max-width: 1080px) 1080px, (max-width: 1920px) 1920px, ${localBau.width}px`} sizes={`(max-width: 240px) 240px, (max-width: 540px) 540px, (max-width: 720px) 720px, (max-width: 1080px) 1080px, (max-width: 1920px) 1920px, ${localBau.width}px`}
class="w-full h-full object-cover" quality={100} class="w-full h-full object-cover"
draggable="false" loading="eager"/> quality={100}
draggable="false"
loading="eager"
/>

2
src/components/FightTable.svelte
View File

@@ -57,7 +57,7 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{#each window( event.fights.filter((f) => (group === undefined ? true : f.group?.id === group)), rows ) as fights} {#each window( event.fights.filter((f) => (group === undefined ? true : f.group?.id === group)), rows, ) as fights}
<tr> <tr>
{#each fights as fight (fight.id)} {#each fights as fight (fight.id)}
<td <td

2
src/components/GroupTable.svelte
View File

@@ -40,7 +40,7 @@
team: event.teams.find((t) => t.id === Number(teamId))!!, team: event.teams.find((t) => t.id === Number(teamId))!!,
points: points, points: points,
})) }))
.sort((a, b) => b.points - a.points) .sort((a, b) => b.points - a.points),
); );
</script> </script>

2
src/components/LanguageWarning.astro
View File

@@ -1,5 +1,5 @@
--- ---
import {t} from "astro-i18n"; import { t } from "astro-i18n";
--- ---
<div class="border-l-2 border-amber-500 bg-amber-500/5 p-4" role="alert"> <div class="border-l-2 border-amber-500 bg-amber-500/5 p-4" role="alert">

9
src/components/Login.svelte
View File

@@ -90,7 +90,10 @@
<p class="mt-2 text-red-500">{error}</p> <p class="mt-2 text-red-500">{error}</p>
{/if} {/if}
<button class="btn mt-4 justify-center w-full" type="submit" onclick={preventDefault(login)}>{t("login.submit")}</button> <button class="btn mt-4 justify-center w-full" type="submit" onclick={preventDefault(login)}>{t("login.submit")}</button>
<a class="btn mt-4 justify-center w-full" href="https://discord.com/oauth2/authorize?client_id=869606970099904562&response_type=token&redirect_uri=https%3A%2F%2Fsteamwar.de%2Flogin&scope=identify"> <a
class="btn mt-4 justify-center w-full"
href="https://discord.com/oauth2/authorize?client_id=869606970099904562&response_type=token&redirect_uri=https%3A%2F%2Fsteamwar.de%2Flogin&scope=identify"
>
{t("login.discord")} {t("login.discord")}
</a> </a>
</form> </form>
@@ -137,7 +140,9 @@
text-decoration: none; text-decoration: none;
font-size: 0.85rem; font-size: 0.85rem;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
transition: color 0.2s, border-color 0.2s; transition:
color 0.2s,
border-color 0.2s;
} }
.sw-link:hover { .sw-link:hover {

11
src/components/Navbar.svelte
View File

@@ -58,11 +58,7 @@
<svelte:window onscroll={handleScroll} /> <svelte:window onscroll={handleScroll} />
<nav <nav data-pagefind-ignore class="sw-nav z-20 fixed top-0 left-0 right-0 sm:px-4 py-1 transition-colors flex justify-center" bind:this={navbar}>
data-pagefind-ignore
class="sw-nav z-20 fixed top-0 left-0 right-0 sm:px-4 py-1 transition-colors flex justify-center"
bind:this={navbar}
>
<div class="flex flex-row items-center justify-evenly md:justify-between match"> <div class="flex flex-row items-center justify-evenly md:justify-between match">
<a class="flex items-center" href={l("/")}> <a class="flex items-center" href={l("/")}>
{@render logo?.()} {@render logo?.()}
@@ -148,7 +144,10 @@
:global(.sw-nav) { :global(.sw-nav) {
backdrop-filter: none; backdrop-filter: none;
background: transparent; background: transparent;
transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease; transition:
background 0.3s ease,
backdrop-filter 0.3s ease,
border-color 0.3s ease;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
} }

7
src/components/PostComponent.astro
View File

@@ -28,12 +28,7 @@ const postUrl = l(`/announcements/${post.slug.split("/").slice(1).join("/")}`);
post.data.image != null ? ( post.data.image != null ? (
<a href={postUrl}> <a href={postUrl}>
<div class="flex-shrink-0 pr-2"> <div class="flex-shrink-0 pr-2">
<Image <Image transition:name={post.data.title + "-image"} src={post.data.image} alt="Post Image" class="object-cover h-32 w-32 max-w-none transition-transform hover:scale-105" />
transition:name={post.data.title + "-image"}
src={post.data.image}
alt="Post Image"
class="object-cover h-32 w-32 max-w-none transition-transform hover:scale-105"
/>
</div> </div>
</a> </a>
) : null ) : null

28
src/components/SearchComponent.svelte
View File

@@ -18,12 +18,11 @@
--> -->
<script lang="ts"> <script lang="ts">
import { slide, fade } from "svelte/transition";
import {slide, fade} from "svelte/transition"; import { onMount } from "svelte";
import {onMount} from "svelte"; import { importPagefind, type Pagefind, type PagefindDocument } from "@type/pagefind.js";
import {importPagefind, type Pagefind, type PagefindDocument} from "@type/pagefind.js";
import Card from "@components/Card.svelte"; import Card from "@components/Card.svelte";
import {l} from "@utils/util.ts"; import { l } from "@utils/util.ts";
let pagefind: Pagefind; let pagefind: Pagefind;
onMount(async () => { onMount(async () => {
@@ -36,23 +35,22 @@
async function search(e: KeyboardEvent) { async function search(e: KeyboardEvent) {
if (e.target instanceof HTMLInputElement) { if (e.target instanceof HTMLInputElement) {
let search: {results: any[]} = await pagefind.debouncedSearch(e.target.value); let search: { results: any[] } = await pagefind.debouncedSearch(e.target.value);
results = await Promise.all(search.results.slice(0, 10).map(value => value.data())) results = await Promise.all(search.results.slice(0, 10).map((value) => value.data()));
} }
} }
interface Props { interface Props {
open?: boolean; open?: boolean;
} }
let { open = $bindable(false) }: Props = $props(); let { open = $bindable(false) }: Props = $props();
</script> </script>
<button transition:fade class="fixed top-0 left-0 w-screen h-screen bg-black/60 backdrop-blur-sm z-20 cursor-default" onclick={() => open = false}> <button transition:fade class="fixed top-0 left-0 w-screen h-screen bg-black/60 backdrop-blur-sm z-20 cursor-default" onclick={() => (open = false)}> </button>
</button>
<div transition:slide style="width: min(100%, 75em);" class="fixed top-0 left-1/2 -translate-x-1/2 h-2/3 z-30 p-4 text-white flex flex-col sw-search-panel"> <div transition:slide style="width: min(100%, 75em);" class="fixed top-0 left-1/2 -translate-x-1/2 h-2/3 z-30 p-4 text-white flex flex-col sw-search-panel">
<input placeholder="Search..." onkeypress={search}> <input placeholder="Search..." onkeypress={search} />
<div class="overflow-y-scroll flex-1 w-full mt-2"> <div class="overflow-y-scroll flex-1 w-full mt-2">
{#each results as result} {#each results as result}
@@ -93,4 +91,4 @@
label { label {
color: rgba(163, 163, 163, 0.7); color: rgba(163, 163, 163, 0.7);
} }
</style> </style>

31
src/components/TagComponent.astro
View File

@@ -1,22 +1,31 @@
--- ---
import { l } from "../util/util";
import {l} from "../util/util"; import { capitalize } from "./admin/util";
import {capitalize} from "./admin/util";
interface Props { interface Props {
tag: string; tag: string;
noLink?: boolean; noLink?: boolean;
} }
const {tag, noLink} = Astro.props; const { tag, noLink } = Astro.props;
--- ---
{noLink {
? ( noLink ? (
<span class="inline-block bg-transparent border border-amber-500/30 px-3 py-0.5 text-xs font-semibold text-amber-400 mr-2 uppercase tracking-wider" style="font-family: 'Barlow Condensed', sans-serif;">{capitalize(tag)}</span> <span
) class="inline-block bg-transparent border border-amber-500/30 px-3 py-0.5 text-xs font-semibold text-amber-400 mr-2 uppercase tracking-wider"
: ( style="font-family: 'Barlow Condensed', sans-serif;"
>
{capitalize(tag)}
</span>
) : (
<a href={l(`/announcements/tags/${tag}`)}> <a href={l(`/announcements/tags/${tag}`)}>
<span class="inline-block bg-transparent border border-amber-500/30 px-3 py-0.5 text-xs font-semibold text-amber-400 mr-2 uppercase tracking-wider hover:border-amber-400 hover:text-amber-300 transition-colors" style="font-family: 'Barlow Condensed', sans-serif;">{capitalize(tag)}</span> <span
class="inline-block bg-transparent border border-amber-500/30 px-3 py-0.5 text-xs font-semibold text-amber-400 mr-2 uppercase tracking-wider hover:border-amber-400 hover:text-amber-300 transition-colors"
style="font-family: 'Barlow Condensed', sans-serif;"
>
{capitalize(tag)}
</span>
</a> </a>
)} )
}

5
src/layouts/PageLayout.astro
View File

@@ -10,10 +10,7 @@ const { title, description, wide = false } = Astro.props;
<div class="h-screen w-screen fixed -z-10"> <div class="h-screen w-screen fixed -z-10">
<BackgroundImage /> <BackgroundImage />
</div> </div>
<div <div class="sw-page-content" style={wide ? "width: clamp(80%, 75em, 100%);" : "width: min(100%, 75em);"}>
class="sw-page-content"
style={wide ? "width: clamp(80%, 75em, 100%);" : "width: min(100%, 75em);"}
>
<slot /> <slot />
</div> </div>
</NavbarLayout> </NavbarLayout>

57
src/pages/downloads.astro
View File

@@ -1,31 +1,44 @@
--- ---
import PageLayout from "../layouts/PageLayout.astro"; import PageLayout from "../layouts/PageLayout.astro";
import {getCollection} from "astro:content"; import { getCollection } from "astro:content";
import {t} from "astro-i18n"; import { t } from "astro-i18n";
import {l} from "../util/util"; import { l } from "../util/util";
const downloads = await getCollection("downloads"); const downloads = await getCollection("downloads");
--- ---
<PageLayout title="Downloads"> <PageLayout title="Downloads">
{downloads.map(e => ( {
<div class="pt-6 pb-4" style="border-bottom: 1px solid rgba(255,255,255,0.04);"> downloads.map((e) => (
<h1 class="font-bold text-2xl" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.06em;">{e.data.name}</h1> <div class="pt-6 pb-4" style="border-bottom: 1px solid rgba(255,255,255,0.04);">
<div class="py-3 text-gray-400 text-sm">{t(e.data.description)}</div> <h1 class="font-bold text-2xl" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.06em;">
{e.data.name}
</h1>
<div class="py-3 text-gray-400 text-sm">{t(e.data.description)}</div>
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
{typeof e.data.url === "object" ? {typeof e.data.url === "object" ? (
Object.entries(e.data.url).map(value => ( Object.entries(e.data.url).map((value) => (
<a href={value[1].startsWith("/") ? l(value[1]) : value[1]} <a
class="text-amber-400 hover:text-amber-300 w-fit text-sm" style="border-bottom: 1px solid transparent; transition: border-color 0.2s;">{t(value[0])}</a> href={value[1].startsWith("/") ? l(value[1]) : value[1]}
)) class="text-amber-400 hover:text-amber-300 w-fit text-sm"
: style="border-bottom: 1px solid transparent; transition: border-color 0.2s;"
<a href={e.data.url} class="text-amber-400 hover:text-amber-300 w-fit text-sm">{t("Download")}</a> >
} {t(value[0])}
{e.data.sourceUrl ? </a>
<a class="text-amber-400 hover:text-amber-300 w-fit text-sm" href={e.data.sourceUrl}>Quelle</a> ))
: null} ) : (
<a href={e.data.url} class="text-amber-400 hover:text-amber-300 w-fit text-sm">
{t("Download")}
</a>
)}
{e.data.sourceUrl ? (
<a class="text-amber-400 hover:text-amber-300 w-fit text-sm" href={e.data.sourceUrl}>
Quelle
</a>
) : null}
</div>
</div> </div>
</div> ))
))} }
</PageLayout> </PageLayout>

22
src/pages/help/index.astro
View File

@@ -1,21 +1,23 @@
--- ---
import {getCollection} from "astro:content"; import { getCollection } from "astro:content";
import {astroI18n} from "astro-i18n"; import { astroI18n } from "astro-i18n";
import {l} from "../../util/util"; import { l } from "../../util/util";
import PageLayout from "../../layouts/PageLayout.astro"; import PageLayout from "../../layouts/PageLayout.astro";
let posts = await getCollection("help", entry => entry.id.split("/")[0] === astroI18n.locale); let posts = await getCollection("help", (entry) => entry.id.split("/")[0] === astroI18n.locale);
--- ---
<PageLayout title="Helpcenter"> <PageLayout title="Helpcenter">
<div> <div>
<h1 style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.06em;">Helpcenter</h1> <h1 style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.06em;">Helpcenter</h1>
<h1 class="text-amber-500 text-2xl" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.8rem;">WIP</h1> <h1 class="text-amber-500 text-2xl" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.8rem;">WIP</h1>
{posts.map(value => ( {
<a href={l("/help/" + value.slug)} class="block py-2 text-gray-400 hover:text-amber-400 transition-colors"> posts.map((value) => (
<h2>{value.data.title}</h2> <a href={l("/help/" + value.slug)} class="block py-2 text-gray-400 hover:text-amber-400 transition-colors">
</a> <h2>{value.data.title}</h2>
))} </a>
))
}
</div> </div>
</PageLayout> </PageLayout>
@@ -24,4 +26,4 @@ let posts = await getCollection("help", entry => entry.id.split("/")[0] === astr
margin: 0 auto; margin: 0 auto;
padding: 3.5rem 1rem 2rem; padding: 3.5rem 1rem 2rem;
} }
</style> </style>

38
src/pages/index.astro
View File

@@ -39,7 +39,6 @@ const prefixColors: { [key: string]: string } = {
--- ---
<NavbarLayout title={t("home.page")} description="SteamWar.de Homepage" transparentFooter={false}> <NavbarLayout title={t("home.page")} description="SteamWar.de Homepage" transparentFooter={false}>
<!-- ═══════════ HERO ═══════════ --> <!-- ═══════════ HERO ═══════════ -->
<section class="hero"> <section class="hero">
<div class="hero-bg"> <div class="hero-bg">
@@ -204,13 +203,7 @@ const prefixColors: { [key: string]: string } = {
position: absolute; position: absolute;
inset: 0; inset: 0;
z-index: 2; z-index: 2;
background: linear-gradient( background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0.45) 65%, #080808 100%);
to bottom,
rgba(0, 0, 0, 0.6) 0%,
rgba(0, 0, 0, 0.2) 35%,
rgba(0, 0, 0, 0.45) 65%,
#080808 100%
);
} }
.hero-scanlines { .hero-scanlines {
@@ -218,13 +211,7 @@ const prefixColors: { [key: string]: string } = {
inset: 0; inset: 0;
z-index: 3; z-index: 3;
pointer-events: none; pointer-events: none;
background: repeating-linear-gradient( background: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(0, 0, 0, 0.06) 3px, rgba(0, 0, 0, 0.06) 4px);
0deg,
transparent 0px,
transparent 3px,
rgba(0, 0, 0, 0.06) 3px,
rgba(0, 0, 0, 0.06) 4px
);
} }
.hero-content { .hero-content {
@@ -248,7 +235,9 @@ const prefixColors: { [key: string]: string } = {
} }
@media (min-width: 640px) { @media (min-width: 640px) {
.hero-label { font-size: 0.8rem; } .hero-label {
font-size: 0.8rem;
}
} }
.hero-title { .hero-title {
@@ -314,7 +303,9 @@ const prefixColors: { [key: string]: string } = {
} }
@media (min-width: 640px) { @media (min-width: 640px) {
text-carousel > * { font-size: 1.15rem; } text-carousel > * {
font-size: 1.15rem;
}
} }
/* CTA */ /* CTA */
@@ -331,14 +322,7 @@ const prefixColors: { [key: string]: string } = {
text-transform: uppercase; text-transform: uppercase;
background: rgba(245, 158, 11, 0.04); background: rgba(245, 158, 11, 0.04);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
clip-path: polygon( clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
0 0,
calc(100% - 14px) 0,
100% 14px,
100% 100%,
14px 100%,
0 calc(100% - 14px)
);
transition: all 0.35s ease; transition: all 0.35s ease;
animation: fadeUp 0.6s 1s ease-out both; animation: fadeUp 0.6s 1s ease-out both;
} }
@@ -424,7 +408,9 @@ const prefixColors: { [key: string]: string } = {
border-bottom: none; border-bottom: none;
border-right: 1px solid rgba(255, 255, 255, 0.04); border-right: 1px solid rgba(255, 255, 255, 0.04);
} }
.feat:last-child { border-right: none; } .feat:last-child {
border-right: none;
}
} }
.feat:hover { .feat:hover {

3
src/pages/login.astro
View File

@@ -23,8 +23,7 @@ import BackgroundImage from "../components/BackgroundImage.astro";
<div class="h-screen w-screen fixed -z-10"> <div class="h-screen w-screen fixed -z-10">
<BackgroundImage /> <BackgroundImage />
</div> </div>
<div class="h-screen mx-auto p-8 pt-40 sm:pt-28 md:pt-14 flex flex-col justify-center items-center" <div class="h-screen mx-auto p-8 pt-40 sm:pt-28 md:pt-14 flex flex-col justify-center items-center" style="width: min(100vw, 75em);">
style="width: min(100vw, 75em);">
<LoginComponent client:load /> <LoginComponent client:load />
</div> </div>
</NavbarLayout> </NavbarLayout>

4
src/pages/not-found.astro
View File

@@ -1,6 +1,6 @@
--- ---
import PageLayout from "../layouts/PageLayout.astro"; import PageLayout from "../layouts/PageLayout.astro";
import {t} from "astro-i18n"; import { t } from "astro-i18n";
--- ---
<PageLayout title={t("404.title")}> <PageLayout title={t("404.title")}>
@@ -9,4 +9,4 @@ import {t} from "astro-i18n";
<div style="width: 4rem; height: 2px; background: linear-gradient(90deg, transparent, #f59e0b, transparent); margin: 1.5rem 0;"></div> <div style="width: 4rem; height: 2px; background: linear-gradient(90deg, transparent, #f59e0b, transparent); margin: 1.5rem 0;"></div>
<p style="font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(163, 163, 163, 0.7);">{t("404.description")}</p> <p style="font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(163, 163, 163, 0.7);">{t("404.description")}</p>
</div> </div>
</PageLayout> </PageLayout>

8
src/pages/publics/[...schem].astro
View File

@@ -1,5 +1,5 @@
--- ---
import {createGetStaticPaths} from "astro-i18n"; import { createGetStaticPaths } from "astro-i18n";
import { getCollection, CollectionEntry } from "astro:content"; import { getCollection, CollectionEntry } from "astro:content";
import PageLayout from "../../layouts/PageLayout.astro"; import PageLayout from "../../layouts/PageLayout.astro";
import PublicPreview from "@components/publics/PublicPreview.svelte"; import PublicPreview from "@components/publics/PublicPreview.svelte";
@@ -18,17 +18,17 @@ export const getStaticPaths = createGetStaticPaths(async () => {
})); }));
}); });
const { schem }: { schem: CollectionEntry<"publics">} = Astro.props; const { schem }: { schem: CollectionEntry<"publics"> } = Astro.props;
--- ---
<PageLayout title={schem.data.name}> <PageLayout title={schem.data.name}>
<h1 class="text-5xl font-bold w-fit" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;" transition:name={schem.data.id + "-title"}>{schem.data.name}</h1> <h1 class="text-5xl font-bold w-fit" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;" transition:name={schem.data.id + "-title"}>{schem.data.name}</h1>
<PublicPreview client:idle pub={schem} imageHeight={schem.data.image.height}> <PublicPreview client:idle pub={schem} imageHeight={schem.data.image.height}>
<Image class="object-contain" transition:name={schem.data.id + "-img"} src={schem.data.alt || schem.data.image} alt={schem.data.name}></Image> <Image class="object-contain" transition:name={schem.data.id + "-img"} src={schem.data.alt || schem.data.image} alt={schem.data.name} />
</PublicPreview> </PublicPreview>
<!-- <!--
<p transition:name={schem.data.id + "-desc"}>{schem.data.description}</p> <p transition:name={schem.data.id + "-desc"}>{schem.data.description}</p>
<p> <p>
Erbauer: {schem.data.creator.join(", ")} Erbauer: {schem.data.creator.join(", ")}
</p>--> </p>-->
</PageLayout> </PageLayout>

42
src/pages/publics/[mode].astro
View File

@@ -1,18 +1,18 @@
--- ---
import {createGetStaticPaths} from "astro-i18n"; import { createGetStaticPaths } from "astro-i18n";
import PageLayout from "../../layouts/PageLayout.astro"; import PageLayout from "../../layouts/PageLayout.astro";
import {getCollection} from "astro:content"; import { getCollection } from "astro:content";
import {l} from "../../util/util"; import { l } from "../../util/util";
import { Image } from "astro:assets"; import { Image } from "astro:assets";
import Card from "@components/Card.svelte"; import Card from "@components/Card.svelte";
import XRayPreview from "@components/publics/XRayPreview.svelte"; import XRayPreview from "@components/publics/XRayPreview.svelte";
import {t} from "astro-i18n"; import { t } from "astro-i18n";
const { mode } = Astro.props; const { mode } = Astro.props;
export const getStaticPaths = createGetStaticPaths(async () => { export const getStaticPaths = createGetStaticPaths(async () => {
const gamemodes = await getCollection("modes"); const gamemodes = await getCollection("modes");
return gamemodes.map((entry) => ({ return gamemodes.map((entry) => ({
props: { props: {
mode: entry, mode: entry,
@@ -23,24 +23,28 @@ export const getStaticPaths = createGetStaticPaths(async () => {
})); }));
}); });
const publics = await getCollection("publics", entry => entry.data.gamemode.id == mode.id); const publics = await getCollection("publics", (entry) => entry.data.gamemode.id == mode.id);
--- ---
<PageLayout title="Publics"> <PageLayout title="Publics">
<h1 class="text-4xl font-bold" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;">{t(`${mode.data.translationKey}.title`)}</h1> <h1 class="text-4xl font-bold" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;">{t(`${mode.data.translationKey}.title`)}</h1>
<div class="grid grid-cols-2 gap-2 mt-4"> <div class="grid grid-cols-2 gap-2 mt-4">
{publics.map((pub) => ( {
<a href={l("/publics/" + pub.id)}> publics.map((pub) => (
<Card extraClasses="w-full m-0 border-t-2 border-t-amber-500/30" hoverEffect={false}> <a href={l("/publics/" + pub.id)}>
<div class="flex justify-center"> <Card extraClasses="w-full m-0 border-t-2 border-t-amber-500/30" hoverEffect={false}>
<XRayPreview client:load> <div class="flex justify-center">
<Image style="width: 500px" slot="normal" src={pub.data.image} alt={pub.data.name} transition:name={pub.data.id + "-img"} /> <XRayPreview client:load>
{pub.data.xray && <Image slot="xray" src={pub.data.xray} alt={pub.data.name} />} <Image style="width: 500px" slot="normal" src={pub.data.image} alt={pub.data.name} transition:name={pub.data.id + "-img"} />
</XRayPreview> {pub.data.xray && <Image slot="xray" src={pub.data.xray} alt={pub.data.name} />}
</div> </XRayPreview>
<h2 class="font-bold text-3xl" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;" transition:name={pub.data.id + "-title"}>{pub.data.name}</h2> </div>
</Card> <h2 class="font-bold text-3xl" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;" transition:name={pub.data.id + "-title"}>
</a> {pub.data.name}
))} </h2>
</Card>
</a>
))
}
</div> </div>
</PageLayout> </PageLayout>

18
src/pages/rangliste/[...gamemode].astro
View File

@@ -1,13 +1,13 @@
--- ---
import {createGetStaticPaths, t} from "astro-i18n"; import { createGetStaticPaths, t } from "astro-i18n";
import {getCollection, type CollectionEntry} from "astro:content"; import { getCollection, type CollectionEntry } from "astro:content";
import PageLayout from "../../layouts/PageLayout.astro"; import PageLayout from "../../layouts/PageLayout.astro";
import EloTable from "../../components/EloTable.svelte"; import EloTable from "../../components/EloTable.svelte";
export const getStaticPaths = createGetStaticPaths(async () => { export const getStaticPaths = createGetStaticPaths(async () => {
const modes = await getCollection("modes", entry => entry.data.ranked); const modes = await getCollection("modes", (entry) => entry.data.ranked);
return modes.map(value => ({ return modes.map((value) => ({
props: { props: {
mode: value, mode: value,
}, },
@@ -21,10 +21,10 @@ interface Props {
mode: CollectionEntry<"modes">; mode: CollectionEntry<"modes">;
} }
const {mode} = Astro.props; const { mode } = Astro.props;
--- ---
<PageLayout title={t("ranking.heading", {mode: t(`${mode.data.translationKey}.title`)})}> <PageLayout title={t("ranking.heading", { mode: t(`${mode.data.translationKey}.title`) })}>
<h1 class="text-2xl mb-2" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.06em;">{t("ranking.heading", {mode: t(`${mode.data.translationKey}.title`)})}</h1> <h1 class="text-2xl mb-2" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.06em;">{t("ranking.heading", { mode: t(`${mode.data.translationKey}.title`) })}</h1>
<EloTable gamemode={mode.id} client:load/> <EloTable gamemode={mode.id} client:load />
</PageLayout> </PageLayout>

85
src/pages/regeln/[mode].astro
View File

@@ -1,19 +1,19 @@
--- ---
import {getCollection, type CollectionEntry} from "astro:content"; import { getCollection, type CollectionEntry } from "astro:content";
import {astroI18n, createGetStaticPaths, t} from "astro-i18n"; import { astroI18n, createGetStaticPaths, t } from "astro-i18n";
import PageLayout from "@layouts/PageLayout.astro"; import PageLayout from "@layouts/PageLayout.astro";
import LanguageWarning from "@components/LanguageWarning.astro"; import LanguageWarning from "@components/LanguageWarning.astro";
import EloTable from "@components/EloTable.svelte"; import EloTable from "@components/EloTable.svelte";
import {l} from "../../util/util"; import { l } from "../../util/util";
import { Image } from "astro:assets"; import { Image } from "astro:assets";
export const getStaticPaths = createGetStaticPaths(async () => { export const getStaticPaths = createGetStaticPaths(async () => {
let posts = await getCollection("rules", value => value.id.split("/")[0] === astroI18n.locale); let posts = await getCollection("rules", (value) => value.id.split("/")[0] === astroI18n.locale);
const germanPosts = await getCollection("rules", entry => entry.id.split("/")[0] === astroI18n.fallbackLocale); const germanPosts = await getCollection("rules", (entry) => entry.id.split("/")[0] === astroI18n.fallbackLocale);
germanPosts.forEach(value => { germanPosts.forEach((value) => {
if (posts.find(post => post.id.split("/")[1] === value.id.split("/")[1])) { if (posts.find((post) => post.id.split("/")[1] === value.id.split("/")[1])) {
return; return;
} else { } else {
posts.push(value); posts.push(value);
@@ -27,53 +27,58 @@ export const getStaticPaths = createGetStaticPaths(async () => {
props: { props: {
page, page,
german: page.id.split("/")[0] != astroI18n.locale, german: page.id.split("/")[0] != astroI18n.locale,
mode: modes.find(value => value.id === page.id.split("/")[1].split(".")[0]), mode: modes.find((value) => value.id === page.id.split("/")[1].split(".")[0]),
publics: publics.filter(value => value.data.gamemode.id === page.id.split("/")[1].split(".")[0]), publics: publics.filter((value) => value.data.gamemode.id === page.id.split("/")[1].split(".")[0]),
}, },
params: { params: {
mode: page.slug.split("/")[1], mode: page.slug.split("/")[1],
}, },
}), }));
);
}); });
interface Props { interface Props {
page: CollectionEntry<"rules">, page: CollectionEntry<"rules">;
mode: CollectionEntry<"modes">, mode: CollectionEntry<"modes">;
publics: CollectionEntry<"publics">[], publics: CollectionEntry<"publics">[];
german: boolean german: boolean;
} }
const {page, german, mode, publics} = Astro.props; const { page, german, mode, publics } = Astro.props;
const {Content} = await page.render(); const { Content } = await page.render();
--- ---
<PageLayout title={t("rules.title", {mode: t(`${page.data.translationKey}.title`)})}> <PageLayout title={t("rules.title", { mode: t(`${page.data.translationKey}.title`) })}>
<h1 class="text-3xl font-bold" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;">{t(`${page.data.translationKey}.title`)}</h1> <h1 class="text-3xl font-bold" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;">{t(`${page.data.translationKey}.title`)}</h1>
{mode && mode.data.ranked && ( {
<Fragment> mode && mode.data.ranked && (
<EloTable gamemode={page.id.split("/")[1].split(".")[0]} client:load topFive={true}/> <Fragment>
<a class="text-amber-400 hover:text-amber-300 transition-colors text-sm" href={l(`/rangliste/${page.id.split("/")[1].split(".")[0]}`)}>{t("rules.ranking")}</a> <EloTable gamemode={page.id.split("/")[1].split(".")[0]} client:load topFive={true} />
</Fragment> <a class="text-amber-400 hover:text-amber-300 transition-colors text-sm" href={l(`/rangliste/${page.id.split("/")[1].split(".")[0]}`)}>
)} {t("rules.ranking")}
{publics && publics.length != 0 && ( </a>
<Fragment> </Fragment>
<div class="flex overflow-x-scroll gap-2 py-4"> )
{publics.map(value => ( }
<a href={l(`/publics/${value.id}`)} style="display: contents"> {
<Image src={value.data.image} alt={value.data.name} height={300} width={300}></Image> publics && publics.length != 0 && (
</a> <Fragment>
))} <div class="flex overflow-x-scroll gap-2 py-4">
</div> {publics.map((value) => (
<a class="text-amber-400 hover:text-amber-300 transition-colors text-sm" href={l(`/publics/${page.id.split("/")[1].split(".")[0]}`)}>{t("rules.publics")}</a> <a href={l(`/publics/${value.id}`)} style="display: contents">
</Fragment> <Image src={value.data.image} alt={value.data.name} height={300} width={300} />
)} </a>
))}
</div>
<a class="text-amber-400 hover:text-amber-300 transition-colors text-sm" href={l(`/publics/${page.id.split("/")[1].split(".")[0]}`)}>
{t("rules.publics")}
</a>
</Fragment>
)
}
<article> <article>
{german && ( {german && <LanguageWarning />}
<LanguageWarning/> <Content />
)}
<Content/>
</article> </article>
</PageLayout> </PageLayout>

71
src/pages/regeln/index.astro
View File

@@ -1,48 +1,61 @@
--- ---
import {t} from "astro-i18n"; import { t } from "astro-i18n";
import {getCollection, type CollectionEntry} from "astro:content"; import { getCollection, type CollectionEntry } from "astro:content";
import PageLayout from "@layouts/PageLayout.astro"; import PageLayout from "@layouts/PageLayout.astro";
import {Image} from "astro:assets"; import { Image } from "astro:assets";
import {l} from "@utils/util"; import { l } from "@utils/util";
const imageMap = { const imageMap = {
"wg": await getRandomFromMode("wargear"), wg: await getRandomFromMode("wargear"),
"mwg": await getRandomFromMode("miniwargear"), mwg: await getRandomFromMode("miniwargear"),
"as": await getRandomFromMode("airship"), as: await getRandomFromMode("airship"),
"ws": await getRandomFromMode("warship"), ws: await getRandomFromMode("warship"),
"qg": await getRandomFromMode("quickgear"), qg: await getRandomFromMode("quickgear"),
}; };
async function getRandomFromMode(mode: "wargear" | "airship" | "megawargear" | "microwargear" | "miniwargear" | "quickgear" | "streetfight" | "warship"): Promise<CollectionEntry<"publics">> { async function getRandomFromMode(mode: "wargear" | "airship" | "megawargear" | "microwargear" | "miniwargear" | "quickgear" | "streetfight" | "warship"): Promise<CollectionEntry<"publics">> {
const publics = await getCollection("publics", entry => entry.data.gamemode.id === mode); const publics = await getCollection("publics", (entry) => entry.data.gamemode.id === mode);
return publics[Math.floor(Math.random() * publics.length)]; return publics[Math.floor(Math.random() * publics.length)];
} }
const modes = await getCollection("modes", entry => entry.data.main); const modes = await getCollection("modes", (entry) => entry.data.main);
--- ---
<PageLayout title={t("rules.page")}> <PageLayout title={t("rules.page")}>
{modes.map(value => ( {
<div class="sw-mode-card"> modes.map((value) => (
<a href={l(`/publics/${imageMap[value.data.translationKey].id}`)}> <div class="sw-mode-card">
<Image height="200" width="200" src={imageMap[value.data.translationKey].data.image} <a href={l(`/publics/${imageMap[value.data.translationKey].id}`)}>
alt={t("rules." + value.data.translationKey + ".title")} class="h-full aspect-square max-w-fit"></Image> <Image
</a> height="200"
<div class="ml-4"> width="200"
<a href={l(`/rules/${value.id}`)}> src={imageMap[value.data.translationKey].data.image}
<h1 class="text-2xl font-bold" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;">{t(value.data.translationKey + ".title")}</h1> alt={t("rules." + value.data.translationKey + ".title")}
<div class="text-gray-400 text-sm mt-1">{t("rules." + value.data.translationKey + ".description")}</div> class="h-full aspect-square max-w-fit"
/>
</a> </a>
<div class="mt-2 flex flex-col gap-0.5"> <div class="ml-4">
<a href={l(`/publics/${value.id}`)} class="text-amber-400 hover:text-amber-300 w-fit text-sm transition-colors">{t("rules.publics")}</a> <a href={l(`/rules/${value.id}`)}>
{value.data.ranked <h1 class="text-2xl font-bold" style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.04em;">
? <a href={l(`/ranked/${value.id}`)} {t(value.data.translationKey + ".title")}
class="text-amber-400 hover:text-amber-300 w-fit text-sm transition-colors">{t("rules.ranking")}</a> </h1>
: null} <div class="text-gray-400 text-sm mt-1">{t("rules." + value.data.translationKey + ".description")}</div>
</a>
<div class="mt-2 flex flex-col gap-0.5">
<a href={l(`/publics/${value.id}`)} class="text-amber-400 hover:text-amber-300 w-fit text-sm transition-colors">
{t("rules.publics")}
</a>
{value.data.ranked ? (
<a href={l(`/ranked/${value.id}`)} class="text-amber-400 hover:text-amber-300 w-fit text-sm transition-colors">
{t("rules.ranking")}
</a>
) : null}
</div>
</div> </div>
</div> </div>
</div>))} ))
}
<a href={l("/rangliste/MissileWars")} class="text-amber-400 hover:text-amber-300 transition-colors">MissileWars Rangliste</a> <a href={l("/rangliste/MissileWars")} class="text-amber-400 hover:text-amber-300 transition-colors">MissileWars Rangliste</a>
</PageLayout> </PageLayout>
@@ -67,4 +80,4 @@ const modes = await getCollection("modes", entry => entry.data.main);
flex-direction: row; flex-direction: row;
} }
} }
</style> </style>

6
src/pages/statistiken/fight.astro
View File

@@ -1,10 +1,10 @@
--- ---
import PageLayout from "../../layouts/PageLayout.astro"; import PageLayout from "../../layouts/PageLayout.astro";
import FightStatistics from "../../components/FightStatistics.svelte"; import FightStatistics from "../../components/FightStatistics.svelte";
import {t} from "astro-i18n"; import { t } from "astro-i18n";
--- ---
<PageLayout title={t("stats.title")}> <PageLayout title={t("stats.title")}>
<h1 style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.06em;">{t("stats.title")}</h1> <h1 style="font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.06em;">{t("stats.title")}</h1>
<FightStatistics client:only="svelte"/> <FightStatistics client:only="svelte" />
</PageLayout> </PageLayout>