From 178100aad8dc10de03955583b1e2626a2259a88e Mon Sep 17 00:00:00 2001
From: svoboda200786 <svoboda200786@gmail.com>
Date: Tue, 20 May 2025 07:01:28 +0000
Subject: [PATCH] =?UTF-8?q?=D0=97=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=B8?=
 =?UTF-8?q?=D1=82=D1=8C=20=D1=84=D0=B0=D0=B9=D0=BB=D1=8B=20=D0=B2=20=C2=AB?=
 =?UTF-8?q?public=C2=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html | 461 +++++++++++++++++++++++-----------------------
 1 file changed, 226 insertions(+), 235 deletions(-)
diff --git a/public/index.html b/public/index.html
index eea41b0..e9b12aa 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,236 +1,227 @@
-<!DOCTYPE html>
-<html lang="ru">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Битва: Елена vs Балард (Сетевая Версия)</title>
-    <link rel="stylesheet" href="style_alt.css">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=MedievalSharp&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-</head>
-<body>
-
-<div class="auth-game-setup-wrapper"> <!-- Обертка для экранов до начала игры -->
-    <div id="status-container">
-        <div id="auth-message"></div>
-        <div id="game-status-message">Ожидание подключения к серверу...</div>
-    </div>
-
-    <div id="auth-section"> <!-- Секция Аутентификации -->
-        <h2>Вход / Регистрация</h2>
-        <form id="register-form">
-            <h3>Регистрация</h3>
-            <input type="text" id="register-username" placeholder="Имя пользователя" required autocomplete="username">
-            <input type="password" id="register-password" placeholder="Пароль (мин. 6 симв.)" required autocomplete="new-password">
-            <button type="submit">Зарегистрироваться</button>
-        </form>
-        <hr style="margin: 25px 0;">
-        <form id="login-form">
-            <h3>Вход</h3>
-            <input type="text" id="login-username" placeholder="Имя пользователя" required autocomplete="username">
-            <input type="password" id="login-password" placeholder="Пароль" required autocomplete="current-password">
-            <button type="submit">Войти</button>
-        </form>
-    </div>
-
-    <div id="user-info" style="display:none;"> <!-- Информация о пользователе и кнопка выхода -->
-        <p>Привет, <span id="logged-in-username"></span>!</p>
-        <button id="logout-button"><i class="fas fa-sign-out-alt"></i> Выход</button>
-    </div>
-
-    <div id="game-setup" style="display: none;"> <!-- Секция Настройки Игры (после логина) -->
-        <h2>Настройка Игры</h2>
-        <div>
-            <button id="create-ai-game">Играть против AI (Балард)</button>
-        </div>
-        <hr style="margin: 15px 0;">
-        <div>
-            <h3>PvP (Игрок против Игрока)</h3>
-
-            <!-- === Блок выбора персонажа === -->
-            <div class="character-selection">
-                <h4>Выберите персонажа для PvP:</h4>
-                <input type="radio" id="char-elena" name="pvp-character" value="elena" checked>
-                <label for="char-elena"><i class="fas fa-hat-wizard"></i> Елена</label>
-
-                <input type="radio" id="char-almagest" name="pvp-character" value="almagest">
-                <label for="char-almagest"><i class="fas fa-staff-aesculapius"></i> Альмагест</label>
-            </div>
-            <!-- === Конец блока выбора персонажа === -->
-
-            <button id="create-pvp-game">Создать PvP Игру</button>
-            <button id="find-random-pvp-game">Найти случайную PvP Игру</button>
-            <br><br>
-            <input type="text" id="game-id-input" placeholder="Введите ID игры для присоединения">
-            <button id="join-pvp-game">Присоединиться к PvP по ID</button>
-        </div>
-        <div id="available-games-list">
-            <h3>Доступные PvP игры:</h3>
-            <p>Загрузка списка...</p>
-            <!-- Список игр будет здесь -->
-        </div>
-    </div>
-</div> <!-- Конец .auth-game-setup-wrapper -->
-
-
-<div class="game-wrapper" style="display: none;"> <!-- Игровая арена, изначально скрыта -->
-    <header class="game-header">
-        <h1><span class="title-player">Игрок 1</span> <span class="separator"><i class="fas fa-fist-raised"></i></span> <span class="title-opponent">Игрок 2</span></h1>
-    </header>
-
-    <!-- === БЛОК: Контролы переключения панелей (для мобильных) === -->
-    <!-- Инлайновый стиль style="display: none;" УДАЛЕН. CSS управляет видимостью. -->
-    <div class="panel-switcher-controls">
-        <button id="show-player-panel-btn" class="panel-switch-button active">
-            <i class="fas fa-user"></i> <span class="button-text">Игрок</span>
-        </button>
-        <button id="show-opponent-panel-btn" class="panel-switch-button">
-            <i class="fas fa-ghost"></i> <span class="button-text">Противник</span>
-        </button>
-    </div>
-    <!-- === КОНЕЦ БЛОКА === -->
-
-    <main class="battle-arena-container">
-        <!-- Колонка Игрока (Панель 1 в UI) -->
-        <div class="player-column">
-            <section id="player-panel" class="fighter-panel">
-                <div class="panel-header">
-                    <div class="character-visual">
-                        <img src="images/elena_avatar.webp" alt="Аватар игрока 1" class="avatar-image player-avatar">
-                    </div>
-                    <h2 id="player-name" class="fighter-name">
-                        <i class="fas fa-hat-wizard icon-player"></i> Елена
-                    </h2>
-                </div>
-                <div class="panel-content">
-                    <div class="stat-bar-container health">
-                        <div class="bar-icon"><i class="fas fa-heart"></i></div>
-                        <div class="bar-wrapper">
-                            <div class="bar health-bar" id="player-hp-bar">
-                                <div id="player-hp-fill" class="bar-fill" style="width: 100%;"></div>
-                                <span id="player-hp-text" class="bar-text">120 / 120</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="stat-bar-container resource mana">
-                        <div class="bar-icon"><i class="fas fa-flask"></i></div>
-                        <div class="bar-wrapper">
-                            <div class="bar resource-bar" id="player-resource-bar">
-                                <div id="player-resource-fill" class="bar-fill" style="width: 100%;"></div>
-                                <span id="player-resource-text" class="bar-text">150 / 150</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="status-area" id="player-status-area">
-                        <i class="fas fa-shield-alt icon-status"></i> <strong>Статус:</strong> <span id="player-status">Готов(а)</span>
-                    </div>
-                    <div class="effects-area" id="player-effects">
-                        <div class="effect-category">
-                            <i class="fas fa-shield-alt icon-effects-buff"></i>
-                            <strong>Усиления:</strong>
-                            <span class="effect-list player-buffs">Нет</span>
-                        </div>
-                        <div class="effect-category">
-                            <i class="fas fa-skull-crossbones icon-effects-debuff"></i>
-                            <strong>Ослабления:</strong>
-                            <span class="effect-list player-debuffs">Нет</span>
-                        </div>
-                    </div>
-                </div>
-            </section>
-
-            <section id="controls-panel" class="controls-panel-new">
-                <h3 id="turn-indicator">Ход: Игрок 1</h3>
-                <div id="turn-timer-container" class="turn-timer-display">
-                    <i class="fas fa-hourglass-half"></i> Время на ход: <span id="turn-timer">--</span>
-                </div>
-                <div class="controls-layout">
-                    <div class="control-group basic-actions">
-                        <button id="button-attack" class="action-button basic" data-action="BASIC_ATTACK" title="Базовая атака"><i class="fas fa-shoe-prints"></i> Атака</button>
-                        <button id="button-block" class="action-button basic" data-action="BLOCK" title="Встать в защиту (Завершает ход!)" disabled><i class="fas fa-shield-alt"></i> Защита</button>
-                    </div>
-                    <div class="control-group ability-list">
-                        <h4><i class="fas fa-book-sparkles"></i> Способности</h4>
-                        <div id="abilities-grid" class="abilities-grid">
-                            <p class="placeholder-text">Загрузка способностей...</p>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        </div> <!-- Конец player-column -->
-
-        <!-- Колонка Противника (Панель 2 в UI) -->
-        <div class="opponent-column">
-            <section id="opponent-panel" class="fighter-panel">
-                <div class="panel-header">
-                    <div class="character-visual">
-                        <img src="images/balard_avatar.jpg" alt="Аватар игрока 2" class="avatar-image opponent-avatar">
-                    </div>
-                    <h2 id="opponent-name" class="fighter-name">
-                        <i class="fas fa-khanda icon-opponent"></i> Балард
-                    </h2>
-                </div>
-                <div class="panel-content">
-                    <div class="stat-bar-container health">
-                        <div class="bar-icon"><i class="fas fa-heart"></i></div>
-                        <div class="bar-wrapper">
-                            <div class="bar health-bar" id="opponent-hp-bar">
-                                <div id="opponent-hp-fill" class="bar-fill" style="width: 100%;"></div>
-                                <span id="opponent-hp-text" class="bar-text">140 / 140</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="stat-bar-container resource stamina">
-                        <div class="bar-icon"><i class="fas fa-fire-alt"></i></div>
-                        <div class="bar-wrapper">
-                            <div class="bar resource-bar" id="opponent-resource-bar">
-                                <div id="opponent-resource-fill" class="bar-fill" style="width: 100%;"></div>
-                                <span id="opponent-resource-text" class="bar-text">100 / 100</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="status-area" id="opponent-status-area">
-                        <i class="fas fa-shield-alt icon-status"></i> <strong>Статус:</strong> <span id="opponent-status">Готов(а)</span>
-                    </div>
-                    <div class="effects-area" id="opponent-effects">
-                        <div class="effect-category">
-                            <i class="fas fa-shield-alt icon-effects-buff"></i>
-                            <strong>Усиления:</strong>
-                            <span class="effect-list opponent-buffs">Нет</span>
-                        </div>
-                        <div class="effect-category">
-                            <i class="fas fa-skull-crossbones icon-effects-debuff"></i>
-                            <strong>Ослабления:</strong>
-                            <span class="effect-list opponent-debuffs">Нет</span>
-                        </div>
-                    </div>
-                </div>
-            </section>
-
-            <section id="log-panel" class="battle-log-new">
-                <h3><i class="fas fa-scroll"></i> Лог Боя</h3>
-                <ul id="log-list">
-                    <li class="log-system">Ожидание подключения к серверу...</li>
-                </ul>
-            </section>
-        </div> <!-- Конец opponent-column -->
-    </main> <!-- Конец .battle-arena-container -->
-
-    <!-- Модальное окно конца игры -->
-    <div id="game-over-screen" class="modal hidden">
-        <div class="modal-content">
-            <h2 id="result-message">Победа!</h2>
-            <button id="return-to-menu-button" class="modal-action-button">
-                <i class="fas fa-arrow-left"></i> В меню выбора игры
-            </button>
-        </div>
-    </div>
-</div> <!-- Конец .game-wrapper -->
-
-<script src="/socket.io/socket.io.js"></script>
-<script src="./js/ui.js"></script>
-<script src="./js/client.js"></script>
-</body>
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Битва: Елена vs Балард (Сетевая Версия)</title>
+    <link rel="stylesheet" href="style_alt.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=MedievalSharp&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+</head>
+<body>
+<div id="user-info" style="display:none;"> <!-- Информация о пользователе и кнопка выхода -->
+    <div>
+        <p>Привет, <span id="logged-in-username"></span>!</p>
+        <button id="logout-button"><i class="fas fa-sign-out-alt"></i> Выход</button>
+    </div>
+</div>
+<div class="auth-game-setup-wrapper"> <!-- Обертка для экранов до начала игры -->
+
+    <div id="status-container">
+        <div id="auth-message"></div>
+        <div id="game-status-message">Ожидание подключения к серверу...</div>
+    </div>
+
+    <div id="auth-section"> <!-- Секция Аутентификации -->
+        <h2>Вход / Регистрация</h2>
+        <form id="register-form">
+            <h3>Регистрация</h3>
+            <input type="text" id="register-username" placeholder="Имя пользователя" required autocomplete="username">
+            <input type="password" id="register-password" placeholder="Пароль (мин. 6 симв.)" required autocomplete="new-password">
+            <button type="submit">Зарегистрироваться</button>
+        </form>
+        <hr style="margin: 25px 0;">
+        <form id="login-form">
+            <h3>Вход</h3>
+            <input type="text" id="login-username" placeholder="Имя пользователя" required autocomplete="username">
+            <input type="password" id="login-password" placeholder="Пароль" required autocomplete="current-password">
+            <button type="submit">Войти</button>
+        </form>
+    </div>
+
+    <!-- Место для #user-info было здесь, но теперь оно выше для стилизации -->
+
+    <div id="game-setup" style="display: none;"> <!-- Секция Настройки Игры (после логина) -->
+        <h2>Настройка Игры</h2>
+        <div>
+            <button id="create-ai-game">Играть против AI (Балард)</button>
+        </div>
+        <hr style="margin: 15px 0;">
+        <div>
+            <h3>PvP (Игрок против Игрока)</h3>
+
+            <div class="character-selection">
+                <h4>Выберите персонажа для PvP:</h4>
+                <input type="radio" id="char-elena" name="pvp-character" value="elena" checked>
+                <label for="char-elena"><i class="fas fa-hat-wizard"></i> Елена</label>
+
+                <input type="radio" id="char-almagest" name="pvp-character" value="almagest">
+                <label for="char-almagest"><i class="fas fa-staff-aesculapius"></i> Альмагест</label>
+            </div>
+
+            <button id="create-pvp-game">Создать PvP Игру</button>
+            <button id="find-random-pvp-game">Найти случайную PvP Игру</button>
+            <br><br>
+            <input type="text" id="game-id-input" placeholder="Введите ID игры для присоединения">
+            <button id="join-pvp-game">Присоединиться к PvP по ID</button>
+        </div>
+        <div id="available-games-list">
+            <h3>Доступные PvP игры:</h3>
+            <p>Загрузка списка...</p>
+            <!-- Список игр будет здесь -->
+        </div>
+    </div>
+</div> <!-- Конец .auth-game-setup-wrapper -->
+
+
+<div class="game-wrapper" style="display: none;"> <!-- Игровая арена, изначально скрыта -->
+    <!-- === ИЗМЕНЕНИЕ: Удален game-header === -->
+    <!-- <header class="game-header">
+        <h1><span class="title-player">Игрок 1</span> <span class="separator"><i class="fas fa-fist-raised"></i></span> <span class="title-opponent">Игрок 2</span></h1>
+    </header> -->
+    <!-- === КОНЕЦ ИЗМЕНЕНИЯ === -->
+
+    <main class="battle-arena-container">
+        <!-- Колонка Игрока (Панель 1 в UI) -->
+        <div class="player-column">
+            <section id="player-panel" class="fighter-panel">
+                <div class="panel-header">
+                    <div class="character-visual">
+                        <img src="images/elena_avatar.webp" alt="Аватар игрока 1" class="avatar-image player-avatar">
+                    </div>
+                    <h2 id="player-name" class="fighter-name">
+                        <i class="fas fa-hat-wizard icon-player"></i> Елена
+                    </h2>
+                </div>
+                <div class="panel-content">
+                    <div class="stat-bar-container health">
+                        <div class="bar-icon"><i class="fas fa-heart"></i></div>
+                        <div class="bar-wrapper">
+                            <div class="bar health-bar" id="player-hp-bar">
+                                <div id="player-hp-fill" class="bar-fill" style="width: 100%;"></div>
+                                <span id="player-hp-text" class="bar-text">120 / 120</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="stat-bar-container resource mana">
+                        <div class="bar-icon"><i class="fas fa-flask"></i></div>
+                        <div class="bar-wrapper">
+                            <div class="bar resource-bar" id="player-resource-bar">
+                                <div id="player-resource-fill" class="bar-fill" style="width: 100%;"></div>
+                                <span id="player-resource-text" class="bar-text">150 / 150</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="status-area" id="player-status-area">
+                        <i class="fas fa-shield-alt icon-status"></i> <strong>Статус:</strong> <span id="player-status">Готов(а)</span>
+                    </div>
+                    <div class="effects-area" id="player-effects">
+                        <div class="effect-category">
+                            <i class="fas fa-shield-alt icon-effects-buff"></i>
+                            <strong>Усиления:</strong>
+                            <span class="effect-list player-buffs">Нет</span>
+                        </div>
+                        <div class="effect-category">
+                            <i class="fas fa-skull-crossbones icon-effects-debuff"></i>
+                            <strong>Ослабления:</strong>
+                            <span class="effect-list player-debuffs">Нет</span>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section id="controls-panel" class="controls-panel-new">
+                <h3 id="turn-indicator">Ход: Игрок 1</h3>
+                <div id="turn-timer-container" class="turn-timer-display">
+                    <i class="fas fa-hourglass-half"></i> Время на ход: <span id="turn-timer">--</span>
+                </div>
+                <div class="controls-layout">
+                    <div class="control-group basic-actions">
+                        <button id="button-attack" class="action-button basic" data-action="BASIC_ATTACK" title="Базовая атака"><i class="fas fa-shoe-prints"></i> Атака</button>
+                        <button id="button-block" class="action-button basic" data-action="BLOCK" title="Встать в защиту (Завершает ход!)" disabled><i class="fas fa-shield-alt"></i> Защита</button>
+                    </div>
+                    <div class="control-group ability-list">
+                        <h4><i class="fas fa-book-sparkles"></i> Способности</h4>
+                        <div id="abilities-grid" class="abilities-grid">
+                            <p class="placeholder-text">Загрузка способностей...</p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div> <!-- Конец player-column -->
+
+        <!-- Колонка Противника (Панель 2 в UI) -->
+        <div class="opponent-column">
+            <section id="opponent-panel" class="fighter-panel">
+                <div class="panel-header">
+                    <div class="character-visual">
+                        <img src="images/balard_avatar.jpg" alt="Аватар игрока 2" class="avatar-image opponent-avatar">
+                    </div>
+                    <h2 id="opponent-name" class="fighter-name">
+                        <i class="fas fa-khanda icon-opponent"></i> Балард
+                    </h2>
+                </div>
+                <div class="panel-content">
+                    <div class="stat-bar-container health">
+                        <div class="bar-icon"><i class="fas fa-heart"></i></div>
+                        <div class="bar-wrapper">
+                            <div class="bar health-bar" id="opponent-hp-bar">
+                                <div id="opponent-hp-fill" class="bar-fill" style="width: 100%;"></div>
+                                <span id="opponent-hp-text" class="bar-text">140 / 140</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="stat-bar-container resource stamina">
+                        <div class="bar-icon"><i class="fas fa-fire-alt"></i></div>
+                        <div class="bar-wrapper">
+                            <div class="bar resource-bar" id="opponent-resource-bar">
+                                <div id="opponent-resource-fill" class="bar-fill" style="width: 100%;"></div>
+                                <span id="opponent-resource-text" class="bar-text">100 / 100</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="status-area" id="opponent-status-area">
+                        <i class="fas fa-shield-alt icon-status"></i> <strong>Статус:</strong> <span id="opponent-status">Готов(а)</span>
+                    </div>
+                    <div class="effects-area" id="opponent-effects">
+                        <div class="effect-category">
+                            <i class="fas fa-shield-alt icon-effects-buff"></i>
+                            <strong>Усиления:</strong>
+                            <span class="effect-list opponent-buffs">Нет</span>
+                        </div>
+                        <div class="effect-category">
+                            <i class="fas fa-skull-crossbones icon-effects-debuff"></i>
+                            <strong>Ослабления:</strong>
+                            <span class="effect-list opponent-debuffs">Нет</span>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section id="log-panel" class="battle-log-new">
+                <h3><i class="fas fa-scroll"></i> Лог Боя</h3>
+                <ul id="log-list">
+                    <li class="log-system">Ожидание подключения к серверу...</li>
+                </ul>
+            </section>
+        </div> <!-- Конец opponent-column -->
+    </main> <!-- Конец .battle-arena-container -->
+
+    <!-- Модальное окно конца игры -->
+    <div id="game-over-screen" class="modal hidden">
+        <div class="modal-content">
+            <h2 id="result-message">Победа!</h2>
+            <button id="return-to-menu-button" class="modal-action-button">
+                <i class="fas fa-arrow-left"></i> В меню выбора игры
+            </button>
+        </div>
+    </div>
+</div> <!-- Конец .game-wrapper -->
+
+<script src="/socket.io/socket.io.js"></script>
+<script src="./js/ui.js"></script> <!-- ui.js теперь перед client.js -->
+<script src="./js/client.js"></script>
+</body>
 </html>
\ No newline at end of file
