ChessDiagrams/exampleChess.html at main · samboy/ChessDiagrams · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- The first line is here for Internet Explorer 9 (IE9); the Javascript
  -- doesn't work in IE9 Quirks mode, so we need the doctype to put it in
  -- IE9 standards mode. -->
<html><head>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"
>
<style>
@media print {
/* Chess board squares colors */
	.black-3c85d {
        	color-adjust: exact !important;
        	-webkit-print-color-adjust: exact !important;
        	background-color: #dbca9e !important;
        	color: #444 !important;
	}
	.white-1e1d7 {
        	background-color: #fff !important;
        	color: #444 !important;
	}
	/* Chess board stays on one page when printed */
	.chessboard-63f37 {
        	page-break-inside:avoid;
	}
}
/* Dark style */
@media (prefers-color-scheme: dark) {
        .black-3c85d {
                background-image: none;
                background-color: #7c6949 !important;
        }
        .white-1e1d7 {
                background-image: none;
                background-color: #a48f6e !important;
                color: #000 !important;
        }
        body {
                background-color: #131516;
                color: #d8d4cf;
        }
        a {
                color: #78dc78;
        }
}
</style>
</head>
<body>

<h1>Example chess game (Sam Trenholme vs. NN, 1994)</h1>

Let me show you a chess game I played in 1994:

<p>

<!-- Here is everything needed to add a chess game to a blog -->
<script src="jquery-1.12.4.min.js"></script>
<script>$.ajaxSetup({contents: {script: false}})</script>
<script src="chessboard-0.3.0.min.js"
  type="text/javascript"></script>
<script src="chess.js"></script>
<link href="chessboard-0.3.0.min.css" rel="stylesheet"></link>
<script src="chessgame.js"></script>
<!-- Please note that the first diagram going over the game needs
  -- to have the name "gameScore" -->
<div id="gameScore-box"></div>
<!-- Here, runGame draws the interactive diagram.  It takes the following
  -- arguments:
  -- 1) The PGN of the game we want to go over.  If this is 0, use the
  --    PGN of the game "gameScore".  If this is a string which starts
  --    with the letters "board" (e.g. "board1"), use the score of the
  --    game with the same ID as this PGN for the score of this game.
  -- 2) The string describing the end of the game
  -- 3) The ID of the game.  Note that we need a <div id="ID-box"></div>,
  --    where ID is this third argument
  -- 4) The ply number we are looking at in the diagram.  This allows us to
  --    make a diagram of a position in the game.  0 is game start, 1 is
  --    after White’s first move, 2 is after Black's first move, etc.
  -- 5) The text to put below the diagram.  If this has the value 0, we
  --    put in the PGN of the game score.
  -- 6) myfen.  See myfen.html for usage examples.
  -- 7) startmsg.  Message to put at game start.  Defaults to "Game start"
  -->
<script type="text/javascript">
runGame("1. e4 e5 2. Nf3 Nf6 3. Nxe5 Nxe4 4. Qe2 f6 5. Qh5 g6 6. Nxg6 hxg6 "
    + " 7. Qxg6+ Ke7 8. Qxe4 Kd6 9. Qd4 Kc6 10. Qc4 Kb6 11. Qb5# 1-0 ",
    "White checkmates Black","gameScore",0,0,0,0);
</script>
<noscript>
1. e4 e5 2. Nf3 Nf6 3. Nxe5 Nxe4 4. Qe2 f6 5. Qh5 g6 6. Nxg6 hxg6
7. Qxg6+ Ke7 8. Qxe4 Kd6 9. Qd4 Kc6 10. Qc4 Kb6 11. Qb5# 1-0
{White checkmates Black}
</noscript>
<!-- End interactive Chess diagram -->

<h2>Analysis</h2>

1. e4 e5 2. Nf3 Nf6 3. Nxe5 Nxe4?!

<p>
<!-- BEGIN -->
<div id="board1-box"></div>
<!-- Another thing about runGame.  If the PGN string is instead the number
  -- 0, this tells runGame to use the score from the diagram with the
  -- ID (label) "gameScore".  This allows different positions from the same
  -- game to be looked at without needing to copy the score multiple times.
  -- Note that if gameScore is given 0 as its PGN value, or if another
  -- diagram uses 0 for the PGN without gameScore being set, the game
  -- shown will be Kasparov - Topalov Wijk aan Zee 1999
  -- Also note: If ply (the fourth argument) isn't 0, we change the
  -- buttons to be "reset" (go back to the position initally shown),
  -- "backward", and "forward" instead of
  -- "start", "backward", "forward", "end" -->
<script type="text/javascript">
runGame(0,"White checkmates Black","board1",6,"Position after 3... Nxe4?!",
        0,0);
</script>
<noscript>
Position after 3... Nxe4?!
</noscript>
<!-- END -->

<h1>Attribution</h1>

<ul>
<li><a href=https://github.com/jhlywa/chess.js>https://github.com/jhlywa/chess.js</a>
<li><a href=https://chessboardjs.com/>https://chessboardjs.com/</a>
<li><a href=https://en.wikipedia.org/wiki/User:Cburnett>https://en.wikipedia.org/wiki/User:Cburnett</a> (Chess piece graphics)
<li><a href=https://jquery.com/>https://jquery.com/</a>
</ul>

<h1>Browser compatibility</h1>

<ul>
<li>Internet Explorer 9 and higher.  However, printing doesn't work, and a
    special DOCTYPE header is needed to render diagrams in IE9; the header
    is <i>not</i> needed for IE11 compatibility.
<li>Opera 12.18 (printing doesn't work)
<li>Firefox 52 or higher. Probably works with older versions; FF 52 is
    the last version to run in Windows XP.
<li>Current versions of Edge and Chrome.
<li>Safari 13.1.3 (MacOS Catalina) and Safari 5.1.7 (Windows)
</ul>
</body>
</html>