lorem_ipsum/js/play.js

(function() {
    // --- Konfiguration ---
    const GAME_TEXT = "Der schnelle braune Fuchs springt über den faulen Hund. Programmieren ist wie Zaubern, nur mit mehr Kaffee und weniger Magie. Wer rastet, der rostet, aber wer codet, der lebt.";
    const MEMORIZE_TIME_SECONDS = 15; 

    let timerInterval;
    let currentTime = 0;

    // --- DOM Elemente holen ---
    const phaseStart = document.getElementById('phaseStart');
    const phaseMemorize = document.getElementById('phaseMemorize');
    const phaseInput = document.getElementById('phaseInput');
    const phaseResult = document.getElementById('phaseResult');
    
    const targetTextDisplay = document.getElementById('targetTextDisplay');
    const timerDisplay = document.getElementById('timerDisplay');
    const userTextInput = document.getElementById('userTextInput');
    const resultScore = document.getElementById('resultScore');
    const resultOriginal = document.getElementById('resultOriginal');
    const resultInput = document.getElementById('resultInput');
    const gameStatus = document.getElementById('gameStatus');

    // Buttons
    const btnStart = document.getElementById('btnStartGame');
    const btnSubmit = document.getElementById('btnSubmitScore');
    const btnRestart = document.getElementById('btnRestart');
    const btnLeaderboard = document.getElementById('btnLeaderboard');

    // --- Event Listener registrieren ---
    if (btnStart) btnStart.addEventListener('click', startGame);
    if (btnSubmit) btnSubmit.addEventListener('click', submitScore);
    if (btnRestart) btnRestart.addEventListener('click', () => location.reload());
    if (btnLeaderboard) btnLeaderboard.addEventListener('click', () => {
        const navLink = document.getElementById('nav-leaderboard');
        if (navLink) {
            navLink.click(); // Simuliert Klick auf Sidebar-Link
        } else {
            console.warn("Sidebar Link #nav-leaderboard nicht gefunden.");
        }
    });

    // --- Funktionen ---

    function startGame() {
        if (!phaseStart || !phaseMemorize) return;

        // UI umschalten
        phaseStart.classList.add('d-none');
        phaseMemorize.classList.remove('d-none');
        
        if(gameStatus) {
            gameStatus.textContent = "Lernphase";
            gameStatus.className = "badge fs-6 px-3 py-2";
            gameStatus.style.backgroundColor = "#ffd166";
            gameStatus.style.color = "#1b1b2f";
        }
        
        if(targetTextDisplay) targetTextDisplay.textContent = GAME_TEXT;
        
        // Timer starten
        currentTime = MEMORIZE_TIME_SECONDS;
        if(timerDisplay) timerDisplay.textContent = currentTime;
        
        timerInterval = setInterval(() => {
            currentTime--;
            if(timerDisplay) timerDisplay.textContent = currentTime;
            
            if (currentTime <= 0) {
                endMemorizePhase();
            }
        }, 1000);
    }

    function endMemorizePhase() {
        clearInterval(timerInterval);
        
        if (!phaseMemorize || !phaseInput) return;

        // UI umschalten
        phaseMemorize.classList.add('d-none');
        phaseInput.classList.remove('d-none');
        
        if(gameStatus) {
            gameStatus.textContent = "Eingabe";
            gameStatus.className = "badge fs-6 px-3 py-2";
            gameStatus.style.backgroundColor = "#4a6fa5";
            gameStatus.style.color = "#fff";
        }
        
        if(userTextInput) {
            userTextInput.value = ""; 
            userTextInput.focus();
        }
    }

    function calculateScore(original, input) {
        if (!original || !input) return 0;

        // Bereinigung: Kleinbuchstaben, Satzzeichen entfernen, in Arrays aufteilen
        const cleanOriginal = original.toLowerCase().replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,"").split(/\s+/).filter(w => w.length > 0);
        const cleanInput = input.toLowerCase().replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,"").split(/\s+/).filter(w => w.length > 0);

        let correctWords = 0;
        const limit = Math.min(cleanOriginal.length, cleanInput.length);
        
        for (let i = 0; i < limit; i++) {
            if (cleanInput[i] === cleanOriginal[i]) {
                correctWords++;
            }
        }

        return correctWords;
    }

    function submitScore() {
        if (!userTextInput) return;
        
        const userInput = userTextInput.value.trim();
        if (!userInput) {
            alert("Bitte geben Sie einen Text ein.");
            return;
        }

        const score = calculateScore(GAME_TEXT, userInput);
        
        // Ergebnis anzeigen
        if (phaseInput) phaseInput.classList.add('d-none');
        if (phaseResult) phaseResult.classList.remove('d-none');
        
        if(gameStatus) {
            gameStatus.textContent = "Abgeschlossen";
            gameStatus.className = "badge fs-6 px-3 py-2";
            gameStatus.style.backgroundColor = "#28a745";
            gameStatus.style.color = "#fff";
        }
        
        if (resultScore) resultScore.textContent = score;
        if (resultOriginal) resultOriginal.textContent = GAME_TEXT;
        if (resultInput) resultInput.textContent = userInput;

        // --- API Aufruf vorbereiten ---
        const scoreData = {
            score: score,
            time: MEMORIZE_TIME_SECONDS,
            text: GAME_TEXT,
            userWrittenText: userInput
        };

        console.log("Score bereit zum Senden:", scoreData);
        
        // HIER Ihren Service Aufruf einfügen, z.B.:
        // if (typeof window.ScoreService !== 'undefined') {
        //     window.ScoreService.post(scoreData);
        // }
    }

})();