Difference between revisions of "PgnJS"

From Wikitest
Jump to: navigation, search
(Stable Features)
Line 35: Line 35:
 
== Stable Features ==
 
== Stable Features ==
  
 +
=== Mode attribute ===
 +
There are 4 available modes: <code>board</code>, <code>view</code>, <code>print</code>, and <code>edit</code>.
 
{| class=wikitable
 
{| class=wikitable
 
|- valign="top"
 
|- valign="top"
 
|
 
|
A board with timer time 2000ms
+
mode <code>board</code> (no PGN):
<pgn timerTime=2000>1. f4 e6 2. g4 Qh4</pgn>
+
<pgn mode="board" />
 +
|
 +
mode <code>view</code> (default):
 +
<pgn mode="view">1. f4 e6 2. g4 Qh4</pgn>
 
|
 
|
A board with locale 'de'
+
mode <code>print</code> (use <code>$220</code> NAG to display board):
<pgn locale="de">1. f4 e6 2. g4 Qh4</pgn>
+
<pgn mode="print">1. f4 $220 e6 2. g4 Qh4 $220</pgn>
 
|
 
|
A board with board size 160px
+
mode <code>edit</code>:
<pgn boardSize="160px">1. f4 e6 2. g4 Qh4</pgn>
+
<pgn mode="edit">1. f4 e6 2. g4 Qh4</pgn>
 
|}
 
|}
  
{| class=wikitable
+
=== Styling attributes ===
|- valign="top"
 
|
 
A board with position:
 
<pgn position="rnb1kbnr/pppp1ppp/4p3/8/5PPq/8/PPPPP2P/RNBQKBNR w KQkq - 1 3" />
 
|
 
A board with position and moves:
 
<pgn position="rnbqkbnr/pppp1ppp/4p3/8/5P2/8/PPPPP1PP/RNBQKBNR w KQkq - 0 2">2. g4 Qh4</pgn>
 
|
 
A board with showNotation off
 
<pgn showNotation="false">1. f4 e6 2. g4 Qh4</pgn>
 
|
 
A board with black orientation
 
<pgn orientation="black">1. f4 e6 2. g4 Qh4</pgn>
 
|}
 
  
 
{| class=wikitable
 
{| class=wikitable
 
|- valign="top"
 
|- valign="top"
 
|
 
|
First a simple empty pgn tag:
+
Use <code>style</code> for styling (size, margin...):
<pgn/>
+
<pgn style="width: 200px; margin: 20px">1. f3 e6 2. g4 Qh4</pgn>
|
 
A tag with a few moves:
 
<pgn>1. f4 e6 2. g4 Qh4</pgn>
 
|
 
Another tag with some styling:
 
<pgn style="width: 200px">1. f3 e6 2. g4 Qh4</pgn>
 
|
 
A print mode board:
 
<pgn mode="print">1. f4 $220 e6 2. g4 Qh4 $220</pgn>
 
|
 
An edit mode board:
 
<pgn mode="edit">1. f4 e6 2. g4 Qh4</pgn>
 
 
|}
 
|}
  
The available '''piece styles''':
+
Use attribute <code>pieceStyle</code> to specify the '''piece style''':
 
{| class=wikitable
 
{| class=wikitable
 
|- valign="top"
 
|- valign="top"
Line 114: Line 93:
  
  
The available '''themes''':
+
Use attribute <code>theme</code> to specify the '''theme''':
 
{| class=wikitable
 
{| class=wikitable
 
|- valign="top"
 
|- valign="top"
 
|
 
|
Chess.com (need <code>boardsize</code>):
+
Chess.com (need <code>boardSize</code>):
<pgn theme=chesscom boardsize=240px>1. f4 e6 2. g4 Qh4</pgn>
+
<pgn theme=chesscom boardSize=240px>1. f4 e6 2. g4 Qh4</pgn>
 
|
 
|
 
Normal:
 
Normal:
 
<pgn>1. f4 e6 2. g4 Qh4</pgn>
 
<pgn>1. f4 e6 2. g4 Qh4</pgn>
 
|
 
|
Falken (need <code>boardsize</code>):
+
Falken (need <code>boardSize</code>:
<pgn theme=falken boardsize=200px>1. f4 e6 2. g4 Qh4</pgn>
+
<pgn theme=falken boardSize=220px>1. f4 e6 2. g4 Qh4</pgn>
 
|
 
|
 
Green:
 
Green:
Line 140: Line 119:
 
<pgn theme=sportverlag>1. f4 e6 2. g4 Qh4</pgn>
 
<pgn theme=sportverlag>1. f4 e6 2. g4 Qh4</pgn>
 
|
 
|
Beyer (a bit off its <code><div</code>):
+
Beyer (off its <code><nowiki><div></nowiki></code> even with <code>margin</code>):
<pgn theme=beyer>1. f4 e6 2. g4 Qh4</pgn>
+
<pgn theme=beyer style="margin:10px>1. f4 e6 2. g4 Qh4</pgn>
 
|
 
|
 
Blue:
 
Blue:
Line 147: Line 126:
 
|}
 
|}
  
 +
=== Other PgnViewerJS Attributes ===
  
 +
{| class=wikitable
 +
|- valign="top"
 +
|
 +
Attribute <code>position</code> (to give a starting FEN):
 +
<pgn position="rnb1kbnr/pppp1ppp/4p3/8/5PPq/8/PPPPP2P/RNBQKBNR w KQkq - 1 3" />
 +
|
 +
Attribute <code>position</code> (combined with PGN):
 +
<pgn position="rnbqkbnr/pppp1ppp/4p3/8/5P2/8/PPPPP1PP/RNBQKBNR w KQkq - 0 2">2. g4 Qh4</pgn>
 +
|
 +
Attribute <code>showNotation</code>:
 +
<pgn showNotation="false">1. f4 e6 2. g4 Qh4</pgn>
 +
|
 +
Attribute <code>orientation</code>:
 +
<pgn orientation="black">1. f4 e6 2. g4 Qh4</pgn>
 +
|
 +
Attribute <code>timerTime</code>:
 +
<pgn timerTime=2000>1. f4 e6 2. g4 Qh4</pgn>
 +
|- valign="top"
 +
|
 +
Attribute <code>locale</code> (for now, only <code>en</code> and <code>de</code>):
 +
<pgn locale="de">1. f4 e6 2. g4 Qh4</pgn>
 +
|
 +
Attribute <code>boardSize</code>:
 +
<pgn boardSize="160px">1. f4 e6 2. g4 Qh4</pgn>
 +
|}
  
 
== Experimental features ==
 
== Experimental features ==

Revision as of 05:26, 28 December 2017

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

A board with moves width, height and scrollable pgn style="width: 390px" theme="chesscom" boardSize="200px" movesWidth="180px" movesHeight="220px" scrollable="true">[White "Anderssen, Adolf"][Black "Dufresne, Jean"] 1. e4 e5 2. Nf3 Nc6 3. Bc4 Bc5 4. b4 Bxb4 5. c3 Ba5 6. d4 exd4 7. O-O d3 8. Qb3 Qf6 9. e5 Qg6 10. Re1 Nge7 11. Ba3 b5 12. Qxb5 Rb8 13. Qa4 Bb6 14. Nbd2 Bb7 15. Ne4 Qf5 16. Bxd3 Qh5 17. Nf6+ gxf6 18. exf6 Rg8 19. Rad1 Qxf3 20. Rxe7+ Nxe7 21. Qxd7+ Kxd7 22. Bf5+ Ke8 23. Bd7+ Kf8 24. Bxe7# 1:0</pgn>