{% 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="countdown" id="countdown"></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 %}