63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
interface StatsProps {
|
|
generation: number;
|
|
bestFitness: number;
|
|
bestFitnessEver: number;
|
|
averageFitness: number;
|
|
gamesPlayed: number;
|
|
}
|
|
|
|
export default function Stats({
|
|
generation,
|
|
bestFitness,
|
|
bestFitnessEver,
|
|
averageFitness,
|
|
gamesPlayed,
|
|
}: StatsProps) {
|
|
return (
|
|
<div className="stats-panel">
|
|
<h3>Evolution Statistics</h3>
|
|
|
|
<div className="stat-grid">
|
|
<div className="stat-item highlight">
|
|
<div className="stat-label">Generation</div>
|
|
<div className="stat-value">{generation}</div>
|
|
</div>
|
|
|
|
<div className="stat-item highlight">
|
|
<div className="stat-label">Best Ever</div>
|
|
<div className="stat-value">{Math.round(bestFitnessEver)}</div>
|
|
</div>
|
|
|
|
<div className="stat-item">
|
|
<div className="stat-label">Current Best</div>
|
|
<div className="stat-value">{Math.round(bestFitness)}</div>
|
|
</div>
|
|
|
|
<div className="stat-item">
|
|
<div className="stat-label">Average</div>
|
|
<div className="stat-value">{Math.round(averageFitness)}</div>
|
|
</div>
|
|
|
|
<div className="stat-item">
|
|
<div className="stat-label">Games Played</div>
|
|
<div className="stat-value">{gamesPlayed.toLocaleString()}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="progress-indicator">
|
|
<div className="progress-label">
|
|
Improvement: {bestFitnessEver > 0 ? ((bestFitness / bestFitnessEver) * 100).toFixed(1) : 0}%
|
|
</div>
|
|
<div className="progress-bar">
|
|
<div
|
|
className="progress-fill"
|
|
style={{
|
|
width: `${bestFitnessEver > 0 ? Math.min(100, (bestFitness / bestFitnessEver) * 100) : 0}%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|