1<!DOCTYPE HTML> 2<html> 3 4<!-- 5 pgn4web javascript chessboard 6 copyright (C) 2009-2015 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>Solve chess tactics!</title> 14 15<link href="tactics.css" type="text/css" rel="stylesheet" /> 16 17<style type="text/css"> 18 19.newButton { 20 -moz-appearance: none; 21 -webkit-appearance: none; 22 font-size: 9px; 23 width: 80px; 24 vertical-align: middle; 25 text-align: center; 26 background-color: #f2d798; 27 border-color: #c9ad6f; 28 border-style: double; 29 border-width: 3px; 30 border-radius: 0px; 31} 32 33</style> 34 35<link rel="icon" sizes="16x16" href="pawn.ico" /> 36 37<script src="pgn4web.js" type="text/javascript"></script> 38<script type="text/javascript"> 39"use strict"; 40 41SetPgnUrl("tactics.pgn"); 42SetImagePath("images/uscf/24"); 43SetInitialGame("random"); // number of game to be shown at load, from 1 (default); values (keep the quotes) of "first", "last", "random" are accepted; other string values assumed as PGN search string 44SetShortcutKeysEnabled(false); 45 46clearShortcutSquares("BCDEFGH", "1234567"); 47clearShortcutSquares("A", "123456"); 48boardShortcut("H8", "hint", function(t,e){ hint(); }); 49 50function hint() { 51 alert("hint: the solution's main line is " + PlyNumber + " ply long"); 52} 53 54function gup(name) { 55 name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); 56 var regexS = "[\\?&]"+name+"=([^&#]*)"; 57 regexS = regexS+"(?!.*"+regexS+")"; // matches the LAST occurrence 58 var regex = new RegExp( regexS, "i" ); 59 var results = regex.exec( window.location.href ); 60 if (results === null) { return ""; } 61 else { return decodeURIComponent(results[1]); } 62} 63 64var assignedInitialGame = gup('n'); 65if (assignedInitialGame) { SetInitialGame(assignedInitialGame); } 66 67function customFunctionOnPgnGameLoad() { 68 var theObj = document.getElementById('GameNumber'); 69 if (theObj) { theObj.innerHTML = (currentGame+1); } 70} 71 72</script> 73 74</head> 75 76<body> 77 78<!-- paste your PGN below and make sure you dont specify an external source with SetPgnUrl() --> 79<form style="display: none;"><textarea style="display: none;" id="pgnText"> 80 81</textarea></form> 82<!-- paste your PGN above and make sure you dont specify an external source with SetPgnUrl() --> 83 84<center> 85<table width=508 cellspacing=0 cellpadding=0 border=0> 86 87<tr> 88<td width=246 rowspan=3 valign=top> 89<div id="GameBoard"></div> 90</td> 91 92<td width=16 rowspan=3> 93</td> 94 95<td width=246 height=40 valign=top> 96 97<table width=246 cellspacing=0 cellpadding=0 border=0> 98<tr> 99<td width=50%> 100<div style="text-align: left; font-size: 14px;">#<span id="GameNumber"></span></div> 101</td> 102<td width=50%> 103<div style="text-align: right;"> <span id="task" style="font-size: 14px; background: yellow;"> <span id="GameSideToMove"></span> to move </span></div> 104</td> 105</tr> 106</table> 107 108</td> 109 110<tr> 111<td width=246 height=166 valign=middle> 112<div id="solution" style="font-size: 14px; text-align: left; visibility: hidden"> 113<span id="GameText"></span> <span class="move" id="GameResult"></span> 114</div> 115 116</td> 117</tr> 118 119<tr> 120<td width=246 height=40 valign=bottom> 121 122<form style="display: inline"> 123<table cellspacing=0 cellpadding=0 border=0> 124<tr> 125<td width=80px valign=top> 126<input type=button value="move back" title="click here to move back one ply when looking at the solution" class="newButton" onClick="javascript: GoToMove(CurrentPly - 1); if (StartPly == CurrentPly) {document.getElementById('task').style.visibility = 'visible';}" onFocus="this.blur()"> 127</td> 128<td width=4px> 129</td> 130<td width=80px valign=top> 131<input type=button value="show solution" title="click here to show the solution and step through the main line" class="newButton" onClick="javascript:GoToMove(CurrentPly + 1); document.getElementById('solution').style.visibility = 'visible';document.getElementById('task').style.visibility = 'hidden';" onFocus="this.blur()"> 132</td> 133<td width=4px> 134</td> 135<td width=80px valign=top> 136<input type=button value="next puzzle" title="click here to load the next puzzle" class="newButton" onClick="javascript: document.getElementById('solution').style.visibility = 'hidden'; document.getElementById('task').style.visibility = 'visible'; Init(Math.floor(Math.random()*numberOfGames));" onFocus="this.blur()"> 137</td> 138</tr> 139</table> 140</form> 141 142</td> 143</tr> 144 145</table> 146</center> 147 148</body> 149</html> 150