BIG CHANGES
This commit is contained in:
0880
384
index.html
384
index.html
@@ -1,9 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<title>شرطنج</title>
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
@@ -12,68 +13,379 @@
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
color: 262942;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f8e8d3;
|
||||
}
|
||||
.title {
|
||||
font-family: 'Times New Roman', Times, serif;
|
||||
text-transform: lowercase;
|
||||
letter-spacing: 0.25rem;
|
||||
font-size: 4rem;
|
||||
font-weight: 100;
|
||||
color: #48517b;
|
||||
padding: 0 0.5rem 0.5rem 0.5rem;
|
||||
display: block;
|
||||
width: min-content;
|
||||
border-bottom: 2px solid #48517b;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
user-select: none;
|
||||
height: 230px;
|
||||
}
|
||||
#board {
|
||||
width: 38rem;
|
||||
height: 38rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, 1fr);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.join-menu {
|
||||
display: flex;
|
||||
width: min-content;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #48517b56;
|
||||
}
|
||||
|
||||
.join-menu * {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
input,
|
||||
button {
|
||||
outline: none;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 8px 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.piece {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 20;
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.game {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<h1 class="title">shatranj</h1>
|
||||
<img src="/static/logo.png" alt="">
|
||||
</header>
|
||||
<div class="center">
|
||||
<div id="board">
|
||||
|
||||
<div id="join-menu" class="join-menu"><input type="text" id="room-id" placeholder="Room ID"><button
|
||||
id="join-submit">Join</button></div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<canvas class="game" id="canvas"></canvas>
|
||||
</div>
|
||||
<script>
|
||||
const container = document.getElementById("board");
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const canvas = document.getElementById('canvas');
|
||||
canvas.width = canvas.clientWidth;
|
||||
canvas.height = canvas.clientHeight;
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
const cols = ["A", "B", "C", "D", "E", "F", "G", "H"];
|
||||
const width = canvas.width;
|
||||
const height = canvas.height;
|
||||
|
||||
for (let i = 0; i < 64; i++) {
|
||||
let col = i % 8;
|
||||
let row = Math.floor(i/8);
|
||||
const div = document.createElement("div");
|
||||
div.className = "house";
|
||||
div.id = cols[col] + (row+1).toString()
|
||||
if (i % 2 == row % 2) {
|
||||
div.style.backgroundColor = "#262942"
|
||||
const primary = '#f0d9b5';
|
||||
const accent = '#b58863';
|
||||
|
||||
ctx.font = 'bolder 16px Arial';
|
||||
|
||||
let mouse = [0, 0];
|
||||
let mHouse = [0, 0];
|
||||
const textures = {};
|
||||
|
||||
let color = 0;
|
||||
let turn = 0;
|
||||
let ready = false;
|
||||
let letterMap = ' ';
|
||||
let numberMap = ' ';
|
||||
let board = undefined;
|
||||
let UID = undefined;
|
||||
let ROOM_ID = undefined;
|
||||
|
||||
let selected = undefined;
|
||||
let moves = [];
|
||||
|
||||
canvas.addEventListener('mousemove', (e) => {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const x = ((e.clientX - rect.left) / rect.width) * width;
|
||||
const y = ((e.clientY - rect.top) / rect.height) * height;
|
||||
mouse = [x, y];
|
||||
i = Math.floor((x / width) * 8);
|
||||
j = Math.floor((y / height) * 8);
|
||||
if (ready) {
|
||||
canvas.style.cursor = 'default';
|
||||
if (board) {
|
||||
if (color == 0) {
|
||||
j = 7 - j;
|
||||
} else {
|
||||
div.style.backgroundColor = "#faf5f0"
|
||||
i = 7 - i;
|
||||
}
|
||||
container.appendChild(div);
|
||||
mHouse = [i, j];
|
||||
if (board[j][i] !== "E" && (board[j][i] === board[j][i].toUpperCase() ? 0 : 1) === color && turn == color) {
|
||||
canvas.style.cursor = 'pointer';
|
||||
}
|
||||
moves.forEach(move => {
|
||||
if (move[0] == i && move[1] == j) {
|
||||
canvas.style.cursor = 'pointer';
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
canvas.style.cursor = 'not-allowed';
|
||||
}
|
||||
});
|
||||
|
||||
canvas.addEventListener('mouseup', (e) => {
|
||||
i = mHouse[0];
|
||||
j = mHouse[1];
|
||||
if (ready && board) {
|
||||
console.log(turn);
|
||||
console.log(color);
|
||||
console.log(selected);
|
||||
if (board[j][i] !== "E" && (board[j][i] === board[j][i].toUpperCase() ? 0 : 1) === color && turn == color) {
|
||||
|
||||
selected = [i, j];
|
||||
moves = [];
|
||||
fetch('{{ API_ROOT }}/moves/' + ROOM_ID, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ from: "ABCDEFGH"[i] + "12345678"[j] })
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
moves_str = data.moves.split(",");
|
||||
console.log(data.moves);
|
||||
moves_str.forEach(move => {
|
||||
moves.push(["abcdefgh".indexOf(move[0].toLowerCase()), "12345678".indexOf(move[1])])
|
||||
});
|
||||
})
|
||||
.catch((error) => console.error('Error:', error));
|
||||
} else if (turn == color && selected) {
|
||||
moves.forEach(move => {
|
||||
console.log(move);
|
||||
if (move[0] == i && move[1] == j) {
|
||||
console.log("YAY");
|
||||
fetch('{{ API_ROOT }}/move/' + ROOM_ID, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ uid: UID, from: "ABCDEFGH"[selected[0]] + "12345678"[selected[1]], to: "ABCDEFGH"[i] + "12345678"[j] })
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
board = data.board.grid;
|
||||
console.log(data);
|
||||
selected = undefined;
|
||||
moves = [];
|
||||
})
|
||||
.catch((error) => console.error('Error:', error));
|
||||
}
|
||||
});
|
||||
} else {
|
||||
moves = [];
|
||||
selected = undefined;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function update() {
|
||||
if (ROOM_ID) {
|
||||
fetch('{{ API_ROOT }}/poll/' + ROOM_ID, {
|
||||
method: 'GET',
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
ready = data.ready;
|
||||
turn = data.turn;
|
||||
board = data.board.grid;
|
||||
})
|
||||
.catch((error) => console.error('Error:', error));
|
||||
}
|
||||
}
|
||||
|
||||
setInterval(update, 1500);
|
||||
|
||||
function extractIdFromPath() {
|
||||
const currentPath = window.location.pathname;
|
||||
|
||||
const idRegex = /^\/([^/]+)$/;
|
||||
|
||||
const match = currentPath.match(idRegex);
|
||||
|
||||
if (match) {
|
||||
const extractedId = match[1];
|
||||
return extractedId;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function join(rid) {
|
||||
if (rid.length > 0 && /^[a-zA-Z0-9_-]+$/.test(rid)) {
|
||||
fetch('{{ API_ROOT }}/join/' + rid, {
|
||||
method: 'POST',
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
if (data.code === "FULL") {
|
||||
alert("Game is full you can only spectate.");
|
||||
} else {
|
||||
UID = data.id;
|
||||
color = data.color;
|
||||
ready = data.ready;
|
||||
turn = data.turn;
|
||||
}
|
||||
ROOM_ID = rid;
|
||||
board = data.board.grid;
|
||||
numberMap = "12345678";
|
||||
letterMap = "abcdefgh";
|
||||
document.getElementById('join-menu').outerHTML = '';
|
||||
const urlID = extractIdFromPath();
|
||||
if (urlID == null) {
|
||||
history.pushState({ pageId: ROOM_ID }, '', `/${ROOM_ID}`);
|
||||
}
|
||||
})
|
||||
.catch((error) => console.error('Error:', error));
|
||||
} else {
|
||||
alert("Invalid Room ID");
|
||||
}
|
||||
}
|
||||
|
||||
const urlID = extractIdFromPath();
|
||||
if (urlID != null) {
|
||||
join(urlID);
|
||||
}
|
||||
|
||||
document.getElementById('join-submit').onclick = () => {
|
||||
let rid = document.getElementById('room-id').value.trim();
|
||||
join(rid);
|
||||
};
|
||||
|
||||
function drawCenter(texture, x, y, width, height, padding) {
|
||||
ctx.drawImage(
|
||||
texture, x + padding, y + padding, width - padding * 2,
|
||||
height - padding * 2);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
const w = width / 8;
|
||||
const h = height / 8;
|
||||
for (let i = 0; i < 8; i++) {
|
||||
for (let j = 0; j < 8; j++) {
|
||||
let I = i;
|
||||
let J = j;
|
||||
if (color == 0) {
|
||||
J = 7 - J;
|
||||
} else {
|
||||
I = 7 - I;
|
||||
}
|
||||
ctx.beginPath();
|
||||
if ((i * 8 + j) % 2 == i % 2) {
|
||||
ctx.fillStyle = primary;
|
||||
} else {
|
||||
ctx.fillStyle = accent;
|
||||
}
|
||||
ctx.rect(i * w, j * h, w, h);
|
||||
ctx.fill();
|
||||
if (selected && selected[0] == I && selected[1] == J) {
|
||||
ctx.fillStyle = "#00f0f0aa"
|
||||
ctx.rect(i * w, j * h, w, h);
|
||||
ctx.fill();
|
||||
}
|
||||
moves.forEach(move => {
|
||||
if (move[0] == I && move[1] == J) {
|
||||
if (board[J][I] !== 'E') {
|
||||
ctx.fillStyle = "#fa2026aa"
|
||||
} else {
|
||||
ctx.fillStyle = "#f0f000aa"
|
||||
}
|
||||
ctx.rect(i * w, j * h, w, h);
|
||||
ctx.fill();
|
||||
}
|
||||
});
|
||||
if ((i * 8 + j) % 2 == i % 2) {
|
||||
ctx.fillStyle = accent;
|
||||
} else {
|
||||
ctx.fillStyle = primary;
|
||||
}
|
||||
if (i == 7) {
|
||||
ctx.fillText(numberMap[J], i * w + w - 16, j * h + 16);
|
||||
}
|
||||
if (j == 7) {
|
||||
ctx.fillText(letterMap[I], i * w + 6, j * h + h - 6);
|
||||
}
|
||||
if (board) {
|
||||
if (board[J][I] !== 'E') {
|
||||
drawCenter(textures[board[J][I]], i * w, j * h, w, h, 6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// ctx.beginPath();
|
||||
// ctx.fillStyle = 'red';
|
||||
// ctx.arc(mouse[0], mouse[1], 6, 0, Math.PI * 2);
|
||||
// ctx.fill();
|
||||
}
|
||||
|
||||
function loop() {
|
||||
draw();
|
||||
requestAnimationFrame(loop);
|
||||
}
|
||||
|
||||
const assets = {
|
||||
p: '/static/black_pawn.png',
|
||||
r: '/static/black_rook.png',
|
||||
c: '/static/black_castle.png',
|
||||
b: '/static/black_bishop.png',
|
||||
k: '/static/black_king.png',
|
||||
q: '/static/black_queen.png',
|
||||
|
||||
P: '/static/white_pawn.png',
|
||||
R: '/static/white_rook.png',
|
||||
C: '/static/white_castle.png',
|
||||
B: '/static/white_bishop.png',
|
||||
K: '/static/white_king.png',
|
||||
Q: '/static/white_queen.png',
|
||||
};
|
||||
|
||||
const loadPromises = Object.entries(assets).map(([key, src]) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.src = src;
|
||||
img.onload = () => resolve({ key, img });
|
||||
img.onerror = () => reject(new Error(`Failed to load ${src}`));
|
||||
});
|
||||
});
|
||||
|
||||
Promise.all(loadPromises)
|
||||
.then((loadedAssets) => {
|
||||
loadedAssets.forEach(({ key, img }) => {
|
||||
textures[key] = img;
|
||||
});
|
||||
loop();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Failed to load assets:', err);
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user