<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> bzChess example - Edit PGN </title>
<meta name="author" content="Gábor Martini" />
<meta name="keywords" content="chess fen pgn puzzle" />
<meta name="description" content="Javascript chess object to display positions" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<SCRIPT type="text/javascript" LANGUAGE=javascript src="bzchess.js"></script>
<LINK rel="stylesheet" type="text/css" media="screen" href="chess.css" />
<script type="text/javascript">
<!--
function bza_init_chesstable(el) {
el.chessgame = new bzChess(el);
el.chessgame.onDraw=function(){
comment.innerHTML = this.mv.comment;
}
el.chessgame.onMove=function(){
getPGN();
}
}
function getPGN() {
pgnsample.value = mybrd.chessgame.getPGN();
}
//-->
</script>
</head>
<body onload="bza_init_chesstable(mybrd)">
<h1>Example: Edit PGN - Portable Game Notation</h1>
<p style="margin: 0px;">To edit a PGN add roster information and set the board in play mode.</p>
<p style="margin: 0px;">Make a move and set the move comment. PGN string will display automatically or by pressing the "get PGN" button.</p>
<p style="margin: 0px;">For the move variation set the board back to the junction point and set the board to playable. The next move will stored as a variation.</p>
<table width="100%">
<tr>
<td style="vertical-align: top;">
<div id="mytbl" class="chtbl"><div id="mybrd" class="chbrd" bzaobj="chesstable"></div></div>
<div style="border: 1px solid transparent; width: 500px; margin-top: 10px; text-align:center;">
<input type="button" title="Prev move" value="<<< Prev move" onclick="mybrd.chessgame.prev()" />
<input type="button" value="Next move >>>" title="Next move" onclick="mybrd.chessgame.next()" /><br />
<input type="button" value="Start playing" title="Start playing" onclick="mybrd.chessgame.makePlayable()" /><input type="button" value="Stop playing" title="Stop playing" onclick="mybrd.chessgame.disablePlay()" /><br />
<input type="text" id="newcomment" size=40 /><input type="button" value="Set comment" onclick="mybrd.chessgame.mv.setComment(newcomment.value)" /><br />
<select id="roster_key">
<option value="Event" selected="selected">Event</option>
<option value="Site">Site</option>
<option value="Date">Date</option>
<option value="Round">Round</option>
<option value="White">White</option>
<option value="Black">Black</option>
<option value="Result">Result</option>
</select><br />
<input type="text" id="roster_value" /><br />
<input type="button" value="save roaster parameter" onclick="mybrd.chessgame.roster[roster_key.value]=roster_value.value;" />
</div>
</td>
<td style="vertical-align: top;"><br />
<p>Move comment:</p>
<div id="comment" style="border: 1px solid green; height:40px; width: 500px; margin-bottom: 10px; overflow: auto;"></div>
<div style="border: 1px solid green; width: 600px; margin-bottom: 10px;">
<textarea id="pgnsample" rows="20" cols="80" style="font-size: 8pt;">
</textarea><br /><input type="button" value="Load PGN" onclick="mybrd.chessgame.loadPGN(pgnsample.value)" /><input type="button" value="get PGN" onclick="getPGN()" /><br />
</div>
</td>
</tr>
</table>
</body>
</html>
|