268 lines
14 KiB
HTML
268 lines
14 KiB
HTML
<!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">
|
||
<style>
|
||
/* Дополнительные стили для элементов настройки игры */
|
||
#game-setup {
|
||
width: 100%;
|
||
max-width: 600px;
|
||
margin: 20px auto;
|
||
padding: 20px;
|
||
background: rgba(16, 18, 28, 0.85);
|
||
border: 1px solid #4a5072;
|
||
border-radius: 8px;
|
||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
|
||
color: #e8effc;
|
||
text-align: center;
|
||
}
|
||
#game-setup h2, #game-setup h3 {
|
||
font-family: 'MedievalSharp', cursive;
|
||
color: #ffffff;
|
||
margin-bottom: 15px;
|
||
}
|
||
#game-setup button {
|
||
font-family: 'Roboto', sans-serif;
|
||
background: linear-gradient(145deg, #556190, #3f4a70);
|
||
color: #e8effc;
|
||
border: 1px solid rgba(0,0,0,0.3);
|
||
border-radius: 5px;
|
||
padding: 10px 15px;
|
||
margin: 5px;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
}
|
||
#game-setup button:hover {
|
||
background: linear-gradient(145deg, #6a79b0, #556190);
|
||
transform: translateY(-1px);
|
||
}
|
||
#game-setup input[type="text"] {
|
||
padding: 8px;
|
||
border-radius: 4px;
|
||
border: 1px solid #4a5072;
|
||
background-color: #252a44;
|
||
color: #e8effc;
|
||
margin-right: 5px;
|
||
}
|
||
#available-games-list {
|
||
margin-top: 20px;
|
||
text-align: left;
|
||
max-height: 200px;
|
||
overflow-y: auto;
|
||
padding: 10px;
|
||
background-color: rgba(0,0,0,0.2);
|
||
border-radius: 4px;
|
||
}
|
||
#available-games-list ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
#available-games-list li {
|
||
padding: 8px;
|
||
border-bottom: 1px solid rgba(74, 80, 114, 0.5);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
#available-games-list li:last-child {
|
||
border-bottom: none;
|
||
}
|
||
#game-status-message {
|
||
color: #ffd700; /* Gold color for status messages */
|
||
margin-bottom: 15px;
|
||
font-weight: bold;
|
||
min-height: 1.5em; /* Чтобы не прыгал layout */
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div id="game-setup">
|
||
<h2>Настройка Игры</h2>
|
||
<div id="game-status-message">Ожидание подключения к серверу...</div>
|
||
|
||
<div>
|
||
<button id="create-ai-game">Играть против AI</button>
|
||
</div>
|
||
<hr style="margin: 15px 0;">
|
||
<div>
|
||
<h3>PvP (Игрок против Игрока)</h3>
|
||
<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 class="game-wrapper" style="display: none;"> <!-- Изначально скрываем игровую арену -->
|
||
|
||
<header class="game-header">
|
||
<!-- Заголовок будет обновляться из JS -->
|
||
<h1><span class="title-enchantress">Елена</span> <span class="separator"><i class="fas fa-fist-raised"></i></span> <span class="title-knight">Балард</span></h1>
|
||
</header>
|
||
|
||
<main class="battle-arena-container">
|
||
|
||
<!-- Колонка Игрока (Панель 1 в UI) -->
|
||
<div class="player-column">
|
||
<section id="player-panel" class="fighter-panel"> <!-- Класс 'player' или 'opponent' будет зависеть от того, кем играет клиент -->
|
||
<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>
|
||
<!-- max-hp span не используется для отображения, но может быть полезен для JS -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="stat-bar-container resource mana"> <!-- Класс 'mana' или 'stamina' может меняться -->
|
||
<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">Ход: Елена</h3>
|
||
<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"> <!-- Класс 'player' или 'opponent' будет зависеть -->
|
||
<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"> <!-- Класс 'mana' или '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="restart-game-button"><i class="fas fa-redo"></i> Новая Игра / Готов к рестарту</button>
|
||
</div>
|
||
</div>
|
||
</div> <!-- Конец .game-wrapper -->
|
||
|
||
<!-- Подключение JavaScript -->
|
||
<script src="/socket.io/socket.io.js"></script> <!-- Клиентская библиотека Socket.IO -->
|
||
<!-- Файлы config.js и data.js больше не нужны напрямую на клиенте, если сервер передает все данные -->
|
||
<!-- <script src="./js/config.js"></script> --> <!-- Можно заменить на config_client.js или получать данные от сервера -->
|
||
<!-- <script src="./js/data.js"></script> --> <!-- Данные (статы, абилки) придут от сервера -->
|
||
<!-- utils.js не используется в текущем client.js, но если понадобится, его можно будет подключить -->
|
||
<!-- <script src="./js/utils.js"></script> -->
|
||
<script src="./js/ui.js"></script> <!-- Логика обновления UI -->
|
||
<script src="./js/client.js"></script> <!-- Логика взаимодействия с сервером -->
|
||
</body>
|
||
</html>
|