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'; require_once '../src/core.php';
use Game\Game; use Game\Game;
use Game\Move;
$game = Game::fromStartPosition(); session_start();
if (isset($_SESSION["game"])) {
$game = $_SESSION["game"];
} else {
$game = Game::fromStartPosition();
$_SESSION["game"] = $game;
}
$content = function() use ($game) { $content = function() use ($game) {
require '../src/View/fragments/game.php'; require '../src/View/fragments/game.php';
}; };
require '../src/View/base.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", "version": "1.0.0",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"watch": "esbuild ./src/index.js --bundle --outfile=../html/static/bundle.js --watch",
"build": "esbuild ./src/index.js --bundle --outfile=../html/static/bundle.js", "build": "esbuild ./src/index.js --bundle --outfile=../html/static/bundle.js",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
}, },

View file

@ -1,3 +1,4 @@
import htmx from 'htmx.org';
const loadBoard = (board) => { const loadBoard = (board) => {
const boardId = board.getAttribute("data-board"); const boardId = board.getAttribute("data-board");
@ -46,6 +47,18 @@ const loadBoard = (board) => {
}); });
} }
export const loadBoards = () => { htmx.defineExtension('board', {
document.querySelectorAll(".board.interactive").forEach(loadBoard); 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 htmx from 'htmx.org';
import {loadBoards} from './board'; import "./board.ext";
window.htmx = htmx; 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 ?>" <div class="board <?= $interactive ? "interactive" : "" ?>" id="board<?= $boardId ?>"
data-board="<?= $boardId ?>" data-board="<?= $boardId ?>"
<?php if ($interactive) { ?> <?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 } ?>
> >
<?php <?php