sigmasternchen/php-chess
1
0
Fork 0
mirror of https://github.com/sigmasternchen/php-chess synced 2025-03-15 07:58:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Send selected move to backend

Browse source
This commit is contained in:
sigmasternchen 2024-10-26 23:33:25 +02:00
parent 450e2450db
commit 7c17ff94b6
2 changed files with 20 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
js/src/board.js
View file

@ -1,25 +1,33 @@
const loadBoard = (board) => { const loadBoard = (board) => {
const boardId = board.getAttribute("data-board");
const getSquare = square => board.getElementsByClassName(square)[0]; 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 = () => { const clearSelection = () => {
board.classList.remove("moveSelection"); board.classList.remove("moveSelection");
board.querySelectorAll(".source").forEach(element => { board.querySelectorAll(".source").forEach(element => {
element.classList.remove("source") element.classList.remove("source");
}); });
board.querySelectorAll(".movePossible").forEach(element => { board.querySelectorAll(".movePossible").forEach(element => {
element.classList.remove("movePossible") element.classList.remove("movePossible");
element.removeEventListener("click", moveSelected);
}); });
}; };
const enterSelection = (moves) => { const enterSelection = (moves) => {
board.classList.add("moveSelection"); board.classList.add("moveSelection");
for (const move of moves) { 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"); getSquare(move.source).classList.add("source");
} }
} }
const moveSelected = (move) => {
// TODO
};
board.querySelectorAll(".piece.hasMoves").forEach(element => { board.querySelectorAll(".piece.hasMoves").forEach(element => {
element.addEventListener("click", event => { element.addEventListener("click", event => {

7
src/View/fragments/board.php
View file

@ -29,7 +29,12 @@ function getImageForPice(Piece $piece): string {
} }
?> ?>
<div class="board <?= $interactive ? "interactive" : "" ?>" id="board<?= $boardId ?>"> <div class="board <?= $interactive ? "interactive" : "" ?>" id="board<?= $boardId ?>"
data-board="<?= $boardId ?>"
<?php if ($interactive) { ?>
data-hx-post="/?move" data-hx-trigger="chess-move-<?= $boardId ?> from:body"
<?php } ?>
>
<?php <?php
for($rank = $start; $rank != $end; $rank += $dir) { for($rank = $start; $rank != $end; $rank += $dir) {
for($file = $start; $file != $end; $file += $dir) { for($file = $start; $file != $end; $file += $dir) {