fix flic handler functions

Dockerfile

@@ -0,0 +1,11 @@
+# Use the official Nginx image as the base image
+FROM nginx:alpine
+
+# Remove the default Nginx static files
+RUN rm -rf /usr/share/nginx/html/*
+
+# Copy all your app's files into the Nginx directory
+COPY . /usr/share/nginx/html
+
+# Expose port 80
+EXPOSE 80

README.md

@@ -1,3 +1,68 @@
-# game-timer
+# Game Timer
 
-Multi-player chess timer with carousel navigation
+Multi-player chess timer with carousel navigation
+
+# PWA Containerized Deployment
+
+This document provides step-by-step instructions to pull the source code and deploy the Progressive Web App (PWA) using Docker on a production server.
+
+## Prerequisites
+
+- **Git:** Installed on your production server.
+- **Docker:** Installed and running on your production server.
+- **Basic Knowledge:** Familiarity with the command line.
+
+## Steps
+
+### 1. Clone the Repository
+
+Log in to your production server and navigate to the directory where you want to store the project. Then run:
+
+```bash
+git clone https://gitea.virtonline.eu/2HoursProject/game-timer.git
+cd game-timer
+```
+
+### 2. Build the docker image
+
+From the repository root, run the following command to build your Docker image:
+
+```bash
+docker build -t 'game-timer:latest' .
+```
+
+### 3. Run the Docker Container
+
+Once the image is built, run the container on port 8080 with:
+
+```bash
+docker run -d -p 8080:80 --name game-timer-container game-timer:latest
+```
+
+### 4. Verify the Deployment
+
+Check if it's running:
+
+```bash
+docker ps
+```
+
+View logs (if needed):
+
+```bash
+docker logs game-timer-container
+```
+
+After running the container, open your web browser and navigate to:
+
+```bash
+http://localhost
+```
+
+### 5. Terminate
+
+To stop your running game-timer-container, use:
+
+```bash
+docker stop game-timer-container
+```

app.js

@@ -0,0 +1,446 @@
+// app.js - Main Application Orchestrator
+import * as config from './config.js';
+import * as state from './state.js';
+import * as ui from './ui.js';
+import * as timer from './timer.js';
+import camera from './camera.js'; // Default export
+import audioManager from './audio.js';
+import * as pushFlic from './pushFlicIntegration.js';
+
+// --- Core Game Actions ---
+
+function startGame() {
+    if (state.getPlayers().length < 2) {
+        alert('You need at least 2 players to start.');
+        return;
+    }
+    if (state.getGameState() === config.GAME_STATES.SETUP || state.getGameState() === config.GAME_STATES.PAUSED) {
+        state.setGameState(config.GAME_STATES.RUNNING);
+        audioManager.play('gameStart');
+        timer.startTimer();
+        ui.updateGameButton();
+        ui.renderPlayers(); // Ensure active timer styling is applied
+    }
+}
+
+function pauseGame() {
+    if (state.getGameState() === config.GAME_STATES.RUNNING) {
+        state.setGameState(config.GAME_STATES.PAUSED);
+        audioManager.play('gamePause');
+        timer.stopTimer();
+        ui.updateGameButton();
+        ui.renderPlayers(); // Ensure active timer styling is removed
+    }
+}
+
+function resumeGame() {
+     if (state.getGameState() === config.GAME_STATES.PAUSED) {
+        // Check if there's actually a player with time left
+         if (state.findNextPlayerWithTime() === -1) {
+             console.log("Cannot resume, no players have time left.");
+             // Optionally set state to OVER here
+             handleGameOver();
+             return;
+         }
+        state.setGameState(config.GAME_STATES.RUNNING);
+        audioManager.play('gameResume');
+        timer.startTimer();
+        ui.updateGameButton();
+        ui.renderPlayers(); // Ensure active timer styling is applied
+    }
+}
+
+function togglePauseResume() {
+    const currentGameState = state.getGameState();
+    if (currentGameState === config.GAME_STATES.RUNNING) {
+        pauseGame();
+    } else if (currentGameState === config.GAME_STATES.PAUSED) {
+        resumeGame();
+    } else if (currentGameState === config.GAME_STATES.SETUP) {
+        startGame();
+    } else if (currentGameState === config.GAME_STATES.OVER) {
+        resetGame(); // Or just go back to setup? Let's reset.
+        startGame();
+    }
+}
+
+function switchToPlayer(index) {
+     if (index >= 0 && index < state.getPlayers().length) {
+         const previousIndex = state.getCurrentPlayerIndex();
+         if(index !== previousIndex) {
+             state.setCurrentPlayerIndex(index);
+             audioManager.play('playerSwitch');
+             ui.renderPlayers(); // Update UI immediately
+
+             // If the game is running, restart the timer for the new player
+             // The timer interval callback will handle the decrementing
+             if (state.getGameState() === config.GAME_STATES.RUNNING) {
+                 timer.startTimer(); // This clears the old interval and starts anew
+             }
+         }
+     }
+}
+
+function nextPlayer() {
+    const currentGameState = state.getGameState();
+    let newIndex = -1;
+
+    if (currentGameState === config.GAME_STATES.RUNNING) {
+        newIndex = state.findNextPlayerWithTimeCircular(1); // Find next with time
+    } else {
+        // Allow cycling through all players if not running
+        const playerCount = state.getPlayers().length;
+        if(playerCount > 0) {
+            newIndex = (state.getCurrentPlayerIndex() + 1) % playerCount;
+        }
+    }
+
+    if (newIndex !== -1) {
+         switchToPlayer(newIndex);
+    } else if (currentGameState === config.GAME_STATES.RUNNING) {
+        console.log("NextPlayer: No other player has time remaining.");
+        // Optionally handle game over immediately? Timer logic should catch this too.
+    }
+}
+
+function previousPlayer() {
+    const currentGameState = state.getGameState();
+     let newIndex = -1;
+
+    if (currentGameState === config.GAME_STATES.RUNNING) {
+        newIndex = state.findNextPlayerWithTimeCircular(-1); // Find previous with time
+    } else {
+         // Allow cycling through all players if not running
+         const playerCount = state.getPlayers().length;
+         if (playerCount > 0) {
+             newIndex = (state.getCurrentPlayerIndex() - 1 + playerCount) % playerCount;
+         }
+    }
+
+     if (newIndex !== -1) {
+         switchToPlayer(newIndex);
+     } else if (currentGameState === config.GAME_STATES.RUNNING) {
+        console.log("PreviousPlayer: No other player has time remaining.");
+     }
+}
+
+
+function handleGameOver() {
+    state.setGameState(config.GAME_STATES.OVER);
+    audioManager.play('gameOver');
+    timer.stopTimer(); // Ensure timer is stopped
+    ui.updateGameButton();
+    ui.renderPlayers(); // Update to show final state
+}
+
+function resetGame() {
+    timer.stopTimer(); // Stop timer if running/paused
+    state.resetPlayersTime();
+    state.setGameState(config.GAME_STATES.SETUP);
+    state.setCurrentPlayerIndex(0); // Go back to first player
+    audioManager.play('buttonClick'); // Or a specific reset sound?
+    ui.updateGameButton();
+    ui.renderPlayers();
+}
+
+function fullResetApp() {
+    timer.stopTimer();
+    state.resetToDefaults();
+    audioManager.play('gameOver'); // Use game over sound for full reset
+    ui.hideResetModal();
+    ui.updateGameButton();
+    ui.renderPlayers();
+}
+
+// --- Event Handlers ---
+
+function handleGameButtonClick() {
+    audioManager.play('buttonClick');
+    togglePauseResume();
+}
+
+function handleSetupButtonClick() {
+     audioManager.play('buttonClick');
+     if (state.getGameState() === config.GAME_STATES.RUNNING) {
+         alert('Please pause the game before editing players.');
+         return;
+     }
+     const currentPlayer = state.getCurrentPlayer();
+     if (!currentPlayer) {
+         console.warn("Edit clicked but no current player?");
+         return; // Or show Add Player modal?
+     }
+     camera.stopStream(); // Ensure camera is off before opening modal
+     ui.showPlayerModal(false, currentPlayer);
+}
+
+function handleAddPlayerButtonClick() {
+    audioManager.play('buttonClick');
+     if (state.getGameState() === config.GAME_STATES.RUNNING) {
+         alert('Please pause the game before adding players.');
+         return;
+     }
+     camera.stopStream(); // Ensure camera is off before opening modal
+     ui.showPlayerModal(true);
+}
+
+function handleResetButtonClick() {
+     audioManager.play('buttonClick');
+     if (state.getGameState() === config.GAME_STATES.RUNNING) {
+         alert('Please pause the game before resetting.');
+         return;
+     }
+     ui.showResetModal();
+}
+
+function handlePlayerFormSubmit(event) {
+    event.preventDefault();
+    audioManager.play('buttonClick');
+
+    const name = ui.elements.playerNameInput.value.trim();
+    const timeInMinutes = parseInt(ui.elements.playerTimeInput.value, 10);
+    let remainingTimeSeconds = 0; // Default
+    const isNewPlayer = ui.elements.modalTitle.textContent === 'Add New Player';
+    const currentGameState = state.getGameState();
+
+    if (!name || isNaN(timeInMinutes) || timeInMinutes <= 0) {
+        alert('Please enter a valid name and positive time.');
+        return;
+    }
+
+    // Get remaining time ONLY if editing and game is paused/over
+    if (!isNewPlayer && (currentGameState === config.GAME_STATES.PAUSED || currentGameState === config.GAME_STATES.OVER)) {
+        const remainingTimeString = ui.elements.playerRemainingTimeInput.value;
+        const parsedSeconds = ui.parseTimeString(remainingTimeString);
+        if (parsedSeconds === null) { // Check if parsing failed
+            alert('Please enter remaining time in MM:SS format (e.g., 05:30).');
+            return;
+        }
+         remainingTimeSeconds = parsedSeconds;
+         // Validate remaining time against total time? Optional.
+         if (remainingTimeSeconds > timeInMinutes * 60) {
+             alert('Remaining time cannot be greater than the total time.');
+             return;
+         }
+    } else {
+        // For new players or when editing in setup, remaining time matches total time
+        remainingTimeSeconds = timeInMinutes * 60;
+    }
+
+    let imageDataUrl = ui.elements.playerImageInput.dataset.capturedImage || null;
+    const imageFile = ui.elements.playerImageInput.files[0];
+
+    const saveAction = (finalImageData) => {
+        if (isNewPlayer) {
+            state.addPlayer(name, timeInMinutes, finalImageData);
+            audioManager.play('playerAdded');
+        } else {
+            const playerIndex = state.getCurrentPlayerIndex();
+            // Use 'undefined' for image if no new image is provided, so state.updatePlayer keeps the old one
+            const imageArg = finalImageData !== null ? finalImageData : (imageFile || ui.elements.playerImageInput.dataset.capturedImage ? finalImageData : undefined);
+            state.updatePlayer(playerIndex, name, timeInMinutes, remainingTimeSeconds, imageArg);
+            audioManager.play('playerEdited');
+        }
+        ui.hidePlayerModal();
+        ui.renderPlayers();
+        ui.updateGameButton(); // Update in case player count changed for setup state
+        camera.stopStream(); // Ensure camera is stopped
+    };
+
+    if (!imageDataUrl && imageFile) {
+        // Handle file upload: Read file as Data URL
+        const reader = new FileReader();
+        reader.onload = (e) => saveAction(e.target.result);
+        reader.onerror = (e) => {
+            console.error("Error reading image file:", e);
+            alert("Error processing image file.");
+        };
+        reader.readAsDataURL(imageFile);
+    } else {
+        // Handle captured image or no image change
+         const currentImage = isNewPlayer ? null : state.getCurrentPlayer()?.image;
+         // If imageDataUrl has content (from camera), use it.
+         // If not, and no file was selected, keep the current image (by passing undefined to updatePlayer later).
+         // If it's a new player and no image, pass null.
+        saveAction(imageDataUrl ?? (isNewPlayer ? null : currentImage));
+    }
+}
+
+function handlePlayerModalCancel() {
+    audioManager.play('buttonClick');
+    ui.hidePlayerModal();
+    camera.stopStream(); // Make sure camera turns off
+}
+
+function handleDeletePlayer() {
+    audioManager.play('buttonClick');
+    const success = state.deletePlayer(state.getCurrentPlayerIndex());
+    if (success) {
+        audioManager.play('playerDeleted');
+        ui.hidePlayerModal();
+        ui.renderPlayers();
+        ui.updateGameButton(); // Update in case player count dropped below 2
+    } else {
+        alert('Cannot delete player. Minimum of 2 players required.');
+    }
+    camera.stopStream();
+}
+
+function handleResetConfirm() {
+    audioManager.play('buttonClick');
+    fullResetApp();
+}
+
+function handleResetCancel() {
+    audioManager.play('buttonClick');
+    ui.hideResetModal();
+}
+
+function handleCameraButtonClick(event) {
+     event.preventDefault(); // Prevent form submission if inside form
+     audioManager.play('buttonClick');
+     camera.open(); // Open the camera interface
+}
+
+// --- Timer Callbacks ---
+
+function handleTimerTick() {
+    // Timer module already updated the state, just need to redraw UI
+    ui.renderPlayers();
+}
+
+function handlePlayerSwitchOnTimer(newPlayerIndex) {
+    // Timer detected current player ran out, found next player
+    console.log(`Timer switching to player index: ${newPlayerIndex}`);
+    switchToPlayer(newPlayerIndex);
+    // Sound is handled in switchToPlayer
+}
+
+// --- Camera Callback ---
+function handleCameraCapture(imageDataUrl) {
+     console.log("Image captured");
+     ui.updateImagePreviewFromDataUrl(imageDataUrl);
+     // Camera module already closed the camera UI
+}
+
+// --- Service Worker and PWA Setup ---
+
+function setupServiceWorker() {
+    if ('serviceWorker' in navigator) {
+        window.addEventListener('load', () => {
+            navigator.serviceWorker.register('/sw.js')
+                .then(registration => {
+                    console.log('ServiceWorker registered successfully.');
+
+                    // Listen for messages FROM the Service Worker (e.g., Flic actions)
+                    navigator.serviceWorker.addEventListener('message', handleServiceWorkerMessage);
+
+                     // Initialize Flic integration (which will try to subscribe)
+                    initFlic();
+                })
+                .catch(error => {
+                    console.error('ServiceWorker registration failed:', error);
+                });
+        });
+         // Listen for SW controller changes
+        navigator.serviceWorker.addEventListener('controllerchange', () => {
+            console.log('Service Worker controller changed, potentially updated.');
+            // window.location.reload(); // Consider prompting user to reload
+        });
+
+    } else {
+        console.warn('ServiceWorker not supported.');
+    }
+}
+
+function handleServiceWorkerMessage(event) {
+    console.log('[App] Message received from Service Worker:', event.data);
+    if (event.data?.type === 'flic-action') {
+        const { action, button, timestamp } = event.data;
+        pushFlic.handleFlicAction(action, button, timestamp);
+    }
+}
+
+// --- Flic Integration Setup ---
+function initFlic() {
+     // Define what happens for each Flic button action
+    const flicActionHandlers = {
+        [config.FLIC_ACTIONS.SINGLE_CLICK]: nextPlayer,
+        [config.FLIC_ACTIONS.DOUBLE_CLICK]: previousPlayer, // Map double-click to previous player
+        [config.FLIC_ACTIONS.HOLD]: togglePauseResume,
+    };
+    pushFlic.initPushFlic(flicActionHandlers);
+}
+
+
+// --- Initialization ---
+
+function initialize() {
+    console.log("Initializing Game Timer App...");
+
+    // 1. Load saved state or defaults
+    state.loadData();
+
+    // 2. Initialize UI (pass carousel swipe handler)
+    ui.initUI({
+        onCarouselSwipe: (direction) => {
+            if (direction > 0) nextPlayer(); else previousPlayer();
+        }
+    });
+
+    // 3. Initialize Timer (pass callbacks for UI updates/state changes)
+    timer.initTimer({
+        onTimerTick: handleTimerTick,
+        onPlayerSwitch: handlePlayerSwitchOnTimer,
+        onGameOver: handleGameOver
+    });
+
+    // 4. Initialize Camera (pass elements and capture callback)
+    camera.init(
+        { // Pass relevant DOM elements
+            cameraContainer: ui.elements.cameraContainer,
+            cameraView: ui.elements.cameraView,
+            cameraCanvas: ui.elements.cameraCanvas,
+            cameraCaptureButton: ui.elements.cameraCaptureButton,
+            cameraCancelButton: ui.elements.cameraCancelButton
+        },
+        { // Pass options/callbacks
+            onCapture: handleCameraCapture
+        }
+    );
+
+    // 5. Set up UI Event Listeners that trigger actions
+    ui.elements.gameButton.addEventListener('click', handleGameButtonClick);
+    ui.elements.setupButton.addEventListener('click', handleSetupButtonClick);
+    ui.elements.addPlayerButton.addEventListener('click', handleAddPlayerButtonClick);
+    ui.elements.resetButton.addEventListener('click', handleResetButtonClick);
+    ui.elements.playerForm.addEventListener('submit', handlePlayerFormSubmit);
+    ui.elements.cancelButton.addEventListener('click', handlePlayerModalCancel);
+    ui.elements.deletePlayerButton.addEventListener('click', handleDeletePlayer);
+    ui.elements.resetConfirmButton.addEventListener('click', handleResetConfirm);
+    ui.elements.resetCancelButton.addEventListener('click', handleResetCancel);
+    ui.elements.cameraButton.addEventListener('click', handleCameraButtonClick);
+
+    // 6. Setup Service Worker (which also initializes Flic)
+    setupServiceWorker();
+
+     // 7. Initial UI Update based on loaded state
+    ui.renderPlayers();
+    ui.updateGameButton();
+
+    // 8. Resume timer if state loaded as 'running' (e.g., after refresh)
+    // Note: This might be undesirable. Usually, a refresh should pause.
+    // Consider forcing state to 'paused' or 'setup' on load?
+    // For now, let's reset running state to paused on load.
+    if (state.getGameState() === config.GAME_STATES.RUNNING) {
+        console.log("Game was running on load, setting to paused.");
+        state.setGameState(config.GAME_STATES.PAUSED);
+        ui.updateGameButton();
+        ui.renderPlayers();
+    }
+
+    console.log("App Initialized.");
+}
+
+// --- Start the application ---
+initialize();

audio.js

@@ -0,0 +1,315 @@
+// Audio Manager using Web Audio API
+const audioManager = {
+    audioContext: null,
+    muted: false,
+    sounds: {},
+    lowTimeThreshold: 10, // Seconds threshold for low time warning
+    lastTickTime: 0, // Track when we started continuous ticking
+    tickFadeoutTime: 3, // Seconds after which tick sound fades out
+    
+    // Initialize the audio context
+    init() {
+        try {
+            // Create AudioContext (with fallback for older browsers)
+            this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            
+            // Check for saved mute preference
+            const savedMute = localStorage.getItem('gameTimerMuted');
+            this.muted = savedMute === 'true';
+            
+            // Create all the sounds
+            this.createSounds();
+            
+            console.log('Web Audio API initialized successfully');
+            return true;
+        } catch (error) {
+            console.error('Web Audio API initialization failed:', error);
+            return false;
+        }
+    },
+    
+    // Create all the sound generators
+    createSounds() {
+        // Game sounds
+        this.sounds.tick = this.createTickSound();
+        this.sounds.lowTime = this.createLowTimeSound();
+        this.sounds.timeUp = this.createTimeUpSound();
+        this.sounds.gameStart = this.createGameStartSound();
+        this.sounds.gamePause = this.createGamePauseSound();
+        this.sounds.gameResume = this.createGameResumeSound();
+        this.sounds.gameOver = this.createGameOverSound();
+        this.sounds.playerSwitch = this.createPlayerSwitchSound();
+        
+        // UI sounds
+        this.sounds.buttonClick = this.createButtonClickSound();
+        this.sounds.modalOpen = this.createModalOpenSound();
+        this.sounds.modalClose = this.createModalCloseSound();
+        this.sounds.playerAdded = this.createPlayerAddedSound();
+        this.sounds.playerEdited = this.createPlayerEditedSound();
+        this.sounds.playerDeleted = this.createPlayerDeletedSound();
+    },
+    
+    // Helper function to create an oscillator
+    createOscillator(type, frequency, startTime, duration, gain = 1.0, ramp = false) {
+        if (this.audioContext === null) this.init();
+        
+        const oscillator = this.audioContext.createOscillator();
+        const gainNode = this.audioContext.createGain();
+        
+        oscillator.type = type;
+        oscillator.frequency.value = frequency;
+        gainNode.gain.value = gain;
+        
+        oscillator.connect(gainNode);
+        gainNode.connect(this.audioContext.destination);
+        
+        oscillator.start(startTime);
+        
+        if (ramp) {
+            gainNode.gain.exponentialRampToValueAtTime(0.001, startTime + duration);
+        }
+        
+        oscillator.stop(startTime + duration);
+        
+        return { oscillator, gainNode };
+    },
+    
+    // Sound creators
+    createTickSound() {
+        return () => {
+            const now = this.audioContext.currentTime;
+            const currentTime = Date.now() / 1000;
+            
+            // Initialize lastTickTime if it's not set
+            if (this.lastTickTime === 0) {
+                this.lastTickTime = currentTime;
+            }
+            
+            // Calculate how long we've been ticking continuously
+            const tickDuration = currentTime - this.lastTickTime;
+            
+            // Determine volume based on duration
+            let volume = 0.1; // Default/initial volume
+            
+            if (tickDuration <= this.tickFadeoutTime) {
+                // Linear fade from 0.1 to 0 over tickFadeoutTime seconds
+                volume = 0.1 * (1 - (tickDuration / this.tickFadeoutTime));
+            } else {
+                // After tickFadeoutTime, don't play any sound
+                return; // Exit without playing sound
+            }
+            
+            // Only play if volume is significant
+            if (volume > 0.001) {
+                this.createOscillator('sine', 800, now, 0.03, volume);
+            }
+        };
+    },
+    
+    createLowTimeSound() {
+        return () => {
+            const now = this.audioContext.currentTime;
+            // Low time warning is always audible
+            this.createOscillator('triangle', 660, now, 0.1, 0.2);
+            // Reset tick fade timer on low time warning
+            this.lastTickTime = 0;
+        };
+    },
+    
+    createTimeUpSound() {
+        return () => {
+            const now = this.audioContext.currentTime;
+            
+            // First note
+            this.createOscillator('sawtooth', 440, now, 0.2, 0.3);
+            
+            // Second note (lower)
+            this.createOscillator('sawtooth', 220, now + 0.25, 0.3, 0.4);
+            
+            // Reset tick fade timer
+            this.lastTickTime = 0;
+        };
+    },
+    
+    createGameStartSound() {
+        return () => {
+            const now = this.audioContext.currentTime;
+            
+            // Rising sequence
+            this.createOscillator('sine', 440, now, 0.1, 0.3);
+            this.createOscillator('sine', 554, now + 0.1, 0.1, 0.3);
+            this.createOscillator('sine', 659, now + 0.2, 0.3, 0.3, true);
+            
+            // Reset tick fade timer
+            this.lastTickTime = 0;
+        };
+    },
+    
+    createGamePauseSound() {
+        return () => {
+            const now = this.audioContext.currentTime;
+            
+            // Two notes pause sound
+            this.createOscillator('sine', 659, now, 0.1, 0.3);
+            this.createOscillator('sine', 523, now + 0.15, 0.2, 0.3, true);
+            
+            // Reset tick fade timer
+            this.lastTickTime = 0;
+        };
+    },
+    
+    createGameResumeSound() {
+        return () => {
+            const now = this.audioContext.currentTime;
+            
+            // Rising sequence (opposite of pause)
+            this.createOscillator('sine', 523, now, 0.1, 0.3);
+            this.createOscillator('sine', 659, now + 0.15, 0.2, 0.3, true);
+            
+            // Reset tick fade timer
+            this.lastTickTime = 0;
+        };
+    },
+    
+    createGameOverSound() {
+        return () => {
+            const now = this.audioContext.currentTime;
+            
+            // Fanfare
+            this.createOscillator('square', 440, now, 0.1, 0.3);
+            this.createOscillator('square', 554, now + 0.1, 0.1, 0.3);
+            this.createOscillator('square', 659, now + 0.2, 0.1, 0.3);
+            this.createOscillator('square', 880, now + 0.3, 0.4, 0.3, true);
+            
+            // Reset tick fade timer
+            this.lastTickTime = 0;
+        };
+    },
+    
+    createPlayerSwitchSound() {
+        return () => {
+            const now = this.audioContext.currentTime;
+            this.createOscillator('sine', 1200, now, 0.05, 0.2);
+            
+            // Reset tick fade timer on player switch
+            this.lastTickTime = 0;
+        };
+    },
+    
+    createButtonClickSound() {
+        return () => {
+            const now = this.audioContext.currentTime;
+            this.createOscillator('sine', 700, now, 0.04, 0.1);
+        };
+    },
+    
+    createModalOpenSound() {
+        return () => {
+            const now = this.audioContext.currentTime;
+            
+            // Ascending sound
+            this.createOscillator('sine', 400, now, 0.1, 0.2);
+            this.createOscillator('sine', 600, now + 0.1, 0.1, 0.2);
+        };
+    },
+    
+    createModalCloseSound() {
+        return () => {
+            const now = this.audioContext.currentTime;
+            
+            // Descending sound
+            this.createOscillator('sine', 600, now, 0.1, 0.2);
+            this.createOscillator('sine', 400, now + 0.1, 0.1, 0.2);
+        };
+    },
+    
+    createPlayerAddedSound() {
+        return () => {
+            const now = this.audioContext.currentTime;
+            
+            // Positive ascending notes
+            this.createOscillator('sine', 440, now, 0.1, 0.2);
+            this.createOscillator('sine', 523, now + 0.1, 0.1, 0.2);
+            this.createOscillator('sine', 659, now + 0.2, 0.2, 0.2, true);
+        };
+    },
+    
+    createPlayerEditedSound() {
+        return () => {
+            const now = this.audioContext.currentTime;
+            
+            // Two note confirmation
+            this.createOscillator('sine', 440, now, 0.1, 0.2);
+            this.createOscillator('sine', 523, now + 0.15, 0.15, 0.2);
+        };
+    },
+    
+    createPlayerDeletedSound() {
+        return () => {
+            const now = this.audioContext.currentTime;
+            
+            // Descending notes
+            this.createOscillator('sine', 659, now, 0.1, 0.2);
+            this.createOscillator('sine', 523, now + 0.1, 0.1, 0.2);
+            this.createOscillator('sine', 392, now + 0.2, 0.2, 0.2, true);
+        };
+    },
+    
+    // Play a sound if not muted
+    play(soundName) {
+        if (this.muted || !this.sounds[soundName]) return;
+        
+        // Resume audio context if it's suspended (needed for newer browsers)
+        if (this.audioContext.state === 'suspended') {
+            this.audioContext.resume();
+        }
+        
+        this.sounds[soundName]();
+    },
+    
+    // Toggle mute state
+    toggleMute() {
+        this.muted = !this.muted;
+        localStorage.setItem('gameTimerMuted', this.muted);
+        return this.muted;
+    },
+    
+    // Play timer sounds based on remaining time
+    playTimerSound(remainingSeconds) {
+        if (remainingSeconds <= 0) {
+            // Reset tick fade timer when timer stops
+            this.lastTickTime = 0;
+            return; // Don't play sounds for zero time
+        }
+        
+        if (remainingSeconds <= this.lowTimeThreshold) {
+            // Play low time warning sound (this resets the tick fade timer)
+            this.play('lowTime');
+        } else if (remainingSeconds % 1 === 0) {
+            // Normal tick sound on every second
+            this.play('tick');
+        }
+    },
+    
+    // Play timer expired sound
+    playTimerExpired() {
+        this.play('timeUp');
+    },
+    
+    // Stop all sounds and reset the tick fading
+    stopAllSounds() {
+        // Reset tick fade timer when stopping sounds
+        this.lastTickTime = 0;
+    },
+    
+    // Reset the tick fading (call this when timer is paused or player changes)
+    resetTickFade() {
+        this.lastTickTime = 0;
+    }
+};
+
+// Initialize audio on module load
+audioManager.init();
+
+// Export the audio manager
+export default audioManager;

camera.js

@@ -0,0 +1,116 @@
+// camera.js
+import { CSS_CLASSES } from './config.js';
+
+let stream = null;
+let elements = {}; // To store references to DOM elements passed during init
+let onCaptureCallback = null; // Callback when image is captured
+
+export function initCamera(cameraElements, options) {
+    elements = cameraElements; // Store refs like { cameraContainer, cameraView, etc. }
+    onCaptureCallback = options.onCapture;
+
+    // Add internal listeners for capture/cancel buttons
+    elements.cameraCaptureButton?.addEventListener('click', handleCapture);
+    elements.cameraCancelButton?.addEventListener('click', closeCamera);
+
+     // Handle orientation change to potentially reset stream dimensions
+    window.addEventListener('orientationchange', handleOrientationChange);
+}
+
+async function openCamera() {
+    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+        alert('Camera access not supported or available on this device.');
+        return false; // Indicate failure
+    }
+
+    try {
+        stream = await navigator.mediaDevices.getUserMedia({
+            video: {
+                facingMode: 'user', // Prefer front camera
+                width: { ideal: 1280 },
+                height: { ideal: 720 }
+            }
+        });
+
+        elements.cameraContainer?.classList.add(CSS_CLASSES.CAMERA_ACTIVE);
+        if (elements.cameraView) {
+            elements.cameraView.srcObject = stream;
+            // Wait for video metadata to load to get correct dimensions
+            elements.cameraView.onloadedmetadata = () => {
+                 elements.cameraView.play(); // Start playing the video stream
+            };
+        }
+        return true; // Indicate success
+    } catch (error) {
+        console.error('Error accessing camera:', error);
+        alert('Could not access camera: ' + error.message);
+        closeCamera(); // Ensure cleanup if opening failed
+        return false; // Indicate failure
+    }
+}
+
+function handleCapture() {
+     if (!elements.cameraView || !elements.cameraCanvas || !stream) return;
+
+    // Set canvas dimensions to match video's actual dimensions
+    elements.cameraCanvas.width = elements.cameraView.videoWidth;
+    elements.cameraCanvas.height = elements.cameraView.videoHeight;
+
+    // Draw the current video frame to the canvas
+    const context = elements.cameraCanvas.getContext('2d');
+    // Flip horizontally for front camera to make it mirror-like
+    if (stream.getVideoTracks()[0]?.getSettings()?.facingMode === 'user') {
+        context.translate(elements.cameraCanvas.width, 0);
+        context.scale(-1, 1);
+    }
+    context.drawImage(elements.cameraView, 0, 0, elements.cameraCanvas.width, elements.cameraCanvas.height);
+
+    // Convert canvas to data URL (JPEG format)
+    const imageDataUrl = elements.cameraCanvas.toDataURL('image/jpeg', 0.9); // Quality 0.9
+
+    // Call the callback provided during init with the image data
+    if (onCaptureCallback) {
+        onCaptureCallback(imageDataUrl);
+    }
+
+    // Stop stream and hide UI after capture
+    closeCamera();
+}
+
+function stopCameraStream() {
+    if (stream) {
+        stream.getTracks().forEach(track => track.stop());
+        stream = null;
+    }
+     // Also clear the srcObject
+    if (elements.cameraView) {
+        elements.cameraView.srcObject = null;
+    }
+}
+
+function closeCamera() {
+    stopCameraStream();
+    elements.cameraContainer?.classList.remove(CSS_CLASSES.CAMERA_ACTIVE);
+}
+
+function handleOrientationChange() {
+    // If camera is active, restart stream to potentially adjust aspect ratio/resolution
+    if (elements.cameraContainer?.classList.contains(CSS_CLASSES.CAMERA_ACTIVE) && stream) {
+        console.log("Orientation changed, re-evaluating camera stream...");
+         // Short delay to allow layout to settle
+        setTimeout(async () => {
+            // Stop existing stream before requesting new one
+            // This might cause a flicker but ensures constraints are re-evaluated
+            stopCameraStream();
+            await openCamera(); // Attempt to reopen with potentially new constraints
+        }, 300);
+    }
+}
+
+// Public API for camera module
+export default {
+    init: initCamera,
+    open: openCamera,
+    close: closeCamera,
+    stopStream: stopCameraStream // Expose if needed externally, e.g., when modal closes
+};

config.js

@@ -0,0 +1,37 @@
+// config.js
+export const PUBLIC_VAPID_KEY = 'BKfRJXjSQmAJ452gLwlK_8scGrW6qMU1mBRp39ONtcQHkSsQgmLAaODIyGbgHyRpnDEv3HfXV1oGh3SC0fHxY0E';
+export const BACKEND_URL = 'https://webpush.virtonline.eu';
+export const FLIC_BUTTON_ID = 'game-button'; // Example ID, might need configuration
+export const LOCAL_STORAGE_KEY = 'gameTimerData';
+
+// Default player settings
+export const DEFAULT_PLAYER_TIME_SECONDS = 300; // 5 minutes
+export const DEFAULT_PLAYERS = [
+    { id: 1, name: 'Player 1', timeInSeconds: DEFAULT_PLAYER_TIME_SECONDS, remainingTime: DEFAULT_PLAYER_TIME_SECONDS, image: null },
+    { id: 2, name: 'Player 2', timeInSeconds: DEFAULT_PLAYER_TIME_SECONDS, remainingTime: DEFAULT_PLAYER_TIME_SECONDS, image: null }
+];
+
+// CSS Classes (optional, but can help consistency)
+export const CSS_CLASSES = {
+    ACTIVE_PLAYER: 'active-player',
+    INACTIVE_PLAYER: 'inactive-player',
+    TIMER_ACTIVE: 'timer-active',
+    TIMER_FINISHED: 'timer-finished',
+    MODAL_ACTIVE: 'active',
+    CAMERA_ACTIVE: 'active'
+};
+
+// Game States
+export const GAME_STATES = {
+    SETUP: 'setup',
+    RUNNING: 'running',
+    PAUSED: 'paused',
+    OVER: 'over'
+};
+
+// Flic Actions
+export const FLIC_ACTIONS = {
+    SINGLE_CLICK: 'SingleClick',
+    DOUBLE_CLICK: 'DoubleClick',
+    HOLD: 'Hold'
+};

index.html

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#2c3e50">
+    <title>Game Timer</title>
+    <link rel="manifest" href="manifest.json">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+    <link rel="stylesheet" href="styles.css">
+    
+</head>
+<body>
+    <div class="app-container">
+        <header class="header">
+            <div class="game-controls">
+                <button id="gameButton" class="game-button">Start Game</button>
+            </div>
+            <div class="header-buttons">
+                <button id="resetButton" class="header-button" title="Reset All Data">
+                    <i class="fas fa-redo-alt"></i>
+                </button>
+                <button id="addPlayerButton" class="header-button" title="Add New Player">
+                    <i class="fas fa-user-plus"></i>
+                </button>
+                <button id="setupButton" class="header-button" title="Setup Current Player">
+                    <i class="fas fa-cog"></i>
+                </button>
+            </div>
+        </header>
+        
+        <div class="carousel-container">
+            <div id="carousel" class="carousel">
+                <!-- Player cards will be dynamically inserted here -->
+            </div>
+        </div>
+    </div>
+    
+    <!-- Player Edit Modal -->
+    <div id="playerModal" class="modal">
+        <div class="modal-content">
+            <h2 id="modalTitle">Edit Player</h2>
+            <form id="playerForm">
+                <div class="form-group">
+                    <label for="playerName">Name</label>
+                    <input type="text" id="playerName" required>
+                </div>
+                <div class="form-group">
+                    <label for="playerImage">Image</label>
+                    <div class="image-input-container">
+                        <input type="file" id="playerImage" accept="image/*">
+                        <button type="button" id="cameraButton" class="camera-button">
+                            <i class="fas fa-camera"></i> Take Photo
+                        </button>
+                    </div>
+                    <div id="imagePreview" class="player-image" style="margin-top: 0.5rem;">
+                        <i class="fas fa-user"></i>
+                    </div>
+                </div>
+                <div id="playerTimeContainer" class="form-group">
+                    <label for="playerTime">Time (minutes)</label>
+                    <input type="number" id="playerTime" min="1" max="180" value="5" required>
+                </div>
+                <div id="remainingTimeContainer" class="form-group" style="display: none;">
+                    <label for="playerRemainingTime">Remaining Time (MM:SS)</label>
+                    <input type="text" id="playerRemainingTime" pattern="[0-9]{2}:[0-9]{2}" placeholder="05:00">
+                    <small>Format: Minutes:Seconds (e.g., 05:30)</small>
+                </div>
+                <div class="form-buttons">
+                    <button type="button" id="cancelButton" class="cancel-button">Cancel</button>
+                    <button type="submit" class="save-button">Save</button>
+                </div>
+                <div class="form-buttons delete-button-container">
+                    <button type="button" id="deletePlayerButton" class="delete-button">Delete Player</button>
+                </div>
+            </form>
+        </div>
+    </div>
+    
+    <!-- Reset Confirmation Modal -->
+    <div id="resetModal" class="modal">
+        <div class="modal-content">
+            <h2>Reset All Data</h2>
+            <p>Are you sure you want to reset all players and timers? This action cannot be undone.</p>
+            <div class="form-buttons">
+                <button type="button" id="resetCancelButton" class="cancel-button">Cancel</button>
+                <button type="button" id="resetConfirmButton" class="save-button">Reset</button>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Camera Capture UI -->
+    <div id="cameraContainer" class="camera-container">
+        <div class="camera-view">
+            <video id="cameraView" autoplay playsinline></video>
+            <canvas id="cameraCanvas" style="display: none;"></canvas>
+        </div>
+        <div class="camera-controls">
+            <button id="cameraCancelButton" class="camera-button-cancel">Cancel</button>
+            <button id="cameraCaptureButton" class="camera-button-large"></button>
+        </div>
+    </div>
+      
+    <!-- Main application script -->
+    <script type="module" src="app.js"></script>
+    <script>
+        if ("serviceWorker" in navigator) {
+          navigator.serviceWorker.register("/sw.js")
+            .then(() => console.log("Service Worker Registered"))
+            .catch((err) => console.log("Service Worker Failed", err));
+        }
+    </script>  
+    <script>
+        // Request notification permission on page load
+        document.addEventListener('DOMContentLoaded', () => {
+            if ('Notification' in window) {
+                Notification.requestPermission().then(permission => {
+                    console.log('Notification permission:', permission);
+                });
+            }
+        });
+    </script>
+    <footer class="app-footer">
+        <div class="author-info">
+            <p>Vibe coded by Martin</p>
+            <p>Version 0.0.1</p>
+        </div>
+    </footer> 
+</body>
+</html>

labels.example

@@ -0,0 +1,20 @@
+traefik.enable=true
+traefik.docker.network=traefik
+traefik.http.routers.game-timer.rule=Host(`game-timer.virtonline.eu`)
+traefik.http.routers.game-timer.service=game-timer
+traefik.http.routers.game-timer.tls=true
+traefik.http.routers.game-timer.tls.certResolver=default
+traefik.http.routers.game-timer.entrypoints=web-secure
+traefik.http.services.game-timer.loadbalancer.server.port=80
+
+traefik.http.routers.game-timer.middlewares=game-timer-auth
+# Declaring the user list
+#
+# Note: when used in docker-compose.yml all dollar signs in the hash need to be doubled for escaping.
+# To create a user:password pair, the following command can be used:
+# echo $(htpasswd -nb user password) | sed -e s/\\$/\\$\\$/g
+#
+# Also note that dollar signs should NOT be doubled when they are not evaluated (e.g. Ansible docker_container module).
+# for docker lables use
+# `htpasswd -nb user password`
+traefik.http.middlewares.game-timer-auth.basicauth.users=user:$apr1$rFge2lVe$DpoqxMsxSVJubFLXu4OMr1

manifest.json

@@ -0,0 +1,55 @@
+{
+  "name": "Game Timer PWA",
+  "short_name": "Game Timer",
+  "description": "Multi-player chess-like timer with carousel navigation",
+  "start_url": "/index.html",
+  "display": "standalone",
+  "background_color": "#f5f5f5",
+  "theme_color": "#2c3e50",
+  "icons": [
+    {
+      "src": "/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/apple-touch-icon.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/favicon-32x32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "/icons/favicon-16x16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    }
+  ],
+  "screenshots": [
+    {
+      "src": "/screenshots/screenshot1.png",
+      "sizes": "2604x2269",
+      "type": "image/png",
+      "form_factor": "wide"
+    },
+    {
+      "src": "/screenshots/screenshot2.png",
+      "sizes": "1082x2402",
+      "type": "image/png"
+    }
+  ],
+  "url_handlers": [
+    {
+      "origin": "https://game-timer.virtonline.eu"
+    }
+  ],
+  "gcm_sender_id": "103953800507"
+}

pushFlicIntegration.js

@@ -0,0 +1,197 @@
+// pushFlicIntegration.js
+import { PUBLIC_VAPID_KEY, BACKEND_URL, FLIC_BUTTON_ID, FLIC_ACTIONS } from './config.js';
+
+let pushSubscription = null; // Keep track locally if needed
+let actionHandlers = {}; // Store handlers for different Flic actions
+
+// --- Helper Functions ---
+
+// Get stored basic auth credentials or prompt user for them
+function getBasicAuthCredentials() {
+    const storedAuth = localStorage.getItem('basicAuthCredentials');
+    if (storedAuth) {
+        try { return JSON.parse(storedAuth); } catch (error) { console.error('Failed to parse stored credentials:', error); }
+    }
+    const username = prompt('Please enter your username for backend authentication:');
+    if (!username) return null;
+    const password = prompt('Please enter your password:');
+    if (!password) return null;
+    const credentials = { username, password };
+    localStorage.setItem('basicAuthCredentials', JSON.stringify(credentials));
+    return credentials;
+}
+
+// Create Basic Auth header string
+function createBasicAuthHeader(credentials) {
+    if (!credentials?.username || !credentials.password) return null;
+    return 'Basic ' + btoa(`${credentials.username}:${credentials.password}`);
+}
+
+// Convert URL-safe base64 string to Uint8Array
+function urlBase64ToUint8Array(base64String) {
+    const padding = '='.repeat((4 - base64String.length % 4) % 4);
+    const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
+    const rawData = window.atob(base64);
+    const outputArray = new Uint8Array(rawData.length);
+    for (let i = 0; i < rawData.length; ++i) {
+        outputArray[i] = rawData.charCodeAt(i);
+    }
+    return outputArray;
+}
+
+// Convert ArrayBuffer to URL-safe Base64 string
+function arrayBufferToBase64(buffer) {
+    let binary = '';
+    const bytes = new Uint8Array(buffer);
+    for (let i = 0; i < bytes.byteLength; i++) { binary += String.fromCharCode(bytes[i]); }
+    return window.btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+
+// --- Push Subscription Logic ---
+
+async function subscribeToPush() {
+    const buttonId = FLIC_BUTTON_ID; // Use configured button ID
+
+    if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
+        console.error('Push Messaging is not supported.');
+        alert('Push Notifications are not supported by your browser.');
+        return;
+    }
+
+    try {
+        const permission = await Notification.requestPermission();
+        if (permission !== 'granted') {
+            console.warn('Notification permission denied.');
+            alert('Please enable notifications to link the Flic button.');
+            return;
+        }
+
+        const registration = await navigator.serviceWorker.ready;
+        let existingSubscription = await registration.pushManager.getSubscription();
+        let needsResubscribe = !existingSubscription;
+
+        if (existingSubscription) {
+            const existingKey = existingSubscription.options?.applicationServerKey;
+            if (!existingKey || arrayBufferToBase64(existingKey) !== PUBLIC_VAPID_KEY) {
+                console.log('VAPID key mismatch or missing. Unsubscribing old subscription.');
+                await existingSubscription.unsubscribe();
+                existingSubscription = null;
+                needsResubscribe = true;
+            } else {
+                 console.log('Existing valid subscription found.');
+                 pushSubscription = existingSubscription; // Store it
+            }
+        }
+
+        let finalSubscription = existingSubscription;
+        if (needsResubscribe) {
+            console.log('Subscribing for push notifications...');
+            const applicationServerKey = urlBase64ToUint8Array(PUBLIC_VAPID_KEY);
+            finalSubscription = await registration.pushManager.subscribe({
+                userVisibleOnly: true,
+                applicationServerKey: applicationServerKey
+            });
+             console.log('New push subscription obtained:', finalSubscription);
+             pushSubscription = finalSubscription; // Store it
+        }
+
+        if (!finalSubscription) {
+           console.error("Failed to obtain a subscription object.");
+           alert("Could not get subscription details.");
+           return;
+        }
+
+        await sendSubscriptionToServer(finalSubscription, buttonId);
+
+    } catch (error) {
+        console.error('Error during push subscription:', error);
+        alert(`Subscription failed: ${error.message}`);
+    }
+}
+
+async function sendSubscriptionToServer(subscription, buttonId) {
+    console.log(`Sending subscription for button "${buttonId}" to backend...`);
+    const credentials = getBasicAuthCredentials();
+    if (!credentials) {
+        alert('Authentication required to save button link.');
+        return;
+    }
+
+    const headers = { 'Content-Type': 'application/json' };
+    const authHeader = createBasicAuthHeader(credentials);
+    if (authHeader) headers['Authorization'] = authHeader;
+
+    try {
+        const response = await fetch(`${BACKEND_URL}/subscribe`, {
+            method: 'POST',
+            body: JSON.stringify({ button_id: buttonId, subscription: subscription }),
+            headers: headers
+        });
+
+        if (response.ok) {
+            const result = await response.json();
+            console.log('Subscription sent successfully:', result.message);
+            // Maybe show a success message to the user
+        } else {
+            let errorMsg = `Server error: ${response.status}`;
+            if (response.status === 401 || response.status === 403) {
+                localStorage.removeItem('basicAuthCredentials'); // Clear bad creds
+                errorMsg = 'Authentication failed. Please try again.';
+            } else {
+                try { errorMsg = (await response.json()).message || errorMsg; } catch (e) { /* use default */ }
+            }
+            console.error('Failed to send subscription:', errorMsg);
+            alert(`Failed to save link: ${errorMsg}`);
+        }
+    } catch (error) {
+        console.error('Network error sending subscription:', error);
+        alert(`Network error: ${error.message}`);
+    }
+}
+
+// --- Flic Action Handling ---
+
+// Called by app.js when a message is received from the service worker
+export function handleFlicAction(action, buttonId, timestamp) {
+    console.log(`[PushFlic] Received Action: ${action} from Button: ${buttonId} at ${timestamp}`);
+
+    // Ignore actions from buttons other than the configured one
+    if (buttonId !== FLIC_BUTTON_ID) {
+        console.warn(`[PushFlic] Ignoring action from unknown button: ${buttonId}`);
+        return;
+    }
+
+    // Find the registered handler for this action
+    const handler = actionHandlers[action];
+    if (handler && typeof handler === 'function') {
+        console.log(`[PushFlic] Executing handler for ${action}`);
+        // Execute the handler registered in app.js
+        handler(); // Use the handler function directly instead of hardcoded function calls
+    } else {
+        console.warn(`[PushFlic] No handler registered for action: ${action}`);
+    }
+}
+
+// --- Initialization ---
+
+export function initPushFlic(handlers) {
+    actionHandlers = handlers; // Store the handlers passed from app.js
+    // Example: handlers = { SingleClick: handleNextPlayer, Hold: handleTogglePause }
+
+    // Attempt to subscribe immediately if permission might already be granted
+    // Or trigger subscription on a user action (e.g., a "Link Flic Button" button)
+    // For simplicity, let's try subscribing if SW is ready and permission allows
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.ready.then(registration => {
+            Notification.requestPermission().then(permission => {
+                if (permission === 'granted') {
+                    console.log('[PushFlic] Permission granted, attempting subscription.');
+                    subscribeToPush();
+                } else {
+                    console.log('[PushFlic] Notification permission not granted.');
+                    // Optionally provide a button for the user to trigger subscription later
+                }
+            });
+        });
+    }
+}

site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "Game Timer",
+    "short_name": "Game Timer",
+    "icons": [
+        {
+            "src": "/icons/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/icons/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

state.js

@@ -0,0 +1,230 @@
+// state.js
+import { LOCAL_STORAGE_KEY, DEFAULT_PLAYERS, GAME_STATES, DEFAULT_PLAYER_TIME_SECONDS } from './config.js';
+
+let players = [];
+let currentPlayerIndex = 0;
+let gameState = GAME_STATES.SETUP;
+
+// --- State Accessors ---
+
+export function getPlayers() {
+    return [...players]; // Return a copy to prevent direct mutation
+}
+
+export function getCurrentPlayer() {
+    if (players.length === 0) return null;
+    return players[currentPlayerIndex];
+}
+
+export function getPlayerById(id) {
+    return players.find(p => p.id === id);
+}
+
+export function getCurrentPlayerIndex() {
+    return currentPlayerIndex;
+}
+
+export function getGameState() {
+    return gameState;
+}
+
+// --- State Mutators ---
+
+export function setPlayers(newPlayers) {
+    players = newPlayers;
+    saveData();
+}
+
+export function setCurrentPlayerIndex(index) {
+    if (index >= 0 && index < players.length) {
+        currentPlayerIndex = index;
+        saveData();
+    } else {
+        console.error(`Invalid player index: ${index}`);
+    }
+}
+
+export function setGameState(newState) {
+    if (Object.values(GAME_STATES).includes(newState)) {
+        gameState = newState;
+        saveData();
+    } else {
+        console.error(`Invalid game state: ${newState}`);
+    }
+}
+
+export function updatePlayerTime(index, remainingTime) {
+    if (index >= 0 && index < players.length) {
+        players[index].remainingTime = Math.max(0, remainingTime); // Ensure time doesn't go below 0
+        saveData(); // Save data whenever time updates
+    }
+}
+
+export function addPlayer(name, timeInMinutes, image = null) {
+    const timeInSeconds = timeInMinutes * 60;
+    const newId = Date.now();
+    players.push({
+        id: newId,
+        name: name,
+        timeInSeconds: timeInSeconds,
+        remainingTime: timeInSeconds,
+        image: image
+    });
+    currentPlayerIndex = players.length - 1; // Focus new player
+    saveData();
+    return players[players.length - 1]; // Return the newly added player
+}
+
+export function updatePlayer(index, name, timeInMinutes, remainingTimeSeconds, image) {
+     if (index >= 0 && index < players.length) {
+        const player = players[index];
+        const timeInSeconds = timeInMinutes * 60;
+
+        player.name = name;
+        player.timeInSeconds = timeInSeconds;
+
+        // Update remaining time carefully based on game state
+        if (gameState === GAME_STATES.SETUP) {
+            player.remainingTime = timeInSeconds;
+        } else if (gameState === GAME_STATES.PAUSED || gameState === GAME_STATES.OVER) {
+            // Allow direct setting of remaining time only when paused or over
+             player.remainingTime = remainingTimeSeconds;
+        }
+        // If running, remaining time is managed by the timer, don't override here unless intended
+
+        if (image !== undefined) { // Allow updating image (null means remove image)
+            player.image = image;
+        }
+        saveData();
+        return player;
+     }
+     return null;
+}
+
+export function deletePlayer(index) {
+    if (players.length <= 2) {
+        console.warn('Cannot delete player, minimum 2 players required.');
+        return false; // Indicate deletion failed
+    }
+    if (index >= 0 && index < players.length) {
+        players.splice(index, 1);
+        if (currentPlayerIndex >= players.length) {
+            currentPlayerIndex = players.length - 1;
+        } else if (currentPlayerIndex > index) {
+             // Adjust index if deleting someone before the current player
+            // No adjustment needed if deleting current or after current
+        }
+        saveData();
+        return true; // Indicate success
+    }
+    return false; // Indicate deletion failed
+}
+
+export function resetPlayersTime() {
+    players.forEach(player => {
+        player.remainingTime = player.timeInSeconds;
+    });
+    saveData();
+}
+
+export function resetToDefaults() {
+    // Deep copy default players to avoid modifying the constant
+    players = JSON.parse(JSON.stringify(DEFAULT_PLAYERS));
+    gameState = GAME_STATES.SETUP;
+    currentPlayerIndex = 0;
+    saveData();
+}
+
+export function areAllTimersFinished() {
+    return players.every(player => player.remainingTime <= 0);
+}
+
+// Returns the index of the next player with time > 0, or -1 if none
+export function findNextPlayerWithTime() {
+    if (players.length === 0) return -1;
+    const startIndex = (currentPlayerIndex + 1) % players.length;
+    let index = startIndex;
+
+    do {
+        if (players[index].remainingTime > 0) {
+            return index;
+        }
+        index = (index + 1) % players.length;
+    } while (index !== startIndex);
+
+    // Check current player last if no others found
+    if(players[currentPlayerIndex].remainingTime > 0) {
+        return currentPlayerIndex;
+    }
+
+    return -1; // No player has time left
+}
+
+// Find next player with time in specified direction (1 for next, -1 for prev)
+export function findNextPlayerWithTimeCircular(direction) {
+    if (players.length === 0) return -1;
+    let index = currentPlayerIndex;
+
+    for (let i = 0; i < players.length; i++) {
+        index = (index + direction + players.length) % players.length;
+        if (players[index]?.remainingTime > 0) { // Check if player exists and has time
+            return index;
+        }
+    }
+
+    // If no other player found, check if current player has time (only relevant if direction search fails)
+    if (players[currentPlayerIndex]?.remainingTime > 0) {
+        return currentPlayerIndex;
+    }
+
+    return -1; // No player has time left
+}
+
+
+// --- Persistence ---
+
+export function saveData() {
+    const dataToSave = {
+        players,
+        gameState,
+        currentPlayerIndex
+    };
+    try {
+        localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(dataToSave));
+    } catch (error) {
+        console.error("Error saving data to localStorage:", error);
+        // Maybe notify the user that settings won't be saved
+    }
+}
+
+export function loadData() {
+    const savedData = localStorage.getItem(LOCAL_STORAGE_KEY);
+    if (savedData) {
+        try {
+            const parsedData = JSON.parse(savedData);
+            players = parsedData.players || JSON.parse(JSON.stringify(DEFAULT_PLAYERS));
+            gameState = parsedData.gameState || GAME_STATES.SETUP;
+            currentPlayerIndex = parsedData.currentPlayerIndex || 0;
+
+            // Basic validation/migration if needed
+            if (currentPlayerIndex >= players.length) {
+                currentPlayerIndex = 0;
+            }
+             // Ensure all players have necessary properties
+            players = players.map(p => ({
+                id: p.id || Date.now() + Math.random(), // Ensure ID exists
+                name: p.name || 'Player',
+                timeInSeconds: p.timeInSeconds || DEFAULT_PLAYER_TIME_SECONDS,
+                remainingTime: p.remainingTime !== undefined ? p.remainingTime : (p.timeInSeconds || DEFAULT_PLAYER_TIME_SECONDS),
+                image: p.image || null
+            }));
+
+        } catch (error) {
+            console.error("Error parsing data from localStorage:", error);
+            resetToDefaults(); // Reset to defaults if stored data is corrupt
+        }
+    } else {
+        resetToDefaults(); // Use defaults if no saved data
+    }
+    // No saveData() here, loadData just loads the state
+}

styles.css

@@ -0,0 +1,370 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: Arial, sans-serif;
+}
+
+body {
+    background-color: #f5f5f5;
+    color: #333;
+    overflow-x: hidden;
+}
+
+.app-container {
+    max-width: 100%;
+    margin: 0 auto;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.header {
+    background-color: #2c3e50;
+    color: white;
+    padding: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 10;
+}
+
+.game-controls {
+    text-align: center;
+    flex: 1;
+}
+
+.game-button {
+    background-color: #3498db;
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    font-size: 1rem;
+    cursor: pointer;
+}
+
+.header-buttons {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.header-button {
+    background-color: transparent;
+    color: white;
+    border: none;
+    font-size: 1.2rem;
+    cursor: pointer;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+}
+
+.header-button:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.carousel-container {
+    margin-top: 70px;
+    margin-bottom: 60px; /* Add some space for the footer */
+    width: 100%;
+    overflow: hidden;
+    flex: 1;
+    touch-action: pan-x;
+}
+
+.carousel {
+    display: flex;
+    transition: transform 0.3s ease;
+    height: calc(100vh - 70px);
+}
+
+/* Adjust the preview image in the modal to maintain consistency */
+#imagePreview.player-image {
+    width: 180px; /* Slightly smaller than the main display but still larger than original 120px */
+    height: 180px;
+    margin: 0.5rem auto;
+}
+
+.player-card {
+    min-width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem; /* Increased from 1rem for more spacing */
+    transition: all 0.3s ease;
+}
+
+.active-player {
+    opacity: 1;
+}
+
+.inactive-player {
+    opacity: 0.6;
+}
+
+/* New styles for timer active state */
+.player-timer {
+    font-size: 4rem;
+    font-weight: bold;
+    margin: 1rem 0;
+    padding: 0.5rem 1.5rem;
+    border-radius: 12px;
+    position: relative;
+}
+
+/* Timer background effect when game is running */
+.timer-active {
+    background-color: #ffecee; /* Light red base color */
+    box-shadow: 0 0 15px rgba(231, 76, 60, 0.5);
+    animation: pulsate 1.5s ease-out infinite;
+}
+
+/* Timer of a player that has run out of time */
+.timer-finished {
+    color: #e74c3c;
+    text-decoration: line-through;
+    opacity: 0.7;
+}
+
+/* Pulsating animation */
+@keyframes pulsate {
+    0% {
+        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
+        background-color: #ffecee;
+    }
+    50% {
+        box-shadow: 0 0 20px 0 rgba(231, 76, 60, 0.5);
+        background-color: #ffe0e0;
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7);
+        background-color: #ffecee;
+    }
+}
+
+.player-image {
+    width: 240px;  /* Doubled from 120px */
+    height: 240px; /* Doubled from 120px */
+    border-radius: 50%;
+    background-color: #ddd;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 2rem; /* Increased from 1rem */
+    overflow: hidden;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Added shadow for better visual presence */
+}
+
+.player-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.player-image i {
+    font-size: 6rem; /* Doubled from 3rem */
+    color: #888;
+}
+
+.player-name {
+    font-size: 3rem; /* Doubled from 1.5rem */
+    margin-bottom: 1rem; /* Increased from 0.5rem */
+    font-weight: bold;
+    text-align: center;
+}
+
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 20;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease;
+}
+
+.modal.active {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.modal-content {
+    background-color: white;
+    padding: 2rem;
+    border-radius: 8px;
+    width: 90%;
+    max-width: 500px;
+}
+
+.form-group {
+    margin-bottom: 1rem;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: bold;
+}
+
+.form-group input {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+.form-buttons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 1rem;
+}
+
+.form-buttons button {
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    flex: 1;
+    margin: 0 0.5rem;
+}
+
+.form-buttons button:first-child {
+    margin-left: 0;
+}
+
+.form-buttons button:last-child {
+    margin-right: 0;
+}
+
+.delete-button-container {
+    margin-top: 1rem;
+}
+
+.save-button {
+    background-color: #27ae60;
+    color: white;
+}
+
+.cancel-button {
+    background-color: #e74c3c;
+    color: white;
+}
+
+.delete-button {
+    background-color: #e74c3c;
+    color: white;
+    width: 100%;
+}
+
+/* Add these styles to your styles.css file */
+
+.image-input-container {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.camera-button {
+    background-color: #3498db;
+    color: white;
+    border: none;
+    padding: 0.5rem;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.camera-button:hover {
+    background-color: #2980b9;
+}
+
+/* Optional: Hide the default file input appearance and use a custom button */
+input[type="file"] {
+    max-width: 120px;
+}
+
+.camera-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #000;
+    z-index: 30;
+    display: none;
+    flex-direction: column;
+}
+
+.camera-container.active {
+    display: flex;
+}
+
+.camera-view {
+    flex: 1;
+    position: relative;
+    overflow: hidden;
+}
+
+.camera-view video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.camera-controls {
+    display: flex;
+    justify-content: space-around;
+    padding: 1rem;
+    background-color: #222;
+}
+
+.camera-button-large {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background-color: #fff;
+    border: 3px solid #3498db;
+    cursor: pointer;
+}
+
+.camera-button-cancel {
+    background-color: #e74c3c;
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.app-footer {
+    background-color: #2c3e50;
+    color: white;
+    padding: 1rem;
+    text-align: center;
+    font-size: 0.9rem;
+    margin-top: auto; /* This pushes the footer to the bottom when possible */
+}
+
+.author-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.3rem;
+}

sw.js

@@ -0,0 +1,188 @@
+// Service Worker version
+const CACHE_VERSION = 'v1.0.0';
+const CACHE_NAME = `game-timer-${CACHE_VERSION}`;
+
+// Files to cache
+const CACHE_FILES = [
+  '/',
+  '/index.html',
+  '/app.js',
+  '/audio.js',
+  '/styles.css',
+  '/manifest.json',
+  '/icons/android-chrome-192x192.png',
+  '/icons/android-chrome-512x512.png',
+  '/icons/apple-touch-icon.png',
+  '/icons/favicon-32x32.png',
+  '/icons/favicon-16x16.png'
+];
+
+// Install event - Cache files
+self.addEventListener('install', event => {
+  console.log('[ServiceWorker] Install');
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(cache => {
+        console.log('[ServiceWorker] Caching app shell');
+        return cache.addAll(CACHE_FILES);
+      })
+      .then(() => {
+        console.log('[ServiceWorker] Skip waiting on install');
+        return self.skipWaiting();
+      })
+  );
+});
+
+// Activate event - Clean old caches
+self.addEventListener('activate', event => {
+  console.log('[ServiceWorker] Activate');
+  event.waitUntil(
+    caches.keys().then(keyList => {
+      return Promise.all(keyList.map(key => {
+        if (key !== CACHE_NAME) {
+          console.log('[ServiceWorker] Removing old cache', key);
+          return caches.delete(key);
+        }
+      }));
+    })
+    .then(() => {
+      console.log('[ServiceWorker] Claiming clients');
+      return self.clients.claim();
+    })
+  );
+});
+
+// Helper function to determine if a response should be cached
+function shouldCacheResponse(request, response) {
+  // Only cache GET requests
+  if (request.method !== 'GET') return false;
+  
+  // Don't cache errors
+  if (!response || response.status !== 200) return false;
+  
+  // Check if URL should be cached
+  const url = new URL(request.url);
+  
+  // Don't cache query parameters (except common ones for content)
+  if (url.search && !url.search.match(/\?(v|version|cache)=/)) return false;
+  
+  return true;
+}
+
+self.addEventListener('push', event => {
+  console.log('[ServiceWorker] Push received');
+  
+  let pushData = {
+    title: 'Flic Action',
+    body: 'Button pressed!',
+    data: { action: 'Unknown', button: 'Unknown' } // Default data
+  };
+
+  // --- Attempt to parse data payload ---
+  if (event.data) {
+    try {
+      const parsedData = event.data.json();
+      console.log('[ServiceWorker] Push data:', parsedData);
+
+      // Use parsed data for notification and message
+      pushData = {
+        title: parsedData.title || pushData.title,
+        body: parsedData.body || pushData.body,
+        // IMPORTANT: Extract the action details sent from your backend
+        data: parsedData.data || pushData.data // Expecting { action: 'SingleClick', button: '...' }
+      };
+
+    } catch (e) {
+      console.error('[ServiceWorker] Error parsing push data:', e);
+      // Use default notification if parsing fails
+      pushData.body = event.data.text() || pushData.body; // Fallback to text
+    }
+  } else {
+    console.log('[ServiceWorker] Push event but no data');
+  }
+
+  // --- Send message to client(s) ---
+  const messagePayload = {
+    type: 'flic-action', // Custom message type
+    action: pushData.data.action, // e.g., 'SingleClick', 'DoubleClick', 'Hold'
+    button: pushData.data.button,  // e.g., the button name
+    timestamp: pushData.data.timestamp // e.g., the timestamp of the action
+  };
+
+  // Send message to all open PWA windows controlled by this SW
+  event.waitUntil(
+    self.clients.matchAll({
+      type: 'window', // Only target window clients
+      includeUncontrolled: true // Include clients that might not be fully controlled yet
+    }).then(clientList => {
+      if (!clientList || clientList.length === 0) {
+        console.log('[ServiceWorker] No client windows found to send message to.');
+        // If no window is open, we MUST show a notification
+        return self.registration.showNotification(pushData.title, {
+          body: pushData.body,
+          icon: '/icons/icon-192x192.png', // Optional: path to an icon
+          data: pushData.data // Pass data if needed when notification is clicked
+        });
+      }
+
+      // Post message to each client
+      let messageSent = false;
+      clientList.forEach(client => {
+        console.log(`[ServiceWorker] Posting message to client: ${client.id}`, messagePayload);
+        client.postMessage(messagePayload);
+        messageSent = true; // Mark that we at least tried to send a message
+      });
+
+      // Decide whether to still show a notification even if a window is open.
+      // Generally good practice unless you are SURE the app will handle it visibly.
+      // You might choose *not* to show a notification if a client was found and focused.
+      // For simplicity here, we'll still show one. Adjust as needed.
+      if (!messageSent) { // Only show notification if no message was sent? Or always show?
+        return self.registration.showNotification(pushData.title, {
+          body: pushData.body,
+          icon: '/icons/icon-192x192.png',
+          data: pushData.data
+        });
+      }
+    })
+  );
+
+  // --- Show a notification (Important!) ---
+  // Push notifications generally REQUIRE showing a notification to the user
+  // unless the PWA is already in the foreground AND handles the event visually.
+  // It's safer to always show one unless you have complex foreground detection.
+  /* This part is now handled inside the clients.matchAll promise */
+  /*
+  const notificationOptions = {
+      body: pushData.body,
+      icon: '/icons/icon-192x192.png', // Optional: path to an icon
+      data: pushData.data // Attach data if needed when notification is clicked
+  };
+  event.waitUntil(
+      self.registration.showNotification(pushData.title, notificationOptions)
+  );
+  */
+});
+
+// This helps with navigation after app is installed
+self.addEventListener('notificationclick', event => {
+  console.log('[ServiceWorker] Notification click received');
+  
+  event.notification.close();
+  
+  // Handle the notification click
+  event.waitUntil(
+    self.clients.matchAll({ type: 'window' })
+      .then(clientList => {
+        for (const client of clientList) {
+          if (client.url.startsWith(self.location.origin) && 'focus' in client) {
+            return client.focus();
+          }
+        }
+        
+        if (self.clients.openWindow) {
+          return self.clients.openWindow('/');
+        }
+      })
+  );
+});

timer.js

@@ -0,0 +1,99 @@
+// timer.js
+import * as state from './state.js';
+import { GAME_STATES } from './config.js';
+import audioManager from './audio.js';
+
+let timerInterval = null;
+let onTimerTickCallback = null; // Callback for UI updates
+let onPlayerSwitchCallback = null; // Callback for when player switches due to time running out
+let onGameOverCallback = null; // Callback for when all players run out of time
+
+export function initTimer(options) {
+    onTimerTickCallback = options.onTimerTick;
+    onPlayerSwitchCallback = options.onPlayerSwitch;
+    onGameOverCallback = options.onGameOver;
+}
+
+export function startTimer() {
+    if (timerInterval) clearInterval(timerInterval); // Clear existing interval if any
+
+    // Stop any previous sounds (like low time warning) before starting fresh
+    audioManager.stopAllSounds(); // Consider if this is too aggressive
+
+    timerInterval = setInterval(() => {
+        const currentPlayerIndex = state.getCurrentPlayerIndex();
+        const currentPlayer = state.getCurrentPlayer(); // Get player data after index
+
+        if (!currentPlayer) {
+             console.warn("Timer running but no current player found.");
+             stopTimer();
+             return;
+        }
+
+        // Only decrease time if the current player has time left
+        if (currentPlayer.remainingTime > 0) {
+            const newTime = currentPlayer.remainingTime - 1;
+            state.updatePlayerTime(currentPlayerIndex, newTime); // Update state
+
+            // Play timer sounds
+            audioManager.playTimerSound(newTime);
+
+            // Notify UI to update
+            if (onTimerTickCallback) onTimerTickCallback();
+
+        } else { // Current player's time just hit 0 or was already 0
+            // Ensure time is exactly 0 if it somehow went negative (unlikely with check above)
+             if(currentPlayer.remainingTime < 0) {
+                state.updatePlayerTime(currentPlayerIndex, 0);
+             }
+
+            // Stop this player's timer tick sound if it was playing
+            // audioManager.stop('timerTick'); // Or specific low time sound
+
+            // Play time expired sound (only once)
+            // Check if we just hit zero to avoid playing repeatedly
+            // This logic might be complex, audioManager could handle idempotency
+            if (currentPlayer.remainingTime === 0 && !currentPlayer.timeExpiredSoundPlayed) {
+                 audioManager.playTimerExpired();
+                 // We need a way to mark that the sound played for this player this turn.
+                 // This might require adding a temporary flag to the player state,
+                 // or handling it within the audioManager. Let's assume audioManager handles it for now.
+            }
+
+
+            // Check if the game should end or switch player
+            if (state.areAllTimersFinished()) {
+                stopTimer();
+                if (onGameOverCallback) onGameOverCallback();
+            } else {
+                // Find the *next* player who still has time
+                const nextPlayerIndex = state.findNextPlayerWithTime(); // This finds ANY player with time
+                if (nextPlayerIndex !== -1 && nextPlayerIndex !== currentPlayerIndex) {
+                     // Switch player
+                     if (onPlayerSwitchCallback) onPlayerSwitchCallback(nextPlayerIndex);
+                     // Play switch sound (might be handled in app.js based on state change)
+                     // audioManager.play('playerSwitch'); // Or let app.js handle sounds based on actions
+                     // Immediately update UI after switch
+                     if (onTimerTickCallback) onTimerTickCallback();
+                } else if (nextPlayerIndex === -1) {
+                    // This case shouldn't be reached if areAllTimersFinished is checked first, but as a safeguard:
+                    console.warn("Timer tick: Current player out of time, but no next player found, yet not all timers finished?");
+                    stopTimer(); // Stop timer if state is inconsistent
+                    if (onGameOverCallback) onGameOverCallback(); // Treat as game over
+                }
+                // If nextPlayerIndex is the same as currentPlayerIndex, means others are out of time, let this timer continue (or rather, stop ticking down as remainingTime is 0)
+            }
+        }
+    }, 1000);
+}
+
+export function stopTimer() {
+    clearInterval(timerInterval);
+    timerInterval = null;
+    // Optionally stop timer sounds here if needed
+    // audioManager.stop('timerTick');
+}
+
+export function isTimerRunning() {
+    return timerInterval !== null;
+}

ui.js

@@ -0,0 +1,286 @@
+// ui.js
+import * as state from './state.js';
+import { GAME_STATES, CSS_CLASSES } from './config.js';
+import audioManager from './audio.js';
+
+// --- DOM Elements ---
+export const elements = {
+    carousel: document.getElementById('carousel'),
+    gameButton: document.getElementById('gameButton'),
+    setupButton: document.getElementById('setupButton'),
+    addPlayerButton: document.getElementById('addPlayerButton'),
+    resetButton: document.getElementById('resetButton'),
+    playerModal: document.getElementById('playerModal'),
+    resetModal: document.getElementById('resetModal'),
+    playerForm: document.getElementById('playerForm'),
+    modalTitle: document.getElementById('modalTitle'),
+    playerNameInput: document.getElementById('playerName'),
+    playerTimeInput: document.getElementById('playerTime'),
+    playerImageInput: document.getElementById('playerImage'),
+    imagePreview: document.getElementById('imagePreview'),
+    playerTimeContainer: document.getElementById('playerTimeContainer'), // Parent of playerTimeInput
+    remainingTimeContainer: document.getElementById('remainingTimeContainer'),
+    playerRemainingTimeInput: document.getElementById('playerRemainingTime'),
+    deletePlayerButton: document.getElementById('deletePlayerButton'),
+    cancelButton: document.getElementById('cancelButton'), // Modal cancel
+    resetCancelButton: document.getElementById('resetCancelButton'),
+    resetConfirmButton: document.getElementById('resetConfirmButton'),
+    cameraButton: document.getElementById('cameraButton'),
+    // Camera elements needed by camera.js, but listed here for central management if desired
+    cameraContainer: document.getElementById('cameraContainer'),
+    cameraView: document.getElementById('cameraView'),
+    cameraCanvas: document.getElementById('cameraCanvas'),
+    cameraCaptureButton: document.getElementById('cameraCaptureButton'),
+    cameraCancelButton: document.getElementById('cameraCancelButton'),
+    // Header buttons container for sound toggle
+    headerButtons: document.querySelector('.header-buttons')
+};
+
+let isDragging = false;
+let startX = 0;
+let currentX = 0;
+let carouselSwipeHandler = null; // To store the bound function for removal
+
+// --- Rendering Functions ---
+
+export function renderPlayers() {
+    const players = state.getPlayers();
+    const currentIndex = state.getCurrentPlayerIndex();
+    const currentGameState = state.getGameState();
+    elements.carousel.innerHTML = '';
+
+    if (players.length === 0) {
+        // Optionally display a message if there are no players
+        elements.carousel.innerHTML = '<p style="text-align: center; width: 100%;">Add players to start</p>';
+        return;
+    }
+
+    players.forEach((player, index) => {
+        const card = document.createElement('div');
+        const isActive = index === currentIndex;
+        card.className = `player-card ${isActive ? CSS_CLASSES.ACTIVE_PLAYER : CSS_CLASSES.INACTIVE_PLAYER}`;
+
+        const minutes = Math.floor(player.remainingTime / 60);
+        const seconds = player.remainingTime % 60;
+        const timeString = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+
+        const timerClasses = [];
+        if (isActive && currentGameState === GAME_STATES.RUNNING) {
+            timerClasses.push(CSS_CLASSES.TIMER_ACTIVE);
+        }
+        if (player.remainingTime <= 0) {
+            timerClasses.push(CSS_CLASSES.TIMER_FINISHED);
+        }
+
+        card.innerHTML = `
+            <div class="player-image">
+                ${player.image ? `<img src="${player.image}" alt="${player.name}">` : '<i class="fas fa-user"></i>'}
+            </div>
+            <div class="player-name">${player.name}</div>
+            <div class="player-timer ${timerClasses.join(' ')}">${timeString}</div>
+        `;
+        elements.carousel.appendChild(card);
+    });
+
+    updateCarouselPosition();
+}
+
+export function updateCarouselPosition() {
+    const currentIndex = state.getCurrentPlayerIndex();
+    elements.carousel.style.transform = `translateX(${-100 * currentIndex}%)`;
+}
+
+export function updateGameButton() {
+    const currentGameState = state.getGameState();
+    switch (currentGameState) {
+        case GAME_STATES.SETUP:
+            elements.gameButton.textContent = 'Start Game';
+            break;
+        case GAME_STATES.RUNNING:
+            elements.gameButton.textContent = 'Pause Game';
+            break;
+        case GAME_STATES.PAUSED:
+            elements.gameButton.textContent = 'Resume Game';
+            break;
+        case GAME_STATES.OVER:
+            elements.gameButton.textContent = 'Game Over';
+            break;
+    }
+     // Disable button if less than 2 players in setup
+    elements.gameButton.disabled = currentGameState === GAME_STATES.SETUP && state.getPlayers().length < 2;
+}
+
+
+// --- Modal Functions ---
+
+export function showPlayerModal(isNewPlayer, player = null) {
+    const currentGameState = state.getGameState();
+    if (isNewPlayer) {
+        elements.modalTitle.textContent = 'Add New Player';
+        elements.playerNameInput.value = `Player ${state.getPlayers().length + 1}`;
+        elements.playerTimeInput.value = state.DEFAULT_PLAYER_TIME_SECONDS / 60; // Use default time
+        elements.remainingTimeContainer.style.display = 'none';
+        elements.imagePreview.innerHTML = '<i class="fas fa-user"></i>';
+        elements.deletePlayerButton.style.display = 'none';
+    } else if (player) {
+        elements.modalTitle.textContent = 'Edit Player';
+        elements.playerNameInput.value = player.name;
+        elements.playerTimeInput.value = player.timeInSeconds / 60;
+
+        if (currentGameState === GAME_STATES.PAUSED || currentGameState === GAME_STATES.OVER) {
+            elements.remainingTimeContainer.style.display = 'block';
+            const minutes = Math.floor(player.remainingTime / 60);
+            const seconds = player.remainingTime % 60;
+            elements.playerRemainingTimeInput.value = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+        } else {
+            elements.remainingTimeContainer.style.display = 'none';
+        }
+
+        elements.imagePreview.innerHTML = player.image ? `<img src="${player.image}" alt="${player.name}">` : '<i class="fas fa-user"></i>';
+        elements.deletePlayerButton.style.display = 'block';
+    }
+
+    // Reset file input and captured image data
+    elements.playerImageInput.value = '';
+    elements.playerImageInput.dataset.capturedImage = '';
+
+    elements.playerModal.classList.add(CSS_CLASSES.MODAL_ACTIVE);
+    audioManager.play('modalOpen');
+}
+
+export function hidePlayerModal() {
+    elements.playerModal.classList.remove(CSS_CLASSES.MODAL_ACTIVE);
+    audioManager.play('modalClose');
+    // Potentially call camera cleanup here if it wasn't done elsewhere
+}
+
+export function showResetModal() {
+    elements.resetModal.classList.add(CSS_CLASSES.MODAL_ACTIVE);
+    audioManager.play('modalOpen');
+}
+
+export function hideResetModal() {
+    elements.resetModal.classList.remove(CSS_CLASSES.MODAL_ACTIVE);
+    audioManager.play('modalClose');
+}
+
+export function updateImagePreviewFromFile(file) {
+    if (file) {
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            elements.imagePreview.innerHTML = `<img src="${event.target.result}" alt="Player Preview">`;
+            // Clear any previously captured image data if a file is selected
+            elements.playerImageInput.dataset.capturedImage = '';
+        };
+        reader.readAsDataURL(file);
+    }
+}
+
+export function updateImagePreviewFromDataUrl(dataUrl) {
+     elements.imagePreview.innerHTML = `<img src="${dataUrl}" alt="Player Preview">`;
+     // Store data URL and clear file input
+     elements.playerImageInput.dataset.capturedImage = dataUrl;
+     elements.playerImageInput.value = '';
+}
+
+
+// --- Carousel Touch Handling ---
+
+function handleTouchStart(e) {
+    startX = e.touches[0].clientX;
+    currentX = startX;
+    isDragging = true;
+    // Optional: Add a class to the carousel for visual feedback during drag
+    elements.carousel.style.transition = 'none'; // Disable transition during drag
+}
+
+function handleTouchMove(e) {
+    if (!isDragging) return;
+
+    currentX = e.touches[0].clientX;
+    const diff = currentX - startX;
+    const currentIndex = state.getCurrentPlayerIndex();
+    const currentTranslate = -100 * currentIndex + (diff / elements.carousel.offsetWidth * 100);
+
+    elements.carousel.style.transform = `translateX(${currentTranslate}%)`;
+}
+
+function handleTouchEnd(e) {
+    if (!isDragging) return;
+
+    isDragging = false;
+    elements.carousel.style.transition = ''; // Re-enable transition
+
+    const diff = currentX - startX;
+    const threshold = elements.carousel.offsetWidth * 0.1; // 10% swipe threshold
+
+    if (Math.abs(diff) > threshold) {
+        // Call the handler passed during initialization
+        if (carouselSwipeHandler) {
+            carouselSwipeHandler(diff < 0 ? 1 : -1); // Pass direction: 1 for next, -1 for prev
+        }
+    } else {
+        // Snap back if swipe wasn't enough
+        updateCarouselPosition();
+    }
+}
+
+// --- UI Initialization ---
+
+// Add sound toggle button
+function createSoundToggleButton() {
+    const soundButton = document.createElement('button');
+    soundButton.id = 'soundToggleButton';
+    soundButton.className = 'header-button';
+    soundButton.title = 'Toggle Sound';
+    soundButton.innerHTML = audioManager.muted ? '<i class="fas fa-volume-mute"></i>' : '<i class="fas fa-volume-up"></i>';
+
+    soundButton.addEventListener('click', () => {
+        const isMuted = audioManager.toggleMute();
+        soundButton.innerHTML = isMuted ? '<i class="fas fa-volume-mute"></i>' : '<i class="fas fa-volume-up"></i>';
+        if (!isMuted) audioManager.play('buttonClick'); // Feedback only when unmuting
+    });
+
+    elements.headerButtons.prepend(soundButton); // Add to the beginning
+}
+
+// Parse time string (MM:SS) to seconds - Helper needed for form processing
+export function parseTimeString(timeString) {
+    if (!/^\d{1,2}:\d{2}$/.test(timeString)) {
+        console.error('Invalid time format:', timeString);
+        return null; // Indicate error
+    }
+    const parts = timeString.split(':');
+    const minutes = parseInt(parts[0], 10);
+    const seconds = parseInt(parts[1], 10);
+     if (isNaN(minutes) || isNaN(seconds) || seconds > 59) {
+         console.error('Invalid time value:', timeString);
+         return null;
+     }
+    return (minutes * 60) + seconds;
+}
+
+// Sets up basic UI elements and listeners that primarily affect the UI itself
+export function initUI(options) {
+    // Store the swipe handler provided by app.js
+    carouselSwipeHandler = options.onCarouselSwipe;
+
+    createSoundToggleButton();
+
+    // Carousel touch events
+    elements.carousel.addEventListener('touchstart', handleTouchStart, { passive: true });
+    elements.carousel.addEventListener('touchmove', handleTouchMove, { passive: true });
+    elements.carousel.addEventListener('touchend', handleTouchEnd);
+
+    // Image file input preview
+    elements.playerImageInput.addEventListener('change', (e) => {
+        const file = e.target.files[0];
+        if (file) {
+            updateImagePreviewFromFile(file);
+        }
+    });
+
+    // Initial render
+    renderPlayers();
+    updateGameButton();
+}