EEpy

src/app.css

@@ -29,6 +29,15 @@ body {
 	display: none;
 }
 
+.line-clamp {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 1;
+	line-clamp: 1;
+	-webkit-box-orient: vertical;
+}
+
 @keyframes scrollbg {
 	0% {
 		background-position: 0 0;

src/hooks.server.js

@@ -23,7 +23,7 @@ export async function handle({ event, resolve }) {
 			username: user.username,
 			currency: user.currency,
 			thumbnails: {
-				headshot: "https://cdn.discordapp.com/attachments/1025862249962819684/1028788210303766558/2022.10-887.png",
+				headshot: "/img/headshot.png",
 				bodyshot: "https://media.tenor.com/Lo0GvkoTFR4AAAAd/xbox-xbox-avatar.gif"
 			}
 		};

src/lib/components/GameListed.svelte

@@ -1,7 +1,13 @@
 <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="" />
+		<img class="mb-1" src="/img/background.png" alt="" />
-		<p class="font-bold">Killing row simulator</p>
+		<p class="font-bold line-clamp">Killing row simulatorKilling row simulatorKilling row simulatorKilling row simulatorKilling row simulator</p>
 		<p class="text-sm">0 Players Online</p>
+		<div class="flex text-xs pt-1">
+			<p class="px-1.5 bg-zinc-500 rounded-md text-white mr-0.5">Offline</p>
+			<p class="px-1.5 bg-green-500 rounded-md text-white mr-0.5">Online</p>
+			<p class="px-1.5 bg-blue-500 rounded-md text-white mr-0.5">2015</p>
+			<p class="px-1.5 bg-blue-500 rounded-md text-white mr-0.5">2013</p>
+		</div>
 	</a>
 </div>

src/lib/components/UserListed.svelte

@@ -1,6 +1,6 @@
 <div class="max-w-[6rem] inline-block">
-	<a href="/users/1">
+	<a href="/users/1/profile">
-		<img class="rounded-full border-2 border-grey-300 w-24 h-24 shadow-lg" src="https://cdn.discordapp.com/attachments/1026648537741672490/1029210746501996616/2022.10-550.png" alt="" />
+		<img class="rounded-full border-2 border-grey-600 w-24 h-24 shadow-lg" src="https://cdn.discordapp.com/attachments/1026648537741672490/1029210746501996616/2022.10-550.png" alt="" />
-		<p class="text-center">bucks</p>
+		<p class="text-center truncate">Only16Characters</p>
 	</a>
 </div>

src/lib/constants.js

@@ -6,3 +6,11 @@ export const MIN_PASSWORD_LENGTH = 3;
 export const INVITE_KEY_PREFIX = "rowblox-";
 export const SESSION_EXPIRE = 604800000;
 export const HCAPTCHA_SITEKEY = "be5c40c1-13db-423c-878e-f3428e9fc841";
+export const RANKS = {
+	0: "Banned",
+	1: "Member",
+	2: "Booster",
+	3: "Administrator",
+	4: "Developer",
+	5: "NO_ACCESS_MAX_PERMISSIONS"
+};

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

@@ -34,7 +34,7 @@
 			</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>
-					<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="/users/{data.user?._id}/profile">Profile</a>
 					<a class="block px-4 py-0.5 text-gray-700" href="/my/settings">Settings</a>
 				</div>
 				<span class="block px-4 py-0.5 text-red-700 hover:cursor-pointer" on:click={logout}>Logout</span>
@@ -63,7 +63,7 @@
 
 <div class="text-black container mt-4 min-h-[100vh]">
 	<Alert />
-	<Banner />
+	<!--<Banner />-->
 	<slot />
 </div>
 

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

@@ -9,7 +9,7 @@
 </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={$page.data.user?.thumbnails.headshot} alt="" />
+	<img class="rounded-full border-2 border-grey-600 w-36 h-36 mx-2 shadow-lg" src={$page.data.user?.thumbnails.headshot} alt="" />
 	<p class="mx-2 font-bold text-3xl">Hello, {$page.data.user?.username}!</p>
 </div>
 

src/routes/(app)/games/[id]/+page.svelte

@@ -20,11 +20,11 @@
 				<p class="text-3xl font-bold truncate">{game?.name}</p>
 				<p class="text-zinc-500">By <a class="font-bold text-blue-500" href="/users/{game?.creator?._id}">{game?.creator?.username}</a></p>
 			</div>
-			<div class="flex text-sm">
+			<div class="flex text-sm pt-1">
-				<p class="px-2 bg-zinc-500 rounded-xl text-white mr-1">Offline</p>
+				<p class="px-2 bg-zinc-500 rounded-md text-white mr-1">Offline</p>
-				<p class="px-2 bg-green-500 rounded-xl text-white mr-1">Online</p>
+				<p class="px-2 bg-green-500 rounded-md text-white mr-1">Online</p>
-				<p class="px-2 bg-blue-500 rounded-xl text-white mr-1">2015</p>
+				<p class="px-2 bg-blue-500 rounded-md text-white mr-1">2015</p>
-				<p class="px-2 bg-blue-500 rounded-xl text-white mr-1">2013</p>
+				<p class="px-2 bg-blue-500 rounded-md text-white mr-1">2013</p>
 			</div>
 			<span class="flex-grow" />
 			<div class="flex">

src/routes/(app)/users/[id]/+page.svelte

@@ -1,16 +0,0 @@
-<div class="mx-auto rounded-lg flex shadow border border-gray-300 px-2 py-1.5">
-	<img class="rounded-full border-2 border-grey-300 w-32 h-32 px-2 shadow-lg" src="" alt="" />
-	<div class="flex flex-col place-content-between pt-2 pb-1.5">
-		<p class="text-3xl font-bold">Only16Characters</p>
-		<div class="flex text-lg">
-			<p class="mr-1.5"><a class="font-bold" href="/users/id/friends">0</a> Friends</p>
-			<p class="mr-1.5"><a class="font-bold" href="/users/id/followers">0</a> Followers</p>
-			<p><a class="font-bold" href="/users/id/following">0</a> Following</p>
-		</div>
-	</div>
-	<span class="flex-grow" />
-	<div class="flex place-content-between place-self-end py-1">
-		<a class="mr-2 px-3 py-1 rounded border-2 border-gray-500 text-gray-500 shadow-lg hover:bg-gray-200" href="/users/id/message">Message</a>
-		<button class="px-3 py-1 rounded border-2 border-blue-500 text-blue-500 shadow-lg hover:bg-blue-200">Add Friend</button>
-	</div>
-</div>

src/routes/(app)/users/[id]/profile/+page.svelte

@@ -0,0 +1,45 @@
+<div class="mx-auto rounded-lg flex shadow border border-gray-300 px-2 py-1.5">
+	<img class="rounded-full border-2 border-grey-600 h-28 shadow-lg mr-2" src="/img/headshot.png" alt="" />
+	<div class="flex flex-col place-content-between pt-2 pb-1.5">
+		<p class="text-3xl font-bold">Only16Characters</p>
+		<div class="flex text-lg">
+			<p class="mr-4"><a class="font-bold" href="/users/id/friends">0</a> Friends</p>
+			<p class="mr-4"><a class="font-bold" href="/users/id/followers">0</a> Followers</p>
+			<p><a class="font-bold" href="/users/id/following">0</a> Following</p>
+		</div>
+	</div>
+	<span class="flex-grow" />
+	<div class="flex place-content-between place-self-end py-1">
+		<a class="mr-2 px-3 py-1 rounded border-2 border-gray-500 text-gray-500 shadow-lg hover:bg-gray-200" href="/users/id/message">Message</a>
+		<button class="px-3 py-1 rounded border-2 border-blue-500 text-blue-500 shadow-lg hover:bg-blue-200">Add Friend</button>
+	</div>
+</div>
+
+<div class="flex flex-row my-2">
+	<div class="w-full rounded-lg shadow border border-gray-300 p-4">
+		<p class="text-2xl font-bold">About</p>
+		<div class="divide-y">
+			<img class="mx-auto w-96" src="/img/bodyshot.png" alt="" />
+			<p class="text-center py-2">bio</p>
+			<div class="flex flex-row text-center pt-2">
+				<div class="flex flex-col mx-auto">
+					<p class="font-bold text-zinc-400">Join Date</p>
+					<p>a</p>
+				</div>
+				<div class="flex flex-col mx-auto">
+					<p class="font-bold text-zinc-400">Last Online</p>
+					<p>b</p>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="flex flex-col w-full ml-1">
+		<div class="border border-gray-300 rounded-lg w-full flex-auto mb-1 shadow p-4">
+			<p class="text-2xl font-bold">Games</p>
+		</div>
+		<div class="border border-gray-300 rounded-lg w-full flex-auto shadow p-4">
+			<p class="text-2xl font-bold">Friends</p>
+		</div>
+	</div>
+</div>