Fix piece flickering/duplication issues

js/chessboard.js

@@ -186,6 +186,7 @@ function objToFen(obj) {
 }
 
 window['ChessBoard'] = window['ChessBoard'] || function(containerElOrId, cfg) {
+'use strict';
 
 cfg = cfg || {};
 
@@ -637,18 +638,45 @@ function buildBoard(orientation) {
   return html;
 }
 
-function buildPieceImgSrc(piece) {
-  if (typeof cfg.pieceTheme === 'function') {
-    return cfg.pieceTheme(piece);
+var imgCache = {}
+function cacheImages() {
+  var pieces = ['wK', 'wQ', 'wR', 'wB', 'wN', 'wP', 'bK', 'bQ', 'bR', 'bB', 'bN', 'bP'];
+  pieces.forEach(function(piece) {
+    var img = new Image()
+    img.onload = function() {
+      imgCache[piece] = getBase64Image(img)
+    }
+    img.src = buildPieceImgSrc(piece)
+  })
+
+  function getBase64Image(img) {
+    var canvas = document.createElement("canvas");
+    canvas.width = img.width;
+    canvas.height = img.height;
+    var ctx = canvas.getContext("2d");
+    ctx.drawImage(img, 0, 0);
+    var dataURL = canvas.toDataURL("image/png");
+    return dataURL;
   }
+}
 
-  if (typeof cfg.pieceTheme === 'string') {
-    return cfg.pieceTheme.replace(/{piece}/g, piece);
-  }
+function buildPieceImgSrc(piece) {
+  if(imgCache[piece]) return imgCache[piece]
+  else return getUrl(piece)
 
-  // NOTE: this should never happen
-  error(8272, 'Unable to build image source for cfg.pieceTheme.');
-  return '';
+  function getUrl(piece) {
+    if (typeof cfg.pieceTheme === 'function') {
+      return cfg.pieceTheme(piece);
+    }
+
+    if (typeof cfg.pieceTheme === 'string') {
+      return cfg.pieceTheme.replace(/{piece}/g, piece);
+    }
+
+    // NOTE: this should never happen
+    error(8272, 'Unable to build image source for cfg.pieceTheme.');
+    return '';
+  }
 }
 
 function buildPiece(piece, hidden, id) {
@@ -772,10 +800,6 @@ function animateSparePieceToSquare(piece, dest, completeFn) {
 
 // execute an array of animations
 function doAnimations(a, oldPos, newPos) {
-  if (a.length === 0) {
-    return;
-  }
-
   ANIMATION_HAPPENING = true;
 
   var numFinished = 0;
@@ -974,7 +998,7 @@ function drawPositionInstant() {
   // add the pieces
   for (var i in CURRENT_POSITION) {
     if (CURRENT_POSITION.hasOwnProperty(i) !== true) continue;
-
+      if (DRAGGING_A_PIECE && DRAGGED_PIECE_SOURCE == i) continue;
     $('#' + SQUARE_ELS_IDS[i]).append(buildPiece(CURRENT_POSITION[i]));
   }
 }
@@ -1298,6 +1322,17 @@ widget.clear = function(useAnimation) {
   widget.position({}, useAnimation);
 };
 
+/*
+// get or set config properties
+// TODO: write this, GitHub Issue #1
+widget.config = function(arg1, arg2) {
+  // get the current config
+  if (arguments.length === 0) {
+    return deepCopy(cfg);
+  }
+};
+*/
+
 // remove the widget from the page
 widget.destroy = function() {
   // remove markup
@@ -1324,7 +1359,7 @@ widget.highlight = function() {
 
 };
 */
-
+widget.cache = cacheImages
 // move pieces
 widget.move = function() {
   // no need to throw an error here; just do nothing
@@ -1664,6 +1699,7 @@ function initDom() {
   createElIds();
 
   // build board and save it in memory
+  cacheImages();
   containerEl.html(buildBoardContainer());
   boardEl = containerEl.find('.' + CSS.board);