Difference between revisions of "PgnJS"

From Wikitest
Jump to: navigation, search
(Examples)
Line 4: Line 4:
 
* [http://www.mediawiki.org/wiki/Extension:PgnJS PgnJS extension page] on mediawiki.org.
 
* [http://www.mediawiki.org/wiki/Extension:PgnJS PgnJS extension page] on mediawiki.org.
  
== Examples ==
+
== Basic Features ==
 +
An empty <code><nowiki><pgn></nowiki></code> tag simply displays the starting position:
 +
<pre>
 +
<pgn/>
 +
</pre>
 +
<pgn/>
 +
 
 +
Add a game in PGN format in the <code><nowiki><pgn></nowiki></code> tag to get the board, the moves and a few buttons to navigate through the moves. For instance, the wikitext
 +
<pre>
 +
<pgn>1. f4 e6 2. g4 Qh4</pgn>
 +
</pre>
 +
gives the following result
 +
<pgn>1. f4 e6 2. g4 Qh4</pgn>
 +
 
 +
Of course, the PGN may contain annotation and even game variation. The PGNViewerJS engine is really powerful and gives nice unbloated results:
 +
<pre>
 +
<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>
 +
</pre>
 +
 
 +
<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 ==
  
 
{| class=wikitable
 
{| class=wikitable
 
|- valign="top"
 
|- valign="top"
|
 
A board with piece style alpha
 
<pgn pieceStyle="alpha">1. f4 e6 2. g4 Qh4</pgn>
 
 
|
 
|
 
A board with timer time 2000ms
 
A board with timer time 2000ms
Line 36: Line 62:
 
A board with black orientation
 
A board with black orientation
 
<pgn orientation="black">1. f4 e6 2. g4 Qh4</pgn>
 
<pgn orientation="black">1. f4 e6 2. g4 Qh4</pgn>
|
 
A board with theme chesscom
 
<pgn theme="chesscom" boardsize="240px">1. f4 e6 2. g4 Qh4</pgn>
 
 
|}
 
|}
  
Line 59: Line 82:
 
<pgn mode="edit">1. f4 e6 2. g4 Qh4</pgn>
 
<pgn mode="edit">1. f4 e6 2. g4 Qh4</pgn>
 
|}
 
|}
 +
 +
The available '''piece styles''':
 +
{| class=wikitable
 +
|- valign="top"
 +
|
 +
Merida:
 +
<pgn pieceStyle=merida>1. f4 e6 2. g4 Qh4</pgn>
 +
|
 +
Case:
 +
<pgn pieceStyle=case>1. f4 e6 2. g4 Qh4</pgn>
 +
|
 +
Wikipedia:
 +
<pgn pieceStyle=wikipedia>1. f4 e6 2. g4 Qh4</pgn>
 +
|
 +
Alpha:
 +
<pgn pieceStyle=alpha>1. f4 e6 2. g4 Qh4</pgn>
 +
|
 +
USCF:
 +
<pgn pieceStyle=uscf>1. f4 e6 2. g4 Qh4</pgn>
 +
|-
 +
|
 +
Condal:
 +
<pgn pieceStyle=condal>1. f4 e6 2. g4 Qh4</pgn>
 +
|
 +
Maya:
 +
<pgn pieceStyle=maya>1. f4 e6 2. g4 Qh4</pgn>
 +
|
 +
Leipzig:
 +
<pgn pieceStyle=leipzig>1. f4 e6 2. g4 Qh4</pgn>
 +
|}
 +
 +
 +
The available '''themes''':
 +
{| class=wikitable
 +
|- valign="top"
 +
|
 +
Chess.com (need <code>boardsize</code>):
 +
<pgn theme=chesscom boardsize=240px>1. f4 e6 2. g4 Qh4</pgn>
 +
|
 +
Normal:
 +
<pgn>1. f4 e6 2. g4 Qh4</pgn>
 +
|
 +
Falken (need <code>boardsize</code>):
 +
<pgn theme=falken boardsize=200px>1. f4 e6 2. g4 Qh4</pgn>
 +
|
 +
Green:
 +
<pgn theme=green>1. f4 e6 2. g4 Qh4</pgn>
 +
|
 +
Zeit:
 +
<pgn theme=zeit>1. f4 e6 2. g4 Qh4</pgn>
 +
|-
 +
|
 +
Informator:
 +
<pgn theme=informator>1. f4 e6 2. g4 Qh4</pgn>
 +
|
 +
Sportverlag:
 +
<pgn theme=sportverlag>1. f4 e6 2. g4 Qh4</pgn>
 +
|
 +
Beyer (a bit off its <code><div</code>):
 +
<pgn theme=beyer>1. f4 e6 2. g4 Qh4</pgn>
 +
|
 +
Blue:
 +
<pgn theme=blue>1. f4 e6 2. g4 Qh4</pgn>
 +
|}
 +
 +
  
 
== Experimental features ==
 
== Experimental features ==
Line 65: Line 154:
 
|
 
|
 
A board with moves width, height and scrollable
 
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>
+
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>
 
|}
 
|}

Revision as of 05:08, 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

A board with timer time 2000ms

A board with locale 'de'

A board with board size 160px

A board with position:

A board with position and moves:

A board with showNotation off

A board with black orientation

First a simple empty pgn tag:

A tag with a few moves:

Another tag with some styling:

A print mode board:

An edit mode board:

The available piece styles:

Merida:

Case:

Wikipedia:

Alpha:

USCF:

Condal:

Maya:

Leipzig:


The available themes:

Chess.com (need boardsize):

Normal:

Falken (need boardsize):

Green:

Zeit:

Informator:

Sportverlag:

Beyer (a bit off its <div):

Blue:


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>