sha/sLogos
1
0
Fork 0
mirror of https://github.com/shadoll/sLogos.git synced 2025-12-20 06:30:00 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor achievement definitions: Standardize formatting and add new achievements for improved clarity and functionality

Browse Source
This commit is contained in:
sHa
2025-08-11 16:27:43 +03:00
parent 064401dc58
commit c7bc987d41
1 changed files with 78 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/components/Achievements.svelte
View File

@@ -1,6 +1,6 @@
<script> <script>
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from "svelte";
import InlineSvg from './InlineSvg.svelte'; import InlineSvg from "./InlineSvg.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@@ -15,85 +15,90 @@
// Achievement definitions // Achievement definitions
const achievementDefinitions = { const achievementDefinitions = {
'first_correct': { first_correct: {
name: 'First Victory', name: "First Victory",
description: 'Answer your first question correctly', description: "Answer your first question correctly",
icon: 'smile-squre.svg', icon: "smile-squre.svg",
requirement: () => gameStats.correct >= 1 requirement: () => gameStats.correct >= 1,
}, },
'perfect_10': { party_time: {
name: 'Perfect Ten', name: "Party Time!",
description: 'Answer 10 questions correctly without any mistakes', description: "Answer 5 questions correctly in a row",
icon: 'medal-star.svg', icon: "confetti-minimalistic.svg",
requirement: () => currentStreak >= 10 requirement: () => currentStreak >= 5,
}, },
'speedrunner': { dedication: {
name: 'Speed Runner', name: "Dedicated Learner",
description: 'Skip 10 questions in a row', description: "Answer 10 questions in total",
icon: 'running.svg', icon: "check-circle.svg",
requirement: () => achievements.consecutive_skips >= 10 requirement: () => gameStats.total >= 10,
}, },
'explorer': { perfect_10: {
name: 'World Explorer', name: "Perfect Ten",
description: 'Answer 50 questions correctly', description: "Answer 10 questions correctly without any mistakes",
icon: 'crown-minimalistic.svg', icon: "medal-star.svg",
requirement: () => gameStats.correct >= 50 requirement: () => currentStreak >= 10,
}, },
'master': { speedrunner: {
name: 'Flag Master', name: "Speed Runner",
description: 'Answer 100 questions correctly', description: "Skip 10 questions in a row",
icon: 'cup-first.svg', icon: "running.svg",
requirement: () => gameStats.correct >= 100 requirement: () => achievements.consecutive_skips >= 10,
}, },
'persistent': {
name: 'Persistent Scholar', persistent: {
description: 'Answer 25 questions (correct or wrong)', name: "Persistent Scholar",
icon: 'medal-ribbons-star.svg', description: "Answer 25 questions (correct or wrong)",
requirement: () => gameStats.total >= 25 icon: "medal-ribbons-star.svg",
requirement: () => gameStats.total >= 25,
}, },
'perfectionist': {
name: 'Perfectionist', perfectionist: {
description: 'Achieve 90% accuracy with at least 20 answers', name: "Perfectionist",
icon: 'medal-star-circle.svg', description: "Achieve 90% accuracy with at least 20 answers",
requirement: () => gameStats.total >= 20 && (gameStats.correct / gameStats.total) >= 0.9 icon: "medal-star-circle.svg",
requirement: () =>
gameStats.total >= 20 && gameStats.correct / gameStats.total >= 0.9,
}, },
'party_time': { explorer: {
name: 'Party Time!', name: "World Explorer",
description: 'Answer 5 questions correctly in a row', description: "Answer 50 questions correctly",
icon: 'confetti-minimalistic.svg', icon: "crown-minimalistic.svg",
requirement: () => currentStreak >= 5 requirement: () => gameStats.correct >= 50,
}, },
'dedication': {
name: 'Dedicated Learner', master: {
description: 'Answer 10 questions in total', name: "Flag Master",
icon: 'check-circle.svg', description: "Answer 100 questions correctly",
requirement: () => gameStats.total >= 10 icon: "cup-first.svg",
requirement: () => gameStats.correct >= 100,
},
legend: {
name: "Geography Legend",
description: "Answer 200 questions correctly",
icon: "crown-star.svg",
requirement: () => gameStats.correct >= 200,
}, },
'legend': {
name: 'Geography Legend',
description: 'Answer 200 questions correctly',
icon: 'crown-star.svg',
requirement: () => gameStats.correct >= 200
}
}; };
// Achievement functions // Achievement functions
export function loadAchievements() { export function loadAchievements() {
try { try {
const saved = localStorage.getItem('flagQuizAchievements'); const saved = localStorage.getItem("flagQuizAchievements");
if (saved) { if (saved) {
achievements = JSON.parse(saved); achievements = JSON.parse(saved);
} else { } else {
achievements = { consecutive_skips: 0 }; achievements = { consecutive_skips: 0 };
} }
} catch (error) { } catch (error) {
console.error('Error loading achievements:', error); console.error("Error loading achievements:", error);
achievements = { consecutive_skips: 0 }; achievements = { consecutive_skips: 0 };
} }
} }
function saveAchievements() { function saveAchievements() {
localStorage.setItem('flagQuizAchievements', JSON.stringify(achievements)); localStorage.setItem("flagQuizAchievements", JSON.stringify(achievements));
} }
export function checkAchievements() { export function checkAchievements() {
@@ -103,11 +108,11 @@
if (!achievements[key] && achievement.requirement()) { if (!achievements[key] && achievement.requirement()) {
achievements[key] = { achievements[key] = {
unlocked: true, unlocked: true,
unlockedAt: Date.now() unlockedAt: Date.now(),
}; };
newUnlocked.push({ newUnlocked.push({
key, key,
...achievement ...achievement,
}); });
} }
}); });
@@ -116,7 +121,7 @@
newAchievements = [...newAchievements, ...newUnlocked]; newAchievements = [...newAchievements, ...newUnlocked];
saveAchievements(); saveAchievements();
showNewAchievements(); showNewAchievements();
dispatch('achievementsUnlocked', newUnlocked); dispatch("achievementsUnlocked", newUnlocked);
} }
} }
@@ -133,14 +138,14 @@
.map(([key, data]) => ({ .map(([key, data]) => ({
key, key,
...achievementDefinitions[key], ...achievementDefinitions[key],
...data ...data,
})); }));
} }
export function getAchievementCount() { export function getAchievementCount() {
return { return {
unlocked: Object.values(achievements).filter(a => a.unlocked).length, unlocked: Object.values(achievements).filter((a) => a.unlocked).length,
total: Object.keys(achievementDefinitions).length total: Object.keys(achievementDefinitions).length,
}; };
} }
@@ -160,20 +165,20 @@
function handleOverlayClick(event) { function handleOverlayClick(event) {
if (event.target === event.currentTarget) { if (event.target === event.currentTarget) {
show = false; show = false;
dispatch('close'); dispatch("close");
} }
} }
function handleOverlayKeydown(event) { function handleOverlayKeydown(event) {
if (event.key === 'Escape') { if (event.key === "Escape") {
show = false; show = false;
dispatch('close'); dispatch("close");
} }
} }
function closeModal() { function closeModal() {
show = false; show = false;
dispatch('close'); dispatch("close");
} }
</script> </script>
@@ -200,7 +205,10 @@
<div class="achievements-content"> <div class="achievements-content">
{#each Object.entries(achievementDefinitions) as [key, def]} {#each Object.entries(achievementDefinitions) as [key, def]}
<div class="achievement-item" class:unlocked={achievements[key]?.unlocked}> <div
class="achievement-item"
class:unlocked={achievements[key]?.unlocked}
>
<div class="achievement-icon"> <div class="achievement-icon">
<InlineSvg path={`/icons/${def.icon}`} alt={def.name} /> <InlineSvg path={`/icons/${def.icon}`} alt={def.name} />
</div> </div>
@@ -271,7 +279,7 @@
width: 90%; width: 90%;
max-height: 80vh; max-height: 80vh;
overflow-y: auto; overflow-y: auto;
box-shadow: 0 10px 24px rgba(0,0,0,0.25); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
} }
.achievements-header { .achievements-header {
@@ -415,7 +423,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
animation: slideInRight 0.3s ease-out; animation: slideInRight 0.3s ease-out;
max-width: 300px; max-width: 300px;
} }
@@ -426,7 +434,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: rgba(255,255,255,0.2); background: rgba(255, 255, 255, 0.2);
border-radius: 50%; border-radius: 50%;
} }