HEROLL/mvp/index.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="theme-color" content="#11101d" />
    <title>HEROLL 玩法验证 MVP</title>
    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='10' fill='%23503b62'/%3E%3Ccircle cx='19' cy='19' r='5' fill='%23ffe77f'/%3E%3Ccircle cx='45' cy='45' r='5' fill='%23ffe77f'/%3E%3C/svg%3E" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <main id="app" aria-label="HEROLL 玩法验证 MVP">
      <div id="legal-strip">仅限本机内部验证 · 不得公开或分发</div>

      <section id="start-screen" class="screen active">
        <div class="start-art" aria-hidden="true"></div>
        <div class="title-mark">
          <small>10 层 · 公平双骰 · 单机 H5</small>
          <h1>HEROLL</h1>
          <p>玩法验证 MVP</p>
        </div>
        <div class="start-actions panel">
          <label class="seed-field">种子 <input id="seed-input" maxlength="32" autocomplete="off" /></label>
          <button id="new-run-button" class="button primary">开始新局</button>
          <button id="continue-button" class="button secondary" hidden>继续安全点</button>
          <button id="clear-save-button" class="button ghost" hidden>清除本局存档</button>
          <p class="scope-note">无账号、局外成长、体力、抽卡、付费和广告按钮。</p>
        </div>
      </section>

      <section id="game-screen" class="screen">
        <header id="top-hud">
          <div class="resource-chip"><span class="point-gem">◆</span><strong id="points-value">0</strong></div>
          <div id="auto-indicator" aria-label="自动模式关闭">AUTO</div>
          <button id="pause-button" class="icon-button" aria-label="暂停">Ⅱ</button>
        </header>

        <div id="board-view" class="play-view active">
          <div class="scene-back"></div>
          <div id="boss-figure" aria-hidden="true"></div>
          <div id="board-ring" aria-label="十格逻辑棋盘，四十格表现路径"></div>
          <div id="hero-marker" aria-label="玩家位置"></div>
          <aside id="floor-meter" data-mode="BUILDUP" aria-label="Boss：玩家 ROLL 两次后开始四次 ROLL 倒计时，结束时转换四个地块">
            <span class="boss-meter-icon"></span>
            <div class="meter-rail"><i id="floor-meter-fill"></i></div>
            <span class="floor-step-icon"></span>
            <strong id="floor-value">0/2</strong>
          </aside>
          <div id="floor-banner" aria-live="polite"></div>
        </div>

        <div id="battle-view" class="play-view">
          <div class="battle-sky"></div>
          <div id="battle-versus" aria-label="双方生命对比">
            <i class="versus-player"></i><strong>VS</strong><i class="versus-enemy"></i>
          </div>
          <div id="battle-enemies"></div>
          <div id="battle-player" class="combatant player">
            <div class="pixel-fighter player-silhouette"></div>
            <div class="entity-name">剑士</div>
          </div>
          <div id="battle-log" aria-live="polite"></div>
          <div id="battle-speed" hidden>1×</div>
          <div id="battle-announcer" aria-live="assertive"></div>
        </div>

        <div id="dice-result" aria-live="polite"></div>

        <footer id="bottom-hud">
          <div class="hp-row">
            <span class="level-diamond" id="hud-floor">1</span>
            <div class="bar hp"><i id="hp-fill"></i><strong id="hp-label">150/150</strong></div>
            <div class="battle-mode-lock" aria-label="战斗速度锁定为一倍">» 🔒</div>
          </div>
          <div id="gear-slots" aria-label="装备槽">
            <button data-slot="WEAPON" title="武器">⚔</button>
            <button data-slot="RING" title="戒指">◉</button>
            <button data-slot="GAUNTLET" title="护手">✊</button>
            <button data-slot="BOOTS" title="鞋子">♞</button>
          </div>
          <div class="action-row">
            <button id="debug-toggle" class="map-button" aria-label="地图与调试台"><span></span></button>
            <button id="roll-button" class="roll-button">ROLL</button>
            <button id="potion-button" class="potion-button"><span></span><strong id="potion-count">1/1</strong></button>
          </div>
        </footer>
      </section>

      <div id="modal-layer" aria-live="polite"></div>
      <div id="toast-layer" aria-live="polite"></div>
      <div id="tutorial-layer"></div>

      <aside id="debug-panel" class="panel" hidden>
        <div class="debug-title"><strong>验证调试台</strong><button id="debug-close">×</button></div>
        <label>种子 <output id="debug-seed"></output></label>
        <label>楼层 <input id="debug-floor" type="number" min="1" max="10" /></label>
        <label>点数 <input id="debug-points" type="number" min="0" max="999" /></label>
        <div class="debug-grid">
          <button data-debug="apply">应用</button>
          <button data-debug="chest">宝箱</button>
          <button data-debug="campfire">营火</button>
          <button data-debug="smithy">铁匠</button>
          <button data-debug="blessing">祝福</button>
          <button data-debug="dig">挖掘</button>
          <button data-debug="merchant">商人</button>
          <button data-debug="legend">传奇装备</button>
          <button data-debug="lotto">彩票</button>
          <button data-debug="blackjack">21点</button>
          <button data-debug="claw">抓娃娃</button>
          <button data-debug="carriage">黄金马车</button>
          <button data-debug="machine">骰子机</button>
          <button data-debug="bubble">泡泡龙</button>
          <button data-debug="battle">战斗</button>
          <button data-debug="win">结束战斗</button>
          <button data-debug="death">强制死亡</button>
          <button data-debug="boss">跳到 Boss</button>
          <button data-debug="speed">战斗 4×</button>
          <button data-debug="export">导出日志</button>
        </div>
      </aside>
    </main>
    <script type="module" src="./dist/main.js"></script>
  </body>
</html>