<!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>