You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
156 lines
3.6 KiB
156 lines
3.6 KiB
const playField = document.getElementById("playfield");
|
|
const piecesArea = document.getElementById("pieces-area");
|
|
player = "black";
|
|
selectedPiece = null;
|
|
moveContinuation = false;
|
|
|
|
function movePiece(piece, x, y){
|
|
|
|
const tile = document.getElementById("tile" + x + y);
|
|
|
|
const offsetPosition = piecesArea.getBoundingClientRect();
|
|
const position = tile.getBoundingClientRect();
|
|
|
|
const top = position.top - offsetPosition.top;
|
|
const left = position.left - offsetPosition.left;
|
|
|
|
piece.style.top = top + "px";
|
|
piece.style.left = left + "px";
|
|
|
|
piece.setAttribute("x", x);
|
|
piece.setAttribute("y", y);
|
|
}
|
|
|
|
function generatePlayField(){
|
|
|
|
|
|
|
|
for (let i = 0; i < 8; i++) {
|
|
|
|
row = document.createElement("div");
|
|
|
|
row.classList.add("row");
|
|
|
|
row.id = "row" + i;
|
|
|
|
for (let j = 0; j < 8; j++) {
|
|
tile = document.createElement("div");
|
|
|
|
tile.classList.add("tile");
|
|
tile.id = "tile" + i + j;
|
|
tile.setAttribute("x", i);
|
|
tile.setAttribute("y", j);
|
|
|
|
row.appendChild(tile);
|
|
|
|
tile.addEventListener("click", tileClickEvent.bind(null,i,j));
|
|
|
|
|
|
|
|
}
|
|
|
|
playField.appendChild(row);
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
function generatePieces(){
|
|
pieceList.forEach(pieceRecord => {
|
|
piece = document.createElement("div");
|
|
|
|
piece.classList.add(pieceRecord.player);
|
|
piece.classList.add(pieceRecord.type);
|
|
|
|
piece.setAttribute("x", pieceRecord.x);
|
|
piece.setAttribute("y", pieceRecord.y);
|
|
|
|
piece.id = "piece" + pieceRecord.id;
|
|
|
|
piecesArea.appendChild(piece);
|
|
|
|
movePiece(piece, pieceRecord.x, pieceRecord.y)
|
|
|
|
|
|
piece.addEventListener("click", pieceClickEvent.bind("null", piece))
|
|
|
|
});
|
|
}
|
|
|
|
function getPieceRecordFromPiece(piece) {
|
|
return getPieceRecord(piece.getAttribute("x"), piece.getAttribute("y"));
|
|
}
|
|
|
|
function updatePieces() {
|
|
|
|
const safeList = new Array();
|
|
|
|
pieceList.forEach(pieceRecord => {
|
|
|
|
const piece = document.getElementById("piece" + pieceRecord.id);
|
|
|
|
safeList.push(piece.id);
|
|
movePiece(piece, pieceRecord.x, pieceRecord.y)
|
|
|
|
});
|
|
|
|
const pieces = piecesArea.childNodes;
|
|
|
|
pieces.forEach(piece => {
|
|
if (!safeList.includes(piece.id)) {
|
|
piece.remove();
|
|
}
|
|
});
|
|
}
|
|
|
|
function resetPieceSelection() {
|
|
if(selectedPiece != null){
|
|
selectedPiece.classList.remove("selected");
|
|
selectedPiece = null;
|
|
}
|
|
}
|
|
|
|
function pieceClickEvent(piece){
|
|
const pieceRecord = getPieceRecordFromPiece(piece);
|
|
if(pieceRecord.player == player){
|
|
|
|
resetPieceSelection();
|
|
selectedPiece = piece;
|
|
selectedPiece.classList.add("selected");
|
|
}
|
|
|
|
|
|
}
|
|
|
|
function tileClickEvent(x, y){
|
|
|
|
if(selectedPiece != null){
|
|
|
|
const pieceRecord = getPieceRecordFromPiece(selectedPiece);
|
|
const validity = makeMove(pieceRecord, x,y);
|
|
|
|
alert(validity);
|
|
switch (validity) {
|
|
case 0:
|
|
alert("neplatný tah!")
|
|
break;
|
|
case 1:
|
|
resetPieceSelection();
|
|
updatePieces();
|
|
player = (player == "white") ? "black" : "white";
|
|
break;
|
|
case 2:
|
|
updatePieces();
|
|
|
|
}
|
|
|
|
/*movePiece(selectedPiece, x, y);
|
|
resetPieceSelection();*/
|
|
}
|
|
}
|
|
|
|
generatePlayField();
|
|
generatePieces();
|
|
|
|
|
|
|