PgnJS

From Wikitest
Revision as of 05:37, 28 December 2017 by Admin (talk | contribs) (Experimental features)

Jump to: navigation, search

PgnJS is an extension that displays chess games (boards and moves) given in PGN format in <pgn> tags.

Basic Features

An empty <pgn> tag simply displays the starting position:

<pgn/>

Add a game in PGN format in the <pgn> tag to get the board, the moves and a few buttons to navigate through the moves. For instance, the wikitext

<pgn>1. f4 e6 2. g4 Qh4</pgn>

gives the following result

Of course, the PGN may contain annotation and even game variation. The PGNViewerJS engine is really powerful and gives nice unbloated results:

<pgn style="width:100%" boardsize=300px>1. e4 e5 {The following are several possible variations for the king-side opening. } 
( 1... c5 2. Nf3 d6 3. d4 cxd4 4. Nxd4 Nf6 5. Nc3 a6 
( 5... e5 6. Ndb5 a6 7. Na3 b5 8. Nd5 Nxe4 { This is a wild variation } ) 6. Be3 e6 ) 
2. Nf3 ( 2. f4 exf4 3. Nf3 g5 ( 3... Nf6 4. e5 Nh5 ) ( 3... Be7 4. Bc4 Bh4+ 5. Kf1 ) 4. h4 ) Nc6 3. Bb5 a6 4. Ba4
</pgn>

Stable Features

Mode attribute

There are 4 available modes: board, view, print, and edit.

mode board (no PGN):

mode view (default):

mode print (use $220 NAG to display board):

mode edit:

Styling attributes

Use style for styling (size, margin...):

Use attribute pieceStyle to specify the piece style:

Merida:

Case:

Wikipedia:

Alpha:

USCF:

Condal:

Maya:

Leipzig:


Use attribute theme to specify the theme:

Chess.com (need boardSize):

Normal:

Falken (need boardSize:

Green:

Zeit:

Informator:

Sportverlag:

Beyer (off its <div> even with margin):

Blue:

Other PgnViewerJS Attributes

Attribute position (to give a starting FEN):

Attribute position (combined with PGN):

Attribute showNotation:

Attribute orientation:

Attribute timerTime:

Attribute locale (for now, only en and de):

Attribute boardSize:

Experimental features

Here we list Experimental attributes that are subject to change in next releases.

Attribute goto

  • For now, only goto="last" is supported.
  • Future release may give the possibility to go to any move (incl. variation).
  • Attribute might get renamed to align with PgnViewerJS if necessary.

Attribute goto (last):

Broken features

Attributes movesWidth, movesHeight and scrollable

These attributes are broken:

  • Moves are displayed below the board when they should appear on the right.
  • There is no scroll bar.

The example below is taken from this PgnViewerJS theme example.

Attribute movesWidth, movesHeight and scrollable