JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chessboard-js/1.0.0/chessboard-1.0.0.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.2/chess.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/stockfish.js"></script>
<div id="board" style="width: 400px"></div>
<p id="status"></p>

CSS

#board-wrapper {
  width: 400px; /* Initial size */
  height: 400px; /* Ensure square */
  resize: both;
  overflow: hidden;
  display: inline-block;
}

#board {
  width: 100%;
  height: 100%;
}

JavaScript

$(document).ready(function () {
  var board;
  var game = new Chess();

  var stockfish = null;
  var stockfishReady = false;
  var stockfishThinking = false;

  // --------------------------------------------------
  // LOAD STOCKFISH
  // --------------------------------------------------

  fetch(
    "https://cdnjs.cloudflare.com/ajax/libs/stockfish.js/10.0.2/stockfish.js"
  )
    .then(function (response) {
      if (!response.ok) {
        throw new Error("HTTP " + response.status);
      }

      return response.text();
    })
    .then(function (code) {
      console.log("Stockfish downloaded");

      var blob = new Blob([code], {
        type: "application/javascript"
      });

      var workerUrl = URL.createObjectURL(blob);

      stockfish = new Worker(workerUrl);

      setupStockfish();
    })
    .catch(function (error) {
      console.error("Unable to load Stockfish:", error);
      $("#status").text("Could not load computer player.");
    });


  // --------------------------------------------------
  // SET UP STOCKFISH
  // --------------------------------------------------

  function setupStockfish() {
    stockfish.onerror = function (error) {
      console.error("STOCKFISH ERROR:", error);
    };

    stockfish.onmessage = function (event) {
      var message = String(event.data).trim();

      console.log("Stockfish:", message);

      if (message === "uciok") {
        stockfish.postMessage("isready");
        return;
      }

      if (message === "readyok") {
        stockfishReady = true;

        console.log("STOCKFISH READY");

        return;
      }

      if (message.indexOf("bestmove") === 0) {
        stockfishThinking = false;

        var parts = message.split(" ");
        var bestMove = parts[1];

        if (!bestMove || bestMove === "(none)") {
          updateStatus();
          return;
        }

        var from = bestMove.substring(0,...