From 40232189a0314a72c4cb516bef4b6306ef24fd10 Mon Sep 17 00:00:00 2001
From: Max <jim-x@web.de>
Date: Tue, 31 Oct 2023 15:55:18 +0100
Subject: [PATCH] feat: only show eintreten in beginning

---
 src/lib/components/button.svelte   |  8 +++-
 src/lib/components/confetti.svelte |  2 +-
 src/lib/components/mask.svelte     |  2 +
 src/routes/+page.svelte            | 72 ++++++++++++++++++++++++------
 4 files changed, 68 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/button.svelte b/src/lib/components/button.svelte
index b4eb613..5595dbe 100644
--- a/src/lib/components/button.svelte
+++ b/src/lib/components/button.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
 </script>
 
-<button>
+<button on:click={() => dispatch('click')}>
 	<slot />
 </button>
 
@@ -18,11 +21,12 @@
 		border-style: solid;
 		border-width: 30px;
 		border-image: url(/border.png);
+		border-color: transparent;
 		border-image-repeat: stretch;
 		border-image-slice: 24% 23%;
 		transition: border-image-slice 0.3s ease, filter 0.3s ease;
 		will-change: contents;
-		transform: translateZ(0);
+		transform: translateZ(1px);
 	}
 
 	button:hover {
diff --git a/src/lib/components/confetti.svelte b/src/lib/components/confetti.svelte
index ecb948d..a7d32a3 100644
--- a/src/lib/components/confetti.svelte
+++ b/src/lib/components/confetti.svelte
@@ -31,6 +31,6 @@
 	onMount(async () => {
 		setTimeout(() => {
 			frame();
-		}, 5000);
+		}, 0);
 	});
 </script>
diff --git a/src/lib/components/mask.svelte b/src/lib/components/mask.svelte
index 3498826..91c92d9 100644
--- a/src/lib/components/mask.svelte
+++ b/src/lib/components/mask.svelte
@@ -31,6 +31,8 @@
 	.wrapper > div > :global(svg) {
 		overflow: visible;
 		max-width: 100%;
+		will-change: contents;
+		transform: translateZ(1px);
 	}
 
 	.wrapper > div :global(path) {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3cf57a6..b03c908 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,31 +3,67 @@
 	import Confetti from '$lib/components/confetti.svelte';
 	import Mask from '$lib/components/mask.svelte';
 	import Maskenball from '$lib/components/maskenball.svelte';
+	import { onMount } from 'svelte';
+	let curtainsIn = false;
+	let curtainsOut = false;
+
+	onMount(() => {
+		setTimeout(() => {
+			curtainsIn = true;
+		}, 2000);
+	});
 </script>
 
-<div class="background">
+<div class="background {curtainsIn ? 'curtains-in' : ''} {curtainsOut ? 'curtains-out' : ''}">
 	<div class="drapery" />
 	<img alt="curtain left" class="curtain-right" src="/curtain.png" />
 	<img alt="curtain right" class="curtain-left" src="/curtain.png" />
 </div>
 <Confetti />
 <div class="mask-anim">
-	<Mask />
+	<!-- <Mask /> -->
 </div>
-<Maskenball />
+<!-- <Maskenball /> -->
 <div class="center">
-	<Button>Eintreten</Button>
+	<Button on:click={() => (curtainsOut = true)}>Enter the Dungeon</Button>
 </div>
 
 <style>
 	.background {
 		opacity: 0.9;
+		transition: transform 2s ease;
+		transform: scale(1);
+		top: 0px;
+		position: absolute;
+		width: 100vw;
 	}
+
+	.background.curtains-out {
+		transform: scale(4) translateY(-100vh);
+	}
+
 	.center {
-		display: flex;
+		display: grid;
 		justify-content: center;
-		margin-top: 50px;
+		position: absolute;
+		height: 100vh;
+		width: 100vw;
+		top: 0px;
+		align-items: center;
+		animation: fadeIn 5s ease forwards;
+		animation-delay: 1s;
+		opacity: 0;
 	}
+
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
 	.drapery {
 		background-image: url('/drapery.png');
 		background-position: center top;
@@ -37,14 +73,17 @@
 		width: 100vw;
 		height: 300px;
 		background-repeat: repeat-x;
-		background-size: 500px;
+		background-size: 600px 200px;
 		z-index: 3;
 		filter: brightness(1.2) contrast(1.2) saturate(1.3) hue-rotate(-15deg)
 			drop-shadow(0px 0px 50px black);
-		animation: draperyIn 2s 2s ease forwards;
-		animation-delay: 2s;
 		transform: translateY(-500px) scaleY(0);
 	}
+
+	.curtains-in .drapery {
+		animation: draperyIn 2s ease forwards;
+	}
+
 	@keyframes draperyIn {
 		from {
 			transform: translateY(-500px) scaleY(0);
@@ -60,10 +99,14 @@
 		width: 400px;
 		z-index: 2;
 		filter: brightness(0.8) contrast(1.1) saturate(0.6);
-		animation: moveInRight 2s ease forwards;
-		animation-delay: 2s;
+		animation-delay: 0s;
 		transform: translateX(120%) rotate(-10deg);
 	}
+
+	.curtains-in .curtain-right {
+		animation: moveInRight 2s ease forwards;
+	}
+
 	@keyframes moveInRight {
 		from {
 			transform: translateX(120%) rotate(-10deg);
@@ -83,11 +126,14 @@
 		width: 400px;
 		z-index: 2;
 		filter: brightness(0.8) contrast(1.1) saturate(0.6);
-		animation: moveInLeft 2s ease forwards;
-		animation-delay: 2s;
+		animation-delay: 0s;
 		transform: translateX(-120%) rotate(10deg) scaleX(-1);
 	}
 
+	.curtains-in .curtain-left {
+		animation: moveInLeft 2s ease forwards;
+	}
+
 	@keyframes moveInLeft {
 		from {
 			transform: translateX(-120%) rotate(10deg) scaleX(-1);