feat: Show user move while engine is calculating

This commit is contained in:
sigmasternchen 2024-10-31 22:19:17 +01:00
parent 1039ea037f
commit 3b3d6904c2
6 changed files with 31 additions and 16 deletions

View file

@ -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";
}

View file

@ -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;
}

3
js/src/htmx.js Normal file
View file

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

View file

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

View file

@ -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

View file

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