title: Creating a Javascript Chess game
body: <p>What I am trying to do is create a simple browser-based chess game (no persistent save or LAN based functionality. Just being able to move peices on a screen according to how the pieces are suppose to move (pawn forward and capturing diagonally for example). Currently, I can display the board and have the browser recognizing when I click somewhere on the board, but I am stuck at trying to get pieces to update their position. </p>
  
  <pre><code>"use strict";
  
  function display(B){
      for(var i=0;i&lt;B.numrows;++i){
          for(var j=0;j&lt;B.numcols;++j){
              while(cells[i][j].firstChild)
                  cells[i][j].removeChild(cells[i][j].firstChild);
  
              var X = B.get(i,j);
              if( X !== undefined ){
                  cells[i][j].appendChild( X.getImage() );
              }
          }
      }
      var tmp = ["White's turn",
          "Black's turn",];
      document.getElementById("status").innerHTML=tmp[turn];
  }
  
  function mklistener(B,ii,jj){
      return function(){
          for(var i=0;i&lt;B.numrows;++i){
              for(var j=0;j&lt;B.numcols;++j){
                  cells[i][j].classList.remove("highlight");
                  cells[i][j].classList.remove("highlight_current");
              }
          }
  
          if( currpiece &amp;&amp; currpiece.canMoveTo(ii,jj) ){
              B.remove(currpiece.row,currpiece.col);
              B.remove(ii,jj);
              B.set(ii,jj,currpiece);
              currpiece = undefined;
              turn=(turn+1)%numplayers;
              display(B);
              return;
          }
  
          var p = B.get(ii,jj);
          if( p === undefined ){
              return;
          }
  
          if( p.color !== turnletters[turn] )
              return;
  
          currpiece = p;
          cells[ii][jj].classList.add("highlight_current");
          var m = p.getPossibleMoves(B);
          m.forEach(function(t){
              var r = t[0];
              var c = t[1];
              if( !cells[r] || !cells[r][c] ){
                  console.log(r,c);
              }
              else{
                  cells[r][c].classList.add("highlight");
              }
          });
  
      };
  }
  var numplayers = 4;
  var turnletters = "wgbl";
  
  
  
  var cells=[];
  var currpiece = undefined;
  var turn=0;
  var upsidedown=true;
  
  //B.dump({});
  function manufacture(B,desc,initialhighlight){
      var tbl = document.createElement("table");
      tbl.className = "chessboard";
      for(var i=0;i&lt;B.numrows;++i){
          cells.push([]);
      }
  
      var IH={}
      if( initialhighlight ){
          initialhighlight.forEach( function(x){
              IH[ x[0]+","+x[1] ] = 1;
          });
      }
  
      for(var i=0;i&lt;B.numrows;++i){
          var rr = upsidedown ? (B.numrows-i-1) : i;
  
          var tr = document.createElement("tr");
          tbl.appendChild(tr);
          for(var j=0;j&lt;B.numcols;++j){
              var klass;
  
              if( IH[ rr+","+j ] ){
                  if( (i^j) % 2 !== 0)
                      klass = "highlight_black";
                  else
                      klass = "highlight_white";
              }
              else if( !B.contains(rr,j) )
                  klass = "invalid";
              else if( (i^j) % 2 !== 0){
                  klass='black';
              }
              else{
                  klass='white'
              }
              var td = document.createElement("td");
              td.id="td_"+i+"_"+j;
              td.className=klass;
  
              td.addEventListener("click", mklistener(
                  rr,
                  j,td) );
              tr.appendChild(td);
              cells[rr][j] = td;
          }
      }
  
      var div = document.createElement("div");
      var title = document.createElement("h3");
      title.appendChild(document.createTextNode(desc));
      div.appendChild(title);
      div.appendChild(tbl);
      div.appendChild(document.createElement("hr"));
      document.getElementById("main").appendChild(div);
      display(B);
  }
  
  function main(){
      var B = new TraditionalBoard();
      manufacture(B,"Traditional");
  
      //document.getElementById("main").appendChild(document.createElement("hr"));
  
      //moves
      var ap = [
          Pawn,
          Rook,
          Bishop,
          Knight,
          Queen,
          King,
      ]
  
      ap.forEach(function(F){
          var p = new F("w");
          var B = new EmptyBoard();
          B.set(4,4,p);
          if( p.name === "Unicorn" ){
              manufacture(B,p.name+" (first move; cannot capture)",p.getPossibleMoves());
              B.remove(4,4);
              B.set(4,3,p);
              manufacture(B,p.name+" (subsequent moves)",p.getPossibleMoves());
          }
          else
              manufacture(B,p.name,p.getPossibleMoves());
      });
  
  }
  main();
  </code></pre>
  
  <p>I am trying to do the logic for how the pieces move in its own file:</p>
  
  <pre><code>"use strict";
  
  function Piece(color,letter){
      this.row=undefined;
      this.col=undefined;
      this.color=color;
      this.moved=false;   //true when it's been moved. Useful for castling.
      this.originalPosition = undefined;
      this.letter = letter;   //'P', 'N', 'Q', 'R', etc.
      this.owningBoard = undefined;
  }
  
  Piece.prototype.getImage = function(){
      var img = document.createElement("img");
      img.src = "pix/"+this.color+"-"+this.letter+".png";
      return img;
  }
  
  /**Determine if this piece can move to a given location.
   * @param r The destination row
   * @param c The destination column.
   * @return true or false
   */
  Piece.prototype.canMoveTo = function(r,c){
      //see where we could possibly move to
      var possible = this.getPossibleMoves(this.owningBoard);
  
      //see if r,c is in the list of possible moves.
      for(var i=0;i&lt;possible.length;++i){
          if( possible[i][0] === r &amp;&amp; possible[i][1] === c )
              return true;
      }
      return false;
  }
  </code></pre>
  
  <p>Yes, I am aware that this is not the most elegant display of coding prowess, but I think the route I am taking will work. Any input would help. :) </p>