Come back tomorrow for a new song.
@@ -133,6 +150,7 @@ export default function Game({ dailyPuzzle }: GameProps) {
Game Over
The song was hidden.
+ {statistics &&
}
diff --git a/components/Statistics.tsx b/components/Statistics.tsx
new file mode 100644
index 0000000..8ad2b2e
--- /dev/null
+++ b/components/Statistics.tsx
@@ -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 (
+
+
Your Statistics
+
Total puzzles: {total}
+
+ {stats.map((stat, index) => (
+
+
{stat.badge}
+
+ {typeof stat.attempts === 'number' ? `${stat.attempts} try` : stat.attempts}
+
+
{stat.count}
+
+ ))}
+
+
+ );
+}
diff --git a/lib/gameState.ts b/lib/gameState.ts
index 4354ca5..b705262 100644
--- a/lib/gameState.ts
+++ b/lib/gameState.ts
@@ -10,12 +10,25 @@ export interface GameState {
lastPlayed: number; // Timestamp
}
+export interface Statistics {
+ solvedIn1: number;
+ solvedIn2: number;
+ solvedIn3: number;
+ solvedIn4: number;
+ solvedIn5: number;
+ solvedIn6: number;
+ failed: number;
+}
+
const STORAGE_KEY = 'hoerdle_game_state';
+const STATS_KEY = 'hoerdle_statistics';
export function useGameState() {
const [gameState, setGameState] = useState
(null);
+ const [statistics, setStatistics] = useState(null);
useEffect(() => {
+ // Load game state
const stored = localStorage.getItem(STORAGE_KEY);
const today = new Date().toISOString().split('T')[0];
@@ -23,20 +36,48 @@ export function useGameState() {
const parsed: GameState = JSON.parse(stored);
if (parsed.date === today) {
setGameState(parsed);
- return;
+ } else {
+ // New day
+ const newState: GameState = {
+ date: today,
+ guesses: [],
+ isSolved: false,
+ isFailed: false,
+ lastPlayed: Date.now(),
+ };
+ setGameState(newState);
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(newState));
}
+ } else {
+ // No state
+ const newState: GameState = {
+ date: today,
+ guesses: [],
+ isSolved: false,
+ isFailed: false,
+ lastPlayed: Date.now(),
+ };
+ setGameState(newState);
+ localStorage.setItem(STORAGE_KEY, JSON.stringify(newState));
}
- // New day or no state
- const newState: GameState = {
- date: today,
- guesses: [],
- isSolved: false,
- isFailed: false,
- lastPlayed: Date.now(),
- };
- setGameState(newState);
- localStorage.setItem(STORAGE_KEY, JSON.stringify(newState));
+ // Load statistics
+ const storedStats = localStorage.getItem(STATS_KEY);
+ if (storedStats) {
+ setStatistics(JSON.parse(storedStats));
+ } else {
+ const newStats: Statistics = {
+ solvedIn1: 0,
+ solvedIn2: 0,
+ solvedIn3: 0,
+ solvedIn4: 0,
+ solvedIn5: 0,
+ solvedIn6: 0,
+ failed: 0,
+ };
+ setStatistics(newStats);
+ localStorage.setItem(STATS_KEY, JSON.stringify(newStats));
+ }
}, []);
const saveState = (newState: GameState) => {
@@ -44,6 +85,28 @@ export function useGameState() {
localStorage.setItem(STORAGE_KEY, JSON.stringify(newState));
};
+ const updateStatistics = (attempts: number, solved: boolean) => {
+ if (!statistics) return;
+
+ const newStats = { ...statistics };
+
+ if (solved) {
+ switch (attempts) {
+ case 1: newStats.solvedIn1++; break;
+ case 2: newStats.solvedIn2++; break;
+ case 3: newStats.solvedIn3++; break;
+ case 4: newStats.solvedIn4++; break;
+ case 5: newStats.solvedIn5++; break;
+ case 6: newStats.solvedIn6++; break;
+ }
+ } else {
+ newStats.failed++;
+ }
+
+ setStatistics(newStats);
+ localStorage.setItem(STATS_KEY, JSON.stringify(newStats));
+ };
+
const addGuess = (guess: string, correct: boolean) => {
if (!gameState) return;
@@ -60,7 +123,12 @@ export function useGameState() {
};
saveState(newState);
+
+ // Update statistics when game ends
+ if (isSolved || isFailed) {
+ updateStatistics(newGuesses.length, isSolved);
+ }
};
- return { gameState, addGuess };
+ return { gameState, statistics, addGuess };
}