fixed routing

src/routes/+layout.svelte

@@ -2,6 +2,8 @@
 	import {Navbar, NavBrand, NavLi, NavUl, NavHamburger, Footer, FooterCopyright} from 'flowbite-svelte';
 	import logo from "$lib/images/rse-logo.svg";
 	import '../app.css';
+	import { page } from '$app/stores';
+	$: activeUrl = $page.url.pathname;
 </script>
 
 <div class="min-h-screen flex flex-col">
@@ -12,9 +14,9 @@
 			  <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">RS Entertainment</span>
 			</NavBrand>
 			<NavHamburger  />
-			<NavUl >
+			<NavUl {activeUrl}>
 			  <NavLi href="/">Home</NavLi>
-			  <NavLi href="/minecraft/info">Minecraft</NavLi>
+			  <NavLi href="/minecraft">Minecraft</NavLi>
 			  <NavLi href="https://gamedash.reslate.systems">Host Dashboard</NavLi>
 			  <NavLi href="/about">About</NavLi>
 			</NavUl>

src/routes/minecraft/+layout.svelte

@@ -12,7 +12,7 @@
 </div>
 
 <BottomNav {activeUrl} position="sticky" classInner="grid-cols-3">
-	<BottomNavItem btnName="Info" href="/minecraft/info">
+	<BottomNavItem btnName="Info" href="/minecraft">
 		<InfoCircleSolid class="mb-1 h-6 w-6" />
 	</BottomNavItem>
 	<BottomNavItem btnName="Map" href="/minecraft/bluemap">

src/routes/minecraft/+page.js

@@ -1,3 +1,21 @@
 // since there's no dynamic data here, we can prerender
 // it so that it gets served as a static asset in production
-export const prerender = true;
+export const prerender = false;
+
+export async function load({fetch }) {
+    let mcserverRequest = await fetch("https://api.mcsrvstat.us/3/game.reslate.systems")
+    let mcServer = null;
+    if (mcserverRequest.ok) {
+        mcServer = await mcserverRequest.json();
+    }
+    for (let i = 0; i < mcServer.players.list.length; i++) {
+        const player = mcServer.players.list[i];
+        let skinResponse = await fetch(`https://api.mineatar.io/body/full/${player.uuid}`)
+        if (skinResponse.ok) {
+            player.skin = URL.createObjectURL(await skinResponse.blob())
+        }
+    }
+	return {
+        mcServer: mcServer
+    };
+}

src/routes/minecraft/+page.svelte

@@ -24,7 +24,7 @@
 				<Heading tag="h1">Who's in-game?</Heading>
 			</div>
 			<div class="flex max-w-full flex-row overflow-x-scroll scroll-smooth border-none">
-				<Card padding="md" class="m-4 min-w-80">
+				<Card padding="md" class="m-4 min-w-80 w-80">
 					<div class="flex flex-col items-center pb-4">
 						{#if mcserver.online}
 							<Avatar size="lg" src={mcserver.icon}></Avatar>
@@ -60,7 +60,7 @@
 				</Card>
 				{#if mcserver.online}
 					{#each mcserver.players.list as player}
-						<Card padding="md" class="m-4 flex min-w-80 flex-col justify-center">
+						<Card padding="md" class="m-4 flex min-w-80 w-80 flex-col justify-center">
 							<div class="flex flex-col items-center pb-4">
 								<img src={player.skin} alt={`${player.name}'s skin`} />
 								<Heading

src/routes/minecraft/info/+page.js

@@ -1,23 +0,0 @@
-// since there's no dynamic data here, we can prerender
-// it so that it gets served as a static asset in production
-export const prerender = false;
-export const ssr = false;
-
-
-export async function load({fetch }) {
-    let mcserverRequest = await fetch("https://api.mcsrvstat.us/3/game.reslate.systems")
-    let mcServer = null;
-    if (mcserverRequest.ok) {
-        mcServer = await mcserverRequest.json();
-    }
-    for (let i = 0; i < mcServer.players.list.length; i++) {
-        const player = mcServer.players.list[i];
-        let skinResponse = await fetch(`https://api.mineatar.io/body/full/${player.uuid}`)
-        if (skinResponse.ok) {
-            player.skin = URL.createObjectURL(await skinResponse.blob())
-        }
-    }
-	return {
-        mcServer: mcServer
-    };
-}