chore: fix tailwind v4 styling & format styling
This commit is contained in:
+296
-178
@@ -173,7 +173,8 @@ function getFpsColor(preset: Preset): string {
|
||||
if (preset.frameGenMethod === "dlss_fg") return "text-blue-400"
|
||||
return "text-orange-400"
|
||||
}
|
||||
if (preset.fsrVersion && preset.fsrVersion !== "none") return "text-orange-400"
|
||||
if (preset.fsrVersion && preset.fsrVersion !== "none")
|
||||
return "text-orange-400"
|
||||
return "text-text/60"
|
||||
}
|
||||
|
||||
@@ -242,8 +243,12 @@ export function GamePageClient({
|
||||
const filterUpscaler = (arr: StatsResponse["upscalerStats"]) =>
|
||||
arr.filter((item) => {
|
||||
if (!deviceSet.has(item.hardwareSlug)) return false
|
||||
if (filters.fsr !== "all" && item.fsrVersion !== filters.fsr) return false
|
||||
if (filters.frameGen !== "all" && item.frameGenMethod !== filters.frameGen)
|
||||
if (filters.fsr !== "all" && item.fsrVersion !== filters.fsr)
|
||||
return false
|
||||
if (
|
||||
filters.frameGen !== "all" &&
|
||||
item.frameGenMethod !== filters.frameGen
|
||||
)
|
||||
return false
|
||||
return true
|
||||
})
|
||||
@@ -254,7 +259,9 @@ export function GamePageClient({
|
||||
historical: stats.historical
|
||||
.map((h) => ({
|
||||
...h,
|
||||
entries: h.entries.filter((e) => deviceSet.has(e.hardwareSlug)),
|
||||
entries: h.entries.filter((e) =>
|
||||
deviceSet.has(e.hardwareSlug),
|
||||
),
|
||||
}))
|
||||
.filter((h) => h.entries.length > 0),
|
||||
upscalerStats: filterUpscaler(stats.upscalerStats),
|
||||
@@ -267,12 +274,20 @@ export function GamePageClient({
|
||||
// Filtered presets
|
||||
const filteredPresets = useMemo(() => {
|
||||
return presets.filter((p) => {
|
||||
if (selectedDevices.length > 0 && !selectedDevices.includes(p.hardwareSlug))
|
||||
if (
|
||||
selectedDevices.length > 0 &&
|
||||
!selectedDevices.includes(p.hardwareSlug)
|
||||
)
|
||||
return false
|
||||
if (filters.proton !== "all" && p.protonVersion !== filters.proton)
|
||||
return false
|
||||
if (filters.proton !== "all" && p.protonVersion !== filters.proton) return false
|
||||
if (filters.os !== "all" && p.osVersion !== filters.os) return false
|
||||
if (filters.fsr !== "all" && p.fsrVersion !== filters.fsr) return false
|
||||
if (filters.frameGen !== "all" && p.frameGenMethod !== filters.frameGen)
|
||||
if (filters.fsr !== "all" && p.fsrVersion !== filters.fsr)
|
||||
return false
|
||||
if (
|
||||
filters.frameGen !== "all" &&
|
||||
p.frameGenMethod !== filters.frameGen
|
||||
)
|
||||
return false
|
||||
return true
|
||||
})
|
||||
@@ -289,64 +304,66 @@ export function GamePageClient({
|
||||
|
||||
const toggleDevice = useCallback((slug: string) => {
|
||||
setSelectedDevices((prev) =>
|
||||
prev.includes(slug) ? prev.filter((s) => s !== slug) : [...prev, slug]
|
||||
prev.includes(slug)
|
||||
? prev.filter((s) => s !== slug)
|
||||
: [...prev, slug],
|
||||
)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<section className="w-full flex flex-col gap-8 pb-16">
|
||||
<section className='w-full flex flex-col gap-8 pb-16'>
|
||||
{/* Section 1: Hero Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="px-4 md:px-[10svw] pt-6"
|
||||
className='px-4 md:px-[10svw] pt-6'
|
||||
>
|
||||
<div className="max-w-7xl mx-auto flex gap-4 sm:gap-6">
|
||||
<div className='max-w-7xl mx-auto flex gap-4 sm:gap-6'>
|
||||
{/* Cover image */}
|
||||
<div className="relative shrink-0 aspect-[2/3] w-28 sm:w-32 md:w-36 rounded-lg overflow-hidden border border-border bg-text/5">
|
||||
<div className='relative shrink-0 aspect-2/3 w-28 sm:w-32 md:w-36 rounded-lg overflow-hidden border border-border bg-text/5'>
|
||||
{coverImage && !imgError ? (
|
||||
<Image
|
||||
src={coverImage}
|
||||
alt={game.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
className='object-cover'
|
||||
priority
|
||||
onError={handleImgError}
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full flex items-center justify-center">
|
||||
<Gamepad2Icon className="h-10 w-10 text-text/20" />
|
||||
<div className='w-full h-full flex items-center justify-center'>
|
||||
<Gamepad2Icon className='h-10 w-10 text-text/20' />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="flex flex-col gap-2 min-w-0">
|
||||
<div className='flex flex-col gap-2 min-w-0'>
|
||||
{/* Title row */}
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<h1 className="text-xl sm:text-2xl md:text-3xl font-bold truncate">
|
||||
<div className='flex flex-wrap items-center gap-2'>
|
||||
<h1 className='text-xl sm:text-2xl md:text-3xl font-bold truncate'>
|
||||
{game.title}
|
||||
</h1>
|
||||
{stats?.isRawPerformer && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-green-500/10 border border-green-500/20 text-green-400 text-[10px] font-semibold">
|
||||
<SparklesIcon className="h-3 w-3" />
|
||||
<span className='inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-green-500/10 border border-green-500/20 text-green-400 text-[10px] font-semibold'>
|
||||
<SparklesIcon className='h-3 w-3' />
|
||||
Raw Performer
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Subtitle */}
|
||||
<div className="flex flex-wrap items-center gap-2 text-sm text-text/70">
|
||||
<div className='flex flex-wrap items-center gap-2 text-sm text-text/70'>
|
||||
{game.developer && <span>{game.developer}</span>}
|
||||
{game.developer && game.publisher && (
|
||||
<span className="text-text/40">·</span>
|
||||
<span className='text-text/40'>·</span>
|
||||
)}
|
||||
{game.publisher && <span>{game.publisher}</span>}
|
||||
{game.genres && game.genres.length > 0 && (
|
||||
<>
|
||||
<span className="text-text/40">·</span>
|
||||
<span className="text-text/60">
|
||||
<span className='text-text/40'>·</span>
|
||||
<span className='text-text/60'>
|
||||
{game.genres.slice(0, 3).join(", ")}
|
||||
</span>
|
||||
</>
|
||||
@@ -354,12 +371,25 @@ export function GamePageClient({
|
||||
</div>
|
||||
|
||||
{/* Stats badges */}
|
||||
<div className="flex flex-wrap items-center gap-2 mt-1">
|
||||
<Badge icon={TrendingUpIcon} value={counts.benchmarks} label="Benchmarks" />
|
||||
<Badge icon={SettingsIcon} value={counts.presets} label="Presets" />
|
||||
<Badge icon={MessageSquareIcon} value={counts.comments} label="Comments" />
|
||||
{game.metascore !== undefined && game.metascore !== null && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-yellow-500/10 border border-yellow-500/20 text-yellow-400 text-[10px] font-semibold">
|
||||
<div className='flex flex-wrap items-center gap-2 mt-1'>
|
||||
<Badge
|
||||
icon={TrendingUpIcon}
|
||||
value={counts.benchmarks}
|
||||
label='Benchmarks'
|
||||
/>
|
||||
<Badge
|
||||
icon={SettingsIcon}
|
||||
value={counts.presets}
|
||||
label='Presets'
|
||||
/>
|
||||
<Badge
|
||||
icon={MessageSquareIcon}
|
||||
value={counts.comments}
|
||||
label='Comments'
|
||||
/>
|
||||
{game.metascore !== undefined &&
|
||||
game.metascore !== null && (
|
||||
<span className='inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-yellow-500/10 border border-yellow-500/20 text-yellow-400 text-[10px] font-semibold'>
|
||||
★ {game.metascore}
|
||||
</span>
|
||||
)}
|
||||
@@ -367,70 +397,71 @@ export function GamePageClient({
|
||||
{session && (
|
||||
<Link
|
||||
href={`/game/${game.id}/submit`}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-white text-sm font-semibold hover:bg-primary/90 transition-colors cursor-pointer"
|
||||
className='inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-primary text-white text-sm font-semibold hover:bg-primary/90 transition-colors cursor-pointer'
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
<Plus className='h-4 w-4' />
|
||||
Add Benchmark
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* External links */}
|
||||
<div className="flex flex-wrap items-center gap-3 mt-1">
|
||||
<div className='flex flex-wrap items-center gap-3 mt-1'>
|
||||
{game.storeUrl && (
|
||||
<a
|
||||
href={game.storeUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-xs text-text/60 hover:text-primary transition-colors cursor-pointer"
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
className='inline-flex items-center gap-1 text-xs text-text/60 hover:text-primary transition-colors cursor-pointer'
|
||||
>
|
||||
<FaSteam className="h-3.5 w-3.5" />
|
||||
<FaSteam className='h-3.5 w-3.5' />
|
||||
Steam
|
||||
<ExternalLinkIcon className="h-3 w-3" />
|
||||
<ExternalLinkIcon className='h-3 w-3' />
|
||||
</a>
|
||||
)}
|
||||
{protonDbUrl && (
|
||||
<a
|
||||
href={protonDbUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-xs text-text/60 hover:text-primary transition-colors cursor-pointer"
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
className='inline-flex items-center gap-1 text-xs text-text/60 hover:text-primary transition-colors cursor-pointer'
|
||||
>
|
||||
ProtonDB
|
||||
<ExternalLinkIcon className="h-3 w-3" />
|
||||
<ExternalLinkIcon className='h-3 w-3' />
|
||||
</a>
|
||||
)}
|
||||
{steamDbUrl && (
|
||||
<a
|
||||
href={steamDbUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-1 text-xs text-text/60 hover:text-primary transition-colors cursor-pointer"
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
className='inline-flex items-center gap-1 text-xs text-text/60 hover:text-primary transition-colors cursor-pointer'
|
||||
>
|
||||
SteamDB
|
||||
<ExternalLinkIcon className="h-3 w-3" />
|
||||
<ExternalLinkIcon className='h-3 w-3' />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* DB stats row */}
|
||||
{stats && (
|
||||
<div className="flex flex-wrap items-center gap-3 mt-1 text-xs text-text/50">
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<DatabaseIcon className="h-3 w-3" />
|
||||
<div className='flex flex-wrap items-center gap-3 mt-1 text-xs text-text/50'>
|
||||
<span className='inline-flex items-center gap-1'>
|
||||
<DatabaseIcon className='h-3 w-3' />
|
||||
{stats.summary.versionCount} versions
|
||||
</span>
|
||||
<span>·</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<SparklesIcon className="h-3 w-3" />
|
||||
<span className='inline-flex items-center gap-1'>
|
||||
<SparklesIcon className='h-3 w-3' />
|
||||
{stats.summary.verifiedCount} verified
|
||||
</span>
|
||||
{game.lastSync && (
|
||||
<>
|
||||
<span>·</span>
|
||||
<span className="inline-flex items-center gap-1">
|
||||
<ClockIcon className="h-3 w-3" />
|
||||
Last sync {formatDate(game.lastSync)}
|
||||
<span className='inline-flex items-center gap-1'>
|
||||
<ClockIcon className='h-3 w-3' />
|
||||
Last sync{" "}
|
||||
{formatDate(game.lastSync)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
@@ -445,38 +476,52 @@ export function GamePageClient({
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay: 0.1 }}
|
||||
className="px-4 md:px-[10svw]"
|
||||
className='px-4 md:px-[10svw]'
|
||||
>
|
||||
<div className="max-w-7xl mx-auto flex flex-col md:flex-row gap-6">
|
||||
<div className='max-w-7xl mx-auto flex flex-col md:flex-row gap-6'>
|
||||
{/* Left: Description */}
|
||||
<div className="flex-[2]">
|
||||
<h2 className="text-sm font-medium uppercase tracking-wider text-text/60 mb-3">
|
||||
<div className='flex-2'>
|
||||
<h2 className='text-sm font-medium uppercase tracking-wider text-text/60 mb-3'>
|
||||
About
|
||||
</h2>
|
||||
{game.description ? (
|
||||
<p className="text-sm text-text/80 leading-relaxed whitespace-pre-line">
|
||||
<p className='text-sm text-text/80 leading-relaxed whitespace-pre-line'>
|
||||
{game.description}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-sm text-text/40 italic">No description available.</p>
|
||||
<p className='text-sm text-text/40 italic'>
|
||||
No description available.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right: Metadata grid */}
|
||||
<div className="flex-1">
|
||||
<h2 className="text-sm font-medium uppercase tracking-wider text-text/60 mb-3">
|
||||
<div className='flex-1'>
|
||||
<h2 className='text-sm font-medium uppercase tracking-wider text-text/60 mb-3'>
|
||||
Details
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 gap-3 text-sm">
|
||||
<MetaItem label="Source" value={game.source} />
|
||||
<div className='grid grid-cols-2 gap-3 text-sm'>
|
||||
<MetaItem
|
||||
label='Source'
|
||||
value={game.source}
|
||||
/>
|
||||
{game.steamAppId !== null && (
|
||||
<MetaItem label="Steam AppID" value={String(game.steamAppId)} />
|
||||
<MetaItem
|
||||
label='Steam AppID'
|
||||
value={String(game.steamAppId)}
|
||||
/>
|
||||
)}
|
||||
<MetaItem label="Added" value={formatDate(game.createdAt)} />
|
||||
<MetaItem label="Last Sync" value={formatDate(game.lastSync)} />
|
||||
<MetaItem
|
||||
label='Added'
|
||||
value={formatDate(game.createdAt)}
|
||||
/>
|
||||
<MetaItem
|
||||
label='Last Sync'
|
||||
value={formatDate(game.lastSync)}
|
||||
/>
|
||||
{game.onlineMultiplayerStatus && (
|
||||
<MetaItem
|
||||
label="Online Multiplayer"
|
||||
label='Online Multiplayer'
|
||||
value={game.onlineMultiplayerStatus}
|
||||
/>
|
||||
)}
|
||||
@@ -484,20 +529,23 @@ export function GamePageClient({
|
||||
|
||||
{/* Platform Support */}
|
||||
{platformSupport.length > 0 && (
|
||||
<div className="mt-4">
|
||||
<h3 className="text-xs font-medium uppercase tracking-wider text-text/50 mb-2">
|
||||
<div className='mt-4'>
|
||||
<h3 className='text-xs font-medium uppercase tracking-wider text-text/50 mb-2'>
|
||||
Platform Support
|
||||
</h3>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className='flex flex-col gap-2'>
|
||||
{platformSupport.map((ps) => (
|
||||
<div
|
||||
key={ps.id}
|
||||
className="flex items-center justify-between p-2 rounded-md border border-border bg-text/[0.03]"
|
||||
className='flex items-center justify-between p-2 rounded-md border border-border bg-text/3'
|
||||
>
|
||||
<span className="text-xs font-medium capitalize">
|
||||
{ps.hardwareSlug.replace(/-/g, " ")}
|
||||
<span className='text-xs font-medium capitalize'>
|
||||
{ps.hardwareSlug.replace(
|
||||
/-/g,
|
||||
" ",
|
||||
)}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className='flex items-center gap-2'>
|
||||
<span
|
||||
className={`text-[10px] px-1.5 py-0.5 rounded-full ${
|
||||
ps.isSupported
|
||||
@@ -505,9 +553,11 @@ export function GamePageClient({
|
||||
: "bg-red-500/20 text-red-400"
|
||||
}`}
|
||||
>
|
||||
{ps.isSupported ? "Supported" : "Unsupported"}
|
||||
{ps.isSupported
|
||||
? "Supported"
|
||||
: "Unsupported"}
|
||||
</span>
|
||||
<span className="text-[10px] text-text/50 capitalize">
|
||||
<span className='text-[10px] text-text/50 capitalize'>
|
||||
{ps.protonStatus}
|
||||
</span>
|
||||
</div>
|
||||
@@ -525,18 +575,22 @@ export function GamePageClient({
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay: 0.15 }}
|
||||
className="px-4 md:px-[10svw]"
|
||||
className='px-4 md:px-[10svw]'
|
||||
>
|
||||
<div className="max-w-7xl mx-auto flex flex-col gap-4">
|
||||
<div className='max-w-7xl mx-auto flex flex-col gap-4'>
|
||||
{/* Device ribbon */}
|
||||
{stats && stats.deviceBreakdown.length > 0 && (
|
||||
<div className="flex items-center gap-2 overflow-x-auto pb-1 scrollbar-hide">
|
||||
<div className='flex items-center gap-2 overflow-x-auto pb-1 scrollbar-hide'>
|
||||
{stats.deviceBreakdown.map((device) => {
|
||||
const active = selectedDevices.includes(device.hardwareSlug)
|
||||
const active = selectedDevices.includes(
|
||||
device.hardwareSlug,
|
||||
)
|
||||
return (
|
||||
<button
|
||||
key={device.hardwareSlug}
|
||||
onClick={() => toggleDevice(device.hardwareSlug)}
|
||||
onClick={() =>
|
||||
toggleDevice(device.hardwareSlug)
|
||||
}
|
||||
className={`shrink-0 px-3 py-1.5 rounded-full text-xs font-medium border transition-colors cursor-pointer ${
|
||||
active
|
||||
? "bg-primary/20 border-primary text-primary"
|
||||
@@ -544,7 +598,9 @@ export function GamePageClient({
|
||||
}`}
|
||||
>
|
||||
{device.hardwareName}
|
||||
<span className="ml-1 text-text/40">({device.count})</span>
|
||||
<span className='ml-1 text-text/40'>
|
||||
({device.count})
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
@@ -552,32 +608,46 @@ export function GamePageClient({
|
||||
)}
|
||||
|
||||
{/* Fine filters */}
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className='flex flex-wrap items-center gap-2'>
|
||||
<FilterSelect
|
||||
label="Proton Version"
|
||||
label='Proton Version'
|
||||
value={filters.proton}
|
||||
options={["all", ...(stats?.filterOptions.protonVersions ?? [])]}
|
||||
onChange={(v) => setFilters((f) => ({ ...f, proton: v }))}
|
||||
options={[
|
||||
"all",
|
||||
...(stats?.filterOptions.protonVersions ?? []),
|
||||
]}
|
||||
onChange={(v) =>
|
||||
setFilters((f) => ({ ...f, proton: v }))
|
||||
}
|
||||
/>
|
||||
<FilterSelect
|
||||
label="SteamOS Version"
|
||||
label='SteamOS Version'
|
||||
value={filters.os}
|
||||
options={["all", ...(stats?.filterOptions.osVersions ?? [])]}
|
||||
onChange={(v) => setFilters((f) => ({ ...f, os: v }))}
|
||||
options={[
|
||||
"all",
|
||||
...(stats?.filterOptions.osVersions ?? []),
|
||||
]}
|
||||
onChange={(v) =>
|
||||
setFilters((f) => ({ ...f, os: v }))
|
||||
}
|
||||
/>
|
||||
<FilterSelect
|
||||
label="FSR Version"
|
||||
label='FSR Version'
|
||||
value={filters.fsr}
|
||||
options={FSR_OPTIONS.map((o) => o.toLowerCase())}
|
||||
onChange={(v) => setFilters((f) => ({ ...f, fsr: v }))}
|
||||
onChange={(v) =>
|
||||
setFilters((f) => ({ ...f, fsr: v }))
|
||||
}
|
||||
/>
|
||||
<FilterSelect
|
||||
label="Frame Gen Method"
|
||||
label='Frame Gen Method'
|
||||
value={filters.frameGen}
|
||||
options={FRAMEGEN_OPTIONS.map((o) =>
|
||||
o.toLowerCase().replace(" ", "_")
|
||||
o.toLowerCase().replace(" ", "_"),
|
||||
)}
|
||||
onChange={(v) => setFilters((f) => ({ ...f, frameGen: v }))}
|
||||
onChange={(v) =>
|
||||
setFilters((f) => ({ ...f, frameGen: v }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -588,38 +658,48 @@ export function GamePageClient({
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay: 0.2 }}
|
||||
className="px-4 md:px-[10svw]"
|
||||
className='px-4 md:px-[10svw]'
|
||||
>
|
||||
<div className="max-w-7xl mx-auto flex flex-col gap-6">
|
||||
<div className='max-w-7xl mx-auto flex flex-col gap-6'>
|
||||
{/* Row 1 — Featured */}
|
||||
{filteredStats && (
|
||||
<div className="flex flex-col lg:flex-row gap-4">
|
||||
<div className="flex-[3] rounded-xl border border-border bg-text/[0.03] p-4">
|
||||
<h3 className="text-sm font-medium text-text/80 mb-2">
|
||||
<div className='flex flex-col lg:flex-row gap-4'>
|
||||
<div className='flex-3 rounded-xl border border-border bg-text/3 p-4'>
|
||||
<h3 className='text-sm font-medium text-text/80 mb-2'>
|
||||
Historical Performance
|
||||
</h3>
|
||||
{filteredStats.historical.length > 0 ? (
|
||||
<HistoricalAreaChart data={filteredStats.historical} />
|
||||
<HistoricalAreaChart
|
||||
data={filteredStats.historical}
|
||||
/>
|
||||
) : (
|
||||
<div className="h-[280px] flex items-center justify-center text-sm text-text/40">
|
||||
<div className='h-70 flex items-center justify-center text-sm text-text/40'>
|
||||
No historical data
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col gap-3">
|
||||
<div className='flex-1 flex flex-col gap-3'>
|
||||
<StatCard
|
||||
label="Overall Avg FPS"
|
||||
value={filteredStats.summary.avgFps?.toFixed(1) ?? "—"}
|
||||
label='Overall Avg FPS'
|
||||
value={
|
||||
filteredStats.summary.avgFps?.toFixed(
|
||||
1,
|
||||
) ?? "—"
|
||||
}
|
||||
icon={TrendingUpIcon}
|
||||
/>
|
||||
<StatCard
|
||||
label="Best Device"
|
||||
value={filteredStats.summary.bestDevice ?? "—"}
|
||||
label='Best Device'
|
||||
value={
|
||||
filteredStats.summary.bestDevice ?? "—"
|
||||
}
|
||||
icon={Gamepad2Icon}
|
||||
/>
|
||||
<StatCard
|
||||
label="Total Entries"
|
||||
value={String(filteredStats.summary.totalEntries)}
|
||||
label='Total Entries'
|
||||
value={String(
|
||||
filteredStats.summary.totalEntries,
|
||||
)}
|
||||
icon={DatabaseIcon}
|
||||
/>
|
||||
</div>
|
||||
@@ -628,47 +708,54 @@ export function GamePageClient({
|
||||
|
||||
{/* Loading state */}
|
||||
{loading && (
|
||||
<div className="flex items-center justify-center py-12 text-sm text-text/40">
|
||||
<ClockIcon className="h-4 w-4 animate-spin mr-2" />
|
||||
<div className='flex items-center justify-center py-12 text-sm text-text/40'>
|
||||
<ClockIcon className='h-4 w-4 animate-spin mr-2' />
|
||||
Loading statistics...
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Row 2 — Upscaler Bar */}
|
||||
{filteredStats && filteredStats.upscalerStats.length > 0 && (
|
||||
<div className="rounded-xl border border-border bg-text/[0.03] p-4">
|
||||
<h3 className="text-sm font-medium text-text/80 mb-2">
|
||||
{filteredStats &&
|
||||
filteredStats.upscalerStats.length > 0 && (
|
||||
<div className='rounded-xl border border-border bg-text/3 p-4'>
|
||||
<h3 className='text-sm font-medium text-text/80 mb-2'>
|
||||
Upscaler Performance
|
||||
</h3>
|
||||
<UpscalerBarChart data={filteredStats.upscalerStats} />
|
||||
<UpscalerBarChart
|
||||
data={filteredStats.upscalerStats}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Row 3 — 3-column grid */}
|
||||
{filteredStats && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className='grid grid-cols-1 md:grid-cols-3 gap-4'>
|
||||
{filteredStats.boxplot.length > 0 && (
|
||||
<div className="rounded-xl border border-border bg-text/[0.03] p-4">
|
||||
<h3 className="text-sm font-medium text-text/80 mb-2">
|
||||
<div className='rounded-xl border border-border bg-text/3 p-4'>
|
||||
<h3 className='text-sm font-medium text-text/80 mb-2'>
|
||||
FPS Distribution
|
||||
</h3>
|
||||
<FpsBoxplot data={filteredStats.boxplot} />
|
||||
</div>
|
||||
)}
|
||||
{filteredStats.fpsRange.length > 0 && (
|
||||
<div className="rounded-xl border border-border bg-text/[0.03] p-4">
|
||||
<h3 className="text-sm font-medium text-text/80 mb-2">
|
||||
<div className='rounded-xl border border-border bg-text/3 p-4'>
|
||||
<h3 className='text-sm font-medium text-text/80 mb-2'>
|
||||
FPS Range
|
||||
</h3>
|
||||
<FpsRangeChart data={filteredStats.fpsRange} />
|
||||
<FpsRangeChart
|
||||
data={filteredStats.fpsRange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{filteredStats.deviceBreakdown.length > 0 && (
|
||||
<div className="rounded-xl border border-border bg-text/[0.03] p-4">
|
||||
<h3 className="text-sm font-medium text-text/80 mb-2">
|
||||
<div className='rounded-xl border border-border bg-text/3 p-4'>
|
||||
<h3 className='text-sm font-medium text-text/80 mb-2'>
|
||||
Device Breakdown
|
||||
</h3>
|
||||
<DeviceDonut data={filteredStats.deviceBreakdown} />
|
||||
<DeviceDonut
|
||||
data={filteredStats.deviceBreakdown}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -676,8 +763,8 @@ export function GamePageClient({
|
||||
|
||||
{/* Row 4 — Trust Bar */}
|
||||
{filteredStats && filteredStats.trust.length > 0 && (
|
||||
<div className="rounded-xl border border-border bg-text/[0.03] p-4">
|
||||
<h3 className="text-sm font-medium text-text/80 mb-2">
|
||||
<div className='rounded-xl border border-border bg-text/3 p-4'>
|
||||
<h3 className='text-sm font-medium text-text/80 mb-2'>
|
||||
Community Trust
|
||||
</h3>
|
||||
<TrustBar data={filteredStats.trust} />
|
||||
@@ -691,23 +778,28 @@ export function GamePageClient({
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay: 0.25 }}
|
||||
className="px-4 md:px-[10svw]"
|
||||
className='px-4 md:px-[10svw]'
|
||||
>
|
||||
<div className="max-w-7xl mx-auto flex flex-col gap-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold">Community Presets</h2>
|
||||
<span className="text-xs text-text/50">
|
||||
{filteredPresets.length} preset{filteredPresets.length !== 1 ? "s" : ""}
|
||||
<div className='max-w-7xl mx-auto flex flex-col gap-4'>
|
||||
<div className='flex items-center justify-between'>
|
||||
<h2 className='text-lg font-semibold'>
|
||||
Community Presets
|
||||
</h2>
|
||||
<span className='text-xs text-text/50'>
|
||||
{filteredPresets.length} preset
|
||||
{filteredPresets.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{filteredPresets.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 gap-3 rounded-xl border border-border bg-text/[0.02]">
|
||||
<SettingsIcon className="h-10 w-10 text-text/20" />
|
||||
<p className="text-sm text-text/40">No presets match the selected filters</p>
|
||||
<div className='flex flex-col items-center justify-center py-16 gap-3 rounded-xl border border-border bg-text/2'>
|
||||
<SettingsIcon className='h-10 w-10 text-text/20' />
|
||||
<p className='text-sm text-text/40'>
|
||||
No presets match the selected filters
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4'>
|
||||
{filteredPresets.map((preset) => {
|
||||
const raw = isRawPerformerPreset(preset)
|
||||
const fpsColor = getFpsColor(preset)
|
||||
@@ -717,69 +809,85 @@ export function GamePageClient({
|
||||
className={`flex flex-col gap-3 p-4 rounded-xl border transition-colors ${
|
||||
raw
|
||||
? "border-green-500/30 bg-green-500/5"
|
||||
: "border-border bg-text/[0.03]"
|
||||
: "border-border bg-text/3"
|
||||
}`}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="font-semibold text-sm truncate">
|
||||
<div className='flex items-start justify-between gap-2'>
|
||||
<div className='min-w-0'>
|
||||
<div className='flex items-center gap-2'>
|
||||
<h3 className='font-semibold text-sm truncate'>
|
||||
{preset.name}
|
||||
</h3>
|
||||
{raw && (
|
||||
<span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full bg-green-500/10 border border-green-500/20 text-green-400 text-[9px] font-semibold">
|
||||
<SparklesIcon className="h-2.5 w-2.5" />
|
||||
<span className='inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full bg-green-500/10 border border-green-500/20 text-green-400 text-[9px] font-semibold'>
|
||||
<SparklesIcon className='h-2.5 w-2.5' />
|
||||
Raw
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-text/50 mt-0.5">
|
||||
<p className='text-xs text-text/50 mt-0.5'>
|
||||
{preset.hardwareName}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-xs text-text/60 shrink-0">
|
||||
<TrendingUpIcon className="h-3 w-3" />
|
||||
<div className='flex items-center gap-1 text-xs text-text/60 shrink-0'>
|
||||
<TrendingUpIcon className='h-3 w-3' />
|
||||
{preset.upvotes}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Settings count */}
|
||||
<div className="text-xs text-text/50">
|
||||
<div className='text-xs text-text/50'>
|
||||
{preset.settingsCount} settings
|
||||
</div>
|
||||
|
||||
{/* FPS */}
|
||||
{preset.fpsAvg !== null && (
|
||||
<div className={`text-sm tabular-nums ${fpsColor}`}>
|
||||
<span className="font-semibold">{preset.fpsAvg}</span>
|
||||
<span className="text-text/40"> avg</span>
|
||||
<div
|
||||
className={`text-sm tabular-nums ${fpsColor}`}
|
||||
>
|
||||
<span className='font-semibold'>
|
||||
{preset.fpsAvg}
|
||||
</span>
|
||||
<span className='text-text/40'>
|
||||
{" "}
|
||||
avg
|
||||
</span>
|
||||
{preset.fpsLow !== null && (
|
||||
<span className="text-text/40">
|
||||
{" "}({preset.fpsLow}–{preset.fpsHigh})
|
||||
<span className='text-text/40'>
|
||||
{" "}
|
||||
({preset.fpsLow}–
|
||||
{preset.fpsHigh})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Technology tags */}
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
{preset.fsrVersion && preset.fsrVersion !== "none" && (
|
||||
<span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-purple-500/10 text-purple-400 border border-purple-500/20">
|
||||
<div className='flex flex-wrap items-center gap-1.5'>
|
||||
{preset.fsrVersion &&
|
||||
preset.fsrVersion !==
|
||||
"none" && (
|
||||
<span className='px-1.5 py-0.5 rounded text-[10px] font-medium bg-purple-500/10 text-purple-400 border border-purple-500/20'>
|
||||
{preset.fsrVersion.toUpperCase()}
|
||||
</span>
|
||||
)}
|
||||
{preset.frameGenMethod && preset.frameGenMethod !== "none" && (
|
||||
{preset.frameGenMethod &&
|
||||
preset.frameGenMethod !==
|
||||
"none" && (
|
||||
<span
|
||||
className={`px-1.5 py-0.5 rounded text-[10px] font-medium border ${
|
||||
preset.frameGenMethod === "dlss_fg"
|
||||
preset.frameGenMethod ===
|
||||
"dlss_fg"
|
||||
? "bg-blue-500/10 text-blue-400 border-blue-500/20"
|
||||
: "bg-orange-500/10 text-orange-400 border-orange-500/20"
|
||||
}`}
|
||||
>
|
||||
{preset.frameGenMethod === "fsr_fg"
|
||||
{preset.frameGenMethod ===
|
||||
"fsr_fg"
|
||||
? "FSR FG"
|
||||
: preset.frameGenMethod === "dlss_fg"
|
||||
: preset.frameGenMethod ===
|
||||
"dlss_fg"
|
||||
? "DLSS FG"
|
||||
: preset.frameGenMethod}
|
||||
</span>
|
||||
@@ -787,12 +895,17 @@ export function GamePageClient({
|
||||
</div>
|
||||
|
||||
{/* Proton + OS */}
|
||||
<div className="flex flex-wrap items-center gap-2 text-[10px] text-text/40">
|
||||
<div className='flex flex-wrap items-center gap-2 text-[10px] text-text/40'>
|
||||
{preset.protonVersion && (
|
||||
<span>Proton {preset.protonVersion}</span>
|
||||
<span>
|
||||
Proton{" "}
|
||||
{preset.protonVersion}
|
||||
</span>
|
||||
)}
|
||||
{preset.osVersion && (
|
||||
<span>SteamOS {preset.osVersion}</span>
|
||||
<span>
|
||||
SteamOS {preset.osVersion}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -816,8 +929,8 @@ function Badge({
|
||||
label: string
|
||||
}) {
|
||||
return (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-green-500/10 border border-green-500/20 text-green-400 text-[10px] font-semibold">
|
||||
<Icon className="h-3 w-3" />
|
||||
<span className='inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-green-500/10 border border-green-500/20 text-green-400 text-[10px] font-semibold'>
|
||||
<Icon className='h-3 w-3' />
|
||||
{value} {label}
|
||||
</span>
|
||||
)
|
||||
@@ -825,11 +938,11 @@ function Badge({
|
||||
|
||||
function MetaItem({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-[10px] text-text/50 uppercase tracking-wider">
|
||||
<div className='flex flex-col gap-1'>
|
||||
<span className='text-[10px] text-text/50 uppercase tracking-wider'>
|
||||
{label}
|
||||
</span>
|
||||
<span className="text-text/80 text-sm">{value}</span>
|
||||
<span className='text-text/80 text-sm'>{value}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -844,13 +957,15 @@ function StatCard({
|
||||
icon: React.ElementType
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center gap-3 p-4 rounded-xl border border-border bg-text/[0.03]">
|
||||
<div className="flex items-center justify-center h-9 w-9 rounded-lg bg-primary/10 text-primary">
|
||||
<Icon className="h-4 w-4" />
|
||||
<div className='flex items-center gap-3 p-4 rounded-xl border border-border bg-text/3'>
|
||||
<div className='flex items-center justify-center h-9 w-9 rounded-lg bg-primary/10 text-primary'>
|
||||
<Icon className='h-4 w-4' />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs text-text/50">{label}</span>
|
||||
<span className="text-lg font-semibold tabular-nums">{value}</span>
|
||||
<div className='flex flex-col'>
|
||||
<span className='text-xs text-text/50'>{label}</span>
|
||||
<span className='text-lg font-semibold tabular-nums'>
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@@ -868,15 +983,18 @@ function FilterSelect({
|
||||
onChange: (value: string) => void
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<label className="text-xs text-text/50 shrink-0">{label}</label>
|
||||
<div className='flex items-center gap-1.5'>
|
||||
<label className='text-xs text-text/50 shrink-0'>{label}</label>
|
||||
<select
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className="text-xs bg-background border border-border rounded-md px-2 py-1 text-text/80 focus:outline-none focus:border-primary min-w-[100px]"
|
||||
className='text-xs bg-background border border-border rounded-md px-2 py-1 text-text/80 focus:outline-none focus:border-primary min-w-25'
|
||||
>
|
||||
{options.map((opt) => (
|
||||
<option key={opt} value={opt}>
|
||||
<option
|
||||
key={opt}
|
||||
value={opt}
|
||||
>
|
||||
{opt === "all" ? "Any" : opt}
|
||||
</option>
|
||||
))}
|
||||
|
||||
@@ -131,8 +131,13 @@ export default async function GamePage({
|
||||
}
|
||||
|
||||
// ── Fetch related data in parallel ──────────────────────────────
|
||||
const [benchmarkCount, presetCount, commentCount, platformSupport, presetRows] =
|
||||
await Promise.all([
|
||||
const [
|
||||
benchmarkCount,
|
||||
presetCount,
|
||||
commentCount,
|
||||
platformSupport,
|
||||
presetRows,
|
||||
] = await Promise.all([
|
||||
db
|
||||
.select({ count: sql<number>`count(*)::int` })
|
||||
.from(performanceEntries)
|
||||
|
||||
Reference in New Issue
Block a user