{% 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="readyBtn" class="btn btn-primary">Я готов!</button>
            <div id="countdown" class="countdown" style="display: none;">3</div>
        </div>
        
        <div class="players-list" id="playersList">
            <!-- Список игроков будет добавлен динамически -->
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/multiplayer.js') }}"></script>
{% endblock %}