Add battle death stats and HUD updates
This commit is contained in:
+90
-16
@@ -1,17 +1,94 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<html lang="ko" class="app-booting">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Arena Picker</title>
|
||||
<style>
|
||||
html.app-booting,
|
||||
html.app-booting body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
min-height: 100%;
|
||||
background: #080a07;
|
||||
}
|
||||
|
||||
html.app-booting #app {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="/src/styles.css" data-app-styles />
|
||||
</head>
|
||||
<body>
|
||||
<main id="app">
|
||||
<section class="fighter-entry" aria-label="대전 참가자 입력">
|
||||
<div class="entry-copy">
|
||||
<p class="eyebrow">Arena Picker</p>
|
||||
<h1>팀 전투 뽑기</h1>
|
||||
<p id="visitor-count" class="visitor-count" aria-live="polite">방문자 확인 중</p>
|
||||
<main id="app" class="intro-mode">
|
||||
<section class="arena-shell" aria-label="전투 경기장">
|
||||
<div id="scoreboard" class="scoreboard">
|
||||
<div id="score-left" class="score-side left"></div>
|
||||
<div id="score-right" class="score-side right"></div>
|
||||
</div>
|
||||
<div id="battle-notice" class="battle-notice" role="status" aria-live="polite" aria-hidden="true"></div>
|
||||
<div id="game"></div>
|
||||
<div class="battle-preview" aria-hidden="true">
|
||||
<span class="preview-fighter preview-knight"></span>
|
||||
<span class="preview-fighter preview-orc"></span>
|
||||
<span class="preview-fighter preview-wizard"></span>
|
||||
<span class="preview-strike preview-strike-a"></span>
|
||||
<span class="preview-strike preview-strike-b"></span>
|
||||
</div>
|
||||
<section
|
||||
id="kill-log"
|
||||
class="kill-log"
|
||||
aria-label="킬로그"
|
||||
aria-live="polite"
|
||||
aria-relevant="additions"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<ol id="kill-log-list" class="kill-log-list"></ol>
|
||||
</section>
|
||||
<div id="match-status" class="match-status" role="status" aria-live="polite" aria-hidden="true">
|
||||
<div class="status-track">
|
||||
<span data-status-text>옵션 대기 중</span>
|
||||
<span data-status-text>옵션 대기 중</span>
|
||||
</div>
|
||||
</div>
|
||||
<p id="visitor-count" class="visitor-count" aria-live="polite">방문자 확인 중</p>
|
||||
</section>
|
||||
|
||||
<section class="intro-stage" aria-label="Arena 시작 화면">
|
||||
<div class="intro-content">
|
||||
<h1 class="arena-logo">Arena</h1>
|
||||
<button
|
||||
id="start-button"
|
||||
class="start-button"
|
||||
type="button"
|
||||
aria-controls="fighter-entry"
|
||||
aria-expanded="false"
|
||||
>
|
||||
Start
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<button id="drawer-scrim" class="drawer-scrim" type="button" aria-label="옵션 닫기"></button>
|
||||
|
||||
<aside id="fighter-entry" class="fighter-entry" aria-label="전투 옵션 입력" aria-hidden="true">
|
||||
<div class="drawer-header">
|
||||
<div class="entry-copy">
|
||||
<p class="eyebrow">Match Options</p>
|
||||
<h2>전투 설정</h2>
|
||||
</div>
|
||||
<div class="drawer-header-controls">
|
||||
<button
|
||||
id="drawer-toggle"
|
||||
class="drawer-toggle"
|
||||
type="button"
|
||||
aria-controls="fighter-entry"
|
||||
aria-expanded="true"
|
||||
>
|
||||
옵션 접기
|
||||
</button>
|
||||
<button id="drawer-close" class="drawer-close" type="button" aria-label="옵션 닫기">X</button>
|
||||
</div>
|
||||
</div>
|
||||
<form id="fighter-form" autocomplete="off">
|
||||
<fieldset>
|
||||
@@ -36,16 +113,13 @@ Player 10</textarea>
|
||||
</div>
|
||||
<input id="team-size" name="teamSize" type="range" min="1" max="100" value="5" />
|
||||
</fieldset>
|
||||
<button type="submit">전투 시작</button>
|
||||
<div class="match-actions">
|
||||
<button type="submit">전투 시작</button>
|
||||
<button id="restart-button" class="restart-button" type="button">재시작</button>
|
||||
<button id="pause-button" class="pause-button" type="button" aria-pressed="false">일시정지</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
<section class="arena-shell" aria-label="전투 경기장">
|
||||
<div id="scoreboard" class="scoreboard">
|
||||
<div id="score-left" class="score-side left"></div>
|
||||
<div id="score-right" class="score-side right"></div>
|
||||
</div>
|
||||
<div id="game"></div>
|
||||
</section>
|
||||
</aside>
|
||||
</main>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user