Spaces:

milwright
/

cloze-reader

Sleeping

milwright Claude commited on Oct 31

Commit

f1bb203

1 Parent(s): 20b30b6

clean: remove perfect rounds metric and update leaderboard styling

- Remove perfectRounds tracking from stats system
- Add session reset on initialization for fresh starts
- Move leaderboard button to footer for better mobile UX
- Update player stats color scheme from purple to gold

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Files changed (3) hide show

index.html +7 -14
src/leaderboardService.js +15 -8
src/styles.css +5 -5

index.html CHANGED Viewed

@@ -12,21 +12,11 @@
 <body class="min-h-screen">
     <div id="app" class="container mx-auto px-4 py-8 max-w-4xl">
         <header class="text-center mb-8">
-            <div class="flex items-start justify-between mb-4 gap-4">
-                <div class="flex-1 min-w-0"></div>
-                <div class="flex flex-col items-center gap-3">
-                    <div class="flex items-center gap-3">
-                        <img src="./icon.png" alt="Cloze Reader" class="w-12 h-12">
-                        <h1 class="text-4xl font-bold typewriter-text">Cloze Reader</h1>
-                    </div>
-                    <p class="typewriter-subtitle">Fill in the blanks to practice reading comprehension</p>
-                </div>
-                <div class="flex-1 min-w-0 flex justify-end items-end">
-                    <button id="leaderboard-btn" class="typewriter-button-small" title="View leaderboard">
-                        Leaderboard
-                    </button>
-                </div>
             </div>
         </header>
         <main id="game-container" class="space-y-6">
@@ -68,6 +58,9 @@
             <button type="button" id="hint-btn" class="typewriter-button">
                 Show Hints
             </button>
         </div>
     </div>

 <body class="min-h-screen">
     <div id="app" class="container mx-auto px-4 py-8 max-w-4xl">
         <header class="text-center mb-8">
+            <div class="flex items-center justify-center mb-4 gap-3">
+                <img src="./icon.png" alt="Cloze Reader" class="w-12 h-12">
+                <h1 class="text-4xl font-bold typewriter-text">Cloze Reader</h1>
             </div>
+            <p class="typewriter-subtitle text-center">Fill in the blanks to practice reading comprehension</p>
         </header>
         <main id="game-container" class="space-y-6">
             <button type="button" id="hint-btn" class="typewriter-button">
                 Show Hints
             </button>
+            <button id="leaderboard-btn" class="leaderboard-footer-btn" title="View leaderboard">
+                🏅
+            </button>
         </div>
     </div>

src/leaderboardService.js CHANGED Viewed

@@ -13,6 +13,9 @@ export class LeaderboardService {
     };
     this.maxEntries = 10;
     this.initializeStorage();
   }
@@ -49,7 +52,6 @@ export class LeaderboardService {
       totalPassagesAttempted: 0,
       longestStreak: 0,
       currentStreak: 0,
-      perfectRounds: 0,
       totalCorrectWords: 0,
       uniqueWordsCorrect: new Set(),
       gamesPlayed: 0,
@@ -253,6 +255,12 @@ export class LeaderboardService {
   updateStats(data) {
     const stats = this.getStats() || this.createEmptyStats();
     stats.totalPassagesAttempted++;
     if (data.passed) {
@@ -282,13 +290,12 @@ export class LeaderboardService {
       });
     }
-    // Track perfect rounds (if both passages in round were 100%)
-    if (data.percentage === 100 && data.passagesPassed % 2 === 0) {
-      stats.perfectRounds++;
-    }
     stats.lastPlayed = new Date().toISOString();
     this.saveStats(stats);
     return stats;
   }
@@ -321,9 +328,10 @@ export class LeaderboardService {
   }
   /**
-   * Reset all leaderboard data (for testing or user request)
    */
   resetAll() {
     this.saveLeaderboard([]);
     this.savePlayerProfile({
       initials: null,
@@ -352,7 +360,6 @@ export class LeaderboardService {
         : 0,
       longestStreak: stats.longestStreak,
       currentStreak: stats.currentStreak,
-      perfectRounds: stats.perfectRounds,
       totalCorrectWords: stats.totalCorrectWords,
       uniqueWords: stats.uniqueWordsCorrect.size,
       gamesPlayed: stats.gamesPlayed,

     };
     this.maxEntries = 10;
+    // Reset all data on initialization (fresh start each session)
+    this.resetAll();
     this.initializeStorage();
   }
       totalPassagesAttempted: 0,
       longestStreak: 0,
       currentStreak: 0,
       totalCorrectWords: 0,
       uniqueWordsCorrect: new Set(),
       gamesPlayed: 0,
   updateStats(data) {
     const stats = this.getStats() || this.createEmptyStats();
+    console.log('📊 LEADERBOARD: Updating stats', {
+      before: { attempted: stats.totalPassagesAttempted, passed: stats.totalPassagesPassed, level: stats.highestLevel },
+      passResult: data.passed,
+      currentLevel: data.currentLevel
+    });
     stats.totalPassagesAttempted++;
     if (data.passed) {
       });
     }
     stats.lastPlayed = new Date().toISOString();
+    console.log('📊 LEADERBOARD: Stats updated', {
+      after: { attempted: stats.totalPassagesAttempted, passed: stats.totalPassagesPassed, level: stats.highestLevel }
+    });
     this.saveStats(stats);
     return stats;
   }
   }
   /**
+   * Reset all leaderboard data (fresh start each session)
    */
   resetAll() {
+    console.log('🔄 LEADERBOARD: Starting fresh session (stats reset on page load)');
     this.saveLeaderboard([]);
     this.savePlayerProfile({
       initials: null,
         : 0,
       longestStreak: stats.longestStreak,
       currentStreak: stats.currentStreak,
       totalCorrectWords: stats.totalCorrectWords,
       uniqueWords: stats.uniqueWordsCorrect.size,
       gamesPlayed: stats.gamesPlayed,

src/styles.css CHANGED Viewed

@@ -760,8 +760,8 @@
   }
   .leaderboard-entry.player-entry {
-    background: linear-gradient(135deg, #f0e6ff 0%, #e0d1f5 100%);
-    border-color: #8b7aa8;
     border-width: 3px;
   }
@@ -814,8 +814,8 @@
   .leaderboard-player-stats {
     margin-top: 24px;
     padding: 18px;
-    background: rgba(139, 115, 170, 0.08);
-    border: 2px solid rgba(139, 115, 170, 0.25);
     border-radius: 6px;
   }
@@ -827,7 +827,7 @@
   }
   .player-best .highlight {
-    color: #6b4a8e;
     font-weight: 700;
   }

   }
   .leaderboard-entry.player-entry {
+    background: linear-gradient(135deg, #fff9f0 0%, #ffecd1 100%);
+    border-color: #d4a574;
     border-width: 3px;
   }
   .leaderboard-player-stats {
     margin-top: 24px;
     padding: 18px;
+    background: rgba(212, 165, 116, 0.08);
+    border: 2px solid rgba(212, 165, 116, 0.25);
     border-radius: 6px;
   }
   }
   .player-best .highlight {
+    color: #8b6914;
     font-weight: 700;
   }