index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AgentDeck Replay Viewer</title>

  <!-- Google Fonts - Press Start 2P for pixel-art feel -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">

  <!-- Styles -->
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="renderers/fixed_damage/debug/styles.css">
  <link rel="stylesheet" href="renderers/fixed_damage/retro_jrpg_scene/styles.css">
</head>
<body>
  <div class="container">
    <header>
      <h1>🎮 AgentDeck Replay Viewer</h1>
      <p>Replay recorded AI-agent decisions and outcomes</p>
    </header>

    <!-- Error display -->
    <div id="error-container"></div>

    <!-- Global controls (always visible) -->
    <div id="global-controls" class="global-controls">
      <label class="global-control global-control-match">
        Load Match:
        <select id="match-select" title="Select a local match"></select>
      </label>
      <button id="btn-load-match" title="Reload selected match">↻ Reload Match</button>
      <button id="btn-upload-match" title="Load match from local JSON file">📁 Upload JSON</button>
      <label class="global-control global-control-skin">
        Load Skin:
        <select id="skin-select" title="Select viewer skin"></select>
      </label>
    </div>

    <section id="match-preview" class="match-preview" style="display: none;">
      <div class="match-preview-label">Why watch this match</div>
      <div id="match-preview-title" class="match-preview-title"></div>
      <div id="match-preview-subtitle" class="match-preview-subtitle"></div>
    </section>

    <!-- Mobile compact controls -->
    <div id="mobile-top-controls" class="mobile-top-controls" style="display: none;">
      <button id="mobile-btn-match" class="mobile-top-btn" title="Load match">
        Match: <span id="mobile-match-label">-</span>
      </button>
      <button id="mobile-btn-skin" class="mobile-top-btn" title="Load skin">
        Skin: <span id="mobile-skin-label">-</span>
      </button>
      <button id="mobile-btn-more" class="mobile-top-btn mobile-top-btn-icon" title="More options">⋯</button>
    </div>

    <!-- Mobile bottom sheet -->
    <div id="mobile-sheet" class="mobile-sheet" aria-hidden="true">
      <div id="mobile-sheet-backdrop" class="mobile-sheet-backdrop"></div>
      <div class="mobile-sheet-panel" role="dialog" aria-modal="true" aria-label="Viewer controls">
        <div class="mobile-sheet-head">
          <span id="mobile-sheet-title">Controls</span>
          <button id="mobile-sheet-close" class="mobile-sheet-close" title="Close">✕</button>
        </div>

        <div id="mobile-sheet-match" class="mobile-sheet-section">
          <select id="mobile-match-select" title="Select a local match"></select>
          <button id="mobile-load-match" title="Reload selected match">↻ Reload Match</button>
        </div>

        <div id="mobile-sheet-skin" class="mobile-sheet-section">
          <select id="mobile-skin-select" title="Select viewer skin"></select>
        </div>

        <div id="mobile-sheet-actions" class="mobile-sheet-section">
          <button id="mobile-upload-match" title="Load match from local JSON file">📁 Upload JSON</button>
        </div>
      </div>
    </div>

    <!-- Fallback empty state (only shown when auto-load fails and no match is loaded) -->
    <div id="empty-state" class="empty-state" style="display: none;">
      <div class="icon">📁</div>
      <p>Could not auto-load a default match.</p>
      <p>Pick one from "Load Match" or upload a JSON file.</p>
      <button id="btn-empty-upload" title="Load match from local JSON file">📁 Upload JSON</button>
    </div>

    <!-- Hidden file input -->
    <input type="file" id="file-input" accept=".json">

    <!-- Synopsis panel (shown after match loads, replaces match-preview) -->
    <div id="match-synopsis" class="match-synopsis" style="display: none;"></div>

    <!-- Playback controls (shown when match loaded) -->
    <div id="controls-container" class="viewer-controls" style="display: none;">
      <button id="btn-play" title="Play/Pause (Space)">▶ Play</button>
        <button id="btn-prev" title="Previous (←)"><span class="viewer-nav-icon">⏮</span></button>
        <button id="btn-next" title="Next (→)"><span class="viewer-nav-icon">⏭</span></button>

      <label class="speed-control">
        <select id="speed-select">
          <option value="0.5">0.5x</option>
          <option value="1" selected>1x</option>
          <option value="2">2x</option>
          <option value="4">4x</option>
        </select>
      </label>

      <div class="viewer-progress" id="progress-bar">
        <div class="viewer-progress-fill" id="progress-fill"></div>
        <div class="viewer-progress-markers" id="progress-markers"></div>
      </div>

      <div class="controls-meta">
        <span id="status-text" class="controls-meta-status">READY</span>
        <span id="controls-turn" class="controls-meta-turn">—</span>
      </div>
    </div>

    <!-- Viewer container (shown when match loaded) -->
    <div id="viewer-container" style="display: none;"></div>

    <!-- Match info (shown when match loaded) -->
    <div id="match-info" class="match-info" style="display: none;">
      <div class="info-grid" id="info-grid"></div>
    </div>

    <!-- Instructions -->
    <div class="instructions" id="instructions">
      <p>
        <kbd>Space</kbd> Play/Pause &nbsp;
        <kbd>←</kbd> Previous &nbsp;
        <kbd>→</kbd> Next &nbsp;
        <kbd>1-4</kbd> Speed
      </p>
    </div>
  </div>

  <!-- Scripts -->
  <script src="js/record-loader.js"></script>
  <script src="js/timeline.js"></script>
  <script src="js/renderers/index.js"></script>
  <script src="js/match-metadata.js"></script>
  <script src="renderers/fixed_damage/debug/renderer.js"></script>
  <script src="renderers/fixed_damage/retro_jrpg_scene/renderer.js"></script>
  <script src="js/app.js"></script>
</body>
</html>