Home page sketch

src/app.css

@@ -7,6 +7,7 @@ body {
 	@apply text-black;
 	padding: 0;
 	margin: 0;
+	font-family: Helvetica;
 }
 
 .scrolling-background {

src/lib/components/GameListed.svelte

@@ -0,0 +1,7 @@
+<div class="shadow-lg max-w-[15rem] p-2 rounded-lg border-2 border-gray-300 mt-2 mx-1 inline-block">
+	<a href="/games/1">
+		<img class="rounded mb-1" src="/img/background.png" alt="" />
+		<p class="font-bold">Killing row simulator</p>
+		<p class="text-sm">0 Players Online</p>
+	</a>
+</div>

src/lib/components/UserListed.svelte

@@ -0,0 +1,6 @@
+<div class="max-w-[7rem]">
+	<a href="/users/1">
+		<img class="rounded-full border-2 border-grey-300 w-28 h-28 shadow-lg" src="" alt="" />
+		<p class="text-center">Rowblox</p>
+	</a>
+</div>

src/routes/(app)/+error.svelte

@@ -10,7 +10,7 @@
 		<p>Please try again later, or report this incident to a Rowblox developer if it persists.</p>
 	</div>
 	<div class="py-4 px-2 text-lg text-black">
-		<span class="mr-2 px-3 py-1 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200" onclick="javascript:history.back()"> Go Back </span>
-		<a class="mr-2 px-3 py-1 rounded border-2 border-gray-500 shadow-lg hover:bg-gray-200" href="/"> Go Home </a>
+		<span class="mr-2 px-3 py-1 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200" onclick="javascript:history.back()">Go Back</span>
+		<a class="mr-2 px-3 py-1 rounded border-2 border-gray-500 shadow-lg hover:bg-gray-200" href="/">Go Home</a>
 	</div>
 </div>

src/routes/(app)/+layout.svelte

@@ -6,13 +6,7 @@
 		<a class="mr-7" href="/games">Games</a>
 		<a class="mr-7" href="/catalog">Catalog</a>
 		<a class="mr-7" href="/forums">Forums</a>
-		<input
-			class="rounded-lg px-2 border-2 border-grey-300 text-black"
-			type="text"
-			name="search"
-			id="search"
-			placeholder="Search"
-		/>
+		<input class="rounded-lg px-2 border-2 border-grey-300 text-black" type="text" name="search" id="search" placeholder="Search" />
 		<span class="flex-grow" />
 		<a class="mr-2 px-2 flex items-center rounded bg-blue-500 shadow-lg" href="/my/money">
 			<img class="h-6 mr-1.5" src="/img/rowbux.png" alt="" />
@@ -21,23 +15,12 @@
 		<div class="relative inline-block dropdown">
 			<button class="hover:text-zinc-200" href="/my/profile"
 				>abcdefghijklmnop
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 24 24"
-					fill="currentColor"
-					class="w-4 h-4 inline-block"
-				>
-					<path
-						fill-rule="evenodd"
-						d="M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z"
-						clip-rule="evenodd"
-					/>
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 inline-block">
+					<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 01-1.06 0l-7.5-7.5a.75.75 0 011.06-1.06L12 14.69l6.97-6.97a.75.75 0 111.06 1.06l-7.5 7.5z" clip-rule="evenodd" />
 				</svg>
 			</button>
 
-			<div
-				class="absolute bg-white text-center text-black w-36 right-0 origin-top-right rounded border border-gray-300 divide-y shadow-lg hidden dropdown-content"
-			>
+			<div class="absolute bg-white text-center text-black w-36 right-0 origin-top-right rounded border border-gray-300 divide-y shadow-lg hidden dropdown-content">
 				<div>
 					<a class="block px-4 py-0.5 text-gray-700" href="/my/profile">Profile</a>
 					<a class="block px-4 py-0.5 text-gray-700" href="/my/settings">Settings</a>
@@ -62,7 +45,7 @@
 
 <div class="mobile-compatible scrolling-background text-lg py-1 text-white">
 	<div class="container flex items-center">
-		<p>"I'm racist" -calones</p>
+		<p>"I'm racist" -calones -row</p>
 	</div>
 </div>
 

src/routes/(app)/+page.svelte

@@ -1,6 +1,31 @@
+<script>
+	import Game from "$lib/components/GameListed.svelte";
+	import Friend from "$lib/components/UserListed.svelte";
+</script>
+
 <svelte:head>
 	<title>Home - Rowblox</title>
 </svelte:head>
 
+<div class="flex items-center">
+	<img class="rounded-full border-2 border-grey-300 w-36 h-36 mx-2 shadow-lg" src="" alt="" />
+	<p class="mx-2 font-bold text-3xl">Hello, abcdefghijklmnop!</p>
+</div>
 
-<p class="text-4xl text-left font-['Helvetica'] mt-32 font-bold">Wassup, User!</p>
+<div class="my-2">
+	<div class="flex items-center">
+		<p class="font-bold text-2xl my-1">Friends</p>
+		<span class="flex-grow" />
+		<a class="text-lg mr-2 px-3 py-0.5 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200 text-blue-500" href="/my/friends">View All</a>
+	</div>
+	<Friend />
+</div>
+
+<div class="my-2">
+	<div class="flex items-center">
+		<p class="font-bold text-2xl mt-1">Popular Games</p>
+		<span class="flex-grow" />
+		<a class="text-lg mr-2 px-3 py-0.5 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200 text-blue-500" href="/games">View All</a>
+	</div>
+	<Game />
+</div>

src/routes/(app)/asset/+server.js

@@ -3,9 +3,7 @@ export function GET({ url }) {
 	return new Response("", {
 		status: 302,
 		headers: {
-			Location: `https://assetdelivery.roblox.com/v1/asset/?id=${url.searchParams.get(
-				"id"
-			)}&version=1`
+			Location: `https://api.rowblx.xyz?id=${url.searchParams.get("id")}`
 		}
 	});
 }