ea26649558
- Add personal statistics with badges for each attempt count - Track solved puzzles per attempt (1-6) and failed attempts - Display statistics after game completion - Fix clipboard API issue with fallback method - Add footer with attribution
57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { Statistics as StatsType } from '../lib/gameState';
|
|
|
|
interface StatisticsProps {
|
|
statistics: StatsType;
|
|
}
|
|
|
|
const BADGES = {
|
|
1: '🏆', // Gold trophy
|
|
2: '🥈', // Silver medal
|
|
3: '🥉', // Bronze medal
|
|
4: '⭐', // Star
|
|
5: '✨', // Sparkles
|
|
6: '💫', // Dizzy
|
|
failed: '❌', // Cross mark
|
|
};
|
|
|
|
export default function Statistics({ statistics }: StatisticsProps) {
|
|
const total =
|
|
statistics.solvedIn1 +
|
|
statistics.solvedIn2 +
|
|
statistics.solvedIn3 +
|
|
statistics.solvedIn4 +
|
|
statistics.solvedIn5 +
|
|
statistics.solvedIn6 +
|
|
statistics.failed;
|
|
|
|
const stats = [
|
|
{ attempts: 1, count: statistics.solvedIn1, badge: BADGES[1] },
|
|
{ attempts: 2, count: statistics.solvedIn2, badge: BADGES[2] },
|
|
{ attempts: 3, count: statistics.solvedIn3, badge: BADGES[3] },
|
|
{ attempts: 4, count: statistics.solvedIn4, badge: BADGES[4] },
|
|
{ attempts: 5, count: statistics.solvedIn5, badge: BADGES[5] },
|
|
{ attempts: 6, count: statistics.solvedIn6, badge: BADGES[6] },
|
|
{ attempts: 'Failed', count: statistics.failed, badge: BADGES.failed },
|
|
];
|
|
|
|
return (
|
|
<div className="statistics-container">
|
|
<h3 className="statistics-title">Your Statistics</h3>
|
|
<p className="statistics-total">Total puzzles: {total}</p>
|
|
<div className="statistics-grid">
|
|
{stats.map((stat, index) => (
|
|
<div key={index} className="stat-item">
|
|
<div className="stat-badge">{stat.badge}</div>
|
|
<div className="stat-label">
|
|
{typeof stat.attempts === 'number' ? `${stat.attempts} try` : stat.attempts}
|
|
</div>
|
|
<div className="stat-count">{stat.count}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|