mirror of
https://github.com/shadoll/sLogos.git
synced 2026-02-04 11:03:24 +00:00
Refactor components to use InlineSvg for icons, enhance Header layout with grid, and implement achievement system in FlagQuiz page
- Replaced inline SVGs with InlineSvg component in Filter, Header, and ThemeSwitcher components for better maintainability. - Improved Header layout using CSS Grid for better alignment and spacing of elements. - Added achievement tracking and display functionality in FlagQuiz, including reset confirmation dialog and achievement count updates. - Enhanced user feedback with animated result icons in FlagQuiz for correct and wrong answers. - Introduced country info tooltips in FlagQuiz for additional context on answers.
This commit is contained in:
70
src/components/AchievementButton.svelte
Normal file
70
src/components/AchievementButton.svelte
Normal file
@@ -0,0 +1,70 @@
|
||||
<script>
|
||||
import InlineSvg from './InlineSvg.svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let achievementCount = { unlocked: 0, total: 0 };
|
||||
|
||||
function handleClick() {
|
||||
dispatch('click');
|
||||
}
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="achievement-button"
|
||||
on:click={handleClick}
|
||||
title="View achievements"
|
||||
>
|
||||
<span class="qh-value">
|
||||
<div class="achievement-icon">
|
||||
<InlineSvg path="/icons/medal-ribbon.svg" alt="Achievements" />
|
||||
</div>
|
||||
<span class="achievement-count">{achievementCount.unlocked}/{achievementCount.total}</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.achievement-button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: var(--color-text);
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.2s ease;
|
||||
min-height: 23px;
|
||||
}
|
||||
|
||||
.achievement-button:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.achievement-button .qh-label {
|
||||
color: var(--color-text-secondary);
|
||||
margin-right: 0.35rem;
|
||||
}
|
||||
|
||||
.achievement-button .qh-value {
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.achievement-icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.achievement-count {
|
||||
color: inherit;
|
||||
}
|
||||
</style>
|
||||
458
src/components/Achievements.svelte
Normal file
458
src/components/Achievements.svelte
Normal file
@@ -0,0 +1,458 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import InlineSvg from './InlineSvg.svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
// Props
|
||||
export let gameStats = { correct: 0, wrong: 0, total: 0, skipped: 0 };
|
||||
export let currentStreak = 0;
|
||||
export let show = false;
|
||||
|
||||
// Achievement state
|
||||
let achievements = {};
|
||||
let newAchievements = [];
|
||||
|
||||
// Achievement definitions
|
||||
const achievementDefinitions = {
|
||||
'first_correct': {
|
||||
name: 'First Victory',
|
||||
description: 'Answer your first question correctly',
|
||||
icon: 'smile-squre.svg',
|
||||
requirement: () => gameStats.correct >= 1
|
||||
},
|
||||
'perfect_10': {
|
||||
name: 'Perfect Ten',
|
||||
description: 'Answer 10 questions correctly without any mistakes',
|
||||
icon: 'medal-star.svg',
|
||||
requirement: () => currentStreak >= 10
|
||||
},
|
||||
'speedrunner': {
|
||||
name: 'Speed Runner',
|
||||
description: 'Skip 10 questions in a row',
|
||||
icon: 'running.svg',
|
||||
requirement: () => achievements.consecutive_skips >= 10
|
||||
},
|
||||
'explorer': {
|
||||
name: 'World Explorer',
|
||||
description: 'Answer 50 questions correctly',
|
||||
icon: 'crown-minimalistic.svg',
|
||||
requirement: () => gameStats.correct >= 50
|
||||
},
|
||||
'master': {
|
||||
name: 'Flag Master',
|
||||
description: 'Answer 100 questions correctly',
|
||||
icon: 'cup-first.svg',
|
||||
requirement: () => gameStats.correct >= 100
|
||||
},
|
||||
'persistent': {
|
||||
name: 'Persistent Scholar',
|
||||
description: 'Answer 25 questions (correct or wrong)',
|
||||
icon: 'medal-ribbons-star.svg',
|
||||
requirement: () => gameStats.total >= 25
|
||||
},
|
||||
'perfectionist': {
|
||||
name: 'Perfectionist',
|
||||
description: 'Achieve 90% accuracy with at least 20 answers',
|
||||
icon: 'medal-star-circle.svg',
|
||||
requirement: () => gameStats.total >= 20 && (gameStats.correct / gameStats.total) >= 0.9
|
||||
},
|
||||
'party_time': {
|
||||
name: 'Party Time!',
|
||||
description: 'Answer 5 questions correctly in a row',
|
||||
icon: 'confetti-minimalistic.svg',
|
||||
requirement: () => currentStreak >= 5
|
||||
},
|
||||
'dedication': {
|
||||
name: 'Dedicated Learner',
|
||||
description: 'Answer 10 questions in total',
|
||||
icon: 'check-circle.svg',
|
||||
requirement: () => gameStats.total >= 10
|
||||
},
|
||||
'legend': {
|
||||
name: 'Geography Legend',
|
||||
description: 'Answer 200 questions correctly',
|
||||
icon: 'crown-minimalistic.svg',
|
||||
requirement: () => gameStats.correct >= 200
|
||||
}
|
||||
};
|
||||
|
||||
// Achievement functions
|
||||
export function loadAchievements() {
|
||||
try {
|
||||
const saved = localStorage.getItem('flagQuizAchievements');
|
||||
if (saved) {
|
||||
achievements = JSON.parse(saved);
|
||||
} else {
|
||||
achievements = { consecutive_skips: 0 };
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading achievements:', error);
|
||||
achievements = { consecutive_skips: 0 };
|
||||
}
|
||||
}
|
||||
|
||||
function saveAchievements() {
|
||||
localStorage.setItem('flagQuizAchievements', JSON.stringify(achievements));
|
||||
}
|
||||
|
||||
export function checkAchievements() {
|
||||
const newUnlocked = [];
|
||||
|
||||
Object.entries(achievementDefinitions).forEach(([key, achievement]) => {
|
||||
if (!achievements[key] && achievement.requirement()) {
|
||||
achievements[key] = {
|
||||
unlocked: true,
|
||||
unlockedAt: Date.now()
|
||||
};
|
||||
newUnlocked.push({
|
||||
key,
|
||||
...achievement
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (newUnlocked.length > 0) {
|
||||
newAchievements = [...newAchievements, ...newUnlocked];
|
||||
saveAchievements();
|
||||
showNewAchievements();
|
||||
dispatch('achievementsUnlocked', newUnlocked);
|
||||
}
|
||||
}
|
||||
|
||||
function showNewAchievements() {
|
||||
// Show achievement notifications briefly
|
||||
setTimeout(() => {
|
||||
newAchievements = [];
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
export function getUnlockedAchievements() {
|
||||
return Object.entries(achievements)
|
||||
.filter(([key, data]) => data.unlocked && achievementDefinitions[key])
|
||||
.map(([key, data]) => ({
|
||||
key,
|
||||
...achievementDefinitions[key],
|
||||
...data
|
||||
}));
|
||||
}
|
||||
|
||||
export function getAchievementCount() {
|
||||
return {
|
||||
unlocked: Object.values(achievements).filter(a => a.unlocked).length,
|
||||
total: Object.keys(achievementDefinitions).length
|
||||
};
|
||||
}
|
||||
|
||||
export function incrementConsecutiveSkips() {
|
||||
achievements.consecutive_skips = (achievements.consecutive_skips || 0) + 1;
|
||||
saveAchievements();
|
||||
}
|
||||
|
||||
export function resetConsecutiveSkips() {
|
||||
achievements.consecutive_skips = 0;
|
||||
saveAchievements();
|
||||
}
|
||||
|
||||
// Initialize achievements on component mount
|
||||
loadAchievements();
|
||||
|
||||
function handleOverlayClick(event) {
|
||||
if (event.target === event.currentTarget) {
|
||||
show = false;
|
||||
dispatch('close');
|
||||
}
|
||||
}
|
||||
|
||||
function handleOverlayKeydown(event) {
|
||||
if (event.key === 'Escape') {
|
||||
show = false;
|
||||
dispatch('close');
|
||||
}
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
show = false;
|
||||
dispatch('close');
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Achievement display modal -->
|
||||
{#if show}
|
||||
<div
|
||||
class="achievements-overlay"
|
||||
on:click={handleOverlayClick}
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-label="Close achievements (click background or press Escape)"
|
||||
on:keydown={handleOverlayKeydown}
|
||||
>
|
||||
<div
|
||||
class="achievements-modal"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="achievements-title"
|
||||
>
|
||||
<div class="achievements-header">
|
||||
<h2 id="achievements-title">🏆 Achievements</h2>
|
||||
<button class="close-btn" on:click={closeModal}>✕</button>
|
||||
</div>
|
||||
|
||||
<div class="achievements-content">
|
||||
{#each Object.entries(achievementDefinitions) as [key, def]}
|
||||
<div class="achievement-item" class:unlocked={achievements[key]?.unlocked}>
|
||||
<div class="achievement-icon">
|
||||
<InlineSvg path={`/icons/${def.icon}`} alt={def.name} />
|
||||
</div>
|
||||
<div class="achievement-info">
|
||||
<div class="achievement-name">{def.name}</div>
|
||||
<div class="achievement-description">{def.description}</div>
|
||||
{#if achievements[key]?.unlocked}
|
||||
<div class="achievement-unlocked">
|
||||
<div class="status-icon">
|
||||
<InlineSvg path="/icons/check-circle.svg" alt="Unlocked" />
|
||||
</div>
|
||||
<span>Unlocked!</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="achievement-locked">
|
||||
<div class="status-icon">
|
||||
<InlineSvg path="/icons/lock-locked.svg" alt="Locked" />
|
||||
</div>
|
||||
<span>Locked</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Achievement notifications -->
|
||||
{#if newAchievements.length > 0}
|
||||
<div class="achievement-notifications">
|
||||
{#each newAchievements as achievement}
|
||||
<div class="achievement-notification" key={achievement.key}>
|
||||
<div class="notification-icon">
|
||||
<InlineSvg path={`/icons/${achievement.icon}`} alt="Achievement" />
|
||||
</div>
|
||||
<div class="notification-text">
|
||||
<div class="notification-title">Achievement Unlocked!</div>
|
||||
<div class="notification-name">{achievement.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
/* Achievement modal styles */
|
||||
.achievements-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.achievements-modal {
|
||||
background: var(--color-bg-secondary);
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: 1rem;
|
||||
padding: 0;
|
||||
max-width: 600px;
|
||||
width: 90%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 10px 24px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
.achievements-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--color-bg-secondary);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.achievements-header h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-primary);
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background-color: var(--color-border);
|
||||
}
|
||||
|
||||
.achievements-content {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.achievement-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--color-bg-primary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.achievement-item.unlocked {
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-primary-light);
|
||||
}
|
||||
|
||||
.achievement-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.achievement-item.unlocked .achievement-icon {
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.achievement-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.achievement-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.achievement-description {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.achievement-unlocked {
|
||||
font-size: 0.8rem;
|
||||
color: #22c55e;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.achievement-locked {
|
||||
font-size: 0.8rem;
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.achievement-unlocked .status-icon {
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.achievement-locked .status-icon {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Achievement notifications */
|
||||
.achievement-notifications {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
z-index: 1100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.achievement-notification {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
animation: slideInRight 0.3s ease-out;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.notification-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.notification-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.notification-title {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.notification-name {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,4 +1,5 @@
|
||||
<script>
|
||||
import InlineSvg from "./InlineSvg.svelte";
|
||||
export let allLogos = [];
|
||||
export let allTags = [];
|
||||
export let selectedTags = [];
|
||||
@@ -122,18 +123,9 @@
|
||||
aria-label="Open filter options"
|
||||
class:active={tagDropdownOpen}
|
||||
>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v2a1 1 0 0 1-.293.707L14 13.414V19a1 1 0 0 1-.553.894l-2 1A1 1 0 0 1 10 20v-6.586L3.293 6.707A1 1 0 0 1 3 6V4z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
<span class="filter-icon">
|
||||
<InlineSvg path="/icons/filter.svg" alt="Filter" />
|
||||
</span>
|
||||
{#if selectedTags.length + selectedBrands.length + selectedVariants.length + (compactMode ? 1 : 0) > 0}
|
||||
<span class="filter-count"
|
||||
>{selectedTags.length + selectedBrands.length + selectedVariants.length + (compactMode ? 1 : 0)}</span
|
||||
@@ -142,6 +134,7 @@
|
||||
</button>
|
||||
{#if tagDropdownOpen}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div class="filter-dropdown-panel" on:click|stopPropagation>
|
||||
<div class="filter-options">
|
||||
<button
|
||||
@@ -589,6 +582,12 @@
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.filter-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.filter-count {
|
||||
background: var(--color-accent);
|
||||
color: #fff;
|
||||
|
||||
@@ -5,6 +5,8 @@
|
||||
import ThemeSwitcher from "./ThemeSwitcher.svelte";
|
||||
import ListViewSwitcher from "./ListViewSwitcher.svelte";
|
||||
import SearchBar from "./SearchBar.svelte";
|
||||
import InlineSvg from "./InlineSvg.svelte";
|
||||
import AchievementButton from "./AchievementButton.svelte";
|
||||
import { collections } from "../collections.js";
|
||||
|
||||
export let displayLogos = [];
|
||||
@@ -37,6 +39,8 @@
|
||||
// Quiz-only data
|
||||
export let score = null;
|
||||
export let gameStats = null;
|
||||
export let achievementCount = { unlocked: 0, total: 0 };
|
||||
export let onAchievementClick = () => {};
|
||||
|
||||
let dropdownOpen = false;
|
||||
|
||||
@@ -70,43 +74,47 @@
|
||||
|
||||
<header class="main-header">
|
||||
<div class="header-row">
|
||||
<div class="header-title">
|
||||
<div class="header-icon">
|
||||
<img src="favicon.svg" alt="Logo Gallery icon" />
|
||||
<div class="header-left">
|
||||
<div class="header-title">
|
||||
<div class="header-icon">
|
||||
<img src="favicon.svg" alt="Logo Gallery icon" />
|
||||
</div>
|
||||
<button class="collection-title-btn" on:click={handleTitleClick} aria-haspopup="listbox" aria-expanded={dropdownOpen}>
|
||||
{displayLabel} <span class="triangle">▼</span>
|
||||
</button>
|
||||
{#if dropdownOpen}
|
||||
<ul class="collection-dropdown" role="listbox">
|
||||
{#each collections as c}
|
||||
<li
|
||||
class:active={c.name === collection}
|
||||
role="option"
|
||||
aria-selected={c.name === collection}
|
||||
tabindex="0"
|
||||
on:click={() => handleCollectionSelect(c.name)}
|
||||
on:keydown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
handleCollectionSelect(c.name);
|
||||
}
|
||||
}}
|
||||
>{c.title} Gallery</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
<button class="collection-title-btn" on:click={handleTitleClick} aria-haspopup="listbox" aria-expanded={dropdownOpen}>
|
||||
{displayLabel} <span class="triangle">▼</span>
|
||||
</button>
|
||||
{#if dropdownOpen}
|
||||
<ul class="collection-dropdown" role="listbox">
|
||||
{#each collections as c}
|
||||
<li
|
||||
class:active={c.name === collection}
|
||||
role="option"
|
||||
aria-selected={c.name === collection}
|
||||
tabindex="0"
|
||||
on:click={() => handleCollectionSelect(c.name)}
|
||||
on:keydown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
handleCollectionSelect(c.name);
|
||||
}
|
||||
}}
|
||||
>{c.title} Gallery</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{#if !isGameMode}
|
||||
<span class="logo-count">
|
||||
{#if (searchQuery && searchQuery.trim() !== "") || selectedTags.length > 0 || selectedBrands.length > 0 || selectedVariants.length > 0 || compactMode}
|
||||
{displayLogos ? displayLogos.length : 0} of {allLogos ? allLogos.length : 0} images
|
||||
displayed
|
||||
{:else}
|
||||
{allLogos ? allLogos.length : 0} images in gallery
|
||||
{/if}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<span class="logo-count">
|
||||
{#if (searchQuery && searchQuery.trim() !== "") || selectedTags.length > 0 || selectedBrands.length > 0 || selectedVariants.length > 0 || compactMode}
|
||||
{displayLogos ? displayLogos.length : 0} of {allLogos ? allLogos.length : 0} images
|
||||
displayed
|
||||
{:else}
|
||||
{allLogos ? allLogos.length : 0} images in gallery
|
||||
{/if}
|
||||
</span>
|
||||
<a href="#/game" class="game-button" class:active={isGameMode} title={isGameMode ? "Back to Main" : "Quiz Games"} on:click|preventDefault={handleGameClick}>
|
||||
🎮
|
||||
<span class="icon"><InlineSvg path="/icons/gamepad.svg" alt="Games" /></span>
|
||||
</a>
|
||||
<ThemeSwitcher {theme} {setTheme} />
|
||||
</div>
|
||||
@@ -117,40 +125,50 @@
|
||||
<div class="quiz-header-stats">
|
||||
<div class="qh-block">
|
||||
<span class="qh-label">Current:</span>
|
||||
<span class="qh-value">{score ? `${score.correct}/${score.total}` : '0/0'} {score && score.skipped > 0 ? `(⏭️ ${score.skipped})` : ''}</span>
|
||||
<span class="qh-value">{score ? `${score.correct}/${score.total}` : '0/0'} {score && score.skipped > 0 ? `(` : ''}{#if score && score.skipped > 0}<span class="quiz-icon quiz-skip"><InlineSvg path="/icons/skip-square.svg" alt="Skipped" /></span> {score.skipped}){/if}</span>
|
||||
</div>
|
||||
<div class="qh-block">
|
||||
<span class="qh-label">All Time:</span>
|
||||
<span class="qh-value">✅ {gameStats?.correct || 0} ❌ {gameStats?.wrong || 0} {gameStats?.skipped > 0 ? `⏭️ ${gameStats.skipped}` : ''}</span>
|
||||
<span class="qh-value"><span class="quiz-icon quiz-ok"><InlineSvg path="/icons/ok-square.svg" alt="Correct" /></span> {gameStats?.correct || 0} <span class="quiz-icon quiz-fail"><InlineSvg path="/icons/fail-square.svg" alt="Wrong" /></span> {gameStats?.wrong || 0} {gameStats?.skipped > 0 ? `` : ''}{#if gameStats?.skipped > 0}<span class="quiz-icon quiz-skip"><InlineSvg path="/icons/skip-square.svg" alt="Skipped" /></span> {gameStats.skipped}{/if}</span>
|
||||
</div>
|
||||
<div class="qh-block achievement-block">
|
||||
<AchievementButton
|
||||
{achievementCount}
|
||||
on:click={onAchievementClick}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<SearchBar {searchQuery} {setSearchQuery} />
|
||||
<Filter
|
||||
{allLogos}
|
||||
{allTags}
|
||||
{selectedTags}
|
||||
{selectedBrands}
|
||||
{selectedVariants}
|
||||
{tagDropdownOpen}
|
||||
{toggleDropdown}
|
||||
{addTag}
|
||||
{removeTag}
|
||||
{addBrand}
|
||||
{removeBrand}
|
||||
{addVariant}
|
||||
{removeVariant}
|
||||
{getTagObj}
|
||||
{compactMode}
|
||||
{setCompactMode}
|
||||
collection={currentCollectionObj}
|
||||
/>
|
||||
<ListViewSwitcher
|
||||
{viewMode}
|
||||
{setGridView}
|
||||
{setListView}
|
||||
{setCompactView}
|
||||
/>
|
||||
<div class="header-controls-left">
|
||||
<SearchBar {searchQuery} {setSearchQuery} />
|
||||
<Filter
|
||||
{allLogos}
|
||||
{allTags}
|
||||
{selectedTags}
|
||||
{selectedBrands}
|
||||
{selectedVariants}
|
||||
{tagDropdownOpen}
|
||||
{toggleDropdown}
|
||||
{addTag}
|
||||
{removeTag}
|
||||
{addBrand}
|
||||
{removeBrand}
|
||||
{addVariant}
|
||||
{removeVariant}
|
||||
{getTagObj}
|
||||
{compactMode}
|
||||
{setCompactMode}
|
||||
collection={currentCollectionObj}
|
||||
/>
|
||||
</div>
|
||||
<div class="header-controls-right">
|
||||
<ListViewSwitcher
|
||||
{viewMode}
|
||||
{setGridView}
|
||||
{setListView}
|
||||
{setCompactView}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -166,10 +184,25 @@
|
||||
}
|
||||
|
||||
.header-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
grid-template-areas: "left center right";
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1.5rem;
|
||||
gap: 1rem;
|
||||
grid-area: left;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.logo-count {
|
||||
@@ -178,9 +211,8 @@
|
||||
font-weight: normal;
|
||||
color: var(--color-text);
|
||||
opacity: 0.7;
|
||||
margin-left: 1rem;
|
||||
align-self: center;
|
||||
padding-top: 0.9rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.game-button {
|
||||
@@ -195,20 +227,21 @@
|
||||
text-decoration: none;
|
||||
font-size: 1.2rem;
|
||||
transition: all 0.3s ease;
|
||||
margin-left: 0.5rem;
|
||||
cursor: pointer;
|
||||
color: var(--color-text);
|
||||
grid-area: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.game-button:hover {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.game-button.active {
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
color: white;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.game-button.active:hover {
|
||||
@@ -216,10 +249,24 @@
|
||||
border-color: var(--color-primary-dark, #0056b3);
|
||||
}
|
||||
|
||||
.game-button .icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.main-header :global(.theme-switcher) {
|
||||
grid-area: right;
|
||||
justify-self: end;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
grid-area: left;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
|
||||
@@ -288,6 +335,7 @@
|
||||
.header-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
@@ -295,6 +343,18 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-controls-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.header-controls-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.quiz-header-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -319,35 +379,50 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.quiz-icon {
|
||||
display: inline-flex;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.quiz-icon.quiz-ok {
|
||||
color: #22c55e; /* green */
|
||||
}
|
||||
|
||||
.quiz-icon.quiz-fail {
|
||||
color: #ef4444; /* red */
|
||||
}
|
||||
|
||||
.quiz-icon.quiz-skip {
|
||||
color: #6b7280; /* gray */
|
||||
}
|
||||
|
||||
.achievement-block {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.header-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto auto auto;
|
||||
grid-template-columns: 1fr auto auto;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"left center right"
|
||||
"count count count";
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.game-button {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
margin-left: 0;
|
||||
.header-left {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.logo-count {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
margin-left: 0;
|
||||
padding-top: 0;
|
||||
grid-area: count;
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
} .header-controls {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
grid-template-rows: auto auto;
|
||||
@@ -355,21 +430,20 @@
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.header-controls :global(.search-bar) {
|
||||
.header-controls-left {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
grid-row: 1 / -1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.header-controls :global(.view-toggle) {
|
||||
.header-controls-right {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.header-controls :global(.filter-section) {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
/* Prevent header title from wrapping and reduce size on small screens */
|
||||
.collection-title-btn {
|
||||
font-size: 1.1rem;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script>
|
||||
import InlineSvg from "./InlineSvg.svelte";
|
||||
export let theme = "system";
|
||||
export let setTheme = () => {};
|
||||
</script>
|
||||
@@ -10,66 +11,21 @@
|
||||
class:active={theme === "system"}
|
||||
aria-label="System theme"
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><circle
|
||||
cx="10"
|
||||
cy="10"
|
||||
r="8"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
/><path
|
||||
d="M10 2a8 8 0 0 1 8 8"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
/></svg
|
||||
>
|
||||
<span class="icon"><InlineSvg path="/icons/record.svg" alt="System theme" /></span>
|
||||
</button>
|
||||
<button
|
||||
on:click={() => setTheme("light")}
|
||||
class:active={theme === "light"}
|
||||
aria-label="Light mode"
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><circle
|
||||
cx="10"
|
||||
cy="10"
|
||||
r="5"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
/><path
|
||||
d="M10 1v2M10 17v2M3.22 3.22l1.42 1.42M15.36 15.36l1.42 1.42M1 10h2M17 10h2M3.22 16.78l1.42-1.42M15.36 4.64l1.42-1.42"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
/></svg
|
||||
>
|
||||
<span class="icon"><InlineSvg path="/icons/sun.svg" alt="Light mode" /></span>
|
||||
</button>
|
||||
<button
|
||||
on:click={() => setTheme("dark")}
|
||||
class:active={theme === "dark"}
|
||||
aria-label="Dark mode"
|
||||
>
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
d="M15.5 13A7 7 0 0 1 7 4.5a7 7 0 1 0 8.5 8.5z"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
/></svg
|
||||
>
|
||||
<span class="icon"><InlineSvg path="/icons/moon.svg" alt="Dark mode" /></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -81,4 +37,10 @@
|
||||
gap: 0.2rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.theme-switch-group .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: inline-flex;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import Header from '../components/Header.svelte';
|
||||
import InlineSvg from '../components/InlineSvg.svelte';
|
||||
import Achievements from '../components/Achievements.svelte';
|
||||
import AchievementButton from '../components/AchievementButton.svelte';
|
||||
|
||||
// Game data
|
||||
let flags = [];
|
||||
@@ -20,15 +23,24 @@
|
||||
let resultMessage = '';
|
||||
let showResult = false;
|
||||
let timeoutId = null;
|
||||
let showCountryInfo = false;
|
||||
let showResultCountryInfo = false;
|
||||
|
||||
// Scoring
|
||||
let score = { correct: 0, total: 0, skipped: 0 };
|
||||
let gameStats = { correct: 0, wrong: 0, total: 0, skipped: 0 };
|
||||
|
||||
// Achievement System
|
||||
let currentStreak = 0;
|
||||
let showAchievements = false;
|
||||
let achievementsComponent;
|
||||
let achievementCount = { unlocked: 0, total: 0 };
|
||||
|
||||
// Settings
|
||||
let autoAdvance = true;
|
||||
let showSettings = false;
|
||||
let settingsLoaded = false;
|
||||
let showResetConfirmation = false;
|
||||
|
||||
// Theme
|
||||
let theme = 'system';
|
||||
@@ -44,6 +56,11 @@
|
||||
localStorage.setItem('flagQuizSettings', JSON.stringify({ autoAdvance }));
|
||||
}
|
||||
|
||||
// Update achievement count when achievements component is available
|
||||
$: if (achievementsComponent) {
|
||||
updateAchievementCount();
|
||||
}
|
||||
|
||||
// Load game stats from localStorage
|
||||
onMount(async () => {
|
||||
// Initialize theme
|
||||
@@ -146,6 +163,8 @@
|
||||
selectedAnswer = null;
|
||||
correctAnswer = null;
|
||||
answered = false;
|
||||
showCountryInfo = false;
|
||||
showResultCountryInfo = false;
|
||||
|
||||
// Randomly choose question type
|
||||
questionType = Math.random() < 0.5 ? 'flag-to-country' : 'country-to-flag';
|
||||
@@ -204,14 +223,28 @@
|
||||
if (isCorrect) {
|
||||
score.correct++;
|
||||
gameStats.correct++;
|
||||
currentStreak++;
|
||||
// Reset consecutive skips on correct answer
|
||||
if (achievementsComponent) {
|
||||
achievementsComponent.resetConsecutiveSkips();
|
||||
}
|
||||
} else {
|
||||
gameStats.wrong++;
|
||||
currentStreak = 0; // Reset streak on wrong answer
|
||||
if (achievementsComponent) {
|
||||
achievementsComponent.resetConsecutiveSkips();
|
||||
}
|
||||
}
|
||||
gameStats.total++;
|
||||
|
||||
// Save stats to localStorage
|
||||
localStorage.setItem('flagQuizStats', JSON.stringify(gameStats));
|
||||
|
||||
// Check for new achievements
|
||||
if (achievementsComponent) {
|
||||
achievementsComponent.checkAchievements();
|
||||
}
|
||||
|
||||
// Auto-advance to next question with different delays if auto mode is on
|
||||
if (autoAdvance) {
|
||||
const delay = isCorrect ? 2000 : 4000; // Double delay for wrong answers
|
||||
@@ -219,9 +252,7 @@
|
||||
generateQuestion();
|
||||
}, delay);
|
||||
}
|
||||
}
|
||||
|
||||
function skipQuestion() {
|
||||
} function skipQuestion() {
|
||||
if (gameState !== 'question') return;
|
||||
|
||||
// Update skip counters
|
||||
@@ -229,6 +260,16 @@
|
||||
gameStats.skipped++;
|
||||
gameStats.total++;
|
||||
|
||||
// Track consecutive skips for Speed Runner achievement
|
||||
if (achievementsComponent) {
|
||||
achievementsComponent.incrementConsecutiveSkips();
|
||||
}
|
||||
|
||||
// Check for achievements
|
||||
if (achievementsComponent) {
|
||||
achievementsComponent.checkAchievements();
|
||||
}
|
||||
|
||||
// Save stats to localStorage
|
||||
localStorage.setItem('flagQuizStats', JSON.stringify(gameStats));
|
||||
|
||||
@@ -268,12 +309,32 @@
|
||||
}
|
||||
|
||||
function resetAllStats() {
|
||||
gameStats = { correct: 0, wrong: 0, skipped: 0 };
|
||||
showResetConfirmation = true;
|
||||
}
|
||||
|
||||
function confirmReset() {
|
||||
// Reset game statistics
|
||||
gameStats = { correct: 0, wrong: 0, total: 0, skipped: 0 };
|
||||
score = { correct: 0, total: 0, skipped: 0 };
|
||||
currentStreak = 0;
|
||||
localStorage.setItem('flagQuizStats', JSON.stringify(gameStats));
|
||||
|
||||
// Reset achievements
|
||||
if (achievementsComponent) {
|
||||
localStorage.removeItem('flagQuizAchievements');
|
||||
// Reinitialize achievements component
|
||||
achievementsComponent.loadAchievements();
|
||||
updateAchievementCount();
|
||||
}
|
||||
|
||||
showResetConfirmation = false;
|
||||
showSettings = false;
|
||||
}
|
||||
|
||||
function cancelReset() {
|
||||
showResetConfirmation = false;
|
||||
}
|
||||
|
||||
function nextQuestion() {
|
||||
generateQuestion();
|
||||
}
|
||||
@@ -285,9 +346,26 @@
|
||||
function getFlagImage(flag) {
|
||||
return `/images/flags/${flag.path}`;
|
||||
}
|
||||
|
||||
function updateAchievementCount() {
|
||||
if (achievementsComponent) {
|
||||
achievementCount = achievementsComponent.getAchievementCount();
|
||||
}
|
||||
}
|
||||
|
||||
function handleAchievementsUnlocked() {
|
||||
updateAchievementCount();
|
||||
}
|
||||
</script>
|
||||
|
||||
<Header {theme} {setTheme} {score} {gameStats} />
|
||||
<Header
|
||||
{theme}
|
||||
{setTheme}
|
||||
{score}
|
||||
{gameStats}
|
||||
{achievementCount}
|
||||
onAchievementClick={() => showAchievements = true}
|
||||
/>
|
||||
|
||||
<main class="flag-quiz">
|
||||
<div class="container">
|
||||
@@ -334,6 +412,41 @@
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Reset Confirmation Dialog -->
|
||||
{#if showResetConfirmation}
|
||||
<div class="confirmation-overlay" on:click={(e) => e.target === e.currentTarget && cancelReset()}>
|
||||
<div class="confirmation-dialog">
|
||||
<div class="confirmation-header">
|
||||
<h3>⚠️ Reset All Data</h3>
|
||||
</div>
|
||||
<div class="confirmation-content">
|
||||
<p>This action will permanently delete:</p>
|
||||
<ul>
|
||||
<li>✗ All game statistics (correct, wrong, skipped answers)</li>
|
||||
<li>✗ Current session score</li>
|
||||
<li>✗ All unlocked achievements</li>
|
||||
<li>✗ Achievement progress</li>
|
||||
</ul>
|
||||
<p><strong>This cannot be undone!</strong></p>
|
||||
</div>
|
||||
<div class="confirmation-actions">
|
||||
<button class="cancel-btn" on:click={cancelReset}>Cancel</button>
|
||||
<button class="confirm-btn" on:click={confirmReset}>Reset Everything</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Achievements Component -->
|
||||
<Achievements
|
||||
bind:this={achievementsComponent}
|
||||
{gameStats}
|
||||
{currentStreak}
|
||||
show={showAchievements}
|
||||
on:close={() => showAchievements = false}
|
||||
on:achievementsUnlocked={handleAchievementsUnlocked}
|
||||
/>
|
||||
{#if gameState === 'loading'}
|
||||
<div class="loading">Loading flags...</div>
|
||||
{:else if currentQuestion}
|
||||
@@ -350,12 +463,28 @@
|
||||
{#if showResult}
|
||||
<div class="result">
|
||||
{#if selectedAnswer === correctAnswer}
|
||||
<div class="correct-result">✅ Correct!</div>
|
||||
<div class="correct-result"><span class="result-icon smile-icon"><InlineSvg path="/icons/smile-squre.svg" alt="Correct" /></span> Correct!</div>
|
||||
{:else}
|
||||
<div class="wrong-result">
|
||||
❌ Wrong!
|
||||
<span class="result-icon sad-icon"><InlineSvg path="/icons/sad-square.svg" alt="Wrong" /></span> Wrong!
|
||||
{#if currentQuestion.type === 'flag-to-country'}
|
||||
The correct answer is: {getCountryName(currentQuestion.correct)}.
|
||||
<span class="result-country-info">
|
||||
The correct answer is: {getCountryName(currentQuestion.correct)}.
|
||||
<button
|
||||
class="info-icon result-info-btn"
|
||||
aria-label="Show country info"
|
||||
aria-expanded={showResultCountryInfo}
|
||||
on:click={() => (showResultCountryInfo = !showResultCountryInfo)}
|
||||
on:keydown={(e) => { if (e.key === 'Escape') showResultCountryInfo = false; }}
|
||||
>
|
||||
<InlineSvg path="/icons/info-square.svg" alt="Country info" />
|
||||
</button>
|
||||
{#if showResultCountryInfo}
|
||||
<div class="info-tooltip result-info-tooltip" role="dialog" aria-live="polite">
|
||||
{currentQuestion.correct.meta.description}
|
||||
</div>
|
||||
{/if}
|
||||
</span>
|
||||
{:else}
|
||||
You selected the {getCountryName(currentQuestion.options[selectedAnswer])} flag.
|
||||
{/if}
|
||||
@@ -386,7 +515,25 @@
|
||||
</div>
|
||||
{:else}
|
||||
<div class="country-display">
|
||||
<h2 class="country-name">{getCountryName(currentQuestion.correct)}</h2>
|
||||
<h2 class="country-name">
|
||||
{getCountryName(currentQuestion.correct)}
|
||||
{#if currentQuestion.correct?.meta?.description}
|
||||
<button
|
||||
class="info-icon"
|
||||
aria-label="Show country info"
|
||||
aria-expanded={showCountryInfo}
|
||||
on:click={() => (showCountryInfo = !showCountryInfo)}
|
||||
on:keydown={(e) => { if (e.key === 'Escape') showCountryInfo = false; }}
|
||||
>
|
||||
<InlineSvg path="/icons/info-square.svg" alt="Country info" />
|
||||
</button>
|
||||
{#if showCountryInfo}
|
||||
<div class="info-tooltip" role="dialog" aria-live="polite">
|
||||
{currentQuestion.correct.meta.description}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="flag-options">
|
||||
@@ -414,9 +561,9 @@
|
||||
{/if}
|
||||
|
||||
<div class="controls">
|
||||
<a href="#/game" class="btn btn-secondary">Back to Games</a>
|
||||
<button class="btn btn-secondary" on:click={resetGame}>New Session</button>
|
||||
<button class="btn btn-secondary" on:click={toggleSettings} title="Settings">Settings</button>
|
||||
<a href="#/game" class="btn btn-primary">Back to Games</a>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@@ -532,6 +679,101 @@
|
||||
background: #cc3333;
|
||||
}
|
||||
|
||||
/* Confirmation Dialog Styles */
|
||||
.confirmation-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.confirmation-dialog {
|
||||
background: var(--color-bg-primary);
|
||||
border: 2px solid var(--color-border);
|
||||
border-radius: 1rem;
|
||||
padding: 0;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
box-shadow: 0 10px 24px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
.confirmation-header {
|
||||
padding: 1.5rem 1.5rem 1rem 1.5rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.confirmation-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.3rem;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.confirmation-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.confirmation-content p {
|
||||
margin: 0 0 1rem 0;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.confirmation-content ul {
|
||||
margin: 1rem 0;
|
||||
padding-left: 1.5rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.confirmation-content li {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.confirmation-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.5rem 1.5rem 1.5rem;
|
||||
justify-content: flex-end;
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background: var(--color-bg-secondary);
|
||||
border: 1px solid var(--color-border);
|
||||
color: var(--color-text-primary);
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.cancel-btn:hover {
|
||||
background: var(--color-bg-hover);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background: #dc2626;
|
||||
border: 1px solid #dc2626;
|
||||
color: white;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.confirm-btn:hover {
|
||||
background: #b91c1c;
|
||||
border-color: #b91c1c;
|
||||
}
|
||||
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
@@ -592,6 +834,7 @@
|
||||
.country-display {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.country-name {
|
||||
@@ -601,6 +844,52 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
margin-left: 0.5rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
vertical-align: middle;
|
||||
background: none;
|
||||
color: var(--color-text-primary);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.info-icon :global(.svg-wrapper) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.info-icon:hover,
|
||||
.info-icon:focus {
|
||||
color: var(--color-text-primary);
|
||||
border-color: var(--color-border);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.info-tooltip {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: calc(100% + 8px);
|
||||
transform: translateX(-50%);
|
||||
background: var(--color-bg-secondary);
|
||||
color: var(--color-text-primary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem 1rem;
|
||||
width: min(90vw, 520px);
|
||||
max-height: 40vh;
|
||||
overflow: auto;
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.2);
|
||||
z-index: 5;
|
||||
text-align: left;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
@@ -700,6 +989,100 @@
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
display: inline-flex;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
vertical-align: middle;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.result-icon.smile-icon {
|
||||
color: #22c55e; /* green for correct */
|
||||
animation: correctBounce 0.6s ease-out;
|
||||
}
|
||||
|
||||
.result-icon.sad-icon {
|
||||
color: #ef4444; /* red for wrong */
|
||||
animation: wrongShake 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes correctBounce {
|
||||
0% {
|
||||
transform: scale(0) rotate(0deg);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.3) rotate(5deg);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wrongShake {
|
||||
0% {
|
||||
transform: translateX(0) scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
25% {
|
||||
transform: translateX(-5px) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(5px) scale(1);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(-3px) scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.result-country-info {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.result-info-btn {
|
||||
margin-left: 0.25rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
vertical-align: middle;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-primary);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.result-info-btn:hover,
|
||||
.result-info-btn:focus {
|
||||
opacity: 1;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.result-info-tooltip {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-top: 0.5rem;
|
||||
min-width: 200px;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -757,8 +1140,8 @@
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
padding: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
padding: 0.75rem;
|
||||
padding-top: 0.75rem;
|
||||
}
|
||||
|
||||
.options {
|
||||
@@ -775,6 +1158,12 @@
|
||||
max-height: 180px;
|
||||
}
|
||||
|
||||
.info-tooltip {
|
||||
width: 92vw;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.controls {
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
|
||||
Reference in New Issue
Block a user