225 lines
9.4 KiB
Plaintext
225 lines
9.4 KiB
Plaintext
---
|
|
import dayjs from "dayjs";
|
|
import NavbarLayout from "@layouts/NavbarLayout.astro";
|
|
import { getCollection } from "astro:content";
|
|
import { astroI18n } from "astro-i18n";
|
|
|
|
import { Image } from "astro:assets";
|
|
import Card from "@components/Card.svelte";
|
|
import { CaretRight, Pause, Rocket, Crosshair1 } from "@astropub/icons";
|
|
import { t } from "astro-i18n";
|
|
import { l } from "@utils/util";
|
|
import PlayerCount from "@components/PlayerCount.svelte";
|
|
import "../../public/fonts/barlow-condensed/barlow-condensed.css";
|
|
import { type Player } from "../components/types/data";
|
|
import PostComponent from "../components/PostComponent.astro";
|
|
import BackgroundImage from "../components/BackgroundImage.astro";
|
|
|
|
const teamMember: { [key: string]: Player[] } = await fetch(import.meta.env.PUBLIC_API_SERVER + "/data/team").then((value) => value.json());
|
|
|
|
const posts = await getCollection("announcements", (entry) => entry.id.split("/")[0] === astroI18n.locale);
|
|
|
|
const germanPosts = await getCollection("announcements", (entry) => entry.id.split("/")[0] === astroI18n.fallbackLocale);
|
|
|
|
germanPosts.forEach((value) => {
|
|
if (posts.find((post) => post.data.key === value.data.key)) {
|
|
return;
|
|
} else {
|
|
posts.push(value);
|
|
}
|
|
});
|
|
|
|
const latestPost = posts.sort((a, b) => dayjs(b.data.created).unix() - dayjs(a.data.created).unix()).at(0);
|
|
|
|
const prefixColorMap: {
|
|
[key: string]: string;
|
|
} = {
|
|
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",
|
|
};
|
|
---
|
|
|
|
<NavbarLayout title={t("home.page")} description="SteamWar.de Homepage" transparentFooter={false}>
|
|
<div class="w-full h-screen relative mb-4 z-10">
|
|
<div style="height: calc(100vh + 1rem)">
|
|
<BackgroundImage />
|
|
</div>
|
|
<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 tracking-wider"
|
|
style="transition: transform .7s ease-out, opacity .7s linear; filter: drop-shadow(2px 2px 5px black);"
|
|
>
|
|
<span class="bg-gradient-to-tr from-yellow-400 to-yellow-300 bg-clip-text text-transparent">{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:idle />
|
|
</h2>
|
|
<h2>{t("home.subtitle.3")}</h2>
|
|
</text-carousel>
|
|
<a href={l("join")} class="btn btn-ghost mt-32 px-8 flex" style="animation: normal flyIn forwards 1.2s ease-out"
|
|
>{t("home.join")}
|
|
<CaretRight width="24" height="24" />
|
|
</a>
|
|
<style>
|
|
@keyframes flyIn {
|
|
0% {
|
|
translate: 0 16px;
|
|
opacity: 0;
|
|
}
|
|
|
|
20% {
|
|
translate: 0 16px;
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
translate: 0;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
class TextCarousel extends HTMLElement {
|
|
current = 0;
|
|
|
|
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");
|
|
}
|
|
}
|
|
|
|
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");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define("text-carousel", TextCarousel);
|
|
customElements.define("drop-in", DropIn);
|
|
</script>
|
|
</drop-in>
|
|
<div class="absolute left-1/2 bottom-6 -translate-x-1/2">
|
|
<PostComponent post={latestPost} slim={true} />
|
|
</div>
|
|
</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">
|
|
<Card client:idle>
|
|
<Crosshair1 height="64" width="64" />
|
|
<h1>{t("home.benefits.fights.title")}</h1>
|
|
<p class="mt-4">{t("home.benefits.fights.description.1")}</p>
|
|
<p class="mt-4">{t("home.benefits.fights.description.2")}</p>
|
|
</Card>
|
|
<Card client:idle>
|
|
<Rocket height="64" width="64" />
|
|
<h1>{t("home.benefits.bau.title")}</h1>
|
|
<p class="mt-4">{t("home.benefits.bau.description")}</p>
|
|
</Card>
|
|
<Card client:idle>
|
|
<Pause height="64" width="64" />
|
|
<h1>{t("home.benefits.minigames.title")}</h1>
|
|
<p class="mt-4">{t("home.benefits.minigames.description.1")}</p>
|
|
<p class="mt-4">{t("home.benefits.minigames.description.2")}</p>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
<section class="w-full py-12 flex flex-wrap justify-center">
|
|
{
|
|
Object.entries(teamMember).map(([prefix, players]) => (
|
|
<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)}</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>
|
|
<Image
|
|
src={`${import.meta.env.PUBLIC_API_SERVER}/data/skin/${v.uuid}`}
|
|
class="transition duration-300 ease-in-out hover:scale-110 hover:backdrop-blur-lg hover:drop-shadow-2xl"
|
|
alt={v.name + "s bust"}
|
|
width="150"
|
|
height="150"
|
|
/>
|
|
</figure>
|
|
</Card>
|
|
</div>
|
|
))}
|
|
</Fragment>
|
|
))
|
|
}
|
|
</section>
|
|
</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 0.5s ease-out,
|
|
opacity 0.5s linear;
|
|
text-shadow: 2px 2px 5px black;
|
|
}
|
|
}
|
|
|
|
.barlow {
|
|
font-family:
|
|
Barlow Condensed,
|
|
sans-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;
|
|
}
|
|
}
|
|
</style>
|