board-gui.js – minimal example

This page demonstrates the smallest working setup for the BoardGui widget: just board.css, xiangqi.js and board-gui.js. View the page source for a copy-pasteable starting point. The non-minified versions of the JS and CSS files are accessible if you just removed the ".min" from the URLs, so you can also see the functions.

If you only need in-memory functions (e.g. validating if a FEN is correct), you can just use xiangqi.js without the GUI. board-gui.js only provides the visual board and user interaction, but it relies on xiangqi.js for all the game logic (for examples legal moves). Therefore board-gui.js requires board.css.

The images (pieces) and sound assets are resolved from https://cdn.elephantchess.io/static by default, but you can also specify a custom base URL in assetsBaseUrl when initializing the BoardGui and copy the assets to be served by your own server. Pieces can be downloaded from https://cdn.elephantchess.io/static/pieces.zip.

Setup

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <link rel="stylesheet" href="https://cdn.elephantchess.io/dist/0.0.1/board.min.css">
  <script defer src="https://cdn.elephantchess.io/dist/0.0.1/xiangqi.min.js"></script>
  <script defer src="https://cdn.elephantchess.io/dist/0.0.1/board-gui.min.js"></script>
</head>
<body>
<div id="board-container" class="board-container"></div>
<script>
  window.addEventListener('load', () => {
      const boardGui = new BoardGui({
            elementId: 'board-container'// defaults to #board-container
        });
      boardGui.loadFen(DEFAULT_START_FEN);
  });
</script>
</body>
</html>

Using xiangqi.js without the GUI

If you only need the game logic in memory (e.g. validating a FEN, applying moves, listing legal moves, detecting checkmate, etc.), you can use xiangqi.js on its own — no board-gui.js and no board.css required. Open your browser console on this page and run the snippet below; it prints the FEN and an ASCII representation of the board, plays two moves, and prints the new state.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <script defer src="https://cdn.elephantchess.io/dist/0.0.1/xiangqi.min.js"></script>
</head>
<body>
<script>
  window.addEventListener('load', () => {
      const board = new Board();
      board.loadFen(DEFAULT_START_FEN);
      console.log(board.outputFen());
      board.printBoard();
      board.registerMove(HalfMove.parseUci('h2e2')); // C2=5
      board.registerMove(HalfMove.parseUci('h9g7')); // H8+7
      console.log(board.outputFen());
      board.printBoard();
  });
</script>
</body>
</html>

Expected console output:

rnbakabnr/9/1c5c1/p1p1p1p1p/9/9/P1P1P1P1P/1C5C1/9/RNBAKABNR w - - 0 0
   a b c d e f g h i
9  r n b a k a b n r
8                   
7    c           c  
6  p   p   p   p   p
5                   
4
2    C           C  
1                   
0  R N B A K A B N R
rnbakab1r/9/1c4nc1/p1p1p1p1p/9/9/P1P1P1P1P/1C2C4/9/RNBAKABNR w - - 0 1
   a b c d e f g h i
9  r n b a k a b   r
8                   
7    c         n c  
6  p   p   p   p   p
5                   
4                   
3  P   P   P   P   P
2    C     C        
1                   
0  R N B A K A B N R

A few useful entry points exposed by xiangqi.js: