layout of PGN notation, added move indicator

board.html

@@ -28,21 +28,31 @@
 	 }
 
 	 #positionDisplay{
-		 grid-row-start: 3;
-
+		 grid-row-start: 3;		 
 	 }
 
-	 #moves {
-		 grid-row-start: 4;
-		 width: 400px;
-		 line-height: 25px;
-		 overflow-wrap: break-word;
-	 }
 
 	 #selectGame {
 		 grid-row-start: 1;
 		 grid-column-start: 2;
 	 }
+
+
+	 #moves {
+		 display: grid;
+		 grid-template-columns: repeat(2, 85px);  		 
+		 width: 433px;
+		 height: 433px;
+		 line-height: 25px;
+		 overflow: scroll;
+	 }
+
+	 #moves div {
+		 margin: 2px;
+		 padding: 2px;
+	 }
+
+
 
 
   </style>
@@ -52,15 +62,16 @@
 <button id="start">Move</button>
 
 <div id="positionDisplay">(hover) Position:</div>
-<div id="moves"></div>
 
 <div id="selectGame">
 <label for="gameSelect">Select Game:</label>
 <select name="gameSelect" id="gameSelect">
 	<option value="data/kasparovVkarpov.json">Kasparov v. Karpov</option>	
 	<option value="data/fischerVreshevsky.json">Fischer v. Reshevsky</option>
 	<option value="data/bruehlVphilidor.json">Bruehl v. Philidor</option>  
+	<option value="data/brandtleyVmatthew211220.json">Brandtley v. Matthew </option>
 </select>
+<div id="moves"></div>
 </div>
 
 <script src="scripts/pieces.js"></script> 
@@ -276,10 +287,18 @@
 
 		pieces = loadPieces(pieces, aBoard)						
 
-		d3.select("#moves p").remove()
-        d3.select("#moves")       
-        	.append("p")
-        	.text(gameData.moves)	
+		d3.select("#moves").selectAll("div").remove()
+        d3.select("#moves")
+        	.selectAll("div")
+			.data(gameData.moves)        	
+        	.enter()
+        	.append("div")
+			.attr("id", function(d,i){
+				return "move"+i
+			})
+        	.text(function(d,i){
+				return d
+        	})	
 
 		var move = 0		
         var lastMove = gameData.moves.length
@@ -296,6 +315,21 @@
 			var nextPosition = parsedMoves[0][1]
 			var newPosition = positions[nextPosition] //x,y coords
 			d3.select("#start").attr("disabled", "disabled")
+
+
+			// color move squares		
+			d3.select("#move"+move)
+				.transition()
+				.style("background-color", "#c2d8d7")		
+
+			d3.select("#move"+(move-1).toString())
+				.transition()
+				.style("background-color", "white")		
+
+			var scrollMoveToView = document.getElementById("move"+move);
+			scrollMoveToView.scrollIntoView();
+
+
 			d3.select("#"+piece) //animate movement
 				.transition()
 				.attr("transform", "translate("+(newPosition[0]-25)+","+

data/brandtleyVmatthew211220.json

@@ -0,0 +1,94 @@
+{
+    "str": {
+        "Event": "?",
+        "Black": "Matthew",
+        "Date": "Dec 21, 2020",
+        "Result": "1-0",
+        "Round": "?",
+        "Site": "?",
+        "White": "Brandtley"
+    },
+    "moves": [
+        "d4",
+        "Nc6",
+        "d5",
+        "Nf6",
+        "dxc6",
+        "e5",
+        "cxd7+",
+        "Bxd7",
+        "a4",
+        "Bc5",
+        "Ra3",
+        "g5",
+        "Rc3",
+        "Bd4",
+        "Rc4",
+        "O-O",
+        "Rxd4",
+        "exd4",
+        "Bxg5",
+        "Ne4",
+        "Bxd8",
+        "Raxd8",
+        "Na3",
+        "b6",
+        "Qxd4",
+        "Nc5",
+        "b4",
+        "Bf5",
+        "Qa1",
+        "Rd4",
+        "Qxd4",
+        "Nxa4",
+        "f4",
+        "Bxc2",
+        "Nxc2",
+        "Nc5",
+        "bxc5",
+        "bxc5",
+        "Qxc5",
+        "c6",
+        "Qxc6",
+        "f5",
+        "Qb7",
+        "Ra8",
+        "Qxa8+",
+        "Kg7",
+        "Qxa7+",
+        "Kg6",
+        "Nb4",
+        "h6",
+        "Nc6",
+        "h5",
+        "g4",
+        "fxg4",
+        "f5+",
+        "Kf6",
+        "Qa1+",
+        "Kxf5",
+        "Nd4+",
+        "Kg5",
+        "Qa4",
+        "h4",
+        "Qa5+",
+        "Kh6",
+        "Bg2",
+        "h3",
+        "Bc6",
+        "Kg6",
+        "Be8+",
+        "Kh6",
+        "Qa6+",
+        "Kg5",
+        "Ne6+",
+        "Kh4",
+        "Ng7",
+        "g3",
+        "Qf6+",
+        "Kg4",
+        "Bd7#"
+    ],
+    "annotations": [],
+    "nag": []
+}

tests/tests.html

@@ -77,7 +77,6 @@
 	}
 
 
-
 	const kingMoveBoard = {
 		"bk": {"type":"king", "position": "e8"}
 		,"wqp": {"type":"queen", "position": "d7"}
@@ -106,9 +105,9 @@
 
 
 	QUnit.module('parse test', function(){
-		const parseMove0 = moves[0]		
-		QUnit.test('move 0 should be wkp --> e4', function(assert){
-			assert.deepEqual(parseMove(0, parseMove0,board1),[["wkp","e4"]])
+		const parseMove0 = "Rh4"
+		QUnit.test('move 0 should be wkr --> h4', function(assert){
+			assert.deepEqual(parseMove(0, parseMove0,board1),[["wkr","h4"]])
 		});
 	});