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.
123 lines
2.6 KiB
123 lines
2.6 KiB
const playField = document.getElementById("playfield");
|
|
const piecesArea = document.getElementById("pieces-area");
|
|
const player = "black";
|
|
var selectedPiece = null;
|
|
|
|
|
|
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);
|
|
|
|
piecesArea.appendChild(piece);
|
|
|
|
movePiece(piece, pieceRecord.x, pieceRecord.y)
|
|
|
|
if(pieceRecord.player == player){
|
|
piece.addEventListener("click", pieceClickEvent.bind("null", piece))
|
|
}
|
|
});
|
|
}
|
|
|
|
function findValidMoves(piece){
|
|
|
|
const x = piece.getAttribute("x");
|
|
const y = piece.getAttribute("y");
|
|
|
|
const pieceRecord = getPieceRecord(x,y);
|
|
|
|
const directionMultiplier = (pieceRecord.player == "white") ? 1 : -1;
|
|
|
|
var validMoves = new Array();
|
|
|
|
//DODĚLAT ZDE!
|
|
|
|
return validMoves;
|
|
|
|
|
|
}
|
|
|
|
function resetPieceSelection() {
|
|
if(selectedPiece != null){
|
|
selectedPiece.classList.remove("selected");
|
|
selectedPiece = null;
|
|
}
|
|
}
|
|
|
|
function pieceClickEvent(piece){
|
|
resetPieceSelection();
|
|
selectedPiece = piece;
|
|
selectedPiece.classList.add("selected");
|
|
|
|
|
|
}
|
|
|
|
function tileClickEvent(x, y){
|
|
|
|
if(selectedPiece != null){
|
|
movePiece(selectedPiece, x, y)
|
|
resetPieceSelection();
|
|
}
|
|
}
|
|
|
|
generatePlayField();
|
|
generatePieces();
|
|
|
|
|
|
|