Initial card game asset pipeline

This commit is contained in:
2026-06-10 02:04:38 +09:00
commit 5c09106125
27 changed files with 73502 additions and 0 deletions

102
index.html Normal file
View File

@@ -0,0 +1,102 @@
<!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="styles.css" />
</head>
<body>
<div class="app-shell">
<header class="topbar">
<div class="brand">
<span class="brand-mark" aria-hidden="true"></span>
<div>
<h1>오행 카드 결투</h1>
<p>수 · 금 · 지 · 화 · 목 상성으로 겨루는 판타지 카드 배틀</p>
</div>
</div>
<div class="meta-strip" aria-label="덱 구성">
<span>1-5성</span>
<span>1000명 캐릭터</span>
<span>여성 캐릭터 전용</span>
<span>원화 <b id="assetProgress">0 / 5000</b></span>
<span>성인 캐릭터</span>
</div>
</header>
<main>
<section class="battlefield" aria-label="전장">
<article class="fighter-pane">
<div class="pane-head">
<span class="side-label">플레이어</span>
<strong id="playerStatus">대기</strong>
</div>
<div id="playerCard" class="card-slot"></div>
</article>
<section class="command-panel" aria-label="전투 조작">
<div class="round-display">
<span class="round-kicker">ROUND</span>
<strong id="roundNumber">0</strong>
</div>
<div id="matchupPanel" class="matchup-panel">
<span class="muted">카드를 뽑으면 상성이 표시됩니다.</span>
</div>
<div class="actions">
<button id="drawButton" type="button">카드 뽑기</button>
<button id="attackButton" type="button" disabled>공격</button>
<button id="autoButton" type="button" disabled>자동 전투</button>
</div>
<div class="cycle-board" aria-label="오행 상성">
<span class="element-token water"></span>
<span class="beats"></span>
<span class="element-token fire"></span>
<span class="beats"></span>
<span class="element-token metal"></span>
<span class="beats"></span>
<span class="element-token wood"></span>
<span class="beats"></span>
<span class="element-token earth"></span>
<span class="beats"></span>
<span class="element-token water"></span>
</div>
<div class="battle-log" aria-live="polite">
<div class="log-title">전투 로그</div>
<ol id="battleLog"></ol>
</div>
</section>
<article class="fighter-pane">
<div class="pane-head">
<span class="side-label">상대</span>
<strong id="enemyStatus">대기</strong>
</div>
<div id="enemyCard" class="card-slot"></div>
</article>
</section>
<section class="collection" aria-label="캐릭터 로스터">
<div class="section-head">
<h2>캐릭터 로스터</h2>
<p><span id="characterCount">1000</span>명 모두 고유 이름과 서로 다른 성향 · 포즈 · 장비 · 출신 조합을 가집니다.</p>
</div>
<div id="rosterGrid" class="roster-grid"></div>
</section>
</main>
</div>
<template id="emptyCardTemplate">
<div class="empty-card">
<span class="empty-mark"></span>
<strong>카드 없음</strong>
</div>
</template>
<script src="main.js"></script>
</body>
</html>