feat: add replay server and web client
This commit is contained in:
qianrui.mmmy
@@ -0,0 +1,132 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<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="topbar">
|
||||
<div class="brand-lockup">
|
||||
<div class="chip-mark" aria-hidden="true">TX</div>
|
||||
<div class="brand-meta">
|
||||
<h1>Texas Hold X Replay</h1>
|
||||
<p id="subtitle">等待加载游戏数据</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="status-strip" aria-live="polite">
|
||||
<span id="sourceBadge" class="badge badge-gold">No Data</span>
|
||||
<span id="pollBadge" class="badge badge-blue">Auto Off</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="layout-grid">
|
||||
<!-- Stage zone: pure visualization (table, seats, animations).
|
||||
Placed first in DOM so mobile/tablet layouts keep it on top. -->
|
||||
<section class="stage-zone" aria-label="牌桌动画回放">
|
||||
<div class="stage-head">
|
||||
<div class="stage-head-left">
|
||||
<span id="handBadge" class="badge badge-gold">Hand -</span>
|
||||
<strong id="streetLabel">未加载</strong>
|
||||
</div>
|
||||
<div class="stage-head-right">
|
||||
<span id="potLabel" class="badge badge-gold">Pot 0</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="table" class="poker-table">
|
||||
<!-- felt-shell encapsulates the rounded green felt with overflow:hidden,
|
||||
so player speech bubbles drawn in seat-layer can overflow freely
|
||||
above and below the table without being clipped. -->
|
||||
<div class="felt-shell" aria-hidden="true">
|
||||
<div class="felt-rail"></div>
|
||||
<div class="felt-surface">
|
||||
<div class="felt-grid"></div>
|
||||
<div class="felt-glow"></div>
|
||||
<div class="felt-mark">TX</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="community-area">
|
||||
<div id="boardCards" class="card-row board"></div>
|
||||
<div id="tableMessage" class="table-message">上传 JSON 或从游戏服务获取快照</div>
|
||||
</div>
|
||||
<div id="seatLayer" class="seat-layer"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Interaction zone: data source + replay controls + summary. -->
|
||||
<section class="control-panel" aria-label="数据与播放控制">
|
||||
<div class="panel-section">
|
||||
<h2>数据源</h2>
|
||||
<label>
|
||||
<span>游戏服务</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">获取</button>
|
||||
<label class="file-btn">
|
||||
上传 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>自动获取</span>
|
||||
</label>
|
||||
<label>
|
||||
<span>间隔秒</span>
|
||||
<input id="pollSeconds" type="number" min="5" max="300" value="12" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-section">
|
||||
<h2>回放</h2>
|
||||
<label>
|
||||
<span>手牌</span>
|
||||
<select id="handSelect"></select>
|
||||
</label>
|
||||
<label>
|
||||
<span>节奏</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" title="上一帧">◀</button>
|
||||
<button id="playBtn" class="primary-btn" type="button" title="播放/暂停">▶</button>
|
||||
<button id="nextBtn" type="button" title="下一帧">▶</button>
|
||||
<button id="resetBtn" type="button" title="重置">↺</button>
|
||||
</div>
|
||||
<div class="progress-wrap">
|
||||
<div id="progressBar"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-section dense">
|
||||
<h2>牌局摘要</h2>
|
||||
<dl class="stat-list">
|
||||
<div><dt>状态</dt><dd id="gameStatus">-</dd></div>
|
||||
<div><dt>玩家</dt><dd id="playerCount">-</dd></div>
|
||||
<div><dt>总手数</dt><dd id="handCount">-</dd></div>
|
||||
<div><dt>盲注</dt><dd id="blindLevel">-</dd></div>
|
||||
</dl>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside class="event-panel" aria-label="事件日志">
|
||||
<div class="panel-section">
|
||||
<h2>事件</h2>
|
||||
<ol id="eventLog" class="event-log"></ol>
|
||||
</div>
|
||||
</aside>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="/app.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user