118 lines
4.5 KiB
HTML
118 lines
4.5 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="auth" class="screen">
|
|
<h1>斗地主残局版</h1>
|
|
<div class="auth-tabs">
|
|
<button id="loginTab" class="tab active">登录</button>
|
|
<button id="registerTab" class="tab">注册</button>
|
|
</div>
|
|
<div id="loginForm" class="auth-form">
|
|
<input type="text" id="loginUsername" placeholder="用户名" maxlength="20">
|
|
<input type="password" id="loginPassword" placeholder="密码">
|
|
<div class="captcha-row">
|
|
<input type="text" id="loginCaptcha" placeholder="验证码" maxlength="4">
|
|
<img id="loginCaptchaImg" src="" alt="验证码" class="captcha-img">
|
|
</div>
|
|
<button id="loginBtn" class="btn primary">登录</button>
|
|
</div>
|
|
<div id="registerForm" class="auth-form hidden">
|
|
<input type="text" id="regUsername" placeholder="用户名 (3-20字符)" maxlength="20">
|
|
<input type="password" id="regPassword" placeholder="密码 (至少6位)">
|
|
<input type="text" id="regNickname" placeholder="昵称" maxlength="10">
|
|
<div class="captcha-row">
|
|
<input type="text" id="regCaptcha" placeholder="验证码" maxlength="4">
|
|
<img id="regCaptchaImg" src="" alt="验证码" class="captcha-img">
|
|
</div>
|
|
<button id="registerBtn" class="btn primary">注册</button>
|
|
</div>
|
|
<div class="rules">
|
|
<h3>规则</h3>
|
|
<ul>
|
|
<li>新增"超人强"为最大单牌</li>
|
|
<li>每人初始5张牌</li>
|
|
<li>三张可成顺子/炸弹，两对可成连对</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="lobby" class="screen hidden">
|
|
<h1>斗地主残局版</h1>
|
|
<div class="user-info">
|
|
<span id="welcomeUser">欢迎</span>
|
|
<button id="logoutBtn" class="btn sm">退出登录</button>
|
|
</div>
|
|
<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>
|
|
|
|
<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>
|