242 lines
7.4 KiB
HTML
242 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>شرطنج</title>
|
|
<style>
|
|
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
color: 262942;
|
|
}
|
|
|
|
body {
|
|
background-color: #f8e8d3;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100vw;
|
|
user-select: none;
|
|
height: 230px;
|
|
}
|
|
|
|
.center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: 24px auto;
|
|
gap: 8px;
|
|
max-width: 70%;
|
|
}
|
|
|
|
.or {
|
|
width: 100%;
|
|
position: relative;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.or::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 2px;
|
|
transform: translateY(-50%);
|
|
background: rgba(92, 92, 92, 0.664);
|
|
}
|
|
|
|
.or::after {
|
|
content: 'OR';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
font-size: 1rem;
|
|
padding: 8px;
|
|
font-weight: bolder;
|
|
background: #f8e8d3;
|
|
|
|
color: rgba(92, 92, 92, 0.664);
|
|
}
|
|
|
|
.code {
|
|
padding: 16px;
|
|
border: none;
|
|
font-size: 1.5rem;
|
|
text-align: center;
|
|
letter-spacing: 8px;
|
|
text-transform: lowercase;
|
|
width: 200px;
|
|
outline: none;
|
|
}
|
|
|
|
.button {
|
|
background: rgb(85, 122, 75);
|
|
color: rgb(255, 255, 255);
|
|
font-family: 'Times New Roman', Times, serif;
|
|
font-weight: lighter;
|
|
text-transform: uppercase;
|
|
font-size: 1.3rem;
|
|
padding: 12px 30px;
|
|
cursor: pointer;
|
|
border: 0;
|
|
outline: none;
|
|
}
|
|
|
|
.group {
|
|
display: flex;
|
|
height: 48px;
|
|
gap: 12px;
|
|
}
|
|
|
|
.group * {
|
|
height: 48px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.vs {
|
|
height: calc(100% - 8px);
|
|
width: 2px;
|
|
background: rgba(92, 92, 92, 0.664);
|
|
}
|
|
|
|
.code::placeholder {
|
|
letter-spacing: normal;
|
|
}
|
|
|
|
.background {
|
|
width: 100%;
|
|
aspect-ratio: 16/9;
|
|
z-index: -1000;
|
|
bottom: 0;
|
|
position: fixed;
|
|
image-rendering: pixelated;
|
|
background-image: url("/static/background.png");
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
|
|
}
|
|
|
|
#quick_match_info {
|
|
margin: 14px 0;
|
|
font-size: 18px;
|
|
user-select: none;
|
|
color: rgba(92, 92, 92, 0.664);
|
|
}
|
|
</style>
|
|
<link rel="icon" href="/favicon.ico" type="image/x-icon">
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<img src="/static/logo.webp" alt="">
|
|
</header>
|
|
|
|
<div class="background"></div>
|
|
|
|
<div class="center">
|
|
<div class="group">
|
|
<button id="create" class="button">create</button>
|
|
<div class="vs"></div>
|
|
<input type="text" id="code" class="code" placeholder="invite code" pattern="[a-z0-9A-Z]{4}" maxlength="4">
|
|
<button id="join" class="button">join</button>
|
|
</div>
|
|
<div class="or"></div>
|
|
<div id="quick_match_info" style="visibility: hidden;">Searching for a game</div>
|
|
<button class="button" id="quick_match">quick match</button>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
let dots = 0;
|
|
|
|
setInterval(() => {
|
|
let text = "Searching for a game";
|
|
for (let i = 0; i < dots; i++) {
|
|
text += ".";
|
|
}
|
|
document.getElementById("quick_match_info").innerText = text;
|
|
dots += 1;
|
|
if (dots == 4) {
|
|
dots = 0;
|
|
}
|
|
}, 1000);
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const code = document.getElementById("code");
|
|
const pat = new RegExp("^[a-z0-9]{4}$")
|
|
document.getElementById("join").addEventListener("click", () => {
|
|
if (!pat.test(code.value.toLowerCase())) {
|
|
alert("Invalid ID");
|
|
} else {
|
|
window.location.href = window.location.origin + "/" + code.value.toLowerCase();
|
|
}
|
|
});
|
|
const qm = document.getElementById("quick_match");
|
|
let matchmaking = -1;
|
|
let qid = -1;
|
|
qm.addEventListener("click", () => {
|
|
if (qm.innerText.toLowerCase() === "cancel") {
|
|
qm.innerText = "quick match";
|
|
document.getElementById("quick_match_info").style.visibility = "hidden";
|
|
clearInterval(-1);
|
|
} else if (qm.innerText.toLowerCase() === "quick match") {
|
|
qm.innerText = "cancel";
|
|
document.getElementById("quick_match_info").style.visibility = "visible";
|
|
fetch("/quick", {
|
|
method: 'POST',
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
qid = data.queue_id;
|
|
matchmaking = setInterval(() => {
|
|
fetch("/quick", {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ "queue_id": qid }),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
if (data.room_id) {
|
|
clearInterval(matchmaking);
|
|
window.location.href = window.location.origin + "/" + data.room_id;
|
|
}
|
|
}).catch((error) => {
|
|
console.error(error);
|
|
})
|
|
}, 1500);
|
|
}).catch((error) => {
|
|
console.error(error);
|
|
})
|
|
}
|
|
});
|
|
document.getElementById("create").addEventListener("click", () => {
|
|
fetch('/create_room', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
|
|
window.location.href = window.location.origin + "/" + data.id;
|
|
}).catch((error) => {
|
|
console.log(error);
|
|
})
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |