refactor: Change board handling to HTMX extension to allow reloading

This commit is contained in:
sigmasternchen 2024-10-31 16:18:23 +01:00
parent f36fba17d9
commit a98fb64975
5 changed files with 41 additions and 11 deletions

View file

@ -3,11 +3,27 @@
require_once '../src/core.php';
use Game\Game;
use Game\Move;
session_start();
if (isset($_SESSION["game"])) {
$game = $_SESSION["game"];
} else {
$game = Game::fromStartPosition();
$_SESSION["game"] = $game;
}
$content = function() use ($game) {
require '../src/View/fragments/game.php';
};
if (isset($_GET["move"])) {
$move = Move::fromJS($_REQUEST["move"]);
$game->applyInPlace($move);
$content();
} else {
require '../src/View/base.php';
}

View file

@ -3,6 +3,7 @@
"version": "1.0.0",
"main": "index.js",
"scripts": {
"watch": "esbuild ./src/index.js --bundle --outfile=../html/static/bundle.js --watch",
"build": "esbuild ./src/index.js --bundle --outfile=../html/static/bundle.js",
"test": "echo \"Error: no test specified\" && exit 1"
},

View file

@ -1,3 +1,4 @@
import htmx from 'htmx.org';
const loadBoard = (board) => {
const boardId = board.getAttribute("data-board");
@ -46,6 +47,18 @@ const loadBoard = (board) => {
});
}
export const loadBoards = () => {
document.querySelectorAll(".board.interactive").forEach(loadBoard);
};
htmx.defineExtension('board', {
onEvent : function(name, event) {
console.log(name);
if (name !== "htmx:afterProcessNode" ||
(
event?.target?.getAttribute("hx-ext") ??
event?.target?.getAttribute("data-hx-ext" ?? "")
) !== "board"
) {
return;
}
loadBoard(event.target);
}
})

View file

@ -1,8 +1,4 @@
import htmx from 'htmx.org';
import {loadBoards} from './board';
import "./board.ext";
window.htmx = htmx;
window.addEventListener("load", () => {
loadBoards();
});

View file

@ -29,10 +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 ?>"
data-board="<?= $boardId ?>"
<?php if ($interactive) { ?>
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"
<?php } ?>
>
<?php