176 lines
7.2 KiB
TypeScript
176 lines
7.2 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo } from "react"
|
|
import { Gauge, Timer, Zap } from "lucide-react"
|
|
|
|
export interface PerformanceData {
|
|
fpsAvg?: number
|
|
fpsOnePercentLow?: number
|
|
fpsLow?: number
|
|
fpsHigh?: number
|
|
loadTimeSsd?: number
|
|
loadTimeSd?: number
|
|
tdpWatts?: number
|
|
}
|
|
|
|
interface PerformanceStepProps {
|
|
value: PerformanceData
|
|
onChange: (value: PerformanceData) => void
|
|
}
|
|
|
|
export function PerformanceStep({ value, onChange }: PerformanceStepProps) {
|
|
const error = useMemo(() => {
|
|
if (value.fpsAvg !== undefined && value.fpsAvg !== null && (isNaN(value.fpsAvg) || value.fpsAvg <= 0)) {
|
|
return "FPS Average must be greater than 0"
|
|
}
|
|
return null
|
|
}, [value.fpsAvg])
|
|
|
|
const update = (field: keyof PerformanceData, val: string) => {
|
|
const isDecimalField = field === "loadTimeSsd" || field === "loadTimeSd"
|
|
const cleaned = isDecimalField
|
|
? val.replace(/[^0-9.]/g, "").replace(/(\..*)\./g, "$1")
|
|
: val.replace(/[^0-9]/g, "")
|
|
const num = cleaned === "" || cleaned === "." ? undefined : Number(cleaned)
|
|
onChange({ ...value, [field]: num })
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* FPS Section */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<Gauge className="h-4 w-4 text-primary" />
|
|
<h3 className="text-sm font-semibold text-text">Frame Rate</h3>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3">
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs font-medium text-text/60">
|
|
FPS Average <span className="text-red-400">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
inputMode="numeric"
|
|
pattern="[0-9]*"
|
|
value={value.fpsAvg ?? ""}
|
|
onChange={(e) => update("fpsAvg", e.target.value)}
|
|
placeholder="e.g. 45"
|
|
className="w-full px-4 py-3 rounded-lg border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
|
|
/>
|
|
<p className="text-[10px] text-text/30">Required — average framerate during gameplay</p>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs font-medium text-text/60">1% Low FPS</label>
|
|
<input
|
|
type="text"
|
|
inputMode="numeric"
|
|
pattern="[0-9]*"
|
|
value={value.fpsOnePercentLow ?? ""}
|
|
onChange={(e) => update("fpsOnePercentLow", e.target.value)}
|
|
placeholder="e.g. 32"
|
|
className="w-full px-4 py-3 rounded-lg border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
|
|
/>
|
|
<p className="text-[10px] text-text/30">FPS at the 1st percentile — represents worst 1% of frametimes</p>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs font-medium text-text/60">FPS Low</label>
|
|
<input
|
|
type="text"
|
|
inputMode="numeric"
|
|
pattern="[0-9]*"
|
|
value={value.fpsLow ?? ""}
|
|
onChange={(e) => update("fpsLow", e.target.value)}
|
|
placeholder="e.g. 30"
|
|
className="w-full px-4 py-3 rounded-lg border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs font-medium text-text/60">FPS High</label>
|
|
<input
|
|
type="text"
|
|
inputMode="numeric"
|
|
pattern="[0-9]*"
|
|
value={value.fpsHigh ?? ""}
|
|
onChange={(e) => update("fpsHigh", e.target.value)}
|
|
placeholder="e.g. 60"
|
|
className="w-full px-4 py-3 rounded-lg border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<p className="text-xs text-red-400">{error}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Load Time Section */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<Timer className="h-4 w-4 text-primary" />
|
|
<h3 className="text-sm font-semibold text-text">Load Times</h3>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs font-medium text-text/60">Load Time SSD (seconds)</label>
|
|
<input
|
|
type="text"
|
|
inputMode="numeric"
|
|
pattern="[0-9]*"
|
|
value={value.loadTimeSsd ?? ""}
|
|
onChange={(e) => update("loadTimeSsd", e.target.value)}
|
|
placeholder="e.g. 12.5"
|
|
className="w-full px-4 py-3 rounded-lg border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs font-medium text-text/60">Load Time SD Card (seconds)</label>
|
|
<input
|
|
type="text"
|
|
inputMode="numeric"
|
|
pattern="[0-9]*"
|
|
value={value.loadTimeSd ?? ""}
|
|
onChange={(e) => update("loadTimeSd", e.target.value)}
|
|
placeholder="e.g. 35.0"
|
|
className="w-full px-4 py-3 rounded-lg border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Power Section */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<Zap className="h-4 w-4 text-primary" />
|
|
<h3 className="text-sm font-semibold text-text">Power</h3>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
<div className="space-y-1.5">
|
|
<label className="text-xs font-medium text-text/60">
|
|
TDP (Watts)
|
|
<span className="text-xs text-text/40 ml-1">Optional — thermal design power cap during benchmark</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
inputMode="decimal"
|
|
value={value.tdpWatts ?? ""}
|
|
onChange={(e) => {
|
|
const val = e.target.value.replace(/[^0-9.]/g, "").replace(/(\..*)\./g, "$1")
|
|
const num = val === "" || val === "." ? undefined : Number(val)
|
|
onChange({ ...value, tdpWatts: num })
|
|
}}
|
|
placeholder="e.g. 10"
|
|
className="w-full px-4 py-3 rounded-lg border border-border bg-text/5 text-text text-sm placeholder:text-text/40 outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-colors"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|