117 lines
4.6 KiB
Plaintext
117 lines
4.6 KiB
Plaintext
---
|
|
import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
|
|
import Scroll from '@app/website/index/Scroll.svelte';
|
|
import Teams from '@app/website/index/Teams.svelte';
|
|
import Countdown from '@app/website/index/Countdown.svelte';
|
|
import Varo from '@assets/img/varo.webp';
|
|
import Background from '@assets/img/background.webp';
|
|
import { START_DATE, YOUTUBE_INTRO_LINK } from 'astro:env/server';
|
|
import { getSetting, SettingKey } from '@util/settings';
|
|
import { db } from '@db/database.ts';
|
|
|
|
const teams = await db.getTeams({});
|
|
const deaths = await db.getDeaths({});
|
|
|
|
const signupEnabled = await getSetting(db, SettingKey.SignupEnabled, false);
|
|
const signupInfoMessage = await getSetting(db, SettingKey.SignupInfoMessage);
|
|
|
|
const information = [
|
|
{
|
|
title: 'Was ist Varo?',
|
|
description:
|
|
'Varo ist ein spannendes Vanilla-Minecraft-PvP-Projekt, bei dem Zweier-Teams im Kampf ums Überleben gegeneinander antreten. Wer stirbt - ganz gleich auf welche Weise - scheidet endgültig aus. Das letzte verbleibende Team gewinnt Varo!'
|
|
},
|
|
{
|
|
title: 'Warum Varo?',
|
|
description:
|
|
'Varo 5 ist unser erstes großes Sommerprojekt - ein PvP-Format, das für frische Abwechslung sorgt und die Wartezeit auf das nächste CraftAttack verkürzt.\n' +
|
|
'Tatsächlich ist es schon das fünfte Varo - auch wenn das viele überraschen dürfte.\n' +
|
|
'Zum ersten Mal veranstalten wir es jedoch in dieser offenen Form für alle Teilnehmenden.\n' +
|
|
'Wenn es euch gefällt, könnte Varo künftig als feste Sommerreihe weitergeführt werden.\n' +
|
|
'Und natürlich gilt: Im Winter sehen wir uns wie gewohnt bei CraftAttack wieder!'
|
|
},
|
|
{
|
|
title: 'Wer kann mitspielen?',
|
|
description:
|
|
'Alle Spieler mit einem Minecraft Java-Account sind herzlich eingeladen, mitzumachen. Wenn du dabei sein willst, brauchst du nur einen Teampartner - gemeinsam könnt ihr euch direkt hier auf unserer Website anmelden.'
|
|
}
|
|
];
|
|
---
|
|
|
|
<WebsiteLayout title="Varo 5">
|
|
<div class="bg-base-200 flex flex-col min-h-screen relative">
|
|
<div class="flex items-center xl:w-1/2 px-6 sm:px-10 min-h-screen h-full">
|
|
<div class="flex flex-col w-full xl:h-3/4 my-10">
|
|
<div class="flex flex-col w-full mt-2 lg:mt-5 lg:w-10/12 h-full">
|
|
<div class="w-2/3 m-auto">
|
|
<img src={Varo.src} alt="Varo 5" />
|
|
</div>
|
|
<div>
|
|
<div class="divider"></div>
|
|
<div class="flex flex-col md:flex-row xl:flex-col gap-5">
|
|
{
|
|
information.map((info) => (
|
|
<div>
|
|
<h4 class="mb-1 font-bold">{info.title}</h4>
|
|
<p>{info.description}</p>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|
|
<div class="divider"></div>
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<a class="btn btn-outline btn-accent hover:bg-white" href="signup"
|
|
>{signupEnabled ? 'Jetzt registrieren' : 'Infos zur Anmeldung'}</a
|
|
>
|
|
</div>
|
|
{signupInfoMessage && <span class="text-center text-xs text-base-content/80 mt-3">{signupInfoMessage}</span>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="hidden xl:block absolute top-0 left-0 h-full w-full"
|
|
style="clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);"
|
|
>
|
|
<img src={Background.src} alt="" loading="lazy" width="100%" height="100%" />
|
|
</div>
|
|
<div class="hidden xl:flex justify-center absolute bottom-12 right-0 w-[60%]">
|
|
<Countdown end={Date.parse(START_DATE)} client:load />
|
|
</div>
|
|
</div>
|
|
|
|
{
|
|
YOUTUBE_INTRO_LINK && (
|
|
<div class="bg-base-300 w-full py-12 flex justify-center">
|
|
<iframe
|
|
width="624"
|
|
height="351"
|
|
src={YOUTUBE_INTRO_LINK}
|
|
title="YouTube video player"
|
|
frameborder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
referrerpolicy="strict-origin-when-cross-origin"
|
|
allowfullscreen
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
<div class="fixed bottom-0 sm:right-0 m-5 hidden sm:block">
|
|
<Scroll href="#teams" client:load />
|
|
</div>
|
|
|
|
<div class="bg-base-100 flex flex-col space-y-10 items-center py-10">
|
|
<h2 id="teams" class="text-4xl mb-10">Teams</h2>
|
|
{
|
|
signupEnabled && (
|
|
<p class="text-sm text-center mb-2 mx-1">
|
|
Bei unvollständigen Teams muss sich der zweite Mitspieler noch registrieren. Unvollständige Teams werden bei
|
|
Anmeldeschluss gelöscht.
|
|
</p>
|
|
)
|
|
}
|
|
<Teams {teams} {deaths} />
|
|
</div>
|
|
</WebsiteLayout>
|