Login   Register  
Icontem

File: bzchess-pgn-save.html

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Gábor Martini  >  bzChess  >  bzchess-pgn-save.html  >  Download  
File: bzchess-pgn-save.html
Role: Example script
Content type: text/plain
Description: Example: Edit PGN
Class: bzChess
Manage and display a chess board game
Author: By
Last change:
Date: 2012-06-10 21:32
Size: 3,440 bytes
 

Contents

Class file image Download
<!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>