123 lines
4.7 KiB
HTML
123 lines
4.7 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN" data-theme="auto">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Texas Hold X Replay</title>
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="app-shell">
|
|
<header class="terminal-header">
|
|
<div class="window-row" aria-hidden="true">
|
|
<span class="window-dot red"></span>
|
|
<span class="window-dot yellow"></span>
|
|
<span class="window-dot green"></span>
|
|
<span class="window-title">txh-replay@web:~</span>
|
|
</div>
|
|
<div class="title-row">
|
|
<div>
|
|
<h1>Texas Hold X Replay</h1>
|
|
<p id="subtitle">awaiting game snapshot</p>
|
|
</div>
|
|
<div class="status-strip" aria-live="polite">
|
|
<span id="sourceBadge" class="status-pill">NO DATA</span>
|
|
<span id="pollBadge" class="status-pill">AUTO OFF</span>
|
|
<label class="theme-control">
|
|
<span>theme</span>
|
|
<select id="themeMode" aria-label="Theme mode">
|
|
<option value="auto">auto</option>
|
|
<option value="dark">dark</option>
|
|
<option value="light">light</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="terminal-grid">
|
|
<section class="terminal-panel source-panel" aria-label="数据源">
|
|
<div class="panel-title"><span>$</span> /source</div>
|
|
<label>
|
|
<span>game service</span>
|
|
<input id="serverUrl" type="url" value="http://127.0.0.1:8000" placeholder="http://127.0.0.1:8000" />
|
|
</label>
|
|
<label>
|
|
<span>game id</span>
|
|
<input id="gameId" type="text" value="game1" placeholder="game1" />
|
|
</label>
|
|
<div class="button-row">
|
|
<button id="fetchBtn" class="primary-btn" type="button">fetch</button>
|
|
<label class="file-btn">
|
|
upload json
|
|
<input id="fileInput" type="file" accept="application/json,.json" />
|
|
</label>
|
|
</div>
|
|
<div class="auto-grid">
|
|
<label class="toggle-line">
|
|
<input id="autoPoll" type="checkbox" />
|
|
<span>auto poll</span>
|
|
</label>
|
|
<label>
|
|
<span>seconds</span>
|
|
<input id="pollSeconds" type="number" min="5" max="300" value="12" />
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="terminal-panel controls-panel" aria-label="回放控制">
|
|
<div class="panel-title"><span>$</span> /replay</div>
|
|
<label>
|
|
<span>hand</span>
|
|
<select id="handSelect"></select>
|
|
</label>
|
|
<label>
|
|
<span>pace</span>
|
|
<input id="pace" type="range" min="0.75" max="1.8" step="0.05" value="1" />
|
|
</label>
|
|
<div class="transport-row">
|
|
<button id="prevBtn" type="button">prev</button>
|
|
<button id="playBtn" class="primary-btn" type="button">play</button>
|
|
<button id="nextBtn" type="button">next</button>
|
|
<button id="resetBtn" type="button">reset</button>
|
|
</div>
|
|
<div class="progress-shell" aria-hidden="true">
|
|
<div id="progressBar"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="terminal-panel summary-panel" aria-label="牌局摘要">
|
|
<div class="panel-title"><span>$</span> /state</div>
|
|
<dl class="stat-list">
|
|
<div><dt>status</dt><dd id="gameStatus">-</dd></div>
|
|
<div><dt>players</dt><dd id="playerCount">-</dd></div>
|
|
<div><dt>hands</dt><dd id="handCount">-</dd></div>
|
|
<div><dt>blinds</dt><dd id="blindLevel">-</dd></div>
|
|
</dl>
|
|
</section>
|
|
|
|
<section class="terminal-panel display-panel" aria-label="命令行牌局回放">
|
|
<div class="display-head">
|
|
<div>
|
|
<span id="handBadge" class="prompt-chip">hand -</span>
|
|
<span id="streetLabel" class="prompt-chip">idle</span>
|
|
<span id="potLabel" class="prompt-chip">pot 0</span>
|
|
</div>
|
|
<span id="frameLabel" class="frame-label">frame 0/0</span>
|
|
</div>
|
|
<div class="terminal-screen" tabindex="0">
|
|
<pre id="tableOutput" class="table-output">txh-replay> waiting for game data</pre>
|
|
</div>
|
|
</section>
|
|
|
|
<aside class="terminal-panel log-panel" aria-label="事件日志">
|
|
<div class="panel-title"><span>$</span> /events</div>
|
|
<ol id="eventLog" class="event-log"></ol>
|
|
</aside>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/app.js" type="module"></script>
|
|
</body>
|
|
</html>
|