Chess Diagram

A JavaScript toolkit to visualize and animate chess diagrams in the browser.

Visualise a diagram

The simplest use-case for ChessDiagram is to visualize a given position:

<div id="diagramId" style="width:400px"></div>

<script>
  const diagram = new ChessDiagram("diagramId", {
    position:
      "r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R w KQkq - 0 1" // Ruy Lopez
  });
</script>

This will render the following:

The position parameter uses the FEN notation. The parameter is optional and defaults to the starting position.

Animate a diagram

ChessDiagram can animate a position like in the following example:

<div id="diagramId" style="width:400px"></div>
<button id="play">play</button>
<script>
  const diagram = new ChessDiagram("diagramId", {
    moves: ["e4", "e5", "Nf3", "Nc6", "Bb5"] // ruy lopez moves, position is null so chess diagram will render the starting position
  });

  document.getElementById("play").addEventListener("click", () => {
    diagram.playMoves();
  });
</script>

Program an interactive diagram

Or you can interact with the diagram going back and forth through its moves:

<div id="diagramId" style="width:400px"></div>
<button id="prev">previous move</button>
<button id="next">next move</button>

<script>
  const diagram = new ChessDiagram("diagramId", {
    moves: ["e4", "e5", "Nf3", "Nc6", "Bb5"] // ruy lopez
  });

  document.getElementById("prev").addEventListener("click", () => {
    diagram.gotoPreviousMove();
  });

  document.getElementById("next").addEventListener("click", () => {
    diagram.gotoNextMove();
  });
</script>

Use a pgn string

<div id="diagramId" style="width:400px"></div>
<button id="play">play</button>
<script>
  const diagram = new ChessDiagram("diagramId", {
    pgn: `
[Event "Linares"]
[Site "Linares ESP"]
[Date "1993.03.08"]
[EventDate "1993.02.23"]
[Round "9"]
[Result "1-0"]
[White "Garry Kasparov"]
[Black "Viswanathan Anand"]
[ECO "D18"]
[WhiteElo "?"]
[BlackElo "?"]
[PlyCount "129"]

1.d4 d5 2.c4 c6 3.Nf3 Nf6 4.Nc3 dxc4 5.a4 Bf5 6.e3 e6 7.Bxc4
Bb4 8.O-O Nbd7 9.Nh4 Bg6 10.h3 O-O 11.Nxg6 hxg6 12.Qc2 Rc8
13.Rd1 Qb6 14.e4 c5 15.d5 Ne5 16.Be2 exd5 17.Nxd5 Nxd5 18.Rxd5
Nc6 19.Bc4 Nd4 20.Qd3 Rcd8 21.Be3 Rxd5 22.Bxd5 Rd8 23.Qc4 Rd7
24.Rc1 Qf6 25.Rd1 Ne6 26.Qb3 a5 27.Rd3 Nf4 28.e5 Qf5 29.Bxf4
Qxf4 30.e6 Rd8 31.e7 Re8 32.Rf3 Qc1+ 33.Kh2 Rxe7 34.Bxf7+ Kh7
35.Bxg6+ Kh6 36.Qd5 Qg5 37.Bf5 g6 38.h4 Qf6 39.Bd3 Qe5+
40.Qxe5 Rxe5 41.Rf6 c4 42.Bxc4 Be7 43.Rb6 Bc5 44.Rf6 Re4
45.Bd3 Rg4 46.Kh3 Be7 47.Re6 Rxh4+ 48.Kg3 Rd4 49.Rxg6+ Kh5
50.Bf5 Bd6+ 51.Kf3 Bc5 52.g4 Kh4 53.Rh6+ Kg5 54.Rg6+ Kh4
55.Be4 Rd6 56.Rg7 Rf6+ 57.Bf5 Rb6 58.Rh7+ Kg5 59.Rh5+ Kf6
60.Bd3 Bd4 61.g5+ Kg7 62.Rh7+ Kf8 63.Bc4 Rxb2 64.Rf7+ Ke8
65.g6 1-0`
  });

  document.getElementById("play").addEventListener("click", () => {
    diagram.playMoves();
  });
</script>

Known limitations

• Promotion doesn't work (I intend to fix this soon)
• Once an animation started, there's no way to pause/stop. This is hard to change and will work on it only there are requests for it.
• There's no way to interact with the pieces via drag and drop. I do not to fix this as I consider it an anti-feature for Chess Diagram.

License

MIT License Copyright (c) Luca Pette