149 lines
4.2 KiB
HTML
149 lines
4.2 KiB
HTML
|
<!DOCTYPE HTML>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<!--
|
||
|
|
pgn4web javascript chessboard
|
||
|
|
copyright (C) 2009-2013 Paolo Casaschi
|
||
|
|
see README file and http://pgn4web.casaschi.net
|
||
|
|
for credits, license and more details
|
||
|
|
-->
|
||
|
|
|
||
|
|
<head>
|
||
|
|
|
||
|
|
<title>Solve chess tactics!</title>
|
||
|
|
|
||
|
|
<link href="tactics.css" type="text/css" rel="stylesheet" />
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
|
||
|
|
.newButton {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
font-size: 9px;
|
||
|
|
width: 80px;
|
||
|
|
vertical-align: middle;
|
||
|
|
text-align: center;
|
||
|
|
background-color: #f2d798;
|
||
|
|
border-color: #c9ad6f;
|
||
|
|
border-style: double;
|
||
|
|
border-width: 3px;
|
||
|
|
border-radius: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<link rel="shortcut icon" href="pawn.ico" />
|
||
|
|
|
||
|
|
<script src="pgn4web.js" type="text/javascript"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
SetPgnUrl("tactics.pgn");
|
||
|
|
SetImagePath("images/uscf/24");
|
||
|
|
SetInitialGame("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
|
||
|
|
SetShortcutKeysEnabled(false);
|
||
|
|
|
||
|
|
clearShortcutSquares("BCDEFGH", "1234567");
|
||
|
|
clearShortcutSquares("A", "123456");
|
||
|
|
boardShortcut("H8", "hint", function(t,e){ hint(); });
|
||
|
|
|
||
|
|
function hint() {
|
||
|
|
alert("hint: the solution's main line is " + PlyNumber + " ply long");
|
||
|
|
}
|
||
|
|
|
||
|
|
function gup(name) {
|
||
|
|
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
|
||
|
|
var regexS = "[\\?&]"+name+"=([^&#]*)";
|
||
|
|
regexS = regexS+"(?!.*"+regexS+")"; // matches the LAST occurrence
|
||
|
|
var regex = new RegExp( regexS, "i" );
|
||
|
|
var results = regex.exec( window.location.href );
|
||
|
|
if (results === null) { return ""; }
|
||
|
|
else { return decodeURIComponent(results[1]); }
|
||
|
|
}
|
||
|
|
|
||
|
|
var assignedInitialGame = gup('n');
|
||
|
|
if (assignedInitialGame) { SetInitialGame(assignedInitialGame); }
|
||
|
|
|
||
|
|
function customFunctionOnPgnGameLoad() {
|
||
|
|
var theObj = document.getElementById('GameNumber');
|
||
|
|
if (theObj) { theObj.innerHTML = (currentGame+1); }
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<!-- paste your PGN below and make sure you dont specify an external source with SetPgnUrl() -->
|
||
|
|
<form style="display: none;"><textarea style="display: none;" id="pgnText">
|
||
|
|
|
||
|
|
</textarea></form>
|
||
|
|
<!-- paste your PGN above and make sure you dont specify an external source with SetPgnUrl() -->
|
||
|
|
|
||
|
|
<center>
|
||
|
|
<table width=508 cellspacing=0 cellpadding=0 border=0>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td width=246 rowspan=3 valign=top>
|
||
|
|
<div id="GameBoard"></div>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<td width=16 rowspan=3>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<td width=246 height=40 valign=top>
|
||
|
|
|
||
|
|
<table width=246 cellspacing=0 cellpadding=0 border=0>
|
||
|
|
<tr>
|
||
|
|
<td width=50%>
|
||
|
|
<div style="text-align: left; font-size: 14px;">#<span id="GameNumber"></span></div>
|
||
|
|
</td>
|
||
|
|
<td width=50%>
|
||
|
|
<div style="text-align: right;"> <span id="task" style="font-size: 14px; background: yellow;"> <span id="GameSideToMove"></span> to move </span></div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td width=246 height=166 valign=middle>
|
||
|
|
<div id="solution" style="font-size: 14px; text-align: left; visibility: hidden">
|
||
|
|
<span id="GameText"></span> <span class="move" id="GameResult"></span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td width=246 height=40 valign=bottom>
|
||
|
|
|
||
|
|
<form style="display: inline">
|
||
|
|
<table cellspacing=0 cellpadding=0 border=0>
|
||
|
|
<tr>
|
||
|
|
<td width=80px valign=top>
|
||
|
|
<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()">
|
||
|
|
</td>
|
||
|
|
<td width=4px>
|
||
|
|
</td>
|
||
|
|
<td width=80px valign=top>
|
||
|
|
<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()">
|
||
|
|
</td>
|
||
|
|
<td width=4px>
|
||
|
|
</td>
|
||
|
|
<td width=80px valign=top>
|
||
|
|
<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()">
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
</table>
|
||
|
|
</center>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|