293 lines
19 KiB
HTML
293 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
|
||
<meta name="mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||
<title>Star Wars Hearthstone — PvP по сети</title>
|
||
<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=Orbitron:wght@400;600;800&family=Rajdhani:wght@400;600;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="starwars-glyphicons/css/starwars-glyphicons.css">
|
||
<link rel="stylesheet" href="styles.css">
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div id="stars"></div>
|
||
<div id="stars2"></div>
|
||
<div id="stars3"></div>
|
||
|
||
<!-- Lobby -->
|
||
<section id="lobby" class="screen">
|
||
<div class="lobby-card">
|
||
<h1 class="logo">
|
||
<i class="swg swg-2x swg-starwars logo-icon" aria-hidden="true"></i>
|
||
<span class="logo-sw">STAR WARS</span>
|
||
<span class="logo-hs">HEARTHSTONE</span>
|
||
</h1>
|
||
<p class="subtitle">PvP до 4 игроков · Работает через Radmin VPN</p>
|
||
<button type="button" id="btn-instructions-lobby" class="btn-instructions-lobby" title="Как играть">?</button>
|
||
<button type="button" id="btn-cards-gallery" class="btn-instructions-lobby" title="Галерея карт" style="right: 3.5rem;">📚</button>
|
||
<button type="button" id="btn-settings-lobby" class="btn-settings-lobby" title="Настройки">⚙</button>
|
||
|
||
<div class="lobby-tabs">
|
||
<button type="button" class="tab active" data-tab="host">Создать игру</button>
|
||
<button type="button" class="tab" data-tab="join">Подключиться</button>
|
||
</div>
|
||
|
||
<div id="host-panel" class="panel active">
|
||
<label>Ваше имя</label>
|
||
<input type="text" id="host-name" placeholder="Игрок 1" maxlength="20" />
|
||
<button type="button" id="btn-host" class="btn btn-primary">Создать комнату</button>
|
||
</div>
|
||
|
||
<div id="join-panel" class="panel">
|
||
<label>Ваше имя</label>
|
||
<input type="text" id="join-name" placeholder="Игрок 2" maxlength="20" />
|
||
<button type="button" id="btn-join" class="btn btn-primary">Подключиться к серверу</button>
|
||
<p class="hint" style="font-size: 0.75rem; margin-top: 0.5rem; opacity: 0.7;">Автоматическое подключение к серверу</p>
|
||
<details style="margin-top: 0.5rem; font-size: 0.85rem;">
|
||
<summary style="cursor: pointer; color: #94a3b8; user-select: none;">Расширенные настройки</summary>
|
||
<label style="margin-top: 0.5rem; display: block;">Адрес сервера (IP:порт)</label>
|
||
<input type="text" id="join-addr" placeholder="Оставьте пустым для авто" style="margin-top: 0.3rem;" />
|
||
</details>
|
||
</div>
|
||
|
||
<div id="room-panel" class="panel hidden">
|
||
<h3>Комната</h3>
|
||
<p class="hint">Код комнаты: <strong id="room-code-display" style="font-size: 1.2rem; color: var(--cyan); letter-spacing: 0.1em; cursor: pointer; user-select: all;" title="Клик для копирования">-----</strong></p>
|
||
<p class="hint" style="font-size: 0.85rem; margin-top: 0.5rem;">Адрес для подключения: <strong id="room-connect-info" style="color: var(--amber); cursor: pointer; user-select: all;" title="Клик для копирования">-----</strong></p>
|
||
<p class="hint" style="font-size: 0.75rem; margin-top: 0.3rem; opacity: 0.8;">Отправьте адрес другим игрокам. Они введут код на странице подключения.</p>
|
||
<label>Фракция колоды</label>
|
||
<select id="room-faction">
|
||
<option value="">Случайная</option>
|
||
<option value="rebellion">Сопротивление</option>
|
||
<option value="empire">Империя</option>
|
||
<option value="pirates">Пираты</option>
|
||
<option value="mandalorians">Мандалорцы</option>
|
||
</select>
|
||
<ul id="player-list"></ul>
|
||
<button type="button" id="btn-start" class="btn btn-primary">Начать игру</button>
|
||
<button type="button" id="btn-leave" class="btn btn-ghost">Выйти</button>
|
||
</div>
|
||
|
||
<div id="connect-panel" class="panel hidden">
|
||
<label>Код комнаты</label>
|
||
<input type="text" id="join-code" placeholder="ABCDE" maxlength="5" style="text-transform: uppercase; font-size: 1.1rem; letter-spacing: 0.1em; text-align: center; width: 100%; padding: 0.6rem; background: rgba(0,0,0,0.3); border: 2px solid rgba(0,180,255,0.35); border-radius: 8px; color: #f8fafc; font-weight: 700;" />
|
||
<p class="hint" style="font-size: 0.85rem; margin-top: 0.5rem;">Введите код комнаты, который дал хост</p>
|
||
<button type="button" id="btn-join-code" class="btn btn-primary">Подключиться к комнате</button>
|
||
<p id="connect-status" style="margin-top: 1rem; color: #94a3b8;">Ожидание начала игры...</p>
|
||
<ul id="connect-player-list"></ul>
|
||
<button type="button" id="btn-leave-join" class="btn btn-ghost">Выйти</button>
|
||
</div>
|
||
|
||
<p id="lobby-error" class="error hidden"></p>
|
||
</div>
|
||
</section>
|
||
|
||
<div id="cards-gallery-overlay" class="modal-overlay hidden">
|
||
<div class="modal cards-gallery-modal">
|
||
<h2>📚 Галерея карт</h2>
|
||
<div class="gallery-controls">
|
||
<select id="gallery-faction-filter" class="gallery-filter">
|
||
<option value="">Все фракции</option>
|
||
<option value="rebellion">Сопротивление</option>
|
||
<option value="empire">Империя</option>
|
||
<option value="pirates">Пираты</option>
|
||
<option value="mandalorians">Мандалорцы</option>
|
||
<option value="neutral">Нейтральные</option>
|
||
</select>
|
||
<select id="gallery-type-filter" class="gallery-filter">
|
||
<option value="">Все типы</option>
|
||
<option value="minion">Миньоны</option>
|
||
<option value="spell">Заклинания</option>
|
||
</select>
|
||
<input type="text" id="gallery-search" placeholder="Поиск по имени..." class="gallery-search" />
|
||
</div>
|
||
<div id="cards-gallery-grid" class="cards-gallery-grid"></div>
|
||
<button type="button" id="btn-gallery-close" class="btn btn-primary">Закрыть</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="instructions-overlay" class="modal-overlay hidden">
|
||
<div class="modal instructions-modal">
|
||
<h2>Как играть</h2>
|
||
<div class="instructions-body">
|
||
<p><strong>Цель игры:</strong> свести здоровье героев всех противников до 0. Последний выживший побеждает!</p>
|
||
|
||
<h3>Основные механики</h3>
|
||
<p><strong>Мана</strong> <i class="swg swg-credits instructions-icon"></i> — ресурс для разыгрывания карт. Растёт каждый ход (максимум 10). Восстанавливается полностью в начале вашего хода.</p>
|
||
<p><strong>Здоровье героя</strong> <i class="swg swg-deathstar instructions-icon"></i> — начинаете с 30. При достижении 0 — поражение.</p>
|
||
<p><strong>Колода</strong> <i class="swg swg-galrep instructions-icon"></i> — 20 карт. При пустой колоде получаете урон усталости (увеличивается каждый раз).</p>
|
||
<p><strong>Рука</strong> — максимум 10 карт. При переполнении карты сжигаются.</p>
|
||
|
||
<h3>Ход игры</h3>
|
||
<ol>
|
||
<li><strong>Розыгрыш карт</strong> — разыграйте миньонов (до 7 на столе) или заклинания, тратя ману.</li>
|
||
<li><strong>Атака</strong> — атакуйте вражескими миньонами или используйте способности.</li>
|
||
<li><strong>Добор карты</strong> — клик по колоде (1 раз за ход, если не использовали).</li>
|
||
<li><strong>Завершить ход</strong> — кнопка «Завершить ход».</li>
|
||
</ol>
|
||
|
||
<h3>Управление</h3>
|
||
<ul>
|
||
<li><strong>Розыгрыш карты</strong> — клик по карте в руке (если хватает маны). Для миньонов — клик или перетаскивание на поле.</li>
|
||
<li><strong>Атака миньоном</strong> — клик по своему миньону → клик по цели. Или <strong>перетащите</strong> миньона на врага/героя.</li>
|
||
<li><strong>Заклинания</strong> — клик по заклинанию в руке. Если требуется цель — выберите её.</li>
|
||
<li><strong>Геройская способность</strong> — кнопка «Герой (2)» → выберите цель (1 урон, стоит 2 маны).</li>
|
||
<li><strong>Звёздная кузница</strong> — кнопка «⚒ Кузница» → выберите 2-3 карты из колоды → создайте улучшенную карту (-1 стоимость, +1/+1 статы).</li>
|
||
<li><strong>Информация о карте</strong> — кнопка «i» на карте для просмотра описания и биографии.</li>
|
||
</ul>
|
||
|
||
<h3>Типы карт</h3>
|
||
<p><strong>Миньоны</strong> — существа с <span class="atk">атакой</span> и <span class="hp">здоровьем</span>. Могут атаковать со следующего хода после розыгрыша. При атаке оба наносят урон друг другу.</p>
|
||
<p><strong>Заклинания</strong> — одноразовые эффекты. Некоторые требуют выбора цели.</p>
|
||
<p><strong>Структуры</strong> — здания и сооружения с особыми эффектами.</p>
|
||
|
||
<h3>Способности</h3>
|
||
<p><strong>Battlecry</strong> — срабатывает при розыгрыше карты.</p>
|
||
<p><strong>Deathrattle</strong> — срабатывает при смерти миньона.</p>
|
||
<p><strong>Заморозка</strong> ❄ — миньон не может атаковать следующий ход.</p>
|
||
|
||
<h3>Фракции</h3>
|
||
<p><span class="faction-r">Сопротивление</span> <i class="swg swg-galrep instructions-icon"></i> — джедаи, повстанцы, защитники свободы.</p>
|
||
<p><span class="faction-e">Империя</span> <i class="swg swg-galemp instructions-icon"></i> — ситхи, штурмовики, тёмная сторона.</p>
|
||
<p><span class="faction-n">Пираты</span> — охотники за головами, контрабандисты.</p>
|
||
<p><span class="faction-n">Мандалорцы</span> — воины-мандалорцы, охотники.</p>
|
||
<p><span class="faction-n">Нейтральные</span> — доступны всем фракциям.</p>
|
||
|
||
<h3>Советы</h3>
|
||
<ul>
|
||
<li>Управляйте маной — не тратьте всё в начале хода.</li>
|
||
<li>Используйте способности карт эффективно.</li>
|
||
<li>Контролируйте поле боя — не давайте противнику накапливать миньонов.</li>
|
||
<li>Следите за здоровьем — не забывайте про урон по герою.</li>
|
||
<li>Используйте кузницу для улучшения ключевых карт.</li>
|
||
</ul>
|
||
</div>
|
||
<button type="button" id="btn-instructions-close" class="btn btn-primary">Понятно</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Game -->
|
||
<section id="game" class="screen hidden">
|
||
<header class="game-header">
|
||
<div class="header-left">
|
||
<span class="mana-display">
|
||
<i class="swg swg-credits mana-icon" aria-hidden="true"></i>
|
||
<span id="your-mana">0</span>/<span id="your-max-mana">0</span>
|
||
</span>
|
||
<span class="health-display">
|
||
<i class="swg swg-deathstar health-icon" aria-hidden="true"></i>
|
||
<span id="your-health">30</span>
|
||
</span>
|
||
<span class="deck-count"><i class="swg swg-galrep deck-icon" aria-hidden="true"></i><span id="your-deck">0</span> в колоде</span>
|
||
</div>
|
||
<div class="header-center">
|
||
<span class="turn-badge" id="turn-badge">Ход 1</span>
|
||
<span class="turn-timer" id="turn-timer" title="Время хода">1:30</span>
|
||
<button type="button" id="btn-hero-ability" class="btn btn-ghost" title="Геройская способность (2 маны): 1 урон цели">Герой (2)</button>
|
||
<button type="button" id="btn-forge" class="btn btn-ghost" title="Звёздная кузница: улучшить карту из колоды">⚒ Кузница</button>
|
||
<button type="button" id="btn-end-turn" class="btn btn-end-turn">Завершить ход</button>
|
||
<button type="button" id="btn-reset-lobby" class="btn btn-ghost hidden" title="Сбросить игру и вернуться в лобби">Вернуться в лобби</button>
|
||
</div>
|
||
<div class="header-right">
|
||
<div class="game-log-wrap">
|
||
<div id="game-log" class="game-log"></div>
|
||
</div>
|
||
<button type="button" id="btn-cards-gallery-game" class="btn-instructions" title="Галерея карт" style="right: 3.5rem;">📚</button>
|
||
<button type="button" id="btn-instructions" class="btn-instructions" title="Инструкция">?</button>
|
||
<button type="button" id="btn-settings" class="btn-settings" title="Настройки">⚙</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="board">
|
||
<div class="opponents" id="opponents-area">
|
||
<!-- Opponent boards filled by JS -->
|
||
</div>
|
||
<div class="battlefield">
|
||
<div class="your-board" id="your-board"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hand-container">
|
||
<div class="deck-fan" id="deck-fan" title="Колода (клик — вытянуть карту)">
|
||
<i class="swg swg-galrep deck-fan-icon" aria-hidden="true"></i>
|
||
<div class="deck-stack" id="deck-stack"></div>
|
||
<span class="deck-count-badge" id="deck-count-badge">0</span>
|
||
</div>
|
||
<div class="hand" id="your-hand"></div>
|
||
</div>
|
||
|
||
<div id="modal-overlay" class="modal-overlay hidden">
|
||
<div class="modal">
|
||
<h2 id="modal-title">Результат</h2>
|
||
<p id="modal-body"></p>
|
||
<button type="button" id="btn-modal-close" class="btn btn-primary">OK</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="attack-mode" class="attack-mode hidden">
|
||
<p>Выберите цель для атаки (враг или его существо)</p>
|
||
<button type="button" id="btn-cancel-attack" class="btn btn-ghost">Отмена</button>
|
||
</div>
|
||
<div id="spell-mode" class="attack-mode spell-mode hidden">
|
||
<p>Выберите цель для заклинания</p>
|
||
<button type="button" id="btn-cancel-spell" class="btn btn-ghost">Отмена</button>
|
||
</div>
|
||
<div id="hero-ability-mode" class="attack-mode spell-mode hidden">
|
||
<p>Выберите цель для геройской способности (1 урон)</p>
|
||
<button type="button" id="btn-cancel-hero" class="btn btn-ghost">Отмена</button>
|
||
</div>
|
||
<div id="forge-overlay" class="modal-overlay hidden">
|
||
<div class="modal forge-modal">
|
||
<h2>⚒ Звёздная кузница</h2>
|
||
<p class="hint" style="font-size: 0.85rem; margin-bottom: 1rem;">Выберите 2-3 карты из колоды для улучшения</p>
|
||
<div id="forge-deck-list" class="forge-deck-list"></div>
|
||
<div id="forge-selected" class="forge-selected"></div>
|
||
<div class="forge-actions">
|
||
<button type="button" id="btn-forge-craft" class="btn btn-primary" disabled>Создать улучшенную карту</button>
|
||
<button type="button" id="btn-forge-close" class="btn btn-ghost">Закрыть</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="card-info-overlay" class="modal-overlay hidden">
|
||
<div class="modal card-info-modal">
|
||
<h2 id="card-info-name"></h2>
|
||
<p id="card-info-meta" class="card-info-meta"></p>
|
||
<p id="card-info-text" class="card-info-text"></p>
|
||
<div id="card-info-abilities" class="card-info-abilities"></div>
|
||
<p id="card-info-bio" class="card-info-bio"></p>
|
||
<button type="button" id="btn-card-info-close" class="btn btn-primary">Закрыть</button>
|
||
</div>
|
||
</div>
|
||
<div id="settings-overlay" class="modal-overlay hidden">
|
||
<div class="modal settings-modal">
|
||
<h2>Настройки</h2>
|
||
<div class="settings-content">
|
||
<div class="setting-group">
|
||
<label for="music-toggle">Музыка</label>
|
||
<button type="button" id="music-toggle" class="btn btn-ghost">Включить</button>
|
||
</div>
|
||
<div class="setting-group">
|
||
<label for="music-volume-slider">Громкость музыки: <span id="music-volume-value">50%</span></label>
|
||
<input type="range" id="music-volume-slider" min="0" max="100" value="50" step="1" />
|
||
</div>
|
||
</div>
|
||
<button type="button" id="btn-settings-close" class="btn btn-primary">Закрыть</button>
|
||
</div>
|
||
</div>
|
||
<div id="effects-layer"></div>
|
||
<div id="attack-announcement" class="attack-announcement hidden"></div>
|
||
</section>
|
||
</div>
|
||
|
||
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
|
||
<script src="sounds.js"></script>
|
||
<script src="music.js"></script>
|
||
<script src="game.js"></script>
|
||
</body>
|
||
</html>
|