User:Fred Gandt/sandbox/chessDemo
 | This template uses Lua: |
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.- Accept various forms of move (including PGN) and setup (including FEN) inputs to empower a wider range of editors (no special knowledge required).
- 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"
- If controls are omitted,
- 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