qol fix outfit switcher

This commit is contained in:
2025-07-26 21:32:54 +03:00
parent c7d3cd85be
commit 86764fabb3
8 changed files with 463 additions and 39 deletions

View File

@@ -12,6 +12,18 @@ import { useCurrentAccount } from "@/hooks/roblox/useCurrentAccount";
import { Skeleton } from "../ui/skeleton";
import { useFriendsPresence } from "@/hooks/roblox/usePresence";
import { useAccountSettings } from "@/hooks/roblox/useAccountSettings";
import { loadThumbnails } from "@/lib/thumbnailLoader";
import { toast } from "sonner";
// chatgpt + human
function randomGreeting(name: string): string {
const greetings = [
`Howdy, ${name}`
];
const index = Math.floor(Math.random() * greetings.length);
return greetings[index];
}
export function HomeLoggedInHeader() {
const profile = useCurrentAccount();
@@ -52,7 +64,23 @@ export function HomeLoggedInHeader() {
return (
<>
{/* <button onClick={()=>console.log(userPresence)}>debug this</button> */}
<div className="flex items-center gap-6 rounded-xl px-8 py-6 w-fit mt-8 ml-0">
<div
className="flex items-center gap-6 rounded-xl px-8 py-6 w-fit mt-8 ml-0"
onContextMenu={(e) => {
if (e.button === 2) {
toast("[debug] reloading user pfp");
console.log("[debug] reloading user pfp");
loadThumbnails([
{
type: "AvatarHeadShot",
targetId: profile ? profile.id : 1,
format: "webp",
size: "720x720"
}
]).catch(() => {});
}
}}
>
{!isLoaded ? (
<Skeleton className="w-28 h-28 rounded-full" />
) : (
@@ -64,14 +92,7 @@ export function HomeLoggedInHeader() {
)}
<div className="flex flex-col justify-center">
<span className="text-3xl font-bold text-text flex items-center gap-2">
{isLoaded ? (
<>
{!!accountSettings &&
accountSettings.IsPremium === true
? `Howdy, ${profile.displayName}`
: `${profile.displayName}`}
</>
) : (
{isLoaded ? randomGreeting(window.localStorage.UserPreferredName || profile.displayName || "Robloxian!") : (
<>
<Skeleton className="w-96 h-8 rounded-lg" />
</>

View File

@@ -3,22 +3,27 @@
import { useRobuxBalance } from "@/hooks/roblox/useRobuxBalance";
import { RobuxIcon } from "../roblox/RobloxIcons";
import React, { useState } from "react";
import { Separator } from "../ui/separator";
import { Bell, SettingsIcon, ShirtIcon } from "lucide-react";
import { ShirtIcon } from "lucide-react";
import { StupidHoverThing } from "../util/MiscStuff";
import { toast } from "sonner";
import { OutfitSelector } from "./OutfitQuickChooser";
import { proxyFetch } from "@/lib/utils";
import { loadThumbnails } from "@/lib/thumbnailLoader";
/**
requires csrf token cuz u cant use noblox.js on the web
either go to https://roblox.com/my/avataar or the app to change ur fit
*/
async function updateOutfit(outfit: { id: number }, acc: {id: number}) {
async function updateOutfit(outfit: { id: number }, acc: { id: number }) {
try {
const J = (await (
// ocbwoy3 stupid idiot for using v3 api
const details = (await (
await proxyFetch(
`https://avatar.roblox.com/v1/outfits/${outfit.id}/details`
)
).json()) as {
id: number;
name: string;
bodyColors: Record<string, string>;
scale: Record<string, number>;
};
const detailsV3 = (await (
await proxyFetch(
`https://avatar.roblox.com/v3/outfits/${outfit.id}/details`
)
@@ -26,16 +31,50 @@ async function updateOutfit(outfit: { id: number }, acc: {id: number}) {
id: number;
name: string;
assets: any[];
bodyColors: Record<string, string>;
scale: Record<string, number>;
playerAvatarType: "R6" | "R15";
};
await proxyFetch(
`https://avatar.roblox.com/v1/avatar/set-body-colors`,
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(details.bodyColors)
}
);
await proxyFetch(`https://avatar.roblox.com/v1/avatar/set-scales`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(details.scale)
});
// u cant set avatar item scaling/rotation cuz roblox can't make good web apis
await proxyFetch(
`https://avatar.roblox.com/v1/avatar/set-wearing-assets`,
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
assetIds: J.assets.map(a=>a.id).filter(a=>!!a)
assetIds: detailsV3.assets.map((a) => a.id).filter(Boolean)
})
}
);
await proxyFetch(
`https://avatar.roblox.com/v1/avatar/set-player-avatar-type`,
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
playerAvatarType: detailsV3.playerAvatarType
})
}
);
loadThumbnails([
{
type: "AvatarHeadShot",
@@ -43,25 +82,28 @@ async function updateOutfit(outfit: { id: number }, acc: {id: number}) {
format: "webp",
size: "720x720"
}
]).catch((a) => {});
} catch {}
]).catch(() => {});
} catch (err) {
console.error(err);
}
}
export const QuickTopUI = React.memo(function () {
const robux = useRobuxBalance();
const [isOutfitSelectorVisible, setIsOutfitSelectorVisible] =
useState<boolean>(false);
return (
<>
{/* {isOutfitSelectorVisible ? (
<OutfitSelector setVisible={setIsOutfitSelectorVisible} updateOutfit={updateOutfit} />
{isOutfitSelectorVisible ? (
<OutfitSelector
setVisible={setIsOutfitSelectorVisible}
updateOutfit={updateOutfit}
/>
) : (
<></>
)} */}
)}
<div className="z-50 absolute top-4 right-4 p-4 flex gap-2 items-center text-blue/75">
{/* <StupidHoverThing text="Change Outfit">
<StupidHoverThing text="Change Outfit">
<button
className="rounded-full bg-crust/50 flex items-center p-2"
onClick={() => {
@@ -70,15 +112,21 @@ export const QuickTopUI = React.memo(function () {
>
<ShirtIcon />
</button>
</StupidHoverThing> */}
</StupidHoverThing>
<StupidHoverThing
text={!robux ? "Loading..." : `You have ${robux} Robux`}
text={
!robux
? "You might probably have some Robux..."
: `You have ${robux.toLocaleString()} Robux`
}
>
<div className="rounded-full bg-crust/50 flex items-center p-2">
<RobuxIcon className="w-6 h-6" />
{robux ? (
<p className="pl-1">{robux || "???"}</p>
<p className="pl-1">
{robux ? robux.toLocaleString() : "???"}
</p>
) : (
<></>
)}
@@ -93,7 +141,9 @@ export const QuickTopUILogoPart = React.memo(function () {
return (
<div className="z-[15] relative top-4 left-4 p-4 flex gap-4 items-center text-blue">
<img src="/icon-512.webp" className="-m-1 w-8 h-8" alt="" />
<p className="mt-2">{"not roblox lol"}</p>
<p className="mt-2">{"ocbwoy3-chan's roblox"}</p>
<p className="mt-2 text-surface2 font-mono line-clamp-1">{process.env.NODE_ENV} {process.env.NEXT_PUBLIC_CWD} {process.env.NEXT_PUBLIC_ARGV0}</p>
</div>
);
});