feat: Show user move while engine is calculating

html/index.php

@@ -27,19 +27,29 @@ if (isset($_SESSION["game"])) {
     $_SESSION["engine"] = $engine;
 }
 
-$content = function() use ($game) {
-    require '../src/View/fragments/game.php';
+$move = null;
+$interactive = true;
+
+$content = function() use ($game, &$move, &$interactive) {
+    require "../src/View/fragments/game.php";
 };
 
 if (isset($_GET["move"])) {
     $move = Move::fromJS($_REQUEST["move"]);
-    $game->applyInPlace($move);
 
-    $opponentMove = $engine->nextMove($game);
-    $game->applyInPlace($opponentMove);
+    if (isset($_GET["wait"])) {
+        $opponentMove = $engine->nextMove($game);
+        $game->applyInPlace($opponentMove);
+
+        $content();
+    } else {
+        $game->applyInPlace($move);
+
+        $interactive = false;
+        $content();
+    }
 
-    $content();
 } else {
-    require '../src/View/base.php';
+    require "../src/View/base.php";
 }
 

html/static/styles.css

@@ -38,11 +38,11 @@
     transform: translate(-50%, -50%);
 }
 
-.board:not(.moveSelection) .square.black.hasMoves, .square.black.source {
+.board.interactive:not(.moveSelection) .square.black.hasMoves, .square.black.source {
     background-color: green;
 }
 
-.board:not(.moveSelection) .square.white.hasMoves, .square.white.source {
+.board.interactive:not(.moveSelection) .square.white.hasMoves, .square.white.source {
     background-color: greenyellow;
 }
 

js/src/htmx.js

@@ -0,0 +1,3 @@
+import htmx from 'htmx.org';
+
+window.htmx = htmx;

js/src/index.js

@@ -1,4 +1,2 @@
-import htmx from 'htmx.org';
+import "./htmx";
 import "./board.ext";
-
-window.htmx = htmx;

src/View/fragments/board.php

@@ -17,6 +17,7 @@ if (($viewSide ?? Side::WHITE) == Side::WHITE) {
 }
 
 $interactive ??= false;
+$move ??= null;
 
 global $boardId;
 $boardId = ($boardId ?? 0) + 1;
@@ -28,6 +29,8 @@ function getImageForPice(Piece $piece): string {
         ".svg";
 }
 
+echo $interactive;
+
 ?>
 <div class="board <?= $interactive ? "interactive" : "" ?>" id="board<?= $boardId ?>"
     data-board="<?= $boardId ?>"
@@ -37,6 +40,11 @@ function getImageForPice(Piece $piece): string {
         data-hx-trigger="chess-move-<?= $boardId ?> from:body"
         data-hx-swap="outerHTML"
         data-hx-target="this"
+    <?php } else if ($move) { ?>
+        data-hx-post="/?move=<?= $move->toJS() ?>&wait"
+        data-hx-swap="outerHTML"
+        data-hx-target="this"
+        data-hx-trigger="load"
     <?php } ?>
 >
     <?php

src/View/fragments/game.php

@@ -3,10 +3,6 @@
 use Game\Game;
 use Game\Side;
 
-$game ??= new Game([], Side::WHITE);
-
 $viewSide ??= Side::WHITE;
 
-$interactive = true;
-
 require "board.php";