From a98fb64975ace440c8bdc303cbbd488a4865309c Mon Sep 17 00:00:00 2001
From: sigmasternchen <git@sigma-star.io>
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 {
 }
 
 ?>
+<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