Refactor FlagQuiz to integrate QuizSettings component and implement auto-advance feature with timer

ToDo.md

@@ -1,9 +1,9 @@
 [ ] Improove: In the preview page, add full header.
-[ ] Improove: Split header into two parts: static top and dynamic bottom.
 [ ] Improove: In the preview page, add possibility select custom color for each target.
-[ ] Strategy: Add quiz game to guess the logo or flags and invert
 
 Done:
+[v] Strategy: Add quiz game to guess the logo or flags and invert
+[v] Improove: Split header into two parts: static top and dynamic bottom.
 [v] Improove: To the tiny card add the color chooser. It should be one circle that display current color, on click it should open color picker.
 [v] Strategy: Add differents base/collections of images: Flags,
 [v] Strategy: WebApp, PWA

public/icons/danger-triangle.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.30928 9C8.59494 5 9.96832 3 12 3C14.3107 3 15.7699 5.58716 18.6883 10.7615L19.0519 11.4063C21.4771 15.7061 22.6897 17.856 21.5937 19.428C20.4978 21 17.7864 21 12.3637 21H11.6363C6.21356 21 3.50217 21 2.40626 19.428C1.45498 18.0635 2.24306 16.2635 4.05373 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M12 8V13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<circle cx="12" cy="16" r="1" fill="currentColor"/>
+</svg>

src/components/QuizSettings.svelte

@@ -0,0 +1,374 @@
+<script>
+  import { createEventDispatcher } from 'svelte';
+  import InlineSvg from './InlineSvg.svelte';
+
+  const dispatch = createEventDispatcher();
+
+  // Props - settings values
+  export let autoAdvance = true;
+  export let focusWrongAnswers = false;
+  export let reduceCorrectAnswers = false;
+  export let soundEnabled = true;
+  export let showSettings = false;
+  export let showResetConfirmation = false;
+  export let quizType = 'flag'; // 'flag', 'logo', 'emblem', etc.
+
+  // Customizable labels for different quiz types
+  export let focusWrongLabel = 'Focus on previously answered incorrectly items';
+  export let reduceCorrectLabel = 'Show correctly answered items less frequently';
+
+  function toggleSettings() {
+    showSettings = !showSettings;
+    dispatch('settingsToggle', showSettings);
+  }
+
+  function handleOverlayKeydown(event) {
+    if (event.key === 'Escape') {
+      toggleSettings();
+    }
+  }
+
+  function resetAllStats() {
+    showResetConfirmation = true;
+    dispatch('resetConfirmation', true);
+  }
+
+  function handleResetStats() {
+    dispatch('resetStats');
+    showResetConfirmation = false;
+  }
+
+  // Reactive statements to dispatch settings changes
+  $: dispatch('settingsChange', {
+    autoAdvance,
+    focusWrongAnswers,
+    reduceCorrectAnswers,
+    soundEnabled
+  });
+</script>
+
+{#if showSettings}
+  <div class="settings-overlay" on:click={toggleSettings} on:keydown={handleOverlayKeydown} role="button" tabindex="0">
+    <div class="settings-modal" role="dialog" aria-modal="true" on:click|stopPropagation>
+      <div class="settings-header">
+        <InlineSvg path="/icons/settings.svg" alt="Settings" />
+        <h3>Game Settings</h3>
+        <button class="close-btn" on:click={toggleSettings} aria-label="Close settings">
+          <span class="close-icon"></span>
+        </button>
+      </div>
+
+      <div class="settings-content">
+        <div class="setting-item">
+          <label>
+            <input
+              type="checkbox"
+              bind:checked={autoAdvance}
+            />
+            Auto-advance to next question after answering
+          </label>
+        </div>
+
+        <div class="setting-item">
+          <label>
+            <input
+              type="checkbox"
+              bind:checked={focusWrongAnswers}
+            />
+            {focusWrongLabel}
+          </label>
+        </div>
+
+        <div class="setting-item">
+          <label>
+            <input
+              type="checkbox"
+              bind:checked={reduceCorrectAnswers}
+            />
+            {reduceCorrectLabel}
+          </label>
+        </div>
+
+        <div class="setting-item">
+          <label>
+            <input
+              type="checkbox"
+              bind:checked={soundEnabled}
+            />
+            Enable sound effects for answers
+          </label>
+        </div>
+
+        <div class="setting-actions">
+          <button class="reset-stats-btn" on:click={resetAllStats}>
+            Reset All Statistics
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+{/if}
+
+{#if showResetConfirmation}
+  <div class="confirmation-overlay" role="dialog" aria-modal="true">
+    <div class="confirmation-modal">
+      <div class="confirmation-header">
+        <InlineSvg path="/icons/danger-triangle.svg" alt="Warning" />
+        <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>
+          <li>✗ Wrong answer tracking data</li>
+          <li>✗ Correct answer tracking data</li>
+        </ul>
+        <p><strong>This cannot be undone!</strong></p>
+      </div>
+      <div class="confirmation-actions">
+        <button class="cancel-btn" on:click={() => showResetConfirmation = false}>Cancel</button>
+        <button class="confirm-btn" on:click={handleResetStats}>Reset Everything</button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .settings-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+  }
+
+  .settings-modal {
+    background: var(--color-bg-primary);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    padding: 0;
+    max-width: 500px;
+    width: 90%;
+    max-height: 80vh;
+    overflow-y: auto;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  }
+
+  .settings-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1.5rem;
+    border-bottom: 2px solid var(--color-border);
+    background: var(--color-bg-secondary);
+  }
+
+  .settings-header :global(.svg-wrapper) {
+    width: 24px;
+    height: 24px;
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+  .settings-header h3 {
+    margin: 0;
+    color: var(--color-text-primary);
+  }
+
+  .close-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+  }
+
+  .close-icon {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #ff5f57;
+    position: relative;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .close-icon::before {
+    content: '×';
+    color: #8b0000;
+    font-size: 12px;
+    font-weight: bold;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    line-height: 1;
+  }
+
+  .close-btn:hover .close-icon {
+    background: #ff3b30;
+  }
+
+  .close-btn:hover .close-icon::before {
+    opacity: 1;
+  }
+
+  .settings-content {
+    padding: 1.5rem;
+  }
+
+  .setting-item {
+    margin-bottom: 1rem;
+  }
+
+  .setting-item label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    color: var(--color-text-primary);
+    font-size: 0.9rem;
+  }
+
+  .setting-item input[type="checkbox"] {
+    width: 1rem;
+    height: 1rem;
+    cursor: pointer;
+  }
+
+  .setting-actions {
+    margin-top: 2rem;
+    padding-top: 1rem;
+    border-top: 2px solid var(--color-border);
+  }
+
+  .reset-stats-btn {
+    background: #e74c3c;
+    color: white;
+    border: none;
+    padding: 0.75rem 1.5rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    font-weight: 500;
+    transition: background-color 0.2s;
+    width: 100%;
+    font-size: 0.9rem;
+  }
+
+  .reset-stats-btn:hover {
+    background: #cc3333;
+  }
+
+  .confirmation-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1001;
+  }
+
+  .confirmation-modal {
+    background: var(--color-bg-primary);
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    padding: 0;
+    max-width: 450px;
+    width: 90%;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
+  }
+
+  .confirmation-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .confirmation-header :global(.svg-wrapper) {
+    width: 24px;
+    height: 24px;
+    color: #e74c3c;
+  }
+
+  .confirmation-header h3 {
+    margin: 0;
+    color: #e74c3c;
+    font-size: 1.2rem;
+  }
+
+  .confirmation-content {
+    padding: 1.5rem;
+  }
+
+  .confirmation-content p {
+    margin: 0 0 1rem 0;
+    color: var(--color-text-primary);
+    line-height: 1.4;
+  }
+
+  .confirmation-content ul {
+    margin: 1rem 0;
+    padding-left: 0;
+    list-style: none;
+  }
+
+  .confirmation-content li {
+    padding: 0.25rem 0;
+    color: var(--color-text-secondary);
+    font-size: 0.9rem;
+  }
+
+  .confirmation-actions {
+    display: flex;
+    gap: 1rem;
+    padding: 1.5rem;
+    border-top: 1px solid var(--color-border);
+  }
+
+  .cancel-btn, .confirm-btn {
+    flex: 1;
+    padding: 0.75rem 1rem;
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    font-weight: 500;
+    transition: background-color 0.2s;
+    font-size: 0.9rem;
+  }
+
+  .cancel-btn {
+    background: var(--color-bg-tertiary);
+    color: var(--color-text-primary);
+    border: 2px solid var(--color-border);
+  }
+
+  .cancel-btn:hover {
+    background: var(--color-bg-quaternary);
+  }
+
+  .confirm-btn {
+    background: #e74c3c;
+    color: white;
+  }
+
+  .confirm-btn:hover {
+    background: #cc3333;
+  }
+</style>

src/pages/FlagQuiz.svelte

@@ -4,7 +4,7 @@
   import Footer from '../components/Footer.svelte';
   import InlineSvg from '../components/InlineSvg.svelte';
   import Achievements from '../components/Achievements.svelte';
-  import AchievementButton from '../components/AchievementButton.svelte';
+  import QuizSettings from '../components/QuizSettings.svelte';
 
   // Game data
   let flags = [];
@@ -27,6 +27,12 @@
   let showCountryInfo = false;
   let showResultCountryInfo = false;
 
+  // Auto-advance timer variables
+  let autoAdvanceTimer = null;
+  let timerProgress = 0;
+  let timerDuration = 2000; // 2 seconds
+  let timerStartTime = 0;
+
   // Scoring
   let score = { correct: 0, total: 0, skipped: 0 };
   let gameStats = { correct: 0, wrong: 0, total: 0, skipped: 0 };
@@ -197,6 +203,9 @@
   showCountryInfo = false;
   showResultCountryInfo = false;
 
+    // Cancel any active auto-advance timer
+    cancelAutoAdvanceTimer();
+
     // Randomly choose question type
     questionType = Math.random() < 0.5 ? 'flag-to-country' : 'country-to-flag';
 
@@ -348,9 +357,7 @@
     // 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
-      setTimeout(() => {
+      startAutoAdvanceTimer(delay);
-        generateQuestion();
-      }, delay);
     }
   }  function skipQuestion() {
     if (gameState !== 'question') return;
@@ -377,6 +384,38 @@
     generateQuestion();
   }
 
+  function startAutoAdvanceTimer(duration) {
+    timerDuration = duration;
+    timerProgress = 0;
+    timerStartTime = Date.now();
+
+    // Clear any existing timer
+    if (autoAdvanceTimer) {
+      clearInterval(autoAdvanceTimer);
+    }
+
+    // Update progress every 50ms for smooth animation
+    autoAdvanceTimer = setInterval(() => {
+      const elapsed = Date.now() - timerStartTime;
+      timerProgress = Math.min((elapsed / duration) * 100, 100);
+
+      if (timerProgress >= 100) {
+        clearInterval(autoAdvanceTimer);
+        autoAdvanceTimer = null;
+        timerProgress = 0;
+        generateQuestion();
+      }
+    }, 50);
+  }
+
+  function cancelAutoAdvanceTimer() {
+    if (autoAdvanceTimer) {
+      clearInterval(autoAdvanceTimer);
+      autoAdvanceTimer = null;
+      timerProgress = 0;
+    }
+  }
+
   function resetGame() {
     score = { correct: 0, total: 0, skipped: 0 };
     generateQuestion();
@@ -396,23 +435,23 @@
     showSettings = !showSettings;
   }
 
-  function handleOverlayClick(event) {
+  function handleSettingsChange(event) {
-    if (event.target === event.currentTarget) {
+    const { autoAdvance: newAutoAdvance, focusWrongAnswers: newFocusWrong, reduceCorrectAnswers: newReduceCorrect, soundEnabled: newSoundEnabled } = event.detail;
-      toggleSettings();
+    autoAdvance = newAutoAdvance;
-    }
+    focusWrongAnswers = newFocusWrong;
+    reduceCorrectAnswers = newReduceCorrect;
+    soundEnabled = newSoundEnabled;
   }
 
-  function handleOverlayKeydown(event) {
+  function handleSettingsToggle(event) {
-    if (event.key === 'Escape') {
+    showSettings = event.detail;
-      toggleSettings();
-    }
   }
 
-  function resetAllStats() {
+  function handleResetConfirmation(event) {
-    showResetConfirmation = true;
+    showResetConfirmation = event.detail;
   }
 
-  function confirmReset() {
+  function handleResetStats() {
     // Reset game statistics
     gameStats = { correct: 0, wrong: 0, total: 0, skipped: 0 };
     score = { correct: 0, total: 0, skipped: 0 };
@@ -427,16 +466,12 @@
     correctAnswers = new Map();
     localStorage.removeItem('flagQuizCorrectAnswers');
 
-    // Reset achievements
+    // Reset achievements if component is available
     if (achievementsComponent) {
-      localStorage.removeItem('flagQuizAchievements');
+      achievementsComponent.resetAllAchievements();
-      // Reinitialize achievements component
-      achievementsComponent.loadAchievements();
-      updateAchievementCount();
     }
 
     showResetConfirmation = false;
-    showSettings = false;
   }
 
   function cancelReset() {
@@ -535,115 +570,21 @@
   <div class="container">
 
 
-  <!-- Settings Popup -->
+  <!-- Quiz Settings Component -->
-  {#if showSettings}
+  <QuizSettings
-    <div
+    bind:autoAdvance
-      class="settings-overlay"
+    bind:focusWrongAnswers
-      on:click={handleOverlayClick}
+    bind:reduceCorrectAnswers
-      tabindex="0"
+    bind:soundEnabled
-      role="button"
+    bind:showSettings
-      aria-label="Close settings (click background or press Escape)"
+    bind:showResetConfirmation
-      on:keydown={handleOverlayKeydown}
+    focusWrongLabel="Focus on previously answered incorrectly flags"
-    >
+    reduceCorrectLabel="Show correctly answered flags less frequently"
-      <div
+    on:settingsChange={handleSettingsChange}
-        class="settings-modal"
+    on:settingsToggle={handleSettingsToggle}
-        role="dialog"
+    on:resetConfirmation={handleResetConfirmation}
-        aria-modal="true"
+    on:resetStats={handleResetStats}
-        aria-labelledby="settings-title"
+  />
-      >
-        <div class="settings-header">
-          <InlineSvg path="/icons/settings.svg" alt="Settings" />
-          <h2 id="settings-title">Game Settings</h2>
-          <button class="close-btn" on:click={toggleSettings}>✕</button>
-        </div>
-
-        <div class="settings-content">
-          <div class="setting-item">
-            <label>
-              <input
-                type="checkbox"
-                bind:checked={autoAdvance}
-              />
-              Auto-advance to next question after answering
-            </label>
-          </div>
-
-          <div class="setting-item">
-            <label>
-              <input
-                type="checkbox"
-                bind:checked={focusWrongAnswers}
-              />
-              Focus on previously answered incorrectly flags
-            </label>
-          </div>
-
-          <div class="setting-item">
-            <label>
-              <input
-                type="checkbox"
-                bind:checked={reduceCorrectAnswers}
-              />
-              Show correctly answered flags less frequently
-            </label>
-          </div>
-
-          <div class="setting-item">
-            <label>
-              <input
-                type="checkbox"
-                bind:checked={soundEnabled}
-              />
-              Enable sound effects for answers
-            </label>
-          </div>
-
-          <div class="setting-actions">
-            <button class="reset-stats-btn" on:click={resetAllStats}>
-              Reset All Statistics
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  {/if}
-
-  <!-- Reset Confirmation Dialog -->
-  {#if showResetConfirmation}
-    <div
-      class="confirmation-overlay"
-      role="button"
-      tabindex="0"
-      aria-label="Close confirmation dialog (click background or press Escape)"
-      on:click={(e) => e.target === e.currentTarget && cancelReset()}
-      on:keydown={(e) => {
-        if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
-          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>
-            <li>✗ Wrong answer tracking data</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
@@ -764,6 +705,16 @@
         {:else if !autoAdvance && gameState === 'answered'}
           <button class="btn btn-primary btn-next-full" on:click={nextQuestion}>Next Question →</button>
         {/if}
+
+        <!-- Auto-advance timer display -->
+        {#if autoAdvance && gameState === 'answered' && timerProgress > 0}
+          <div class="auto-advance-timer">
+            <div class="timer-bar">
+              <div class="timer-progress" style="width: {timerProgress}%"></div>
+            </div>
+            <span class="timer-text">Next question in {Math.ceil((timerDuration - (timerProgress / 100 * timerDuration)) / 1000)}s</span>
+          </div>
+        {/if}
       </div>
     {/if}
 
@@ -1353,6 +1304,35 @@
     background: var(--color-text-primary);
   }
 
+  /* Auto-advance timer styles */
+  .auto-advance-timer {
+    margin-top: 1rem;
+    text-align: center;
+  }
+
+  .timer-bar {
+    width: 100%;
+    height: 6px;
+    background: var(--color-bg-tertiary);
+    border-radius: 3px;
+    overflow: hidden;
+    margin-bottom: 0.5rem;
+    border: 1px solid var(--color-border);
+  }
+
+  .timer-progress {
+    height: 100%;
+    background: var(--color-primary);
+    transition: width 0.05s linear;
+    border-radius: 2px;
+  }
+
+  .timer-text {
+    font-size: 0.8rem;
+    color: var(--color-text-secondary);
+    font-weight: 500;
+  }
+
   @media (max-width: 768px) {
     .container {
       padding: 0.75rem;