Skip to content

Commit a708cdd

Browse files
author
NBL Agent
committed
feat(ui): 成品级 Dark Analytical Arena 界面重构
- Battle Axis：菱形 VS 徽章 + 轴线，确立页面中心视觉 - Player Cards：镜像对称、Level 独立视觉层级、BP 大数字 + 双向百分比差值 - Rarity：12 档 CSS 分级徽章（t0-t11），SSS 起金属质感，Collector ◆ 标记 - Battle HUD：ROUND/IN BATTLE/FINISHED 状态轴、低血量警示态、阵亡灰态 - Control Bar：集中式控制条（Primary 开始 / Secondary 再战 / 速度 segmented） - Battle Log：结构化事件流（ROUND|EVENT|VALUE），CRIT 标签，空态占位 - Result：横向终局卡（胜者 + 剩余 HP + 再战），按胜方着色 - 4K：rem 体系 + 2400/3300px 断点放大，2.5K/4K 不再蚂蚁字 - Mobile：卡片纵堆、HUD 重排、stats 双列紧凑、无横向溢出 - 战斗逻辑零改动；npm test 31 绿；verify 全过（BP 审计 ρ=0.9939）
1 parent a922927 commit a708cdd

3 files changed

Lines changed: 526 additions & 269 deletions

File tree

‎index.html‎

Lines changed: 57 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,16 @@
1111

1212
<!-- ===================== HEADER ===================== -->
1313
<header class="site-header">
14-
<h1>数值卡牌 · 自动 PK</h1>
15-
<p class="sub">选两张卡 → 调等级 → 开始战斗 → 看谁赢 · 等级、稀有度与属性决定战斗表现；Battle Power 评价综合实力</p>
14+
<div class="brand">
15+
<h1>数值卡牌 · 自动 PK</h1>
16+
<p class="sub">选两张卡 → 调等级 → 开始战斗 → 看谁赢 · 等级、稀有度与属性决定战斗表现；Battle Power 评价综合实力</p>
17+
</div>
18+
<div class="header-meta" aria-hidden="true">
19+
<span>24 CARDS</span><i></i><span>12 RARITY</span><i></i><span>SEEDED RNG</span>
20+
</div>
1621
</header>
1722

18-
<!-- ===================== PLAYER CARDS ===================== -->
23+
<!-- ===================== PLAYER CARDS + BATTLE AXIS ===================== -->
1924
<div class="setup" id="setup">
2025
<section class="pcard blue" id="panelA">
2126
<div class="pcard-top">
@@ -29,21 +34,29 @@ <h1>数值卡牌 · 自动 PK</h1>
2934
<span class="role-badge" id="roleA"></span>
3035
</div>
3136
<div class="cdesc" id="descA"></div>
32-
<div class="lvl-row">
37+
</div>
38+
<div class="lvl-block">
39+
<div class="lvl-head">
3340
<label for="lvlA">LEVEL</label>
34-
<input type="range" id="lvlA" min="1" max="100" value="50">
3541
<span class="lvl-val" id="lvlAVal">Lv.50</span>
3642
</div>
43+
<input type="range" id="lvlA" min="1" max="100" value="50">
3744
</div>
3845
<div class="bp-block">
3946
<span class="bp-label">BATTLE POWER</span>
40-
<span class="bp-value" id="bpA">—</span>
41-
<span class="bp-delta" id="bpDeltaA"></span>
47+
<div class="bp-main">
48+
<span class="bp-value" id="bpA">—</span>
49+
<span class="bp-delta" id="bpDeltaA"></span>
50+
</div>
4251
</div>
4352
<div class="stats-grid" id="statsA"></div>
4453
</section>
4554

46-
<div class="vs-col"><div class="vs">VS</div></div>
55+
<div class="vs-col" aria-hidden="true">
56+
<div class="axis-line"></div>
57+
<div class="vs"><span>VS</span></div>
58+
<div class="axis-line"></div>
59+
</div>
4760

4861
<section class="pcard red" id="panelB">
4962
<div class="pcard-top">
@@ -57,16 +70,20 @@ <h1>数值卡牌 · 自动 PK</h1>
5770
<span class="role-badge" id="roleB"></span>
5871
</div>
5972
<div class="cdesc" id="descB"></div>
60-
<div class="lvl-row">
73+
</div>
74+
<div class="lvl-block">
75+
<div class="lvl-head">
6176
<label for="lvlB">LEVEL</label>
62-
<input type="range" id="lvlB" min="1" max="100" value="50">
6377
<span class="lvl-val" id="lvlBVal">Lv.50</span>
6478
</div>
79+
<input type="range" id="lvlB" min="1" max="100" value="50">
6580
</div>
6681
<div class="bp-block">
6782
<span class="bp-label">BATTLE POWER</span>
68-
<span class="bp-value" id="bpB">—</span>
69-
<span class="bp-delta" id="bpDeltaB"></span>
83+
<div class="bp-main">
84+
<span class="bp-value" id="bpB">—</span>
85+
<span class="bp-delta" id="bpDeltaB"></span>
86+
</div>
7087
</div>
7188
<div class="stats-grid" id="statsB"></div>
7289
</section>
@@ -86,7 +103,8 @@ <h1>数值卡牌 · 自动 PK</h1>
86103

87104
<div class="round-center">
88105
<div class="round-label">ROUND</div>
89-
<div class="round-value" id="roundTxt">—</div>
106+
<div class="round-value" id="roundTxt">--</div>
107+
<div class="hud-state" id="hudState">READY</div>
90108
</div>
91109

92110
<div class="hud-side red">
@@ -102,15 +120,18 @@ <h1>数值卡牌 · 自动 PK</h1>
102120

103121
<!-- ===================== BATTLE CONTROL BAR ===================== -->
104122
<section class="control-bar">
105-
<div class="ctrl-btns">
106-
<button id="startBtn" class="btn primary">▶ 开始战斗</button>
107-
<button id="againBtn" class="btn secondary">↻ 再战</button>
108-
</div>
109-
<div class="speed-seg" role="group" aria-label="播放速度">
110-
<span class="speed-label">SPEED</span>
111-
<button class="spdbtn on" data-speed="slow">慢</button>
112-
<button class="spdbtn" data-speed="fast">快</button>
113-
<button class="spdbtn" data-speed="instant">瞬</button>
123+
<div class="ctrl-inner">
124+
<div class="ctrl-btns">
125+
<button id="startBtn" class="btn primary">▶ 开始战斗</button>
126+
<button id="againBtn" class="btn secondary">↻ 再战</button>
127+
</div>
128+
<div class="ctrl-div" aria-hidden="true"></div>
129+
<div class="speed-seg" role="group" aria-label="播放速度">
130+
<span class="speed-label">SPEED</span>
131+
<button class="spdbtn on" data-speed="slow">慢</button>
132+
<button class="spdbtn" data-speed="fast">快</button>
133+
<button class="spdbtn" data-speed="instant">瞬</button>
134+
</div>
114135
</div>
115136
</section>
116137

@@ -120,18 +141,24 @@ <h1>数值卡牌 · 自动 PK</h1>
120141
<span>BATTLE&nbsp;LOG</span>
121142
<span class="log-count" id="logCount">0 EVENTS</span>
122143
</div>
123-
<div class="logbox" id="logbox"></div>
144+
<div class="logbox" id="logbox"><div class="log-empty">STANDBY · 等待战斗开始</div></div>
124145
</section>
125146

126147
<!-- ===================== BATTLE RESULT ===================== -->
127148
<section class="result-panel" id="resultBox" style="display:none">
128-
<div class="result-title" id="resultTitle">🏆 VICTORY</div>
129-
<div class="result-name" id="resultName">—</div>
130-
<div class="result-meta" id="resultMeta"></div>
131-
<div class="result-hp-label">剩余生命</div>
132-
<div class="result-hp" id="resultHp">— / —</div>
133-
<div class="result-pct" id="resultPct">—</div>
134-
<button id="resultAgainBtn" class="btn primary">↻ 再战</button>
149+
<div class="result-left">
150+
<div class="result-title" id="resultTitle">🏆 VICTORY</div>
151+
<div class="result-name" id="resultName">—</div>
152+
<div class="result-meta" id="resultMeta"></div>
153+
</div>
154+
<div class="result-right">
155+
<div class="result-hp-block">
156+
<div class="result-hp-label">REMAINING HP</div>
157+
<div class="result-hp" id="resultHp">— / —</div>
158+
<div class="result-pct" id="resultPct">—</div>
159+
</div>
160+
<button id="resultAgainBtn" class="btn primary">↻ 再战</button>
161+
</div>
135162
</section>
136163

137164
</div>

‎src/app.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
const M = (typeof module !== 'undefined' && module.exports)
1212
? Object.assign({}, require('./power.js'), require('./battle.js'))
1313
: global.NCB;
14-
const { CARDS, RARITY_LIST, RARITY_COLOR, buildUnit, battlePower, fmt, statRows, STAT_LABELS, simulate, applyEvents } = M;
14+
const { CARDS, RARITY_LIST, buildUnit, battlePower, fmt, statRows, STAT_LABELS, simulate, applyEvents } = M;
1515

1616
const SPEEDS = { slow: 120, fast: 45, instant: 0 };
1717

@@ -107,10 +107,9 @@
107107
// ---- 渲染一侧 Player Card（identity + BP + BP 差值 + stats） ----
108108
function renderSide(side, unit, deltaInfo) {
109109
const card = CARDS[unit.cardId] || currentCard(side);
110-
const rc = RARITY_COLOR[unit.rarityName];
111110
el('name' + side).textContent = card.name;
112111
el('rar' + side).textContent = unit.rarityName;
113-
el('rar' + side).style.background = rc;
112+
el('rar' + side).className = 'rar-badge t' + card.rarity;
114113
el('role' + side).textContent = card.role;
115114
el('desc' + side).textContent = card.desc;
116115
el('lvl' + side + 'Val').textContent = 'Lv.' + unit.level;
@@ -266,11 +265,15 @@
266265
prepareArena(cardA, cardB);
267266
updateBar('A', result.a.maxHp, result.a.maxHp);
268267
updateBar('B', result.b.maxHp, result.b.maxHp);
268+
if (hudState) hudState.textContent = 'IN BATTLE';
269+
if (battleHud) battleHud.classList.add('live');
269270

270271
const delayMs = () => new Promise((r) => setTimeout(r, state.delay));
271272
await applyEvents(result.events, applyEntry, delayMs);
272273

273274
showResult(result);
275+
if (hudState) hudState.textContent = 'FINISHED';
276+
if (battleHud) battleHud.classList.remove('live');
274277
setControlsLocked(false);
275278
state.playing = false;
276279
}

0 commit comments

Comments
 (0)