PgnJS

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

• PgnJS on GitHub.
• PgnJS extension page on mediawiki.org.

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 layout=right>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:	Attribute position with PGN:	Attribute showNotation:	Attribute orientation:	Attribute timerTime:
Attribute locale:	Attribute boardSize:	Attributes layout, movesWidth, movesHeight and scrollable Taken from PgnViewerJS theme examples page.		Attribute showFen:
Attribute size:		Attribute headers:

Experimental features

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

Attribute goto

• For now, only goto="first" and goto="last" are 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":

Mode defaults

When using mode defaults, no board is displayed but the given configuration is recorded for reuse in next boards. Previously saved configuration are ignored when using this mode, so one can clear the defaults with an empty tag <pgn mode="defaults" />.

The new defaults

Add more configuration

Override defaults locally

Clear the defaults with <pgn mode=defaults />

Default configurations can also be organized by classes. When using the class attribute in mode defaults, the defaults are assigned to the given classnames. When used in other modes, the defaults assigned to each given classnames (if any) are loaded to configure the current pgn element, in addition to the anonymous defaults (if any). In case of multiple defaults, the one of the first given classname takes precedence over the next classname, and over any anonymous defaults.

The new anonymous defaults

The defaults for class=small

The defaults for class=opening

The defaults for class="opening small" Opening theme takes precedence.

The defaults for class="small opening" small theme takes precedence.

Broken features

None.

Combination with Mediawiki features

Templates

Templates {{template}} can define pgn defaults, render complete boards, or simply contain a PGN string (this could be used for instance to provide translated version of analysis).

The defaults from template {{PgnJSDefaults}}

The defaults with class=bigger

The Fool's Mate template {{PgnFoolsMate}}

Using PGN string template <pgn goto=last>{{PgnFoolsMatePgn}}</pgn>

Locale support

The extension is fully localizable and reads the default locale from the User preference page.

User preferences

The default values for the following attributes are read from the User preference page:

• the theme (attribute theme),
• piece style (attribute pieceStyle),
• play timer time (attribute timerTime), and
• the locale (attribute locale).

Of course these are just the default values and they can be overridden by specifying the attribute directly or through the mode defaults.