Enhance achievements: Add continent knowledge achievements and track progress for correct answers in FlagQuiz

public/icons/flag.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 22V14M5 14L7.47067 13.5059C9.1212 13.1758 10.8321 13.3328 12.3949 13.958C14.0885 14.6354 15.9524 14.7619 17.722 14.3195L17.8221 14.2945C18.4082 14.148 18.6861 13.4769 18.3753 12.9589L16.8147 10.3578C16.4732 9.78863 16.3024 9.50405 16.2619 9.19451C16.2451 9.06539 16.2451 8.93461 16.2619 8.80549C16.3024 8.49595 16.4732 8.21137 16.8147 7.64221L18.0932 5.51132C18.4278 4.9536 17.9211 4.26972 17.2901 4.42746C15.8013 4.79967 14.2331 4.69323 12.8082 4.12329L12.3949 3.95797C10.8321 3.33284 9.1212 3.17576 7.47067 3.50587L5 4M5 14V11M5 4V2M5 4V7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

public/icons/global.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M14.8284 19.0711C14.457 19.9997 14.016 20.7362 13.5307 21.2388C13.0454 21.7413 12.5253 22 12 22C11.4747 22 10.9546 21.7413 10.4693 21.2388C9.98396 20.7362 9.54301 19.9997 9.17157 19.0711C8.80014 18.1425 8.5055 17.0401 8.30448 15.8268C8.10346 14.6136 8 13.3132 8 12C8 10.6868 8.10346 9.38642 8.30448 8.17317C8.5055 6.95991 8.80014 5.85752 9.17157 4.92893C9.54301 4.00035 9.98396 3.26375 10.4693 2.76121C10.9546 2.25866 11.4747 2 12 2C12.5253 2 13.0454 2.25866 13.5307 2.7612C14.016 3.26375 14.457 4.00035 14.8284 4.92893C15.1999 5.85752 15.4945 6.95991 15.6955 8.17317C15.8965 9.38642 16 10.6868 16 12C16 13.3132 15.8965 14.6136 15.6955 15.8268" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M2 12H10M22 12H14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

public/icons/point-on-map.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 13.1623C21 12.1187 21 9.5969 20.7169 9.20407C20.4337 8.81124 19.9387 8.64624 18.9487 8.31623L18 8M21 16.829C21 18.1199 21 18.7653 20.6603 19.18C20.5449 19.3208 20.4048 19.4394 20.247 19.5301C19.7821 19.797 19.1455 19.6909 17.8721 19.4787C16.6157 19.2693 15.9875 19.1646 15.3648 19.2167C15.1463 19.235 14.9292 19.2676 14.715 19.3144C14.1046 19.4477 13.5299 19.735 12.3806 20.3097C10.8809 21.0596 10.131 21.4345 9.33284 21.5501C9.09242 21.5849 8.8498 21.6021 8.60688 21.6016C7.80035 21.6001 7.01186 21.3373 5.43488 20.8116L5.05132 20.6838C4.06129 20.3538 3.56627 20.1888 3.28314 19.7959C3 19.4031 3 18.8813 3 17.8377V17M3 12.908C3 11.2491 3 10.4197 3.48841 9.97358C3.57388 9.89552 3.66809 9.82762 3.76917 9.77122C4.28426 9.48384 4.96572 9.66128 6.22311 10.075" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M17.25 11.2513C17.7356 10.0935 18 8.86093 18 7.70031C18 4.55211 15.3137 2 12 2C8.68629 2 6 4.55211 6 7.70031C6 10.8238 7.91499 14.4687 10.9028 15.7721C11.5993 16.076 12.4007 16.076 13.0972 15.7721C14.0514 15.3558 14.8963 14.7007 15.6042 13.9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<circle cx="12" cy="8" r="2" stroke="currentColor" stroke-width="1.5"/>
+</svg>

src/components/Achievements.svelte

@@ -19,44 +19,49 @@
       name: "First Victory",
       description: "Answer your first question correctly",
       icon: "smile-squre.svg",
+      iconColor: "#fbbf24", // gold
       requirement: () => gameStats.correct >= 1,
     },
     party_time: {
       name: "Party Time!",
       description: "Answer 5 questions correctly in a row",
       icon: "confetti-minimalistic.svg",
+      iconColor: "#fbbf24", // gold
       requirement: () => currentStreak >= 5,
     },
     dedication: {
       name: "Dedicated Learner",
       description: "Answer 10 questions in total",
       icon: "check-circle.svg",
+      iconColor: "#fbbf24", // gold
       requirement: () => gameStats.total >= 10,
     },
     perfect_10: {
       name: "Perfect Ten",
       description: "Answer 10 questions correctly without any mistakes",
       icon: "medal-star.svg",
+      iconColor: "#fbbf24", // gold
       requirement: () => currentStreak >= 10,
     },
     speedrunner: {
       name: "Speed Runner",
       description: "Skip 10 questions in a row",
       icon: "running.svg",
+      iconColor: "#fbbf24", // gold
       requirement: () => achievements.consecutive_skips >= 10,
     },
-
     persistent: {
       name: "Persistent Scholar",
       description: "Answer 25 questions (correct or wrong)",
       icon: "medal-ribbons-star.svg",
+      iconColor: "#fbbf24", // gold
       requirement: () => gameStats.total >= 25,
     },
-
     perfectionist: {
       name: "Perfectionist",
       description: "Achieve 90% accuracy with at least 20 answers",
       icon: "medal-star-circle.svg",
+      iconColor: "#fbbf24", // gold
       requirement: () =>
         gameStats.total >= 20 && gameStats.correct / gameStats.total >= 0.9,
     },
@@ -64,22 +69,111 @@
       name: "World Explorer",
       description: "Answer 50 questions correctly",
       icon: "crown-minimalistic.svg",
+      iconColor: "#fbbf24", // gold
       requirement: () => gameStats.correct >= 50,
     },
-
     master: {
       name: "Flag Master",
       description: "Answer 100 questions correctly",
       icon: "cup-first.svg",
+      iconColor: "#fbbf24", // gold
       requirement: () => gameStats.correct >= 100,
     },
-
     legend: {
       name: "Geography Legend",
       description: "Answer 200 questions correctly",
       icon: "crown-star.svg",
+      iconColor: "#fbbf24", // gold
       requirement: () => gameStats.correct >= 200,
     },
+
+    // Continent Knowledge Achievements - Beginner Level
+    europe_explorer: {
+      name: "European Explorer",
+      description: "Answer 10 European country questions correctly",
+      icon: "point-on-map.svg",
+      iconColor: "#3b82f6", // blue
+      requirement: () => (achievements.continents?.Europe || 0) >= 10,
+    },
+    asia_wanderer: {
+      name: "Asian Wanderer",
+      description: "Answer 10 Asian country questions correctly",
+      icon: "point-on-map.svg",
+      iconColor: "#ef4444", // red
+      requirement: () => (achievements.continents?.Asia || 0) >= 10,
+    },
+    africa_adventurer: {
+      name: "African Adventurer",
+      description: "Answer 10 African country questions correctly",
+      icon: "point-on-map.svg",
+      iconColor: "#22c55e", // green
+      requirement: () => (achievements.continents?.Africa || 0) >= 10,
+    },
+    north_america_navigator: {
+      name: "North American Navigator",
+      description: "Answer 10 North American country questions correctly",
+      icon: "point-on-map.svg",
+      iconColor: "#8b5cf6", // purple
+      requirement: () => (achievements.continents?.["North America"] || 0) >= 10,
+    },
+    south_america_scout: {
+      name: "South American Scout",
+      description: "Answer 10 South American country questions correctly",
+      icon: "point-on-map.svg",
+      iconColor: "#f59e0b", // amber
+      requirement: () => (achievements.continents?.["South America"] || 0) >= 10,
+    },
+    oceania_voyager: {
+      name: "Oceania Voyager",
+      description: "Answer 10 Oceania country questions correctly",
+      icon: "point-on-map.svg",
+      iconColor: "#06b6d4", // cyan
+      requirement: () => (achievements.continents?.Oceania || 0) >= 10,
+    },
+
+    // Continent Knowledge Achievements - Expert Level
+    europe_master: {
+      name: "European Master",
+      description: "Answer 25 European country questions correctly",
+      icon: "flag.svg",
+      iconColor: "#3b82f6", // blue
+      requirement: () => (achievements.continents?.Europe || 0) >= 25,
+    },
+    asia_master: {
+      name: "Asian Master",
+      description: "Answer 25 Asian country questions correctly",
+      icon: "flag.svg",
+      iconColor: "#ef4444", // red
+      requirement: () => (achievements.continents?.Asia || 0) >= 25,
+    },
+    africa_master: {
+      name: "African Master",
+      description: "Answer 25 African country questions correctly",
+      icon: "flag.svg",
+      iconColor: "#22c55e", // green
+      requirement: () => (achievements.continents?.Africa || 0) >= 25,
+    },
+    north_america_master: {
+      name: "North American Master",
+      description: "Answer 25 North American country questions correctly",
+      icon: "flag.svg",
+      iconColor: "#8b5cf6", // purple
+      requirement: () => (achievements.continents?.["North America"] || 0) >= 25,
+    },
+    south_america_master: {
+      name: "South American Master",
+      description: "Answer 25 South American country questions correctly",
+      icon: "flag.svg",
+      iconColor: "#f59e0b", // amber
+      requirement: () => (achievements.continents?.["South America"] || 0) >= 25,
+    },
+    oceania_master: {
+      name: "Oceania Master",
+      description: "Answer 25 Oceania country questions correctly",
+      icon: "flag.svg",
+      iconColor: "#06b6d4", // cyan
+      requirement: () => (achievements.continents?.Oceania || 0) >= 25,
+    },
   };
 
   // Achievement functions
@@ -91,9 +185,49 @@
       } else {
         achievements = { consecutive_skips: 0 };
       }
+
+      // Initialize continent tracking if not exists
+      if (!achievements.continents) {
+        achievements.continents = {
+          "Europe": 0,
+          "Asia": 0,
+          "Africa": 0,
+          "North America": 0,
+          "South America": 0,
+          "Oceania": 0
+        };
+      }
     } catch (error) {
       console.error("Error loading achievements:", error);
-      achievements = { consecutive_skips: 0 };
+      achievements = {
+        consecutive_skips: 0,
+        continents: {
+          "Europe": 0,
+          "Asia": 0,
+          "Africa": 0,
+          "North America": 0,
+          "South America": 0,
+          "Oceania": 0
+        }
+      };
+    }
+  }
+
+  export function incrementContinentProgress(continent) {
+    if (!achievements.continents) {
+      achievements.continents = {
+        "Europe": 0,
+        "Asia": 0,
+        "Africa": 0,
+        "North America": 0,
+        "South America": 0,
+        "Oceania": 0
+      };
+    }
+
+    if (achievements.continents[continent] !== undefined) {
+      achievements.continents[continent]++;
+      saveAchievements();
     }
   }
 
@@ -209,7 +343,10 @@
             class="achievement-item"
             class:unlocked={achievements[key]?.unlocked}
           >
-            <div class="achievement-icon">
+            <div
+              class="achievement-icon"
+              style={achievements[key]?.unlocked ? `color: ${def.iconColor}` : ''}
+            >
               <InlineSvg path={`/icons/${def.icon}`} alt={def.name} />
             </div>
             <div class="achievement-info">
@@ -346,10 +483,6 @@
     justify-content: center;
   }
 
-  .achievement-item.unlocked .achievement-icon {
-    color: #fbbf24;
-  }
-
   .achievement-info {
     flex: 1;
   }

src/pages/FlagQuiz.svelte

@@ -224,6 +224,17 @@
       score.correct++;
       gameStats.correct++;
       currentStreak++;
+
+      // Track continent progress for correct answers
+      if (achievementsComponent && currentQuestion.correct?.tags) {
+        const continent = currentQuestion.correct.tags.find(tag =>
+          ['Europe', 'Asia', 'Africa', 'North America', 'South America', 'Oceania'].includes(tag)
+        );
+        if (continent) {
+          achievementsComponent.incrementContinentProgress(continent);
+        }
+      }
+
       // Reset consecutive skips on correct answer
       if (achievementsComponent) {
         achievementsComponent.resetConsecutiveSkips();