145 lines
5.3 KiB
HTML
145 lines
5.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<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>
|
|
<main class="shell">
|
|
<header class="topbar" aria-label="Application header">
|
|
<div>
|
|
<p class="eyebrow">Texas Hold X</p>
|
|
<h1>Game Replay Control</h1>
|
|
</div>
|
|
<div class="status-strip" aria-live="polite">
|
|
<span id="connectionStatus" class="pill neutral">Idle</span>
|
|
<span id="gameStatus" class="pill">No game</span>
|
|
<span id="handCounter" class="metric">Hand 0</span>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="workspace">
|
|
<aside class="panel controls" aria-label="Game controls">
|
|
<div class="panel-header">
|
|
<h2>Source</h2>
|
|
</div>
|
|
|
|
<label class="field">
|
|
<span>Core service</span>
|
|
<input id="baseUrlInput" type="url" value="http://127.0.0.1:8000" spellcheck="false">
|
|
</label>
|
|
<label class="field">
|
|
<span>Game ID</span>
|
|
<input id="gameIdInput" type="text" value="demo" spellcheck="false">
|
|
</label>
|
|
<div class="button-row">
|
|
<button id="fetchButton" type="button" class="primary">Fetch</button>
|
|
<button id="togglePollButton" type="button">Auto</button>
|
|
</div>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="panel-header compact">
|
|
<h2>Run Hands</h2>
|
|
</div>
|
|
<div class="form-grid">
|
|
<label class="field">
|
|
<span>Count</span>
|
|
<input id="runCountInput" type="number" min="1" max="100" value="1">
|
|
</label>
|
|
<label class="field">
|
|
<span>Poll sec</span>
|
|
<input id="pollSecondsInput" type="number" min="1" max="60" value="3">
|
|
</label>
|
|
</div>
|
|
<div class="form-grid">
|
|
<label class="field">
|
|
<span>Small blind</span>
|
|
<input id="smallBlindInput" type="number" min="1" placeholder="keep">
|
|
</label>
|
|
<label class="field">
|
|
<span>Big blind</span>
|
|
<input id="bigBlindInput" type="number" min="1" placeholder="keep">
|
|
</label>
|
|
</div>
|
|
<label class="check-field">
|
|
<input id="untilOneLeftInput" type="checkbox">
|
|
<span>Run until one player remains</span>
|
|
</label>
|
|
<button id="runButton" type="button" class="wide">Run</button>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="panel-header compact">
|
|
<h2>Create Game</h2>
|
|
</div>
|
|
<textarea id="createGameInput" rows="10" spellcheck="false"></textarea>
|
|
<button id="createGameButton" type="button" class="wide">Create</button>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="panel-header compact">
|
|
<h2>Load JSON</h2>
|
|
</div>
|
|
<input id="fileInput" class="file-input" type="file" accept="application/json,.json">
|
|
<textarea id="jsonInput" rows="8" spellcheck="false" placeholder='Paste a GET /games/{id} response'></textarea>
|
|
<button id="loadJsonButton" type="button" class="wide">Load Snapshot</button>
|
|
</aside>
|
|
|
|
<section class="table-zone" aria-label="Poker table replay">
|
|
<div class="table-toolbar">
|
|
<div class="select-wrap">
|
|
<label for="handSelect">Hand</label>
|
|
<select id="handSelect"></select>
|
|
</div>
|
|
<div class="select-wrap">
|
|
<label for="speedInput">Pace</label>
|
|
<input id="speedInput" type="range" min="0.5" max="2" step="0.1" value="1">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="felt-stage">
|
|
<div class="table-felt" id="tableFelt">
|
|
<div id="seatLayer" class="seat-layer"></div>
|
|
<div class="board-zone">
|
|
<div id="potDisplay" class="pot-display">Pot 0</div>
|
|
<div id="boardCards" class="cards board-cards"></div>
|
|
<div id="frameCaption" class="frame-caption">Load a game snapshot</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="transport" aria-label="Replay transport">
|
|
<button id="resetButton" type="button" title="Reset">|<</button>
|
|
<button id="prevButton" type="button" title="Previous"><</button>
|
|
<button id="playButton" type="button" class="primary">Play</button>
|
|
<button id="nextButton" type="button" title="Next">></button>
|
|
<span id="frameCounter" class="metric">0 / 0</span>
|
|
</div>
|
|
</section>
|
|
|
|
<aside class="panel log-panel" aria-label="Game details">
|
|
<div class="panel-header">
|
|
<h2>Table State</h2>
|
|
</div>
|
|
<div id="tableStats" class="stats-grid"></div>
|
|
|
|
<div class="panel-header compact">
|
|
<h2>Players</h2>
|
|
</div>
|
|
<div id="playerList" class="player-list"></div>
|
|
|
|
<div class="panel-header compact">
|
|
<h2>Timeline</h2>
|
|
</div>
|
|
<ol id="eventLog" class="event-log"></ol>
|
|
</aside>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|