From a98fb64975ace440c8bdc303cbbd488a4865309c Mon Sep 17 00:00:00 2001 From: sigmasternchen Date: Thu, 31 Oct 2024 16:18:23 +0100 Subject: [PATCH] refactor: Change board handling to HTMX extension to allow reloading --- html/index.php | 20 ++++++++++++++++++-- js/package.json | 1 + js/src/{board.js => board.ext.js} | 19 ++++++++++++++++--- js/src/index.js | 6 +----- src/View/fragments/board.php | 6 +++++- 5 files changed, 41 insertions(+), 11 deletions(-) rename js/src/{board.js => board.ext.js} (81%) diff --git a/html/index.php b/html/index.php index 228cf4e..4900224 100644 --- a/html/index.php +++ b/html/index.php @@ -3,11 +3,27 @@ require_once '../src/core.php'; 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) { 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'; +} + diff --git a/js/package.json b/js/package.json index 26119a5..7400c23 100644 --- a/js/package.json +++ b/js/package.json @@ -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" }, diff --git a/js/src/board.js b/js/src/board.ext.js similarity index 81% rename from js/src/board.js rename to js/src/board.ext.js index 47dea77..9413078 100644 --- a/js/src/board.js +++ b/js/src/board.ext.js @@ -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); -}; \ No newline at end of file +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); + } +}) \ No newline at end of file diff --git a/js/src/index.js b/js/src/index.js index f8f6145..fa8a6da 100644 --- a/js/src/index.js +++ b/js/src/index.js @@ -1,8 +1,4 @@ import htmx from 'htmx.org'; -import {loadBoards} from './board'; +import "./board.ext"; window.htmx = htmx; - -window.addEventListener("load", () => { - loadBoards(); -}); \ No newline at end of file diff --git a/src/View/fragments/board.php b/src/View/fragments/board.php index 5a9fa32..0d945f0 100644 --- a/src/View/fragments/board.php +++ b/src/View/fragments/board.php @@ -29,10 +29,14 @@ function getImageForPice(Piece $piece): string { } ?> +
+ Current Player: getCurrentSide()->name ?>
+ Game State: getGameState()->name ?> +
" id="board" data-board="" - data-hx-post="/?move" data-hx-trigger="chess-move- from:body" + data-hx-ext="board" data-hx-post="/?move" data-hx-trigger="chess-move- from:body" >