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