Emberfall/public/game.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Emberfall — Dashboard</title>
  <link rel="stylesheet" href="/css/main.css">
</head>
<body>
  <div class="game-container">
    <!-- Top bar -->
    <header class="top-bar">
      <div class="logo">Emberfall</div>
      <div class="user-info">
        <span id="player-name"></span>
        <a href="/api/auth/logout" id="logout-btn">Logout</a>
      </div>
    </header>

    <!-- Main content (3-col on desktop, stacks on mobile) -->
    <main class="main-content">
      <!-- Left column: Stats -->
      <section class="panel stats-panel" id="stats-panel">
        <h3>Your Hero</h3>
        <div id="hero-loading" class="loading">Loading...</div>
        <div id="hero-error" class="error" style="display:none;"></div>
        <div id="hero-stats" style="display:none;">
          <div class="stat-row">
            <span class="label">Name:</span>
            <span id="char-name"></span>
          </div>
          <div class="stat-row">
            <span class="label">Class:</span>
            <span id="char-class"></span>
          </div>
          <div class="stat-row">
            <span class="label">Level:</span>
            <span id="char-level"></span>
          </div>
          <div class="stat-row">
            <span class="label">HP:</span>
            <span id="char-hp"></span>
          </div>
          <div class="stat-row">
            <span class="label">Energy:</span>
            <span id="char-energy"></span>
          </div>
          <div class="energy-bar-container">
            <div class="energy-bar" id="energy-bar"></div>
          </div>
          <div class="energy-timer" id="energy-timer"></div>
          <div class="stat-row">
            <span class="label">Gold:</span>
            <span id="char-gold"></span>
          </div>
          <div class="stat-row">
            <span class="label">XP:</span>
            <span id="char-xp"></span>
          </div>
          <div class="stat-row">
            <span class="label">STR:</span><span id="char-str"></span>
            <span class="label">AGI:</span><span id="char-agi"></span>
            <span class="label">INT:</span><span id="char-int"></span>
            <span class="label">VIT:</span><span id="char-vit"></span>
          </div>
          <div class="stat-row derived">
            <span>ATK: <span id="derived-atk"></span></span>
            <span>DEF: <span id="derived-def"></span></span>
            <span>SPD: <span id="derived-spd"></span></span>
            <span>Crit: <span id="derived-crit"></span>%</span>
          </div>
        </div>
        <!-- Stat allocation UI (shown when unspent points > 0) -->
        <div id="allocation-section" style="display:none;">
          <h4>Allocate Points (<span id="unspent-points">0</span> left)</h4>
          <div id="alloc-rows"></div>
          <div id="alloc-actions">
            <div id="alloc-total" class="alloc-total">Allocated: 0</div>
            <button id="alloc-apply-btn" class="btn-alloc-apply" disabled>Apply</button>
          </div>
        </div>
      </section>

      <!-- Center column: Tabs + action area -->
      <section class="panel action-panel" id="action-panel">
        <div class="tabs" role="tablist">
          <button class="tab active" data-tab="hunt" role="tab" aria-selected="true">Hunt</button>
          <button class="tab" data-tab="expedition" role="tab" aria-selected="false">Expedition</button>
          <button class="tab" data-tab="inventory" role="tab" aria-selected="false">Inventory</button>
        </div>
        <div id="hunt-tab">
          <div id="zone-list" class="zone-list">
            <p class="loading">Loading zones...</p>
          </div>
        </div>
        <div id="expedition-tab" style="display:none;">
          <div id="expedition-status"></div>
          <div id="expedition-defs" class="expedition-defs"></div>
        </div>
        <div id="inventory-tab" style="display:none;">
          <div class="inventory-container">
            <div class="equipment-panel">
              <h4>Equipment</h4>
              <div id="equipment-slots" class="equipment-slots"></div>
            </div>
            <div class="inventory-grid-panel">
              <h4>Items</h4>
              <div id="inventory-grid" class="inventory-grid">
                <p class="loading">Loading...</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Right column: Combat log -->
      <section class="panel combat-panel" id="combat-panel">
        <h3>Combat Log</h3>
        <div id="combat-log-list" class="combat-log-list">
          <p class="loading">Loading...</p>
        </div>
      </section>

      <!-- Result panel (spans full width on mobile via grid-column) -->
      <section class="panel result-panel" id="result-panel" style="display:none;">
        <h3 id="result-title"></h3>
        <div id="result-body"></div>
      </section>
    </main>

    <!-- Mobile bottom navigation (replaces tabs on small screens) -->
    <nav class="mobile-bottom-nav" role="tablist">
      <button class="tab active" data-tab="hunt" role="tab" aria-selected="true">⚔️ Hunt</button>
      <button class="tab" data-tab="expedition" role="tab" aria-selected="false">🏕️ Trip</button>
      <button class="tab" data-tab="inventory" role="tab" aria-selected="false">🎒 Items</button>
    </nav>
  </div>

  <script src="/js/toast.js"></script>
  <script src="/js/auth.js"></script>
  <script src="/js/game.js"></script>
</body>
</html>