From 317d953a7839758d6a986f1d39fe4c0d755fe4d7 Mon Sep 17 00:00:00 2001 From: sHa Date: Mon, 11 Aug 2025 17:00:22 +0300 Subject: [PATCH] Enhance achievements: Add continent knowledge achievements and track progress for correct answers in FlagQuiz --- public/icons/flag.svg | 4 + public/icons/global.svg | 6 ++ public/icons/point-on-map.svg | 6 ++ src/components/Achievements.svelte | 153 +++++++++++++++++++++++++++-- src/pages/FlagQuiz.svelte | 11 +++ 5 files changed, 170 insertions(+), 10 deletions(-) create mode 100644 public/icons/flag.svg create mode 100644 public/icons/global.svg create mode 100644 public/icons/point-on-map.svg diff --git a/public/icons/flag.svg b/public/icons/flag.svg new file mode 100644 index 0000000..7f3de03 --- /dev/null +++ b/public/icons/flag.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/icons/global.svg b/public/icons/global.svg new file mode 100644 index 0000000..345992d --- /dev/null +++ b/public/icons/global.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/icons/point-on-map.svg b/public/icons/point-on-map.svg new file mode 100644 index 0000000..6273e01 --- /dev/null +++ b/public/icons/point-on-map.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/Achievements.svelte b/src/components/Achievements.svelte index ff11175..4ac3858 100644 --- a/src/components/Achievements.svelte +++ b/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} > -
+
@@ -346,10 +483,6 @@ justify-content: center; } - .achievement-item.unlocked .achievement-icon { - color: #fbbf24; - } - .achievement-info { flex: 1; } diff --git a/src/pages/FlagQuiz.svelte b/src/pages/FlagQuiz.svelte index ea4026e..144b7f6 100644 --- a/src/pages/FlagQuiz.svelte +++ b/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();