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

Add EsLint

Browse Source
This commit is contained in:
Chaoscaot
2023-12-23 15:36:22 +01:00
parent 5a5cce199b
commit 8fcab610fb
22 changed files with 2215 additions and 468 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
---
import {getCollection} from 'astro:content'
import {astroI18n, createGetStaticPaths, t} from "astro-i18n";
import {getCollection} from "astro:content";
import {astroI18n, createGetStaticPaths} from "astro-i18n";
import PageLayout from "../layouts/PageLayout.astro";
import LanguageWarning from "../components/LanguageWarning.astro";
@ -22,14 +22,13 @@ export const getStaticPaths = createGetStaticPaths(async () => {
params: {
slug: fixLink(page.slug)
}
}) )
})
}));
});
const { page } = Astro.props;
const { Content } = await page.render();
---
<PageLayout title={page.data.title}>
<article>
{page.data.german && (

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

@ -1,5 +1,5 @@
---
import App from '../../components/admin/App.svelte'
import App from "../../components/admin/App.svelte";
import Basic from "../../layouts/Basic.astro";
---

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

@ -1,23 +1,23 @@
---
import {astroI18n, createGetStaticPaths, t} from "astro-i18n";
import {astroI18n, createGetStaticPaths} from "astro-i18n";
import {getCollection, CollectionEntry} from "astro:content";
import PageLayout from "../../layouts/PageLayout.astro";
import {TagSolid, CalendarMonthSolid} from "flowbite-svelte-icons"
import {TagSolid, CalendarMonthSolid} from "flowbite-svelte-icons";
import TagComponent from "../../components/TagComponent.astro";
import LanguageWarning from "../../components/LanguageWarning.astro";
export const getStaticPaths = createGetStaticPaths(async () => {
const posts = await getCollection('announcements', entry => entry.id.split('/')[0] === astroI18n.locale);
const posts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.locale);
const germanPosts = await getCollection('announcements', entry => entry.id.split('/')[0] === 'de');
const germanPosts = await getCollection("announcements", entry => entry.id.split("/")[0] === "de");
germanPosts.forEach(value => {
if (posts.find(post => post.data.key === value.data.key)) {
return
return;
} else {
posts.push(value)
posts.push(value);
}
})
});
return posts.map(value => ({
params: {
@ -25,13 +25,13 @@ export const getStaticPaths = createGetStaticPaths(async () => {
},
props: {
post: value,
german: value.id.split('/')[0] != astroI18n.locale
german: value.id.split("/")[0] != astroI18n.locale
}
}))
})
}));
});
interface Props {
post: CollectionEntry<'announcements'>,
post: CollectionEntry<"announcements">,
german: boolean
}
@ -43,14 +43,14 @@ const { Content } = await post.render();
<article>
<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} />
<TagComponent tag={tag} />
))} <CalendarMonthSolid class="w-4 h-4 mr-2" /> {Intl.DateTimeFormat(astroI18n.locale, {
day: 'numeric',
month: 'short',
year: 'numeric'
day: "numeric",
month: "short",
year: "numeric"
}).format(post.data.created)} </h5>
{german && (
<LanguageWarning />
<LanguageWarning />
)}
<Content />
<script>
@ -64,56 +64,56 @@ const { Content } = await post.render();
class FightTableElement extends HTMLElement {
connectedCallback(): void {
if (!eventMounts.has(this.dataset['event'])) {
eventMounts.set(this.dataset['event'], [])
if (!eventMounts.has(this.dataset["event"])) {
eventMounts.set(this.dataset["event"], []);
}
const rows = Number.parseInt(this.dataset['rows']);
eventMounts.get(this.dataset['event']).push(ev => {
const rows = Number.parseInt(this.dataset["rows"]);
eventMounts.get(this.dataset["event"]).push(ev => {
new FightTable({
target: this,
props: {
event: ev,
group: this.dataset['group'],
group: this.dataset["group"],
rows: !isNaN(rows) ? rows : 1,
}
})
})
});
});
}
}
class GroupTableElement extends HTMLElement {
connectedCallback(): void {
if (!eventMounts.has(this.dataset['event'])) {
eventMounts.set(this.dataset['event'], [])
if (!eventMounts.has(this.dataset["event"])) {
eventMounts.set(this.dataset["event"], []);
}
const rows = Number.parseInt(this.dataset['rows']);
eventMounts.get(this.dataset['event']).push(ev => {
const rows = Number.parseInt(this.dataset["rows"]);
eventMounts.get(this.dataset["event"]).push(ev => {
new GroupTable({
target: this,
props: {
event: ev,
group: this.dataset['group'],
group: this.dataset["group"],
rows: !isNaN(rows) ? rows : 1,
}
})
})
});
});
}
}
customElements.define('fight-table', FightTableElement);
customElements.define('group-table', GroupTableElement);
customElements.define("fight-table", FightTableElement);
customElements.define("group-table", GroupTableElement);
function mountEvent() {
for (const key of eventMounts.keys()) {
get(eventRepo).getEvent(key).then(ev => {
for (const mount of eventMounts.get(key)) {
mount(ev)
mount(ev);
}
})
});
}
}
mountEvent()
mountEvent();
</script>
</article>
</PageLayout>

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

@ -1,22 +1,22 @@
---
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";
import dayjs from "dayjs";
async function getPosts() {
const posts = await getCollection('announcements', entry => entry.id.split('/')[0] === astroI18n.locale);
const posts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.locale);
const germanPosts = await getCollection('announcements', entry => entry.id.split('/')[0] === 'de');
const germanPosts = await getCollection("announcements", entry => entry.id.split("/")[0] === "de");
germanPosts.forEach(value => {
if (posts.find(post => post.data.key === value.data.key)) {
return
return;
} else {
posts.push(value)
posts.push(value);
}
})
});
return posts.sort((a, b) => dayjs(b.data.created).unix() - dayjs(a.data.created).unix()).filter((value, index) => index < 20);
}

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

@ -8,31 +8,31 @@ import PostComponent from "../../../components/PostComponent.astro";
import dayjs from "dayjs";
export const getStaticPaths = createGetStaticPaths(async () => {
let posts = (await getCollection('announcements', entry => entry.id.split("/")[0] === astroI18n.locale));
let posts = (await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.locale));
const germanPosts = await getCollection('announcements', entry => entry.id.split('/')[0] === 'de');
const germanPosts = await getCollection("announcements", entry => entry.id.split("/")[0] === "de");
posts.sort((a, b) => dayjs(b.data.created).unix() - dayjs(a.data.created).unix());
germanPosts.forEach(value => {
if (posts.find(post => post.data.key === value.data.key)) {
return
return;
} else {
posts.push(value)
posts.push(value);
}
})
});
posts = posts.filter((value, index) => index < 20)
posts = posts.filter((value, index) => index < 20);
let groupedByTags: Record<string, CollectionEntry<'announcements'>[]> = {}
let groupedByTags: Record<string, CollectionEntry<"announcements">[]> = {};
posts.forEach(post => {
post.data.tags.forEach(tag => {
if (!groupedByTags[tag]) {
groupedByTags[tag] = []
groupedByTags[tag] = [];
}
groupedByTags[tag].push(post)
})
})
groupedByTags[tag].push(post);
});
});
return Object.keys(groupedByTags).map(tag => ({
params: {
@ -42,11 +42,11 @@ export const getStaticPaths = createGetStaticPaths(async () => {
posts: groupedByTags[tag],
tag: tag
}
}))
})
}));
});
interface Props {
posts: CollectionEntry<'announcements'>[]
posts: CollectionEntry<"announcements">[]
tag: string
}

2
src/pages/dashboard.astro
View File

@ -1,7 +1,5 @@
---
import Dashboard from "../components/Dashboard.svelte";
import {AES} from "crypto-js";
import {l} from "../util/util";
import PageLayout from "../layouts/PageLayout.astro";
import {t} from "astro-i18n";
---

6
src/pages/downloads.astro
View File

@ -14,11 +14,11 @@ const downloads = await getCollection("downloads");
<div class="py-4">{t(e.data.description)}</div>
<div class="flex flex-col">
{typeof e.data.url === 'object' ?
{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}

7
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";
@ -8,14 +8,13 @@ export const getStaticPaths = createGetStaticPaths(async () => {
return posts.filter(value => value.id.split("/")[0] === astroI18n.locale).map((page) => ({
props: { page }, params: { slug: page.slug }
}) )
})
}) );
});
const { page } = Astro.props;
const { Content } = await page.render();
---
<NavbarLayout title={page.data.title}>
<article>
<h1 class="text-left">{page.data.title}</h1>

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

@ -2,7 +2,6 @@
import {getCollection} from "astro:content";
import {astroI18n} from "astro-i18n";
import NavbarLayout from "../../layouts/NavbarLayout.astro";
import {l} from "../../util/util";
import PageLayout from "../../layouts/PageLayout.astro";
let posts = await getCollection("help", entry => entry.id.split("/")[0] === astroI18n.locale);
@ -13,9 +12,9 @@ let posts = await getCollection("help", entry => entry.id.split("/")[0] === astr
<h1>Helpcenter</h1>
<h1 class="text-red-700 text-4xl">WIP!</h1>
{posts.map(value => (
<a href={l("/help/" + value.slug)}>
<h2>{value.data.title}</h2>
</a>
<a href={l("/help/" + value.slug)}>
<h2>{value.data.title}</h2>
</a>
))}
</div>
</PageLayout>

221
src/pages/index.astro
View File

@ -3,146 +3,147 @@ import NavbarLayout from "../layouts/NavbarLayout.astro";
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 {CaretRight, Archive, Rocket, Bell} from "@astropub/icons";
import {t} from "astro-i18n";
import {l} from "../util/util"
import {l} from "../util/util";
import PlayerCount from "../components/PlayerCount.svelte";
import "../../public/fonts/barlow-condensed/barlow-condensed.css"
import "../../public/fonts/barlow-condensed/barlow-condensed.css";
import type {Player} from "../components/types/data";
const teamMember = await fetch("http://localhost:1337/data/team").then(value => value.json())
const teamMember = await fetch("http://localhost:1337/data/team").then(value => value.json());
function groupByGroup(array) {
const groups = new Map<string, any>();
const groups = new Map<string, Player[]>();
for (let user of array) {
if (groups.has(user.prefix)) {
groups.get(user.prefix).push(user)
} else {
groups.set(user.prefix, [user])
}
}
for (let user of array) {
if (groups.has(user.prefix)) {
groups.get(user.prefix).push(user);
} else {
groups.set(user.prefix, [user]);
}
}
return groups
return groups;
}
const groupedTeamMember = groupByGroup(teamMember)
const groupedTeamMember = groupByGroup(teamMember);
function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
const arr = []
for (let [key, value] of i) {
arr.push(fn(key, value))
}
return arr
const arr = [];
for (let [key, value] of i) {
arr.push(fn(key, value));
}
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" />
<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>
<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.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>
<script>
<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" />
<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>
<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.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>
<script>
class TextCarousel extends HTMLElement {
current = 0;
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)
}
setInterval(() => {
this.next();
}, 5000);
}
get _current() {
return this.children[this.current]
}
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")
}
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")
}
}
}
}
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);
</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" />
<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" />
<h1>{t("home.benefits.server.title")}</h1>
<p>{t("home.benefits.server.description")}</p>
</div>
<div class="card">
<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>
</section>
<section class="w-full py-12">
{mapMap(groupedTeamMember, (key, value) => (
<div class="flex items-center flex-col">
<h2 class="dark:text-white text-4xl font-bold">{t("home.prefix." + key)}</h2>
<div class="flex my-4 md:flex-row flex-col flex-wrap justify-center">
{value.map(v => (
<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
</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" />
<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" />
<h1>{t("home.benefits.server.title")}</h1>
<p>{t("home.benefits.server.description")}</p>
</div>
<div class="card">
<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>
</section>
<section class="w-full py-12">
{mapMap(groupedTeamMember, (key, value) => (
<div class="flex items-center flex-col">
<h2 class="dark:text-white text-4xl font-bold">{t("home.prefix." + key)}</h2>
<div class="flex my-4 md:flex-row flex-col flex-wrap justify-center">
{value.map(v => (
<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 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>
</div>
))}
</div>
</div>
))}
</section>
<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>
</div>
))}
</div>
</div>
))}
</section>
</NavbarLayout>
<style>

1
src/pages/login.astro
View File

@ -1,5 +1,4 @@
---
import {l} from "../util/util";
import Login from "../components/Login.svelte";
import NavbarLayout from "../layouts/NavbarLayout.astro";
import {t} from "astro-i18n";

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

@ -14,7 +14,7 @@ export const getStaticPaths = createGetStaticPaths(async () => {
params: {
gamemode: value.id
}
}))
}));
});
interface Props {
@ -24,7 +24,6 @@ interface 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" />

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

@ -1,5 +1,5 @@
---
import {getCollection, CollectionEntry} from 'astro:content'
import {getCollection, CollectionEntry} from "astro:content";
import {astroI18n, createGetStaticPaths, t} from "astro-i18n";
import PageLayout from "../../layouts/PageLayout.astro";
import LanguageWarning from "../../components/LanguageWarning.astro";
@ -7,20 +7,20 @@ import LanguageWarning from "../../components/LanguageWarning.astro";
export const getStaticPaths = createGetStaticPaths(async () => {
let posts = await getCollection("rules", value => value.id.split("/")[0] === astroI18n.locale);
const germanPosts = await getCollection('rules', entry => entry.id.split('/')[0] === 'de');
const germanPosts = await getCollection("rules", entry => entry.id.split("/")[0] === "de");
germanPosts.forEach(value => {
if (posts.find(post => post.id.split("/")[1] === value.id.split("/")[1])) {
return
return;
} else {
posts.push(value)
posts.push(value);
}
})
});
return posts.map((page) => ({
props: { page, german: page.id.split("/")[0] != astroI18n.locale }, params: { mode: page.slug.split("/")[1] }
}))
})
}));
});
interface Props {
page: CollectionEntry<"rules">,
@ -31,7 +31,6 @@ const { page, german } = Astro.props;
const { Content } = await page.render();
---
<PageLayout title={t("title", {mode: t(`${page.data.translationKey}.title`, {}, {route: "/rules"})}, {route: "/rules"})}>
<article>
{german && (

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

@ -1,9 +1,8 @@
---
import wg from "../../images/WarGears.png"
import mwg from "../../images/MiniWarGears.png"
import as from "../../images/AirShips.png"
import ws from "../../images/WarShips.png"
import wg from "../../images/WarGears.png";
import mwg from "../../images/MiniWarGears.png";
import as from "../../images/AirShips.png";
import ws from "../../images/WarShips.png";
import {t} from "astro-i18n";
import {getCollection} from "astro:content";
import PageLayout from "../../layouts/PageLayout.astro";
@ -16,24 +15,24 @@ const imageMap = {
"as": as,
"ws": ws,
"qg": mwg
}
};
const modes = await getCollection("modes", entry => entry.data.main)
const modes = await getCollection("modes", entry => entry.data.main);
---
<PageLayout title={t("page")}>
{modes.map(value => (
<div class="dark:bg-neutral-800 rounded-md p-4 border border-neutral-400 shadow-md my-4 flex flex-col
<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>
<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}
</div>
<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}
</div>
</div>))}
</div>
</div>))}
</PageLayout>