87 lines
3.0 KiB
HTML
87 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>斗地主残局版</title>
|
|
<link rel="stylesheet" href="/css/style.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div id="lobby" class="screen">
|
|
<h1>斗地主残局版</h1>
|
|
<div class="form">
|
|
<input type="text" id="playerName" placeholder="昵称" maxlength="10">
|
|
<select id="maxPlayers">
|
|
<option value="2">2人</option>
|
|
<option value="3">3人</option>
|
|
<option value="4" selected>4人</option>
|
|
<option value="5">5人</option>
|
|
<option value="6">6人</option>
|
|
</select>
|
|
<button id="createBtn" class="btn primary">创建房间</button>
|
|
<div class="join-row">
|
|
<input type="text" id="roomIdInput" placeholder="房间号">
|
|
<button id="joinBtn" class="btn">加入</button>
|
|
</div>
|
|
</div>
|
|
<div class="rules">
|
|
<h3>规则</h3>
|
|
<ul>
|
|
<li>新增"超人强"为最大单牌</li>
|
|
<li>每人初始5张牌</li>
|
|
<li>三张可成顺子/炸弹，两对可成连对</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="waiting" class="screen hidden">
|
|
<h2>等待中</h2>
|
|
<p>房间号: <span id="displayRoomId" class="room-id"></span></p>
|
|
<div id="playerList"></div>
|
|
<div class="actions">
|
|
<button id="readyBtn" class="btn primary">准备</button>
|
|
<button id="leaveBtn" class="btn danger">离开</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="game" class="screen hidden">
|
|
<div class="header">
|
|
<span>第<span id="roundNum">1</span>轮</span>
|
|
<span id="turnInfo"></span>
|
|
</div>
|
|
<div id="others" class="others"></div>
|
|
<div id="playArea" class="play-area">
|
|
<div id="lastPlay" class="last-play hidden">
|
|
<span id="lastPlayer"></span>
|
|
<div id="lastCards"></div>
|
|
</div>
|
|
</div>
|
|
<div class="my-area">
|
|
<div id="myCards" class="my-cards"></div>
|
|
<div class="actions">
|
|
<button id="playBtn" class="btn primary" disabled>出牌</button>
|
|
<button id="passBtn" class="btn" disabled>不出</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="gameOver" class="modal hidden">
|
|
<div class="modal-box">
|
|
<h2 id="winnerText"></h2>
|
|
<button id="againBtn" class="btn primary">再来一局</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="chat" class="chat">
|
|
<div id="chatMsgs"></div>
|
|
<div class="chat-input">
|
|
<input type="text" id="chatInput" placeholder="消息">
|
|
<button id="chatBtn" class="btn sm">发</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/js/game.js"></script>
|
|
</body>
|
|
</html>
|