374 lines
15 KiB
HTML
374 lines
15 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>pgn4web live broadcast</title>
|
||
|
|
|
||
|
|
<!-- use the base tag to host live-compact.html on a different server than pgn4web.js
|
||
|
|
|
||
|
|
<base href="http://pgn4web.casaschi.net">
|
||
|
|
|
||
|
|
-->
|
||
|
|
|
||
|
|
<link href="live-compact.css" type="text/css" rel="stylesheet" />
|
||
|
|
|
||
|
|
<link rel="shortcut icon" href="pawn.ico" />
|
||
|
|
|
||
|
|
<script src="pgn4web.js" type="text/javascript"></script>
|
||
|
|
|
||
|
|
<script src="fide-lookup.js" type="text/javascript"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
var demoFlag, alertFlag;
|
||
|
|
if ((gup("demo") == "true") || (gup("demo") == "t") ||
|
||
|
|
(gup("refreshDemo") == "true") || (gup("refreshDemo") == "t")) {
|
||
|
|
demoFlag = true; alertFlag = true;
|
||
|
|
} else { demoFlag = false; alertFlag = false; }
|
||
|
|
|
||
|
|
var pgnFile_default = detectBaseLocation() ?
|
||
|
|
location.protocol + "//" + location.hostname + location.pathname.replace(/\/[^\/]*$/, "/live/live.pgn") :
|
||
|
|
"live/live.pgn";
|
||
|
|
// accepts pgnData as alias for pgnFile for consistency with board.html
|
||
|
|
var pgnFile;
|
||
|
|
if ((pgnFile = gup("pgnData")) === "") {
|
||
|
|
if ((pgnFile = gup("pgnFile")) === "") {
|
||
|
|
pgnFile = pgnFile_default;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var refreshMinutes;
|
||
|
|
if ((refreshMinutes = gup("refreshMinutes")) === "") {
|
||
|
|
refreshMinutes = 1;
|
||
|
|
} else {
|
||
|
|
var testMinutes = refreshMinutes + "";
|
||
|
|
if ((testMinutes.match(/[^0-9\.]/)) || (refreshMinutes === 0)) {
|
||
|
|
if (alertFlag) {
|
||
|
|
alert("ERROR: refreshMinutes parameter must be a positive number.\n" +
|
||
|
|
"Supplied " + testMinutes + "; defaulting to 1.");
|
||
|
|
}
|
||
|
|
refreshMinutes = 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var iniGame;
|
||
|
|
if ((iniGame = gup("initialGame")) === "") {iniGame = 1; }
|
||
|
|
|
||
|
|
if ((gup("showComments") == "true") || (gup("showComments") == "t")) { SetCommentsIntoMoveText(true); }
|
||
|
|
else { SetCommentsIntoMoveText(false); }
|
||
|
|
|
||
|
|
if ((gup("help") == "true") || (gup("help") == "t")) { developer_help(); }
|
||
|
|
|
||
|
|
SetPgnUrl(pgnFile);
|
||
|
|
SetImagePath("images/alpha/26");
|
||
|
|
SetImageType("png");
|
||
|
|
SetHighlightOption(true); // true or false
|
||
|
|
SetGameSelectorOptions(" select a game...", true, 0, 0, 0, 18, 18, 3, 0); // (head, num, chEvent, chSite, chRound, chWhite, chBlack, chResult, chDate)
|
||
|
|
|
||
|
|
SetCommentsOnSeparateLines(true);
|
||
|
|
SetAutoplayDelay(1000); // milliseconds
|
||
|
|
SetAutostartAutoplay(false);
|
||
|
|
SetAutoplayNextGame(false);
|
||
|
|
SetInitialGame(iniGame);
|
||
|
|
SetInitialVariation(0);
|
||
|
|
SetInitialHalfmove("end",true);
|
||
|
|
SetShortcutKeysEnabled(true);
|
||
|
|
|
||
|
|
SetLiveBroadcast(refreshMinutes, alertFlag, demoFlag, false);
|
||
|
|
|
||
|
|
function customFunctionOnCheckLiveBroadcastStatus() {
|
||
|
|
var theObj = document.getElementById("GameLiveStatus");
|
||
|
|
if (theObj) {
|
||
|
|
theObj.innerHTML = ((numberOfGames === 1) && (PlyNumber === 0) && (!gameFEN[currentGame])) && (!gameWhite[currentGame]) && (!gameBlack[currentGame])? "" : theObj.title;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function customFunctionOnPgnTextLoad() {
|
||
|
|
|
||
|
|
document.getElementById("playersDetails").className =
|
||
|
|
LiveBroadcastStarted ? "headerHighlighted" : "header";
|
||
|
|
document.getElementById("statusDetails").className =
|
||
|
|
((!LiveBroadcastStarted) || (LiveBroadcastEnded)) ? "headerHighlighted" : "header";
|
||
|
|
document.getElementById("additionalMessage").innerHTML =
|
||
|
|
LiveBroadcastEnded ? ", click H6 for the next event" : "";
|
||
|
|
|
||
|
|
// cope with occasional failures to load the live PGN data
|
||
|
|
if ((LiveBroadcastDelay !== 0) && (LiveBroadcastTicker > 0) && (!LiveBroadcastFoundOldGame)) {
|
||
|
|
var thisCurrentGame = currentGame;
|
||
|
|
SetInitialGame(iniGame);
|
||
|
|
SetInitialVariation(0);
|
||
|
|
setCurrentGameFromInitialGame();
|
||
|
|
if (currentGame != thisCurrentGame) {
|
||
|
|
SetInitialHalfmove("end",true);
|
||
|
|
Init();
|
||
|
|
GoToInitialHalfmove();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function customFunctionOnPgnGameLoad() {
|
||
|
|
var ii, theObj, timeControl, gameTermination;
|
||
|
|
var objectsToTitle = ["GameEvent", "GameSite", "GameDate", "GameWhite", "GameBlack"];
|
||
|
|
for (ii in objectsToTitle) {
|
||
|
|
if (theObj = document.getElementById(objectsToTitle[ii])) { theObj.title = simpleHtmlentitiesDecode(theObj.innerHTML); }
|
||
|
|
}
|
||
|
|
if (timeControl = customPgnHeaderTag("TimeControl")) {
|
||
|
|
if (theObj = document.getElementById("GameWhiteClock")) { theObj.title = simpleHtmlentitiesDecode("timecontrol: " + timeControl); }
|
||
|
|
if (theObj = document.getElementById("GameBlackClock")) { theObj.title = simpleHtmlentitiesDecode("timecontrol: " + timeControl); }
|
||
|
|
} else {
|
||
|
|
if (theObj = document.getElementById("GameWhiteClock")) { theObj.title = ""; }
|
||
|
|
if (theObj = document.getElementById("GameBlackClock")) { theObj.title = ""; }
|
||
|
|
}
|
||
|
|
if (gameTermination = customPgnHeaderTag("Termination")) {
|
||
|
|
if (theObj = document.getElementById("GameResult")) { theObj.title = simpleHtmlentitiesDecode("termination: " + gameTermination); }
|
||
|
|
} else {
|
||
|
|
if (theObj = document.getElementById("GameResult")) { theObj.title = ""; }
|
||
|
|
}
|
||
|
|
if ((gameRound[currentGame] !== undefined) &&
|
||
|
|
(gameRound[currentGame] !== "") &&
|
||
|
|
(gameRound[currentGame] != "*") &&
|
||
|
|
(gameRound[currentGame] != "?")) {
|
||
|
|
document.getElementById("roundDetails").innerHTML = " (" + gameRound[currentGame] + ")";
|
||
|
|
} else {
|
||
|
|
document.getElementById("roundDetails").innerHTML = "";
|
||
|
|
}
|
||
|
|
|
||
|
|
if (gameResult[currentGame] !== undefined) {
|
||
|
|
if ((gameResult[currentGame] == "*") || (gameResult[currentGame] == "?")) {
|
||
|
|
document.getElementById("GameResult").className = "headerNosize";
|
||
|
|
} else {
|
||
|
|
document.getElementById("GameResult").className = "headerHighlightedNosize";
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
document.getElementById("GameResult").className = "headerNosize";
|
||
|
|
document.getElementById("GameResult").innerHTML = "";
|
||
|
|
}
|
||
|
|
theObj = document.getElementById("GameText");
|
||
|
|
if ((theObj) && (theObj.scrollHeight !== undefined) && (theObj.scrollTop !== undefined) && ((!LiveBroadcastFoundOldGame) || (LiveBroadcastOldCurrentPlyLast && (LiveBroadcastOldCurrentPly < StartPly+PlyNumber)))) {
|
||
|
|
theObj.scrollTop = theObj.scrollHeight;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function customFunctionOnMove() {
|
||
|
|
document.getElementById("systemMessage").style.display =
|
||
|
|
customPgnCommentTag("pgn4web", "pgn4webMessage") !== "" ? "none" : "inline";
|
||
|
|
}
|
||
|
|
|
||
|
|
var checkForNewLiveEventInterval = null;
|
||
|
|
function checkForNewLiveEvent() {
|
||
|
|
document.getElementById("messageLine").style.visibility = "hidden";
|
||
|
|
if (checkForNewLiveEventInterval) { clearTimeout(checkForNewLiveEventInterval); }
|
||
|
|
// started as timeout otherwise some browser could suppress visual feedback
|
||
|
|
checkForNewLiveEventInterval = setTimeout('refreshPgnSource();document.getElementById("messageLine").style.visibility = "visible";', 111);
|
||
|
|
}
|
||
|
|
|
||
|
|
// customShortcutKey_Shift_1 defined by fide-lookup.js
|
||
|
|
// customShortcutKey_Shift_2 defined by fide-lookup.js
|
||
|
|
|
||
|
|
|
||
|
|
function gup(name) {
|
||
|
|
|
||
|
|
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
|
||
|
|
var regexS = "[\\?&]"+name+"=([^&#]*)";
|
||
|
|
// commented below to match first occurrence (to avoid users overruling setting)
|
||
|
|
// regexS = regexS+"(?!.*"+regexS+")"; // matches the LAST occurrence
|
||
|
|
var regex = new RegExp( regexS, "i" );
|
||
|
|
var results = regex.exec( window.location.href );
|
||
|
|
if (results !== null) { return decodeURIComponent(results[1]); }
|
||
|
|
|
||
|
|
// allows for short version of the URL parameters, for instance sC matches squareColor
|
||
|
|
var compact_name = name.charAt(0);
|
||
|
|
for (var i=1; i<name.length; i++) {
|
||
|
|
if (name.charAt(i).match(/[A-Z]/)) { compact_name = compact_name + name.charAt(i).toLowerCase(); }
|
||
|
|
}
|
||
|
|
name = compact_name;
|
||
|
|
|
||
|
|
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
|
||
|
|
regexS = "[\\?&]"+name+"=([^&#]*)";
|
||
|
|
// commented below to match first occurrence (to avoid users overruling setting)
|
||
|
|
// regexS = regexS+"(?!.*"+regexS+")"; // matches the LAST occurrence
|
||
|
|
regex = new RegExp( regexS, "i" );
|
||
|
|
|
||
|
|
results = regex.exec( window.location.href );
|
||
|
|
if (results !== null) { return decodeURIComponent(results[1]); }
|
||
|
|
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
|
||
|
|
function developer_help() {
|
||
|
|
alert("pgn4web live.html parameters" + "\n" +
|
||
|
|
" - pgnData = " + pgnFile + "; PGN file to load (default " + pgnFile_default + ")" + "\n" +
|
||
|
|
" - initialGame = " + iniGame + "; initial game to load, a number or first, last, random or a search string (default 1)" + "\n" +
|
||
|
|
" - refreshMinutes = " + refreshMinutes + "; refresh interval in minutes, decimals allowed (default 1)" + "\n" +
|
||
|
|
" - showComments = " + commentsIntoMoveText + "; (default false)" + "\n" +
|
||
|
|
" - refreshDemo = " + demoFlag + "; sets live demo mode (default false)" + "\n" +
|
||
|
|
" - help = true; prints this help (default false)");
|
||
|
|
}
|
||
|
|
|
||
|
|
function user_help() {
|
||
|
|
|
||
|
|
var plural = refreshMinutes != 1 ? "s" : "";
|
||
|
|
var demoString = demoFlag ? "demo mode enabled" + "\n" : "";
|
||
|
|
|
||
|
|
var helpText = "Chess games live broadcast using pgn4web v" + pgn4web_version + "\n" +
|
||
|
|
"\n" +
|
||
|
|
"Games are automatically updated every " +
|
||
|
|
refreshMinutes + " minute" + plural + " from the remote file " +
|
||
|
|
"(" + pgnFile + "). " +
|
||
|
|
"If the shown game is kept at the last available move, " +
|
||
|
|
"upon refresh the chessboard automatically advances " +
|
||
|
|
"to the game's latest position. " +
|
||
|
|
"The refresh stops once all games are finished. " +
|
||
|
|
"If no games are shown, just wait for the live broadcast to start. " +
|
||
|
|
"There is no need to reload the webpage to refresh games, " +
|
||
|
|
"but it's possible to manually force a refresh by clicking on square H6." + "\n" +
|
||
|
|
"\n" +
|
||
|
|
"Chessboard squares are input buttons controlling games display (full list by clicking square G8), including:" + "\n" +
|
||
|
|
"\n" +
|
||
|
|
"A1 / H1: game start / end" + "\n" +
|
||
|
|
"D1 / E1: move back / forwards" + "\n" +
|
||
|
|
"A3 / H3: load first / last game" + "\n" +
|
||
|
|
"C3 / F3: load previous / next game" + "\n" +
|
||
|
|
"A6 / B6: pause / restart live broadcast automatic refresh" + "\n" +
|
||
|
|
"C6 / F6: jump to previous / next finished game" + "\n" +
|
||
|
|
"D6 / E6: jump to previous / next unfinished game" + "\n" +
|
||
|
|
"H6: force games refresh during live broadcast" + "\n" +
|
||
|
|
"A8: debug info" + "\n" +
|
||
|
|
"G8 / H8: shortcut squares help / pgn4web help" + "\n" +
|
||
|
|
"\n" +
|
||
|
|
"Please note all squares are listed assuming White on bottom, plese adjust square labels if the chessboard is flipped." + "\n" +
|
||
|
|
"\n" +
|
||
|
|
"Press OK for more pgn4web help information" +
|
||
|
|
"\n ";
|
||
|
|
|
||
|
|
if (confirm(helpText)) { displayHelp(); }
|
||
|
|
}
|
||
|
|
|
||
|
|
</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>
|
||
|
|
|
||
|
|
<!-- need the external table to force height of 360 (see blackberry background issue) -->
|
||
|
|
<!-- 460 is the max width for a 480 wide screen allowing for scrollbars -->
|
||
|
|
<!-- 360 is the max height for a 360 tall screen -->
|
||
|
|
<table id="outerTable" width=460 height=360 cellpadding=5 cellspacing=0 border=0>
|
||
|
|
<tr><td align=center valign=top>
|
||
|
|
|
||
|
|
<!-- width 450 = 460 outerTable width - 2 * 5 cellpadding -->
|
||
|
|
<table width=450 cellpadding=0 cellspacing=0 border=0>
|
||
|
|
<tr height=27>
|
||
|
|
<td align=center valign=bottom style="padding-bottom: 4px;">
|
||
|
|
<div id="GameSelector"></div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<!-- same 450 width as above -->
|
||
|
|
<table id="eventDetails" class="header" width=450px cellpadding=0 cellspacing=0 border=0>
|
||
|
|
<tr>
|
||
|
|
<td width=100 align=left valign=middle style="padding: 3px;">
|
||
|
|
<div id="GameSite" style="width: 94px; height: 1.3em; line-height: 1.3em; overflow: hidden; white-space: nowrap;"></div>
|
||
|
|
</td>
|
||
|
|
<td width=250 align=center valign=middle style="padding: 3px;">
|
||
|
|
<div style="width: 244px; height: 1.3em; line-height: 1.3em; overflow: hidden;"><span id="GameEvent"></span><span id="roundDetails"></span></div>
|
||
|
|
</td>
|
||
|
|
<td width=100 align=right valign=middle style="padding: 3px;">
|
||
|
|
<div id="GameDate" style="width: 94px; height: 1.3em; line-height: 1.3em; overflow: hidden"></div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<!-- same 450 width as above -->
|
||
|
|
<table id="playersDetails" class="header" width=450px cellpadding=0 cellspacing=0 border=0>
|
||
|
|
<tr>
|
||
|
|
<td width=65 align=left valign=middle style="padding: 3px;">
|
||
|
|
<div id="GameWhiteClock" style="width: 59px; height: 1.3em; line-height: 1.3em; overflow: hidden; white-space: nowrap;"></div>
|
||
|
|
</td>
|
||
|
|
<td width=320 align=center valign=middle style="padding: 3px;">
|
||
|
|
<div style="width: 314px; height: 1.3em; line-height: 1.3em; overflow: hidden; white-space: nowrap;">
|
||
|
|
<span id="GameWhite"></span>
|
||
|
|
|
||
|
|
<span id="GameBlack"></span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td width=65 align=right valign=middle style="padding: 3px;">
|
||
|
|
<div id="GameBlackClock" style="width: 59px; height: 1.3em; line-height: 1.3em; overflow: hidden; white-space: nowrap;"></div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<!-- same 450 width as above -->
|
||
|
|
<table width=450px cellpadding=0 cellspacing=0 border=0>
|
||
|
|
<tr>
|
||
|
|
<!-- 240 chessboard size = 8 * (26 square size + 2 * (2 square border)) -->
|
||
|
|
<!-- 246 = (chessboard size) + (6 right padding) -->
|
||
|
|
<td width=246 align=left valign=top style="padding-top: 8px; padding-bottom: 8px; padding-left: 0px; padding-right: 6px;">
|
||
|
|
<span id="GameBoard"></span>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<!-- right column width 204 = (460 outer cell width) - (246 left column width) - (2 * 5 cellpaddding) -->
|
||
|
|
<td width=204 align=left valign=top style="padding-top: 8px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px;">
|
||
|
|
<!-- height 240 = chessboard size -->
|
||
|
|
<!-- width 199 = table cell size - 5 padding -->
|
||
|
|
<div class="movebox" id="GameText" style="height: 240px; width:199px; padding-right: 5px; overflow-x: hidden; overflow-y: auto;">
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<!-- same 450 width as above -->
|
||
|
|
<table id="statusDetails" class="header" width=450px cellpadding=0 cellspacing=0 border=0>
|
||
|
|
<tr>
|
||
|
|
<td width=55 align=left valign=middle style="padding: 3px;">
|
||
|
|
<div style="width: 49px; height: 1.3em; line-height: 1.3em; overflow: hidden; white-space: nowrap;">
|
||
|
|
<span id="GameResult" class="headerNosize"></span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td width=340px style="padding: 3px;" align=center valign=middle>
|
||
|
|
<div id="messageLine" style="width: 334px; height: 1.3em; line-height: 1.3em; overflow: hidden; white-space: nowrap;">
|
||
|
|
<span id="pgn4webMessage"></span>
|
||
|
|
<span id="systemMessage"><span id="GameLiveStatus"></span><span id="additionalMessage"></span></span>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
<td width=55 align=right valign=middle style="padding: 3px;">
|
||
|
|
<div style="width: 49px; height: 1.3em; line-height: 1.3em; overflow: hidden; white-space: nowrap;">
|
||
|
|
<a id="helplink" class="helplinkNosize" href="javascript: user_help();" onFocus="this.blur()" title="pgn4web live broadcast help">help</a>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
</td></tr>
|
||
|
|
</table>
|
||
|
|
</center>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
"use strict";
|
||
|
|
var theObj = document.getElementById("helplink");
|
||
|
|
if (demoFlag && theObj) { theObj.innerHTML = "demo"; }
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|