87 lines
2.9 KiB
HTML
87 lines
2.9 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<meta name="theme-color" content="#18201d" />
|
|
<title>本草牌局</title>
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<div>
|
|
<div class="brand">本草牌局</div>
|
|
<div class="subtitle">Materia Medica</div>
|
|
</div>
|
|
<div id="connection" class="connection">连接中</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section id="entry" class="entry-panel">
|
|
<div class="entry-copy">
|
|
<p class="eyebrow">三人推理牌局</p>
|
|
<h1>藏起两张牌，读懂每一次交换。</h1>
|
|
<p>牌号越大，数量越多。观察手牌数量的变化，推断桌面下的答案。</p>
|
|
</div>
|
|
<form id="entry-form" class="entry-form">
|
|
<label>
|
|
玩家名称
|
|
<input id="name" maxlength="18" autocomplete="nickname" placeholder="输入你的名字" required />
|
|
</label>
|
|
<div class="entry-actions">
|
|
<button type="button" id="create" class="primary">创建房间</button>
|
|
<div class="join-row">
|
|
<input id="room-code" maxlength="6" autocomplete="off" placeholder="房间码" />
|
|
<button type="button" id="join">加入</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<section id="game" class="game hidden">
|
|
<div class="room-heading">
|
|
<div>
|
|
<p class="eyebrow">房间 <button id="copy-room" class="text-button" title="复制房间码"></button></p>
|
|
<h1 id="status-title">等待玩家</h1>
|
|
</div>
|
|
<button id="start" class="primary hidden">开始游戏</button>
|
|
</div>
|
|
|
|
<div class="game-layout">
|
|
<div class="board-column">
|
|
<section id="players" class="players" aria-label="玩家"></section>
|
|
|
|
<section class="hand-section">
|
|
<div class="section-title">
|
|
<h2>我的手牌</h2>
|
|
<span id="hand-total">0 张</span>
|
|
</div>
|
|
<div id="hand" class="hand"></div>
|
|
</section>
|
|
|
|
<section id="action-panel" class="action-panel">
|
|
<div class="section-title">
|
|
<h2>行动</h2>
|
|
<span id="turn-note"></span>
|
|
</div>
|
|
<div id="actions"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<aside class="log-panel">
|
|
<div class="section-title">
|
|
<h2>牌局记录</h2>
|
|
<span>仅公开数量</span>
|
|
</div>
|
|
<ol id="logs" class="logs"></ol>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div id="toast" class="toast" role="status"></div>
|
|
<script src="/socket.io/socket.io.js"></script>
|
|
<script type="module" src="/app.js"></script>
|
|
</body>
|
|
</html>
|