add bgs and rooms stuff

src/components/Room.svelte

@@ -1,36 +1,54 @@
 <script lang="ts">
 	import type { IRoom } from "$types/rooms";
 
-	export let icon: string | undefined;
 	export let room: IRoom;
 </script>
 
-<div class="relative flex h-fit items-center gap-6 rounded-[2.25rem] bg-[#110d10] p-6">
-	{#if icon}
-		<img src={icon} alt="Icon for '{room.preferredGameName}'" class="h-[100px] rounded-2xl" />
-	{/if}
-	<div>
-		<h2 class="mb-2 text-[20px] leading-[1.41] md:text-[28px] md:leading-[1.1]">
-			{room.name}
-			<span class="ml-1 text-base font-normal text-gray-500"
-				>({room.preferredGameName || "No preferred game"})</span
-			>
-		</h2>
-		<p>{room.description}</p>
-		<div class="mt-2 text-sm text-gray-600">
-			{room.players.length} / {room.maxPlayers} | {#if room.players.length > 4}
-				{#each room.players.slice(0, 4) as player}
-					{player.nickname}{#if player !== room.players[3]},{" "}
-					{/if}
-				{/each}
-				and {room.players.length - 4}
-				{room.players.length - 4 === 1 ? "other" : "others"}
-			{:else}
-				{#each room.players as player}
-					{player.nickname}{#if player !== room.players[room.players.length - 1]},{" "}
-					{/if}
-				{/each}
-			{/if} | {room.hasPassword ? "Private" : "Public"} | {room.address}:{room.port}
+<div
+	class="relative flex h-full w-full overflow-hidden rounded-[2.25rem] border-2 border-solid border-[#ffffff34] bg-[#110d10] p-6 shadow-lg shadow-[#00000028]"
+>
+	<div
+		class="absolute left-0 top-0 z-20 h-full w-full opacity-25 blur-sm"
+		style="background-image: url({room.game
+			?.bannerUrl}); background-size: cover; background-position: center center;
+			--mask-image: linear-gradient(
+				to right,
+				rgba(0, 0, 0, 0.1) 50%,
+				rgba(0, 0, 0, 1) 100%
+			); mask-image: var(--mask-image); -webkit-mask-image: var(--mask-image);
+			"
+	/>
+	<div class="relative z-30 flex items-stretch gap-6">
+		{#if room.game?.iconUrl}
+			<img
+				src={room.game.iconUrl}
+				alt="Icon for '{room.preferredGameName}'"
+				class="w-[100px] rounded-2xl object-cover"
+			/>
+		{/if}
+		<div class="flex flex-col">
+			<h2 class="mb-2 text-[20px] leading-[1.41] md:text-[28px] md:leading-[1.1]">
+				{room.name}
+				<span class="ml-1 text-base font-normal text-gray-300"
+					>({room.game?.name || "No preferred game"})</span
+				>
+			</h2>
+			<p class="flex-grow">{room.description}</p>
+			<div class="mt-2 text-sm text-gray-300">
+				{room.players.length} / {room.maxPlayers} | {#if room.players.length > 4}
+					{#each room.players.slice(0, 4) as player}
+						{player.nickname}{#if player !== room.players[3]},{" "}
+						{/if}
+					{/each}
+					and {room.players.length - 4}
+					{room.players.length - 4 === 1 ? "other" : "others"}
+				{:else}
+					{#each room.players as player}
+						{player.nickname}{#if player !== room.players[room.players.length - 1]},{" "}
+						{/if}
+					{/each}
+				{/if} | {room.hasPassword ? "Private" : "Public"} | {room.address}:{room.port}
+			</div>
 		</div>
 	</div>
 </div>

src/hooks.server.ts

@@ -4,6 +4,7 @@ import { building } from "$app/environment";
 import type { Handle } from "@sveltejs/kit";
 import { WebSocketServer } from "ws";
 import { userRepo } from "$lib/server/repo";
+import { globalData } from "$lib/server/other";
 
 let server: WebSocketServer;
 
@@ -22,6 +23,20 @@ function initServer() {
 	} catch {}
 }
 
+async function fetchGames() {
+	console.log("Fetching game data");
+	const res = await fetch("https://raw.githubusercontent.com/blawar/titledb/master/US.en.json");
+	let gamesText = await res.text();
+	gamesText = gamesText.replaceAll(/\\u[0-9a-fA-F]{4}/gm, "");
+	globalData.games = Object.values(JSON.parse(gamesText));
+	console.log("Fetched game data");
+}
+
+async function setupGames() {
+	await fetchGames();
+	setInterval(fetchGames, 1000 * 60 * 60 * 12);
+}
+
 const runAllTheInitFunctions = async () => {
 	if (!db.isInitialized) await db.initialize();
 	// sigh.
@@ -34,6 +49,9 @@ const runAllTheInitFunctions = async () => {
 		} catch {
 			console.error("Could not initialize WebSocket server");
 		}
+	if (globalData.games.length === 0) {
+		await setupGames();
+	}
 };
 
 if (!building) {

src/lib/server/class/Room.ts

@@ -1,4 +1,5 @@
 import type { IRoom, IRoomConfig, RoomPlayer } from "$types/rooms";
+import { globalData, type SwitchGame } from "../other";
 import type { SuyuUser } from "../schema";
 import { v4 } from "uuid";
 
@@ -52,6 +53,9 @@ export class Room {
 			netVersion: 1,
 			owner: this.host.username,
 			port: parseInt(parsed[1]),
+			game: globalData.games.find(
+				(g) => g.name.toUpperCase().trim() === config.gameName.toUpperCase().trim(),
+			),
 		};
 	}
 

src/lib/server/other/index.ts

@@ -1,14 +1,14 @@
-interface SwitchGame {
+export interface SwitchGame {
 	bannerUrl: string;
 	category: string[];
 	description: string;
-	developer: null;
-	frontBoxArt: null;
+	// developer: null;
+	// frontBoxArt: null;
 	iconUrl: string;
 	id: string;
 	intro: null | string;
 	isDemo: boolean;
-	key: null;
+	// key: null;
 	languages: string[];
 	name: string;
 	nsuId: number;
@@ -16,12 +16,12 @@ interface SwitchGame {
 	publisher: string;
 	rating: number;
 	ratingContent: string[];
-	region: null;
+	// region: null;
 	releaseDate: number;
 	rightsId: string;
 	screenshots: string[];
 	size: number;
-	version: null;
+	// version: null;
 }
 export const globalData: {
 	games: SwitchGame[];

src/routes/+layout.svelte

@@ -130,7 +130,7 @@
 	$: navItems = [
 		{
 			name: "Blog",
-			href: "/blog",
+			href: "/coming-soon",
 		},
 		{
 			name: "Docs",
@@ -264,7 +264,7 @@
 			<div
 				class="flex w-full flex-row items-center justify-center gap-2 text-sm font-medium text-[#A6A5A7] max-[625px]:hidden"
 			>
-				<a href="/blog" class="px-5 py-3 transition hover:text-white">Blog</a>
+				<a href="/coming-soon" class="px-5 py-3 transition hover:text-white">Blog</a>
 				<a href="/coming-soon" class="px-5 py-3 transition hover:text-white">Docs</a>
 				<a href="/coming-soon" class="px-5 py-3 transition hover:text-white">FAQ</a>
 			</div>

src/routes/+page.server.ts

@@ -1,6 +1,5 @@
 import { building } from "$app/environment";
 import { DISCORD_USER_TOKEN, GITLAB_API_TOKEN } from "$env/static/private";
-import { globalData } from "$lib/server/other";
 
 let memberCount = 0;
 let starCount = 0;
@@ -41,19 +40,9 @@ async function fetchServerSideData() {
 	console.log("Stars count:", starCount);
 }
 
-async function fetchSlowServerSideData() {
-	console.log("Fetching game data");
-	const res = await fetch("https://raw.githubusercontent.com/blawar/titledb/master/US.en.json");
-	let gamesText = await res.text();
-	gamesText = gamesText.replaceAll(/\\u[0-9a-fA-F]{4}/gm, "");
-	globalData.games = Object.values(JSON.parse(gamesText));
-	console.log("Fetched game data");
-}
-
 if (!building) {
-	await Promise.all([await fetchServerSideData(), await fetchSlowServerSideData()]);
+	await fetchServerSideData();
 	setInterval(fetchServerSideData, 1000 * 60 * 10);
-	setInterval(fetchSlowServerSideData, 1000 * 60 * 60 * 12);
 }
 
 export async function load({ cookies }) {

src/routes/account/+layout.svelte

@@ -168,13 +168,13 @@
 
 {#key data.url}
 	<div
-		class={`navbar ${data.url} relative z-50 mb-4 flex w-max gap-1 overflow-hidden rounded-full bg-[#110d10] p-1`}
+		class={`navbar ${data.url} relative z-50 mb-4 ml-auto mr-auto flex w-max gap-1 overflow-hidden rounded-full bg-[#110d10] p-1`}
 		bind:this={navBar}
 	>
 		<div
 			bind:this={indicator}
 			style="transition: 360ms {transition}"
-			class="pointer-events-none absolute left-0 top-[4px] z-10 h-[calc(100%-8px)] translate-x-0 transform rounded-full bg-gradient-to-b from-slate-50 to-[#a9a9a9] mix-blend-difference motion-reduce:!transition-none"
+			class="pointer-events-none absolute left-0 top-[4px] z-10 h-[calc(100%-8px)] translate-x-0 transform rounded-full bg-gradient-to-b from-[#fafafa] to-[#d1d1d1] mix-blend-difference motion-reduce:!transition-none"
 		></div>
 		{#each navItems as item, i}
 			<a

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

@@ -1,14 +1,8 @@
-import { building } from "$app/environment";
 import { RoomManager } from "$lib/server/class/Room.js";
-import { globalData } from "$lib/server/other/index.js";
 
 export function load({ request }) {
 	const rooms = RoomManager.getRooms().map((r) => r.toJSON()) || [];
-	const requiredGames = rooms
-		.map((r) => r.preferredGameName.toUpperCase().trim())
-		.map((r) => globalData.games.find((g) => g.name.toUpperCase().trim() === r));
 	return {
 		rooms: rooms,
-		games: requiredGames,
 	};
 }

src/routes/account/lobbies/+page.svelte

@@ -51,11 +51,26 @@
 </script>
 
 <div class="relative h-[calc(100vh-200px)]">
-	<div class="relative flex w-full flex-col gap-4 pb-6">
+	<div class="room-grid relative flex w-full gap-4 pb-6">
 		{#each data.rooms as room, i}
 			<div class="room opacity-0" data-index={i}>
-				<Room icon={data.games[i]?.iconUrl} {room} />
+				<Room {room} />
 			</div>
 		{/each}
 	</div>
 </div>
+
+<style>
+	.room-grid {
+		display: grid;
+		grid-template-columns: repeat(1, 1fr);
+		grid-auto-rows: auto;
+		align-items: stretch;
+	}
+
+	@media (min-width: 750px) {
+		.room-grid {
+			grid-template-columns: repeat(2, 1fr);
+		}
+	}
+</style>

src/routes/blog/+page.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<!-- <script lang="ts">
 	import { page } from "$app/stores";
 	import { onDestroy, onMount } from "svelte";
 	import type { PageData } from "./$types";
@@ -57,10 +57,6 @@
 
 <h1 class="mb-8 text-[40px] leading-[1.41] md:text-[60px] md:leading-[1.1]">Blog Posts</h1>
 {#if data.userInfo.isModerator}
-	<!-- <p class="mb-8 text-[24px] leading-[1.41] md:text-[36px] md:leading-[1.1]">
-		<a href="/blog/new">Create a new post</a>
-	</p> -->
-	<!-- wh, wha r -->
 	<div class="mb-4 ml-1 flex gap-4">
 		<a href="/blog/new" class="cta-button">Create a new post</a>
 		<a href="/blog/edit" class="cta-button">Edit a post</a>
@@ -104,4 +100,4 @@
 		font-family: "DM Sans", sans-serif;
 		font-weight: 500;
 	}
-</style>
+</style> -->

src/types/rooms.d.ts

@@ -1,3 +1,4 @@
+import type { SwitchGame } from "$lib/server/other";
 import type { SuyuUser } from "$lib/server/schema";
 
 export interface IRoom {
@@ -14,6 +15,7 @@ export interface IRoom {
 	port: number;
 	preferredGameId: number;
 	preferredGameName: string;
+	game?: SwitchGame;
 }
 
 export interface IRoomConfig {