diff --git a/js/src/board.js b/js/src/board.js new file mode 100644 index 0000000..231ae5c --- /dev/null +++ b/js/src/board.js @@ -0,0 +1,43 @@ + +const loadBoard = (board) => { + const getSquare = square => board.getElementsByClassName(square)[0]; + const clearSelection = () => { + board.classList.remove("moveSelection"); + board.querySelectorAll(".source").forEach(element => { + element.classList.remove("source") + }); + board.querySelectorAll(".movePossible").forEach(element => { + element.classList.remove("movePossible") + }); + }; + const enterSelection = (moves) => { + board.classList.add("moveSelection"); + for (const move of moves) { + getSquare(move.target).classList.add("movePossible"); + getSquare(move.source).classList.add("source"); + } + } + const moveSelected = (move) => { + // TODO + }; + + board.querySelectorAll(".piece.hasMoves").forEach(element => { + element.addEventListener("click", event => { + clearSelection(); + const moves = element.getAttribute("data-moves").split(";").map(move => ({ + encoded: move, + source: move.split(",")[0].split("-")[2], + target: move.split(",")[1] + })); + enterSelection(moves); + event.stopPropagation(); + }); + }); + board.addEventListener("click", () => { + clearSelection(); + }); +} + +export const loadBoards = () => { + document.querySelectorAll(".board.interactive").forEach(loadBoard); +}; \ No newline at end of file diff --git a/js/src/index.js b/js/src/index.js index e4731a7..f8f6145 100644 --- a/js/src/index.js +++ b/js/src/index.js @@ -1,3 +1,8 @@ import htmx from 'htmx.org'; +import {loadBoards} from './board'; -window.htmx = htmx; \ No newline at end of file +window.htmx = htmx; + +window.addEventListener("load", () => { + loadBoards(); +}); \ No newline at end of file diff --git a/src/View/fragments/board.php b/src/View/fragments/board.php index 844e496..c8f3ce4 100644 --- a/src/View/fragments/board.php +++ b/src/View/fragments/board.php @@ -60,49 +60,3 @@ function getImageForPice(Piece $piece): string { } ?> - - -