add textures to disks

js/iHanoiFunctions.js

@@ -6,7 +6,7 @@ function inicio (QntityDisks){
 	var w = 330;
 	startOfMove=Date.now();
 	for (var i = 0; i < QntityDisks; i++) {
-		var disk = new Disk(x,y,w,40,colors[i]);
+		var disk = new Disk(x,y,w,40,pat[i+1]);
 		towerA.push(disk);
 		x+=20;  //moves to the right
 		y-=41; //moves up, +1 to separate disks
@@ -47,7 +47,7 @@ function reset (QntityDisks){
 }
 function drawTowers (){
 	context.beginPath();
-	context.fillStyle = pat;
+	context.fillStyle = pat[0];
 	<!-- torre 1 -->
     roundRect(context, 160, 260, 20, 340, 5, pat, false);//ctx, x, y, largura, altura, radius, fill, stroke(T/F)
 

js/start.js

@@ -9,16 +9,35 @@ var acertou=0;
 var optimalSolution;
 		 	//NavyBlue  Lime     Fuchsia   yellow   Orange   LightSteelBlue  red
 var colors = ["#000080","#00FF00", "#FF00FF", "yellow", "#FFA500", "#B0C4DE","red"];
-var start = Date.now(), startOfMove, totalTime, moveTime; //timing vars
-var pat;
+var pat = [], sources = ['imgs/baseText.png', 'imgs/disk1.png', 'imgs/disk2.png', 'imgs/disk3.png',
+              'imgs/disk4.png', 'imgs/disk5.png', 'imgs/disk6.png'];
 
 loadIMGS(nDisks);
 
-function loadIMGS (n){
-	var img = new Image();
-	img.onload = function(){
-		pat = context.createPattern(img, "repeat");
-		inicio(n);
-	};
-	img.src = 'imgs/wood1.jpeg';
+function loadImage(url) {
+    return new Promise((resolve, reject) => {
+      let img = new Image();
+      img.addEventListener('load', e => resolve(img));
+      img.addEventListener('error', () => {
+        reject(new Error(`Failed to load image's URL: ${url}`));
+      });
+      img.src = url;
+    });
+  }
+
+function loadIMGS(n){
+  var allImgs = sources.map(function(path){
+    return loadImage(path)
+  });
+  Promise.all(allImgs).then(function(imgs){
+    for (var i = imgs.length - 1; i >= 0; i--) {
+      if (imgs[i].complete){
+        console.log(imgs[i]);
+      }
+      pat[i] = context.createPattern(imgs[i], "repeat");
+    }
+  }).then(function(){
+      console.log(pat);
+			inicio(n);
+		});
 }