Start avatar page

This commit is contained in:
I-Have-An-Issue 2022-10-15 18:44:40 -04:00
parent 46d852450d
commit 9ffcc4349f
No known key found for this signature in database
GPG Key ID: E55435DEA0825091
5 changed files with 1107 additions and 3 deletions

View File

@ -24,7 +24,15 @@ export async function handle({ event, resolve }) {
currency: user.currency,
thumbnails: {
headshot: "/img/headshot.png",
bodyshot: "https://media.tenor.com/Lo0GvkoTFR4AAAAd/xbox-xbox-avatar.gif"
bodyshot: "/img/bodyshot.png"
},
bodyColors: {
HeadColor: 125,
TorsoColor: 125,
LeftArmColor: 125,
RightArmColor: 125,
LeftLegColor: 125,
RightLegColor: 125
}
};

1042
src/lib/BrickColors.json Normal file

File diff suppressed because it is too large Load Diff

View File

@ -2,7 +2,8 @@ export const COOKIE_NAME = ".ROWBLOX_SESSION_DO_NOT_SHARE";
export const USERNAME_REGEX = /[^A-Za-z0-9\-_ ]/g;
export const MIN_USERNAME_LENGTH = 3;
export const MAX_USERNAME_LENGTH = 16;
export const MIN_PASSWORD_LENGTH = 3;
export const MIN_PASSWORD_LENGTH = 8;
export const MAX_PASSWORD_LENGTH = 64;
export const INVITE_KEY_PREFIX = "rowblox-";
export const SESSION_EXPIRE = 604800000;
export const HCAPTCHA_SITEKEY = "be5c40c1-13db-423c-878e-f3428e9fc841";

View File

@ -19,7 +19,7 @@
</a>
<a class="mr-7" href="/games">Games</a>
<a class="mr-7" href="/catalog">Catalog</a>
<a class="mr-7" href="https://discord.gg/3wRpA5bzU9">Discord</a>
<a class="mr-7" href="https://discord.gg/BkmbTfyruJ">Discord</a>
<input class="rounded px-2 border-2 border-grey-300 text-black flex-grow mr-10" type="text" name="search" id="search" placeholder="Search" />
<a class="mr-1 px-2 py-1 flex items-center rounded bg-gradient-to-tr from-blue-700 to-blue-600 outline outline-blue-800 outline-1 shadow-md hover:shadow-xl" href="/my/money">
<img class="h-6 mr-1.5" src="/img/rowbux.png" alt="" />

View File

@ -0,0 +1,53 @@
<script>
import { writable } from "svelte/store";
import { browser } from "$app/environment";
import BrickColors from "$lib/BrickColors.json";
//import Item from "$lib/components/ItemListed.svelte";
export let data;
const BodyColors = writable({});
function selectColor(click) {}
if (browser) {
$BodyColors = {
HeadColor: BrickColors.find((_) => _.number == data.user?.bodyColors.HeadColor).rgb,
LeftArmColor: BrickColors.find((_) => _.number == data.user?.bodyColors.LeftArmColor).rgb,
TorsoColor: BrickColors.find((_) => _.number == data.user?.bodyColors.TorsoColor).rgb,
RightArmColor: BrickColors.find((_) => _.number == data.user?.bodyColors.RightArmColor).rgb,
LeftLegColor: BrickColors.find((_) => _.number == data.user?.bodyColors.LeftLegColor).rgb,
RightLegColor: BrickColors.find((_) => _.number == data.user?.bodyColors.RightLegColor).rgb
};
}
</script>
<svelte:head>
<title>Avatar - Rowblox</title>
</svelte:head>
<div>
<p class="font-bold text-3xl my-1">Avatar</p>
<div class="flex">
<div>
<img class="rounded-lg shadow border border-gray-300 h-[17.5rem] object-cover" src={data.user?.thumbnails.bodyshot} alt="" />
<div class="rounded-lg shadow border border-gray-300 my-2 py-4">
<div class="flex flex-col">
<div class="flex flex-row place-content-center">
<div class="w-8 h-8 cursor-pointer rounded-lg border border-gray-300" style="background-color: rgb({$BodyColors.HeadColor});" id="HeadColor" on:click={selectColor} />
</div>
<div class="flex flex-row place-content-center">
<div class="w-7 h-16 cursor-pointer rounded border border-gray-300" style="background-color: rgb({$BodyColors.RightArmColor});" id="RightArmColor" on:click={selectColor} />
<div class="w-14 h-16 cursor-pointer rounded border border-gray-300" style="background-color: rgb({$BodyColors.TorsoColor});" id="TorsoColor" on:click={selectColor} />
<div class="w-7 h-16 cursor-pointer rounded border border-gray-300" style="background-color: rgb({$BodyColors.LeftArmColor});" id="LeftArmColor" on:click={selectColor} />
</div>
<div class="flex flex-row place-content-center">
<div class="w-7 h-16 cursor-pointer rounded border border-gray-300" style="background-color: rgb({$BodyColors.RightLegColor});" id="RightLegColor" on:click={selectColor} />
<div class="w-7 h-16 cursor-pointer rounded border border-gray-300" style="background-color: rgb({$BodyColors.LeftLegColor});" id="LeftLegColor" on:click={selectColor} />
</div>
</div>
</div>
</div>
<div />
</div>
</div>