PgnViewerJS was born as the third or fourth attempt to get a nice PGN viewer
for our chess club web site. PGN stands for Portable Game
Notation which was born in the late 80s, early 90s of the last
century. I provided some of the translations there ...
I first started using pgn4web and others as part of our Wordpress Installation,
but I had difficulties here and there. At the end, I wanted to have a viewer
that was at least as nice as the one from chess.com (later: from lichess.org).
The implementation contains the following parts:
base functionality for playing chess (but without a board).
- Chessground: Builds the missing building blocks for
displaying a chess board, with some functions: Moving pieces, some
animations, ... This board was developed for lichess.org.
It allows currently the following interfaces: pgnBoard, pgnPrint, pgnView, pgnEdit
- pgn-parser: module to parse the games.
- pgn-reader: module to model the game.
- pgn-viewer: module to show the game in a website.
How To & Support
To start with PgnViewerJS, you have to do the following steps:
- Download the current sources or the distro from below or build it on you own: `npm install; npm build`.
The directory `lib` of the module `pgn-viewer` is what you need.
- Fill the head of your HTML file with the relevant definitions, examples are included
in the distro in the directory
- Define in the body 2 parts:
div section with a unique ID.
script section that defines which API of the
viewer should be used. See the
examples section how to do it.
- Fill the configuration of the PgnViewerJS with the relevant
aspects: starting position, moves, theme, piece style, size, ... You may use the
configuration builder to try out which options are possible.
Currently the PgnViewerJS is provided as NPM library. So the recommended way to get any version is:
npm install @mliebelt/pgn-viewer.