User:Fred Gandt/sandbox/chessDemo

Documentation

Setup

If deployed site wide, the CSS can be split in two; some delivered to style the demos for users with JavaScript disabled, and the rest to handle the scripted display. The noscript rendering supports the display of an animated .gif which is hidden when the JS loads. The unscripted rendering is identical to the scripted except that the animated .gif shows instead of the interactive board and the controls (buttons) are omitted.

These .gifs should be created by a MediaWiki Extension using the ImageMagick PHP library. This is an efficient method of obtaining standardised and consistent fallbacks for all demos.

To correctly render the examples below, and test creating more (on any other pages i.e. in your user sandbox):

Add mw.loader.load( '/w/index.php?title=User:Fred_Gandt/chessDemo.js&action=raw&ctype=text/javascript' ); to your common.js.

For demonstration, all the CSS is loaded by the JS.

TODO

 Demos may not render correctly at any time due to ongoing development. Purge.

1. Accept various forms of move (including PGN) and setup (including FEN) inputs to empower a wider range of editors (no special knowledge required).
2. Build extension to generate animated .gif fallback for users with JS disabled (ImageMagick).

Syntax

Size, position and display adjustment

|width= in pixels (optional - defaults to "200")

|float= "left", "right" or "none" (optional - defaults to "right")

|clear= "left", "right", "both" or "none" (optional - defaults to "both")

|notation= "collapsible" or "collapsed", "left" or "right", or "hidden" (optional - defaults to uncollapsible display underneath the board)

|columns= "number" of columns of notation - will occasionally render one fewer than stated due to maths (optional - defaults to "1")

|columnwidth= "number" of pixels each column should be wide (optional - has no effect unless the notation is "left" or "right" - defaults to "120")

|numbering= "number" with which to begin the notation count or "no" to disable numbering (optional - defaults to "1")

|controls= "mini", "medi" or "none" (optional - defaults to showing all controls)

If controls are omitted, |autostart= will default to "yes"

Orientation of board

|orientation= "black" or empty (optional - defaults to orientation from white's perspective)

Demo title and details

|title= wikitext (optional)

|information= wikitext (optional)

Speed of automatic play

|speed= "seconds" between moves (optional - defaults to "2")

Start automatic playing on page load

|autostart= "yes" (optional)

Specify a move to start the demo at

|initial= "number" of the move after which to start or "end" to start at the end (optional - defaults to the beginning) i.e.:

"12" will show the board as if the first 12 moves had already been played

"end" will show the board as if all the moves had already been played

Specify the pieces and positions at the beginning

|setup= "color alphanumeral, color alphanumeral, ... " (optional - defaults to the full game start setup)

Moves with notation and comments

|1= → |∞= "alphanumeral notation"

Optional commentary on a new line:

| 1 = 
Move commentary (optional)
| 2 = 
| 3 = 
Move commentary (optional)
| 4 = 
| 5 ...

Move notation helper

To assist in creation: {{User:Fred Gandt/sandbox/chessDemo/move}}

{{User:Fred Gandt/sandbox/chessDemo
| ...
| 1 = {{User:Fred Gandt/sandbox/chessDemo/move|from=d2|to=d4|comment=White Queen's pawn moves two.}}
| 2 = {{User:Fred Gandt/sandbox/chessDemo/move|from=e4|to=d3|capture=yes|enpassant=yes|comment=Black pawn captures White pawn in passing.}}
| ...
}}

Examples

Autostarting, short demo with no title or information, no controls and notation disabled

{{User:Fred Gandt/sandbox/chessDemo
| float		= none
| controls	= none
| notation	= hidden
| setup		= white d2, black e4
| 1		= d2 d4
White Queen's pawn moves two.
| 2		= e4 exd3e.p.
Black pawn captures White pawn in passing.
}}

	ah	bg	cf	de	ed	fc	gb	ha
81									81
72									72
63									63
54									54
45									45
36									36
27									27
18									18
	ah	bg	cf	de	ed	fc	gb	ha

Short demo with notation disabled (using helper template)

{{User:Fred Gandt/sandbox/chessDemo
| float		= none
| controls	= mini
| title		= En passant
| information	= Pawn captures pawn ''in passing''.
| notation	= hidden
| setup		= white d2, black e4
| 1	= {{User:Fred Gandt/sandbox/chessDemo/move
	| from			= d2
	| to			= d4
	}}
| 2	= {{User:Fred Gandt/sandbox/chessDemo/move
	| from			= e4
	| to			= d3
	| disambiguation	= e
	| capture		= yes
	| enpassant		= yes
	}}
}}

En passant

Pawn captures pawn in passing.

	ah	bg	cf	de	ed	fc	gb	ha
81									81
72									72
63									63
54									54
45									45
36									36
27									27
18									18
	ah	bg	cf	de	ed	fc	gb	ha

Autostarting short demo with no title or information and mini controls

{{User:Fred Gandt/sandbox/chessDemo
| float		= none
| controls	= mini
| autostart	= yes
| setup		= white d2, black e4
| 1		= d2 d4
White Queen's pawn moves two.
| 2		= e4 exd3e.p.
Black pawn captures White pawn in passing.
}}

	ah	bg	cf	de	ed	fc	gb	ha
81									81
72									72
63									63
54									54
45									45
36									36
27									27
18									18
	ah	bg	cf	de	ed	fc	gb	ha

Notation

1.d4
White Queen's pawn moves two.

1...exd3e.p.
Black pawn captures White pawn in passing.

Short automatically starting demo with custom notation and medium controls

{{User:Fred Gandt/sandbox/chessDemo
| float		= none
| title		= En passant
| autostart	= yes
| controls	= medi
| numbering	= 12
| setup		= white c5, black d7, black queen d8
| 1		= d7 d5
Black King's pawn moves two.
| 2		= c5 cxd6e.p.
White pawn captures Black pawn in passing.
| 3		= d8 Qxd6
Black Queen captures White pawn.
}}

En passant

	ah	bg	cf	de	ed	fc	gb	ha
81									81
72									72
63									63
54									54
45									45
36									36
27									27
18									18
	ah	bg	cf	de	ed	fc	gb	ha

Notation

12...d5
Black King's pawn moves two.

13.cxd6e.p.
White pawn captures Black pawn in passing.

13...Qxd6
Black Queen captures White pawn.

{{User:Fred Gandt/sandbox/chessDemo
| float		= none
| title		= En passant
| autostart	= yes
| controls	= medi
| notation	= right
| numbering	= 12
| setup		= white c5, black d7, black queen d8
| 1		= d7 d5
Black King's pawn moves two.
| 2		= c5 cxd6e.p.
White pawn captures Black pawn in passing.
| 3		= d8 Qxd6
Black Queen captures White pawn.
}}

En passant

	ah	bg	cf	de	ed	fc	gb	ha
81									81
72									72
63									63
54									54
45									45
36									36
27									27
18									18
	ah	bg	cf	de	ed	fc	gb	ha

Notation

12...d5
Black King's pawn moves two.

13.cxd6e.p.
White pawn captures Black pawn in passing.

13...Qxd6
Black Queen captures White pawn.

Short demos with simplified notation

{{User:Fred Gandt/sandbox/chessDemo
| float		= none
| controls	= mini
| title		= Kingside castling
| numbering	= no
| orientation	= black
| setup		= black king e8, black rook h8
| 1		= e8 0-0
}}

Kingside castling

	ah	bg	cf	de	ed	fc	gb	ha
81									81
72									72
63									63
54									54
45									45
36									36
27									27
18									18
	ah	bg	cf	de	ed	fc	gb	ha

Notation

0-0

{{User:Fred Gandt/sandbox/chessDemo
| float		= none
| controls	= mini
| title		= Queenside castling
| numbering	= no
| setup		= white king e1, white rook a1
| 1		= e1 0-0-0
}}

Queenside castling

	ah	bg	cf	de	ed	fc	gb	ha
81									81
72									72
63									63
54									54
45									45
36									36
27									27
18									18
	ah	bg	cf	de	ed	fc	gb	ha

Notation

0-0-0

Full game demo with collapsed notation with initial position at the end

{{User:Fred Gandt/sandbox/chessDemo
| width		= 300
| notation	= collapsed
| columns	= 2
| title		= Full demonstration game
| information	= Includes several ''special'' moves.
| speed		= 1
| 1		= e2 e4
White King's pawn moves two.
| 2		= e7 e5
Black King's pawn moves to block.
| 3		= g1 Nf3
White King's knight ...
| 4		= f8 Bb4
| 5		= c2 c3
| 6		= g8 Nf6
| 7		= f3 Nxe5
| 8		= e8 0-0
| 9		= f1 Bc4
| 10		= f6 Nxe4
| 11		= c3 cxb4
| 12		= f8 Re8
| 13		= b4 b5
| 14		= c7 c5
| 15		= b5 bxc6e.p.
| 16		= e8 Rxe5
| 17		= c6 cxb7
| 18		= d8 Qh4
Black Queen moves to attack.
| 19		= b7 bxc8=R+
| 20		= e5 Re8
| 21		= c8 Rxe8# 1–0
| initial	= end
}}

Full demonstration game

Includes several special moves.

	ah	bg	cf	de	ed	fc	gb	ha
81									81
72									72
63									63
54									54
45									45
36									36
27									27
18									18
	ah	bg	cf	de	ed	fc	gb	ha

Notation

1.e4
White King's pawn moves two.

1...e5
Black King's pawn moves to block.

2.Nf3
White King's knight ...

2...Bb4

3.c3 Nf6

4.Nxe5 0-0

5.Bc4 Nxe4

6.cxb4 Re8

7.b5 c5

8.bxc6e.p. Rxe5

9.cxb7 Qh4
Black Queen moves to attack.

10.bxc8=R+ Re8

11.Rxe8# 1–0

Full real game demo with initial position before the first checking move

{{User:Fred_Gandt/sandbox/chessDemo
 | width	= 250
 | notation	= right
 | columns	= 3
 | title	= [[Deep Blue versus Kasparov, 1996, Game 1]]
 | information	= The first game of the 1996 match was the first game to be won by a [[Computer chess|chess-playing computer]] against a reigning [[World Chess Championship|world champion]] under normal chess tournament conditions, and in particular, [[Glossary of chess#Classical|classical]] [[time control]]s.<br>The game was played on February 10, 1996.
 | 1 = e2 e4	| 2 = c7 c5	| 3 = c2 c3	| 4 = d7 d5	| 5 = e4 exd5	| 6 = d8 Qxd5	| 7 = d2 d4	| 8 = g8 Nf6	| 9 = g1 Nf3	| 10 = c8 Bg4
 | 11 = f1 Be2	| 12 = e7 e6	| 13 = h2 h3	| 14 = g4 Bh5	| 15 = e1 0-0	| 16 = b8 Nc6	| 17 = c1 Be3	| 18 = c5 cxd4	| 19 = c3 cxd4	| 20 = f8 Bb4
 | 21 = a2 a3	| 22 = b4 Ba5	| 23 = b1 Nc3	| 24 = d5 Qd6	| 25 = c3 Nb5	| 26 = d6 Qe7	| 27 = f3 Ne5	| 28 = h5 Bxe2	| 29 = d1 Qxe2	| 30 = e8 0-0
 | 31 = a1 Rac1	| 32 = a8 Rac8	| 33 = e3 Bg5	| 34 = a5 Bb6	| 35 = g5 Bxf6	| 36 = g7 gxf6	| 37 = e5 Nc4	| 38 = f8 Rfd8	| 39 = c4 Nxb6	| 40 = a7 axb6
 | 41 = f1 Rfd1	| 42 = f6 f5	| 43 = e2 Qe3	| 44 = e7 Qf6	| 45 = d4 d5	| 46 = d8 Rxd5	| 47 = d1 Rxd5	| 48 = e6 exd5	| 49 = b2 b3	| 50 = g8 Kh8
 | 51 = e3 Qxb6	| 52 = c8 Rg8	| 53 = b6 Qc5	| 54 = d5 d4	| 55 = b5 Nd6	| 56 = f5 f4	| 57 = d6 Nxb7	| 58 = c6 Ne5	| 59 = c5 Qd5	| 60 = f4 f3
 | 61 = g2 g3	| 62 = e5 Nd3	| 63 = c1 Rc7	| 64 = g8 Re8	| 65 = b7 Nd6	| 66 = e8 Re1+	| 67 = g1 Kh2	| 68 = d3 Nxf2	| 69 = d6 Nxf7+	| 70 = h8 Kg7
 | 71 = f7 Ng5+	| 72 = g7 Kh6	| 73 = c7 Rxh7+ 1–0
 | initial	= 65
}}

Deep Blue versus Kasparov, 1996, Game 1

The first game of the 1996 match was the first game to be won by a chess-playing computer against a reigning world champion under normal chess tournament conditions, and in particular, classical time controls.
The game was played on February 10, 1996.

	ah	bg	cf	de	ed	fc	gb	ha
81									81
72									72
63									63
54									54
45									45
36									36
27									27
18									18
	ah	bg	cf	de	ed	fc	gb	ha

Notation

1.e4 c5

2.c3 d5

3.exd5 Qxd5

4.d4 Nf6

5.Nf3 Bg4

6.Be2 e6

7.h3 Bh5

8.0-0 Nc6

9.Be3 cxd4

10.cxd4 Bb4

11.a3 Ba5

12.Nc3 Qd6

13.Nb5 Qe7

14.Ne5 Bxe2

15.Qxe2 0-0

16.Rac1 Rac8

17.Bg5 Bb6

18.Bxf6 gxf6

19.Nc4 Rfd8

20.Nxb6 axb6

21.Rfd1 f5

22.Qe3 Qf6

23.d5 Rxd5

24.Rxd5 exd5

25.b3 Kh8

26.Qxb6 Rg8

27.Qc5 d4

28.Nd6 f4

29.Nxb7 Ne5

30.Qd5 f3

31.g3 Nd3

32.Rc7 Re8

33.Nd6 Re1+

34.Kh2 Nxf2

35.Nxf7+ Kg7

36.Ng5+ Kh6

37.Rxh7+ 1–0

Example articles

Copies of current chess articles, with chessDemos used in place of {{Chess diagram}}s.

• /Example article 1: A copy of Deep Blue versus Garry Kasparov (incomplete).
• /Example article 2: A copy of Deep Blue versus Kasparov, 1996, Game 1.
• others to follow

Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages.
Subpages of this page.