Add Capitals Quiz game and update Game page

- Introduced a new Capitals Quiz game with full functionality including question generation, scoring, and session management.
- Updated Game.svelte to include the Capitals Quiz in the game list with appropriate metadata.
- Enhanced the layout of the game grid for better responsiveness.
- Removed placeholder for the Capitals Quiz in the upcoming games section.

ToDo.md

@@ -1,5 +1,6 @@
 [ ] Improove: In the preview page, add full header.
 [ ] Improove: In the preview page, add possibility select custom color for each target.
+[ ] Add Games: Logo Quiz, Emblem Quiz
 
 Done:
 [v] Strategy: Add quiz game to guess the logo or flags and invert

src/App.svelte

@@ -6,6 +6,7 @@
   import Preview from "./pages/Preview.svelte";
   import Game from "./pages/Game.svelte";
   import FlagQuiz from "./pages/FlagQuiz.svelte";
+  import CapitalsQuiz from "./pages/CapitalsQuiz.svelte";
   import NotFound from "./pages/NotFound.svelte";
   import Header from "./components/Header.svelte";
 
@@ -14,6 +15,7 @@
     "/preview/:logoName": Preview,
     "/game": Game,
     "/game/flags": FlagQuiz,
+    "/game/capitals": CapitalsQuiz,
     "*": NotFound,
   };
 

src/pages/FlagQuiz.svelte

@@ -183,6 +183,9 @@
           console.error("Error loading settings:", e);
         }
       }
+
+      // Load global stats and update them
+      loadGlobalStats();
     }
 
     await loadFlags();
@@ -513,6 +516,9 @@
     // Save stats to localStorage
     localStorage.setItem("flagQuizStats", JSON.stringify(gameStats));
 
+    // Update global stats
+    updateGlobalStats(isCorrect);
+
     // Check for new achievements
     if (achievementsComponent) {
       achievementsComponent.checkAchievements();
@@ -569,6 +575,9 @@
     // Save stats to localStorage
     localStorage.setItem("flagQuizStats", JSON.stringify(gameStats));
 
+    // Update global stats (skipped question)
+    updateGlobalStats(null, true);
+
     // Save session state
     saveSessionState();
 
@@ -789,6 +798,60 @@
     updateAchievementCount();
   }
 
+  // Global statistics functions
+  function loadGlobalStats() {
+    const savedGlobalStats = localStorage.getItem("globalQuizStats");
+    if (savedGlobalStats) {
+      try {
+        const globalStats = JSON.parse(savedGlobalStats);
+        console.log("Loaded global stats:", globalStats);
+      } catch (e) {
+        console.error("Error loading global stats:", e);
+      }
+    }
+  }
+
+  function updateGlobalStats(isCorrect, isSkipped = false) {
+    let globalStats = {};
+
+    // Load existing global stats
+    const savedGlobalStats = localStorage.getItem("globalQuizStats");
+    if (savedGlobalStats) {
+      try {
+        globalStats = JSON.parse(savedGlobalStats);
+      } catch (e) {
+        console.error("Error parsing global stats:", e);
+      }
+    }
+
+    // Initialize stats structure if it doesn't exist
+    if (!globalStats.flagQuiz) {
+      globalStats.flagQuiz = { correct: 0, wrong: 0, total: 0, skipped: 0 };
+    }
+    if (!globalStats.overall) {
+      globalStats.overall = { correct: 0, wrong: 0, total: 0, skipped: 0 };
+    }
+
+    // Update flag quiz stats
+    globalStats.flagQuiz.total++;
+    globalStats.overall.total++;
+
+    if (isSkipped) {
+      globalStats.flagQuiz.skipped++;
+      globalStats.overall.skipped++;
+    } else if (isCorrect) {
+      globalStats.flagQuiz.correct++;
+      globalStats.overall.correct++;
+    } else {
+      globalStats.flagQuiz.wrong++;
+      globalStats.overall.wrong++;
+    }
+
+    // Save updated global stats
+    localStorage.setItem("globalQuizStats", JSON.stringify(globalStats));
+    console.log("Updated global stats:", globalStats);
+  }
+
   // Sound functions
   function playCorrectSound() {
     if (!soundEnabled) return;

src/pages/Game.svelte

@@ -11,6 +11,13 @@
       description: 'Test your knowledge of world flags',
       icon: '🏳️',
       route: '#/game/flags'
+    },
+    {
+      name: 'capitals',
+      title: 'Capitals Quiz',
+      description: 'Test your knowledge of world capitals',
+      icon: '🏛️',
+      route: '#/game/capitals'
     }
     // Future games will be added here
   ];
@@ -71,10 +78,6 @@
     <div class="coming-soon">
       <h3>⏳ Coming Soon</h3>
       <div class="upcoming-games">
-        <div class="upcoming-game">
-          <span class="icon">🏛️</span>
-          <span>Capital Quiz</span>
-        </div>
         <div class="upcoming-game">
           <span class="icon">🏢</span>
           <span>Logo Quiz</span>
@@ -119,6 +122,7 @@
 
   .game-grid {
     display: grid;
+    grid-template-columns: repeat(2, 1fr);
     gap: 2rem;
     margin-bottom: 4rem;
   }
@@ -210,6 +214,10 @@
       padding-top: 100px;
     }
 
+    .game-grid {
+      grid-template-columns: 1fr;
+    }
+
     h1 {
       font-size: 2.5rem;
     }