mirror of
https://github.com/sigmasternchen/php-chess
synced 2025-03-15 07:58:54 +00:00
feat: Move frontend board logic to npm setup
This commit is contained in:
parent
b658b4493d
commit
450e2450db
3 changed files with 49 additions and 47 deletions
43
js/src/board.js
Normal file
43
js/src/board.js
Normal file
|
@ -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);
|
||||||
|
};
|
|
@ -1,3 +1,8 @@
|
||||||
import htmx from 'htmx.org';
|
import htmx from 'htmx.org';
|
||||||
|
import {loadBoards} from './board';
|
||||||
|
|
||||||
window.htmx = htmx;
|
window.htmx = htmx;
|
||||||
|
|
||||||
|
window.addEventListener("load", () => {
|
||||||
|
loadBoards();
|
||||||
|
});
|
|
@ -60,49 +60,3 @@ function getImageForPice(Piece $piece): string {
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
</div>
|
</div>
|
||||||
<?php
|
|
||||||
if ($interactive) {
|
|
||||||
?>
|
|
||||||
<script>
|
|
||||||
window.addEventListener("load", () => {
|
|
||||||
const board = document.getElementById("board<?= $boardId ?>");
|
|
||||||
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();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<?php
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in a new issue