fix: Clicking on a piece will no longer prevent the move

This commit is contained in:
sigmasternchen 2024-10-31 16:46:53 +01:00
parent a17a2eda9a
commit 18861302e6
2 changed files with 10 additions and 9 deletions

View file

@ -4,8 +4,7 @@ const loadBoard = (board) => {
const boardId = board.getAttribute("data-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 moveSelected = event => {
const move = event.target.getAttribute("data-move"); const move = event.currentTarget.getAttribute("data-move");
console.log(move);
board.setAttribute("data-hx-vals", JSON.stringify({"move": move})); board.setAttribute("data-hx-vals", JSON.stringify({"move": move}));
htmx.trigger(document.body, "chess-move-" + boardId, {}); htmx.trigger(document.body, "chess-move-" + boardId, {});
}; };
@ -49,7 +48,6 @@ const loadBoard = (board) => {
htmx.defineExtension('board', { htmx.defineExtension('board', {
onEvent : function(name, event) { onEvent : function(name, event) {
console.log(name);
if (name !== "htmx:afterProcessNode" || if (name !== "htmx:afterProcessNode" ||
( (
event?.target?.getAttribute("hx-ext") ?? event?.target?.getAttribute("hx-ext") ??

View file

@ -29,14 +29,14 @@ function getImageForPice(Piece $piece): string {
} }
?> ?>
<div class="gameinfo">
Current Player: <?= $game->getCurrentSide()->name ?><br />
Game State: <?= $game->getGameState()->name ?>
</div>
<div class="board <?= $interactive ? "interactive" : "" ?>" id="board<?= $boardId ?>" <div class="board <?= $interactive ? "interactive" : "" ?>" id="board<?= $boardId ?>"
data-board="<?= $boardId ?>" data-board="<?= $boardId ?>"
<?php if ($interactive) { ?> <?php if ($interactive) { ?>
data-hx-ext="board" data-hx-post="/?move" data-hx-trigger="chess-move-<?= $boardId ?> from:body" data-hx-ext="board"
data-hx-post="/?move"
data-hx-trigger="chess-move-<?= $boardId ?> from:body"
data-hx-swap="outerHTML"
data-hx-target="this"
<?php } ?> <?php } ?>
> >
<?php <?php
@ -47,7 +47,10 @@ function getImageForPice(Piece $piece): string {
$moves = $piece ? $game->getMovesForPiece($piece) : []; $moves = $piece ? $game->getMovesForPiece($piece) : [];
$hasMoves = count($moves) > 0; $hasMoves = count($moves) > 0;
?> ?>
<div class="square <?= strtolower($position->getSquareColor()->name) ?> <?= $hasMoves ? "hasMoves" : "" ?> <?= $position ?>"> <div
class="square <?= strtolower($position->getSquareColor()->name) ?> <?= $hasMoves ? "hasMoves" : "" ?> <?= $position ?>"
data-square="<?= $position ?>"
>
<?php <?php
if ($piece) { if ($piece) {
?> ?>