kris/roblox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Kris
2025-12-27 16:57:19 +02:00
parent 5bfdd7dd2b
commit 331ff6daf3
31 changed files with 1049 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
components/site/HomeUserHeader.tsx
View File

@@ -15,7 +15,6 @@ import { useAccountSettings } from "@/hooks/roblox/useAccountSettings";
import { loadThumbnails } from "@/lib/thumbnailLoader";
import { toast } from "sonner";
import Link from "next/link";
import { Button } from "../ui/button";
// chatgpt + human
function randomGreeting(name: string): string {
@@ -59,85 +58,79 @@ export function HomeLoggedInHeader() {
userPresence === 1
? "border-blue/25 bg-blue/25"
: userPresence === 2
? "border-green/25 bg-green/25"
: userPresence === 3
? "border-yellow/25 bg-yellow/25"
: userPresence === 0
? "border-surface2/25 bg-surface2/25"
: "border-red/25 bg-red/25";
? "border-green/25 bg-green/25"
: userPresence === 3
? "border-yellow/25 bg-yellow/25"
: userPresence === 0
? "border-surface2/25 bg-surface2/25"
: "border-red/25 bg-red/25";
const isLoaded = !!profile && !!accountSettings;
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"
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" />
) : (
<LazyLoadedImage
imgId={`AvatarHeadShot_${profile.id}`}
alt=""
className={`w-28 h-28 rounded-full shadow-crust border-2 ${borderColor}`}
/>
)}
<div className="flex flex-col justify-center">
<span className="text-3xl font-bold text-text flex items-center gap-2">
{isLoaded ? (
<Link href={`/users/${profile.id}`}>
{randomGreeting(
preferredName ||
profile.displayName ||
"Robloxian!"
)}
</Link>
) : (
<>
<Skeleton className="w-96 h-8 rounded-lg" />
</>
)}
{!!accountSettings &&
accountSettings.IsPremium === true ? (
<RobloxPremiumSmall className="w-6 h-6 fill-transparent" />
) : (
<></>
)}
{isLoaded ? (
<RobloxVerifiedSmall className="w-6 h-6 fill-blue text-base" />
) : (
<></>
)}
</span>
<span className="text-base font-super-mono text-subtext0 mt-1">
{isLoaded ? (
<>
@{profile.name}
{!!userActivity && userPresence === 2 ? (
<> - {userActivity.lastLocation}</>
) : (
<></>
)}
</>
) : (
<Skeleton className="w-64 h-6 rounded-lg" />
)}
</span>
<div className="mx-auto w-full max-w-6xl px-4 sm:px-8">
<div
className="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6 rounded-2xl bg-base/40 ring-1 ring-surface0/60 px-4 sm:px-6 py-4 sm:py-6 mt-6"
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-24 h-24 sm:w-28 sm:h-28 rounded-full" />
) : (
<LazyLoadedImage
imgId={`AvatarHeadShot_${profile.id}`}
alt=""
className={`w-24 h-24 sm:w-28 sm:h-28 rounded-full shadow-crust border-2 ${borderColor}`}
/>
)}
<div className="flex flex-col justify-center">
<span className="text-2xl sm:text-3xl font-bold text-text flex flex-wrap items-center gap-2">
{isLoaded ? (
<Link href={`/users/${profile.id}`}>
{randomGreeting(
preferredName ||
profile.displayName ||
"Robloxian!"
)}
</Link>
) : (
<Skeleton className="w-56 sm:w-96 h-7 sm:h-8 rounded-lg" />
)}
{!!accountSettings &&
accountSettings.IsPremium === true ? (
<RobloxPremiumSmall className="w-5 h-5 sm:w-6 sm:h-6 fill-transparent" />
) : null}
{isLoaded && profile.hasVerifiedBadge ? (
<RobloxVerifiedSmall className="w-5 h-5 sm:w-6 sm:h-6 fill-blue text-base" />
) : null}
</span>
<span className="text-sm font-super-mono text-subtext0 mt-1">
{isLoaded ? (
<>
@{profile.name}
{!!userActivity && userPresence === 2 ? (
<> - {userActivity.lastLocation}</>
) : null}
</>
) : (
<Skeleton className="w-40 sm:w-64 h-5 sm:h-6 rounded-lg" />
)}
</span>
</div>
</div>
</div>
</>

126
components/site/OutfitQuickChooser.tsx
View File

@@ -6,8 +6,9 @@ import LazyLoadedImage from "../util/LazyLoadedImage";
import { StupidHoverThing } from "../util/MiscStuff";
import { loadThumbnails } from "@/lib/thumbnailLoader";
import { useCurrentAccount } from "@/hooks/roblox/useCurrentAccount";
import { useEffect } from "react";
import { X } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { Search, X } from "lucide-react";
import { Input } from "@/components/ui/input";
type OutfitSelectorProps = {
setVisible: (visible: boolean) => void;
@@ -23,6 +24,7 @@ export function OutfitSelector({
}: OutfitSelectorProps) {
const outfits = useAvatarOutfits();
const acc = useCurrentAccount();
const [query, setQuery] = useState("");
useEffect(() => {
if (!outfits || outfits.length === 0) return;
@@ -47,6 +49,15 @@ export function OutfitSelector({
const isLoading = outfits === null;
const hasOutfits = Array.isArray(outfits) && outfits.length > 0;
const filteredOutfits = useMemo(() => {
if (!hasOutfits) return [];
if (!query.trim()) return outfits;
const lowered = query.trim().toLowerCase();
return outfits.filter((outfit) =>
outfit.name.toLowerCase().includes(lowered)
);
}, [hasOutfits, outfits, query]);
return (
<div
className="fixed inset-0 z-40 flex items-center justify-center bg-mantle/70 backdrop-blur-sm"
@@ -56,21 +67,36 @@ export function OutfitSelector({
className="relative w-full max-w-3xl sm:max-w-4xl mx-4 rounded-2xl bg-crust/95 ring-1 ring-surface0/60 shadow-2xl"
onClick={(event) => event.stopPropagation()}
>
<div className="flex items-center justify-between border-b border-surface0/60 px-6 py-4">
<div className="flex flex-col gap-3 border-b border-surface0/60 px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<p className="text-lg font-semibold text-text">Outfits</p>
<p className="text-lg font-semibold text-text">
Outfits
</p>
<p className="text-xs text-subtext1">
Pick a look to update your avatar instantly.
</p>
</div>
<Button
variant="ghost"
size="icon"
onClick={() => setVisible(false)}
aria-label="Close outfit chooser"
>
<X className="h-4 w-4" />
</Button>
<div className="flex items-center gap-2">
<div className="relative w-full sm:w-64">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-subtext1" />
<Input
value={query}
onChange={(event) =>
setQuery(event.target.value)
}
placeholder="Search outfits"
className="pl-9"
/>
</div>
<Button
variant="ghost"
size="icon"
onClick={() => setVisible(false)}
aria-label="Close outfit chooser"
>
<X className="h-4 w-4" />
</Button>
</div>
</div>
<div className="p-6">
@@ -91,39 +117,55 @@ export function OutfitSelector({
))}
</div>
) : hasOutfits ? (
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 max-h-[60vh] overflow-y-auto pr-2">
{outfits.map((outfit: { id: number; name: string }) => (
<StupidHoverThing
key={outfit.id}
delayDuration={0}
text={outfit.name}
>
<button
className="group rounded-xl border border-surface0/50 bg-base/40 p-3 text-left transition hover:-translate-y-0.5 hover:border-surface1/80 hover:bg-surface0/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue/60"
onClick={async () => {
await updateOutfit(outfit, acc);
setVisible(false);
}}
aria-label={`Wear ${outfit.name}`}
>
<LazyLoadedImage
imgId={`Outfit_${outfit.id}`}
alt={outfit.name}
className="h-24 w-24 sm:h-28 sm:w-28 rounded-lg object-cover shadow-sm"
size="420x420"
lazyFetch={false}
/>
<p className="mt-3 text-xs font-medium text-text line-clamp-2">
{outfit.name}
</p>
</button>
</StupidHoverThing>
))}
<div className="space-y-4">
<p className="text-xs text-subtext1">
{filteredOutfits.length} outfit
{filteredOutfits.length === 1 ? "" : "s"}
</p>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 max-h-[60vh] overflow-y-auto pr-2">
{filteredOutfits.map(
(outfit: { id: number; name: string }) => (
<StupidHoverThing
key={outfit.id}
delayDuration={0}
text={outfit.name}
>
<button
className="group rounded-xl border border-surface0/50 bg-base/40 p-3 text-left transition hover:-translate-y-0.5 hover:border-surface1/80 hover:bg-surface0/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue/60"
onClick={async () => {
await updateOutfit(
outfit,
acc
);
setVisible(false);
}}
aria-label={`Wear ${outfit.name}`}
>
<LazyLoadedImage
imgId={`Outfit_${outfit.id}`}
alt={outfit.name}
className="h-24 w-24 sm:h-28 sm:w-28 rounded-lg object-cover shadow-sm"
size="420x420"
lazyFetch={false}
/>
<p className="mt-3 text-xs font-medium text-text line-clamp-2">
{outfit.name}
</p>
</button>
</StupidHoverThing>
)
)}
</div>
{filteredOutfits.length === 0 ? (
<div className="rounded-xl border border-surface0/60 bg-base/50 p-4 text-sm text-subtext1">
No outfits match that search yet.
</div>
) : null}
</div>
) : (
<div className="rounded-xl border border-surface0/60 bg-base/50 p-6 text-sm text-subtext1">
No outfits found yet. Make one in the Roblox avatar editor,
then come back here.
No outfits found yet. Make one in the Roblox avatar
editor, then come back here.
</div>
)}
</div>

14
components/site/QuickTopUI.tsx
View File

@@ -81,9 +81,12 @@ async function updateOutfit(outfit: { id: number }, acc: { id: number }) {
);
}
await proxyFetch(`https://avatar.roblox.com/v1/avatar/redraw-thumbnail`, {
method: "POST"
});
await proxyFetch(
`https://avatar.roblox.com/v1/avatar/redraw-thumbnail`,
{
method: "POST"
}
);
loadThumbnails([
{
@@ -158,7 +161,10 @@ export const QuickTopUILogoPart = React.memo(function () {
>
<img src="/roblox.png" className="w-6 h-6" alt="" />
</Link>
<Link href="/" className="gap-2 flex items-center text-sm font-medium">
<Link
href="/"
className="gap-2 flex items-center text-sm font-medium"
>
<p>{"Roblox"}</p>
{/* <p className="text-surface2 line-clamp-1">
{process.env.NODE_ENV} {process.env.NEXT_PUBLIC_CWD}{" "}