From c85c182c0d65dae75fe1ef1c0e370f86bfbaaeea Mon Sep 17 00:00:00 2001
From: I-Have-An-Issue <34550332+I-Have-An-Issue@users.noreply.github.com>
Date: Sat, 15 Oct 2022 23:19:05 -0400
Subject: [PATCH] InsertAsset

---
 package-lock.json                             | 13 +++++++-
 package.json                                  |  3 +-
 src/app.css                                   |  9 +++++
 src/hooks.server.js                           | 15 +++++----
 src/lib/BrickColorsPalette.json               |  4 +++
 src/lib/components/BrickColor.svelte          | 15 +++++++++
 .../components/modals/BrickColorModal.svelte  | 33 +++++++++++++++++++
 src/routes/(api)/Asset/+server.js             |  9 -----
 .../Game/Tools/InsertAsset.ashx/+server.js    |  9 +++++
 src/routes/(api)/asset/+server.js             |  9 -----
 src/routes/(app)/+layout.svelte               |  6 ++++
 src/routes/(app)/my/avatar/+page.svelte       | 15 +++++++--
 12 files changed, 111 insertions(+), 29 deletions(-)
 create mode 100644 src/lib/BrickColorsPalette.json
 create mode 100644 src/lib/components/BrickColor.svelte
 create mode 100644 src/lib/components/modals/BrickColorModal.svelte
 delete mode 100644 src/routes/(api)/Asset/+server.js
 create mode 100644 src/routes/(api)/Game/Tools/InsertAsset.ashx/+server.js
 delete mode 100644 src/routes/(api)/asset/+server.js

diff --git a/package-lock.json b/package-lock.json
index 9d610a0..4023bf9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,8 @@
 				"@sveltejs/adapter-node": "^1.0.0-next.96",
 				"bcrypt": "^5.1.0",
 				"cookie": "^0.5.0",
-				"mongodb": "^4.10.0"
+				"mongodb": "^4.10.0",
+				"svelte-modals": "^1.2.0"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "next",
@@ -2775,6 +2776,11 @@
 				"svelte": ">=3.19.0"
 			}
 		},
+		"node_modules/svelte-modals": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/svelte-modals/-/svelte-modals-1.2.0.tgz",
+			"integrity": "sha512-t2aRTu42olRtXsiIvL/RXImy0BiaSWqKCGXIkN9RL7shzvkPXC4rxfbvi1Y3qS/4XeJ6Av1lLxQty/pxNGXg4A=="
+		},
 		"node_modules/svelte-preprocess": {
 			"version": "4.10.7",
 			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.7.tgz",
@@ -4947,6 +4953,11 @@
 			"dev": true,
 			"requires": {}
 		},
+		"svelte-modals": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/svelte-modals/-/svelte-modals-1.2.0.tgz",
+			"integrity": "sha512-t2aRTu42olRtXsiIvL/RXImy0BiaSWqKCGXIkN9RL7shzvkPXC4rxfbvi1Y3qS/4XeJ6Av1lLxQty/pxNGXg4A=="
+		},
 		"svelte-preprocess": {
 			"version": "4.10.7",
 			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.7.tgz",
diff --git a/package.json b/package.json
index 24b4f7e..42f7c00 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
 		"@sveltejs/adapter-node": "^1.0.0-next.96",
 		"bcrypt": "^5.1.0",
 		"cookie": "^0.5.0",
-		"mongodb": "^4.10.0"
+		"mongodb": "^4.10.0",
+		"svelte-modals": "^1.2.0"
 	}
 }
diff --git a/src/app.css b/src/app.css
index 3c4fe15..b071efb 100644
--- a/src/app.css
+++ b/src/app.css
@@ -38,6 +38,15 @@ body {
 	-webkit-box-orient: vertical;
 }
 
+.backdrop {
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	left: 0;
+	background: rgba(0, 0, 0, 0.5);
+}
+
 @keyframes scrollbg {
 	0% {
 		background-position: 0 0;
diff --git a/src/hooks.server.js b/src/hooks.server.js
index d7917aa..a9d9c33 100644
--- a/src/hooks.server.js
+++ b/src/hooks.server.js
@@ -1,5 +1,6 @@
 import { COOKIE_NAME } from "$lib/constants";
 import { getUserFromSession } from "$lib/database";
+import BrickColorsPalette from "$lib/BrickColorsPalette.json";
 
 /** @type {import('@sveltejs/kit').Handle} */
 export async function handle({ event, resolve }) {
@@ -24,15 +25,15 @@ export async function handle({ event, resolve }) {
 			currency: user.currency,
 			thumbnails: {
 				headshot: "/img/headshot.png",
-				bodyshot: "/img/bodyshot.png"
+				bodyshot: "/img/derpecated.png"
 			},
 			bodyColors: {
-				HeadColor: 125,
-				TorsoColor: 125,
-				LeftArmColor: 125,
-				RightArmColor: 125,
-				LeftLegColor: 125,
-				RightLegColor: 125
+				HeadColor: BrickColorsPalette[Math.floor(Math.random() * BrickColorsPalette.length)],
+				TorsoColor: BrickColorsPalette[Math.floor(Math.random() * BrickColorsPalette.length)],
+				LeftArmColor: BrickColorsPalette[Math.floor(Math.random() * BrickColorsPalette.length)],
+				RightArmColor: BrickColorsPalette[Math.floor(Math.random() * BrickColorsPalette.length)],
+				LeftLegColor: BrickColorsPalette[Math.floor(Math.random() * BrickColorsPalette.length)],
+				RightLegColor: BrickColorsPalette[Math.floor(Math.random() * BrickColorsPalette.length)]
 			}
 		};
 
diff --git a/src/lib/BrickColorsPalette.json b/src/lib/BrickColorsPalette.json
new file mode 100644
index 0000000..7370b72
--- /dev/null
+++ b/src/lib/BrickColorsPalette.json
@@ -0,0 +1,4 @@
+[
+	119, 24, 106, 21, 104, 23, 107, 37, 1001, 1, 208, 1002, 194, 199, 26, 1003, 1022, 105, 125, 153, 1023, 135, 102, 151, 5, 226, 133, 101, 9, 11, 1018, 29, 1030, 1029, 1025, 1016, 1026, 1024, 1027, 1028, 1008, 1009, 1005, 1004, 1032, 1010,
+	1019, 1020, 217, 18, 38, 1031, 1006, 1013, 45, 1021, 192, 1014, 1007, 1015, 1012, 1011, 28, 141
+]
diff --git a/src/lib/components/BrickColor.svelte b/src/lib/components/BrickColor.svelte
new file mode 100644
index 0000000..99922e5
--- /dev/null
+++ b/src/lib/components/BrickColor.svelte
@@ -0,0 +1,15 @@
+<script>
+	import { createEventDispatcher } from "svelte"
+	const dispatch = createEventDispatcher()
+	import { closeModal } from "svelte-modals"
+	import BrickColors from "$lib/BrickColors.json"
+	export let rgb, color
+	rgb = BrickColors.find((_) => _.number == color).rgb
+
+	function select() {
+		dispatch("select", { color })
+		closeModal()
+	}
+</script>
+
+<div class="w-10 h-10 m-0.5 inline-block cursor-pointer rounded" style="background-color: rgb({rgb});" on:click={select} />
diff --git a/src/lib/components/modals/BrickColorModal.svelte b/src/lib/components/modals/BrickColorModal.svelte
new file mode 100644
index 0000000..cc40bb2
--- /dev/null
+++ b/src/lib/components/modals/BrickColorModal.svelte
@@ -0,0 +1,33 @@
+<script>
+	import BrickColor from "$lib/components/BrickColor.svelte";
+	import Palette from "$lib/BrickColorsPalette.json";
+	import { fly } from "svelte/transition";
+	import BrickColors from "$lib/BrickColors.json";
+	export let isOpen, part, BodyColors;
+
+	async function setColor({ detail: { color } }) {
+		$BodyColors = Object.assign($BodyColors, { [part]: BrickColors.find((_) => _.number == color).rgb });
+
+		// let colors = {}
+		// for (let part of Object.keys($BodyColors)) {
+		// 	colors[part] = BrickColors.find((_) => _.rgb == $BodyColors[part]).number
+		// }
+
+		// const response = await fetch(`/api/users/bodycolors`, {
+		// 	method: "POST",
+		// 	body: JSON.stringify(colors),
+		// })
+		// const body = await response.json()
+		// if (!body.success) return { status: response.status, error: body.error }
+	}
+</script>
+
+{#if isOpen}
+	<div class="fixed top-0 bottom-0 right-0 left-0 pointer-events-none flex justify-center items-center z-20" role="dialog" transition:fly={{ y: 100 }}>
+		<div class="bg-white pointer-events-auto p-4 rounded-lg max-w-[24rem] text-[0rem]">
+			{#each Palette as color}
+				<BrickColor {color} on:select={setColor} />
+			{/each}
+		</div>
+	</div>
+{/if}
diff --git a/src/routes/(api)/Asset/+server.js b/src/routes/(api)/Asset/+server.js
deleted file mode 100644
index 8de0d77..0000000
--- a/src/routes/(api)/Asset/+server.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/** @type {import('./$types').RequestHandler} */
-export function GET({ url }) {
-	return new Response("", {
-		status: 302,
-		headers: {
-			Location: `/asset?id=${url.searchParams.get("id")}`
-		}
-	});
-}
diff --git a/src/routes/(api)/Game/Tools/InsertAsset.ashx/+server.js b/src/routes/(api)/Game/Tools/InsertAsset.ashx/+server.js
new file mode 100644
index 0000000..629c5c6
--- /dev/null
+++ b/src/routes/(api)/Game/Tools/InsertAsset.ashx/+server.js
@@ -0,0 +1,9 @@
+import joinscript from "$lib/joinscript.js";
+
+/** @type {import('./$types').RequestHandler} */
+export function GET({ url }) {
+	return new Response("", {
+		status: 302,
+		headers: { location: `https://assetdelivery.roblox.com/v1/asset?id=${url.query.get("id")}` }
+	});
+}
diff --git a/src/routes/(api)/asset/+server.js b/src/routes/(api)/asset/+server.js
deleted file mode 100644
index 6e25022..0000000
--- a/src/routes/(api)/asset/+server.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/** @type {import('./$types').RequestHandler} */
-export function GET({ url }) {
-	return new Response("", {
-		status: 302,
-		headers: {
-			Location: `https://assetdelivery.roblox.com/v1/asset?id=${url.searchParams.get("id")}`
-		}
-	});
-}
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 7c0e874..00145f2 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -1,6 +1,8 @@
 <script>
 	import Alert from "$lib/components/Alert.svelte";
 	import Banner from "$lib/components/AdBanner.svelte";
+	import { Modals, closeModal } from "svelte-modals";
+	import { fade } from "svelte/transition";
 	import { goto } from "$app/navigation";
 
 	/** @type {import('./$types').LayoutData} */
@@ -67,6 +69,10 @@
 	<slot />
 </div>
 
+<Modals>
+	<div slot="backdrop" class="backdrop" transition:fade on:click={closeModal} />
+</Modals>
+
 <div class="flex text-white items-center justify-start scrolling-background mt-4">
 	<div class="container">
 		<div class="flex text-center py-2 border-b border-blue-500">
diff --git a/src/routes/(app)/my/avatar/+page.svelte b/src/routes/(app)/my/avatar/+page.svelte
index a05ee1c..7ada732 100644
--- a/src/routes/(app)/my/avatar/+page.svelte
+++ b/src/routes/(app)/my/avatar/+page.svelte
@@ -1,6 +1,8 @@
 <script>
 	import { writable } from "svelte/store";
 	import { browser } from "$app/environment";
+	import { openModal } from "svelte-modals";
+	import BrickColorModal from "$lib/components/modals/BrickColorModal.svelte";
 	import BrickColors from "$lib/BrickColors.json";
 	//import Item from "$lib/components/ItemListed.svelte";
 
@@ -8,9 +10,13 @@
 
 	const BodyColors = writable({});
 
-	function selectColor(click) {}
+	function selectColor(click) {
+		openModal(BrickColorModal, { part: click.srcElement.id, BodyColors });
+	}
 
 	if (browser) {
+		console.log(data.user?.bodyColors);
+
 		$BodyColors = {
 			HeadColor: BrickColors.find((_) => _.number == data.user?.bodyColors.HeadColor).rgb,
 			LeftArmColor: BrickColors.find((_) => _.number == data.user?.bodyColors.LeftArmColor).rgb,
@@ -27,7 +33,12 @@
 </svelte:head>
 
 <div>
-	<p class="font-bold text-3xl my-1">Avatar</p>
+	<div class="flex items-center">
+		<p class="font-bold text-3xl my-1">Avatar</p>
+		<span class="flex-grow" />
+		<input class="rounded px-2 border-2 border-grey-300 text-black mr-2 py-1" type="text" name="search" id="search" placeholder="Search" />
+		<button class="text-lg px-3 py-0.5 rounded border-2 border-blue-500 shadow-lg cursor-pointer hover:bg-blue-200 text-blue-500 mr-2">Search</button>
+	</div>
 	<div class="flex">
 		<div>
 			<img class="rounded-lg shadow border border-gray-300 h-[17.5rem] object-cover" src={data.user?.thumbnails.bodyshot} alt="" />