Added Highscores and Fixed layouts

Author: Fruehwirth

index.html

@@ -51,14 +51,25 @@
       if ('serviceWorker' in navigator) {
         window.addEventListener('load', async () => {
           try {
-            // Unregister any existing service workers first
-            const registrations = await navigator.serviceWorker.getRegistrations();
-            for (let registration of registrations) {
-              await registration.unregister();
-            }
-            
             const registration = await navigator.serviceWorker.register('/sw.js');
-            console.log('ServiceWorker registration successful');
+            
+            // Add message listener for updates
+            navigator.serviceWorker.addEventListener('message', (event) => {
+              if (event.data && event.data.type === 'APP_UPDATED' && event.data.forceReload) {
+                // Clear cache and reload
+                caches.keys().then((keyList) => {
+                  return Promise.all(keyList.map((key) => caches.delete(key)));
+                }).then(() => {
+                  window.location.reload(true);
+                });
+              }
+            });
+
+            // Check for updates every 30 minutes
+            setInterval(() => {
+              registration.update();
+            }, 1800000);
+
           } catch (err) {
             console.log('ServiceWorker registration failed: ', err);
           }

public/assets/translations/ui/de.json

@@ -14,6 +14,7 @@
   "accuracy": "Genauigkeit",
   "restart": "Neu starten",
   "roundComplete": "Runde beendet!",
+  "newHighscore": "Neuer Highscore!",
   "finalScore": "Endpunktzahl",
   "startNewRound": "Runde starten",
   "replayIncorrect": "Falsche wiederholen",

public/assets/translations/ui/en.json

@@ -14,6 +14,7 @@
   "accuracy": "Accuracy",
   "restart": "Restart",
   "roundComplete": "Round Complete!",
+  "newHighscore": "New Highscore!",
   "finalScore": "Final Score",
   "startNewRound": "New Round",
   "replayIncorrect": "Replay incorrect",

public/assets/translations/ui/es.json

@@ -14,6 +14,7 @@
     "accuracy": "Precisión",
     "restart": "Reiniciar",
     "roundComplete": "¡Ronda completa!",
+    "newHighscore": "¡Nuevo récord!",
     "finalScore": "Puntuación final",
     "startNewRound": "Nueva ronda",
     "replayIncorrect": "Repetir incorrectas",

public/assets/translations/ui/ru.json

@@ -14,6 +14,7 @@
     "accuracy": "Точность",
     "restart": "Начать заново",
     "roundComplete": "Раунд завершен!",
+    "newHighscore": "Новый рекорд!",
     "finalScore": "Итоговый счет",
     "startNewRound": "Новый раунд",
     "replayIncorrect": "Повторить неверные",

public/sw.js

@@ -1,4 +1,4 @@
-const VERSION = '1.1.5';
+const VERSION = '1.2.5';
 const CACHE_NAME = `flag-trainer-v${VERSION}`;
 const BASE_PATH = '/';
 
@@ -113,7 +113,8 @@ self.addEventListener('activate', (event) => {
           clients.forEach(client => {
             client.postMessage({
               type: 'APP_UPDATED',
-              version: VERSION
+              version: VERSION,
+              forceReload: true
             });
           });
         });

src/components/Game/GameOver.css

@@ -1,6 +1,6 @@
 .game-over {
   position: fixed;
-  top: 50%;
+  top: calc(50% + 38px);
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: var(--color-surface);
@@ -9,7 +9,7 @@
   border-radius: 12px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   text-align: center;
-  max-height: 90vh;
+  max-height: calc(90vh - 76px);
   width: 300px;
   max-width: 500px;
   animation: fadeIn 0.3s ease-out;
@@ -85,7 +85,7 @@
 }
 
 .game-over h2 {
-  margin-bottom: 2rem;
+  margin: 0 0 1rem 0;
   color: var(--color-text);
   font-size: 2rem;
   font-weight: 600;
@@ -94,9 +94,8 @@
 .stats {
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
-  margin-bottom: 3rem;
-  padding-right: 5px;
+  gap: 1rem;
+  margin-bottom: 1rem;
 }
 
 .stat-item {
@@ -118,6 +117,16 @@
   font-weight: 600;
 }
 
+.stat-item .with-icon {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.stat-item .material-symbols-outlined {
+  font-size: 1.2rem;
+}
+
 @keyframes fadeIn {
   from {
     opacity: 0;

src/components/Game/GameOver.tsx

@@ -9,13 +9,15 @@ export const GameOver: React.FC<{
 }> = observer(({ onRestart }) => {
   const { gameStore, settingsStore } = useStores();
   const roundCompleteText = useTranslation('roundComplete', settingsStore.language, true);
+  const newHighscoreText = useTranslation('newHighscore', settingsStore.language, true);
   const finalScoreText = useTranslation('finalScore', settingsStore.language, true);
   const correctAnswersText = useTranslation('correctAnswers', settingsStore.language, true);
   const timeText = useTranslation('time', settingsStore.language, true);
   const startNewRoundText = useTranslation('startNewRound', settingsStore.language, true);
   const replayIncorrectText = useTranslation('replayIncorrect', settingsStore.language, true);
   const difficultyText = useTranslation('difficulty', settingsStore.language, true);
   const difficultyLevelText = useTranslation(settingsStore.difficulty, settingsStore.language, true);
+  const gameModeText = useTranslation('gameMode', settingsStore.language, true);
 
   const handleReplayIncorrect = () => {
     gameStore.replayIncorrect();
@@ -25,7 +27,7 @@ export const GameOver: React.FC<{
 
   return (
     <div className="game-over">
-      <h2>{roundCompleteText}</h2>
+      <h2>{gameStore.isNewHighscore ? newHighscoreText : roundCompleteText}</h2>
       <div className="stats">
         <div className="stat-item">
           <label>{finalScoreText}:</label>
@@ -43,6 +45,16 @@ export const GameOver: React.FC<{
           <label>{difficultyText}:</label>
           <span>{difficultyLevelText}</span>
         </div>
+        <div className="stat-item">
+          <label>{gameModeText}:</label>
+          <span className="with-icon">
+            <span className="material-symbols-outlined">
+              {settingsStore.gameMode === 'quiz' ? 'quiz' : 
+               settingsStore.gameMode === 'type' ? 'keyboard' : 'flag'}
+            </span>
+            {useTranslation(settingsStore.gameMode, settingsStore.language, true)}
+          </span>
+        </div>
       </div>
       <div className={`game-over-buttons ${!hasIncorrectFlags ? 'single-button' : ''}`}>
         <button className="restart-button" onClick={onRestart}>

src/components/Header/Header.tsx

@@ -71,7 +71,7 @@ export const Header: React.FC<HeaderProps> = observer(({ onSettingsClick, showCo
         settings
       </button>
 
-      <h1>Test Update</h1>
+      <h1>Flag Trainer</h1>
 
       {isVisible && shouldShowScore && (
         <div className={`score-container ${!showControls ? 'hidden' : ''}`}>

src/services/StorageService.ts

@@ -36,6 +36,7 @@ interface SettingsState {
 export class StorageService {
   private static GAME_STATE_KEY = 'flagTrainer_gameState';
   private static SETTINGS_STATE_KEY = 'flagTrainer_settingsState';
+  private static HIGHSCORES_KEY = 'flagTrainer_highscores';
 
   static saveGameState(state: GameState): void {
     localStorage.setItem(this.GAME_STATE_KEY, JSON.stringify(state));
@@ -63,4 +64,27 @@ export class StorageService {
   static clearGameState(): void {
     localStorage.removeItem(this.GAME_STATE_KEY);
   }
+
+  static getHighscore(regions: Region[], gameMode: GameMode, difficulty: Difficulty): number | null {
+    const highscores = this.getHighscores();
+    const key = this.createHighscoreKey(regions, gameMode, difficulty);
+    return highscores[key] || null;
+  }
+
+  static setHighscore(regions: Region[], gameMode: GameMode, difficulty: Difficulty, score: number): void {
+    const highscores = this.getHighscores();
+    const key = this.createHighscoreKey(regions, gameMode, difficulty);
+    highscores[key] = score;
+    localStorage.setItem(this.HIGHSCORES_KEY, JSON.stringify(highscores));
+  }
+
+  private static getHighscores(): Record<string, number> {
+    const stored = localStorage.getItem(this.HIGHSCORES_KEY);
+    return stored ? JSON.parse(stored) : {};
+  }
+
+  private static createHighscoreKey(regions: Region[], gameMode: GameMode, difficulty: Difficulty): string {
+    const sortedRegions = [...regions].sort().join(',');
+    return `${sortedRegions}|${gameMode}|${difficulty}`;
+  }
 }