mirror of
https://github.com/shadoll/sLogos.git
synced 2026-08-28 11:33:29 +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:
@@ -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>
|
||||
@@ -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;
|
||||
|
||||
+169
-95
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user