stowing UI stuff in empty branchui-mocks

1 files changed, 208 insertions, 0 deletions

diff --git a/assets/javascripts/minimap.js b/assets/javascripts/minimap.js
new file mode 100644
index 0000000..5dca676
--- /dev/null
+++ b/assets/javascripts/minimap.js
@@ -0,0 +1,208 @@
+MX.Minimap = function () {
+	var canvas = document.createElement("canvas")
+	var ctx = canvas.getContext("2d")
+	var w = canvas.width = 200
+	var h = canvas.height = 200
+		
+	var gridSpace;
+	var zoom = 2.7
+	
+	var gridStroke = '#ddd'
+	var boxFill = '#fff'
+	var boxStroke = '#000'
+	var playerColor = '#888'
+
+	var xmin, xmax, ymin, ymax, xpos, ypos, scale, side;
+
+	this.update = function(){
+		this.draw()
+	}
+
+	this.bounds = function(){
+		gridSpace = Math.pow(10, ~~(zoom-0.5)+0.5)
+		side = Math.pow(10, zoom+1)
+		scale = w / side
+		xpos = -cam.x
+		ypos = cam.z
+		
+		xmin = side/-2 - xpos
+		xmax = side/2 - xpos
+		ymin = side/-2 - ypos
+		ymax = side/2 - ypos
+	}
+	
+	this.draw = function(){
+		ctx.clearRect(0,0,w,h)
+
+		ctx.fillStyle = "#fff"
+		ctx.fillRect(0,0,w,h)
+		this.bounds()
+		this.grid()
+		this.boxes()
+		this.player()
+	}
+	
+	this.grid = function(){
+		ctx.strokeStyle = gridStroke
+		ctx.lineWidth = 1
+		ctx.fillStyle = "transparent"
+		
+		var xmod = xmin-(xmin % gridSpace)
+		var ymod = ymin-(ymin % gridSpace)
+		
+ 		for (var x = xmin; x < xmax+gridSpace; x += gridSpace) {
+ 			var xline = (x-xmod) * scale
+			line(xline, 0, xline, h)
+		}
+ 		for (var y = ymin; y < ymax+gridSpace; y += gridSpace) {
+ 			var yline = (y-ymod) * scale
+			line(0, yline, w, yline)
+		}
+		
+		function line(x0,y0,x1,y1) {
+			ctx.beginPath()
+			ctx.moveTo(x0, y0)
+			ctx.lineTo(x1, y1)
+			ctx.stroke()
+		}
+	}
+	this.player = function(){
+		ctx.save()
+		
+ 		ctx.translate(~~(w/2),~~(h/2));
+		ctx.rotate(-cam.rotationY)
+
+		var radius = 5
+
+		ctx.fillStyle = playerColor;
+		
+		ctx.beginPath();
+		ctx.arc(0, 0, radius, 0, 2*Math.PI, false);
+		ctx.fill();
+
+		ctx.beginPath();
+		ctx.moveTo(0,0)
+		ctx.lineTo(-radius,0)
+		ctx.lineTo(0,radius*3)
+		ctx.lineTo(radius,0)
+		ctx.moveTo(0,0)
+		ctx.fill()
+		
+		ctx.fillStyle = "transparent"
+		ctx.restore()
+	}
+	
+	this.boxes = function(){
+
+		ctx.save()
+ 		ctx.translate(~~(w/2),~~(h/2));
+ 		ctx.lineWidth = 0.5
+		var tx = ((-xpos) * scale),
+				ty = ((-ypos) * scale);
+		ctx.translate(tx, ty)
+
+		scene.inner.children.forEach(function(obj){
+			if (obj.type == "Box" || obj.type == "BoxDimensions" || obj.type == "ScaleBox") {
+
+				ctx.save()
+				ctx.fillStyle = obj.color
+				ctx.strokeStyle = "#222"
+				
+				var obj_scale = (obj.scale || 1) * scale
+				var tx = ~~((obj.x) * scale),
+				    ty = ~~((obj.z) * scale);
+				ctx.translate(-tx, ty)
+				ctx.rotate(-obj.rotationY)
+				
+				var ww = ~~(obj.opt.width/2 * obj_scale)
+				var hh = ~~(obj.opt.depth/2 * obj_scale)
+				ctx.beginPath();
+				ctx.moveTo(ww, hh)
+
+				ctx.lineTo(ww, -hh)
+				ctx.lineTo(-ww, -hh)
+				ctx.lineTo(-ww, hh)
+ 				ctx.closePath()
+				ctx.fill()
+				ctx.stroke()
+				ctx.restore()
+			}
+			if (obj.type == "Image" || obj.type == "Video" || obj.type == "Cutout") {
+				ctx.save()
+				ctx.strokeStyle = "#444"
+				
+				var obj_scale = (obj.scale || 1) * scale
+
+				var tx = ~~((obj.x) * scale),
+				    ty = ~~((obj.z) * scale);
+				ctx.translate(-tx, ty)
+				ctx.rotate(-obj.rotationY)
+
+				var ww = ~~(obj.width/2 * obj_scale)
+
+				ctx.beginPath();
+				ctx.moveTo(ww, 0)
+				ctx.lineTo(-ww, 0)
+ 				ctx.closePath()
+				ctx.stroke()
+				ctx.restore()
+			}
+		})
+		ctx.restore()
+	}
+	
+	var dragging = false, mx = 0, my = 0, mdx = 0, mdy = 0, cx, cy;
+	canvas.addEventListener("mousedown", function(e){
+		e.stopPropagation()
+		var rect = canvas.getBoundingClientRect()
+		dragging = true;
+		mx = e.pageX - rect.left
+		my = e.pageY - rect.top
+		mdx = (mx - w/2) / scale
+		mdy = (my - h/2) / scale
+		cx = cam.x // -= mdx
+		cy = cam.z // += mdy
+
+		minimap.update()
+	})
+	document.addEventListener("mousemove", function(e){
+		if (dragging) {
+			e.stopPropagation()
+			var rect = canvas.getBoundingClientRect()
+			var mnx = e.pageX - rect.left
+			var mny = e.pageY - rect.top
+			mdx = (mnx - mx) / scale
+			mdy = (mny - my) / scale
+			
+			cam.x = cx + mdx
+			cam.z = cy - mdy
+			minimap.update()
+		}
+	})
+	document.addEventListener("mouseup", function(e){
+		dragging = false;
+	})
+
+	canvas.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
+  canvas.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);
+	function onDocumentMouseWheel (e) {
+		// WebKit
+		if ( event.wheelDeltaY ) {
+			zoom -= event.wheelDeltaY * 0.0003;
+		}
+		// Opera / Explorer 9
+		else if ( event.wheelDelta ) {
+			zoom -= event.wheelDelta * 0.0003;
+		}
+		// Firefox
+		else if ( event.detail ) {
+			zoom += event.detail * 0.01;
+		}
+		minimap.update()
+	}
+
+	this.draw()
+	$("#minimap .el").append(canvas)
+
+	return this;
+}
\ No newline at end of file