qianrui.mmmy
133 lines
5.2 KiB
HTML
133 lines
5.2 KiB
HTML
<!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>
|