318 lines
16 KiB
HTML
318 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>⚔️ Хроники Эйдона — RPG</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚔️</text></svg>">
|
||
</head>
|
||
<body>
|
||
<div id="game-container">
|
||
<canvas id="gameCanvas" width="900" height="600"></canvas>
|
||
|
||
<!-- HUD -->
|
||
<div id="hud">
|
||
<div class="hpill">❤️ <b id="h-hp">100/100</b></div>
|
||
<div class="hbar"><div class="hbar-hp" id="b-hp" style="width:100%"></div></div>
|
||
<div class="hpill">💧 <b id="h-mp">50/50</b></div>
|
||
<div class="hbar"><div class="hbar-mp" id="b-mp" style="width:100%"></div></div>
|
||
<div class="hpill">⭐ Ур.<b id="h-lv">1</b></div>
|
||
<div class="hbar" style="width:75px"><div class="hbar-exp" id="b-exp" style="width:0%"></div></div>
|
||
<div id="hud-right">
|
||
<div class="hpill">💰 <b id="h-gold">50</b></div>
|
||
<div class="hpill">⚔️ <b id="h-atk">10</b> 🛡️ <b id="h-def">5</b></div>
|
||
<span id="btn-mute" onclick="Audio.toggleMute()">🔊</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Сообщения и достижения -->
|
||
<div id="msg-overlay"></div>
|
||
|
||
<!-- ════ BOSS BAR ════ -->
|
||
<div id="boss-bar" style="display:none">
|
||
<div id="boss-bar-name">БОСС</div>
|
||
<div id="boss-bar-track"><div id="boss-bar-fill"></div></div>
|
||
<div id="boss-bar-text">HP</div>
|
||
</div>
|
||
<div id="ach-toast">🏆 <span id="ach-text"></span></div>
|
||
|
||
<!-- ════ ИНВЕНТАРЬ ════ -->
|
||
<div id="inventory-panel" class="panel">
|
||
<div class="ph">
|
||
<span class="ph-title">🎒 Инвентарь</span>
|
||
<button class="ph-close" onclick="Game.togglePanel('inventory')">×</button>
|
||
</div>
|
||
<!-- Вкладки -->
|
||
<div class="inv-tabs">
|
||
<button class="inv-tab active" onclick="Game.switchInvTab('equip')">⚔️ Снаряжение</button>
|
||
<button class="inv-tab" onclick="Game.switchInvTab('items')">🎒 Предметы</button>
|
||
<button class="inv-tab" onclick="Game.switchInvTab('stats')">📊 Статы</button>
|
||
</div>
|
||
<div class="inv-body">
|
||
<!-- Tab: Снаряжение — бумажная кукла -->
|
||
<div id="inv-tab-equip" class="inv-tab-pane active">
|
||
<div class="paperdoll">
|
||
<div class="pd-col">
|
||
<div class="pd-slot" id="pd-head" data-slot="head">🪖<br><small>Шлем</small></div>
|
||
<div class="pd-slot" id="pd-weapon" data-slot="weapon">⚔️<br><small>Оружие</small></div>
|
||
<div class="pd-slot" id="pd-chest" data-slot="chest">🥼<br><small>Броня</small></div>
|
||
</div>
|
||
<canvas id="portrait-inv" width="80" height="120" class="pd-portrait"></canvas>
|
||
<div class="pd-col">
|
||
<div class="pd-slot" id="pd-shield" data-slot="shield">🛡️<br><small>Щит</small></div>
|
||
<div class="pd-slot" id="pd-legs" data-slot="legs">👖<br><small>Поножи</small></div>
|
||
<div class="pd-slot" id="pd-feet" data-slot="feet">👟<br><small>Сапоги</small></div>
|
||
</div>
|
||
</div>
|
||
<div class="pd-acc-row">
|
||
<div class="pd-slot pd-slot-wide" id="pd-acc" data-slot="acc">💍 <small>Украшение</small></div>
|
||
</div>
|
||
</div>
|
||
<!-- Tab: Предметы -->
|
||
<div id="inv-tab-items" class="inv-tab-pane">
|
||
<div class="inv-grid" id="inv-grid"></div>
|
||
</div>
|
||
<!-- Tab: Статы -->
|
||
<div id="inv-tab-stats" class="inv-tab-pane">
|
||
<div id="inv-stats-detail"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════ МАГАЗИН ════ -->
|
||
<div id="shop-panel" class="panel">
|
||
<div class="ph">
|
||
<span class="ph-title">🏪 Магазин</span>
|
||
<button class="ph-close" onclick="Game.togglePanel('shop')">×</button>
|
||
</div>
|
||
<div class="shop-gold">💰 Ваше золото: <strong id="shop-gold-val">0</strong></div>
|
||
<div class="shop-grid" id="shop-grid"></div>
|
||
</div>
|
||
|
||
<!-- ════ КВЕСТЫ ════ -->
|
||
<div id="quest-panel" class="panel">
|
||
<div class="ph">
|
||
<span class="ph-title">📜 Квесты</span>
|
||
<button class="ph-close" onclick="Game.togglePanel('quest')">×</button>
|
||
</div>
|
||
<div class="quest-list" id="quest-list"></div>
|
||
</div>
|
||
|
||
<!-- ════ ДИАЛОГ ════ -->
|
||
<div id="dialog-panel" class="panel">
|
||
<div class="dlg-name" id="dlg-npc-name">NPC</div>
|
||
<div class="dlg-text" id="dlg-text">...</div>
|
||
<div class="dlg-options" id="dlg-options"></div>
|
||
</div>
|
||
|
||
<!-- ════ БОЙ ════ -->
|
||
<div id="combat-panel" class="panel">
|
||
<div class="cbt-head">
|
||
<span class="cbt-title">⚔️ БОЙ</span>
|
||
<span id="cbt-status">Ваш ход</span>
|
||
</div>
|
||
<div class="cbt-body">
|
||
<div class="cbt-fighter" id="cbt-enemy">
|
||
<div class="portrait-wrap">
|
||
<canvas id="portrait-enemy" class="portrait-canvas" width="90" height="100"></canvas>
|
||
<div class="portrait-blink" id="blink-enemy"></div>
|
||
</div>
|
||
<div class="cf-name" id="cf-ename">Враг</div>
|
||
<div class="cf-hpbar"><div class="cf-hpfill cf-enemy" id="cf-ehp" style="width:100%"></div></div>
|
||
<div class="cf-hptext" id="cf-ehpt">HP: 0/0</div>
|
||
<div class="cf-status" id="cf-estatus"></div>
|
||
</div>
|
||
<div class="cbt-fighter" id="cbt-player">
|
||
<div class="portrait-wrap">
|
||
<canvas id="portrait-player" class="portrait-canvas" width="90" height="100"></canvas>
|
||
<div class="portrait-blink" id="blink-player"></div>
|
||
</div>
|
||
<div class="cf-name" id="cf-pname">Герой</div>
|
||
<div class="cf-hpbar"><div class="cf-hpfill cf-player" id="cf-php" style="width:100%"></div></div>
|
||
<div class="cf-hptext" id="cf-phpt">HP: 0/0</div>
|
||
<div class="cf-status" id="cf-pstatus"></div>
|
||
</div>
|
||
</div>
|
||
<div class="cbt-actions" id="cbt-actions"></div>
|
||
<div class="cbt-log" id="cbt-log"></div>
|
||
</div>
|
||
|
||
<!-- ════ СКИЛЛ ════ -->
|
||
<div id="skill-panel" class="panel">
|
||
<div class="ph"><span class="ph-title">✨ Повышение уровня!</span></div>
|
||
<div class="sk-intro">Выберите новый навык:</div>
|
||
<div class="sk-grid" id="sk-grid"></div>
|
||
</div>
|
||
|
||
<!-- ════ ДЕРЕВО ПЕРКОВ ════ -->
|
||
<div id="perk-panel" class="panel">
|
||
<div class="ph">
|
||
<span class="ph-title">🌳 Дерево умений</span>
|
||
<span id="perk-points-display" style="font-size:11px;color:#ffd700;padding:0 10px"></span>
|
||
<button class="ph-close" onclick="Game.togglePanel('perk')">×</button>
|
||
</div>
|
||
<div id="perk-class-name" style="padding:3px 14px;font-size:10px;color:#555;border-bottom:1px solid #1e1e38"></div>
|
||
<div id="perk-branches"></div>
|
||
</div>
|
||
|
||
<!-- ════ ЖУРНАЛ ЛОРА ════ -->
|
||
<div id="lore-panel" class="panel">
|
||
<div class="ph">
|
||
<span class="ph-title">📖 Журнал лора</span>
|
||
<span id="lore-count" style="font-size:10px;color:#778;padding:0 10px"></span>
|
||
<button class="ph-close" onclick="Game.togglePanel('lore')">×</button>
|
||
</div>
|
||
<div id="lore-list"></div>
|
||
</div>
|
||
|
||
<!-- ════ ЗАЧАРОВАНИЕ ════ -->
|
||
<div id="enchant-panel" class="panel">
|
||
<div class="ph">
|
||
<span class="ph-title">✨ Зачарование</span>
|
||
<button class="ph-close" onclick="Game.togglePanel('enchant')">×</button>
|
||
</div>
|
||
<div class="enchant-body">
|
||
<div class="enchant-left">
|
||
<div class="enchant-col-title">Предмет</div>
|
||
<div id="enchant-item-list"></div>
|
||
</div>
|
||
<div class="enchant-right">
|
||
<div class="enchant-col-title">Зачарование</div>
|
||
<div id="enchant-detail"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════ БЕСТИАРИЙ ════ -->
|
||
<div id="bestiary-panel" class="panel">
|
||
<div class="ph">
|
||
<span class="ph-title">📖 Бестиарий</span>
|
||
<button class="ph-close" onclick="Game.togglePanel('bestiary')">×</button>
|
||
</div>
|
||
<div id="bestiary-grid"></div>
|
||
</div>
|
||
|
||
<!-- ════ ДОСТИЖЕНИЯ ════ -->
|
||
<div id="achiev-panel" class="panel">
|
||
<div class="ph">
|
||
<span class="ph-title">🏆 Достижения</span>
|
||
<button class="ph-close" onclick="Game.togglePanel('achiev')">×</button>
|
||
</div>
|
||
<div id="achiev-grid"></div>
|
||
</div>
|
||
|
||
<!-- ════ КРАФТИНГ ════ -->
|
||
<div id="craft-panel" class="panel">
|
||
<div class="ph">
|
||
<span class="ph-title">⚒️ Крафтинг</span>
|
||
<button class="ph-close" onclick="Game.togglePanel('craft')">×</button>
|
||
</div>
|
||
<div style="display:flex;height:460px">
|
||
<div style="width:210px;border-right:1px solid #1e1e38;display:flex;flex-direction:column">
|
||
<div class="craft-tabs" id="craft-tabs"></div>
|
||
<div id="craft-recipe-list" style="overflow-y:auto;flex:1;padding:6px"></div>
|
||
</div>
|
||
<div id="craft-detail" style="flex:1;padding:12px;overflow-y:auto">
|
||
<div style="color:#333;font-size:12px;margin-top:50px;text-align:center">Выберите рецепт</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════ СТАРТОВЫЙ ЭКРАН ════ -->
|
||
<audio id="menu-bgm" src="mainmenu.mp3" loop preload="auto"></audio>
|
||
|
||
<!-- ════ СПЛЭШ ЭКРАН ════ -->
|
||
<div id="splash-screen">
|
||
<canvas id="splash-canvas" width="900" height="600"></canvas>
|
||
<div class="splash-content">
|
||
<div class="splash-eyeline">— Хроники Эйдона —</div>
|
||
<div class="splash-title">ХРОНИКИ<br>ЭЙДОНА</div>
|
||
<div class="splash-subtitle">Изометрическая ролевая игра</div>
|
||
<button class="splash-btn" onclick="splashEnter()">⚔ Начать Путешествие ⚔</button>
|
||
<div class="splash-hint">нажмите для продолжения</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="start-screen" style="display:none">
|
||
<canvas id="menu-canvas" width="900" height="600"></canvas>
|
||
|
||
<div id="menu-main" class="menu-view">
|
||
<div class="s-title">⚔️ Хроники Эйдона ⚔️</div>
|
||
<div class="s-subtitle">Изометрическая RPG</div>
|
||
<div class="s-slots" id="s-slots"></div>
|
||
<button class="s-new-btn" onclick="menuShowClassSelect(null)">+ Новая игра</button>
|
||
<div style="margin-top:10px;display:flex;gap:8px;justify-content:center">
|
||
<button id="btn-save-folder" class="s-folder-btn" onclick="menuSelectSaveFolder()" title="Выбрать папку для JSON-сохранений">📁 Папка сохранений</button>
|
||
<button class="s-folder-btn" onclick="menuExportSaves()" title="Экспортировать сохранения в выбранную папку">💾 Экспорт</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="menu-class" class="menu-view" style="display:none">
|
||
<div class="s-title" style="font-size:26px;margin-bottom:2px">⚔️ Хроники Эйдона ⚔️</div>
|
||
<div id="cls-slot-hint" class="cls-slot-hint">Выберите класс</div>
|
||
<div class="cls-grid" id="cls-grid"></div>
|
||
<button class="s-back-btn" onclick="menuBack()">← Назад</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════ КАРТА МИРА ════ -->
|
||
<div id="worldmap-panel" class="panel">
|
||
<div class="ph">
|
||
<span class="ph-title">🗺️ Карта мира</span>
|
||
<button class="ph-close" onclick="Game.togglePanel('worldmap')">×</button>
|
||
</div>
|
||
<canvas id="worldmap-canvas" width="500" height="300" style="display:block;cursor:pointer;"></canvas>
|
||
<div style="text-align:center;font-size:10px;color:#445;padding:4px 0 6px;">Нажми на соседнюю локацию чтобы переместиться</div>
|
||
</div>
|
||
|
||
<!-- ════ ПАУЗА ════ -->
|
||
<div id="pause-panel" class="panel pause-overlay">
|
||
<div class="pause-box">
|
||
<div class="pause-title">⏸ ПАУЗА</div>
|
||
<button class="pause-btn" onclick="Game.resumeGame()">▶ Продолжить</button>
|
||
<button class="pause-btn" onclick="Game.saveGame()">💾 Сохранить</button>
|
||
<div class="pause-vol">
|
||
<label>🔊 Громкость</label>
|
||
<input type="range" id="vol-slider" min="0" max="100" value="60"
|
||
oninput="Audio.setVolume(this.value/100)">
|
||
</div>
|
||
<button class="pause-btn pause-exit" onclick="Game.exitToMenu()">🚪 Выйти в меню</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Хинт взаимодействия -->
|
||
<div id="interact-hint"></div>
|
||
|
||
<!-- Индикатор сохранения -->
|
||
<div id="save-ind">💾 Сохранено</div>
|
||
</div>
|
||
|
||
<!-- Управление -->
|
||
<div style="margin-top:8px;font-size:10px;color:#333;text-align:center">
|
||
<span style="background:#0d0d1a;border:1px solid #2a2a4a;border-radius:3px;padding:1px 5px;color:#666">WASD/↑↓←→</span> движение
|
||
<span style="background:#0d0d1a;border:1px solid #2a2a4a;border-radius:3px;padding:1px 5px;color:#666">I</span> инвентарь
|
||
<span style="background:#0d0d1a;border:1px solid #2a2a4a;border-radius:3px;padding:1px 5px;color:#666">Q</span> квесты
|
||
<span style="background:#0d0d1a;border:1px solid #2a2a4a;border-radius:3px;padding:1px 5px;color:#666">T</span> таланты
|
||
<span style="background:#0d0d1a;border:1px solid #2a2a4a;border-radius:3px;padding:1px 5px;color:#666">C</span> крафтинг
|
||
<span style="background:#0d0d1a;border:1px solid #2a2a4a;border-radius:3px;padding:1px 5px;color:#666">L</span> журнал
|
||
<span style="background:#0d0d1a;border:1px solid #2a2a4a;border-radius:3px;padding:1px 5px;color:#666">E</span> зачарование
|
||
<span style="background:#0d0d1a;border:1px solid #2a2a4a;border-radius:3px;padding:1px 5px;color:#666">B</span> бестиарий
|
||
<span style="background:#0d0d1a;border:1px solid #2a2a4a;border-radius:3px;padding:1px 5px;color:#666">H</span> достижения
|
||
<span style="background:#0d0d1a;border:1px solid #2a2a4a;border-radius:3px;padding:1px 5px;color:#666">M</span> карта/путь
|
||
<span style="background:#0d0d1a;border:1px solid #2a2a4a;border-radius:3px;padding:1px 5px;color:#666">P</span> сохранить
|
||
<span style="background:#0d0d1a;border:1px solid #2a2a4a;border-radius:3px;padding:1px 5px;color:#666">1-5</span> бой
|
||
<span style="background:#0d0d1a;border:1px solid #2a2a4a;border-radius:3px;padding:1px 5px;color:#666">F</span> взаимодействие
|
||
<span style="background:#0d0d1a;border:1px solid #2a2a4a;border-radius:3px;padding:1px 5px;color:#666">ESC</span> закрыть
|
||
</div>
|
||
|
||
<script src="renderer.js"></script>
|
||
<script src="rpg.js"></script>
|
||
<script src="saves.js"></script>
|
||
<script src="audio.js"></script>
|
||
<script src="game.js"></script>
|
||
<script src="data-loader.js"></script>
|
||
<script src="menu.js"></script>
|
||
</body>
|
||
</html>
|