Search code examples
javascripthtmlchessboard.js

How do I use chessboard.js , a javascript chessboard?

I am attempting to use a JavaScript chessboard here: http://chessboardjs.com/. Unfortunately, I don't know JavaScript or CSS, and am rusty in HTML, so I don't understand the documentation, even though this seems to be a standard JavaScript chessboard.

How exactly does one install and use this package in order to render a chessboard? The "examples" are all snippets of HTML or JavaScript, useless to me without being embedded in a working web page. And the source to sample web pages do not work when copied to my home directory.

For example, the examples web page purports to render an empty board, and does so on their server, but when I copy the source to my local directory, only a blank page renders. The source of that page does not make sense to me anyway, for example, it refers to files js/chessboard.js and js/json3.min.js, neither of which are in the distribution (nor does the render work when chessboard.js is replaced with the name of the JavaScript file in the distribution).

I assume the issue has something to do with where img files are searched for, and where files are stored. And presumably these are so obvious to JavaScript experts that it's all implicit in this package and aren't ever explained in the documentation.

So, what I would like is a file foo.html that, when copied to my local machine, will render a chessboard using the chessboard.js source.

Solution

  • Create a new text file, and paste this inside:

    <!DOCTYPE html>
<html>
  <head>
    <title>Chess</title>
    <link rel="stylesheet" href="css/chessboard-1.0.0.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2"
        crossorigin="anonymous"></script>
    <script src="js/chessboard-1.0.0.min.js"></script>
  </head>
  <body>
    <div id="board1" style="width: 400px"></div>
    <script>
        var board1 = ChessBoard('board1', 'start');
    </script>
  </body>
</html>

    Then save it with the .html extension.

    Next, download their distributable from their download page. And unzip the folder.

    Next, put your HTML file in the same folder as the js, img, and css folders from the unzipped distributable.

    Double click/Run the HTML file. The URL should say file:///C:/path/to/the/file.html.

    You should see

    enter image description here