1<!DOCTYPE HTML>
2<html>
3
4<!--
5  pgn4web javascript chessboard
6  copyright (C) 2009-2016 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>pgn4web help</title>
14
15<style type="text/css">
16
17html {
18  height: 100%;
19  width: 100%;
20  margin: 0px;
21  padding: 0px;
22  overflow-x: hidden;
23  overflow-y: scroll;
24}
25
26body {
27  position: absolute;
28  min-height: 100%;
29  min-width: 100%;
30  font-size: 16px;
31  font-family: sans-serif;
32  color: black;
33  background: white;
34  margin: 0;
35  padding: 0;
36  text-align: justify;
37  -webkit-text-size-adjust: 100%;
38  -moz-text-size-adjust: none;
39  -ms-text-size-adjust: 100%;
40  -o-text-size-adjust: 100%;
41  text-size-adjust: 100%;
42}
43
44.everythingButFooter {
45  padding: 32px;
46  padding-bottom: 80px; /* 80 = 2 * 32 everythingButFooter.padding + 16 footer.lineHeight */
47}
48
49a {
50  color: inherit;
51  text-decoration: none;
52}
53
54a:hover {
55  text-decoration: underline;
56}
57
58a.heading, a.headingSelected {
59  margin: 30px;
60  line-height: 30px;
61  font-size: 20px;
62  font-weight: bold;
63}
64
65a.heading {
66  color: #C0C0C0;
67}
68
69a.headingSelected {
70  color: black;
71}
72
73a.headingSelected:hover {
74  text-decoration: none;
75}
76
77.section {
78  display: none;
79}
80
81.informantCell {
82  font-size: 19px;
83  padding-left: 80px;
84  padding-right: 50px;
85  padding-top: 10px;
86  padding-bottom: 2px;
87}
88
89.footer {
90  position: absolute;
91  bottom: 32px;
92  width: 100%;
93  font-size: 13px;
94  line-height: 16px;
95  color: #C0C0C0;
96  text-align: right;
97  clear: both;
98}
99
100.footerLeft {
101  float: left;
102  padding-left: 32px;
103  padding-right: 32px;
104}
105
106.footerRight {
107  overflow: hidden;
108  white-space: nowrap;
109  text-overflow: ellipsis;
110  padding-right: 32px;
111}
112
113
114</style>
115
116<link rel="icon" sizes="16x16" href="pawn.ico" />
117
118</head>
119
120<body>
121
122<script type="text/javascript">
123"use strict";
124
125var sections = ["user_interface", "shortcut_keys", "shortcut_squares", "touch_gestures", "search_tool", "informant_symbols", "credits_and_license"];
126
127function showSection(section) {
128  var section2show = sections[0], theObj;
129  for (var s in sections) {
130    if (theObj = document.getElementById(sections[s] + "_section")) { theObj.style.display = ""; }
131    if (theObj = document.getElementById(sections[s] + "_heading")) { theObj.className = "heading"; }
132    if (sections[s] === section) { section2show = section; }
133  }
134  if (theObj = document.getElementById(section2show + "_section")) { theObj.style.display = "inline"; }
135  if (theObj = document.getElementById(section2show + "_heading")) { theObj.className = "headingSelected"; }
136  document.title = "pgn4web help: " + section2show.replace(/_/g, " ");
137}
138
139function print_help_row (one, two) {
140  document.write("<tr><td style='text-align:left; vertical-align:top; padding-left:40px; white-space:nowrap;'>" + one + "</td><td style='text-align:left; vertical-align:top; padding-left:20px'>" + two + "</td></tr>");
141}
142
143function updateFooter() {
144  var theObj;
145  if (opener && (typeof(opener.pgn4web_version) != "undefined")) {
146    if (theObj = document.getElementById("footerVersion")) { theObj.innerHTML = opener.pgn4web_version; }
147    if (theObj = document.getElementById("footerRight")) { theObj.innerHTML = opener.location.href; }
148  }
149}
150
151var isRotated = false;
152if (opener && (typeof(opener.IsRotated) != "undefined")) {
153  isRotated = opener.IsRotated;
154}
155
156var colorAtTheBottom = isRotated ? "Black" : "White";
157var rowNumbers = isRotated ? "87654321" : "12345678";
158var colLetters = isRotated ? "HGFEDCBA" : "ABCDEFGH";
159
160var touchGesturesSupported = !!('ontouchstart' in window);
161if (opener && (typeof(opener.touchEventEnabled) != "undefined")) {
162  touchGesturesSupported = touchGesturesSupported && opener.touchEventEnabled;
163}
164
165var touchGestures_helpIntro, touchGestures_helpActions, touchGestures_helpText;
166if (touchGesturesSupported) {
167  touchGestures_helpIntro = "The user can interact with the chessboard using touch gestures:";
168  if (opener && (typeof(opener.touchGestures_helpActions) != "undefined")) {
169    touchGestures_helpActions = opener.touchGestures_helpActions;
170  } else {
171    touchGestures_helpActions = [ "touch gestures info not available from the opener window" ];
172  }
173  if (opener && (typeof(opener.touchGestures_helpText) != "undefined")) {
174    touchGestures_helpText = opener.touchGestures_helpText;
175  } else {
176    touchGestures_helpText = [ "" ];
177  }
178} else {
179  touchGestures_helpIntro = "Touch gestures not available.<p></p>When enabled on supported touchscreen devices, touch gestures can be used to interact with the chessboard using swipe gestures.";
180  touchGestures_helpActions = [];
181  touchGestures_helpText = [];
182}
183
184</script>
185
186<div id="everythingButFooter" class="everythingButFooter">
187
188<h1 style="margin-top:0px; padding-top:0px; text-align:right;">
189<span style="float:left; color:black;">
190pgn4web help
191</span>
192<span style="width:49px; height:29px; background:url(pawns.png) -47px -15px; vertical-align:baseline; display:inline-block;"></span>
193</h1>
194
195<div style="text-align:center; margin-top:40px; margin-bottom:50px;">
196
197<script type="text/javascript">
198"use strict";
199
200for (var s in sections) {
201  document.write("<a id='" + sections[s] + "_heading' class='heading' href='javascript:void(0);' onclick='showSection(\"" + sections[s] + "\"); this.blur();'>" + sections[s].replace(/_/g, "&nbsp;") + "</a> ");
202}
203
204</script>
205
206</div>
207
208<div id="user_interface_section" class="section">
209
210pgn4web is a chess games viewer for websites, blogs and live broadcasts.
211<p></p>
212The user can interact with the chessboard <a href="javascript:void(0);" onclick="showSection('shortcut_keys');">using the keyboard</a>, <a href="javascript:void(0);" onclick="showSection('shortcut_squares');">clicking chessboard squares</a> (hovering the mouse on each square displays an help summary) or <a href="javascript:void(0);" onclick="showSection('touch_gestures');">using touch gestures</a>.
213<p></p>
214A <a href="javascript:void(0);" onclick="showSection('search_tool')">search tool</a> allows searching within the PGN games.
215<p></p>
216Errors alert messages are logged, such as failures to load PGN games, incorrect PGN games or incorrect FEN strings. When an error is encountered, a chessboard square will flash to signal the exception. The error alert log can be reviewed clicking on the flashing chessboard square.
217<p></p>
218See <a href="http://pgn4web-project.casaschi.net/wiki/" target="_blank">the pgn4web wiki</a> for more information. Please note, the wiki information always refers to <a href="http://pgn4web.casaschi.net" target="_blank">the latest version of pgn4web</a>.
219</div>
220
221
222<div id="shortcut_keys_section" class="section">
223
224The user can interact with the chessboard using the keyboard. See <a href="http://pgn4web-project.casaschi.net/wiki/EndUser_Interface/" target="_blank">the pgn4web wiki</a> for more information. Most commonly used shortcut keys:
225
226<script type="text/javascript">
227"use strict";
228
229document.write("<table style='padding:0px;' border='0'>");
230print_help_row("&nbsp;", "");
231print_help_row("&nbsp;", "");
232print_help_row("", "<b>moving through a game</b>");
233print_help_row("&nbsp;", "");
234print_help_row("h , l", "go to game start, end (also arrow-up, arrow-down)");
235print_help_row("shift-h , shift-l", "go to variation start, end (also shift-arrow-up, shift-arrow-down)");
236print_help_row("j , k", "move backward, forward (also arrow-left, arrow-right)");
237print_help_row("shift-j", "go to <span title='the parent variation is the variation from which the current variation started'>parent variation</span> (also shift-arrow-left)");
238print_help_row("shift-k", "cycle through <span title='alternative variations are moves with the same predecessor move as the last move played on the chessboard; in the game 1. e4 e5 (1... e6) (1... c5) the moves e6 and c5 are alternatives to e5'>alternative variations</span>, if any, otherwise move forward (also shift-arrow-right)");
239print_help_row("dot", "cycle through <span title='alternative variations are moves with the same predecessor move as the last move played on the chessboard; in the game 1. e4 e5 (1... e6) (1... c5) the moves e6 and c5 are alternatives to e5'>alternative variations</span>, if any");
240print_help_row("shift-dot", "<span title='in the game 1. e4 e5 (1... c5) (1... e6), shift-dot from the move e4 would step into c5'>step into the first variation</span>, if any");
241print_help_row("&nbsp;", "");
242print_help_row("i, o", "find previous, next comment or variation");
243print_help_row("shift-i, shift-o", "find previous, next variation");
244print_help_row("&nbsp;", "");
245print_help_row("u", "undo last chessboard position update (also del)");
246print_help_row("shift-u", "redo last undo (also ins)");
247print_help_row("&nbsp;", "");
248print_help_row("", "<b>autoplaying games</b>");
249print_help_row("&nbsp;", "");
250print_help_row("a", "start autoplay");
251print_help_row("0", "stop autoplay");
252print_help_row("1, 2...", "autoplay 1 sec, 2 sec...");
253print_help_row("&nbsp;", "");
254print_help_row("", "<b>selecting games</b>");
255print_help_row("&nbsp;", "");
256print_help_row("v, m", "load first, last game");
257print_help_row("b, n", "load previous, next game");
258print_help_row("c, x", "load random game, random game at random position");
259print_help_row("&nbsp;", "");
260print_help_row("", "<b>searching games</b>");
261print_help_row("&nbsp;", "");
262print_help_row("s", "search prompt");
263print_help_row("enter", "repeat last search");
264print_help_row("shift-enter", "repeat last search backward");
265print_help_row("&nbsp;", "");
266print_help_row("", "<b>managing live games broadcasts</b>");
267print_help_row("&nbsp;", "");
268print_help_row("r, y", "pause, restart live broadcast automatic refresh");
269print_help_row("t", "force games refresh during live broadcast");
270print_help_row("&nbsp;", "");
271print_help_row("", "<b>customizing chessboard and moves display</b>");
272print_help_row("&nbsp;", "");
273print_help_row("p", "toggle show comments in game text");
274print_help_row("shift-p", "toggle show comments on separate lines");
275print_help_row("g", "toggle highlighting last move");
276print_help_row("f, shift-f", "flip board, White on bottom");
277print_help_row("&nbsp;", "");
278print_help_row("&nbsp;", "<b>showing PGN source data</b>");
279print_help_row("&nbsp;", "");
280print_help_row("d", "show current game PGN source data");
281print_help_row("shift-d", "show current position FEN string");
282print_help_row("&nbsp;", "");
283print_help_row("&nbsp;", "<b>looking for help</b>");
284print_help_row("&nbsp;", "");
285print_help_row("z", "pgn4web debug info");
286print_help_row("shift-z", "pgn4web website");
287print_help_row("esc", "pgn4web help");
288print_help_row("shift-esc", "toggle enabling shortcut keys");
289print_help_row("&nbsp;", "");
290print_help_row("&nbsp;", "");
291document.write("</table>");
292
293if (opener && (typeof(opener.shortcutKeysEnabled) != "undefined")) {
294  document.write('Shortcut keys currently ' + (opener.shortcutKeysEnabled ? "enabled, disable" : "disabled, enable") + ' with shift+escape or with the associated <a href="javascript:void(0);" onclick="showSection(\'shortcut_squares\');">shortcut square</a>.\n');
295} else {
296  document.write('Shortcut keys info not available from the opener window, please check about shortcut keys with shift+escape or with the associated <a href="javascript:void(0);" onclick="showSection(\'shortcut_squares\');">shortcut square</a>.\n');
297}
298
299</script>
300
301</div>
302
303
304<div id="shortcut_squares_section" class="section">
305
306The user can interact with the chessboard clicking chessboard squares:
307<p></p>
308
309<script type="text/javascript">
310"use strict";
311
312if (opener && (typeof(opener.boardTitle) != "undefined")) {
313  document.write("<table style='padding:0px;' border='0'>");
314  print_help_row("&nbsp;", "");
315  var rowDisplayed;
316  for (var r=7; r>=0; r--) {
317    rowDisplayed = false;
318    for (var c=0; c<=7; c++) {
319      if (opener.boardTitle[c][r] !== "") {
320        print_help_row(colLetters.charAt(c) + rowNumbers.charAt(7-r), opener.boardTitle[c][r].replace(/\n.*/g, ""));
321        rowDisplayed = true;
322      }
323    }
324    if (rowDisplayed) { print_help_row("&nbsp;", ""); }
325  }
326  print_help_row("&nbsp;", "");
327  document.write("</table>");
328  document.write("Squares labeled assuming " + colorAtTheBottom + " on bottom.");
329} else {
330  document.write("shortcut squares info not available from the opener window, please hover the mouse pointer on each square of the chessboard to check for their shortcut action.");
331}
332</script>
333
334</div>
335
336
337<div id="touch_gestures_section" class="section">
338
339<script type="text/javascript">
340"use strict";
341document.write(touchGestures_helpIntro);
342if (touchGestures_helpActions.length > 0) {
343  document.write("<table style='padding:0px;' border='0'>");
344  print_help_row("&nbsp;", "");
345  for (var ii = 0; ii < touchGestures_helpActions.length; ii++) {
346    print_help_row(touchGestures_helpActions[ii], touchGestures_helpText[ii]);
347  }
348  document.write("</table>");
349}
350</script>
351
352</div>
353
354
355<div id="search_tool_section" class="section">
356
357Access the search tool either directly with the search form (if available on the web page) or via the popup search box invoked with the 's' shortcut key and/or the associated <a href="javascript:void(0);" onclick="showSection('shortcut_squares');">shortcut squares</a>.
358
359<p></p>
360For full details about the search tool (implemented as regular expression match of the text of the PGN game), please refer to <a href="http://pgn4web-project.casaschi.net/wiki/EndUser_SearchTool/" target="_blank">the pgn4web wiki</a>; please find below a sample list of useful search patterns:
361<p></p>
362<script type="text/javascript">
363"use strict";
364document.write("<table style='padding:0px;' border='0'>");
365print_help_row("something", "search for text <i>something</i> anywhere in the PGN game");
366print_help_row("White\\s*\"Somebody", "search for player <i>Somebody</i> as White");
367print_help_row("\(White|Black\)\\s*\"Somebody", "search for player <i>Somebody</i> as either White or Black");
368print_help_row("White\\s*\"Somebody.*Black\\s*\"Other", "search for <i>Somebody</i> vs <i>Other</i> games");
369print_help_row("Site\\s*\"Somewhere.*Result\\s*\"\(1-0|0-1\)", "search for games at the <i>Somewhere</i> site ending with a win");
370print_help_row("Result\\s*\"\(?!1-0\)", "search for games not ending with a White win");
371print_help_row("\\b1\\.\\s*e4\\s*e6", "search for games with moves <i>1. e4 e6</i>");
372print_help_row("\\b1\\.\\s*e4\\s*e5\(?!\\s*2\\.\\s*Nf3\)", "search for games with moves <i>1. e4 e5</i> without <i>2. Nf3</i>");
373document.write("</table>");
374
375</script>
376
377</div>
378
379
380<div id="informant_symbols_section" class="section">
381
382Chess annotations symbols as defined by <a href="http://www.chessinformant.rs" targte="_blank">the Chess Informant publishing company</a>:
383
384<script type="text/javascript">var NAG = new Array();</script>
385<script type="text/javascript">
386"use strict";
387function detectJavascriptLocation(jsre) {
388  if (typeof(jsre) == "undefined") { jsre = new RegExp("(pgn4web|pgn4web-compacted)\.js$", ""); }
389  var e = document.getElementsByTagName("script");
390  for (var i=0; i<e.length; i++) {
391    if ((e[i].src) && (e[i].src.match(jsre))) {
392      return e[i].src;
393    }
394  }
395  return "";
396}
397</script>
398<!-- patch: fonts folder: if the "fonts" folder is relocated please update the next line accordingly -->
399<script src="fonts/chess-informant-NAG-symbols.js" type="text/javascript"></script>
400<script type="text/javascript">
401"use strict";
402
403function print_NAG_row(nag, text) {
404  document.write("<tr valign='bottom'><td class='informantCell' title='$" + nag + "'>" + (NAG[nag] || "&middot;") + "</td><td>" + text + "</td></tr>");
405}
406
407document.write("<table style='padding:0px;' border='0'>");
408document.write("<tr valign='bottom'><td class='informantCell'>&nbsp;</td><td></td></tr>");
409print_NAG_row(14, "white stands slightly better");
410print_NAG_row(15, "black stands slightly better");
411print_NAG_row(16, "white has the upper hand");
412print_NAG_row(17, "black has the upper hand");
413print_NAG_row(18, "white has a decisive advantage");
414print_NAG_row(19, "black has a decisive advantage");
415print_NAG_row(11, "even");
416print_NAG_row(13, "unclear");
417print_NAG_row(44, "with compensation for the material");
418print_NAG_row(30, "development advantage");
419print_NAG_row(24, "greater board room");
420print_NAG_row(40, "with attack");
421print_NAG_row(36, "with initiative");
422print_NAG_row(130, "with counter-play");
423print_NAG_row(22, "zugzwang");
424document.write("<tr valign='bottom'><td class='informantCell'>#</td><td>mate</td></tr>");
425print_NAG_row(1, "a very good move");
426print_NAG_row(3, "an excellent move");
427print_NAG_row(2, "a mistake");
428print_NAG_row(4, "a blunder");
429print_NAG_row(5, "a move deserving attention");
430print_NAG_row(6, "a dubious move");
431print_NAG_row(140, "with the idea");
432print_NAG_row(7, "only move");
433print_NAG_row(142, "better is");
434print_NAG_row(149, "file");
435print_NAG_row(150, "diagonal");
436print_NAG_row(48, "center");
437print_NAG_row(242, "king's side");
438print_NAG_row(243, "queen's side");
439print_NAG_row(147, "weak point");
440print_NAG_row(148, "ending");
441print_NAG_row(151, "pair of bishops");
442print_NAG_row(153, "bishops of opposite colors");
443print_NAG_row(154, "bishops of the same color");
444print_NAG_row(155, "united pawns");
445print_NAG_row(157, "separated pawns");
446print_NAG_row(159, "double pawns");
447print_NAG_row(161, "passed pawn");
448print_NAG_row(163, "pawn majority");
449print_NAG_row(136, "time");
450print_NAG_row(146, "a novelty");
451print_NAG_row(145, "editorial comment");
452document.write("<tr valign='bottom'><td class='informantCell'>R</td><td>various moves</td></tr>");
453print_NAG_row(254, "with");
454print_NAG_row(255, "without");
455print_NAG_row(190, "etc");
456document.write("<tr valign='bottom'><td class='informantCell'>-</td><td>see</td></tr>");
457document.write("<tr valign='bottom'><td class='informantCell'>&nbsp;</td><td></td></tr>");
458document.write("</table>");
459
460</script>
461
462Technical note: Chess Informant symbols display requires a modern browser supporting <a href="http://en.wikipedia.org/wiki/Web_typography" target="_blank">web fonts</a>, otherwise the game notation might result garbled.
463
464</div>
465
466
467<div id="credits_and_license_section" class="section">
468
469Javascript modifications of <a href="mailto:pgn4web@casaschi.net">Paolo Casaschi</a> on code from <a href="http://ficsgames.org" target="_blank">the ficsgames database</a>, in turn likely based on code from <a href="http://www.lutanho.net/pgn/pgnviewer.html" target="_blank">the LT PGN viewer</a>.
470<p></p>
471<a href="http://ixian.com/chess/jin-piece-sets" target="_blank">PNG images from Eric De Mund</a>, licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/" target="_blank">creative commons attribution-share alike 3.0 unported license</a>.
472<br>
473<a href="http://commons.wikimedia.org/wiki/Category:SVG_chess_pieces" target="_blank">SVG images from Colin M.L. Burnett</a>, licensed under <a href="http://www.gnu.org/copyleft/fdl.html" target="_blank">GFDL</a>, <a href="http://www.creativecommons.org/licenses/by-sa/3.0/" target="_blank">CC-BY-SA-3.0</a> or <a href="http://www.gnu.org/licenses/gpl.html" target="_blank">GPL</a>, via Wikimedia Commons.
474<br>
475<a href="http://openclipart.org/search/?query=chess+symbols+set" target="_blank">SVG images from Igor Krizanovskij</a> and <a href="http://openclipart.org/search/?query=Chess+tile" target="_blank">other SVG images</a>, dedicated to the <a href="http://creativecommons.org/publicdomain/zero/1.0/" target="_blank">Public Domain</a> as any openclipart.org content.
476<p></p>
477The figurine fonts are derived from <a href="https://fedorahosted.org/liberation-fonts/" target="_blank">the Liberation Sans</a> font released under GNU General Public License, with the addition of chess pieces from freeware fonts: the alpha2 font (Peter Strickland), the good companion font (David L. Brown), the merida font (Armando H. Marroquin), the pirate font (Klaus Wolf) and the chess usual font (Armando H. Marroquin). The original chess fonts and more details are available at <a href="http://www.enpassant.dk/chess/fonteng.htm" target="_blank">the en passant site</a>.
478The chess informant symbols font is used with permission from <a href="http://www.chessinformant.rs" target="_blank">the Chess Informant publishing company</a>. The chess ole figurin font is from <a href="http://www.chessole.de" target="_blank">the ChessOLE project</a> (David Frank).
479<p></p>
480<a href="http://forwardcoding.com/projects/ajaxchess/chess.html" target="_blank">The GarboChess javascript chess engine</a> is <a href="https://github.com/glinscott/Garbochess-JS" target="_blank">licensed by Gary Linscott</a> under BSD license.
481<p></p>
482Some functionality of specific applications of pgn4web or specific demo pages depends on third party javascript libraries, each stored in a separate subfolder with the associated credits and license information.
483<p></p>
484Remaining pgn4web code is copyright (C) 2009-2016 <a href="mailto:pgn4web@casaschi.net">Paolo Casaschi</a> and licensed under the terms of <a href="license-gpl-2.0.txt" target="_blank">the GNU General Public License version 2</a> as published by <a href="http://www.fsf.org" target="_blank">the Free Software Foundation</a>; either <a href="license-gpl-2.0.txt" target="_blank">version 2 of the License</a>, or (at your option) any later version.
485</div>
486
487</div> <!-- everythingButFooter -->
488
489<div id="footer" class="footer"><div id="footerLeft" class="footerLeft"><a href="http://pgn4web.casaschi.net" target="_blank">pgn4web</a>&nbsp;<span id="footerVersion">help</span></div><div id="footerRight" class="footerRight"></div></div>
490
491
492<script type="text/javascript">
493"use strict";
494updateFooter();
495showSection(location.search.substr(1));
496</script>
497
498</body>
499
500</html>
501