mirror of
https://github.com/sigmasternchen/php-chess
synced 2025-03-15 07:58:54 +00:00
feat: Send selected move to backend
This commit is contained in:
parent
450e2450db
commit
7c17ff94b6
2 changed files with 20 additions and 7 deletions
|
@ -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 => {
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue