feat: Add statistics tracking and fix clipboard API
- 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
This commit is contained in:
56
components/Statistics.tsx
Normal file
56
components/Statistics.tsx
Normal file
@@ -0,0 +1,56 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user