<script lang="ts">
	import ImageFrame from '$lib/components/ImageFrame.svelte';
	import Confetti from '$lib/components/confetti.svelte';
	import { onMount } from 'svelte';

	export let data;

	let last_name: string | null = '';

	const items = data.data
		.map((item) => {
			return {
				...item,
				y: -5 + Math.random() * 10,
				x: -5 + Math.random() * 10,
				scale: 0.9 + Math.random() * 0.15,
				rot: `${-0.5 + Math.random() * 1}deg`,
				marginTop: 50 + Math.random() * 30
			};
		})
		.reverse();
	onMount(() => {
		last_name = localStorage.getItem('last-name');
	});
</script>

<svelte:head>
	<title>Dungeon Hall & Gallerie</title>
</svelte:head>

<div class="wrapper">
	<h1>Gallerie der Gäste</h1>
	<div class="grid">
		{#each items as item}
			<div
				style="--x: {item.x}%; --y: {item.y}%; --scale: {item.scale}; --rot:{item.rot}; margin-top: {item.marginTop}px"
				class="item"
				class:active={item.noble_name === last_name}
			>
				<ImageFrame src={item.portrait} loading="lazy" />
				<p>{item.noble_name}</p>
			</div>
		{/each}
	</div>
</div>

<Confetti />

<style>
	.grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
		padding-bottom: 100px;
		justify-content: center;
	}

	.item {
		width: 90%;
		margin: 0 auto;
	}

	h1 {
		font-size: 5rem;
		font-family: Parisienne, cursive;
		color: white;
		text-align: center;
		font-weight: 200;
	}

	p {
		color: white;
		font-family: Parisienne, cursive;
		font-size: 1.5em;
		margin-left: 40px;
		width: 80%;
		margin-top: 10px;
	}

	.item {
		transform: scale(var(--scale)) rotate(var(--rot)) translate(var(--x), var(--y));
	}

	.active {
		filter: drop-shadow(0px 0px 40px #be8630aa);
		animation: glow 5s infinite alternate;
	}

	@keyframes glow {
		from {
			filter: drop-shadow(0px 0px 10px #be8630ff);
		}
		to {
			filter: drop-shadow(0px 0px 40px #be86305c);
		}
	}

	:global(html) {
		background-image: url(/pattern.jpg) !important;
		backdrop-filter: brightness(0.5) !important;
		background-size: 25%;
	}
	.wrapper {
		max-width: 1300px;
		width: 80%;
		margin: 0 auto;
	}
</style>
