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;">&nbsp;<span id="task" style="font-size: 14px; background: yellow;">&nbsp;<span id="GameSideToMove"></span>&nbsp;to&nbsp;move&nbsp;</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