Delete static

static/css/style.css

@@ -1,542 +0,0 @@
-:root {
-    --primary-color: #1a1a2e;
-    --secondary-color: #16213e;
-    --accent-color: #0f3460;
-    --text-color: #e94560;
-    --light-text: #f8f8f8;
-    --error-color: #ff0000;
-    --success-color: #00ff00;
-}
-
-body {
-    font-family: 'Press Start 2P', cursive, sans-serif;
-    background-color: var(--primary-color);
-    color: var(--light-text);
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    overflow-x: hidden;
-}
-
-.container {
-    width: 90%;
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
-}
-
-header {
-    background-color: var(--secondary-color);
-    padding: 20px 0;
-    text-align: center;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-}
-
-header h1 {
-    margin: 0;
-    color: var(--text-color);
-    font-size: 2.5rem;
-    text-transform: uppercase;
-    letter-spacing: 3px;
-    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
-}
-
-nav {
-    display: flex;
-    justify-content: center;
-    margin-top: 20px;
-}
-
-nav a {
-    color: var(--light-text);
-    text-decoration: none;
-    margin: 0 15px;
-    padding: 10px 15px;
-    border: 2px solid var(--accent-color);
-    border-radius: 5px;
-    transition: all 0.3s ease;
-}
-
-nav a:hover {
-    background-color: var(--accent-color);
-    transform: translateY(-3px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-}
-
-main {
-    flex: 1;
-    padding: 40px 0;
-}
-
-.game-container {
-    background-color: var(--secondary-color);
-    border-radius: 10px;
-    padding: 30px;
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
-    margin-bottom: 30px;
-}
-
-.text-display {
-    font-size: 1.5rem;
-    line-height: 2;
-    margin-bottom: 30px;
-    padding: 20px;
-    background-color: var(--primary-color);
-    border-radius: 8px;
-    border: 2px solid var(--accent-color);
-    white-space: pre-wrap;
-}
-
-.text-display span {
-    position: relative;
-}
-
-.text-display span.correct {
-    color: var(--success-color);
-}
-
-.text-display span.incorrect {
-    color: var(--error-color);
-    text-decoration: underline;
-}
-
-.text-display span.current {
-    background-color: var(--accent-color);
-}
-
-.input-area {
-    width: 100%;
-    margin-bottom: 20px;
-}
-
-.input-area textarea {
-    width: 100%;
-    padding: 15px;
-    font-size: 1.2rem;
-    background-color: var(--primary-color);
-    color: var(--light-text);
-    border: 2px solid var(--accent-color);
-    border-radius: 8px;
-    resize: none;
-    font-family: 'Courier New', monospace;
-}
-
-.input-area textarea:focus {
-    outline: none;
-    border-color: var(--text-color);
-    box-shadow: 0 0 10px rgba(233, 69, 96, 0.5);
-}
-
-.stats {
-    display: flex;
-    justify-content: space-around;
-    margin-top: 20px;
-    padding: 15px;
-    background-color: var(--primary-color);
-    border-radius: 8px;
-    border: 2px solid var(--accent-color);
-}
-
-.stat-box {
-    text-align: center;
-    padding: 10px;
-}
-
-.stat-box h3 {
-    margin: 0;
-    color: var(--text-color);
-    font-size: 1rem;
-}
-
-.stat-box p {
-    font-size: 1.5rem;
-    margin: 10px 0 0;
-}
-
-.btn {
-    background-color: var(--accent-color);
-    color: var(--light-text);
-    border: none;
-    padding: 12px 25px;
-    font-size: 1rem;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    font-family: 'Press Start 2P', cursive, sans-serif;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-}
-
-.btn:hover {
-    background-color: var(--text-color);
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-}
-
-.btn:active {
-    transform: translateY(0);
-    box-shadow: none;
-}
-
-.btn-primary {
-    background-color: var(--text-color);
-}
-
-.btn-secondary {
-    background-color: var(--accent-color);
-}
-
-.result-container {
-    text-align: center;
-    padding: 30px;
-    background-color: var(--secondary-color);
-    border-radius: 10px;
-    display: none;
-}
-
-.result-container h2 {
-    color: var(--text-color);
-    margin-bottom: 20px;
-}
-
-.result-details {
-    display: flex;
-    justify-content: space-around;
-    margin-bottom: 30px;
-}
-
-.result-box {
-    text-align: center;
-    padding: 15px;
-    background-color: var(--primary-color);
-    border-radius: 8px;
-    width: 30%;
-}
-
-.result-box h3 {
-    margin: 0;
-    color: var(--text-color);
-}
-
-.result-box p {
-    font-size: 2rem;
-    margin: 10px 0 0;
-}
-
-.overseer {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 300px;
-    height: 450px;
-    background-image: url('/static/images/overseer.svg');
-    background-size: contain;
-    background-repeat: no-repeat;
-    display: none;
-    z-index: 100;
-    filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.7));
-}
-
-.overseer.show {
-    display: block;
-    animation: overseerAppear 1.5s ease-in-out forwards;
-}
-
-@keyframes overseerAppear {
-    0% { 
-        opacity: 0;
-        transform: translate(-50%, -50%) scale(0.5);
-    }
-    50% { 
-        opacity: 1;
-        transform: translate(-50%, -50%) scale(1.2);
-    }
-    70% { 
-        transform: translate(-50%, -50%) scale(1);
-    }
-    85% { 
-        transform: translate(-50%, -50%) rotate(-5deg);
-    }
-    100% { 
-        transform: translate(-50%, -50%) rotate(0deg);
-    }
-}
-
-.gunshot {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(255, 0, 0, 0.7);
-    display: none;
-    z-index: 99;
-    animation: bloodFlash 0.5s ease-out;
-}
-
-@keyframes bloodFlash {
-    0% { 
-        opacity: 0;
-    }
-    50% { 
-        opacity: 1;
-    }
-    100% { 
-        opacity: 0;
-    }
-}
-
-.blood-splatter {
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    z-index: 98;
-    pointer-events: none;
-    display: none;
-}
-
-.blood-splatter.show {
-    display: block;
-}
-
-.blood-drop {
-    position: absolute;
-    background-color: #800;
-    border-radius: 50%;
-    animation: drip 2s ease-in infinite;
-}
-
-@keyframes drip {
-    0% {
-        transform: translateY(0) scale(1);
-    }
-    80% {
-        transform: translateY(300px) scale(1.5);
-        opacity: 1;
-    }
-    100% {
-        transform: translateY(350px) scale(1);
-        opacity: 0;
-    }
-}
-
-.muzzle-flash, .muzzle-flash-inner {
-    opacity: 0;
-}
-
-.overseer.firing .muzzle-flash {
-    opacity: 1;
-    animation: flash 0.3s ease-out;
-}
-
-.overseer.firing .muzzle-flash-inner {
-    opacity: 1;
-    animation: flash 0.2s ease-out;
-}
-
-@keyframes flash {
-    0% { 
-        opacity: 0;
-        transform: scale(0.5);
-    }
-    50% { 
-        opacity: 1;
-        transform: scale(1.5);
-    }
-    100% { 
-        opacity: 0;
-        transform: scale(0.8);
-    }
-}
-
-.death-message {
-    position: fixed;
-    top: 40%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 3rem;
-    color: #ff0000;
-    text-shadow: 0 0 10px #000;
-    z-index: 101;
-    opacity: 0;
-    font-family: 'Press Start 2P', cursive;
-    text-transform: uppercase;
-    display: none;
-}
-
-.death-message.show {
-    display: block;
-    animation: messageAppear 2s ease-in-out forwards;
-}
-
-@keyframes messageAppear {
-    0% {
-        opacity: 0;
-        transform: translate(-50%, -50%) scale(0.5);
-    }
-    50% {
-        opacity: 1;
-        transform: translate(-50%, -50%) scale(1.2);
-    }
-    100% {
-        opacity: 1;
-        transform: translate(-50%, -50%) scale(1);
-    }
-}
-
-.multiplayer-container {
-    background-color: var(--secondary-color);
-    border-radius: 10px;
-    padding: 30px;
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
-}
-
-.room-form {
-    margin-bottom: 30px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.room-form input {
-    width: 100%;
-    max-width: 400px;
-    padding: 12px;
-    margin-bottom: 15px;
-    background-color: var(--primary-color);
-    color: var(--light-text);
-    border: 2px solid var(--accent-color);
-    border-radius: 5px;
-    font-family: 'Press Start 2P', cursive, sans-serif;
-}
-
-.players-list {
-    margin-top: 30px;
-}
-
-.player-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 15px;
-    margin-bottom: 10px;
-    background-color: var(--primary-color);
-    border-radius: 5px;
-    border-left: 5px solid var(--accent-color);
-}
-
-.player-name {
-    font-weight: bold;
-    color: var(--text-color);
-}
-
-.player-progress {
-    width: 60%;
-    height: 20px;
-    background-color: var(--primary-color);
-    border: 2px solid var(--accent-color);
-    border-radius: 10px;
-    overflow: hidden;
-}
-
-.progress-bar {
-    height: 100%;
-    background-color: var(--text-color);
-    width: 0%;
-    transition: width 0.3s ease;
-}
-
-.player-stats {
-    display: flex;
-    gap: 15px;
-}
-
-.leaderboard-container {
-    background-color: var(--secondary-color);
-    border-radius: 10px;
-    padding: 30px;
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
-}
-
-.leaderboard-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: 20px;
-}
-
-.leaderboard-table th, .leaderboard-table td {
-    padding: 15px;
-    text-align: left;
-    border-bottom: 2px solid var(--accent-color);
-}
-
-.leaderboard-table th {
-    background-color: var(--accent-color);
-    color: var(--light-text);
-    text-transform: uppercase;
-}
-
-.leaderboard-table tr:nth-child(even) {
-    background-color: var(--primary-color);
-}
-
-.leaderboard-table tr:hover {
-    background-color: var(--accent-color);
-}
-
-footer {
-    background-color: var(--secondary-color);
-    text-align: center;
-    padding: 20px 0;
-    margin-top: auto;
-}
-
-footer p {
-    margin: 0;
-    color: var(--light-text);
-    font-size: 0.8rem;
-}
-
-@media (max-width: 768px) {
-    header h1 {
-        font-size: 1.8rem;
-    }
-    
-    nav {
-        flex-direction: column;
-        align-items: center;
-    }
-    
-    nav a {
-        margin: 5px 0;
-        width: 80%;
-        text-align: center;
-    }
-    
-    .text-display {
-        font-size: 1.2rem;
-    }
-    
-    .stats {
-        flex-direction: column;
-    }
-    
-    .stat-box {
-        margin-bottom: 10px;
-    }
-    
-    .result-details {
-        flex-direction: column;
-        align-items: center;
-    }
-    
-    .result-box {
-        width: 80%;
-        margin-bottom: 15px;
-    }
-}

static/js/game.js

@@ -1,260 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
-    // Элементы DOM
-    const textDisplay = document.getElementById('textDisplay');
-    const inputArea = document.getElementById('inputArea');
-    const wpmDisplay = document.getElementById('wpm');
-    const accuracyDisplay = document.getElementById('accuracy');
-    const timeDisplay = document.getElementById('time');
-    const startBtn = document.getElementById('startBtn');
-    const resultContainer = document.getElementById('resultContainer');
-    const finalWpm = document.getElementById('finalWpm');
-    const finalAccuracy = document.getElementById('finalAccuracy');
-    const finalTime = document.getElementById('finalTime');
-    const restartBtn = document.getElementById('restartBtn');
-    const overseer = document.getElementById('overseer');
-    const gunshot = document.getElementById('gunshot');
-    const usernameInput = document.getElementById('username');
-    
-    // Переменные для игры
-    let text = '';
-    let startTime = null;
-    let endTime = null;
-    let timer = null;
-    let mistakes = 0;
-    let totalChars = 0;
-    let currentPosition = 0;
-    let gameActive = false;
-    let timeLimit = 60; // Время в секундах
-    let timeRemaining = timeLimit;
-    
-    // Получение текста с сервера
-    function fetchText() {
-        fetch('/get_text')
-            .then(response => response.json())
-            .then(data => {
-                text = data.text;
-                displayText();
-            })
-            .catch(error => console.error('Error fetching text:', error));
-    }
-    
-    // Отображение текста
-    function displayText() {
-        textDisplay.innerHTML = '';
-        for (let i = 0; i < text.length; i++) {
-            const span = document.createElement('span');
-            span.textContent = text[i];
-            textDisplay.appendChild(span);
-        }
-        // Выделяем первый символ как текущий
-        if (textDisplay.firstChild) {
-            textDisplay.firstChild.classList.add('current');
-        }
-    }
-    
-    // Начало игры
-    function startGame() {
-        if (gameActive) return;
-        
-        fetchText();
-        inputArea.value = '';
-        inputArea.disabled = false;
-        inputArea.focus();
-        
-        mistakes = 0;
-        totalChars = 0;
-        currentPosition = 0;
-        timeRemaining = timeLimit;
-        
-        startTime = new Date();
-        gameActive = true;
-        
-        // Запускаем таймер
-        timer = setInterval(updateTimer, 1000);
-        
-        // Скрываем результаты и надсмотрщика
-        resultContainer.style.display = 'none';
-        overseer.classList.remove('show');
-        
-        // Обновляем статистику
-        updateStats();
-    }
-    
-    // Обновление таймера
-    function updateTimer() {
-        timeRemaining--;
-        timeDisplay.textContent = timeRemaining;
-        
-        if (timeRemaining <= 0) {
-            endGame(false);
-        }
-    }
-    
-    // Обновление статистики
-    function updateStats() {
-        if (!gameActive) return;
-        
-        const currentTime = new Date();
-        const timeElapsed = (currentTime - startTime) / 1000; // в секундах
-        
-        // Расчет WPM (слов в минуту)
-        // Считаем, что среднее слово - 5 символов
-        const wpm = Math.round((currentPosition / 5) / (timeElapsed / 60));
-        
-        // Расчет точности
-        const accuracy = totalChars > 0 ? Math.round(((totalChars - mistakes) / totalChars) * 100) : 100;
-        
-        wpmDisplay.textContent = wpm;
-        accuracyDisplay.textContent = accuracy + '%';
-    }
-    
-    // Завершение игры
-    function endGame(completed = true) {
-        clearInterval(timer);
-        gameActive = false;
-        endTime = new Date();
-        
-        inputArea.disabled = true;
-        
-        const timeElapsed = Math.round((endTime - startTime) / 1000);
-        const wpm = Math.round((currentPosition / 5) / (timeElapsed / 60));
-        const accuracy = totalChars > 0 ? Math.round(((totalChars - mistakes) / totalChars) * 100) : 100;
-        
-        finalWpm.textContent = wpm;
-        finalAccuracy.textContent = accuracy + '%';
-        finalTime.textContent = timeElapsed + 's';
-        
-        resultContainer.style.display = 'block';
-        
-        // Если игра не завершена успешно или точность ниже 70%, показываем надсмотрщика
-        if (!completed || accuracy < 70) {
-            showOverseer();
-        }
-        
-        // Сохраняем результат
-        if (usernameInput && usernameInput.value) {
-            saveResult(usernameInput.value, wpm, accuracy);
-        }
-    }
-    
-    // Показ надсмотрщика и анимация выстрела
-    function showOverseer() {
-        overseer.classList.add('show');
-        
-        // Создаем капли крови для разбрызгивания
-        createBloodSplatters();
-        
-        // Через 2 секунды после появления надсмотрщика - "выстрел"
-        setTimeout(() => {
-            overseer.classList.add('firing');
-            gunshot.style.display = 'block';
-            bloodSplatter.classList.add('show');
-            
-            // Показываем сообщение о смерти
-            deathMessage.classList.add('show');
-            
-            // Звук выстрела
-            const audio = new Audio('/static/sounds/gunshot.mp3');
-            audio.play().catch(e => console.log('Audio play failed:', e));
-            
-            // Эффект тряски экрана
-            document.body.classList.add('shake');
-            setTimeout(() => {
-                document.body.classList.remove('shake');
-            }, 500);
-            
-            // Скрываем эффект выстрела через 500мс
-            setTimeout(() => {
-                gunshot.style.display = 'none';
-            }, 500);
-        }, 2000);
-    }
-    
-    // Создание брызг крови
-    function createBloodSplatters() {
-        const bloodSplatter = document.getElementById('bloodSplatter');
-        bloodSplatter.innerHTML = '';
-        
-        // Создаем 30 капель крови разного размера
-        for (let i = 0; i < 30; i++) {
-            const drop = document.createElement('div');
-            drop.classList.add('blood-drop');
-            
-            // Случайный размер
-            const size = Math.random() * 20 + 5;
-            drop.style.width = `${size}px`;
-            drop.style.height = `${size}px`;
-            
-            // Случайное положение
-            drop.style.left = `${Math.random() * 100}%`;
-            drop.style.top = `${Math.random() * 50}%`;
-            
-            // Случайная задержка анимации
-            drop.style.animationDelay = `${Math.random() * 1.5}s`;
-            
-            bloodSplatter.appendChild(drop);
-        }
-    }
-    
-    // Сохранение результата
-    function saveResult(username, wpm, accuracy) {
-        fetch('/save_result', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                username: username,
-                wpm: wpm,
-                accuracy: accuracy
-            })
-        })
-        .then(response => response.json())
-        .then(data => console.log('Result saved:', data))
-        .catch(error => console.error('Error saving result:', error));
-    }
-    
-    // Обработка ввода
-    inputArea.addEventListener('input', function(e) {
-        if (!gameActive) return;
-        
-        const inputValue = e.target.value;
-        const currentChar = text[currentPosition];
-        
-        // Проверяем, правильно ли введен символ
-        if (inputValue.charAt(inputValue.length - 1) === currentChar) {
-            // Правильный символ
-            const spans = textDisplay.querySelectorAll('span');
-            spans[currentPosition].classList.remove('current');
-            spans[currentPosition].classList.add('correct');
-            
-            currentPosition++;
-            totalChars++;
-            
-            // Если есть следующий символ, делаем его текущим
-            if (currentPosition < text.length) {
-                spans[currentPosition].classList.add('current');
-            } else {
-                // Текст закончился, завершаем игру
-                endGame(true);
-            }
-        } else {
-            // Неправильный символ
-            mistakes++;
-            totalChars++;
-            
-            const spans = textDisplay.querySelectorAll('span');
-            spans[currentPosition].classList.add('incorrect');
-        }
-        
-        // Обновляем статистику
-        updateStats();
-    });
-    
-    // Обработчики кнопок
-    startBtn.addEventListener('click', startGame);
-    restartBtn.addEventListener('click', startGame);
-    
-    // Инициализация
-    timeDisplay.textContent = timeLimit;
-});

static/js/multiplayer.js

@@ -1,276 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
-    // Элементы DOM
-    const roomForm = document.getElementById('roomForm');
-    const usernameInput = document.getElementById('username');
-    const roomInput = document.getElementById('room');
-    const joinBtn = document.getElementById('joinBtn');
-    const startBtn = document.getElementById('startBtn');
-    const gameContainer = document.getElementById('gameContainer');
-    const textDisplay = document.getElementById('textDisplay');
-    const inputArea = document.getElementById('inputArea');
-    const playersList = document.getElementById('playersList');
-    
-    // Переменные для игры
-    let socket;
-    let username = '';
-    let room = '';
-    let text = '';
-    let startTime = null;
-    let currentPosition = 0;
-    let mistakes = 0;
-    let totalChars = 0;
-    let gameActive = false;
-    
-    // Инициализация Socket.IO
-    function initSocket() {
-        socket = io();
-        
-        // Обработчики событий Socket.IO
-        socket.on('connect', () => {
-            console.log('Connected to server');
-        });
-        
-        socket.on('room_update', (data) => {
-            updatePlayersList(data.players);
-            
-            // Если игра началась, но текст еще не отображен
-            if (data.started && !gameActive) {
-                startGame(data.text);
-            }
-            
-            // Активируем кнопку старта только для первого игрока
-            const playerIds = Object.keys(data.players);
-            if (playerIds.length > 0 && playerIds[0] === socket.id) {
-                startBtn.disabled = false;
-            } else {
-                startBtn.disabled = true;
-            }
-        });
-        
-        socket.on('game_started', (data) => {
-            startGame(data.text);
-        });
-        
-        socket.on('progress_update', (players) => {
-            updatePlayersProgress(players);
-            
-            // Проверяем, закончили ли все игроки
-            let allFinished = true;
-            for (const id in players) {
-                if (!players[id].finished) {
-                    allFinished = false;
-                    break;
-                }
-            }
-            
-            // Если все закончили, показываем результаты
-            if (allFinished) {
-                showResults(players);
-            }
-        });
-        
-        socket.on('disconnect', () => {
-            console.log('Disconnected from server');
-        });
-    }
-    
-    // Присоединение к комнате
-    function joinRoom() {
-        username = usernameInput.value.trim();
-        room = roomInput.value.trim();
-        
-        if (!username || !room) {
-            alert('Пожалуйста, введите имя пользователя и название комнаты');
-            return;
-        }
-        
-        socket.emit('join', {
-            username: username,
-            room: room
-        });
-        
-        // Скрываем форму и показываем игровой контейнер
-        roomForm.style.display = 'none';
-        gameContainer.style.display = 'block';
-    }
-    
-    // Обновление списка игроков
-    function updatePlayersList(players) {
-        playersList.innerHTML = '';
-        
-        for (const id in players) {
-            const player = players[id];
-            const playerItem = document.createElement('div');
-            playerItem.className = 'player-item';
-            playerItem.id = 'player-' + id;
-            
-            const playerName = document.createElement('div');
-            playerName.className = 'player-name';
-            playerName.textContent = player.username;
-            
-            const playerProgress = document.createElement('div');
-            playerProgress.className = 'player-progress';
-            
-            const progressBar = document.createElement('div');
-            progressBar.className = 'progress-bar';
-            progressBar.style.width = player.progress + '%';
-            
-            const playerStats = document.createElement('div');
-            playerStats.className = 'player-stats';
-            playerStats.innerHTML = `
-                <span>WPM: ${player.wpm || 0}</span>
-                <span>Точность: ${player.accuracy || 0}%</span>
-            `;
-            
-            playerProgress.appendChild(progressBar);
-            playerItem.appendChild(playerName);
-            playerItem.appendChild(playerProgress);
-            playerItem.appendChild(playerStats);
-            playersList.appendChild(playerItem);
-        }
-    }
-    
-    // Обновление прогресса игроков
-    function updatePlayersProgress(players) {
-        for (const id in players) {
-            const player = players[id];
-            const playerItem = document.getElementById('player-' + id);
-            
-            if (playerItem) {
-                const progressBar = playerItem.querySelector('.progress-bar');
-                progressBar.style.width = player.progress + '%';
-                
-                const playerStats = playerItem.querySelector('.player-stats');
-                playerStats.innerHTML = `
-                    <span>WPM: ${player.wpm || 0}</span>
-                    <span>Точность: ${player.accuracy || 0}%</span>
-                `;
-            }
-        }
-    }
-    
-    // Начало игры
-    function startGame(textContent) {
-        text = textContent;
-        displayText();
-        
-        inputArea.value = '';
-        inputArea.disabled = false;
-        inputArea.focus();
-        
-        mistakes = 0;
-        totalChars = 0;
-        currentPosition = 0;
-        
-        startTime = new Date();
-        gameActive = true;
-    }
-    
-    // Отображение текста
-    function displayText() {
-        textDisplay.innerHTML = '';
-        for (let i = 0; i < text.length; i++) {
-            const span = document.createElement('span');
-            span.textContent = text[i];
-            textDisplay.appendChild(span);
-        }
-        // Выделяем первый символ как текущий
-        if (textDisplay.firstChild) {
-            textDisplay.firstChild.classList.add('current');
-        }
-    }
-    
-    // Показ результатов
-    function showResults(players) {
-        let winner = null;
-        let maxWpm = 0;
-        
-        for (const id in players) {
-            const player = players[id];
-            if (player.wpm > maxWpm) {
-                maxWpm = player.wpm;
-                winner = player;
-            }
-        }
-        
-        if (winner) {
-            alert(`Игра окончена! Победитель: ${winner.username} со скоростью ${winner.wpm} WPM и точностью ${winner.accuracy}%`);
-        }
-    }
-    
-    // Обработка ввода
-    inputArea.addEventListener('input', function(e) {
-        if (!gameActive) return;
-        
-        const inputValue = e.target.value;
-        const currentChar = text[currentPosition];
-        
-        // Проверяем, правильно ли введен символ
-        if (inputValue.charAt(inputValue.length - 1) === currentChar) {
-            // Правильный символ
-            const spans = textDisplay.querySelectorAll('span');
-            spans[currentPosition].classList.remove('current');
-            spans[currentPosition].classList.add('correct');
-            
-            currentPosition++;
-            totalChars++;
-            
-            // Если есть следующий символ, делаем его текущим
-            if (currentPosition < text.length) {
-                spans[currentPosition].classList.add('current');
-            } else {
-                // Текст закончился, завершаем игру
-                gameActive = false;
-                inputArea.disabled = true;
-            }
-        } else {
-            // Неправильный символ
-            mistakes++;
-            totalChars++;
-        }
-        
-        // Обновляем статистику и отправляем на сервер
-        updateStats();
-    });
-    
-    // Обновление статистики
-    function updateStats() {
-        if (!gameActive && currentPosition < text.length) return;
-        
-        const currentTime = new Date();
-        const timeElapsed = (currentTime - startTime) / 1000; // в секундах
-        
-        // Расчет WPM (слов в минуту)
-        // Считаем, что среднее слово - 5 символов
-        const wpm = Math.round((currentPosition / 5) / (timeElapsed / 60));
-        
-        // Расчет точности
-        const accuracy = totalChars > 0 ? Math.round(((totalChars - mistakes) / totalChars) * 100) : 100;
-        
-        // Расчет прогресса
-        const progress = Math.round((currentPosition / text.length) * 100);
-        
-        // Отправляем данные на сервер
-        socket.emit('update_progress', {
-            room: room,
-            progress: progress,
-            wpm: wpm,
-            accuracy: accuracy
-        });
-    }
-    
-    // Обработчики кнопок
-    joinBtn.addEventListener('click', function(e) {
-        e.preventDefault();
-        joinRoom();
-    });
-    
-    startBtn.addEventListener('click', function() {
-        socket.emit('start_game', {
-            room: room
-        });
-    });
-    
-    // Инициализация
-    initSocket();
-});