functional stuffz

src/components/BackgroundProvider.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import OutlinedLogo from "./OutlinedLogo.svelte";
+
+	export let size = 80;
+	export let gap = 12;
+	export let speed = 4;
+	const offsetCount = 2;
+	$: offsetX = (size + gap) * offsetCount;
+	$: speedSecs = (1 / speed) * 4;
+
+	let countX = 0;
+	let countY = 0;
+
+	function onResize() {
+		countX = Math.ceil(window.innerWidth / (gap + size));
+		countY = Math.ceil(window.innerHeight / (gap + size));
+		console.log(countX, countY);
+	}
+
+	onMount(() => {
+		onResize();
+		window.addEventListener("resize", onResize);
+		return () => window.removeEventListener("resize", onResize);
+	});
+
+	function getColor(x: number, y: number) {
+		const red = "#FF3A3A";
+		const blue = "#3A99FF";
+		const evenX = x % 2 === 0;
+		const evenY = y % 2 === 0;
+		return evenX === evenY ? red : blue;
+	}
+</script>
+
+<div class="gradient" />
+
+<div class="background-container">
+	<div
+		class="background"
+		style="--size: {size}px; --gap: {gap}px; --offsetX: {offsetX}px; --speed: {speedSecs || 0}s"
+	>
+		<div class="scroll" style="--gap: {gap}px">
+			{#each Array(countX + offsetCount) as _, x}
+				<div class="group">
+					{#each Array(countY + offsetCount) as _, y}
+						<OutlinedLogo {size} color={getColor(x, y)} />
+					{/each}
+				</div>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	@keyframes scroll {
+		from {
+			transform: rotateZ(-4deg)
+				translate3d(calc(0px - var(--offsetX)), calc(0px - var(--offsetX)), 0);
+		}
+		to {
+			transform: rotateZ(-4deg)
+				translate3d(
+					calc(((var(--size) + var(--gap)) * 2) - var(--offsetX)),
+					calc(0px - var(--offsetX)),
+					0
+				);
+		}
+	}
+
+	.background-container {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: -1;
+	}
+
+	.background {
+		width: calc(100% + var(--offsetX));
+		height: 100%;
+		opacity: 0.5;
+		animation: scroll infinite linear;
+		animation-duration: var(--speed);
+	}
+
+	.gradient {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-image: linear-gradient(
+			180deg,
+			transparent,
+			color-mix(in srgb, var(--page-bg), transparent 20%) 25%,
+			var(--page-bg)
+		);
+		background-size: 100% 100%;
+		z-index: 5;
+	}
+
+	.scroll {
+		display: flex;
+		gap: var(--gap);
+	}
+
+	.group {
+		display: flex;
+		flex-direction: column;
+		gap: var(--gap);
+		width: fit-content;
+	}
+</style>

src/routes/+layout.svelte

@@ -11,6 +11,7 @@
 	import { bounceOut } from "svelte/easing";
 	import { generateTransition, transition } from "$lib/util/animation";
 	import { reducedMotion } from "$lib/accessibility";
+	import BackgroundProvider from "$components/BackgroundProvider.svelte";
 
 	export let data: PageData;
 
@@ -28,15 +29,16 @@
 				duration: 0,
 			};
 		node = node.querySelector(".content") || node;
+		const intensity = node.dataset.intensity || "160";
 		const UA = navigator.userAgent;
 		const ff = UA.indexOf("Firefox") > -1;
 		if (!dropdownCloseFinished) {
 			node.animate(
 				[
 					{
-						top: "160px",
+						top: `${intensity}px`,
 						opacity: "0",
-						filter: ff ? "none" : "blur(20px)",
+						filter: ff ? "none" : `blur(${parseInt(intensity) / 16}px)`,
 					},
 					{
 						top: "0",
@@ -58,9 +60,9 @@
 		node.animate(
 			[
 				{
-					top: "-240px",
+					top: `${-intensity}px`,
 					opacity: "0",
-					filter: ff ? "none" : "blur(20px)",
+					filter: ff ? "none" : `blur(${parseInt(intensity) / 16}px)`,
 				},
 				{
 					top: "0",
@@ -84,6 +86,7 @@
 				duration: 0,
 			};
 		node = node.querySelector(".content") || node;
+		const intensity = node.dataset.intensity || "160";
 		if (!dropdownCloseFinished)
 			return {
 				duration: 0,
@@ -98,9 +101,9 @@
 					filter: ff ? "none" : "blur(0px)",
 				},
 				{
-					top: "240px",
+					top: `${intensity}px`,
 					opacity: "0",
-					filter: ff ? "none" : "blur(80px)",
+					filter: ff ? "none" : `blur(${parseInt(intensity) / 16}px)`,
 				},
 			],
 			{
@@ -213,6 +216,15 @@
 	});
 </script>
 
+{#if navigator.userAgent.indexOf("Firefox") === -1}
+	<div
+		class="opacity-10"
+		style="position: fixed; width: 100vw; height: 100vh; --mask-image: linear-gradient(to bottom, transparent 50px, black 150px); mask-image: var(--mask-image); -webkit-mask-image: var(--mask-image);"
+	>
+		<BackgroundProvider size={90} gap={16} speed={0.25} />
+	</div>
+{/if}
+
 <div
 	style="background: radial-gradient(50% 50%, rgba(255,0,0,0.05), transparent); z-index: -1; width: 800px ;height: 800px; position: fixed; top: -50%; left: calc(25% - 400px);"
 />
@@ -306,7 +318,7 @@
 	<div
 		style="transition: 180ms ease;"
 		aria-hidden={!dropdownOpenFinished && !dropdownOpen}
-		class={`fixed left-0 z-[99999] h-screen w-full bg-black p-9 pt-[120px] ${dropdownOpen ? "pointer-events-auto visible opacity-100" : "pointer-events-none opacity-0"} ${!dropdownOpen && dropdownCloseFinished ? "invisible" : ""}`}
+		class={`${navigator.userAgent.indexOf("Firefox") > -1 ? "bg-[#0e0d10]" : "bg-[rgba(0,0,0,0.25)] backdrop-blur-xl"} fixed left-0 z-[99999] h-screen w-full p-9 pt-[120px] ${dropdownOpen ? "pointer-events-auto visible opacity-100" : "pointer-events-none opacity-0"} ${!dropdownOpen && dropdownCloseFinished ? "invisible" : ""}`}
 	>
 		<div class={`flex flex-col gap-8`}>
 			<!-- <a href="##"><h1 class="w-full text-5xl">Blog</h1></a>

src/routes/account/lobbies/+page.server.ts

@@ -2,6 +2,6 @@ import { RoomManager } from "$lib/server/class/Room.js";
 
 export function load({ request }) {
 	return {
-		rooms: RoomManager.getRooms().map((r) => r.toJSON()),
+		rooms: RoomManager.getRooms().map((r) => r.toJSON()) || [],
 	};
 }