---
import NavbarLayout from "../layouts/NavbarLayout.astro";

import { Image } from "astro:assets";
import localBau from "../images/2022-03-28_13.18.25.png";
import {l, t} from "astro-i18n";
import {CaretRight} from "@astropub/icons"
---

<NavbarLayout title="SteamWar.de - Home">
	<div class="w-screen h-screen relative mb-4">
		<Image src={localBau} alt="Bau" width="1920" height="1080" class="w-screen object-cover rounded-b-2xl shadow-2xl" 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-2xl sm: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">{t("home.title")}</h1>
			<text-carousel class="h-20 w-full relative select-none">
				<h2 class="-translate-y-16">{t("home.subtitle.1")}<player-count /></h2>
				<h2>{t("home.subtitle.2")}</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;

					constructor() {
						super();
					}

					connectedCallback() {
						this.children[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)
					}

					next() {
						this.children[this.current].classList.remove("!opacity-100")
						this.children[this.current].classList.add("translate-y-8")
						this.children[this.current].classList.remove("!delay-500")
						this.current = (this.current + 1) % this.children.length
						this.children[this.current].classList.add("!opacity-100")
						this.children[this.current].classList.remove("translate-y-8")
						this.children[this.current].classList.add("!delay-500")
					}
				}

				class PlayerCount extends HTMLElement {
					constructor() {
						super();
					}

					connectedCallback() {
						this.innerText = String(Math.floor(Math.random() * 100))
					}
				}

				class DropIn extends HTMLElement {
					constructor() {
						super();
					}

					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("player-count", PlayerCount);
				customElements.define("text-carousel", TextCarousel);
				customElements.define("drop-in", DropIn);
			</script>
		</drop-in>
	</div>
	<h2>HELLO!</h2>
</NavbarLayout>

<style>
	@import url("/fonts/barlow-condensed/barlow-condensed.css");

	text-carousel{
		>* {
			@apply absolute top-0 left-0 w-full text-xl sm:text-4xl underline 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;
	}
</style>