Introduced the ability to view the movement of more types of pieces.

main.js

@@ -48,7 +48,7 @@ $(document).ready(function() {
     $("." + square).find(".txt").html(" ");
   };
 
-  var tagSquare = (x, y, val, steps) => {
+  var tagSquare = (type, x, y, val, steps, color=0) => {
     var sq = null;
     if (x >= 0 && x < 8 && y >= 0 && y < 8) {
       sq = board[x][y];
@@ -62,63 +62,106 @@ $(document).ready(function() {
         $("." + sq).addClass("heat-" + val);
         tagged[sq] = val;
         if (steps > 0) {
-          return {x: x, y: y, val: ++val, steps: --steps};
+          return {type: type, x: x, y: y, val: ++val, steps: --steps, color: color};
         }
       }
     }
   }
 
-  var renderPath = (x, y, val, steps) => {
+  var renderPath = (type, x, y, val, steps, color=0) => {
     var next = [];
+    var move = 7;
 
-    // knight!
-    next.push(tagSquare(x+1,y-2,val,steps));
-    next.push(tagSquare(x+1,y+2,val,steps));
-    next.push(tagSquare(x-1,y-2,val,steps));
-    next.push(tagSquare(x-1,y+2,val,steps));
-    next.push(tagSquare(x+2,y-1,val,steps));
-    next.push(tagSquare(x+2,y+1,val,steps));
-    next.push(tagSquare(x-2,y-1,val,steps));
-    next.push(tagSquare(x-2,y+1,val,steps));
-
-    next.forEach((sq) => {
-      if (sq) renderPath(sq.x, sq.y, sq.val, sq.steps);
+    if ('K'.includes(type)) { // if type is a King
+      move = 1;
+    }
+    if ('N'.includes(type)) { // if type is a Knight
+      next.push(tagSquare(type,x+1,y-2,val,steps,color=color));
+      next.push(tagSquare(type,x+1,y+2,val,steps,color=color));
+      next.push(tagSquare(type,x-1,y-2,val,steps,color=color));
+      next.push(tagSquare(type,x-1,y+2,val,steps,color=color));
+      next.push(tagSquare(type,x+2,y-1,val,steps,color=color));
+      next.push(tagSquare(type,x+2,y+1,val,steps,color=color));
+      next.push(tagSquare(type,x-2,y-1,val,steps,color=color));
+      next.push(tagSquare(type,x-2,y+1,val,steps,color=color));
+    }
+    if ('KBQ'.includes(type)) { // if type is a King, Bishop, or Queen
+      for (var i=1; i<=move; i++) { // push diagonals
+        next.push(tagSquare(type,x-i,y-i,val,steps,color=color));
+        next.push(tagSquare(type,x+i,y+i,val,steps,color=color));
+        next.push(tagSquare(type,x-i,y+i,val,steps,color=color));
+        next.push(tagSquare(type,x+i,y-i,val,steps,color=color));
+      }
+    }
+    if ('KRQ'.includes(type)) { // if type is a King, Rook or Queen
+      for (var i=1; i<=move; i++) { // push files and colomns
+        next.push(tagSquare(type,x,y-i,val,steps,color=color));
+        next.push(tagSquare(type,x,y+i,val,steps,color=color));
+        next.push(tagSquare(type,x-i,y,val,steps,color=color));
+        next.push(tagSquare(type,x+i,y,val,steps,color=color));
+      }
+    }
+    if ('P'.includes(type)) { // if type is a Pawn
+      if (color == 0) { // if white
+        move = 1
+        if (x > 5) { // on the first movement
+          move = 2 // allow double movement
+
+          next.push(tagSquare(type,x-1,y,val,steps,color=color));  // Puts a 1 directly in front of pawn.
+        }
+      } else if (color == 1) { // if black
+        move = -1
+          if (x < 2) { // on the first movement
+            move = -2 // allow double movement
+
+            next.push(tagSquare(type,x+1,y,val,steps,color=color)); // Puts a 1 directly in front of pawn.
+          }
+      }
+
+      next.push(tagSquare(type,x-move,y,val,steps,color=color)); // Follows the double-step line.
+    }
+
+    next.forEach((sq) => { // Recursively calls renderPath if there are viable squares in next to move to.
+      if (sq) renderPath(sq.type, sq.x, sq.y, sq.val, sq.steps, color=sq.color);
     });
   }
 
-  function refresh(sq) {
+  function refresh(type, sq, color=0) { //Change color here. 0 for white 1 for black. Useful for pawns.
     console.log('REFRESH', sq);
     currentPos = sq;
     initBoard();
-    initPiece('N', sq);
+    initPiece(type, sq);
     var pos = index[sq];
     var x = pos[0];
     var y = pos[1];
-    renderPath(x, y, 1, 5);
+    renderPath(type, x, y, 1, 6, color=color);
+    var sprite = ['-', 'K', 'Q', 'B', 'N', 'R', 'P'].indexOf(type) + color * 6
+    $('.piece').css("background-image", "url('img/sprites_" + sprite.toString().padStart(2, '0') + ".png')");
     $("." + sq).find(".txt").addClass("hide").html("&nbsp;");
     console.log(tagged);
   }
 
-  function toggleBlock(sq) {
+  function toggleBlock(type, sq) {
     if (blocked[sq]) {
       blocked[sq] = false;
     } else {
       blocked[sq] = true;
     }
     console.log("BLOCKED", blocked);
-    refresh(currentPos);
+    refresh(type, currentPos);
   }
 
   function clickHandler(event) {
+    var type = 'N' // Change pieces here 'K', 'Q', 'B', 'N', 'R', and 'P' are supported.
     var target = $(event.currentTarget);
     var id = target.find(".identifier").text();
     if (event.which == 1) {
-      refresh(id);
+      refresh(type, id);
     } else {
       event.preventDefault();
-      toggleBlock(id);
+      toggleBlock(type, id);
     }
   }
 
-  refresh('g1');
+  refresh('N', 'g1');
 });

styles.css

@@ -76,6 +76,7 @@ body {
   opacity: 1;
 }
 
+.heat-7 { background-color: rgb(90, 0, 0) !important; }
 .heat-6 { background-color: rgb(150, 0, 0) !important; }
 .heat-5 { background-color: rgb(255, 50, 0) !important; }
 .heat-4 { background-color: rgb(255, 150, 0) !important; }