Upload 12 files

app.py

@@ -0,0 +1,143 @@
+from flask import Flask, render_template, request, jsonify, session
+from flask_socketio import SocketIO, emit, join_room, leave_room
+import os
+import random
+import json
+from datetime import datetime
+from flask_sqlalchemy import SQLAlchemy
+
+app = Flask(__name__)
+app.config['SECRET_KEY'] = os.urandom(24)
+app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///typing_game.db'
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+socketio = SocketIO(app)
+db = SQLAlchemy(app)
+
+# Модель для хранения результатов игроков
+class GameResult(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(50), nullable=False)
+    wpm = db.Column(db.Float, nullable=False)  # скорость в словах в минуту
+    accuracy = db.Column(db.Float, nullable=False)  # точность в процентах
+    date = db.Column(db.DateTime, default=datetime.utcnow)
+
+# Создание базы данных
+with app.app_context():
+    db.create_all()
+
+# Тексты для набора
+typing_texts = [
+    "Быстрый набор текста - это навык, который может значительно повысить вашу продуктивность.",
+    "Практика ежедневного набора текста поможет вам стать быстрее и точнее.",
+    "Хороший наборщик текста может печатать, не глядя на клавиатуру.",
+    "Скорость набора измеряется в количестве слов в минуту.",
+    "Точность набора так же важна, как и скорость.",
+    "Регулярные тренировки помогут вам улучшить навыки набора текста."
+]
+
+# Комнаты для многопользовательской игры
+rooms = {}
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/game')
+def game():
+    return render_template('game.html')
+
+@app.route('/multiplayer')
+def multiplayer():
+    return render_template('multiplayer.html')
+
+@app.route('/leaderboard')
+def leaderboard():
+    results = GameResult.query.order_by(GameResult.wpm.desc()).limit(10).all()
+    return render_template('leaderboard.html', results=results)
+
+@app.route('/get_text', methods=['GET'])
+def get_text():
+    text = random.choice(typing_texts)
+    return jsonify({'text': text})
+
+@app.route('/save_result', methods=['POST'])
+def save_result():
+    data = request.json
+    username = data.get('username', 'Anonymous')
+    wpm = data.get('wpm', 0)
+    accuracy = data.get('accuracy', 0)
+    
+    result = GameResult(username=username, wpm=wpm, accuracy=accuracy)
+    db.session.add(result)
+    db.session.commit()
+    
+    return jsonify({'success': True})
+
+# Обработка WebSocket событий для многопользовательской игры
+@socketio.on('join')
+def on_join(data):
+    username = data['username']
+    room = data['room']
+    join_room(room)
+    
+    if room not in rooms:
+        rooms[room] = {
+            'players': {},
+            'text': random.choice(typing_texts),
+            'started': False
+        }
+    
+    rooms[room]['players'][request.sid] = {
+        'username': username,
+        'progress': 0,
+        'wpm': 0,
+        'accuracy': 0,
+        'finished': False
+    }
+    
+    # Отправляем обновление всем в комнате
+    emit('room_update', rooms[room], to=room)
+    
+    # Отладочное сообщение
+    print(f"Игрок {username} присоединился к комнате {room}")
+    print(f"Текущие игроки в комнате: {rooms[room]['players'].keys()}")
+
+@socketio.on('start_game')
+def on_start_game(data):
+    room = data['room']
+    if room in rooms:
+        rooms[room]['started'] = True
+        emit('game_started', {'text': rooms[room]['text']}, to=room)
+        print(f"Игра в комнате {room} началась. Текст: {rooms[room]['text'][:20]}...")
+
+@socketio.on('update_progress')
+def on_update_progress(data):
+    room = data['room']
+    progress = data['progress']
+    wpm = data['wpm']
+    accuracy = data['accuracy']
+    
+    if room in rooms and request.sid in rooms[room]['players']:
+        rooms[room]['players'][request.sid]['progress'] = progress
+        rooms[room]['players'][request.sid]['wpm'] = wpm
+        rooms[room]['players'][request.sid]['accuracy'] = accuracy
+        
+        if progress >= 100:
+            rooms[room]['players'][request.sid]['finished'] = True
+        
+        emit('progress_update', rooms[room]['players'], to=room)
+
+@socketio.on('disconnect')
+def on_disconnect():
+    for room_id, room_data in list(rooms.items()):
+        if request.sid in room_data['players']:
+            del room_data['players'][request.sid]
+            leave_room(room_id)
+            
+            if not room_data['players']:
+                del rooms[room_id]
+            else:
+                emit('room_update', room_data, to=room_id)
+
+if __name__ == '__main__':
+    socketio.run(app, debug=True)

requirements.txt

@@ -1,5 +1,4 @@
-gunicorn
-flask
-flask-socketio
-python-dotenv
-flask-sqlalchemy
+flask==2.0.1
+flask-socketio==5.1.1
+python-dotenv==0.19.0
+flask-sqlalchemy==2.5.1

static/css/style.css

@@ -0,0 +1,542 @@
+: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

@@ -0,0 +1,260 @@
+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

@@ -0,0 +1,276 @@
+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();
+});

templates/game.html

@@ -0,0 +1,72 @@
+{% extends "layout.html" %}
+
+{% block title %}Typing Speed Game - Одиночная игра{% endblock %}
+
+{% block content %}
+<div class="game-container">
+    <h2>Одиночная игра</h2>
+    
+    <div class="input-area">
+        <input type="text" id="username" placeholder="Введите ваше имя" class="form-control">
+    </div>
+    
+    <div class="text-display" id="textDisplay">
+        Нажмите "Начать игру", чтобы получить текст для набора.
+    </div>
+    
+    <div class="input-area">
+        <textarea id="inputArea" placeholder="Начните вводить текст здесь..." disabled></textarea>
+    </div>
+    
+    <div class="stats">
+        <div class="stat-box">
+            <h3>Скорость</h3>
+            <p id="wpm">0</p>
+            <span>слов/мин</span>
+        </div>
+        <div class="stat-box">
+            <h3>Точность</h3>
+            <p id="accuracy">100%</p>
+        </div>
+        <div class="stat-box">
+            <h3>Время</h3>
+            <p id="time">60</p>
+            <span>секунд</span>
+        </div>
+    </div>
+    
+    <div class="controls">
+        <button id="startBtn" class="btn btn-primary">Начать игру</button>
+    </div>
+    
+    <div class="result-container" id="resultContainer">
+        <h2>Результаты</h2>
+        <div class="result-details">
+            <div class="result-box">
+                <h3>Скорость</h3>
+                <p id="finalWpm">0</p>
+                <span>слов/мин</span>
+            </div>
+            <div class="result-box">
+                <h3>Точность</h3>
+                <p id="finalAccuracy">0%</p>
+            </div>
+            <div class="result-box">
+                <h3>Время</h3>
+                <p id="finalTime">0s</p>
+            </div>
+        </div>
+        <button id="restartBtn" class="btn btn-primary">Играть снова</button>
+    </div>
+    
+    <!-- Надсмотрщик и эффект выстрела -->
+    <div class="overseer" id="overseer"></div>
+    <div class="gunshot" id="gunshot"></div>
+    <div class="blood-splatter" id="bloodSplatter"></div>
+    <div class="death-message" id="deathMessage">Вы проиграли!</div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/game.js') }}"></script>
+{% endblock %}

templates/index.html

@@ -0,0 +1,27 @@
+{% extends "layout.html" %}
+
+{% block title %}Typing Speed Game - Главная{% endblock %}
+
+{% block content %}
+<div class="game-container">
+    <h2>Добро пожаловать в Typing Speed Game!</h2>
+    <p>Проверьте свою скорость и точность набора текста в нашей захватывающей игре.</p>
+    <p>Но будьте осторожны! Если вы наберете текст слишком медленно или с большим количеством ошибок, надсмотрщик не будет доволен...</p>
+    
+    <div class="options">
+        <a href="{{ url_for('game') }}" class="btn btn-primary">Начать одиночную игру</a>
+        <a href="{{ url_for('multiplayer') }}" class="btn btn-secondary">Играть с друзьями</a>
+    </div>
+    
+    <div class="instructions">
+        <h3>Как играть:</h3>
+        <ol>
+            <li>Выберите режим игры: одиночный или мультиплеер</li>
+            <li>Введите свое имя</li>
+            <li>Набирайте текст как можно быстрее и точнее</li>
+            <li>Следите за своей скоростью (WPM) и точностью</li>
+            <li>Постарайтесь избежать встречи с надсмотрщиком!</li>
+        </ol>
+    </div>
+</div>
+{% endblock %}

templates/layout.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Typing Speed Game{% endblock %}</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    {% block extra_css %}{% endblock %}
+</head>
+<body>
+    <header>
+        <div class="container">
+            <h1>Typing Speed Game</h1>
+            <nav>
+                <a href="{{ url_for('index') }}">Главная</a>
+                <a href="{{ url_for('game') }}">Одиночная игра</a>
+                <a href="{{ url_for('multiplayer') }}">Мультиплеер</a>
+                <a href="{{ url_for('leaderboard') }}">Таблица лидеров</a>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <div class="container">
+            {% block content %}{% endblock %}
+        </div>
+    </main>
+
+    <footer>
+        <div class="container">
+            <p>&copy; 2025 Typing Speed Game. Все права защищены.</p>
+        </div>
+    </footer>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
+    {% block scripts %}{% endblock %}
+</body>
+</html>

templates/leaderboard.html

@@ -0,0 +1,36 @@
+{% extends "layout.html" %}
+
+{% block title %}Typing Speed Game - Таблица лидеров{% endblock %}
+
+{% block content %}
+<div class="leaderboard-container">
+    <h2>Таблица лидеров</h2>
+    
+    <table class="leaderboard-table">
+        <thead>
+            <tr>
+                <th>Место</th>
+                <th>Имя</th>
+                <th>Скорость (WPM)</th>
+                <th>Точность</th>
+                <th>Дата</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for result in results %}
+            <tr>
+                <td>{{ loop.index }}</td>
+                <td>{{ result.username }}</td>
+                <td>{{ result.wpm }}</td>
+                <td>{{ result.accuracy }}%</td>
+                <td>{{ result.date.strftime('%d.%m.%Y %H:%M') }}</td>
+            </tr>
+            {% else %}
+            <tr>
+                <td colspan="5">Пока нет результатов</td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
+{% endblock %}

templates/multiplayer.html

@@ -0,0 +1,37 @@
+{% extends "layout.html" %}
+
+{% block title %}Typing Speed Game - Мультиплеер{% endblock %}
+
+{% block content %}
+<div class="multiplayer-container">
+    <h2>Многопользовательская игра</h2>
+    
+    <form id="roomForm" class="room-form">
+        <input type="text" id="username" placeholder="Введите ваше имя" required>
+        <input type="text" id="room" placeholder="Введите название комнаты" required>
+        <button id="joinBtn" class="btn btn-primary">Присоединиться к комнате</button>
+    </form>
+    
+    <div id="gameContainer" style="display: none;">
+        <div class="text-display" id="textDisplay">
+            Ожидание начала игры...
+        </div>
+        
+        <div class="input-area">
+            <textarea id="inputArea" placeholder="Начните вводить текст здесь..." disabled></textarea>
+        </div>
+        
+        <div class="controls">
+            <button id="startBtn" class="btn btn-primary" disabled>Начать игру</button>
+        </div>
+        
+        <div class="players-list" id="playersList">
+            <!-- Список игроков будет добавлен динамически -->
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/multiplayer.js') }}"></script>
+{% endblock %}