bfl-itp · moneppo · Sep 11, 2014 · Sep 17, 2014 · Sep 17, 2014 · Sep 17, 2014
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -35,11 +35,23 @@ module.exports = function(grunt) {
           '!node_modules/**/*'
         ]
       }
+    },
+    'http-server': {
+      'dev': {
+        root: '.',
+        port: 3000,
+        host: "127.0.0.1",
+        cache: 1,
+        showDir : true,
+        autoIndex: true,
+        ext: "html"
+      }
     }
   });
 
   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-html-validation');
+  grunt.loadNpmTasks('grunt-http-server');
 
   grunt.registerTask('default', ['jshint', 'validation']);
 };
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/arm.jpeg b/images/arm.jpeg
diff --git a/images/head.jpeg b/images/head.jpeg
diff --git a/images/img-1all.jpeg b/images/img-1all.jpeg
diff --git a/images/img-1none.jpeg b/images/img-1none.jpeg
diff --git a/images/img-2all.jpeg b/images/img-2all.jpeg
diff --git a/images/img-2none.jpeg b/images/img-2none.jpeg
diff --git a/images/img0-1.png b/images/img0-1.png
diff --git a/images/img0-2.png b/images/img0-2.png
diff --git a/images/img00.png b/images/img00.png
diff --git a/images/img01.png b/images/img01.png
diff --git a/images/img02.png b/images/img02.png
diff --git a/images/img0all.jpeg b/images/img0all.jpeg
diff --git a/images/img0none.jpeg b/images/img0none.jpeg
diff --git a/images/img1-1.png b/images/img1-1.png
diff --git a/images/img1-2.png b/images/img1-2.png
diff --git a/images/img10.png b/images/img10.png
diff --git a/images/img11.png b/images/img11.png
diff --git a/images/img12.png b/images/img12.png
diff --git a/images/img1all.jpeg b/images/img1all.jpeg
diff --git a/images/img1none.jpeg b/images/img1none.jpeg
diff --git a/images/img2-1.png b/images/img2-1.png
diff --git a/images/img2-2.png b/images/img2-2.png
diff --git a/images/img20.png b/images/img20.png
diff --git a/images/img21.png b/images/img21.png
diff --git a/images/img22.png b/images/img22.png
diff --git a/images/img2all.jpeg b/images/img2all.jpeg
diff --git a/images/img2none.jpeg b/images/img2none.jpeg
diff --git a/images/img3-1.png b/images/img3-1.png
diff --git a/images/img3-2.png b/images/img3-2.png
diff --git a/images/img30.png b/images/img30.png
diff --git a/images/img31.png b/images/img31.png
diff --git a/images/img32.png b/images/img32.png
diff --git a/images/img4-1.png b/images/img4-1.png
diff --git a/images/img4-2.png b/images/img4-2.png
diff --git a/images/img40.png b/images/img40.png
diff --git a/images/img41.png b/images/img41.png
diff --git a/images/img42.png b/images/img42.png
diff --git a/images/leg.jpeg b/images/leg.jpeg
diff --git a/images/pixlr0.pxd b/images/pixlr0.pxd
diff --git a/images/pxlr-1.pxd b/images/pxlr-1.pxd
diff --git a/images/pxlr1.pxd b/images/pxlr1.pxd
diff --git a/images/pxlr2.pxd b/images/pxlr2.pxd
diff --git a/index copy.html b/index copy.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>moneppo's Instructional Assignment</title>
+    <link rel="stylesheet" type="text/css" href="main.css">
+  </head>
+  <body>
+    <canvas id="canvas" width="400" height="400"></canvas>
+    <img class="part head" src="images/head.jpeg"></img>
+    <img class="part arm" src="images/arm.jpeg"></img>
+    <img class="part arm" src="images/arm.jpeg"></img>
+    <img class="part leg" src="images/leg.jpeg"></img>
+    <img class="part leg" src="images/leg.jpeg"></img>
+    <script src="zepto.min.js"></script>
+    <script src="zepto.dragdrop.min.js"></script>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -1,9 +1,18 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>So-and-so's Instructional Assignment</title>
+    <title>moneppo's Instructional Assignment</title>
+    <link rel="stylesheet" type="text/css" href="main.css">
   </head>
   <body>
-    YOUR CODE HERE
+    <canvas id="canvas" width="400" height="400"></canvas>
+    <img class="part head" src="images/head.jpeg"></img>
+    <img class="part arm" src="images/arm.jpeg"></img>
+    <img class="part arm" src="images/arm.jpeg"></img>
+    <img class="part leg" src="images/leg.jpeg"></img>
+    <img class="part leg" src="images/leg.jpeg"></img>
+    <script src="zepto.js"></script>
+    <script src="zepto.dragdrop.js"></script>
+    <script src="index.js"></script>
   </body>
 </html>
diff --git a/index.js b/index.js
@@ -0,0 +1,106 @@
+Zepto(function($){
+	var $canvas = $('#canvas');
+	var $parts = $('.part');
+	var ctx = $canvas[0].getContext('2d');
+
+	var none = [];
+	var parts = [];
+
+	var attached = [false,false,false,false,false];
+
+	var bucket = 0;
+	function draw() {
+		ctx.drawImage(none[bucket], 0, 0);
+		for (var i = 0; i < attached.length;i++) {
+			if (attached[i]) {
+				ctx.drawImage(parts[i][bucket], 0,0);
+			}
+		}
+	}
+
+	function mouseMove(e) {
+		var x = (e.pageX - $canvas.offset().left) / $canvas.width();
+		bucket = Math.floor(x * 5) - 2;
+		if (bucket < -2) bucket = -2;
+		if (bucket > 2) bucket = 2;
+		draw();
+	}
+
+	function loadImages(update, then) {
+		var count = 0;
+		var totalImages = 30;
+
+		function imageLoaded() {
+			count++;
+			update(count / totalImages);
+			if (count == totalImages) {
+				then();
+			}
+		}
+
+		// Load backgrounds
+		for (var p = -2; p <= 2; p++) {
+			var filename = 'images/img' + p + 'none.jpeg';
+			var img = new Image();
+		  none[p] = img;
+		  img.onload = imageLoaded;
+		  img.src = filename;
+		}
+
+		for (var i = 0; i < 5; i++) {
+			parts[i] = [];
+			for (var p = -2; p <= 2; p++) {
+				var filename = 'images/img' + i + p + '.png';
+				var img = new Image();
+			  parts[i][p] = img;
+			  img.onload = imageLoaded;
+			  img.src = filename;
+			}
+		}
+	}
+
+	loadImages(
+		function(amount) {
+
+	  },
+	  function() {
+	  	$canvas.on('mousemove', mouseMove);
+	  	draw();
+
+	  	 $parts.draggable({
+        start: function () {
+          this.css('-webkit-transform', 'scale(2)');
+        },
+        stop: function () {
+          this.css('-webkit-transform', 'scale(1)');
+        }
+      });
+
+      $canvas.droppable({
+        drop: function (e, dragEl, dropEl) {
+        	if(dragEl.hasClass('head')) {
+          	attached[0] = true;
+        	}
+
+        	if(dragEl.hasClass('arm')) {
+        		if (attached[1]) {
+          		attached[2] = true;
+          	} else attached[1] = true;
+        	}
+
+        	if(dragEl.hasClass('leg')) {
+        		if (attached[3]) {
+          		attached[4] = true;
+          	} else attached[3] = true;
+        	}
+
+        	dragEl.hide();
+          draw();
+
+          return true;
+        }
+      });
+	  }
+	);
+});
+
diff --git a/main.css b/main.css
@@ -0,0 +1,17 @@
+#canvas {
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 5%;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    width: 400px;
+}
+
+body {
+	background-color: #AAA;
+}
+
+.part {
+	float: left;
+}
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
   "devDependencies": {
     "grunt": "^0.4.4",
     "grunt-contrib-jshint": "^0.10.0",
-    "grunt-html-validation": "^0.1.15"
+    "grunt-html-validation": "^0.1.15",
+    "grunt-http-server": "~1.0.0"
   }
 }