<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FLIZ TYPER</title>
    <link rel="icon" href="icon.png">
    <link rel="stylesheet" href="styles.css">
    <style>
        @keyframes charFadeIn {
            0% {
                opacity: 0;
                transform: translateY(5px) scale(0.95);
            }
            50% {
                opacity: 0.5;
                transform: translateY(2px) scale(0.98);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        
        .animate-char {
            animation: charFadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            will-change: transform, opacity;
            backface-visibility: hidden;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id="results-modal" class="modal">
        <div class="modal-content">
            <h2>Результаты</h2>
            <p>Скорость: <span id="modal-wpm">0</span> сл/мин</p>
            <p>Точность: <span id="modal-accuracy">0</span>%</p>
            <button onclick="closeModal()">Вернуться на главную</button>
        </div>
    </div>

    <h1>FLIZ TYPER</h1>
    <div id="time-options">
        <button onclick="setTimeLimit(15)" class="time-btn">15 сек</button>
        <button onclick="setTimeLimit(30)" class="time-btn">30 сек</button>
        <button onclick="setTimeLimit(60)" class="time-btn">60 сек</button>
        <button onclick="setTimeLimit(0)" class="time-btn active">∞</button>
    </div>
    <div id="timer">Время: <span id="time-left">∞</span></div>
    <div class="text-container">
        <div id="text-display"></div>
    </div>
    <div id="stats">
        <span>Скорость: <span id="wpm">0</span> сл/мин</span>
        <span>Точность: <span id="accuracy">0</span>%</span>
    </div>
    <button onclick="resetTest()">Начать заново</button>

    <script>
        // Запрещаем выделение текста через Ctrl+A
        document.addEventListener('keydown', function(e) {
            if (e.ctrlKey && (e.key === 'a' || e.key === 'A')) {
                e.preventDefault();
            }
        });

        const words = [
            // Легкие слова (75%)
            'дом', 'кот', 'мир', 'сон', 'лес', 'мяч', 'сад', 'дым', 'мед', 'рот',
            'нос', 'год', 'век', 'пол', 'сыр', 'суп', 'мел', 'бег', 'пар', 'сок',
            'мама', 'папа', 'небо', 'вода', 'лето', 'зима', 'рука', 'нога', 'глаз', 'день',
            'ночь', 'стол', 'стул', 'окно', 'дверь', 'книга', 'ручка', 'лампа', 'часы', 'хлеб',
            'река', 'поле', 'трава', 'цвет', 'лист', 'снег', 'дождь', 'ветер', 'песок', 'море',
            'луна', 'утро', 'весна', 'осень', 'птица', 'рыба', 'волк', 'заяц', 'слон', 'тигр',
            'игра', 'песня', 'танец', 'смех', 'друг', 'брат', 'мечта', 'свет', 'тень', 'путь',
            'парк', 'сила', 'школа', 'класс', 'урок', 'буква', 'слово', 'фраза', 'голос', 'звук',
            
            // Средние слова (20%)
            'солнце', 'радуга', 'облако', 'звезда', 'планета', 'космос', 'галактика', 'комета',
            'машина', 'самолет', 'корабль', 'поезд', 'автобус', 'трамвай', 'метро', 'такси',
            'компьютер', 'телефон', 'планшет', 'ноутбук', 'интернет', 'программа', 'система',
            'музыка', 'картина', 'скульптура', 'театр', 'кино', 'концерт', 'выставка', 'музей',
            'праздник', 'подарок', 'сюрприз', 'радость', 'счастье', 'любовь', 'дружба', 'семья',
        ];
        
        let currentText = '';
        let typedText = '';
        let startTime = Date.now();
        let isTestActive = false;
        let timeLimit = 0; // 0 означает бесконечный режим
        let timerInterval;
        let timeLeft;
        let isTestFinished = false;
        let currentWords = [];
        let isAddingWords = false; // Флаг для предотвращения множественного добавления слов
        let lastTypedIndex = -1;
        let updateDisplayTimeout = null;

        const textDisplay = document.getElementById('text-display');
        const wpmDisplay = document.getElementById('wpm');
        const accuracyDisplay = document.getElementById('accuracy');
        const timeLeftDisplay = document.getElementById('time-left');
        const modal = document.getElementById('results-modal');
        const modalWpm = document.getElementById('modal-wpm');
        const modalAccuracy = document.getElementById('modal-accuracy');

        function showModal() {
            const finalWpm = calculateWPM();
            const finalAccuracy = calculateAccuracy();
            
            localStorage.setItem('lastWpm', finalWpm);
            localStorage.setItem('lastAccuracy', finalAccuracy);
            
            location.reload();
        }

        window.onload = function() {
            const lastWpm = localStorage.getItem('lastWpm');
            const lastAccuracy = localStorage.getItem('lastAccuracy');
            
            if (lastWpm && lastAccuracy) {
                modal.style.display = 'block';
                modalWpm.textContent = lastWpm;
                modalAccuracy.textContent = lastAccuracy;
                
                localStorage.removeItem('lastWpm');
                localStorage.removeItem('lastAccuracy');
            }
        }

        function closeModal() {
            modal.style.display = 'none';
            resetTest();
        }

        function setTimeLimit(seconds) {
            timeLimit = seconds;
            document.querySelectorAll('.time-btn').forEach(btn => btn.classList.remove('active'));
            event.target.classList.add('active');
            resetTest();
        }

        function updateTimer() {
            if (timeLimit === 0) {
                timeLeftDisplay.textContent = '∞';
                return;
            }

            timeLeft = Math.max(0, timeLimit - Math.floor((Date.now() - startTime) / 1000));
            timeLeftDisplay.textContent = timeLeft + ' сек';

            if (timeLeft === 0) {
                isTestFinished = true;
                wpmDisplay.textContent = calculateWPM();
                accuracyDisplay.textContent = calculateAccuracy();
                showModal();
            }
        }

        function getRandomText() {
            const wordCount = 20;
            const randomWords = Array.from({length: wordCount}, () => words[Math.floor(Math.random() * words.length)]);
            return randomWords.join(' ');
        }

        function updateDisplay() {
            if (!currentText) return;
            
            if (updateDisplayTimeout) {
                cancelAnimationFrame(updateDisplayTimeout);
            }
            
            updateDisplayTimeout = requestAnimationFrame(() => {
                let displayHtml = '';
                for (let i = 0; i < currentText.length; i++) {
                    const char = currentText[i];
                    if (i < typedText.length) {
                        const isCorrect = typedText[i] === char;
                        const className = isCorrect ? 'correct' : 'incorrect';
                        const animateClass = i === typedText.length - 1 ? ' animate-char' : '';
                        displayHtml += `<span class="${className}${animateClass}">${char}</span>`;
                    } else {
                        displayHtml += `<span class="untyped">${char}</span>`;
                    }
                }
                
                textDisplay.innerHTML = displayHtml;
                lastTypedIndex = typedText.length - 1;
                
                const cursorPosition = typedText.length;
                const spans = textDisplay.getElementsByTagName('span');
                
                const cursor = document.createElement('div');
                cursor.className = 'cursor';
                if (spans.length > 0 && cursorPosition < spans.length) {
                    const currentSpan = spans[cursorPosition];
                    cursor.style.left = currentSpan.offsetLeft + 'px';
                    cursor.style.top = currentSpan.offsetTop + 'px';
                    textDisplay.appendChild(cursor);
                }

                // Проверяем, достиг ли пользователь предпоследнего слова
                const typedWords = typedText.trim().split(/\s+/).length;
                const totalWords = currentText.trim().split(/\s+/).length;
                if (typedWords >= totalWords - 5 && !isAddingWords) {
                    addNewWords();
                }
                
                updateDisplayTimeout = null;
            });
        }

        function calculateWPM() {
            const timeElapsed = (Date.now() - startTime) / 1000 / 60;
            const wordsTyped = typedText.trim().split(/\s+/).length;
            return Math.round(wordsTyped / timeElapsed);
        }

        function calculateAccuracy() {
            let correct = 0;
            for (let i = 0; i < typedText.length; i++) {
                if (typedText[i] === currentText[i]) {
                    correct++;
                }
            }
            return Math.round((correct / typedText.length) * 100) || 0;
        }

        function resetTest() {
            currentText = getRandomText();
            typedText = '';
            isTestActive = false;
            isTestFinished = false;
            isAddingWords = false;
            lastTypedIndex = -1;
            startTime = Date.now();
            clearInterval(timerInterval);
            if (updateDisplayTimeout) {
                cancelAnimationFrame(updateDisplayTimeout);
            }
            updateDisplay();
            wpmDisplay.textContent = '0';
            accuracyDisplay.textContent = '0';
            if (timeLimit > 0) {
                timeLeft = timeLimit;
                timeLeftDisplay.textContent = timeLimit + ' сек';
            } else {
                timeLeftDisplay.textContent = '∞';
            }
        }

        function addNewWords() {
            if (isAddingWords) return; // Предотвращаем множественные вызовы
            isAddingWords = true;
            
            const newWords = getRandomText();
            const newWordsContainer = document.createElement('div');
            newWordsContainer.className = 'new-words';
            newWordsContainer.style.opacity = '0';
            newWordsContainer.style.transition = 'opacity 0.3s'; // Уменьшил время перехода
            
            let displayHtml = '';
            for (let i = 0; i < newWords.length; i++) {
                displayHtml += `<span class="untyped">${newWords[i]}</span>`;
            }
            newWordsContainer.innerHTML = displayHtml;
            
            textDisplay.appendChild(newWordsContainer);
            
            requestAnimationFrame(() => {
                newWordsContainer.style.opacity = '1';
            });
            
            currentText += ' ' + newWords;
            
            // Сбрасываем флаг после небольшой задержки
            setTimeout(() => {
                isAddingWords = false;
            }, 500); // Уменьшил время задержки
        }

        document.addEventListener('keydown', (e) => {
            if (isTestFinished) return;
            
            if (e.key.length === 1) {
                if (!isTestActive) {
                    isTestActive = true;
                    startTime = Date.now();
                    if (timeLimit > 0) {
                        timerInterval = setInterval(updateTimer, 1000);
                    }
                }

                typedText += e.key;
                updateDisplay();

                wpmDisplay.textContent = calculateWPM();
                accuracyDisplay.textContent = calculateAccuracy();
                
                if (timeLimit > 0 && timeLeft === 0) {
                    showModal();
                }
            } else if (e.key === 'Backspace') {
                typedText = typedText.slice(0, -1);
                updateDisplay();
                wpmDisplay.textContent = calculateWPM();
                accuracyDisplay.textContent = calculateAccuracy();
            }
        });

        resetTest();

        // Добавляем копирайт
        const copyright = document.createElement('div');
        copyright.style.position = 'fixed';
        copyright.style.bottom = '10px';
        copyright.style.left = '50%';
        copyright.style.transform = 'translateX(-50%)';
        copyright.style.color = '#666';
        copyright.style.fontSize = '14px';
        copyright.style.textAlign = 'center';
        copyright.innerHTML = `
            <p>© 2025 <a href="https://t.me/flizmatick" target="_blank" style="color: #ff3333; text-decoration: none;">@flizmatick</a></p>
            <p style="font-size: 12px;">Все права защищены. Копирование материалов запрещено.</p>
        `;
        document.body.appendChild(copyright);

        // Запрещаем копирование
        document.addEventListener('contextmenu', e => e.preventDefault());
        document.addEventListener('selectstart', e => e.preventDefault());
        document.addEventListener('copy', e => e.preventDefault());
    </script>
</body>
</html>
