Refactor Footer and Header components for improved layout; enhance FlagQuiz with question re-rendering and state management

src/components/Footer.svelte

@@ -4,32 +4,32 @@
 
 <footer>
   <div class="footer-flex">
-    <span class="footer-left">shadoll Logo Gallery</span>
     <span class="footer-center">All logos are property of their respective owners.</span>
-    <a
+    <div class="footer-bottom">
-      href="https://github.com/shadoll/sLogos"
+      <span class="footer-left">shadoll Logo Gallery and Quiz game</span>
-      target="_blank"
+      <a
-      rel="noopener noreferrer"
+        href="https://github.com/shadoll/sLogos"
-      class="footer-github"
+        target="_blank"
-    >
+        rel="noopener noreferrer"
-      <svg
+        class="footer-github"
-        width="22"
+      >
-        height="22"
+        <svg
-        viewBox="0 0 24 24"
+          width="22"
-        fill="#ccc"
+          height="22"
-        style="margin-right:0.3em;"
+          viewBox="0 0 24 24"
-      ><path
+          fill="#ccc"
-          d="M12 0.297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387 0.6 0.113 0.82-0.258 0.82-0.577 0-0.285-0.011-1.04-0.017-2.04-3.338 0.726-4.042-1.61-4.042-1.61-0.546-1.387-1.333-1.756-1.333-1.756-1.089-0.745 0.084-0.729 0.084-0.729 1.205 0.084 1.84 1.236 1.84 1.236 1.07 1.834 2.809 1.304 3.495 0.997 0.108-0.775 0.418-1.305 0.762-1.605-2.665-0.305-5.466-1.334-5.466-5.931 0-1.311 0.469-2.381 1.236-3.221-0.124-0.303-0.535-1.523 0.117-3.176 0 0 1.008-0.322 3.301 1.23 0.957-0.266 1.983-0.399 3.003-0.404 1.02 0.005 2.047 0.138 3.006 0.404 2.291-1.553 3.297-1.23 3.297-1.23 0.653 1.653 0.242 2.873 0.119 3.176 0.77 0.84 1.235 1.91 1.235 3.221 0 4.609-2.803 5.624-5.475 5.921 0.43 0.372 0.823 1.102 0.823 2.222 0 1.606-0.015 2.898-0.015 3.293 0 0.322 0.216 0.694 0.825 0.576 4.765-1.589 8.199-6.085 8.199-11.386 0-6.627-5.373-12-12-12z"
+          style="margin-right:0.3em;"
-      /></svg>
+        ><path
-    </a>
+            d="M12 0.297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387 0.6 0.113 0.82-0.258 0.82-0.577 0-0.285-0.011-1.04-0.017-2.04-3.338 0.726-4.042-1.61-4.042-1.61-0.546-1.387-1.333-1.756-1.333-1.756-1.089-0.745 0.084-0.729 0.084-0.729 1.205 0.084 1.84 1.236 1.84 1.236 1.07 1.834 2.809 1.304 3.495 0.997 0.108-0.775 0.418-1.305 0.762-1.605-2.665-0.305-5.466-1.334-5.466-5.931 0-1.311 0.469-2.381 1.236-3.221-0.124-0.303-0.535-1.523 0.117-3.176 0 0 1.008-0.322 3.301 1.23 0.957-0.266 1.983-0.399 3.003-0.404 1.02 0.005 2.047 0.138 3.006 0.404 2.291-1.553 3.297-1.23 3.297-1.23 0.653 1.653 0.242 2.873 0.119 3.176 0.77 0.84 1.235 1.91 1.235 3.221 0 4.609-2.803 5.624-5.475 5.921 0.43 0.372 0.823 1.102 0.823 2.222 0 1.606-0.015 2.898-0.015 3.293 0 0.322 0.216 0.694 0.825 0.576 4.765-1.589 8.199-6.085 8.199-11.386 0-6.627-5.373-12-12-12z"
+        /></svg>
+      </a>
+    </div>
   </div>
-</footer>
+</footer><style>
-
-<style>
   footer {
     padding: 1.5rem;
     background: var(--color-background);
-    color: var(--color-text-muted);
+    color: var(--color-text-secondary);
     border-top: 1px solid var(--color-border);
     font-size: 0.9rem;
     margin-top: auto;
@@ -43,19 +43,24 @@
     gap: 1em;
   }
 
-  .footer-left {
-    flex: 1;
-    text-align: left;
-  }
-
   .footer-center {
     flex: 2;
+    text-align: center;
+  }
+
+  .footer-bottom {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex: 1;
+    gap: 1em;
+  }
+
+  .footer-left {
     text-align: left;
   }
 
   .footer-github {
-    flex: 0;
-    margin-left: 1em;
     display: inline-flex;
     align-items: center;
   }
@@ -63,16 +68,27 @@
   @media (max-width: 700px) {
     .footer-flex {
       flex-direction: column;
-      align-items: flex-start;
+      align-items: center;
-      gap: 0.3em;
+      gap: 0.5em;
     }
-    .footer-left, .footer-center {
+
-      text-align: left;
+    .footer-center {
+      text-align: center;
       width: 100%;
+      margin-bottom: 0.3em;
     }
+
+    .footer-bottom {
+      width: 100%;
+      justify-content: space-between;
+    }
+
+    .footer-left {
+      text-align: left;
+    }
+
     .footer-github {
-      margin-left: 0;
+      margin-left: auto;
-      margin-top: 0.5em;
     }
   }
 </style>

src/components/Header.svelte

@@ -399,10 +399,6 @@
     color: #6b7280; /* gray */
   }
 
-  .achievement-block {
-    margin-left: auto;
-  }
-
   @media (max-width: 700px) {
     .header-row {
       grid-template-columns: 1fr auto auto;

src/pages/FlagQuiz.svelte

@@ -33,6 +33,9 @@
   let timerDuration = 2000; // 2 seconds
   let timerStartTime = 0;
 
+  // Force component re-render key to prevent button state persistence
+  let questionKey = 0;
+
   // Scoring
   let score = { correct: 0, total: 0, skipped: 0 };
   let gameStats = { correct: 0, wrong: 0, total: 0, skipped: 0 };
@@ -206,6 +209,26 @@
     // Cancel any active auto-advance timer
     cancelAutoAdvanceTimer();
 
+    // Increment question key to force complete re-render and clear button states
+    questionKey++;
+
+    // Remove focus from any previously focused buttons and ensure clean state
+    if (typeof document !== 'undefined') {
+      // Use setTimeout to ensure DOM updates are complete
+      setTimeout(() => {
+        const activeElement = document.activeElement;
+        if (activeElement && activeElement.tagName === 'BUTTON') {
+          activeElement.blur();
+        }
+        // Force removal of any residual button states
+        const buttons = document.querySelectorAll('.option, .flag-option');
+        buttons.forEach(button => {
+          button.blur();
+          button.classList.remove('selected', 'correct', 'wrong');
+        });
+      }, 0);
+    }
+
     // Randomly choose question type
     questionType = Math.random() < 0.5 ? 'flag-to-country' : 'country-to-flag';
 
@@ -647,7 +670,7 @@
             <img src={getFlagImage(currentQuestion.correct)} alt="Flag" class="quiz-flag" />
           </div>
 
-          <div class="options">
+          <div class="options" key={questionKey}>
             {#each currentQuestion.options as option, index}
               <button
                 class="option"
@@ -684,7 +707,7 @@
             </h2>
           </div>
 
-          <div class="flag-options">
+          <div class="flag-options" key={questionKey}>
             {#each currentQuestion.options as option, index}
               <button
                 class="flag-option"
@@ -1078,6 +1101,12 @@
     background: var(--color-bg-hover);
   }
 
+  /* Prevent residual hover states on new questions */
+  .option:not(:hover):not(.selected):not(.correct):not(.wrong) {
+    border-color: var(--color-border);
+    background: var(--color-bg-primary);
+  }
+
   .option.selected {
     border-color: var(--color-primary);
     background: var(--color-primary-light);
@@ -1119,6 +1148,12 @@
     background: var(--color-bg-hover);
   }
 
+  /* Prevent residual hover states on new questions for flag options */
+  .flag-option:not(:hover):not(.selected):not(.correct):not(.wrong) {
+    border-color: var(--color-border);
+    background: var(--color-bg-primary);
+  }
+
   .flag-option.selected {
     border-color: var(--color-primary);
     background: var(--color-primary-light);