127 lines
6.4 KiB
HTML
127 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="th">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<title>สร้างห้องเกม — JD JUSTICE DIVERS</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css?v=1.006">
|
|
</head>
|
|
<body>
|
|
<div class="create-bg" aria-hidden="true">
|
|
<div class="create-bg-grid"></div>
|
|
<img src="../Main-Menu/bg.png" alt="" class="create-bg-img">
|
|
</div>
|
|
<div class="create-char-layer" aria-hidden="true">
|
|
<img src="../Main-Menu/char-main.png" alt="" class="create-char-img">
|
|
</div>
|
|
<div class="create-vignette" aria-hidden="true"></div>
|
|
|
|
<div class="create-ui">
|
|
<button type="button" class="menu-btn-back" id="btn-back" aria-label="ย้อนกลับ">
|
|
<img src="../Main-Menu/IMAGE/btn-back.png" alt="ย้อนกลับ" class="menu-btn-back-img" decoding="async">
|
|
</button>
|
|
|
|
<main class="create-content">
|
|
<img src="IMAGE/txt-createroom.png" alt="สร้างห้องเกม" class="create-title-img" decoding="async">
|
|
<img src="IMAGE/line.png" alt="" class="create-title-line" aria-hidden="true" decoding="async">
|
|
|
|
<section class="create-panel" aria-label="ฟอร์มสร้างห้อง">
|
|
|
|
<!-- ชื่อห้อง -->
|
|
<div class="create-field create-field--inline create-field--room">
|
|
<img src="IMAGE/txt-roomname.png" alt="ชื่อห้อง :" class="create-label-img" decoding="async">
|
|
<div class="create-input-shell">
|
|
<input type="text" id="create-room-name" class="create-input" maxlength="48" autocomplete="off" spellcheck="false" placeholder="ตั้งชื่อห้อง" aria-label="ชื่อห้อง">
|
|
</div>
|
|
</div>
|
|
|
|
<img src="IMAGE/line.png" alt="" class="create-line" aria-hidden="true" decoding="async">
|
|
|
|
<!-- โหมด -->
|
|
<div class="create-field create-field--inline create-field--mode">
|
|
<img src="IMAGE/txt-mode.png" alt="โหมด :" class="create-label-img" decoding="async">
|
|
<div class="create-mode-row" role="tablist" aria-label="โหมดห้อง">
|
|
<button type="button" class="create-mode-btn create-mode-btn--active" id="tab-public" role="tab" aria-selected="true" data-img="IMAGE/btn-publish.png" data-img-h="IMAGE/btn-publish-h.png">
|
|
<img src="IMAGE/btn-publish-h.png" alt="ห้องสาธารณะ" class="create-mode-btn-img" decoding="async">
|
|
</button>
|
|
<button type="button" class="create-mode-btn" id="tab-private" role="tab" aria-selected="false" data-img="IMAGE/btn-private.png" data-img-h="IMAGE/btn-private-h.png">
|
|
<img src="IMAGE/btn-private.png" alt="ห้องส่วนตัว" class="create-mode-btn-img" decoding="async">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PASSWORD (ซ่อน default) -->
|
|
<div id="create-private-block" class="create-private-block create-view--hidden" role="tabpanel">
|
|
<img src="IMAGE/txt-password.png" alt="PASSWORD : (รหัสผ่าน 4 ตัว)" class="create-label-img create-label-img--password" decoding="async">
|
|
<div class="create-input-shell create-input-shell--pin">
|
|
<input type="text" id="create-private-pin" class="create-input create-input--pin" placeholder="0000" maxlength="4" inputmode="numeric" autocomplete="off" aria-label="รหัสผ่าน 4 หลัก">
|
|
</div>
|
|
</div>
|
|
|
|
<img src="IMAGE/line.png" alt="" class="create-line" aria-hidden="true" decoding="async">
|
|
|
|
<!-- จำนวนผู้เล่น -->
|
|
<div class="create-field create-field--inline create-field--players">
|
|
<img src="IMAGE/txt-players.png" alt="จำนวนผู้เล่น :" class="create-label-img" decoding="async">
|
|
<div class="create-num-grid" id="create-player-btns" role="group" aria-label="จำนวนผู้เล่น"></div>
|
|
</div>
|
|
|
|
<img src="IMAGE/line.png" alt="" class="create-line" aria-hidden="true" decoding="async">
|
|
|
|
<!-- สรุป -->
|
|
<div class="create-summary-wrap">
|
|
<div class="create-summary" id="create-summary" aria-live="polite">สรุปจำนวน : 3 ผู้เล่น + 3 Bot</div>
|
|
</div>
|
|
|
|
<!-- ยืนยัน -->
|
|
<button type="button" class="create-confirm" id="btn-confirm" aria-label="ยืนยันสร้างห้อง">
|
|
<img src="IMAGE/btn-confirm.png" alt="ยืนยัน" class="create-confirm-img" decoding="async">
|
|
</button>
|
|
|
|
<p class="create-status" id="create-status" role="status"></p>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="../app-base.js"></script>
|
|
<script src="create-room.js?v=1.004"></script>
|
|
<script>
|
|
(function(){
|
|
var content = document.querySelector('.create-content');
|
|
if(!content) return;
|
|
var tid = 0;
|
|
function autoFit(){
|
|
clearTimeout(tid);
|
|
tid = setTimeout(function(){
|
|
var isLand = window.matchMedia('(orientation:landscape) and (max-width:1200px)').matches
|
|
|| window.matchMedia('(orientation:landscape) and (max-height:620px)').matches;
|
|
if(!isLand){ content.style.zoom = ''; return; }
|
|
content.style.zoom = '1';
|
|
requestAnimationFrame(function(){
|
|
var vpH = window.innerHeight;
|
|
var rect = content.getBoundingClientRect();
|
|
var need = rect.top + rect.height;
|
|
if(need > vpH){
|
|
var s = Math.max(0.4, (vpH * 0.97) / need);
|
|
content.style.zoom = String(Math.floor(s * 1000) / 1000);
|
|
} else {
|
|
content.style.zoom = '1';
|
|
}
|
|
});
|
|
}, 30);
|
|
}
|
|
autoFit();
|
|
window.addEventListener('resize', autoFit);
|
|
window.addEventListener('orientationchange', function(){ setTimeout(autoFit, 300); });
|
|
var panel = document.querySelector('.create-panel');
|
|
if(panel){
|
|
new MutationObserver(function(){ setTimeout(autoFit, 80); }).observe(panel, {childList:true, subtree:true, attributes:true, attributeFilter:['class']});
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|