179 lines
7.9 KiB (Stored with Git LFS)
Plaintext
179 lines
7.9 KiB (Stored with Git LFS)
Plaintext
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>보스 레이드 제어판</title>
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body>
|
|
<!-- 연결 상태 -->
|
|
<div id="connection-bar">
|
|
<span id="connection-status">연결 끊김</span>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h1>보스 레이드 제어판</h1>
|
|
|
|
<!-- 보스 상태 -->
|
|
<section class="panel" id="status-panel">
|
|
<h2>보스 상태</h2>
|
|
<div class="boss-info">
|
|
<div class="boss-name" id="boss-name">-</div>
|
|
<div class="raid-state" id="raid-state">대기</div>
|
|
</div>
|
|
<div class="hp-bar-container">
|
|
<div class="hp-bar-bg">
|
|
<div class="hp-bar-fill" id="hp-bar-fill"></div>
|
|
</div>
|
|
<div class="hp-text" id="hp-text">0 / 0 (0%)</div>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">페이즈</span>
|
|
<span class="stat-value" id="phase-name">-</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">상태</span>
|
|
<span class="stat-value" id="boss-state">-</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 레이드 제어 -->
|
|
<section class="panel">
|
|
<h2>레이드 제어</h2>
|
|
<div class="btn-row">
|
|
<button class="btn btn-green btn-large" onclick="send('start_raid')">레이드 시작</button>
|
|
<button class="btn btn-red btn-large" onclick="send('stop_raid')">레이드 종료</button>
|
|
</div>
|
|
<div class="btn-row" style="margin-top:8px;">
|
|
<button class="btn btn-yellow btn-large" id="pause-btn" onclick="send('toggle_pause')">일시정지</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 공격 제어 -->
|
|
<section class="panel">
|
|
<h2>공격</h2>
|
|
<div class="btn-row">
|
|
<button class="btn btn-blue btn-large" onclick="send('auto_hit')">자동 공격</button>
|
|
</div>
|
|
<div class="input-row">
|
|
<label>수동 데미지</label>
|
|
<input type="number" id="manual-damage" value="50" min="1" max="9999">
|
|
<button class="btn btn-blue" onclick="manualHit(false)">공격</button>
|
|
<button class="btn btn-orange" onclick="manualHit(true)">크리티컬!</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- HP 조절 -->
|
|
<section class="panel">
|
|
<h2>HP 조절</h2>
|
|
<div class="input-row">
|
|
<input type="range" id="hp-slider" min="0" max="100" value="100" oninput="hpSliderChanged()">
|
|
<span id="hp-slider-value">100%</span>
|
|
<button class="btn btn-blue" onclick="setHP()">설정</button>
|
|
</div>
|
|
<div class="btn-row btn-grid">
|
|
<button class="btn btn-outline" onclick="send('set_hp', {ratio:1.0})">100%</button>
|
|
<button class="btn btn-outline" onclick="send('set_hp', {ratio:0.75})">75%</button>
|
|
<button class="btn btn-outline" onclick="send('set_hp', {ratio:0.5})">50%</button>
|
|
<button class="btn btn-outline" onclick="send('set_hp', {ratio:0.25})">25%</button>
|
|
<button class="btn btn-outline" onclick="send('set_hp', {ratio:0.1})">10%</button>
|
|
<button class="btn btn-outline" onclick="send('set_hp', {ratio:0.01})">1%</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 페이즈 & 처치 -->
|
|
<section class="panel">
|
|
<h2>페이즈 & 처치</h2>
|
|
<div class="btn-row btn-grid">
|
|
<button class="btn btn-outline" onclick="send('force_phase', {phase:0})">페이즈 1</button>
|
|
<button class="btn btn-outline" onclick="send('force_phase', {phase:1})">페이즈 2</button>
|
|
<button class="btn btn-outline" onclick="send('force_phase', {phase:2})">페이즈 3</button>
|
|
</div>
|
|
<div class="btn-row" style="margin-top:12px;">
|
|
<button class="btn btn-red btn-large btn-kill" onclick="confirmKill()">강제 처치</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 유저 상태 -->
|
|
<section class="panel" id="player-panel">
|
|
<h2>유저</h2>
|
|
<div class="boss-info">
|
|
<div class="boss-name">HP</div>
|
|
<div class="raid-state" id="player-state">-</div>
|
|
</div>
|
|
<div class="hp-bar-container">
|
|
<div class="hp-bar-bg">
|
|
<div class="hp-bar-fill player-hp" id="player-hp-fill"></div>
|
|
</div>
|
|
<div class="hp-text" id="player-hp-text">0 / 0</div>
|
|
</div>
|
|
<div class="btn-row" style="margin-top:8px;">
|
|
<button class="btn btn-green" onclick="send('heal_player')">전체 회복</button>
|
|
<button class="btn btn-outline" onclick="send('set_player_hp', {ratio:0.5})">50%</button>
|
|
<button class="btn btn-outline" onclick="send('set_player_hp', {ratio:0.25})">25%</button>
|
|
</div>
|
|
<div class="btn-row" style="margin-top:8px;">
|
|
<button class="btn btn-yellow" id="god-mode-btn" onclick="toggleGodMode()">무적 모드</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 보스 공격 -->
|
|
<section class="panel">
|
|
<h2>보스 공격</h2>
|
|
<div class="btn-row">
|
|
<button class="btn btn-orange btn-large" onclick="send('boss_breath')">브레스</button>
|
|
<button class="btn btn-red btn-large" onclick="send('boss_slam')">내려찍기</button>
|
|
</div>
|
|
<div class="btn-row" style="margin-top:8px;">
|
|
<button class="btn btn-red btn-large btn-kill" onclick="send('boss_rage_burst')">분노 폭발</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 볼륨 조절 -->
|
|
<section class="panel">
|
|
<h2>볼륨</h2>
|
|
<div class="input-row">
|
|
<label>BGM</label>
|
|
<input type="range" id="bgm-volume" min="0" max="100" value="50" oninput="bgmVolumeChanged()">
|
|
<span id="bgm-volume-value">50%</span>
|
|
</div>
|
|
<div class="input-row">
|
|
<label>효과음</label>
|
|
<input type="range" id="sfx-volume" min="0" max="100" value="100" oninput="sfxVolumeChanged()">
|
|
<span id="sfx-volume-value">100%</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 안전 설정 -->
|
|
<section class="panel">
|
|
<h2>안전 설정</h2>
|
|
<div class="input-row">
|
|
<label>히트 쿨타임 (초)</label>
|
|
<input type="number" id="cooldown" value="0.3" min="0" max="5" step="0.1">
|
|
<button class="btn btn-outline" onclick="setCooldown()">설정</button>
|
|
</div>
|
|
<div class="input-row">
|
|
<label>데미지 캡 (0=해제)</label>
|
|
<input type="number" id="damage-cap" value="0" min="0" max="9999">
|
|
<button class="btn btn-outline" onclick="setDamageCap()">설정</button>
|
|
</div>
|
|
<div class="input-row">
|
|
<label>HP 잠금 %</label>
|
|
<input type="range" id="hp-lock-slider" min="0" max="100" value="0" oninput="hpLockChanged()">
|
|
<span id="hp-lock-value">0%</span>
|
|
<button class="btn btn-outline" onclick="setHPLock()">설정</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 히트 로그 -->
|
|
<section class="panel">
|
|
<h2>히트 로그</h2>
|
|
<div class="log-container" id="hit-log"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="/script.js"></script>
|
|
</body>
|
|
</html>
|