This commit is contained in:
2024-08-15 16:38:50 +02:00
parent 4afd833276
commit 22f24e92c3
19 changed files with 148 additions and 69 deletions

View File

@@ -35,11 +35,11 @@ const latestPost = posts.sort((a, b) => dayjs(b.data.created).unix() - dayjs(a.d
const prefixColorMap: {
[key: string]: string;
} = {
PREFIX_ADMIN: "border-red-600 dark:border-red-800 shadow-red-600 dark:shadow-red-800",
PREFIX_DEVELOPER: "border-sky-600 dark:border-sky-800 shadow-sky-600 dark:shadow-sky-800",
PREFIX_MODERATOR: "border-amber-600 dark:border-amber-800 shadow-amber-600 dark:shadow-amber-800",
PREFIX_SUPPORTER: "border-blue-700 dark:border-blue-900 shadow-blue-700 dark:shadow-blue-900",
PREFIX_BUILDER: "border-green-500 dark:border-green-700 shadow-green-500 dark:shadow-green-700",
Admin: "border-red-600 dark:border-red-800 shadow-red-600 dark:shadow-red-800",
Dev: "border-sky-600 dark:border-sky-800 shadow-sky-600 dark:shadow-sky-800",
Mod: "border-amber-600 dark:border-amber-800 shadow-amber-600 dark:shadow-amber-800",
Sup: "border-blue-700 dark:border-blue-900 shadow-blue-700 dark:shadow-blue-900",
Arch: "border-green-500 dark:border-green-700 shadow-green-500 dark:shadow-green-700",
};
---
@@ -164,7 +164,7 @@ const prefixColorMap: {
<Fragment>
{players.map((v, index) => (
<div class="inline-flex flex-col justify-end">
{index == 0 ? <h2 class="dark:text-white text-4xl font-bold text-center md:text-left md:pl-4">{t("home.prefix." + prefix.replace("PREFIX_", "").toLowerCase())}</h2> : null}
{index == 0 ? <h2 class="dark:text-white text-4xl font-bold text-center md:text-left md:pl-4">{t("home.prefix." + prefix)}</h2> : null}
<Card extraClasses={`pt-8 pb-10 px-8 w-fit shadow-md ${prefixColorMap[prefix]}`} client:idle>
<figure class="flex flex-col items-center" style="width: 150px">
<figcaption class="text-center mb-4 text-2xl">{v.name}</figcaption>

View File

@@ -26,8 +26,9 @@ const { schem }: { schem: CollectionEntry<"publics">} = Astro.props;
<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>
</PublicPreview>
<!--
<p transition:name={schem.data.id + "-desc"}>{schem.data.description}</p>
<p>
Erbauer: {schem.data.creator.join(", ")}
</p>
</p>-->
</PageLayout>

View File

@@ -39,7 +39,6 @@ const publics = await getCollection("publics", entry => entry.data.gamemode.id =
</XRayPreview>
</div>
<h2 class="font-bold text-3xl" transition:name={pub.data.id + "-title"}>{pub.data.name}</h2>
<h3 transition:name={pub.data.id + "-desc"}>{pub.data.description}</h3>
</Card>
</a>
))}

View File

@@ -1,8 +1,11 @@
---
import {getCollection, CollectionEntry} from "astro:content";
import {getCollection, type CollectionEntry} from "astro:content";
import {astroI18n, createGetStaticPaths, t} from "astro-i18n";
import PageLayout from "@layouts/PageLayout.astro";
import LanguageWarning from "@components/LanguageWarning.astro";
import EloTable from "@components/EloTable.svelte";
import {l} from "../../util/util";
import { Image } from "astro:assets";
export const getStaticPaths = createGetStaticPaths(async () => {
let posts = await getCollection("rules", value => value.id.split("/")[0] === astroI18n.locale);
@@ -17,21 +20,55 @@ export const getStaticPaths = createGetStaticPaths(async () => {
}
});
const modes = await getCollection("modes");
const publics = await getCollection("publics");
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,
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]),
},
params: {
mode: page.slug.split("/")[1],
},
}),
);
});
interface Props {
page: CollectionEntry<"rules">,
mode: CollectionEntry<"modes">,
publics: CollectionEntry<"publics">[],
german: boolean
}
const {page, german} = Astro.props;
const {page, german, mode, publics} = Astro.props;
const {Content} = await page.render();
---
<PageLayout title={t("rules.title", {mode: t(`${page.data.translationKey}.title`)})}>
<h1 class="text-3xl font-bold">{t(`${page.data.translationKey}.title`)}</h1>
{mode && mode.data.ranked && (
<Fragment>
<EloTable gamemode={page.id.split("/")[1].split(".")[0]} client:load/>
<a class="text-neutral-800 dark:text-neutral-400 hover:underline" href={l(`/rangliste/${page.id.split("/")[1].split(".")[0]}`)}>{t("rules.ranking")}</a>
</Fragment>
)}
{publics && (
<Fragment>
<div class="flex overflow-x-scroll">
{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} class="drop-shadow"></Image>
</a>
))}
</div>
<a class="text-neutral-800 dark:text-neutral-400 hover:underline" href={l(`/publics/${page.id.split("/")[1].split(".")[0]}`)}>{t("rules.publics")}</a>
</Fragment>
)}
<article>
{german && (
<LanguageWarning/>

View File

@@ -1,14 +1,9 @@
---
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";
import {getCollection, type CollectionEntry} from "astro:content";
import PageLayout from "@layouts/PageLayout.astro";
import {Image} from "astro:assets";
import {l} from "../../util/util";
import {ImageMetadata} from "astro";
import {l} from "@utils/util";
const imageMap = {
"wg": await getRandomFromMode("wargear"),
@@ -18,10 +13,10 @@ const imageMap = {
"qg": await getRandomFromMode("quickgear"),
};
async function getRandomFromMode(mode: "wargear" | "airship" | "megawargear" | "microwargear" | "miniwargear" | "quickgear" | "streetfight" | "warship"): Promise<ImageMetadata> {
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);
return publics[Math.floor(Math.random() * publics.length)].data.image;
return publics[Math.floor(Math.random() * publics.length)];
}
const modes = await getCollection("modes", entry => entry.data.main);
@@ -31,16 +26,16 @@ 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("rules." + value.data.translationKey + ".title")}></Image>
<a href={l(`/publics/${imageMap[value.data.translationKey].id}`)}>
<Image height="200" width="200" src={imageMap[value.data.translationKey].data.image}
alt={t("rules." + value.data.translationKey + ".title")} class="h-full aspect-square max-w-fit"></Image>
</a>
<div class="ml-4">
<h1 class="text-2xl font-bold">{t(value.data.translationKey + ".title")}</h1>
<div>{t("rules." + 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.rules")}</a>
<a href={l(`/publics/${value.id}`)} class="text-yellow-300 hover:underline w-fit">{t("rules.publics")}</a>
<a href={l(`/announcements/tags/${value.id}`)}
class="text-yellow-300 hover:underline w-fit">{t("rules.announcements")}</a>
{value.data.ranked
? <a href={l(`/ranked/${value.id}`)}
class="text-yellow-300 hover:underline w-fit">{t("rules.ranking")}</a>