piece movement exploration

matthewdhull · Dec 4, 2020 · 9c2f595 · 9c2f595
1 parent 44f5efe
commit 9c2f595
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/board.html b/board.html
@@ -4,15 +4,31 @@
   <meta charset="utf-8">
   <link rel="shortcut icon" href="">
   <style>
+
+	 body {
+		 display: grid;
+	 }
+
 	  * {
 		  font-family: sans-serif;
 	  }
 	 svg g text {
 		 font-size: 9pt;
 	 }
+
+	 svg {
+	 	/*place svg element above button */
+		 grid-row-start: 1; 
+	 }
+	 button {
+		 width: 50px;
+	 }
+
+
   </style>
  </head>
 <body>
+<button id="start">Move</button>    
 <script src="pieces.js"></script> 
 <script src="lib/d3/d3.min.js"></script>
 <script>
@@ -192,7 +208,16 @@
 		.attr("d", function(d){
 			return start_positions[d].path
 		})
-
+
+	// piece movement
+		d3.select("#start").on("click", function() {
+			var newPosition = positions["E4"]
+			d3.select("#wkp")
+				.transition()
+				.attr("transform", "translate("+(newPosition[0]-25)+","+
+  			(newPosition[1]-24)+")")
+  			start_positions["wkp"].position["E4"]
+		});	
+
     </script>
-    <div id="positionDisplay">(Hover) Position:</div>
 </body>
diff --git a/pieces.js b/pieces.js
@@ -28,96 +28,112 @@ pawn_path = "M35,41.18l-1.88-1.49a.47.47,0,0,1-.16-.36V38.1a.44.44,0,0,0-.2-.38L
 start_positions = {
 					"wqr":{
 						"path": rook_path
+						, "name": "white's queen rook"
 						, "position": "A1"
 						, "fill": white_piece_fill
 						, "stroke": white_piece_stroke
 						}
 					,"wkr":{
 						"path": rook_path
+						, "name": "white's king rook"						
 						, "position": "H1"						
 						, "fill": white_piece_fill
 						, "stroke": white_piece_stroke
 					}
 					,"wqn":{
 						"path": knight_path
+						, "name": "white's queen knight"						
 						, "position": "B1"						
 						, "fill": white_piece_fill
 						, "stroke": white_piece_stroke
 					}
 					,"wkn":{
 						"path": knight_path
 						, "position": "G1"						
+						, "name": "white's king knight"												
 						, "fill": white_piece_fill
 						, "stroke": white_piece_stroke
 					}
 					,"wqb":{
 						"path": bishop_path
+						, "name": "white's queen bishop"						
 						, "position": "C1"						
 						, "fill": white_piece_fill
 						, "stroke": white_piece_stroke
 					}
 					,"wkb":{
 						"path": bishop_path
+						, "name": "white's king bishop"						
 						, "position": "F1"						
 						, "fill": white_piece_fill
 						, "stroke": white_piece_stroke
 					}
 					,"wq":{
 						"path": queen_path
+						, "name": "white's queen"						
 						, "position": "D1"						
 						, "fill": white_piece_fill
 						, "stroke": white_piece_stroke
 					}	
 					,"wk":{
 						"path": king_path
+						, "name": "white's king"						
 						, "position": "E1"						
 						, "fill": white_piece_fill
 						, "stroke": white_piece_stroke
 					}
 					,"wqrp":{
 						"path": pawn_path
+						, "name": "white's queen rook pawn"						
 						, "position": "A2"						
 						, "fill": white_piece_fill
 						, "stroke": white_piece_stroke
 					}																									
 					,"wqnp":{
 						"path": pawn_path
+						, "name": "white's queen knight pawn"						
 						, "position": "B2"						
 						, "fill": white_piece_fill
 						, "stroke": white_piece_stroke
 					}
 					,"wqbp":{
 						"path": pawn_path
+						, "name": "white's queen bishop pawn"						
 						, "position": "C2"						
 						, "fill": white_piece_fill
 						, "stroke": white_piece_stroke
 					}	
 					,"wqp":{
 						"path": pawn_path
+						, "name": "white's queen pawn"						
 						, "position": "D2"						
 						, "fill": white_piece_fill
 						, "stroke": white_piece_stroke
 					}	
 					,"wkp":{
 						"path": pawn_path
+						, "name": "white's kings pawn"						
 						, "position": "E2"						
 						, "fill": white_piece_fill
 						, "stroke": white_piece_stroke
 					}
 					,"wkbp":{
 						"path": pawn_path
+						, "name": "white's king bishop pawn"						
 						, "position": "F2"						
 						, "fill": white_piece_fill
 						, "stroke": white_piece_stroke
 					}		
 					,"wknp":{
 						"path": pawn_path
+						, "name": "white's king knight pawn"						
 						, "position": "G2"						
 						, "fill": white_piece_fill
 						, "stroke": white_piece_stroke
 					}				
 					,"wkrp":{
 						"path": pawn_path
+						, "name": "white's king rook pawn"												
 						, "position": "H2"						
 						, "fill": white_piece_fill
 						, "stroke": white_piece_stroke