// Importy Firebase import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js"; import { getAuth, signInAnonymously, signInWithCustomToken } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js"; import { getFirestore, collection, addDoc, query, orderBy, limit, getDocs, setLogLevel } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js"; // --- KONFIGURACJA FIREBASE --- const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : { apiKey: "AIza...", authDomain: "...", projectId: "..." }; const appId = typeof __app_id !== 'undefined' ? __app_id : 'marvel-grammar-challenge'; const app = initializeApp(firebaseConfig); const auth = getAuth(app); const db = getFirestore(app); // setLogLevel('debug'); // Włącz logowanie do debugowania // --- UWIERZYTELNIANIE --- async function authenticateUser() { try { if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) { await signInWithCustomToken(auth, __initial_auth_token); } else { await signInAnonymously(auth); } } catch (error) { console.error("Błąd autentykacji:", error); } } authenticateUser(); // --- MISJE --- const missions = { stark: { name: 'Trening w Stark Tower', description: 'Skup się na rutynach i faktach z Present Simple.', tag: 'simple', color: 'hover:border-cyan-400'}, shield: { name: 'Misja S.H.I.E.L.D.', description: 'Opisuj akcje dziejące się w tej chwili z Present Continuous.', tag: 'continuous', color: 'hover:border-blue-500'}, infinity: { name: 'Wojna bez granic', description: 'Ostateczny test! Zmierz się z oboma czasami.', tag: 'all', color: 'hover:border-purple-500'} }; // --- BAZA PYTAŃ --- const questions = [ // Present Simple { type: 'translate', task: 'Przetłumacz', question: 'Tony Stark (pracuje) w swoim laboratorium każdego dnia.', answer: 'Tony Stark works in his lab every day.', explanation: 'Używamy Present Simple dla regularnych, powtarzających się czynności (rutyny). "Every day" jest typowym określeniem.', tags: ['simple'] }, { type: 'choice', task: 'Wybierz poprawną formę', question: 'Hulk sometimes ____ angry.', options: ['get', 'is getting', 'gets'], answer: 'gets', explanation: 'Present Simple używamy do opisywania cech i stanów, które są ogólnie prawdziwe.', tags: ['simple'] }, { type: 'error', task: 'Znajdź i popraw błąd', question: 'Captain America always fight for justice.', answer: 'fights', explanation: 'W 3. osobie liczby pojedynczej (He/She/It) do czasownika w Present Simple dodajemy końcówkę -s lub -es.', tags: ['simple'] }, { type: 'translate', task: 'Przetłumacz', question: 'Czy Thor (lubi) kawę?', answer: 'Does Thor like coffee?', explanation: 'Pytania w Present Simple tworzymy za pomocą operatora "do" lub "does" (dla 3 os. l.poj.).', tags: ['simple'] }, { type: 'choice', task: 'Wybierz poprawną formę', question: 'The Avengers ____ as a team.', options: ['works', 'work', 'are working'], answer: 'work', explanation: 'Nazwy grup, takie jak "The Avengers", traktujemy jako liczbę mnogą, więc czasownik nie ma końcówki -s.', tags: ['simple'] }, // Present Continuous { type: 'translate', task: 'Przetłumacz', question: 'Spójrz! Spider-Man (wspina się) po budynku.', answer: 'Look! Spider-Man is climbing a building.', explanation: 'Present Continuous opisuje czynności dziejące się dokładnie w momencie mówienia. "Look!" jest typowym sygnałem.', tags: ['continuous'] }, { type: 'error', task: 'Znajdź i popraw błąd', question: 'What are you do right now, Peter?', answer: 'doing', explanation: 'W Present Continuous po "to be" (am/is/are) czasownik zawsze ma końcówkę -ing.', tags: ['continuous'] }, { type: 'choice', task: 'Wybierz poprawną formę', question: 'Black Widow ____ on a secret mission this week.', options: ['is working', 'works', 'work'], answer: 'is working', explanation: 'Present Continuous może opisywać tymczasowe sytuacje, które trwają przez pewien okres (np. "this week").', tags: ['continuous'] }, { type: 'translate', task: 'Przetłumacz', question: 'Oni (nie grają) teraz w karty.', answer: "They aren't playing cards now.", explanation: 'Przeczenia w Present Continuous tworzymy dodając "not" po czasowniku "to be" (am not, isn\'t, aren\'t).', tags: ['continuous'] }, { type: 'error', task: 'Znajdź i popraw błąd', question: 'Why is Hawkeye trains so hard today?', answer: 'training', explanation: 'Pamiętaj o końcówce -ing w czasowniku w Present Continuous, nawet w pytaniach.', tags: ['continuous'] }, // Mieszane { type: 'choice', task: 'Wybierz poprawną formę', question: 'Listen! Someone ____ for help.', options: ['cries', 'is crying', 'cry'], answer: 'is crying', explanation: 'Słowo "Listen!" wskazuje na czynność dziejącą się teraz, więc używamy Present Continuous.', tags: ['simple', 'continuous'] }, { type: 'choice', task: 'Wybierz poprawną formę', question: 'I usually ____ my missions alone, but today I ____ with a partner.', options: ['do / work', 'am doing / work', 'do / am working'], answer: 'do / am working', explanation: 'Pierwsza część zdania to rutyna ("usually" - Present Simple), a druga to tymczasowa sytuacja ("today" - Present Continuous).', tags: ['simple', 'continuous'] }, { type: 'error', task: 'Znajdź i popraw błąd', question: 'She is knowing the secret code.', answer: 'knows', explanation: 'Czasowniki statyczne (stative verbs) jak "know", "like", "want", "understand" rzadko występują w formie ciągłej. Używamy z nimi Present Simple.', tags: ['simple', 'continuous'] }, { type: 'translate', task: 'Przetłumacz', question: 'On często nosi garnitur, ale dzisiaj ma na sobie strój Kapitana Ameryki.', answer: 'He often wears a suit, but today he is wearing the Captain America costume.', explanation: 'Połączenie rutyny ("often" - Present Simple) z czynnością tymczasową ("today" - Present Continuous).', tags: ['simple', 'continuous'] }, { type: 'choice', task: 'Wybierz poprawną formę', question: 'What ____ about? You look serious.', options: ['do you think', 'are you thinking', 'you think'], answer: 'are you thinking', explanation: 'Gdy "think" oznacza proces myślowy dziejący się teraz, używamy Present Continuous. Gdy oznacza opinię ("I think that..."), używamy Present Simple.', tags: ['simple', 'continuous'] }, ]; // --- ELEMENTY DOM --- const startScreen = document.getElementById('start-screen'); const gameScreen = document.getElementById('game-screen'); const endScreen = document.getElementById('end-screen'); const leaderboardScreen = document.getElementById('leaderboard-screen'); const playerNameInput = document.getElementById('player-name'); const scoreDisplay = document.getElementById('score'); const questionCounter = document.getElementById('question-counter'); const progressBar = document.getElementById('progress-bar'); const taskTypeLabel = document.getElementById('task-type-label'); const questionText = document.getElementById('question-text'); const answerArea = document.getElementById('answer-area'); const feedbackArea = document.getElementById('feedback-area'); const feedbackText = document.getElementById('feedback-text'); const explanationText = document.getElementById('explanation-text'); const nextQuestionBtn = document.getElementById('next-question-btn'); const finalScoreDisplay = document.getElementById('final-score'); const playAgainBtn = document.getElementById('play-again-btn'); const leaderboardBtn = document.getElementById('leaderboard-btn'); const leaderboardLoading = document.getElementById('leaderboard-loading'); const leaderboardTable = document.getElementById('leaderboard-table'); const leaderboardBody = document.getElementById('leaderboard-body'); const backToStartBtn = document.getElementById('back-to-start-btn'); // --- ZMIENNE STANU GRY --- let currentScore = 0; let currentQuestionIndex = 0; let playerName = "Bezimienny Bohater"; let shuffledQuestions = []; // --- LOGIKA GRY --- function startGame(missionTag) { playerName = playerNameInput.value.trim() || "Bezimienny Bohater"; if(playerName.length > 20) playerName = playerName.substring(0, 20); currentScore = 0; currentQuestionIndex = 0; if (missionTag === 'all') { shuffledQuestions = [...questions].sort(() => Math.random() - 0.5); } else { shuffledQuestions = questions.filter(q => q.tags.includes(missionTag)).sort(() => Math.random() - 0.5); } if (shuffledQuestions.length === 0) { // To się nie powinno zdarzyć z obecną konfiguracją, ale to dobre zabezpieczenie alert('Brak pytań dla wybranej misji!'); return; } scoreDisplay.textContent = `Punkty Mocy: ${currentScore}`; startScreen.classList.add('hidden'); endScreen.classList.add('hidden'); leaderboardScreen.classList.add('hidden'); gameScreen.classList.remove('hidden'); displayQuestion(); } function displayQuestion() { // Reset answerArea.innerHTML = ''; feedbackArea.classList.add('hidden'); nextQuestionBtn.classList.add('hidden'); const question = shuffledQuestions[currentQuestionIndex]; // Aktualizacja UI questionCounter.textContent = `Pytanie ${currentQuestionIndex + 1} / ${shuffledQuestions.length}`; const progress = ((currentQuestionIndex + 1) / shuffledQuestions.length) * 100; progressBar.style.width = `${progress}%`; taskTypeLabel.textContent = question.task; questionText.textContent = question.question; // Tworzenie pól odpowiedzi switch(question.type) { case 'translate': case 'error': const input = document.createElement('input'); input.type = 'text'; input.id = 'text-answer'; input.className = 'w-full bg-gray-700 p-3 rounded-lg border-2 border-gray-600 focus:border-cyan-400 focus:ring focus:ring-cyan-400 focus:ring-opacity-50 transition'; input.placeholder = 'Wpisz odpowiedź...'; input.setAttribute('style', 'color: #fb923c !important;'); answerArea.appendChild(input); input.addEventListener('keydown', (e) => { if (e.key === 'Enter') checkBtn.click(); }); break; case 'choice': question.options.forEach(option => { const button = document.createElement('button'); button.textContent = option; button.className = 'w-full bg-gray-600 text-white p-3 rounded-lg text-lg transition hover:bg-gray-700'; button.onclick = () => checkAnswer(option); answerArea.appendChild(button); }); return; // Wyjdź, bo przyciski mają własne eventy } const checkBtn = document.createElement('button'); checkBtn.textContent = 'SPRAWDŹ'; checkBtn.id = 'check-answer-btn'; checkBtn.className = 'w-full mt-4 bg-blue-600 text-white font-bold py-3 px-6 rounded-lg text-xl btn-marvel hover:bg-blue-700'; checkBtn.onclick = () => checkAnswer(document.getElementById('text-answer').value); answerArea.appendChild(checkBtn); } function checkAnswer(userAnswer) { const question = shuffledQuestions[currentQuestionIndex]; const isCorrect = userAnswer.trim().toLowerCase() === question.answer.toLowerCase(); // Zablokuj dalsze odpowiedzi Array.from(answerArea.children).forEach(child => child.disabled = true); if(document.getElementById('check-answer-btn')) { document.getElementById('check-answer-btn').remove(); } feedbackArea.classList.remove('hidden'); feedbackArea.classList.remove('correct-answer', 'wrong-answer'); void feedbackArea.offsetWidth; // Trigger reflow to restart animation if (isCorrect) { currentScore += 10; scoreDisplay.textContent = `Punkty Mocy: ${currentScore}`; feedbackText.textContent = 'DOSKONALE!'; feedbackArea.classList.add('correct-answer'); } else { feedbackText.textContent = 'BŁĄD!'; feedbackArea.classList.add('wrong-answer'); } explanationText.innerHTML = `Poprawna odpowiedź: ${question.answer}
${question.explanation}`; nextQuestionBtn.classList.remove('hidden'); } function nextQuestion() { currentQuestionIndex++; if (currentQuestionIndex < shuffledQuestions.length) { displayQuestion(); } else { endGame(); } } async function endGame() { gameScreen.classList.add('hidden'); endScreen.classList.remove('hidden'); finalScoreDisplay.textContent = currentScore; // Zapisz wynik w Firebase try { const leaderboardCol = collection(db, `artifacts/${appId}/public/data/leaderboard`); await addDoc(leaderboardCol, { playerName: playerName, score: currentScore, timestamp: new Date() }); } catch (error) { console.error("Błąd zapisu wyniku:", error); } } async function showLeaderboard() { startScreen.classList.add('hidden'); endScreen.classList.add('hidden'); leaderboardScreen.classList.remove('hidden'); leaderboardTable.classList.add('hidden'); leaderboardLoading.classList.remove('hidden'); leaderboardBody.innerHTML = ''; try { const leaderboardCol = collection(db, `artifacts/${appId}/public/data/leaderboard`); const q = query(leaderboardCol, orderBy("score", "desc"), limit(10)); const querySnapshot = await getDocs(q); let rank = 1; querySnapshot.forEach((doc) => { const data = doc.data(); const row = ` ${rank++} ${data.playerName} ${data.score} `; leaderboardBody.innerHTML += row; }); } catch (error) { console.error("Błąd odczytu rankingu: ", error); leaderboardBody.innerHTML = `Nie udało się załadować rankingu.`; } finally { leaderboardLoading.classList.add('hidden'); leaderboardTable.classList.remove('hidden'); } } function resetToStart() { endScreen.classList.add('hidden'); leaderboardScreen.classList.add('hidden'); startScreen.classList.remove('hidden'); playerNameInput.value = ''; // Ponowne włączenie ekranu wyboru misji może wymagać przeładowania, ale prostsze jest pozostawienie go } function setupMissionSelection() { const missionContainer = document.getElementById('mission-selection'); missionContainer.innerHTML = ''; // Wyczyść na wszelki wypadek for (const missionKey in missions) { const mission = missions[missionKey]; const missionCard = document.createElement('div'); missionCard.className = `p-4 bg-gray-700 rounded-lg border-2 border-gray-600 cursor-pointer transition transform hover:scale-105 ${mission.color}`; missionCard.innerHTML = `

${mission.name}

${mission.description}

`; missionCard.onclick = () => { if (playerNameInput.value.trim() === '') { playerNameInput.focus(); playerNameInput.classList.add('border-red-500'); setTimeout(() => playerNameInput.classList.remove('border-red-500'), 2000); return; } startGame(mission.tag); }; missionContainer.appendChild(missionCard); } } // --- EVENT LISTENERS --- // Inicjalizacja wyboru misji przy starcie setupMissionSelection(); nextQuestionBtn.addEventListener('click', nextQuestion); playAgainBtn.addEventListener('click', resetToStart); // Zmienione z startGame na reset, aby umożliwić wybór nowej misji leaderboardBtn.addEventListener('click', showLeaderboard); backToStartBtn.addEventListener('click', resetToStart); playerNameInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') { // Prosta logika, aby nie uruchamiać gry, ale zachęcić do kliknięcia misji document.getElementById('mission-selection').children[0].focus(); } });

MARVEL

Grammar Challenge

MISJA ZAKOŃCZONA!

NAJLEPSI BOHATEROWIE