SteamWar/Website
8
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Code Cleanup™

Browse Source
This commit is contained in:
Chaoscaot
2024-02-11 11:16:23 +01:00
parent 4b27eb76fe
commit 9fd8ddb9bd
62 changed files with 663 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/pages/[...slug].astro
View File

@ -17,31 +17,31 @@ export const getStaticPaths = createGetStaticPaths(async () => {
return posts.map((page) => ({
props: {
page
page,
},
params: {
slug: fixLink(page.slug)
}
slug: fixLink(page.slug),
},
}));
});
const { page } = Astro.props;
const { Content } = await page.render();
const {page} = Astro.props;
const {Content} = await page.render();
---
<PageLayout title={page.data.title}>
<article>
{page.data.german && (
<LanguageWarning />
<LanguageWarning/>
)}
<h1 class="text-left">{page.data.title}</h1>
<Content />
<Content/>
</article>
</PageLayout>
<style is:global>
article {
>* {
> * {
all: revert;
}

2
src/pages/admin/index.astro
View File

@ -4,5 +4,5 @@ import Basic from "../../layouts/Basic.astro";
---
<Basic>
<App client:only="svelte" />
<App client:only="svelte"/>
</Basic>

49
src/pages/announcements/[...slug].astro
View File

@ -5,7 +5,7 @@ import PageLayout from "@layouts/PageLayout.astro";
import {TagSolid, CalendarMonthSolid} from "flowbite-svelte-icons";
import TagComponent from "@components/TagComponent.astro";
import LanguageWarning from "@components/LanguageWarning.astro";
import { SEO } from "astro-seo";
import {SEO} from "astro-seo";
import localBau from "@images/2022-03-28_13.18.25.png";
import {getImage, Image} from "astro:assets";
@ -24,12 +24,12 @@ export const getStaticPaths = createGetStaticPaths(async () => {
return posts.map(value => ({
params: {
slug: value.slug.split("/").slice(1).join("/")
slug: value.slug.split("/").slice(1).join("/"),
},
props: {
post: value,
german: value.id.split("/")[0] != astroI18n.locale
}
german: value.id.split("/")[0] != astroI18n.locale,
},
}));
});
@ -39,7 +39,7 @@ interface Props {
}
const {post, german} = Astro.props;
const { Content } = await post.render();
const {Content} = await post.render();
const ogImage = await getImage({
src: post.data.image || localBau,
@ -47,7 +47,6 @@ const ogImage = await getImage({
width: 1200,
height: 630,
});
---
<PageLayout title={post.data.title} description={post.data.description}>
@ -71,24 +70,29 @@ const ogImage = await getImage({
<div class={"relative w-full " + (post.data.image ? "aspect-video" : "")}>
{post.data.image && (
<div class="absolute top-0 left-0 w-full aspect-video flex justify-center">
<Image src={post.data.image} height="1080" alt="" class="rounded-2xl linear-fade object-contain h-full" />
<Image src={post.data.image} height="1080" alt=""
class="rounded-2xl linear-fade object-contain h-full"/>
</div>
)}
<div class={post.data.image ? "absolute bottom-8 left-2" : "mb-4"}>
<h1 class="text-4xl mb-0">{post.data.title}</h1>
<h5 class="flex items-center mt-2 text-neutral-300"><TagSolid class="w-4 h-4 mr-2" /> {post.data.tags.map(tag => (
<TagComponent tag={tag} />
))} <CalendarMonthSolid class="w-4 h-4 mr-2" /> {Intl.DateTimeFormat(astroI18n.locale, {
day: "numeric",
month: "short",
year: "numeric"
}).format(post.data.created)} </h5>
<h5 class="flex items-center mt-2 text-neutral-300">
<TagSolid class="w-4 h-4 mr-2"/>
{post.data.tags.map(tag => (
<TagComponent tag={tag}/>
))}
<CalendarMonthSolid class="w-4 h-4 mr-2"/>
{Intl.DateTimeFormat(astroI18n.locale, {
day: "numeric",
month: "short",
year: "numeric",
}).format(post.data.created)} </h5>
</div>
</div>
{german && (
<LanguageWarning />
<LanguageWarning/>
)}
<Content />
<Content/>
<script>
import FightTable from "@components/FightTable.svelte";
// @ts-expect-error Import Schenanigans
@ -96,6 +100,7 @@ const ogImage = await getImage({
import GroupTable from "@components/GroupTable.svelte";
import {eventRepo} from "../../components/repo/event";
import type {ExtendedEvent} from "@type/event";
const eventMounts: Map<string, ((ev: ExtendedEvent) => void)[]> = new Map();
class FightTableElement extends HTMLElement {
@ -111,8 +116,8 @@ const ogImage = await getImage({
event: ev,
group: this.dataset["group"],
rows: !isNaN(rows) ? rows : 1,
}
});
},
});
});
}
}
@ -130,8 +135,8 @@ const ogImage = await getImage({
event: ev,
group: this.dataset["group"],
rows: !isNaN(rows) ? rows : 1,
}
});
},
});
});
}
}
@ -160,7 +165,7 @@ const ogImage = await getImage({
display: contents;
}
>* {
> * {
all: revert;
}
@ -176,6 +181,6 @@ const ogImage = await getImage({
<style>
.linear-fade {
mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,0));
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}
</style>

8
src/pages/announcements/index.astro
View File

@ -1,5 +1,5 @@
---
import { getCollection } from "astro:content";
import {getCollection} from "astro:content";
import PageLayout from "../../layouts/PageLayout.astro";
import {astroI18n, t} from "astro-i18n";
import PostComponent from "../../components/PostComponent.astro";
@ -22,14 +22,14 @@ async function getPosts() {
}
const posts = await getPosts();
---
<PageLayout title={t("blog.title")}>
{posts.map((post, index) => (
<div>
<PostComponent post={post} />
{index !== posts.length - 1 && <hr/>}
<PostComponent post={post}/>
{index !== posts.length - 1 &&
<hr/>}
</div>
))}
</PageLayout>

17
src/pages/announcements/tags/[tag].astro
View File

@ -36,28 +36,29 @@ export const getStaticPaths = createGetStaticPaths(async () => {
return Object.keys(groupedByTags).map(tag => ({
params: {
tag: tag
tag: tag,
},
props: {
posts: groupedByTags[tag],
tag: tag
}
tag: tag,
},
}));
});
interface Props {
posts: CollectionEntry<"announcements">[]
tag: string
posts: CollectionEntry<"announcements">[];
tag: string;
}
const { posts, tag } = Astro.props;
const {posts, tag} = Astro.props;
---
<PageLayout title={t("tag.title", {tag: capitalize(tag)})}>
{posts.map((post, index) => (
<div>
<PostComponent post={post} />
{index !== posts.length - 1 && <hr/>}
<PostComponent post={post}/>
{index !== posts.length - 1 &&
<hr/>}
</div>
))}
</PageLayout>

3
src/pages/dashboard.astro
View File

@ -7,11 +7,12 @@ import {t} from "astro-i18n";
<PageLayout title={t("dashboard.page")}>
<script>
import {l} from "../util/util";
if (window.location.href.endsWith("/dashboard") || window.location.href.endsWith("/dashboard/")) {
if ((localStorage.getItem("sw-session") ?? "") === "") {
window.location.href = l("/login");
}
}
</script>
<Dashboard client:only="svelte" />
<Dashboard client:only="svelte"/>
</PageLayout>

9
src/pages/downloads.astro
View File

@ -10,18 +10,21 @@ const downloads = await getCollection("downloads");
<PageLayout title="Downloads">
{downloads.map(e => (
<div class="pt-4">
<h1 class="font-bold text-6xl">{e.data.name}</h1>
<h1 class="font-bold text-2xl">{e.data.name}</h1>
<div class="py-4">{t(e.data.description)}</div>
<div class="flex flex-col">
{typeof e.data.url === "object" ?
Object.entries(e.data.url).map(value => (
<a href={value[1].startsWith("/") ? l(value[1]) : value[1]} class="text-blue-500 hover:underline w-fit">{t(value[0])}</a>
<a href={value[1].startsWith("/") ? l(value[1]) : value[1]}
class="text-blue-500 hover:underline w-fit">{t(value[0])}</a>
))
:
<a href={e.data.url} class="text-blue-500 hover:underline w-fit">{t("Download")}</a>
}
{e.data.sourceUrl ? <a class="text-blue-500 hover:underline w-fit" href={e.data.sourceUrl}>Quelle</a> : null}
{e.data.sourceUrl ?
<a class="text-blue-500 hover:underline w-fit" href={e.data.sourceUrl}>Quelle</a>
: null}
</div>
</div>
))}

14
src/pages/help/[...slug].astro
View File

@ -1,5 +1,5 @@
---
import { getCollection } from "astro:content";
import {getCollection} from "astro:content";
import NavbarLayout from "../../layouts/NavbarLayout.astro";
import {astroI18n, createGetStaticPaths} from "astro-i18n";
@ -7,24 +7,24 @@ export const getStaticPaths = createGetStaticPaths(async () => {
let posts = await getCollection("help");
return posts.filter(value => value.id.split("/")[0] === astroI18n.locale).map((page) => ({
props: { page }, params: { slug: page.slug }
}) );
props: {page}, params: {slug: page.slug},
}));
});
const { page } = Astro.props;
const { Content } = await page.render();
const {page} = Astro.props;
const {Content} = await page.render();
---
<NavbarLayout title={page.data.title}>
<article>
<h1 class="text-left">{page.data.title}</h1>
<Content />
<Content/>
</article>
</NavbarLayout>
<style is:global>
article {
>* {
> * {
all: revert;
}

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

@ -22,6 +22,6 @@ let posts = await getCollection("help", entry => entry.id.split("/")[0] === astr
<style>
div {
@apply mx-auto bg-gray-100 px-4 py-8 rounded-b-md shadow-md pt-40 sm:pt-28 md:pt-14
dark:text-white dark:bg-neutral-900;
dark:text-white dark:bg-neutral-900;
}
</style>

171
src/pages/index.astro
View File

@ -1,7 +1,7 @@
---
import NavbarLayout from "@layouts/NavbarLayout.astro";
import { Image } from "astro:assets";
import {Image} from "astro:assets";
import localBau from "@images/2023-10-08_20.43.43.png";
import {CaretRight, Archive, Rocket, Bell} from "@astropub/icons";
import {t} from "astro-i18n";
@ -35,95 +35,105 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
}
return arr;
}
---
<NavbarLayout title={t("home.page")} description="SteamWar.de Homepage">
<div class="w-full h-screen relative mb-4">
<Image src={localBau} alt="Bau" width="1920" height="1080" densities={[1.5, 2, 3, 4]} class="w-full object-cover rounded-b-2xl shadow-2xl dark:brightness-75" style="height: calc(100vh + 1rem)" draggable="false" />
<Image src={localBau} alt="Bau" width="1920" height="1080" densities={[1.5, 2, 3, 4]}
class="w-full object-cover rounded-b-2xl shadow-2xl dark:brightness-75"
style="height: calc(100vh + 1rem)" draggable="false"/>
<drop-in class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
<h1 class="text-4xl sm:text-6xl md:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow" style="transition: transform .7s ease-out, opacity .7s linear; text-shadow: 2px 2px 5px black;">
<span class="text-yellow-400">{t("home.title.first")}</span><span class="text-neutral-600">{t("home.title.second")}</span>
<h1 class="text-4xl sm:text-6xl md:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow"
style="transition: transform .7s ease-out, opacity .7s linear; text-shadow: 2px 2px 5px black;">
<span class="text-yellow-400">{t("home.title.first")}</span><span
class="text-neutral-600">{t("home.title.second")}</span>
</h1>
<text-carousel class="h-20 w-full relative select-none">
<h2 class="-translate-y-16">{t("home.subtitle.1")}</h2>
<h2>{t("home.subtitle.2")}<PlayerCount client:only="svelte" /></h2>
<h2>{t("home.subtitle.2")}
<PlayerCount client:only="svelte"/>
</h2>
<h2>{t("home.subtitle.3")}</h2>
</text-carousel>
<a href={l("join")} class="btn mt-32 px-8 flex opacity-0 -translate-y-16" style="transition: transform .3s ease-out, opacity .3s linear">{t("home.join")} <CaretRight width="24" heigth="24" /></a>
<a href={l("join")} class="btn mt-32 px-8 flex opacity-0 -translate-y-16"
style="transition: transform .3s ease-out, opacity .3s linear">{t("home.join")}
<CaretRight width="24" heigth="24"/>
</a>
<script>
class TextCarousel extends HTMLElement {
current = 0;
class TextCarousel extends HTMLElement {
current = 0;
connectedCallback() {
this._current.classList.add("!opacity-100");
connectedCallback() {
this._current.classList.add("!opacity-100");
for (let i = 0; i < this.children.length; i++) {
if (i !== this.current) {
this.children[i].classList.add("translate-y-8");
for (let i = 0; i < this.children.length; i++) {
if (i !== this.current) {
this.children[i].classList.add("translate-y-8");
}
}
setInterval(() => {
this.next();
}, 5000);
}
get _current() {
return this.children[this.current];
}
next() {
this._current.classList.remove("!opacity-100");
this._current.classList.add("translate-y-8");
this._current.classList.remove("!delay-500");
this.current = (this.current + 1) % this.children.length;
this._current.classList.add("!opacity-100");
this._current.classList.remove("translate-y-8");
this._current.classList.add("!delay-500");
}
}
}
setInterval(() => {
this.next();
}, 5000);
}
get _current() {
return this.children[this.current];
}
next() {
this._current.classList.remove("!opacity-100");
this._current.classList.add("translate-y-8");
this._current.classList.remove("!delay-500");
this.current = (this.current + 1) % this.children.length;
this._current.classList.add("!opacity-100");
this._current.classList.remove("translate-y-8");
this._current.classList.add("!delay-500");
}
}
class DropIn extends HTMLElement {
connectedCallback() {
for (let child of this.children) {
if(child.classList.contains("opacity-0")) {
child.classList.remove("opacity-0");
child.classList.remove("-translate-y-16");
} else {
child.children[0].classList.remove("opacity-0");
child.children[0].classList.remove("-translate-y-16");
class DropIn extends HTMLElement {
connectedCallback() {
for (let child of this.children) {
if (child.classList.contains("opacity-0")) {
child.classList.remove("opacity-0");
child.classList.remove("-translate-y-16");
} else {
child.children[0].classList.remove("opacity-0");
child.children[0].classList.remove("-translate-y-16");
}
}
}
}
}
}
}
customElements.define("text-carousel", TextCarousel);
customElements.define("drop-in", DropIn);
customElements.define("text-carousel", TextCarousel);
customElements.define("drop-in", DropIn);
</script>
</drop-in>
</div>
<section class="w-full flex flex-col items-center justify-center shadow-2xl rounded-b-2xl pb-8">
<div class="py-10 flex flex-col lg:flex-row">
<div class="card">
<Archive heigth="64" width="64" />
<Archive heigth="64" width="64"/>
<h1>{t("home.benefits.historic.title")}</h1>
<p>{t("home.benefits.historic.description.1")}</p>
<p>{t("home.benefits.historic.description.2")}</p>
</div>
<div class="card">
<Rocket heigth="64" width="64" />
<Rocket heigth="64" width="64"/>
<h1>{t("home.benefits.server.title")}</h1>
<p>{t("home.benefits.server.description")}</p>
</div>
<div class="card">
<Bell heigth="64" width="64" />
<Bell heigth="64" width="64"/>
<h1>{t("home.benefits.events.title")}</h1>
<p>{t("home.benefits.events.description.1")}</p>
<p>{t("home.benefits.events.description.2")}</p>
</div>
</div>
<a class="btn px-8 flex" href={l("/about")}>{t("home.benefits.read")}<CaretRight width="24" heigth="24" /></a>
<a class="btn px-8 flex" href={l("/about")}>{t("home.benefits.read")}
<CaretRight width="24" heigth="24"/>
</a>
</section>
<section class="w-full py-12">
{mapMap(groupedTeamMember, (key, value) => (
@ -136,7 +146,9 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
dark:bg-neutral-900 dark:border-gray-800 dark:text-white">
<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" />
<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>
</div>
))}
@ -147,30 +159,33 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
</NavbarLayout>
<style>
text-carousel{
>* {
@apply absolute top-0 left-0 w-full text-xl sm:text-4xl italic text-white text-center opacity-0;
transition: transform .5s ease-out, opacity .5s linear;
text-shadow: 2px 2px 5px black;
}
}
text-carousel {
> * {
@apply absolute top-0 left-0 w-full text-xl sm:text-4xl italic text-white text-center opacity-0;
transition: transform .5s ease-out, opacity .5s linear;
text-shadow: 2px 2px 5px black;
}
}
.barlow {
font-family: Barlow Condensed, serif;
}
.barlow {
font-family: Barlow Condensed, serif;
}
.card {
@apply w-72 border-2 bg-zinc-50 border-gray-100 flex flex-col items-center p-8 m-4 rounded-xl shadow-lg transition-transform duration-300 ease-in-out
dark:bg-zinc-900 dark:border-gray-800 dark:text-gray-100
hover:scale-105;
>h1 {
@apply text-xl font-bold mt-4;
}
>p {
@apply mt-4;
}
>svg {
@apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl
}
}
.card {
@apply w-72 border-2 bg-zinc-50 border-gray-100 flex flex-col items-center p-8 m-4 rounded-xl shadow-lg transition-transform duration-300 ease-in-out
dark:bg-zinc-900 dark:border-gray-800 dark:text-gray-100
hover:scale-105;
> h1 {
@apply text-xl font-bold mt-4;
}
> p {
@apply mt-4;
}
> svg {
@apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl
}
}
</style>

6
src/pages/login.astro
View File

@ -9,15 +9,17 @@ import localBau from "@images/2023-10-08_20.43.43.png";
<NavbarLayout title={t("login.page")}>
<script>
import {l} from "../util/util";
if (window.location.href.endsWith("/login") || window.location.href.endsWith("/login/")) {
if ((localStorage.getItem("sw-session") ?? "") !== "") {
window.location.href = l("/dashboard");
}
}
</script>
<Image src={localBau} alt="Bau" width="1920" height="1080" class="w-screen h-screen dark:brightness-75 fixed -z-10 object-cover" draggable="false" />
<Image src={localBau} alt="Bau" width="1920" height="1080"
class="w-screen h-screen dark:brightness-75 fixed -z-10 object-cover" draggable="false"/>
<div class="h-screen mx-auto p-8 rounded-b-md pt-40 sm:pt-28 md:pt-14 flex flex-col justify-center items-center
dark:text-white " style="width: min(100vw, 75em);">
<Login client:load />
<Login client:load/>
</div>
</NavbarLayout>

14
src/pages/ranked/[...gamemode].astro
View File

@ -9,22 +9,22 @@ export const getStaticPaths = createGetStaticPaths(async () => {
return modes.map(value => ({
props: {
mode: value
mode: value,
},
params: {
gamemode: value.id
}
gamemode: value.id,
},
}));
});
interface Props {
mode: CollectionEntry<"modes">
mode: CollectionEntry<"modes">;
}
const { mode } = Astro.props;
const {mode} = Astro.props;
---
<PageLayout title={t("elo.title", {mode: t(`${mode.data.translationKey}.title`)})}>
<h1 class="text-2xl mb-2">{t("ranking.heading", { mode: t(`${mode.data.translationKey}.title`) })}</h1>
<EloTable gamemode={mode.id} client:only="svelte" />
<h1 class="text-2xl mb-2">{t("ranking.heading", {mode: t(`${mode.data.translationKey}.title`)})}</h1>
<EloTable gamemode={mode.id} client:only="svelte"/>
</PageLayout>

12
src/pages/rules/[mode].astro
View File

@ -18,7 +18,7 @@ export const getStaticPaths = createGetStaticPaths(async () => {
});
return posts.map((page) => ({
props: { page, german: page.id.split("/")[0] != astroI18n.locale }, params: { mode: page.slug.split("/")[1] }
props: {page, german: page.id.split("/")[0] != astroI18n.locale}, params: {mode: page.slug.split("/")[1]},
}));
});
@ -27,16 +27,16 @@ interface Props {
german: boolean
}
const { page, german } = Astro.props;
const { Content } = await page.render();
const {page, german} = Astro.props;
const {Content} = await page.render();
---
<PageLayout title={t("title", {mode: t(`${page.data.translationKey}.title`)}, {route: "/rules"})}>
<article>
{german && (
<LanguageWarning />
<LanguageWarning/>
)}
<Content />
<Content/>
</article>
<script>
@ -57,7 +57,7 @@ const { Content } = await page.render();
<style is:global>
article {
>* {
> * {
all: revert;
}

13
src/pages/rules/index.astro
View File

@ -14,7 +14,7 @@ const imageMap = {
"mwg": mwg,
"as": as,
"ws": ws,
"qg": mwg
"qg": mwg,
};
const modes = await getCollection("modes", entry => entry.data.main);
@ -24,14 +24,19 @@ const modes = await getCollection("modes", entry => entry.data.main);
{modes.map(value => (
<div class="dark:bg-neutral-800 rounded-md p-4 border border-neutral-400 shadow-md my-4 flex flex-col
md:flex-row">
<Image height="300" width="300" src={imageMap[value.data.translationKey]} alt={t(value.data.translationKey + ".title")} class="dark:invert"></Image>
<Image height="300" width="300" src={imageMap[value.data.translationKey]}
alt={t(value.data.translationKey + ".title")} class="dark:invert"></Image>
<div class="ml-4">
<h1 class="text-2xl font-bold">{t(value.data.translationKey + ".title")}</h1>
<div>{t(value.data.translationKey + ".description")}</div>
<div class="mt-2 flex flex-col">
<a href={l(`/rules/${value.id}`)} class="text-yellow-300 hover:underline w-fit">{t("rules")}</a>
<a href={l(`/announcements/tags/${value.id}`)} class="text-yellow-300 hover:underline w-fit">{t("announcements")}</a>
{value.data.ranked ? <a href={l(`/ranked/${value.id}`)} class="text-yellow-300 hover:underline w-fit">{t("ranking")}</a> : null}
<a href={l(`/announcements/tags/${value.id}`)}
class="text-yellow-300 hover:underline w-fit">{t("announcements")}</a>
{value.data.ranked
? <a href={l(`/ranked/${value.id}`)}
class="text-yellow-300 hover:underline w-fit">{t("ranking")}</a>
: null}
</div>
</div>
</div>))}

3
src/pages/stats/fight.astro
View File

@ -1,10 +1,9 @@
---
import PageLayout from "../../layouts/PageLayout.astro";
import FightStatistics from "../../components/FightStatistics.svelte";
import {t} from "astro-i18n";
---
<PageLayout title={t("stats.title")}>
<FightStatistics client:only="svelte" />
<FightStatistics client:only="svelte"/>
</PageLayout>