Spaces:
Running
Running
File size: 6,278 Bytes
4827377 19c25bd 4827377 19c25bd 4827377 d076d3a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 | <!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
<kbd>←</kbd> Previous
<kbd>→</kbd> Next
<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>
|