1<!DOCTYPE HTML>
2<html>
3
4<!--
5  pgn4web javascript chessboard
6  copyright (C) 2009-2014 Paolo Casaschi
7  see README file and http://pgn4web.casaschi.net
8  for credits, license and more details
9-->
10
11<head>
12
13<title>Gelfand Grisichuk 2011 - needs an HTML5 browser with SVG IMG support</title>
14
15<!-- use viewport settings when body.onresize adapts the chessboard to the available space -->
16<meta name="viewport" content="initial-scale=1, maximum-scale=1">
17
18<link rel="icon" sizes="16x16" href="pawn.ico" />
19
20<style type="text/css">
21
22html, body {
23  margin:0px;
24  padding:0px;
25}
26
27body {
28  background: #F4F4F4;
29}
30
31.boardTable {
32  border-style: solid;
33  border-color: transparent;
34}
35
36.whiteSquare, .highlightWhiteSquare {
37  background-color: #FFCE9E;
38}
39
40.blackSquare, .highlightBlackSquare {
41  background-color: #D18B47;
42}
43
44</style>
45
46<style id="dynamicStyle" type="text/css"></style>
47
48<script type="text/javascript">
49"use strict";
50
51var squareSize;
52function myOnResize() {
53  var boardObject = document.getElementById("GameBoard");
54  var squareSize = Math.floor(Math.min(window.innerWidth, window.innerHeight) / 9);
55  if (squareSize > 0) {
56    var pieceSize = Math.floor(squareSize * (pieceFont == "svgchess" ? 0.9 : 0.8));
57    var boardBorder = Math.ceil(squareSize / 20);
58    var shadowBorder = Math.floor(squareSize / 2);
59
60    var sheet = document.styleSheets[1];
61    var oldRules = sheet.cssRules.lenght;
62    sheet.insertRule(".boardTable { border-width: " + boardBorder + "px; border-radius: " + boardBorder + "px; box-shadow: 0px 0px " + shadowBorder + "px #734C27; } ", sheet.cssRules.length);
63    sheet.insertRule(".pieceImage { width:" + pieceSize + "px; height:" + pieceSize + "px; } ", sheet.cssRules.length);
64    sheet.insertRule(".whiteSquare, .blackSquare, .highlightWhiteSquare, .highlightBlackSquare { width:" + squareSize + "px; height:" + squareSize + "px; } ", sheet.cssRules.length);
65    for (var ii = 0; ii < oldRules; ii++) { sheet.deleteRule(0); }
66
67    boardObject.style.paddingTop = (window.innerHeight - 8 * squareSize - 2 * boardBorder) / 2 + "px";
68    boardObject.style.paddingBottom = (window.innerHeight - 8 * squareSize - 2 * boardBorder) / 2 + "px";
69    boardObject.style.paddingLeft = (window.innerWidth - 8 * squareSize - 2 * boardBorder) / 2 + "px";
70    boardObject.style.paddingRight = (window.innerWidth - 8 * squareSize - 2 * boardBorder) / 2 + "px";
71    var theObj = document.getElementById("boardTable");
72    if (theObj) {
73      theObj.style.height = (squareSize * 8 + boardBorder * 2) + "px";
74      theObj.style.width = (squareSize * 8 + boardBorder * 2) + "px";
75    }
76  }
77}
78
79</script>
80
81<script src="pgn4web.js" type="text/javascript"></script>
82<script type="text/javascript">
83"use strict";
84
85var pieceFont = "random";
86var thisRegExp = /(&|\?)(pieceFont|pf)=([^&]*)(&|$)/i;
87if (window.location.search.match(thisRegExp) !== null) {
88  pieceFont = unescape(window.location.search.match(thisRegExp)[3]);
89}
90if (pieceFont == "i") { pieceFont = "igorsvg"; }
91if (pieceFont == "s") { pieceFont = "svgchess"; }
92if (pieceFont == "t") { pieceFont = "tilesvg"; }
93if ((pieceFont != "igorsvg") && (pieceFont != "svgchess") && (pieceFont != "tilesvg")) { pieceFont = "random"; }
94if ((pieceFont == "random") || (pieceFont == "r")) {
95  pieceFont = ["igorsvg", "svgchess", "tilesvg"][Math.floor(3 * Math.random())];
96}
97
98SetImagePath("images/" + pieceFont);
99SetImageType("svg");
100SetHighlightOption(true);
101SetAutoplayDelay(2000); // milliseconds
102SetAutostartAutoplay(true);
103SetAutoplayNextGame(true);
104SetShortcutKeysEnabled(false);
105
106function customFunctionOnPgnGameLoad() { myOnResize(); }
107
108function customDebugInfo() { return "squareSize=" + squareSize; }
109
110// redefine FlipBoard() to include myOnResize()
111window['defaultFlipBoard'] = window['FlipBoard'];
112window['FlipBoard'] = function() { defaultFlipBoard(); myOnResize(); };
113
114</script>
115
116</head>
117
118<body onResize="myOnResize();">
119
120<!-- paste your PGN below and make sure you dont specify an external source with SetPgnUrl() -->
121<form style="display: none;"><textarea style="display: none;" id="pgnText">
122
123[Event "WCh Candidates"]
124[Site "Kazan RUS"]
125[Date "2011.05.25"]
126[Round "3.6"]
127[White "Gelfand, Boris"]
128[Black "Grischuk, Alexander"]
129[Result "1-0"]
130
1311. d4 Nf6 2. c4 g6 3. Nf3 Bg7 4. g3 d5 5. cxd5 Nxd5 6. Bg2 Nb6 7. Nc3 Nc6 8. e3
132O-O 9. O-O Re8 10. Re1 a5 11. Qe2 Bg4 12. h3 Be6 13. b3 a4 14. Rb1 axb3 15. axb3
133Qc8 16. Kh2 Ra5 17. Rd1 Rh5 18. Nh4 Bf6 19. f4 Rd8 20. Qf2 Bxh4 21. gxh4 Nd5 22.
134Nxd5 Rhxd5 23. Bb2 Rb5 24. Qe2 Rh5 25. e4 Bxb3 26. Rdc1 Na5 27. d5 b6 28. Be5 c5
13529. dxc6 f6 30. Ba1 Rc5 31. Rxc5 bxc5 32. Qb5 Qc7 33. Rxb3 Nxc6 34. e5 Nd4 35.
136Qc4+ 1-0
137
138</textarea></form>
139<!-- paste your PGN above and make sure you dont specify an external source with SetPgnUrl() -->
140
141<div id="GameBoard"></div>
142
143<script type="text/javascript">
144"use strict";
145
146window.onerror = function(msg, url, linenumber) {
147  document.body.innerHTML = "<p style='font-family: sans-serif; text-align: center;'><br>this web browser<br>is not supported</p>";
148  document.body.innerHTML += "<p style='font-family: sans-serif; text-align: left;'><br><br>message: " + msg + "<br><br>url: " + url + "<br><br>line: " + linenumber + "<br><br>browser: " + navigator.userAgent + "</p>";
149};
150
151function checkSVGSupport() {
152  var img = document.createElement("img");
153  img.onerror = function() { throw("SVG browser support required for the IMG HTML tag"); };
154  img.onload = function() { };
155  img.setAttribute("src","data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNzUiIGhlaWdodD0iMjc1Ij48L3N2Zz4%3D");
156}
157
158function pgn4web_onload(e) {
159  checkSVGSupport();
160  myOnResize();
161  start_pgn4web();
162}
163
164</script>
165
166</body>
167
168</html>
169