diff --git a/js/src/board.js b/js/src/board.js index 231ae5c..47dea77 100644 --- a/js/src/board.js +++ b/js/src/board.js @@ -1,25 +1,33 @@ const loadBoard = (board) => { + const boardId = board.getAttribute("data-board"); const getSquare = square => board.getElementsByClassName(square)[0]; + const moveSelected = event => { + const move = event.target.getAttribute("data-move"); + console.log(move); + board.setAttribute("data-hx-vals", JSON.stringify({"move": move})); + htmx.trigger(document.body, "chess-move-" + boardId, {}); + }; const clearSelection = () => { board.classList.remove("moveSelection"); board.querySelectorAll(".source").forEach(element => { - element.classList.remove("source") + element.classList.remove("source"); }); board.querySelectorAll(".movePossible").forEach(element => { - element.classList.remove("movePossible") + element.classList.remove("movePossible"); + element.removeEventListener("click", moveSelected); }); }; const enterSelection = (moves) => { board.classList.add("moveSelection"); for (const move of moves) { - getSquare(move.target).classList.add("movePossible"); + const target = getSquare(move.target); + target.classList.add("movePossible"); + target.setAttribute("data-move", move.encoded); + target.addEventListener("click", moveSelected); getSquare(move.source).classList.add("source"); } } - const moveSelected = (move) => { - // TODO - }; board.querySelectorAll(".piece.hasMoves").forEach(element => { element.addEventListener("click", event => { diff --git a/src/View/fragments/board.php b/src/View/fragments/board.php index c8f3ce4..5a9fa32 100644 --- a/src/View/fragments/board.php +++ b/src/View/fragments/board.php @@ -29,7 +29,12 @@ function getImageForPice(Piece $piece): string { } ?> -