feat: update some stuff

package.json

@@ -1,38 +1,38 @@
 {
-	"name": "silvester-24",
+  "name": "silvester-24",
-	"version": "0.0.1",
+  "version": "0.0.1",
-	"private": true,
+  "private": true,
-	"scripts": {
+  "scripts": {
-		"dev": "vite dev",
+    "dev": "vite dev --port 8080 --host",
-		"build": "vite build",
+    "build": "vite build",
-		"preview": "vite preview",
+    "preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
+    "format": "prettier --plugin-search-dir . --write ."
-	},
+  },
-	"devDependencies": {
+  "devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.20.4",
+    "@sveltejs/kit": "^1.20.4",
-		"@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
-		"@typescript-eslint/parser": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
-		"eslint": "^8.28.0",
+    "eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte": "^2.30.0",
+    "eslint-plugin-svelte": "^2.30.0",
-		"prettier": "^2.8.0",
+    "prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.10.1",
+    "prettier-plugin-svelte": "^2.10.1",
-		"svelte": "^4.0.5",
+    "svelte": "^4.0.5",
-		"svelte-check": "^3.4.3",
+    "svelte-check": "^3.4.3",
-		"tslib": "^2.4.1",
+    "tslib": "^2.4.1",
-		"typescript": "^5.0.0",
+    "typescript": "^5.0.0",
-		"vite": "^4.4.2"
+    "vite": "^4.4.2"
-	},
+  },
-	"type": "module",
+  "type": "module",
-	"dependencies": {
+  "dependencies": {
-		"@sveltejs/adapter-node": "^1.3.1",
+    "@sveltejs/adapter-node": "^1.3.1",
-		"svelte-particles": "^2.12.0",
+    "svelte-particles": "^2.12.0",
-		"tsparticles": "^2.12.0",
+    "tsparticles": "^2.12.0",
-		"tsparticles-confetti": "^2.12.0",
+    "tsparticles-confetti": "^2.12.0",
-		"tsparticles-slim": "^2.12.0"
+    "tsparticles-slim": "^2.12.0"
-	}
+  }
 }

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';
+	import { browser } from '$app/environment';
-
+	import { onDestroy, onMount } from 'svelte';
-	let skew = 1;
 
 	function randomInRange(min: number, max: number) {
 		return Math.random() * (max - min) + min;
 	}
 
-	function frame() {
+	let i = 0;
-		skew = Math.max(0.8, skew - 0.001);
 
-		confetti({
+	let f: number;
-			particleCount: 1,
+	onDestroy(() => {
-			startVelocity: 0,
+		if (browser) {
-			origin: {
+			cancelAnimationFrame(f);
-				x: Math.random(),
+		}
-				// since particles fall down, skew start toward the top
+	});
-				y: Math.random() * skew - 0.2
-			},
-			colors: ['#d9c556'],
-			shapes: ['circle'],
-			gravity: randomInRange(0.4, 0.6),
-			scalar: randomInRange(0.4, 1),
-			drift: randomInRange(-0.0, 0.0)
-		});
-
-		requestAnimationFrame(frame);
-	}
 
 	onMount(async () => {
-		setTimeout(() => {
+		const confetti = (await import('https://esm.run/canvas-confetti')).default;
-			frame();
+
-		}, 0);
+		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()
+					},
+					colors: ['#d9c556'],
+					shapes: ['circle'],
+					gravity: randomInRange(0.4, 0.6),
+					scalar: randomInRange(0.4, 1),
+					drift: randomInRange(-2, 2),
+					disableForReducedMotion: true
+				});
+			}
+
+			f = requestAnimationFrame(frame);
+		}
+		frame();
 	});
 </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 curtainsVisible = false;
-	let curtainsOut = false;
+	let buttonVisible = false;
+	let maskVisible = false;
 
 	onMount(() => {
+		curtainsVisible = true;
 		setTimeout(() => {
-			curtainsIn = true;
+			buttonVisible = true;
-		}, 2000);
+		}, 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">
+<Curtains visible={curtainsVisible} />
-	<!-- <Mask /> -->
-</div>
-<!-- <Maskenball /> -->
 <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;
+		transform: translateY(-5%);
-		animation: fadeIn 5s ease forwards;
+		place-content: center;
-		animation-delay: 1s;
+	}
+
+	.enter-button {
 		opacity: 0;
 	}
 
+	.enter-button.visible {
+		animation: fadeIn 5s ease forwards;
+	}
+
 	@keyframes fadeIn {
 		from {
 			opacity: 0;
@@ -64,87 +69,8 @@
 		}
 	}
 
-	.drapery {
+	:global(canvas) {
-		background-image: url('/drapery.png');
+		position: relative !important;
-		background-position: center top;
+		z-index: -1 !important;
-		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;
 	}
 </style>