feat: update some stuff

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "scripts": {
-		"dev": "vite dev",
+    "dev": "vite dev --port 8080 --host",
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

src/app.html

@@ -5,7 +5,8 @@
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
-    <script src="https://cdn.jsdelivr.net/npm/tsparticles-confetti@2.12.0/tsparticles.confetti.bundle.min.js"></script>
+    <!-- <script src="https://cdn.jsdelivr.net/npm/tsparticles-confetti@2.12.0/tsparticles.confetti.bundle.min.js"></script> -->
+
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Meow+Script&display=swap" rel="stylesheet">	</head>

src/lib/components/button.svelte

@@ -16,21 +16,33 @@
 		font-size: 2em;
 		color: #ceba51;
 		background: transparent;
-		filter: drop-shadow(0px 0px 30px #886d2c);
-		/*** Your CSS code ***/
-		border-style: solid;
 		border-width: 30px;
 		border-image: url(/border.png);
-		border-color: transparent;
 		border-image-repeat: stretch;
+		border-image-slice: 100%;
 		border-image-slice: 24% 23%;
-		transition: border-image-slice 0.3s ease, filter 0.3s ease;
+		transition: border-image-slice 0.3s ease;
 		will-change: contents;
-		transform: translateZ(1px);
 	}
 
 	button:hover {
-		filter: drop-shadow(0px 0px 20px #886d2c);
 		border-image-slice: 24% 23%;
 	}
+
+	button::after {
+		content: '';
+		position: absolute;
+		background: rgba(0, 0, 0, 0.7);
+		box-shadow: 0 0 70px #ffb11b88;
+		top: -15px;
+		left: -15px;
+		z-index: -1;
+		width: calc(100% + 30px);
+		height: calc(100% + 30px);
+		transition: box-shadow 0.3s ease;
+	}
+
+	button:hover::after {
+		box-shadow: 0 0 30px #ffb11b88;
+	}
 </style>

src/lib/components/confetti.svelte

@@ -1,36 +1,46 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-
-	let skew = 1;
+	import { browser } from '$app/environment';
+	import { onDestroy, onMount } from 'svelte';
 
 	function randomInRange(min: number, max: number) {
 		return Math.random() * (max - min) + min;
 	}
 
-	function frame() {
-		skew = Math.max(0.8, skew - 0.001);
+	let i = 0;
 
+	let f: number;
+	onDestroy(() => {
+		if (browser) {
+			cancelAnimationFrame(f);
+		}
+	});
+
+	onMount(async () => {
+		const confetti = (await import('https://esm.run/canvas-confetti')).default;
+
+		function frame() {
+			i = (i + 1) % 1000;
+			if (i % 20 === 0) {
 				confetti({
 					particleCount: 1,
 					startVelocity: 0,
+					useWorker: true,
 					origin: {
 						x: Math.random(),
 						// since particles fall down, skew start toward the top
-				y: Math.random() * skew - 0.2
+						y: Math.random()
 					},
 					colors: ['#d9c556'],
 					shapes: ['circle'],
 					gravity: randomInRange(0.4, 0.6),
 					scalar: randomInRange(0.4, 1),
-			drift: randomInRange(-0.0, 0.0)
+					drift: randomInRange(-2, 2),
+					disableForReducedMotion: true
 				});
-
-		requestAnimationFrame(frame);
 			}
 
-	onMount(async () => {
-		setTimeout(() => {
+			f = requestAnimationFrame(frame);
+		}
 		frame();
-		}, 0);
 	});
 </script>

src/lib/components/curtains.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	export let visible = true;
+</script>
+
+<div class="background" class:visible>
+	<div class="drapery" />
+	<img
+		alt="curtain left"
+		class="curtain-right"
+		src="/curtain.png"
+		srcset="
+      /curtain.png,    <!-- Fallback for browsers that don't support the format -->
+      /curtain.webp 1x,    <!-- 1x resolution for browsers that support WebP -->
+      /curtain.webp 2x,    <!-- 2x resolution for browsers that support WebP -->
+      /curtain.avif 1x,    <!-- 1x resolution for browsers that support AVIF -->
+      /curtain.avif 2x     <!-- 2x resolution for browsers that support AVIF -->
+    "
+	/>
+	<img
+		alt="curtain right"
+		class="curtain-left"
+		src="/curtain.png"
+		srcset="
+      /curtain.png,    <!-- Fallback for browsers that don't support the format -->
+      /curtain.webp 1x,    <!-- 1x resolution for browsers that support WebP -->
+      /curtain.webp 2x,    <!-- 2x resolution for browsers that support WebP -->
+      /curtain.avif 1x,    <!-- 1x resolution for browsers that support AVIF -->
+      /curtain.avif 2x     <!-- 2x resolution for browsers that support AVIF -->
+    "
+	/>
+</div>
+
+<style>
+	.background {
+		opacity: 0.9;
+		transition: transform 2s ease;
+		transform: scale(1);
+		top: 0px;
+		position: absolute;
+		width: 100vw;
+		height: 100vh;
+		overflow: hidden;
+	}
+
+	.drapery {
+		background-image: url('/drapery.avif'), url('/drapery.webp'), url('/drapery.png');
+		background-position: center top;
+		position: absolute;
+		top: -50px;
+		left: 0px;
+		width: 100vw;
+		height: 300px;
+		background-repeat: repeat-x;
+		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);
+		transform: translateY(-500px) scaleY(0);
+		transition: transform 2s ease;
+	}
+
+	.visible .drapery {
+		transform: translateY(0px) scaleY(1);
+	}
+
+	img.curtain-right {
+		position: absolute;
+		top: -30px;
+		right: -50px;
+		width: 400px;
+		z-index: 2;
+		filter: brightness(0.8) contrast(1.1) saturate(0.6);
+		animation-delay: 0s;
+		transform: translateX(120%) rotate(-10deg);
+		transition: transform 2s ease;
+	}
+
+	.visible .curtain-right {
+		transform: translateX(0%) rotate(0deg);
+	}
+
+	img.curtain-left {
+		transform: scaleX(-1);
+		position: fixed;
+		top: -30px;
+		left: -50px;
+		width: 400px;
+		z-index: 2;
+		filter: brightness(0.8) contrast(1.1) saturate(0.6);
+		animation-delay: 0s;
+		transform: translateX(-120%) rotate(10deg) scaleX(-1);
+		transition: transform 2s ease;
+	}
+
+	.visible .curtain-left {
+		transform: translateX(0%) rotate(0deg) scaleX(-1);
+	}
+</style>

src/lib/components/mask.svelte

@@ -36,7 +36,7 @@
 	}
 
 	.wrapper > div :global(path) {
-		animation-duration: 5s !important;
+		animation-duration: 8s !important;
 		stroke: #d9c556;
 	}
 

src/lib/components/maskenball.svelte

@@ -22,7 +22,7 @@
 
 	div :global(path) {
 		animation-duration: 5s !important;
-		animation-delay: 2s !important;
+		animation-delay: 3s !important;
 		animation-fill-mode: forwards !important;
 		stroke: #d9c556;
 	}

src/routes/+layout.svelte

@@ -4,7 +4,10 @@
 <slot />
 
 <style global>
-	:global(html) {
+	:global(html, body) {
+		height: 100%;
+		margin: 0;
+		padding: 0;
 		background-color: black;
 		/* background-image: url(/confetti.png); */
 		background-size: 80%;

src/routes/+page.svelte

@@ -1,60 +1,65 @@
 <script lang="ts">
 	import Button from '$lib/components/button.svelte';
 	import Confetti from '$lib/components/confetti.svelte';
+	import Curtains from '$lib/components/curtains.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;
+	let curtainsVisible = false;
+	let buttonVisible = false;
+	let maskVisible = false;
 
 	onMount(() => {
+		curtainsVisible = true;
 		setTimeout(() => {
-			curtainsIn = true;
-		}, 2000);
+			buttonVisible = true;
+		}, 1500);
 	});
 </script>
 
-<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 /> -->
-</div>
-<!-- <Maskenball /> -->
+<Curtains visible={curtainsVisible} />
 <div class="center">
-	<Button on:click={() => (curtainsOut = true)}>Enter the Dungeon</Button>
+	{#if maskVisible}
+		<Mask />
+		<Maskenball />
+	{/if}
+
+	{#if buttonVisible}
+		<span class="enter-button" class:visible={buttonVisible}>
+			<Button
+				on:click={() => {
+					curtainsVisible = false;
+					buttonVisible = false;
+					setTimeout(() => {
+						maskVisible = true;
+					}, 1000);
+				}}>Enter the Dungeon</Button
+			>
+		</span>
+	{/if}
+	>
 </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: grid;
-		justify-content: center;
 		position: absolute;
 		height: 100vh;
 		width: 100vw;
 		top: 0px;
-		align-items: center;
-		animation: fadeIn 5s ease forwards;
-		animation-delay: 1s;
+		transform: translateY(-5%);
+		place-content: center;
+	}
+
+	.enter-button {
 		opacity: 0;
 	}
 
+	.enter-button.visible {
+		animation: fadeIn 5s ease forwards;
+	}
+
 	@keyframes fadeIn {
 		from {
 			opacity: 0;
@@ -64,87 +69,8 @@
 		}
 	}
 
-	.drapery {
-		background-image: url('/drapery.png');
-		background-position: center top;
-		position: absolute;
-		top: -50px;
-		left: 0px;
-		width: 100vw;
-		height: 300px;
-		background-repeat: repeat-x;
-		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);
-		transform: translateY(-500px) scaleY(0);
-	}
-
-	.curtains-in .drapery {
-		animation: draperyIn 2s ease forwards;
-	}
-
-	@keyframes draperyIn {
-		from {
-			transform: translateY(-500px) scaleY(0);
-		}
-		to {
-			transform: translateY(0px) scaleY(1);
-		}
-	}
-	img.curtain-right {
-		position: fixed;
-		top: -30px;
-		right: 0px;
-		width: 400px;
-		z-index: 2;
-		filter: brightness(0.8) contrast(1.1) saturate(0.6);
-		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);
-		}
-		to {
-			transform: translateX(15%) rotate(0deg);
-		}
-	}
-	.mask-anim {
-		margin-top: 100px;
-	}
-	img.curtain-left {
-		transform: scaleX(-1);
-		position: fixed;
-		top: -30px;
-		left: 0px;
-		width: 400px;
-		z-index: 2;
-		filter: brightness(0.8) contrast(1.1) saturate(0.6);
-		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);
-		}
-		to {
-			transform: translateX(-15%) rotate(0deg) scaleX(-1);
-		}
-	}
-
-	:global(#confetti) {
-		position: relative;
-		z-index: -1;
+	:global(canvas) {
+		position: relative !important;
+		z-index: -1 !important;
 	}
 </style>