Shop

<div id="puzzlebot-container"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.polyfills.min.js"></script>

<script>
  var board = null;
  var game = new Chess();

  function onDragStart(source, piece, position, orientation) {
    // do not allow dragging when game is over
    if (game.game_over()) return false;

    // only allow white pieces to be dragged
    if (piece.search(/^b/) !== -1) return false;
  }

  function onDrop(source, target) {
    // see if the move is legal
    var move = game.move({
      from: source,
      to: target,
      promotion: "q" // always promote to a queen for example simplicity
    });

    // illegal move
    if (move === null) return "snapback";

    // update the board position
    board.position(game.fen());

    // get a random move from the engine
    window.setTimeout(makeRandomMove, 250);
  }

  // make a random move
  function makeRandomMove() {
    var possibleMoves = game.moves();

    // game over
    if (possibleMoves.length === 0) return;

    var randomIndex = Math.floor(Math.random() * possibleMoves.length);
    game.move(possibleMoves[randomIndex]);
    board.position(game.fen());
  }

  // initialize the chessboard
  function init() {
    var config = {
      draggable: true,
      onDragStart: onDragStart,
      onDrop: onDrop,
      position: 'start'
    };

    board = Chessboard('puzzlebot-container', config);

    makeRandomMove();
  }

  $(document).ready(init);
</script>