61 lines
2.9 KiB
HTML
61 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="th">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>ล็อบบี้ — Game</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>ล็อบบี้</h1>
|
|
<p><a href="index.html">กลับ</a> · <a href="character.html">เลือกตัวละคร</a></p>
|
|
<p><label>ชื่อคุณ <input type="text" id="nick" placeholder="ชื่อผู้เล่น" value="ผู้เล่น"></label></p>
|
|
|
|
<section class="lobby-section">
|
|
<h2>ห้องสาธารณะ (Public) — เลือกเข้าร่วมได้เลย</h2>
|
|
<div id="room-list-wrap">
|
|
<p id="room-list-status">โหลดรายการห้อง...</p>
|
|
<ul id="room-list"></ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="lobby-section">
|
|
<h2>สร้างห้องใหม่</h2>
|
|
<p>เลือกประเภทห้อง แล้วกดสร้าง</p>
|
|
<p>
|
|
<label><input type="radio" name="room-type" value="public" checked> สาธารณะ (Public)</label> — โชว์ในรายการด้านบน คนอื่น join ได้เลย
|
|
<br>
|
|
<label><input type="radio" name="room-type" value="private"> ส่วนตัว (Private)</label> — สร้างรหัสอัตโนมัติ แชร์รหัสเพื่อให้คนอื่นเข้า
|
|
</p>
|
|
<p>
|
|
<label>จำนวนผู้เล่นสูงสุด <select id="max-players">
|
|
<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>
|
|
<option value="7">7 คน</option>
|
|
<option value="8">8 คน</option>
|
|
<option value="9">9 คน</option>
|
|
<option value="10">10 คน</option>
|
|
</select></label>
|
|
</p>
|
|
<button type="button" id="btn-create-lobby">สร้างห้อง</button>
|
|
</section>
|
|
|
|
<section class="lobby-section">
|
|
<h2>เข้าร่วมห้องส่วนตัว (Private)</h2>
|
|
<p>กรอกรหัสห้องที่ได้จาก host เพื่อเข้า</p>
|
|
<form id="form-join">
|
|
<label>รหัสห้อง <input type="text" id="space-id" placeholder="กรอกรหัส 6 หลัก" required></label>
|
|
<button type="submit">เข้าร่วม</button>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
<script src="js/version.js?v=0.0104"></script>
|
|
<script src="js/lobby.js?v=0.0105"></script>
|
|
<div class="version-tag">v —</div>
|
|
</body>
|
|
</html>
|