diff --git a/html/index.php b/html/index.php index d67531e..18bac88 100644 --- a/html/index.php +++ b/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"; } diff --git a/html/static/styles.css b/html/static/styles.css index 89c79a8..e1c9200 100644 --- a/html/static/styles.css +++ b/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; } diff --git a/js/src/htmx.js b/js/src/htmx.js new file mode 100644 index 0000000..e4731a7 --- /dev/null +++ b/js/src/htmx.js @@ -0,0 +1,3 @@ +import htmx from 'htmx.org'; + +window.htmx = htmx; \ No newline at end of file diff --git a/js/src/index.js b/js/src/index.js index fa8a6da..fb70da8 100644 --- a/js/src/index.js +++ b/js/src/index.js @@ -1,4 +1,2 @@ -import htmx from 'htmx.org'; +import "./htmx"; import "./board.ext"; - -window.htmx = htmx; diff --git a/src/View/fragments/board.php b/src/View/fragments/board.php index 1052593..52a99a7 100644 --- a/src/View/fragments/board.php +++ b/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; + ?>
" id="board" data-board="" @@ -37,6 +40,11 @@ function getImageForPice(Piece $piece): string { data-hx-trigger="chess-move- from:body" data-hx-swap="outerHTML" data-hx-target="this" + + data-hx-post="/?move=toJS() ?>&wait" + data-hx-swap="outerHTML" + data-hx-target="this" + data-hx-trigger="load" >