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

chatgpt codex: told to improve ux/ui consistently, 5 times

Browse Source
This commit is contained in:
Kris
2025-12-28 01:00:04 +02:00
parent d12cf3b649
commit cc7b93c658
16 changed files with 128 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/games/[id]/content.tsx
View File

@@ -35,7 +35,7 @@ export default function GamePageContent({
if (!hasHydrated || !game) {
return (
<div className="mx-auto w-full max-w-6xl px-4 sm:px-8 py-6 space-y-6">
<div className="page-container py-6 space-y-6">
<div className="grid gap-6 lg:grid-cols-[2fr_1fr]">
<div className="aspect-video rounded-2xl bg-surface0/60 animate-pulse" />
<div className="space-y-4">
@@ -55,7 +55,7 @@ export default function GamePageContent({
</div>
</div>
</div>
<div className="rounded-2xl border border-surface0/60 bg-base/40 p-6">
<div className="panel-soft p-6">
<div className="h-5 w-24 rounded bg-surface0/60 animate-pulse" />
<div className="mt-3 h-4 w-full rounded bg-surface0/60 animate-pulse" />
<div className="mt-2 h-4 w-2/3 rounded bg-surface0/60 animate-pulse" />
@@ -72,9 +72,9 @@ export default function GamePageContent({
: null;
return (
<div className="mx-auto w-full max-w-6xl px-4 sm:px-8 py-6 space-y-6">
<div className="page-container py-6 space-y-6">
<div className="grid gap-6 lg:grid-cols-[2fr_1fr]">
<div className="rounded-2xl overflow-hidden bg-surface0/40 ring-1 ring-surface1/60 aspect-video">
<div className="panel overflow-hidden aspect-video">
<LazyLoadedImage
imgId={`GameThumbnail_${game.rootPlaceId}`}
alt={game.name}
@@ -129,25 +129,25 @@ export default function GamePageContent({
</div>
<div className="grid grid-cols-2 gap-3 text-sm">
<div className="rounded-xl border border-surface0/60 bg-base/40 p-3">
<div className="stat-card">
<p className="text-subtext1">Playing now</p>
<p className="text-lg font-semibold text-text">
{game.playing.toLocaleString()}
</p>
</div>
<div className="rounded-xl border border-surface0/60 bg-base/40 p-3">
<div className="stat-card">
<p className="text-subtext1">Total visits</p>
<p className="text-lg font-semibold text-text">
{game.visits.toLocaleString()}
</p>
</div>
<div className="rounded-xl border border-surface0/60 bg-base/40 p-3">
<div className="stat-card">
<p className="text-subtext1">Favorites</p>
<p className="text-lg font-semibold text-text">
{game.favoritedCount.toLocaleString()}
</p>
</div>
<div className="rounded-xl border border-surface0/60 bg-base/40 p-3">
<div className="stat-card">
<p className="text-subtext1">Max players</p>
<p className="text-lg font-semibold text-text">
{game.maxPlayers}
@@ -173,7 +173,7 @@ export default function GamePageContent({
</div>
</div>
<div className="rounded-2xl border border-surface0/60 bg-base/40 p-6">
<div className="panel-soft p-6">
<h2 className="text-lg font-semibold text-text">About</h2>
<p className="mt-2 text-sm text-subtext1 whitespace-pre-line">
{game.description || "No description provided yet."}

8
app/games/[id]/page.tsx
View File

@@ -9,7 +9,13 @@ export default async function GamePageContent({
params: { id: string };
}) {
return (
<Suspense fallback={<div className="p-4">Loading profile…</div>}>
<Suspense
fallback={
<div className="page-container py-6 text-sm text-subtext1">
Loading game…
</div>
}
>
<GamePageContentF placeId={(await params).id} />
</Suspense>
);

50
app/globals.css
View File

@@ -134,8 +134,7 @@ body {
h1,
h2,
h3 {
font-family: var(--font-space-grotesk), var(--font-geist-sans), sans-serif;
letter-spacing: -0.02em;
@apply tracking-tight;
}
a {
text-decoration: underline;
@@ -165,33 +164,26 @@ body {
-ms-overflow-style: none;
scrollbar-width: 0;
}
.ambient-backdrop {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(
1200px 700px at 10% -10%,
hsl(var(--glow-2) / 0.2),
transparent 55%
),
radial-gradient(
900px 600px at 95% 0%,
hsl(var(--glow-1) / 0.22),
transparent 60%
),
radial-gradient(
800px 500px at 50% 100%,
hsl(var(--glow-3) / 0.18),
transparent 55%
),
linear-gradient(
180deg,
hsl(var(--background)) 0%,
hsl(var(--background)) 45%,
hsl(var(--muted)) 100%
);
.page-container {
@apply mx-auto w-full max-w-6xl px-4 sm:px-8;
}
.section-title {
@apply text-xl sm:text-2xl font-semibold text-text;
}
.panel {
@apply rounded-3xl bg-base/50 ring-1 ring-surface1/60 shadow-lg;
}
.panel-blur {
@apply rounded-3xl bg-base/50 ring-1 ring-surface1/60 shadow-lg backdrop-blur-lg;
}
.panel-soft {
@apply rounded-3xl border border-surface1/60 bg-base/40;
}
.glass-soft {
@apply rounded-3xl bg-base/35 ring-1 ring-surface0/60 shadow-lg backdrop-blur-md;
}
.stat-card {
@apply rounded-2xl border border-surface1/60 bg-base/40 p-3 shadow-md;
}
}
@utility border-border {

13
app/layout.tsx
View File

@@ -1,5 +1,5 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono, Space_Grotesk } from "next/font/google";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { TooltipProvider } from "@/components/ui/tooltip";
import { Toaster } from "@/components/ui/toaster";
@@ -20,10 +20,6 @@ const geistMono = Geist_Mono({
subsets: ["latin"]
});
const spaceGrotesk = Space_Grotesk({
variable: "--font-space-grotesk",
subsets: ["latin"]
});
export const metadata: Metadata = {
title: "Home | Roblox",
@@ -49,13 +45,16 @@ export default function RootLayout({
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} ${spaceGrotesk.variable} antialiased overflow-x-hidden mocha`}
className={`${geistSans.variable} ${geistMono.variable} antialiased overflow-x-hidden mocha`}
>
<ReactQueryProvider>
<TooltipProvider>
<GameLaunchProvider>
<main className="relative min-h-screen z-10">
<div className="ambient-backdrop" aria-hidden="true" />
<div
className="fixed inset-0 z-0 pointer-events-none bg-background"
aria-hidden="true"
/>
{/* <Image
src={"/bg.png"}
width={1920}

6
app/page.tsx
View File

@@ -48,7 +48,7 @@ export default function Home() {
<>
<HomeLoggedInHeader />
<div className="h-4" />
<div className="mx-auto w-full max-w-6xl px-4 sm:px-8">
<div className="page-container">
<BestFriendsHomeSect className="pt-2" />
<FriendsHomeSect className="pt-2" />
</div>
@@ -63,7 +63,7 @@ export default function Home() {
</Alert>
</div> */}
<div className="mx-auto w-full max-w-6xl px-4 sm:px-8 pb-16 space-y-10 no-scrollbar">
<div className="page-container pb-16 space-y-10 no-scrollbar">
{isLoading ? (
<div className="space-y-6">
<div className="h-6 w-56 bg-surface0/60 rounded-lg animate-pulse" />
@@ -92,7 +92,7 @@ export default function Home() {
.map((sort, idx) => (
<section key={idx} className="space-y-4">
<div className="flex items-center justify-between">
<h2 className="text-xl sm:text-2xl font-semibold text-text">
<h2 className="section-title">
{sort.topic}
</h2>
</div>

24
app/users/[id]/content.tsx
View File

@@ -26,8 +26,8 @@ function ProfileMoreDetails({ profile }: { profile: UserProfileDetails }) {
{/*
//@ts-expect-error */}
<FriendCarousel
title={<span className="pl-4">Friends</span>}
className="overflow-visible -ml-4"
title="Friends"
className="overflow-visible"
friends={theirFriends || []}
/>
</>
@@ -50,15 +50,25 @@ export default function UserProfileContent({
}
}, [profile]);
if (isLoading) return <div className="p-4">Loading user profile...</div>;
if (isLoading)
return (
<div className="page-container py-6 space-y-6">
<div className="h-10 w-64 rounded-lg bg-surface0/60 animate-pulse" />
<div className="panel-soft h-32 animate-pulse" />
<div className="panel-soft h-64 animate-pulse" />
</div>
);
if (!profile) notFound();
return (
<div className="p-4 space-y-6">
<div className="page-container py-6 space-y-6">
<UserProfileHeader user={profile} />
<Separator />
<div className="break-all pl-4 whitespace-pre-line">
{profile.description}
<Separator className="bg-surface0/60" />
<div className="panel-soft p-6">
<h2 className="text-lg font-semibold text-text">About</h2>
<p className="mt-2 text-sm text-subtext1 break-all whitespace-pre-line">
{profile.description || "No description provided yet."}
</p>
</div>
{profile.isBanned && (
<>

8
app/users/[id]/page.tsx
View File

@@ -8,7 +8,13 @@ export default async function UserProfilePage({
params: { id: string };
}) {
return (
<Suspense fallback={<div className="p-4">Loading profile…</div>}>
<Suspense
fallback={
<div className="page-container py-6 text-sm text-subtext1">
Loading profile…
</div>
}
>
<UserProfileContent userId={(await params).id} />
</Suspense>
);