import { loadSupabase } from 'supabaseClient'; import { FLAGS_DATA, getRandomCountries } from 'flags'; export class FlagGame { constructor() { this.supabase = null; this.currentQuestion = 0; this.totalQuestions = 30; this.timeLimit = 180; // 3 minutes in seconds this.timeRemaining = this.timeLimit; this.score = 0; this.correctAnswers = 0; this.gameStartTime = null; this.questionStartTime = null; this.gameTimer = null; this.isGameActive = false; this.currentCorrectAnswer = null; this.gameStats = []; this.leaderboard = []; this.LEADERBOARD_KEY = 'flagGameLeaderboard'; this.MAX_LEADERBOARD_ENTRIES = 10; this.difficulty = 'medium'; // Default difficulty this.difficultySettings = { easy: { options: 2, name: "Easy" }, medium: { options: 4, name: "Medium" }, hard: { options: 6, name: "Hard" }, facts: { options: 4, name: "Facts" } // Added facts mode }; this.initializeElements(); this.initializeSupabase(); // Initialize Supabase and then load leaderboard this.setupEventListeners(); } async initializeSupabase() { try { this.supabase = await loadSupabase(); console.log("Supabase client initialized successfully."); } catch (error) { console.error("Error initializing Supabase client:", error); // Leaderboard will use localStorage if Supabase fails or is not configured for write. } // Always attempt to load leaderboard, will use Supabase if available, otherwise localStorage. await this.loadLeaderboard(); } initializeElements() { this.elements = { startScreen: document.getElementById('start-screen'), gameArea: document.getElementById('game-area'), resultsScreen: document.getElementById('results-screen'), header: document.getElementById('header'), startBtn: document.getElementById('start-btn'), playAgainBtn: document.getElementById('play-again-btn'), questionCounter: document.querySelector('.counter-circle'), progressText: document.getElementById('progress-text'), timerBar: document.getElementById('timer-bar'), timerText: document.getElementById('timer-text'), scoreDisplay: document.getElementById('score-display'), flagDisplayContainer: document.getElementById('flag-display'), // Renamed for clarity currentFlagImg: document.getElementById('current-flag'), // Specific image element factTextDisplay: document.getElementById('fact-text-display'), currentFactText: document.getElementById('current-fact-text'), optionButtons: document.querySelectorAll('.option-btn'), finalScore: document.getElementById('final-score'), accuracyDisplay: document.getElementById('accuracy-display'), timeBonusDisplay: document.getElementById('time-bonus-display'), summaryStats: document.getElementById('summary-stats'), leaderboardList: document.getElementById('leaderboard-list'), nameInputContainer: document.getElementById('name-input-container'), playerNameInput: document.getElementById('player-name-input'), submitScoreBtn: document.getElementById('submit-score-btn'), showHighScoresBtn: document.getElementById('show-high-scores-btn'), highScoresView: document.getElementById('high-scores-view'), modalLeaderboardList: document.getElementById('modal-leaderboard-list'), closeHighScoresBtn: document.getElementById('close-high-scores-btn'), instructionsBtn: document.getElementById('instructions-btn'), instructionsView: document.getElementById('instructions-view'), closeInstructionsBtn: document.getElementById('close-instructions-btn'), difficultyRadios: document.querySelectorAll('input[name="difficulty"]'), dontShowInstructionsCheckbox: document.getElementById('dont-show-instructions-checkbox') }; } setupEventListeners() { this.elements.startBtn.addEventListener('click', () => this.startGame()); this.elements.playAgainBtn.addEventListener('click', () => this.resetGame()); this.elements.optionButtons.forEach(btn => { btn.addEventListener('click', (e) => this.handleAnswer(e.currentTarget)); }); this.elements.submitScoreBtn.addEventListener('click', () => this.submitLeaderboardScore()); this.elements.showHighScoresBtn.addEventListener('click', () => this.showHighScores()); this.elements.closeHighScoresBtn.addEventListener('click', () => this.hideHighScores()); this.elements.instructionsBtn.addEventListener('click', () => this.showInstructionsModal(false)); // Manual open this.elements.closeInstructionsBtn.addEventListener('click', () => this.handleCloseInstructions()); } showInstructionsModal(isAutomaticShowOnGameStart = false) { const preference = localStorage.getItem('flagGameShowInstructions'); if (isAutomaticShowOnGameStart && preference === 'true') { return; // User has opted out of showing on game start } // Set checkbox state based on preference when modal is shown this.elements.dontShowInstructionsCheckbox.checked = (preference === 'true'); this.elements.instructionsView.classList.remove('hidden'); } handleCloseInstructions() { const isChecked = this.elements.dontShowInstructionsCheckbox.checked; localStorage.setItem('flagGameShowInstructions', isChecked ? 'true' : 'false'); this.elements.instructionsView.classList.add('hidden'); } async showHighScores() { await this.loadLeaderboard(); // Ensure latest scores are loaded this.populateLeaderboardList(this.elements.modalLeaderboardList); this.elements.highScoresView.classList.remove('hidden'); } hideHighScores() { this.elements.highScoresView.classList.add('hidden'); } startGame() { this.elements.startScreen.classList.add('hidden'); this.elements.gameArea.classList.remove('hidden'); this.elements.header.classList.remove('hidden'); // Set difficulty based on selection const selectedRadio = Array.from(this.elements.difficultyRadios).find(radio => radio.checked); if (selectedRadio) { this.difficulty = selectedRadio.value; } // Toggle UI elements based on mode if (this.difficulty === 'facts') { this.elements.flagDisplayContainer.classList.add('hidden'); this.elements.factTextDisplay.classList.remove('hidden'); } else { this.elements.flagDisplayContainer.classList.remove('hidden'); this.elements.factTextDisplay.classList.add('hidden'); } this.isGameActive = true; this.gameStartTime = Date.now(); this.currentQuestion = 0; this.score = 0; this.correctAnswers = 0; this.gameStats = []; this.timeRemaining = this.timeLimit; this.startTimer(); this.generateQuestion(); this.showInstructionsModal(true); // Attempt to show instructions automatically on game start } startTimer() { this.gameTimer = setInterval(() => { this.timeRemaining--; this.updateTimerDisplay(); if (this.timeRemaining <= 0) { this.endGame(); } }, 1000); } updateTimerDisplay() { const minutes = Math.floor(this.timeRemaining / 60); const seconds = this.timeRemaining % 60; this.elements.timerText.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`; const progress = (this.timeRemaining / this.timeLimit) * 100; this.elements.timerBar.style.setProperty('--timer-width', `${progress}%`); } generateQuestion() { if (this.currentQuestion >= this.totalQuestions) { this.endGame(); return; } this.currentQuestion++; this.questionStartTime = Date.now(); // Get random correct answer const correctAnswer = FLAGS_DATA[Math.floor(Math.random() * FLAGS_DATA.length)]; this.currentCorrectAnswer = correctAnswer; // Determine number of options based on difficulty const numTotalOptions = this.difficultySettings[this.difficulty].options; const numWrongAnswers = numTotalOptions - 1; // Get random wrong answers const wrongAnswers = getRandomCountries(numWrongAnswers, correctAnswer); // Combine and shuffle options let options = [correctAnswer, ...wrongAnswers]; // Ensure we don't exceed the max number of options (especially if FLAGS_DATA is small) options = options.slice(0, numTotalOptions); options.sort(() => Math.random() - 0.5); // Update display based on mode if (this.difficulty === 'facts') { if (Array.isArray(correctAnswer.fact) && correctAnswer.fact.length > 0) { const randomFactIndex = Math.floor(Math.random() * correctAnswer.fact.length); this.elements.currentFactText.textContent = correctAnswer.fact[randomFactIndex]; } else if (typeof correctAnswer.fact === 'string') { // Fallback for old structure or single fact this.elements.currentFactText.textContent = correctAnswer.fact || "This country's fact is a mystery!"; } else { this.elements.currentFactText.textContent = "This country's fact is a mystery!"; } } else { this.elements.currentFlagImg.src = correctAnswer.flagUrl; this.elements.currentFlagImg.alt = `Flag of ${correctAnswer.name}`; // Accessibility: Add alt text } this.elements.questionCounter.textContent = this.currentQuestion; this.elements.progressText.textContent = `${this.currentQuestion} / ${this.totalQuestions}`; // Reset button states and set options this.elements.optionButtons.forEach((btn, index) => { if (index < numTotalOptions && options[index]) { // In "Facts" mode, options are flags (show image) // In other modes, options are country names btn.innerHTML = ''; // Clear previous content if (this.difficulty === 'facts') { const img = document.createElement('img'); img.src = options[index].flagUrl; img.alt = `Flag of ${options[index].name}`; img.style.width = '100%'; // Make image responsive within button img.style.height = 'auto'; img.style.maxHeight = '60px'; // Limit flag height within button img.style.objectFit = 'contain'; btn.appendChild(img); btn.classList.add('facts-mode-option'); } else { btn.textContent = options[index].name; btn.classList.remove('facts-mode-option'); } btn.dataset.country = options[index].name; btn.classList.remove('hidden'); } else { btn.classList.add('hidden'); // Hide unused buttons } btn.disabled = false; btn.classList.remove('correct', 'incorrect'); }); } handleAnswer(button) { if (!this.isGameActive) return; const selectedCountry = button.dataset.country; const isCorrect = selectedCountry === this.currentCorrectAnswer.name; const answerTime = (Date.now() - this.questionStartTime) / 1000; // Calculate score for this question let questionScore = 0; if (isCorrect) { this.correctAnswers++; questionScore = Math.max(0, Math.floor((16 - answerTime) * 100)); button.classList.add('correct'); } else { button.classList.add('incorrect'); // Highlight correct answer this.elements.optionButtons.forEach(btn => { if (btn.dataset.country === this.currentCorrectAnswer.name) { btn.classList.add('correct'); } }); } this.score += questionScore; this.gameStats.push({ question: this.currentQuestion, correct: isCorrect, answerTime: answerTime, score: questionScore }); // Disable all buttons this.elements.optionButtons.forEach(btn => btn.disabled = true); // Update score display this.elements.scoreDisplay.textContent = `Score: ${this.score}`; // Move to next question after delay setTimeout(() => { if (this.isGameActive) { this.generateQuestion(); } }, 1500); } endGame() { this.isGameActive = false; clearInterval(this.gameTimer); this.elements.gameArea.classList.add('hidden'); this.elements.header.classList.add('hidden'); this.elements.resultsScreen.classList.remove('hidden'); this.displayResults(); } displayResults() { const accuracy = ((this.correctAnswers / this.currentQuestion) * 100).toFixed(1); const totalTime = this.timeLimit - this.timeRemaining; const avgAnswerTime = this.gameStats.length > 0 ? (this.gameStats.reduce((sum, stat) => sum + stat.answerTime, 0) / this.gameStats.length).toFixed(1) : 0; this.elements.finalScore.textContent = `Final Score: ${this.score}`; this.elements.accuracyDisplay.textContent = `Accuracy: ${accuracy}% (${this.correctAnswers}/${this.currentQuestion})`; this.elements.timeBonusDisplay.textContent = `Average Answer Time: ${avgAnswerTime}s`; this.elements.summaryStats.innerHTML = `

Questions Answered: ${this.currentQuestion}

Time Played: ${Math.floor(totalTime / 60)}:${(totalTime % 60).toString().padStart(2, '0')}

Best Question Score: ${Math.max(...this.gameStats.map(s => s.score), 0)}

Difficulty: ${this.difficultySettings[this.difficulty].name}

`; this.populateLeaderboardList(this.elements.leaderboardList); if (this.checkIfQualifiesForLeaderboard(this.score)) { this.elements.nameInputContainer.classList.remove('hidden'); this.elements.playerNameInput.value = ''; this.elements.submitScoreBtn.disabled = false; } else { this.elements.nameInputContainer.classList.add('hidden'); } } async loadLeaderboard() { if (this.supabase) { try { const { data, error } = await this.supabase .from('leaderboard') .select('name, score') .order('score', { ascending: false }) .limit(this.MAX_LEADERBOARD_ENTRIES); if (error) { console.error('Error fetching leaderboard from Supabase:', error); this.loadLeaderboardFromLocalStorage(); // Fallback } else { this.leaderboard = data || []; console.log('Leaderboard loaded from Supabase:', this.leaderboard); } } catch (err) { console.error('Supabase fetch error:', err); this.loadLeaderboardFromLocalStorage(); // Fallback } } else { this.loadLeaderboardFromLocalStorage(); } } loadLeaderboardFromLocalStorage() { console.log('Loading leaderboard from localStorage.'); const storedLeaderboard = localStorage.getItem(this.LEADERBOARD_KEY); if (storedLeaderboard) { this.leaderboard = JSON.parse(storedLeaderboard); } else { this.leaderboard = []; } } // saveLeaderboard is effectively replaced by addScoreToLeaderboard's Supabase insert // and the localStorage fallback within addScoreToLeaderboard. async addScoreToLeaderboard(name, score) { const newEntry = { name, score, created_at: new Date().toISOString() }; if (this.supabase) { try { const { error } = await this.supabase .from('leaderboard') .insert([newEntry]); if (error) { console.error('Error saving score to Supabase:', error); this.addScoreToLocalLeaderboard(name, score, true); // Fallback to localStorage } else { console.log('Score saved to Supabase.'); // After successful insert, reload leaderboard from Supabase to get the latest sorted list await this.loadLeaderboard(); } } catch (err) { console.error('Supabase insert error:', err); this.addScoreToLocalLeaderboard(name, score, true); // Fallback to localStorage } } else { this.addScoreToLocalLeaderboard(name, score, true); } } addScoreToLocalLeaderboard(name, score, shouldSaveToLocalStorage = false) { this.leaderboard.push({ name, score }); this.leaderboard.sort((a, b) => b.score - a.score); this.leaderboard = this.leaderboard.slice(0, this.MAX_LEADERBOARD_ENTRIES); if (shouldSaveToLocalStorage) { localStorage.setItem(this.LEADERBOARD_KEY, JSON.stringify(this.leaderboard)); console.log('Score saved to localStorage (fallback).'); } } populateLeaderboardList(listElement) { listElement.innerHTML = ''; // Clear existing entries if (this.leaderboard.length === 0) { const li = document.createElement('li'); li.textContent = 'No scores yet. Be the first!'; listElement.appendChild(li); return; } this.leaderboard.forEach(entry => { const li = document.createElement('li'); li.textContent = `${entry.name}: ${entry.score}`; listElement.appendChild(li); }); } checkIfQualifiesForLeaderboard(score) { if (this.leaderboard.length < this.MAX_LEADERBOARD_ENTRIES) { return true; } return score > this.leaderboard[this.leaderboard.length - 1].score; } async submitLeaderboardScore() { const playerName = this.elements.playerNameInput.value.trim() || "Player"; // Default name if empty if (playerName.length > 0 && playerName.length <= 20) { await this.addScoreToLeaderboard(playerName, this.score); await this.loadLeaderboard(); // Re-fetch to ensure UI is updated with latest from Supabase this.populateLeaderboardList(this.elements.leaderboardList); // Changed to use the new helper this.elements.nameInputContainer.classList.add('hidden'); this.elements.submitScoreBtn.disabled = true; } else { alert("Please enter a name (1-20 characters)."); } } async resetGame() { this.elements.resultsScreen.classList.add('hidden'); this.elements.nameInputContainer.classList.add('hidden'); this.elements.playerNameInput.value = ''; this.elements.startScreen.classList.remove('hidden'); // Reset all game state this.currentQuestion = 0; this.score = 0; this.correctAnswers = 0; this.timeRemaining = this.timeLimit; this.gameStats = []; this.isGameActive = false; if (this.gameTimer) { clearInterval(this.gameTimer); } await this.loadLeaderboard(); // Ensure leaderboard is fresh for next game view } }