source: spip-zone/_plugins_/pgn4spip/branches/boardLive.html @ 90061

Last change on this file since 90061 was 90061, checked in by jack@…, 6 years ago

Avant de tout casser on passe le trunk dans "branches"

File size: 39.6 KB
Line 
1<html>
2<!--
3/**********************************************************************************
4 * @Subject board live animation of chess game in real-time from live.pgn
5 * @package pgn4spip plugin to embed pgn4web Chessboard in a SPIP 2.x article
6 * @version 2.61.0
7 * @copyright copyright (c) 2012 Matt Chesstale
8 * @license GNU General Public License version 3
9 * @language HTML, Javascript
10 *
11 * @history     This HTML module is called by the interpretation of [pgn] tag
12 *                      Merge pgn4web\board.html and pgn4web\live-compact.html
13 * @credits Paolo Casaschi's pgn4web\live-compact.html for blackberry screen
14 *                      pgn4web live broadcast based on pgn4web javascript chessboard
15 * @ref         http://pgn4web.casaschi.net
16 * @help        http://localhost/spip/plugins/pgn4spip/boardLive.html?help=true
17 **********************************************************************************/
18-->
19<head>
20<!-- Solve empty first line of moves in horizontal mode due to IE8 overflow-x:hidden bug
21         Force IE8 in IE7 mode. IE9 stays in IE9 mode.
22  -->
23<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" >
24<title>pgn4spip live broadcast</title>
25
26<!-- was <link href="pgn4web/live-compact.css" type="text/css" rel="stylesheet" /> -->
27<style type="text/css">
28@import url("pgn4web/fonts/pgn4web-font-LiberationSans.css");
29@import url("pgn4web/fonts/pgn4web-font-ChessSansPiratf.css");
30
31html,
32body {
33  margin: 0;
34  padding: 0;
35}
36
37body {
38  font-family: 'pgn4web Liberation Sans', sans-serif;
39  font-size: 13px;
40  color: #615F54;
41  background: #EDE8D5;
42}
43
44a {
45  text-decoration: none;
46  color: black;
47}
48
49.boardTable {
50  border-style: double;
51  border-color: black;
52  border-width: 3px;
53}
54.pieceImage,
55.whiteSquare,
56.blackSquare,
57.highlightWhiteSquare,
58.highlightBlackSquare {
59}
60
61.selectControl {
62/* a "width" attribute here must use the !important flag to override default settings */
63  width: 450px !important;
64  color: #615F54;
65  font-size: 13px;
66  padding: 2px;
67  border-style: solid;
68  border-width: 1px;
69  border-color: #CFCBB3;
70  background-color: #EDE8D5;
71}
72
73.optionSelectControl {
74  background-color: #EDE8D5;
75}
76
77.buttonControlPlay,
78.buttonControlStop,
79.buttonControl {
80/* a "width" attribute here must use the !important flag to override default settings */
81  font-size: 13px;
82  text-align: center;
83  vertical-align: middle;
84}
85
86.buttonControlSpace {
87/* a "width" attribute here must use the !important flag to override default settings */
88}
89
90.searchPgnButton {
91/* a "width" attribute here must use the !important flag to override default settings */
92}
93
94.searchPgnExpression {
95/* a "width" attribute here must use the !important flag to override default settings */
96}
97
98.header,
99.headerNosize,
100.headerHighlighted,
101.headerHighlightedNosize,
102.helplinkNosize,
103.helplinkNosizeHighlighted,
104.comment {
105  text-decoration: none;
106  font-family: 'pgn4web Liberation Sans', sans-serif; /* fixes IE9 body css issue */
107}
108
109.header,
110.headerHighlighted {
111  font-size: 13px;
112}
113
114.move,
115.variation,
116.comment {
117  font-size: 12px;
118  line-height: 1.4em;
119}
120
121.move,
122.variation,
123.commentMove {
124  font-family: 'pgn4web ChessSansPiratf', 'pgn4web Liberation Sans', sans-serif;
125}
126
127.move,
128.variation {
129  text-decoration: none;
130}
131
132.helplinkNosize {
133  color: #BFBAA5;
134}
135
136.header,
137.headerNosize,
138.variation {
139  color: #615F54 !important;
140}
141
142.move
143 {
144  color: #000000 !important;
145}
146
147a.variation {
148  color: #615F54 !important;
149}
150
151.comment {
152  color: #A19D8B;
153}
154
155.headerHighlighted,
156.headerHighlightedNosize,
157.moveOn,
158.variationOn {
159  color: black;
160  background: #F0F0F0; <!-- was #F8CCA0; -->
161}
162
163.movebox {
164  scrollbar-base-color: #E8E3D0;
165  text-align: justify;
166}
167
168</style>
169
170<link rel="shortcut icon" href="pgn4web/pawn.ico" />
171<script src="pgn4web/pgn4web.js" type="text/javascript"></script>
172<script src="pgn4web/fide-lookup.js" type="text/javascript"></script>
173<script type="text/javascript">
174
175var sexEncodingCharSet = "$0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_";
176var pieceSizeOptions = new Array(20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 52, 56, 60, 64, 72, 80, 88, 96, 112, 128, 144, 300);
177
178oldMovesDisplay = "";
179showMoves = gup("showMoves");
180if ((showMoves == "true")  || (showMoves == "t")) { oldMovesDisplay = "justified"; }
181if ((showMoves == "false") || (showMoves == "f")) { oldMovesDisplay = "hidden"; }
182if ((movesDisplay = gup("movesDisplay")) === "") {
183  movesDisplay = oldMovesDisplay === "" ? "hidden" : oldMovesDisplay;
184}
185if (movesDisplay == "f") { movesDisplay = "figurine"; }
186if (movesDisplay == "t") { movesDisplay = "text"; }
187if (movesDisplay == "h") { movesDisplay = "hidden"; }
188if (movesDisplay == "n") { movesDisplay = "nosymbols"; } // "nosymbols" option is undocumented
189if (movesDisplay == "p") { movesDisplay = "puzzle"; }
190if ((movesDisplay == "justified") || (movesDisplay == "j")) { movesDisplay = "figurine"; } // backward compatibility
191if ((movesDisplay != "figurine") && (movesDisplay != "nosymbols") && (movesDisplay != "puzzle") && (movesDisplay != "text") && (movesDisplay != "hidden")) { movesDisplay = "figurine"; }
192
193blockChessInformantNAGSymbols = ((movesDisplay != "figurine") && ((movesDisplay != "puzzle")));
194
195SetHighlightOption(true);
196SetShortcutKeysEnabled(true);
197
198if ((squareSize = gup("squareSize")) === "") { squareSize = 28; }
199else { squareSize = parseInt(squareSize, 10); }
200if (squareSize < 20) { squareSize = 20; }
201
202if ((highlightMode = gup("highlightMode")) === "") { highlightMode = "square"; }
203if (highlightMode == "b") { highlightMode = "border"; }
204if (highlightMode == "n") { highlightMode = "none"; }
205if (highlightMode == "s") { highlightMode = "square"; }
206borderSize = highlightMode == "border" ? Math.floor(0.05 * squareSize) : 0;
207
208if ((lightColor = gup("lightColorName")) === "") {
209  if ((lightColor = "#" + gup("lightColorHex")) == "#") {
210    if ((lightColor = "#" + sex2hex(gup("lightColorSex"))) == "#") { lightColor = "#EFF4EC"; }
211  }
212}
213if ((darkColor  = gup("darkColorName"))  === "") {
214  if ((darkColor  = "#" + gup("darkColorHex"))  == "#") {
215    if ((darkColor  = "#" + sex2hex(gup("darkColorSex")))  == "#") { darkColor  = "#C6CEC3"; }
216  }
217}
218if ((highlightColor  = gup("highlightColorName")) === "") {
219  if ((highlightColor  = "#" + gup("highlightColorHex"))  == "#") {
220    if ((highlightColor  = "#" + sex2hex(gup("highlightColorSex")))  == "#") { highlightColor  = "#DAF4D7"; }
221  }
222}
223if ((highlightMode == 'none') || (highlightColor == 'none') || (highlightColor == '#none')) {
224  highlightMode = 'none';
225  borderSize = 0;
226  highlightLightColor = lightColor;
227  highlightDarkColor = darkColor;
228  clearShortcutSquares("D", "7");
229} else {
230  highlightLightColor = highlightColor;
231  highlightDarkColor = highlightColor;
232}
233
234// was SetImagePath("pgn4web/alpha/26");
235pieceSize = gup("pieceSize");
236if ((pieceSize === "") || IsMatchFirst(pieceSize, "default")) { pieceSize = defaultPieceSize(squareSize); }
237else { pieceSize = parseInt(pieceSize, 10); }
238if (pieceSize > (squareSize - 2 * borderSize)) { pieceSize = defaultPieceSize(squareSize - 2 * borderSize); }
239
240if ((pieceFont = gup("pieceFont")) === "") {
241  if ((pieceFont = gup("font")) === "") // left for compatibility with older version
242    { pieceFont = "default"; }
243}
244if (pieceFont == "a") { pieceFont = "alpha"; }
245if (pieceFont == "m") { pieceFont = "merida"; }
246if (pieceFont == "u") { pieceFont = "uscf"; }
247if (pieceFont == "s") { pieceFont = "svgchess"; } // undocumented option
248if ((pieceFont == "random") || (pieceFont == "r")) {
249  randomPiece = Math.floor(Math.random() * 3);
250  switch (randomPiece) {
251    case 1: pieceFont = "merida"; break;
252    case 2: pieceFont = "uscf"; break;
253    default: pieceFont = "alpha"; break;
254  }
255}
256if ((pieceFont == "default") || (pieceFont == "d")) {
257  if (pieceSize < 28) { pieceFont = "uscf"; }
258  else {
259    if (pieceSize > 39) { pieceFont = "merida"; }
260    else { pieceFont = "alpha"; }
261  }
262}
263
264// undocumented option
265if ((pieceFontRoot = gup("pieceFontRoot")) !== "") {
266  if (pieceFontRoot.charAt(pieceFontRoot.length - 1) != "/") { pieceFontRoot += "/"; }
267}
268else
269        pieceFontRoot = "pgn4web/";
270
271SetImagePath("" + pieceFontRoot + pieceFont + "/" + pieceSize);
272if (pieceFont == "svgchess") {
273  SetImagePath("" + pieceFontRoot + pieceFont);
274  SetImageType("svg");
275}
276
277if ((boardBorderColor = gup("boardBorderColorName")) === "") {
278  if ((boardBorderColor = "#" + gup("boardBorderColorHex")) == "#") {
279    if ((boardBorderColor = "#" + sex2hex(gup("boardBorderColorSex"))) == "#") { boardBorderColor = "#000000"; }
280  }
281}
282
283if ((boardShadowColor = gup("boardShadowColorName")) === "") {
284  if ((boardShadowColor = "#" + gup("boardShadowColorHex")) == "#") {
285    boardShadowColorSex = gup("boardShadowColorSex");
286    if ((boardShadowColorSex == "transparent") || (boardShadowColorSex == "t")) {
287      boardShadowColor = "transparent";
288    } else if ((boardShadowColorSex == "border") || (boardShadowColorSex == "b")) {
289      boardShadowColor = "border";
290    } else {
291      if ((boardShadowColor = "#" + sex2hex(gup("boardShadowColorSex"))) == "#") { boardShadowColor = "transparent"; }
292    }
293  }
294}
295if ((boardShadowColor ==  "border") || (boardShadowColor ==  "b") ||
296    (boardShadowColor == "#border") || (boardShadowColor == "#b")) {
297  boardShadowColor = boardBorderColor;
298}
299if ((boardShadowColor ==  "transparent") || (boardShadowColor ==  "t") ||
300    (boardShadowColor == "#transparent") || (boardShadowColor == "#t")) {
301  boardShadowColor = "transparent";
302}
303
304if ((backgroundColor = gup("backgroundColorName")) === "") {
305  if ((backgroundColor = "#" + gup("backgroundColorHex")) == "#") {
306    backgroundColorSex = gup("backgroundColorSex");
307    if ((backgroundColorSex == "transparent") || (backgroundColorSex == "t")) {
308      backgroundColor = "transparent";
309    } else {
310      if ((backgroundColor = "#" + sex2hex(gup("backgroundColorSex"))) == "#") { backgroundColor = "#FFFFFF"; }
311    }
312  }
313}
314if ((backgroundColor ==  "transparent") || (backgroundColor ==  "t") ||
315    (backgroundColor == "#transparent") || (backgroundColor == "#t")) {
316  backgroundColor = "transparent";
317}
318
319if ((highlightMoveColor  = gup("highlightMoveColorName")) === "") {
320  if ((highlightMoveColor  = "#" + gup("highlightMoveColorHex"))  == "#") {
321    highlightMoveColorSex = gup("highlightMoveColorSex");
322    if ((highlightMoveColorSex == "background") || (highlightMoveColorSex == "b")) {
323      highlightMoveColor = "background";
324    } else {
325      if ((highlightMoveColor  = "#" + sex2hex(highlightMoveColorSex)) == "#") { highlightMoveColor = "#DAF4D7"; }
326    }
327  }
328}
329if ((highlightMoveColor ==  "background") || (highlightMoveColor ==  "b") ||
330    (highlightMoveColor == "#background") || (highlightMoveColor == "#b")) {
331  highlightMoveColor = backgroundColor;
332}
333
334if ((framePadding = gup("framePadding")) === "") { framePadding = 0;}
335else { framePadding = parseInt(framePadding, 10); }
336
337if ((fontHeaderSize = percentFixFromUrl( gup("fontHeaderSize") )) === "") { fontHeaderSize = "16"; }
338if ((fontHeaderColor = gup("fontHeaderColorName")) === "") {
339  if ((fontHeaderColor = "#" + gup("fontHeaderColorHex")) == "#") {
340    if ((fontHeaderColor = "#" + sex2hex(gup("fontHeaderColorSex"))) == "#") { fontHeaderColor = "#000000"; }
341  }
342}
343
344if ((fontMovesSize = percentFixFromUrl( gup("fontMovesSize") )) === "") { fontMovesSize = "16"; }
345if ((fontMovesColor = gup("fontMovesColorName")) === "") {
346  if ((fontMovesColor = "#" + gup("fontMovesColorHex")) == "#") {
347    if ((fontMovesColor = "#" + sex2hex(gup("fontMovesColorSex"))) == "#") { fontMovesColor = "#000000";}
348  }
349}
350
351if ((fontCommentsSize = percentFixFromUrl( gup("fontCommentsSize") )) === "") { fontCommentsSize = "moves"; }
352if (fontCommentsSize == "m") { fontCommentsSize = "moves"; }
353if ((fontCommentsColor = gup("fontCommentsColorName")) === "") {
354  if ((fontCommentsColor = "#" + gup("fontCommentsColorHex")) == "#") {
355    if ((fontCommentsColor = "#" + sex2hex(gup("fontCommentsColorSex"))) == "#") { fontCommentsColor = "#808080"; }
356  }
357}
358
359if ((fontVariationsSize = percentFixFromUrl( gup("fontVariationsSize") )) === "") { fontVariationsSize = "comments"; }
360if (fontVariationsSize == "c") { fontVariationsSize = "comments"; }
361if ((fontVariationsColor = gup("fontVariationsColorName")) === "") {
362  if ((fontVariationsColor = "#" + gup("fontVariationsColorHex")) == "#") {
363    if ((fontVariationsColor = "#" + sex2hex(gup("fontVariationsColorSex"))) == "#") { fontVariationsColor = "comments"; }
364  }
365}
366
367SetAutostartAutoplay(false);    // CFG autoplayMode is not taken in consideration in live mode
368SetAutoplayNextGame(false);             // as it was always "none"
369
370if (gup("delay") === "") { SetAutoplayDelay(1000); } // milliseconds
371else { SetAutoplayDelay(gup("delay")); }
372
373// use init_Game to avoid overlap with existing global var initialGame in pgn4web.js
374if ((init_Game = gup("initialGame")) === "") {
375  init_Game = "first";
376} else {
377  if (init_Game == "f") { init_Game = "first"; }
378  if (init_Game == "l") { init_Game = "last"; }
379  if (init_Game == "r") { init_Game = "random"; }
380}
381SetInitialGame(init_Game);
382SetInitialVariation(0); // initialVariation not taken in consideration in live mode
383//                                                always_Halfmove
384SetInitialHalfmove("end", true); // CFG initialHalfmove not taken in consideration in live mode
385
386oldButtonsDisplay = "";
387showButtons = gup("showButtons");
388if ((showButtons == "true")  || (showButtons == "t")) { oldButtonsDisplay = "custom"; }
389if ((showButtons == "false") || (showButtons == "f")) { oldButtonsDisplay = "hidden"; }
390if ((buttonsDisplay = gup("buttonsDisplay")) === "") {
391  buttonsDisplay = oldButtonsDisplay === "" ? "hidden" : oldButtonsDisplay;
392}
393if (buttonsDisplay == "c") { buttonsDisplay = "custom"; }
394if (buttonsDisplay == "h") { buttonsDisplay = "hidden"; }
395if (buttonsDisplay == "s") { buttonsDisplay = "standard"; }
396if ((buttonsDisplay != "custom") && (buttonsDisplay != "standard")) { buttonsDisplay = "hidden"; }
397
398 // head, num, chEvent, chSite, chRound, chWhite, chBlack, chResult, chDate
399SetGameSelectorOptions(null,     true, 0, 0, 0, 18, 18, 3, 10); // Nbr of characters by field
400// SetGameSelectorOptions(null, false, 0, 0, 0, 15, 15, 3, 10); // in board.html
401
402if (buttonsDisplay == "custom") {
403
404  if ((controlBackgroundColor = gup("controlBackgroundColorName")) === "") {
405    if ((controlBackgroundColor = "#" + gup("controlBackgroundColorHex")) == "#") {
406      controlBackgroundColorSex = gup("controlBackgroundColorSex");
407      if (controlBackgroundColorSex == "default") {
408          controlBackgroundColor = "#default";
409      } else if (controlBackgroundColorSex == "d") {
410            controlBackgroundColor = "#d";
411      } else {
412        if ((controlBackgroundColor = "#" + sex2hex(controlBackgroundColorSex)) == "#") {
413          controlBackgroundColor = "#default";
414        }
415      }
416    }
417  }
418
419  if ((controlBackgroundColor == "d") || (controlBackgroundColor == "#d")) { controlBackgroundColor = "default"; }
420  if (controlBackgroundColor == "#default") { controlBackgroundColor = "default"; }
421
422  if (controlBackgroundColor == "default") { buttonsDisplay = "standard"; }
423
424  if ((controlTextColor = gup("controlTextColorName")) === "") {
425    if ((controlTextColor = "#" + gup("controlTextColorHex")) == "#") {
426      if ((controlTextColor = "#" + sex2hex(gup("controlTextColorSex"))) == "#") { controlTextColor = "#000000"; }
427    }
428  }
429
430} else {
431  controlBackgroundColor = "default";
432  controlTextColor = "#000000";
433}
434
435oldCommentsDisplay = "";
436if (IsMatchFirst(gup("showCommentsOnSeparateLines"), "true")) { oldCommentsDisplay = "newline"; }
437if (IsMatchFirst(gup("showComments"), "false")) { oldCommentsDisplay = "hidden"; }
438if ((commentsDisplay = gup("commentsDisplay")) === "") {
439  commentsDisplay = oldCommentsDisplay === "" ? "inline" : oldCommentsDisplay;
440}
441if (commentsDisplay == "h") { commentsDisplay = "hidden"; }
442if (commentsDisplay == "i") { commentsDisplay = "inline"; }
443if (commentsDisplay == "n") { commentsDisplay = "newline"; }
444
445switch (commentsDisplay) {
446  case "hidden":
447    SetCommentsIntoMoveText(false);
448    SetCommentsOnSeparateLines(false);
449    break;
450  case "newline":
451    SetCommentsIntoMoveText(true);
452    SetCommentsOnSeparateLines(true);
453    break;
454  case "inline":
455  default:
456    SetCommentsIntoMoveText(true);
457    SetCommentsOnSeparateLines(false);
458    break;
459}
460
461frameHeight = gup("frameHeight");
462switch (frameHeight) {
463  case "b":
464  case "board":
465    frameHeight = "";
466    fixFrameHeightToBoard = true;
467    break;
468  case "p":
469  case "page":
470    if (window.innerHeight) { frameHeight = window.innerHeight; }
471    else if (document.documentElement && document.documentElement.clientHeight) { frameHeight = document.documentElement.clientHeight; }
472    else if (document.body && document.body.clientHeight) { frameHeight = document.body.clientHeight; }
473    else { frameHeight = ""; }
474    fixFrameHeightToBoard = false;
475    break;
476  case "":
477    fixFrameHeightToBoard = false;
478    break;
479  default:
480    frameHeight = parseInt(frameHeight, 10);
481    if (isNaN(frameHeight)) { frameHeight = ""; }
482    fixFrameHeightToBoard = false;
483    break;
484}
485
486frameWidth = gup("frameWidth");
487switch (frameWidth) {
488  case "b":
489  case "board":
490    frameWidth = "";
491    fixFrameWidthToBoard = true;
492    break;
493  case "p":
494  case "page":
495    frameWidth = "";
496    textWidth = "100%";
497    fixFrameWidthToBoard = false;
498    break;
499  case "":
500    fixFrameWidthToBoard = false;
501    break;
502  default:
503    frameWidth = parseInt(frameWidth, 10);
504    if (isNaN(frameWidth)) { frameWidth = ""; }
505    fixFrameWidthToBoard = false;
506    break;
507}
508
509demoFlag = IsMatchFirst(gup("demo"), "true") || IsMatchFirst(gup("refreshDemo"), "true");
510alertFlag = demoFlag; 
511
512if ((refreshMinutes = gup("refreshMinutes")) === "")
513{
514        refreshMinutes = 1;
515}
516else
517{
518        testMinutes = refreshMinutes + "";
519        if ((testMinutes.match(/[^0-9\.]/)) || (refreshMinutes === 0))
520        {
521                if (alertFlag)
522                {
523                        alert("ERROR: refreshMinutes parameter must be a positive number.\n" +
524                          "Supplied " + testMinutes + "; defaulting to 1.");
525                }
526                refreshMinutes = 1;
527        }
528}
529
530pgnFile_default = detectBaseLocation() ?
531    location.protocol + "//" + location.hostname + location.pathname.replace(/\/[^\/]*$/, "/pgn4web/live/live.pgn") :
532    "pgn4web/live/live.pgn";
533// accepts pgnData as alias for pgnFile for consistency with board.html
534if ((pgnFile = gup("pgnData")) === "") 
535{
536        if ((pgnFile = gup("pgnFile")) === "")
537        {
538                pgnFile = pgnFile_default;
539        }
540}
541
542if (IsMatchFirst(gup("help"), "true"))
543{
544        developer_help(); 
545}
546GenHtml();
547SetPgnUrl(pgnFile);
548SetImageType("png");
549//                                                    LiveBroadcastSteppingMode
550SetLiveBroadcast(refreshMinutes, alertFlag, demoFlag, true); // autoplay from current position to the lastest
551
552// End of main javascript
553
554// Write the new style and body of the HTML page
555function GenHtml()
556{
557        document.write(CustomStyleSheet());
558        document.write(GenBody());
559}
560
561// Redefine the custom function initially empty in pgn4web.js to manage clocks
562function customFunctionOnCheckLiveBroadcastStatus()
563{
564    if (theObj = document.getElementById("GameLiveStatus")) {
565                theObj.innerHTML = ((numberOfGames === 1) && (PlyNumber === 0) && (!gameFEN[currentGame])) && (!gameWhite[currentGame]) && (!gameBlack[currentGame])? "" : theObj.title;
566    }
567        if (spanClockRefresh = document.getElementById("GameLiveLastRefreshed")) 
568                spanClockRefresh.innerHTML = LiveBroadcastLastRefreshedLocal.match(/\d\d:\d\d:\d\d/); // locale "HH:MM:SS" only
569        if (spanClockServer = document.getElementById("GameLiveLastModifiedServer")) 
570        {
571                if (spanClockServer.innerHTML == "unavailable")
572                        spanClockServer.innerHTML = "off"; // Shorter keyword max 8 characters as "HH:MM:SS"
573                else
574                {
575                        clockServer = new Date(spanClockServer.innerHTML);                              // GMT time server-side
576                        spanClockServer.innerHTML = clockServer.toLocaleTimeString();   // Locale "HH:MM:SS"
577                }
578        }
579}
580
581// write updated CSS stylesheet with new values overriding the one at the top of the file
582function CustomStyleSheet()
583{
584        var newStyleSheet = '<style type="text/css"> \n';
585        var nlCss = '; }\n';
586
587        if ((movesDisplay == "figurine") || (movesDisplay == "nosymbols") || (movesDisplay == "puzzle")) {
588          newStyleSheet += 'body, .header, .comment { font-family: \'pgn4web Liberation Sans\', sans-serif; } \n';
589          newStyleSheet += '.move, .variation, .commentMove { font-family: \'pgn4web ChessSansPiratf\', \'pgn4web Liberation Sans\', sans-serif; } \n';
590        }
591
592        newStyleSheet += 'body { background: ' + backgroundColor + '; padding: ' + framePadding + nlCss;
593
594        newStyleSheet += '.pieceImage { width: ' + pieceSize + '; height: ' + pieceSize + nlCss;
595        var widthHeight =       'width: '  + (squareSize - 2 * borderSize) + 'px; ' + 
596                                                'height: ' + (squareSize - 2 * borderSize) + 'px; ';                                           
597        if (highlightMode == 'border')
598        {
599                var borderStyleWidth = 'border-style: solid; border-width: ' + borderSize + 'px; ';
600                newStyleSheet += '.whiteSquare { '                      + widthHeight + 'background: ' + lightColor + '; ' +
601                                           borderStyleWidth + 'border-color: '  + lightColor + nlCss;
602                newStyleSheet += '.blackSquare { '                      + widthHeight + 'background: ' + darkColor + '; ' +
603                                           borderStyleWidth + 'border-color: ' + darkColor + nlCss;
604                newStyleSheet += '.highlightWhiteSquare { ' + widthHeight + 'background: ' + lightColor + '; ' +
605                                           borderStyleWidth + 'border-color: ' + highlightLightColor + nlCss;
606                newStyleSheet += '.highlightBlackSquare { ' + widthHeight + 'background: ' + darkColor + '; ' +
607                                           borderStyleWidth + 'border-color: ' + highlightDarkColor + nlCss;
608        }
609        else 
610        {
611                newStyleSheet += '.whiteSquare { '                      + widthHeight + 'background: ' + lightColor + nlCss;
612                newStyleSheet += '.blackSquare { '                      + widthHeight + 'background: ' + darkColor + nlCss;
613                newStyleSheet += '.highlightWhiteSquare { ' + widthHeight + 'background: ' + highlightLightColor + nlCss;
614                newStyleSheet += '.highlightBlackSquare { ' + widthHeight + 'background: ' + highlightDarkColor + nlCss;
615        }
616
617        newStyleSheet += '.boardTable { border-color: ' + boardBorderColor + nlCss;
618
619        if (boardShadowColor != 'transparent')
620        {
621                newStyleSheet += '.boardTable { ' +
622                        'box-shadow: 0px 0px ' + Math.ceil(squareSize / 2) + 'px ' + boardShadowColor + nlCss;
623        }
624
625        if (!fontHeaderSize.match(/[^0-9]/)) {
626                fontHeaderSize += 'px';
627                newStyleSheet += 'body, table { font-size: ' + fontHeaderSize + nlCss;
628        }
629        newStyleSheet += '.header { color: ' + fontHeaderColor + '; font-size: ' + fontHeaderSize + nlCss;
630
631        if (!fontMovesSize.match(/[^0-9]/)) { fontMovesSize += 'px'; }
632        newStyleSheet += '.move { color: ' + fontMovesColor + '; font-size: ' + fontMovesSize + nlCss;
633
634        if (!fontCommentsSize.match(/[^0-9]/)) { fontCommentsSize += 'px'; }
635                newStyleSheet += '.comment, .variation { ' +
636                                           ' color: ' + fontCommentsColor + ';' +
637                                           ' font-size: ' + (fontCommentsSize == 'moves' ? fontMovesSize : fontCommentsSize) + nlCss;
638
639        if (!fontVariationsSize.match(/[^0-9]/)) { fontCommentsSize += 'px'; }
640        if (fontVariationsColor !== 'comments')
641        {
642                newStyleSheet += '.variation, a.variation {  color: ' + fontVariationsColor + nlCss;
643        }
644        if (fontVariationsSize !== 'comments')
645        {
646                newStyleSheet += '.variation {  font-size: ' + fontVariationsSize + nlCss;
647        }
648
649        //  newStyleSheet += 'a.move:hover, a.variation:hover { ' +
650        //                   ' background: ' + (highlightMoveColor == 'none' ? backgroundColor : highlightMoveColor) + nlCss;
651
652        newStyleSheet += '.moveOn, .variationOn { ' +
653                                        ' background: ' + (highlightMoveColor == 'none' ? backgroundColor : highlightMoveColor) + nlCss;
654
655          if ((controlBackgroundColor != 'default') && (controlBackgroundColor != '#default'))
656          {
657                controlFontSize = Math.floor(squareSize / 2.5);
658                newStyleSheet += '.buttonControl, .buttonControlPlay, .buttonControlStop { ' +
659                                                 '-webkit-appearance: none; ' +
660                                                 'border-style: solid; ' +
661                                                 'border-width: 0px; ' +
662                                                 'border-radius: 0px; ' +
663                                                 'border-color: ' + backgroundColor + '; ' +
664                                                 'background-color: ' + controlBackgroundColor + '; ' +
665                                                 'color: ' + controlTextColor + '; ' +
666                                                 'font-size: ' + controlFontSize + 'px; ' +
667                                                 'text-align: center; ' +
668                                                 'vertical-align: middle' + nlCss;
669
670                newStyleSheet += '.selectControl { ' +
671                                                 // was '-webkit-appearance: none; ' + // Do not hide the arrow to select games
672                                                 'padding: 3px; ' +
673                                                 'border-style: solid; ' +
674                                                 'border-width: 1px; ' +
675                                                 'border-radius: 0px; ' +
676                                                 'border-color: ' + backgroundColor + '; ' +
677                                                 'background-color: ' + controlBackgroundColor + '; ' +
678                                                 'color: ' + controlTextColor + '; ' +
679                                                 'font-size: 13px' + nlCss; // was 'font-size: ' + controlFontSize + 'px; ' + ' } \n';
680
681                newStyleSheet += '.optionSelectControl { background-color: ' + controlBackgroundColor + nlCss;
682          }
683        newStyleSheet += '</style> \n';
684
685        return newStyleSheet;
686}
687
688function defaultPieceSize(squareSize) {
689  targetPieceSize = Math.floor(0.8 * squareSize);
690  for (ii=(pieceSizeOptions.length-1); ii>=0; ii--) {
691    if (pieceSizeOptions[ii] <= targetPieceSize) { return pieceSizeOptions[ii]; }
692  }
693  return pieceSizeOptions[0];
694}
695
696function percentFixFromUrl( text ) {
697  text += ''; // makes sure text is a string
698  return text.replace(/pct$/,'%').replace(/p$/,'%'); // 100pct and 100p both mean 100%
699}
700
701function sex2hex(sex) {
702  if (sex === "") { return ""; }
703  sex += "";
704  var dec = 0;
705  var cnt;
706  for (cnt=0; cnt<sex.length; cnt++) {
707    dec <<= 6;
708    dec += sexEncodingCharSet.indexOf(sex.charAt(cnt));
709  }
710  var hex = dec.toString(16).toUpperCase() + "";
711  while (hex.length < 6) { hex = "0" + hex; }
712  return hex;
713}
714
715  function customFunctionOnPgnTextLoad() {
716
717    document.getElementById("playersDetails").className =
718      LiveBroadcastStarted ? "headerHighlighted" : "header";
719    document.getElementById("statusDetails").className =
720      ((!LiveBroadcastStarted) || (LiveBroadcastEnded)) ? "headerHighlighted" : "header";
721    document.getElementById("additionalMessage").innerHTML =
722      LiveBroadcastEnded ? ", click H6 for the next event" : "";
723
724    // cope with occasional failures to load the live PGN data
725    if ((LiveBroadcastDelay !== 0) && (LiveBroadcastTicker > 0) && (!LiveBroadcastFoundOldGame)) {
726      thisCurrentGame = currentGame;
727      SetInitialGame(init_Game);
728      SetInitialVariation(0);
729      setCurrentGameFromInitialGame();
730      if (currentGame != thisCurrentGame) {
731        SetInitialHalfmove("end",true);
732        Init();
733        GoToInitialHalfmove();
734      }
735    }
736
737  }
738
739  function customFunctionOnPgnGameLoad()
740  {
741    objectsToTitle = ["GameEvent", "GameSite", "GameDate", "GameWhite", "GameBlack"];
742    for (ii in objectsToTitle) {
743      if (theObj = document.getElementById(objectsToTitle[ii])) { theObj.title = theObj.innerHTML; }
744    }
745    if (timeControl = customPgnHeaderTag("TimeControl")) {
746      if (theObj = document.getElementById("GameWhiteClock")) { theObj.title = "timecontrol: " + timeControl; }
747      if (theObj = document.getElementById("GameBlackClock")) { theObj.title = "timecontrol: " + timeControl; }
748    } else {
749      if (theObj = document.getElementById("GameWhiteClock")) { theObj.title = ""; }
750      if (theObj = document.getElementById("GameBlackClock")) { theObj.title = ""; }
751    }
752        document.getElementById("roundDetails").innerHTML = ((gameRound[currentGame] !==  undefined) &&
753                (gameRound[currentGame] !== "") &&
754                (gameRound[currentGame] !=  "*") &&
755                (gameRound[currentGame] !=  "?")) ? "&nbsp;(" + gameRound[currentGame] + ")" : "";
756
757        var spanGameResult = document.getElementById("GameResult");
758        if (spanGameResult)
759        {
760                spanGameResult.title = (gameTermination = customPgnHeaderTag("Termination")) ? 
761                        "termination: " + gameTermination : "";
762
763                if (gameResult[currentGame] !== undefined) 
764                {
765                        spanGameResult.className = ((gameResult[currentGame] == "*") || (gameResult[currentGame] == "?")) ?
766                                "headerNosize" : "headerHighlightedNosize";
767                }
768                else
769                {
770                        spanGameResult.className = "headerNosize";
771                        spanGameResult.innerHTML = "";
772                }
773        }
774    var divGam = document.getElementById("GameText");
775    if (divGam)
776        {
777                if ((divGam.scrollHeight !== undefined) && (divGam.scrollTop !== undefined) && ((!LiveBroadcastFoundOldGame) || (LiveBroadcastOldCurrentPlyLast && (LiveBroadcastOldCurrentPly < StartPly+PlyNumber))))
778                        divGam.scrollTop = divGam.scrollHeight; 
779        }
780  }
781
782// Display systemMessage (inline) if pgn4webMessage is empty
783function customFunctionOnMove()
784{
785        var stsBar = customPgnCommentTag("pgn4web", "pgn4webMessage");
786        document.getElementById("systemMessage").style.display = (stsBar !== "") ? "none" : "inline";
787}
788 
789var timeoutOnceReadPgnLive = null;
790// Hide div messageLine. Run once refreshPgnSource() after the delay of 111 ms. Make visible div messageLine
791function checkForNewLiveEvent()
792{
793        document.getElementById("messageLine").style.visibility = "hidden";
794        if (timeoutOnceReadPgnLive)
795        { 
796                clearTimeout(timeoutOnceReadPgnLive);
797                timeoutOnceReadPgnLive = null;
798        }
799        // started as timeout otherwise some browser could suppress visual feedback
800        // timeoutOnceReadPgnLive = setTimeout('refreshPgnSource();document.getElementById("messageLine").style.visibility = "visible";', 111); // original code
801        timeoutOnceReadPgnLive = setTimeout(function(){GuiReadPgnLive()}, 111); // Run once after delay in ms
802}
803
804// Call refreshPgnSource then make visible the div messageLine
805function GuiReadPgnLive()
806{
807        refreshPgnSource(); // while the div messageLine has been hidden
808        var divStsBar = document.getElementById("messageLine");
809        divStsBar.style.visibility = "visible"; // Restore the visibility of the div
810}
811 
812  function customShortcutKey_Shift_1() {
813    if (typeof(openFidePlayerUrl) == "function") {
814      openFidePlayerUrl(gameWhite[currentGame], customPgnHeaderTag('WhiteFideId'));
815    }
816  }
817
818  function customShortcutKey_Shift_2() {
819    if (typeof(openFidePlayerUrl) == "function") {
820      openFidePlayerUrl(gameBlack[currentGame], customPgnHeaderTag('BlackFideId'));
821    }
822  }
823
824// @return      true if the option matches with the value or the first character of the value
825// @in:         option the value of the option
826//                      value   the value for comparison
827function IsMatchFirst(option, value)
828{
829        if (option == value)
830                return true;
831        if (option == value.charAt(0))
832                return true;
833        return false;
834}
835
836function gup(name) {
837
838  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
839  var regexS = "[\\?&]"+name+"=([^&#]*)";
840  // commented below to match first occurrence (to avoid users overruling setting)
841  // regexS = regexS+"(?!.*"+regexS+")"; // matches the LAST occurrence
842  var regex = new RegExp( regexS, "i" );
843  var results = regex.exec( window.location.href );
844  if (results !== null) { return decodeURIComponent(results[1]); }
845
846  // allows for short version of the URL parameters, for instance sC matches squareColor
847  compact_name = name.charAt(0);
848    for (i=1; i<name.length; i++) {
849      if (name.charAt(i).match(/[A-Z]/)) { compact_name = compact_name + name.charAt(i).toLowerCase(); }
850    }
851  name = compact_name;
852
853  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
854  regexS = "[\\?&]"+name+"=([^&#]*)";
855  // commented below to match first occurrence (to avoid users overruling setting)
856  // regexS = regexS+"(?!.*"+regexS+")"; // matches the LAST occurrence
857  regex = new RegExp( regexS, "i" );
858
859  results = regex.exec( window.location.href );
860  if (results !== null) { return decodeURIComponent(results[1]); }
861
862  return "";
863}
864
865function developer_help()
866{
867 alert("pgn4web live.html parameters" + "\n" +
868    " - pgnData = " + pgnFile + "; PGN file to load (default " + pgnFile_default + ")" + "\n" +
869    " - initialGame = " + init_Game + "; initial game to load, a number or first, last, random or a search string (default 1)" + "\n" +
870    " - refreshMinutes = " + refreshMinutes + "; refresh interval in minutes, decimals allowed (default 1)" + "\n" +
871    " - showComments = " + commentsIntoMoveText + "; (default false)" + "\n" +
872    " - refreshDemo = " + demoFlag + "; sets live demo mode (default false)" + "\n" +
873    " - help = true; prints this help (default false)");
874}
875
876function user_help()
877{
878  plural = refreshMinutes != 1 ? "s" : "";
879  demoString = demoFlag ? "demo mode enabled" + "\n" : "";
880
881  helpText = "Chess games live broadcast using pgn4web v" + pgn4web_version + "\n" +
882    "\n" +
883    "Games are automatically updated every " +
884    refreshMinutes + " minute" + plural  + " from the remote file " +
885    "(" + pgnFile + "). " +
886    "If the shown game is kept at the last available move, " +
887    "upon refresh the chessboard steps forward automatically " +
888    "to the game's latest position. " +
889    "The refresh stops once all games are finished. " +
890    "If no games are shown, just wait for the live broadcast to start. " +
891    "There is no need to reload the webpage to refresh games, " +
892    "but it's possible to manually force a refresh by clicking on square H6." + "\n" +
893    "\n" +
894    "Chessboard squares are input buttons controlling games display (full list by clicking square G8), including:" + "\n" +
895    "\n" +
896    "A1 / H1: game start / end" + "\n" +
897    "D1 / E1: move back / forwards" + "\n" +
898    "A3 / H3: load first / last game" + "\n" +
899    "C3 / F3: load previous / next game" + "\n" +
900    "A6 / B6: pause / restart live broadcast automatic refresh" + "\n" +
901    "C6 / F6: jump to previous / next finished game" + "\n" +
902    "D6 / E6: jump to previous / next unfinished game" + "\n" +
903    "H6: force games refresh during live broadcast" + "\n" +
904    "A8: debug info" + "\n" +
905    "G8 / H8: shortcut squares help / pgn4web help" + "\n" +
906    "\n" +
907    "Please note all squares are listed assuming White on bottom, plese adjust square labels if the chessboard is flipped." + "\n" +
908    "\n" +
909    "Press OK for more pgn4web help information" +
910    "\n ";
911
912  if (confirm(helpText)) { displayHelp(); }
913}
914
915// @Return the HTML body if the chessboard with horizontal GameText at its right or below statusDetails if vertical
916function GenBody()
917{
918        // PHP heredoc-like in javascript: 1. Select HTML code in NotePad++. 2. Regular expression "(.)$" -> "\1\"
919        // to add a backslash at the end of each line of the HTML code. Extended mode \n\n -> \n\\\n
920        var htmlBody ='<body><center>\
921<!-- need the external table to force height of 360 (see blackberry background issue) -->\
922<!-- width=100% was 460 is the max width for a 480 wide screen allowing for scrollbars -->\
923<!-- was height=360 is the max height for a 360 tall screen. cellpadding=0 was 5 -->\
924<table id="outerTable" width=100% cellpadding=0 cellspacing=0 border=0>\
925<tr><td align=center valign=top>\
926\
927<!-- 450 = 460 outerTable width - 2 * 5 cellpadding -->\
928<table width=400 cellpadding=0 cellspacing=0 border=0>\
929<tr>\
930        <td align=left valign=middle style="padding-bottom: 4px;">\
931        <div id="GameSelector"></div>\
932        </td>\
933        <td width=30 align=left valign=middle style="padding-left:1px;">\
934                <div style="wi\dth: 30px; height: 1.3em; line-height: 1.3em; overflow: hidden; white-space: nowrap;">\
935                <a id="helplink" class="helplinkNosize" href="javascript: user_help();" onFocus="this.blur()" title="pgn4web live broadcast help">help</a>\
936                </div>\
937        </td>\
938</tr>\
939</table>\
940\
941<!-- width = 100% was same 450 width as above -->\
942<table id="eventDetails" class="header" width=100% cellpadding=0 cellspacing=0 border=0>\
943<tr>\
944        <td width=100 align=left valign=middle style="padding: 3px;">\
945        <div id="GameSite" style="width: 94px; height: 1.3em; line-height: 1.3em; overflow: hidden; white-space: nowrap;"></div>\
946        </td>\
947        <td width=250 align=center valign=middle style="padding: 3px;">\
948        <div style="width: 244px; height: 1.3em; line-height: 1.3em; overflow: hidden;"><span id="GameEvent"></span><span id="roundDetails"></span></div>\
949        </td>\
950        <td width=100 align=right valign=middle style="padding: 3px;">\
951        <div id="GameDate" style="width: 94px; height: 1.3em; line-height: 1.3em; overflow: hidden"></div>\
952        </td>\
953</tr>\
954</table>\
955\
956<!-- width = 100% was same 450 width as above -->\
957<table id="playersDetails" class="header" width=100% cellpadding=0 cellspacing=0 border=0>\
958<tr>\
959        <td width=65 align=left valign=middle style="padding: 3px;">\
960        <div id="GameWhiteClock" style="width: 59px; height: 1.3em; line-height: 1.3em; overflow: hidden; white-space: nowrap;"></div>\
961        </td>\
962        <td width=320 align=center valign=middle style="padding: 3px;">\
963        <div style="width: 314px; height: 1.3em; line-height: 1.3em; overflow: hidden; white-space: nowrap;">\
964        <span id="GameWhite"></span>\
965        &nbsp;&nbsp;&nbsp;\
966        <span id="GameBlack"></span>\
967        </div>\
968        </td>\
969        <td width=65 align=right valign=middle style="padding: 3px;">\
970        <div id="GameBlackClock" style="width: 59px; height: 1.3em; line-height: 1.3em; overflow: hidden; white-space: nowrap;"></div>\
971        </td>\
972</tr>\
973</table>\
974\
975<!-- width = 100% was same 450 width as above -->\
976<table width=100% cellpadding=0 cellspacing=0 border=0>\
977<tr>\
978        <!-- 240 chessboard size = 8 * (26 square size + 2 * (2 square border)) -->\
979        <!-- width=246 = (chessboard size) + (6 right padding) -->\
980        <td id="tdGameBoard" width=';
981
982        var htmlTdGameBoardEnd =' valign=top style="padding-top: 8px; padding-bottom: 8px; padding-left: 0px; padding-right: 6px;">\
983        <span id="GameBoard"></span>\
984        </td>';
985       
986        var htmlTdGameTextStart ='\
987        <!-- was width= right column width 204 = (460 outer cell width) - (246 left column width) - (2 * 5 cellpaddding) -->\
988        <td id="tdGameText" align=left valign=top style="padding-top: 8px; padding-bottom: 8px; padding-left: 0px; padding-right: 0px;">\
989        <!-- height 240 = chessboard size -->\
990        <!-- was width:199px; = table cell size - 5 padding. style="height: 208px; " = 26 * 8 was style="height: 240px; " -->';
991
992        var htmlEndTableBoard ='\
993<tr>\
994</table>';
995
996        // In div messageLine, remove style="overflow: hidden; " hidding GameLiveStatus during first moves in IE8
997        var htmlStatusDetails = '<!-- width = 100% was same 450 width as above -->\
998<table id="statusDetails" class="header" width=100% cellpadding=0 cellspacing=0 border=0>\
999<tr>\
1000        <td width=40 align=left valign=middle style="padding:1px;">\
1001                <div style="width: 40px; height: 1.3em; line-height: 1.3em; overflow: hidden; white-space: nowrap;">\
1002                <span id="GameResult" class="headerNosize"></span>\
1003                </div>\
1004        </td>\
1005        <td width=52px style="padding:1px; font-size:13px;" valign=middle>\
1006                <div style="width:52px; height: 1.3em; line-height: 1.3em; overflow: hidden; white-space: nowrap;">\
1007                <span id="GameLiveLastRefreshed" style="float:right; clear:both;" title="Last refreshed" />\
1008                </div>\
1009        </td>\
1010        <td width=300px style="padding:1px;  font-size:13px;" align=left valign=middle>\
1011                <div id="messageLine" style="height: 1.3em; line-height: 1.3em; white-space: nowrap;">\
1012                <span id="pgn4webMessage"></span>\
1013                <span id="systemMessage"><span id="GameLiveStatus"></span><span id="additionalMessage"></span></span>\
1014                </div>\
1015        </td>\
1016        <td width=52px style="padding:1px; font-size:13px;" valign=middle>\
1017                <div style="width:52px; height: 1.3em; line-height: 1.3em; overflow: hidden; white-space: nowrap;">\
1018                <span id="GameLiveLastModifiedServer" style="float:right; clear:both;" title="Last modified on server" />\
1019                </div>\
1020        </td>\
1021</tr>\
1022</table>\
1023\
1024</td></tr>';
1025
1026        var htmlEndOuterTableBody = '\
1027</table>\
1028</center>\
1029</body>';
1030
1031        var horizontalLayout = IsMatchFirst(gup("horizontalLayout"), "true");
1032        if (horizontalLayout)
1033        {       // Set the width of the chessboard according to the number of squares
1034                var widthBoard = squareSize * 8;
1035                htmlBody += widthBoard.toString() + "px align=left" + htmlTdGameBoardEnd;
1036
1037                // Align the height of the list of moves with the height of the chessboard
1038                htmlBody += htmlTdGameTextStart;
1039                var heightBoard = squareSize * 8;
1040                // style="overflow-x: hidden; overflow-y: auto;" does not display the first line of moves in IE8
1041                // see meta IE=7 in the head
1042                htmlBody += '<div class="movebox" id="GameText" style="height: ' + heightBoard.toString() + 'px; ' +
1043                                        'padding-right: 5px; overflow-x: hidden; overflow-y: auto;"></div></td>' + htmlEndTableBoard;
1044                htmlBody += htmlStatusDetails + htmlEndOuterTableBody;
1045        }
1046        else
1047        {       // Set the full width for the chessboard that is centered
1048                htmlBody += "100% align=center" + htmlTdGameBoardEnd + htmlEndTableBoard;
1049                htmlBody += htmlStatusDetails;  // Below statusDetails, ...
1050                htmlBody += '<tr>' + htmlTdGameTextStart; // create a new row in outerTable for vertical GameText
1051                htmlBody += '<div class="movebox" id="GameText" style="height: 100%; ' +
1052                                        'padding-right: 5px; overflow-x: hidden; overflow-y: auto;"></div></td></tr>';
1053                htmlBody += htmlEndOuterTableBody;
1054        }
1055        return htmlBody;
1056}
1057</script>
1058</head>
1059</html>
Note: See TracBrowser for help on using the repository browser.