Update web directory to match latest web Publish feature, as used in …

…NZCF Chess Magazine Archive
billforsternz · Jan 14, 2019 · a79a2c2 · a79a2c2
1 parent b20c38f
commit a79a2c2
Show file tree

Hide file tree

Showing 71 changed files with 195 additions and 200 deletions.
diff --git a/install/web/example.html b/install/web/example.html
@@ -1,24 +1,21 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
+<html>  
 <head>
-<link rel="stylesheet" type="text/css" href="style-v1.01.css" />
-<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
-<script type="text/javascript" src="jquery-animate-enhanced-min.js"></script>
-<script type="text/javascript" src="publish-v1.01.js"></script>
-</head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title>Example</title>
+    <link rel="stylesheet" type="text/css" href="style-v1.02.css" />
+    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
+    <script type="text/javascript" src="jquery.animate-enhanced.min.js"></script>
+    <script type="text/javascript" src="publish-v1.03.js"></script>
+</head>  
 
 <body>
 <div id="top">
-<p>Simple Example</p>
-</div>
-<div id="content">
-<p>The command to edit game prefixes like this is currently disabled in Tarrasch,
-but of course you can add them with a text editor
-
-</p>
-
+    <p>Example</p>
+</div>  
+<div id="content"><p>The command to edit game prefixes like this is currently disabled in Tarrasch,
+but of course you can add them with a text editor</p>
 <h3>Schiffers, Emanuel - Chigorin, Mikhail St Petersburg 1880</h3>
-</h3>
 <div class='moves'>
 <p>
 <span id='mv-3' rel='0 ahff32FFAH 0.NoMove -1 0 Pe2e4' class='main'></span>
@@ -56,7 +53,9 @@ <h3>Schiffers, Emanuel - Chigorin, Mikhail St Petersburg 1880</h3>
 <span id='mv31' rel='0 2kr3rQd1qt11p1b5P6P1nNP1D3D1R3V 16...Nxe3 30 32 nc4e3' class='main'>Nxe3 </span>
 </p>
 </div>
+
 <div style='clear:both;'></div>
+
 <div class='diagram_outer'>
 <div class='diagram' rel='2kr3rQd1qt11p1b5P6P1nNP1D3D1R3V 0'>
 <img src='png/w.png' alt=''><img src='png/b.png' alt=''><img src='png/bkw.png' alt=''><img src='png/brb.png' alt=''><img src='png/w.png' alt=''><img src='png/b.png' alt=''><img src='png/w.png' alt=''><img src='png/brb.png' alt=''><br>
@@ -72,6 +71,7 @@ <h3>Schiffers, Emanuel - Chigorin, Mikhail St Petersburg 1880</h3>
 </div>
 <div class='label'><p id='diagram0'>Moves are clickable</p></div>
 </div>
+
 <div class='moves'>
 <p>
 <span id='mv32' rel='0 2kr3rQd1qt11pNb5P6P1n1P1D3D1R3V 17.Ne5 31 33 Nf3e5' class='main'>17.Ne5 </span>
@@ -154,18 +154,12 @@ <h3>Schiffers, Emanuel - Chigorin, Mikhail St Petersburg 1880</h3>
 <span id='mv109' rel='0 15p5Kb7P4k2P 55...Bg6 108 -1 be4g6' class='main'>Bg6 </span>
 <b> 0-1</b></p>
 </div>
-<div style='clear:both;'></div>
 
-
-<br/>
+<div style='clear:both;'></div>
 
 <p>The command to edit game prefixes like this is currently disabled in Tarrasch,
-but of course you can add them with a text editor
-
-</p>
-
+but of course you can add them with a text editor</p>
 <h3>Zukertort, Johannes - Rosenthal, Samuel London 1880</h3>
-</h3>
 <div class='moves'>
 <p>
 <span id='mv-4' rel='1 ahff32FFAH 0.NoMove -1 110 Pe2e4' class='main'></span>
@@ -215,7 +209,9 @@ <h3>Zukertort, Johannes - Rosenthal, Samuel London 1880</h3>
 <span id='mv153' rel='1 r3r1k1dq2p1p3bb6B1p1Q3P6P1N1P1D5PR1B3K 22...f5 152 154 pf6f5' class='main'>f5 </span>
 </p>
 </div>
+
 <div style='clear:both;'></div>
+
 <div class='diagram_outer'>
 <div class='diagram' rel='r3r1k1dq2p1p3bb6B1p1Q3P6P1N1P1D5PR1B3K 1'>
 <img src='png/brw.png' alt=''><img src='png/b.png' alt=''><img src='png/w.png' alt=''><img src='png/b.png' alt=''><img src='png/brw.png' alt=''><img src='png/b.png' alt=''><img src='png/bkw.png' alt=''><img src='png/b.png' alt=''><br>
@@ -231,6 +227,7 @@ <h3>Zukertort, Johannes - Rosenthal, Samuel London 1880</h3>
 </div>
 <div class='label'><p id='diagram1'>Moves are clickable</p></div>
 </div>
+
 <div class='moves'>
 <p>
 <span id='mv154' rel='1 r3r1k1dq2p1p3bb6B1N1Q3P6P3P1D5PR1B3K 23.Nxf5 153 155 Ne3f5' class='main'>23.Nxf5 </span>
@@ -250,10 +247,12 @@ <h3>Zukertort, Johannes - Rosenthal, Samuel London 1880</h3>
 <span id='mv168' rel='1 5B1kdq2p1p11B7P2Q3P2KP1D5P4r 30.Bxf8 167 -1 Bh6f8' class='main'>30.Bxf8 </span>
 <b> 1-0</b></p>
 </div>
-<div style='clear:both;'></div>
 
+<div style='clear:both;'></div>
 
-<br/>
-</div>
-</body>
+<p><br/></p></div>
+</body>  
 </html>
+
+
+
diff --git a/install/web/png/Thumbs.db b/install/web/png/Thumbs.db
diff --git a/install/web/png/b.png b/install/web/png/b.png
diff --git a/install/web/png/back.png b/install/web/png/back.png
diff --git a/install/web/png/bb.png b/install/web/png/bb.png
diff --git a/install/web/png/bbb.png b/install/web/png/bbb.png
diff --git a/install/web/png/bbw.png b/install/web/png/bbw.png
diff --git a/install/web/png/bby.png b/install/web/png/bby.png
diff --git a/install/web/png/bk.png b/install/web/png/bk.png
diff --git a/install/web/png/bkb.png b/install/web/png/bkb.png
diff --git a/install/web/png/bkw.png b/install/web/png/bkw.png
diff --git a/install/web/png/bky.png b/install/web/png/bky.png
diff --git a/install/web/png/blank.png b/install/web/png/blank.png
diff --git a/install/web/png/bn.png b/install/web/png/bn.png
diff --git a/install/web/png/bnb.png b/install/web/png/bnb.png
diff --git a/install/web/png/bnw.png b/install/web/png/bnw.png
diff --git a/install/web/png/bny.png b/install/web/png/bny.png
diff --git a/install/web/png/bp.png b/install/web/png/bp.png
diff --git a/install/web/png/bpb.png b/install/web/png/bpb.png
diff --git a/install/web/png/bpw.png b/install/web/png/bpw.png
diff --git a/install/web/png/bpy.png b/install/web/png/bpy.png
diff --git a/install/web/png/bq.png b/install/web/png/bq.png
diff --git a/install/web/png/bqb.png b/install/web/png/bqb.png
diff --git a/install/web/png/bqw.png b/install/web/png/bqw.png
diff --git a/install/web/png/bqy.png b/install/web/png/bqy.png
diff --git a/install/web/png/br.png b/install/web/png/br.png
diff --git a/install/web/png/brb.png b/install/web/png/brb.png
diff --git a/install/web/png/brw.png b/install/web/png/brw.png
diff --git a/install/web/png/bry.png b/install/web/png/bry.png
diff --git a/install/web/png/cochran-cochran.jpg b/install/web/png/cochran-cochran.jpg
diff --git a/install/web/png/exit.png b/install/web/png/exit.png
diff --git a/install/web/png/forward.png b/install/web/png/forward.png
diff --git a/install/web/png/later.png b/install/web/png/later.png
diff --git a/install/web/png/mback.png b/install/web/png/mback.png
diff --git a/install/web/png/mforward.png b/install/web/png/mforward.png
diff --git a/install/web/png/mpause.png b/install/web/png/mpause.png
diff --git a/install/web/png/mplay.png b/install/web/png/mplay.png
diff --git a/install/web/png/mstop.png b/install/web/png/mstop.png
diff --git a/install/web/png/pause.png b/install/web/png/pause.png
diff --git a/install/web/png/play.png b/install/web/png/play.png
diff --git a/install/web/png/w.png b/install/web/png/w.png
diff --git a/install/web/png/wb.png b/install/web/png/wb.png
diff --git a/install/web/png/wbb.png b/install/web/png/wbb.png
diff --git a/install/web/png/wbw.png b/install/web/png/wbw.png
diff --git a/install/web/png/wby.png b/install/web/png/wby.png
diff --git a/install/web/png/wk.png b/install/web/png/wk.png
diff --git a/install/web/png/wkb.png b/install/web/png/wkb.png
diff --git a/install/web/png/wkw.png b/install/web/png/wkw.png
diff --git a/install/web/png/wky.png b/install/web/png/wky.png
diff --git a/install/web/png/wn.png b/install/web/png/wn.png
diff --git a/install/web/png/wnb.png b/install/web/png/wnb.png
diff --git a/install/web/png/wnw.png b/install/web/png/wnw.png
diff --git a/install/web/png/wny.png b/install/web/png/wny.png
diff --git a/install/web/png/wp.png b/install/web/png/wp.png
diff --git a/install/web/png/wpb.png b/install/web/png/wpb.png
diff --git a/install/web/png/wpw.png b/install/web/png/wpw.png
diff --git a/install/web/png/wpy.png b/install/web/png/wpy.png
diff --git a/install/web/png/wq-2.png b/install/web/png/wq-2.png
diff --git a/install/web/png/wq.png b/install/web/png/wq.png
diff --git a/install/web/png/wqb.png b/install/web/png/wqb.png
diff --git a/install/web/png/wqw.png b/install/web/png/wqw.png
diff --git a/install/web/png/wqy.png b/install/web/png/wqy.png
diff --git a/install/web/png/wr.png b/install/web/png/wr.png
diff --git a/install/web/png/wrb.png b/install/web/png/wrb.png
diff --git a/install/web/png/wrw.png b/install/web/png/wrw.png
diff --git a/install/web/png/wry.png b/install/web/png/wry.png
diff --git a/install/web/png/y.png b/install/web/png/y.png
diff --git a/install/web/publish-v1.01.js → install/web/publish-v1.03.js b/install/web/publish-v1.01.js → install/web/publish-v1.03.js
@@ -10,10 +10,13 @@ function setPlayPauseImage()
 {        
     if( gblFramedDiagram >= 0 )
     {
+        var mvParameters = gblCurrentMove.attr('rel');
+        var arr = mvParameters.split(' ');
+        var nextMove = parseInt(arr[4],10);
         if( gblPlaying )
-            document.images[(gblFramedDiagram+1)*64 + 4].src  = 'png/mpause.png';
+            document.images[(gblFramedDiagram+1)*64 + 4].src  = nextMove==-1?'png/blank.png':'png/mpause.png';
         else
-            document.images[(gblFramedDiagram+1)*64 + 4].src  = 'png/mplay.png';
+            document.images[(gblFramedDiagram+1)*64 + 4].src  = nextMove==-1?'png/blank.png':'png/mplay.png';
     }
 }
 
@@ -52,20 +55,26 @@ function changeFrame( diagNbr )
         var diagNbr2 = parseInt(arr2[1],10);
         pos(posn2,diagNbr2,'b','Moves are clickable');
     }
+
+    var mvParameters = gblCurrentMove.attr('rel');
+    var arr = mvParameters.split(' ');
+    var prevMove = parseInt(arr[3],10);
+    var nextMove = parseInt(arr[4],10);
+
 
     // Frame this diagram
     gblFramedDiagram = diagNbr;
     var buttonsClass = '#buttons' + gblFramedDiagram;
     ////console.log(buttonsClass);
     $(buttonsClass).addClass('locateButtons');
     $(buttonsClass).append("<img class='exit' src='png/exit.png' alt=''>"+
-                            "<img class='backward' src='png/mback.png' alt=''>"+
+                            "<img class='backward' src=" + (prevMove==-1 ? "'png/blank.png'" : "'png/mback.png'") + " alt=''>"+
                             "<img class='rover' src='png/blank.png' alt=''>"+
                             "<img src='png/blank.png' alt=''>"+
-                            "<img class='play' src='png/" + (gblPlaying?"mpause.png":"mplay.png") + " ' alt=''>"+
+                            "<img class='play' src=" + (nextMove==-1 ? "'png/blank.png'" : (gblPlaying?"'png/mpause.png'":"'png/mplay.png'")) + " ' alt=''>"+
                             "<img src='png/blank.png' alt=''>"+
                             "<img src='png/blank.png' alt=''>"+
-                            "<img class='forward' src='png/mforward.png' alt=''><br>");
+                            "<img class='forward' src=" + (nextMove==-1 ? "'png/blank.png'" : "'png/mforward.png'") + " alt=''><br>");
     //$(buttonsClass).scrollIntoView(true);
 
     // Attach a function to the forward button
@@ -88,7 +97,9 @@ function changeFrameAndScroll(fromPosn,fromMoveTxt,fromInitialPosition)
     var diagNbr = parseInt(arr[0],10);
     var posn = arr[1];
     var moveTxt = arr[2];                     
-    var animationElement = $($.browser.webkit?'body':'html');   // webkit vs mozilla/ie  only works on JQuery < 1.9
+    var animationElement = $("html, body"); // Nice html/body trick from Stackoverflow
+	// var animationElement = $($.browser.webkit?'body':'html'); // old version - has stopped working with modern Chrome?
+	//	webkit vs mozilla/ie  only works on JQuery < 1.9, for Chrome we want 'html' for Firefox 'body'
     var topOffset =  animationElement.scrollTop();
     var buttonOffset = gblFramedDiagram>=0 ? $(".forward").offset().top : 0;
 
@@ -168,16 +179,17 @@ function cbAnimateMove()
             var dstRank = hexDstRank-0x31;
             var srcFile = hexSrcFile-0x61;
             var srcRank = hexSrcRank-0x31;
-            var srcTop  = 33 + 24*srcRank;
-            var srcLeft = -49 + 24*srcFile;
-            var dstTop  = 33 + 24*dstRank;
-            var dstLeft = -49 + 24*dstFile;
+            var srcTop  = 45 + 36*srcRank;
+            var srcLeft = -73 + 36*srcFile;
+            var dstTop  = 45 + 36*dstRank;
+            var dstLeft = -73 + 36*dstFile;
             var strSrcTop  = '-' + srcTop + 'px';
             var strSrcLeft = '' + srcLeft + 'px';
             var strDstTop  = '-' + dstTop + 'px';
             var strDstLeft = '' + dstLeft + 'px';
             var w;
             var i = (7-srcRank)*8 + srcFile; 
+
             if( i<8 || (16<=i && i<24) || (32<=i && i<40)|| (48<=i && i<56) )
                 w = ((i&1)==0);
             else
@@ -228,10 +240,20 @@ function cbShowMoveAfterAnimation()
     var posn = arr[1];
     var moveTxt = arr[2];
     var prevMove = parseInt(arr[3],10);
+    var nextMove = parseInt(arr[4],10);
     var desc = 'Position after ' + moveTxt;
     if( prevMove==-1 ) //&& posn=='ahff32FFAH' )
         desc = '  Initial position';
     pos( posn, diagNbr, 'y', desc );
+
+    // Show forward back buttons only if apprpriate
+    document.images[(gblFramedDiagram+1)*64 + 1].src  = (prevMove==-1 ? 'png/blank.png' : 'png/mback.png');
+    document.images[(gblFramedDiagram+1)*64 + 7].src  = (nextMove==-1 ? 'png/blank.png' : 'png/mforward.png');
+
+    // Clear the roving image - fixes the long-standing promotion bug
+    document.images[(gblFramedDiagram+1)*64 + 2].src  = 'png/blank.png';
+    $(".rover").css( 'top',  '0px'  );
+    $(".rover").css( 'left', '0px' );
     setPlayPauseImage();
     if( gblPlaying )
     {
@@ -424,6 +446,32 @@ $(function(){
     $('.variation').click(function(){
         doMove( $(this) );
     });
+	$(document).keydown(function(e) {
+		switch(e.which) {
+			case 37: // left
+			if( gblFramedDiagram >= 0 )
+			{
+				backwardMovePressed();
+			}
+			break;
+
+			//case 38: // up
+			//break;
+
+			case 39: // right
+			if( gblFramedDiagram >= 0 )
+			{
+				forwardMovePressed();
+			}
+			break;
+
+			//case 40: // down
+			//break;
+
+			default: return; // exit this handler for other keys
+		}
+		e.preventDefault(); // prevent the default action (scroll / move caret)
+	});
 });
 
 function expandPosition( str )

diff --git a/install/web/readme.txt b/install/web/readme.txt
@@ -10,6 +10,10 @@ very obscure (but nice and simple) tool called "Poole" to publish the
 tournament reports for my local club. For example output see
 http://www.nzchessmag.com/wellingtonchessclub/2015-mazur-g.html.
 
+A similar, but more recent example, with some refined javascript
+(eg arrow keys supported, and onscreen arrows are more dynamic)
+http://newzealandchess.co.nz/nzchessmag/interactive/1979-12.html
+
 My approach to interactive chess content is different to most (as far as
 I know it is unique). My basic idea is to make the output look like a
 chess book, but when users click on moves the diagrams in the chess book
@@ -35,4 +39,4 @@ Finally, note that you need to include at least one diagram in each game
 for my web publishing system to work. Indicate a diagram with comment
 text "#Diagram" at appropriate points in the .pgn. Good luck!
 
-Bill Forster 2015-12-11
+Bill Forster 2015-12-11, updated 2019-01-14