pulling in more stuff from posthang

2 files changed, 439 insertions, 0 deletions

diff --git a/public/assets/javascripts/map/map.js b/public/assets/javascripts/map/map.js
new file mode 100644
index 0000000..a90963f
--- /dev/null
+++ b/public/assets/javascripts/map/map.js
@@ -0,0 +1,337 @@
+
+MX.Map = function(){
+	var base = this;
+	
+	var parent = document.querySelector("#map")
+	var canvas = document.createElement("canvas")
+	var ctx = canvas.getContext("2d")
+	var w, h
+	
+	var visible = parent.style.display == "block"
+	if (visible) resize()
+	
+	var center = {x:0,y:0}
+	var gridSpace;
+	var zoom = 3.0
+	
+	var gridStroke = '#ddd'
+	var boxFill = '#fff'
+	var boxStroke = '#000'
+	var playerColor = '#888'
+
+	var xmin, xmax, ymin, ymax, xpos, ypos, scale, side;
+
+	var tube = base.tube = new Tube ()
+
+	this.zoom = function(n){ if (n) zoom = n; return zoom }
+	this.recenter = function(){ center.x = cam.x; center.y = cam.z }
+
+	function resize(){
+		var rect = parent.getBoundingClientRect()
+	  w = canvas.width = ~~rect.width
+	  h = canvas.height = ~~rect.height
+	}
+
+	this.on = function(){
+    base.tube.on.apply(base.tube, arguments)
+  }
+  this.off = function(){
+    base.tube.off.apply(base.tube, arguments)
+  }
+
+	this.update = function(){
+		if (! visible) return;
+		this.draw()
+	}
+
+	this.bounds = function(){
+		gridSpace = pow(10, ~~(zoom-0.25) + 0.25)
+		side = Math.pow(10, zoom+1)
+		scale = w / side
+		xpos = center.x // -cam.x
+		ypos = center.y // 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 x0 = norm(0, xmin, xmax)
+		var y0 = norm(0, ymin, ymax)
+		
+		var xg = norm(gridSpace, xmin, xmax)
+		var yg = norm(gridSpace, ymin, ymax)
+		
+		var xgw = (xg-x0)
+		
+		var xmod = mod(x0, xgw)
+		var ymod = mod(y0, xgw)
+		
+		var xend = 1 + xgw
+		var yend = h/w + xgw
+
+		var xline, yline;
+		for (var x = -xmod; x < xend; x += xgw) {
+			xline = x * w
+			line(xline, 0, xline, h)
+		}
+		for (var y = -ymod; y < yend; y += xgw) {
+			yline = y * w
+			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.lineWidth = 0.5
+		var tx = ((-xpos) * scale),
+				ty = ((-ypos) * scale);
+		ctx.translate(tx, ty)
+
+		var obj_scale = (1) * scale
+
+		var tx = ~~((cam.x) * obj_scale),
+				ty = ~~((cam.z) * obj_scale);
+		ctx.translate(-tx, ty)
+		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 == "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.width/2 * obj_scale)
+				var hh = ~~(obj.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 == "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,
+			creating = false, moving = false;
+	
+	function positionFromMouse(e) {
+		var rect = canvas.getBoundingClientRect()
+		cx = center.x
+		cy = center.y
+		mx = e.pageX - rect.left
+		my = e.pageY - rect.top
+		mdx = (mx - w/2) / scale + cx
+		mdy = (my - h/2) / scale + cy
+	}
+	
+	canvas.addEventListener("mousedown", function(e){
+		e.stopPropagation()
+		dragging = true
+
+		positionFromMouse(e)
+
+		if (e.shiftKey) {
+			creating = true
+		}
+
+		hud.update( mdx, mdy )
+
+		base.tube("mousedown", e, -mdx, mdy)
+	})
+	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
+			
+			if (creating) {
+				hud.update( mdx, mdy )
+			}
+			else if (moving) {
+				cam.x = cx - mdx
+				cam.z = cy + mdy
+			}
+			else {
+				center.x = cx - mdx
+				center.y = cy - mdy
+				hud.update(center.x, center.y)
+			}
+			
+			base.tube("mousedrag", e, -mdx, mdy)
+		}
+		else {
+			positionFromMouse(e)
+			hud.update( mdx, mdy )
+			base.tube("mousemove", e, -mdx, mdy)
+		}
+	})
+	document.addEventListener("mouseup", function(e){
+		creating = dragging = moving = false;
+		base.tube("mouseup", e)
+	})
+
+	canvas.addEventListener("contextmenu", function(e){
+		e.preventDefault()
+		e.stopPropagation()
+		dragging = true
+
+		positionFromMouse(e)
+		
+		moving = true
+		cx = cam.x = -mdx
+		cy = cam.z = mdy
+
+		hud.update( mdx, mdy )
+
+		base.tube("contextmenu", e)
+	})
+	
+	canvas.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
+  canvas.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false);
+	function onDocumentMouseWheel (e) {
+		e.preventDefault()
+		e.stopPropagation()
+		var delta = 0
+		
+		// WebKit
+		if ( event.wheelDeltaY ) {
+			delta = - event.wheelDeltaY * 0.0003;
+		}
+		// Opera / Explorer 9
+		else if ( event.wheelDelta ) {
+			delta = - event.wheelDelta * 0.0003;
+		}
+		// Firefox
+		else if ( event.detail ) {
+			delta = event.detail * 0.01;
+		}
+		
+		if (! e.shiftKey) {
+			zoom += delta
+		}
+		
+		positionFromMouse(e)
+		base.tube("mousewheel", e, mdx, mdy, delta)
+		
+		map.update()
+	}
+		
+	window.addEventListener('resize', resize)
+
+	this.toggle = function(){
+		(visible = ! visible) ? base.show() : base.hide()
+	}
+	this.show = function(){
+		parent.style.display = "block"
+		resize()
+	}
+	this.hide = function(){
+		parent.style.display = "none"
+	}
+
+	var hud = new function(){
+		var el = document.querySelector("#map .hud")
+		this.update = function(){
+			el.innerHTML = Array.prototype.slice.call(arguments,0).map(function(s){ return typeof s == "number" ? Math.round(s) : s }).join(" ")
+		}
+	}
+	hud.update()
+
+	this.update()
+	document.querySelector("#map .el").appendChild(canvas)
+}
+
diff --git a/public/assets/javascripts/map/map_editor.js b/public/assets/javascripts/map/map_editor.js
new file mode 100644
index 0000000..754172b
--- /dev/null
+++ b/public/assets/javascripts/map/map_editor.js
@@ -0,0 +1,102 @@
+var editor = new function (){
+
+	var base = this;
+
+	var cube = null
+	var cx, cy
+	
+	base.init = function(){
+		map.on("mousedown", base.mousedown)
+		map.on("mousemove", base.mousemove)
+		map.on("mousedrag", base.mousedrag)
+		map.on("mouseup", base.mouseup)
+		map.on("mousewheel", base.mousewheel)
+		document.getElementById("export").addEventListener("keydown", base.stopPropagation)
+		document.getElementById("export").addEventListener("mousedown", base.stopPropagation)
+		document.getElementById("export").addEventListener("mousemove", base.stopPropagation)
+		document.getElementById("export").addEventListener("mouseup", base.stopPropagation)
+		window.addEventListener('keydown', base.keydown)
+	}
+	
+	base.mousedown = function(e,x,y) {
+		if (! e.shiftKey) return
+		cx = x
+		cy = y
+		cube = new MX.BoxDimensions({
+			x: cx,
+			y: -10,
+			z: cy,
+			width: 1,
+			height: 1,
+			depth: 1,
+			borderWidth: 1,
+			borderColor: "#000",
+			color: "#fff"
+		})
+		cube.persisted = false
+		scene.add( cube );
+	}
+	
+	base.mousemove = function(e,x,y) {
+	}
+	
+	base.mousedrag = function(e,dx,dy) {
+		if (! cube) return
+		cube.x = cx + dx/2
+		cube.z = cy + dy/2
+		cube.setWidth( abs(dx) )
+		cube.setDepth( abs(dy) )
+		cube.setHeight( max( cube.width, cube.depth ) )
+		cube.update()
+	}
+	
+	base.mouseup = function(e){
+		cube = null
+	}
+	
+	base.mousewheel = function(e,x,z,delta){
+		if (! e.shiftKey) return;
+
+		scene.inner.children.some(function(s){
+			if (s.contains(-x, null, z)) {
+				s.y += delta * 1000
+				s.persisted = false
+				console.log(s.id)
+				return true
+			}
+			return false
+		})
+
+	}
+	
+	base.stopPropagation = function(e){ e.stopPropagation() }
+	
+	base.exportObjects = function(){
+		var s = scene.inner.children
+							.filter(function(s){ return ! s.persisted })
+							.map(function(s){ return s.toString() })
+							.join("\n\n")
+		document.getElementById("export").value = s
+	}
+	
+	base.exportCamera = function(){
+		var s = scene.camera.toString()
+		document.getElementById("export").value = s
+		console.log(s)
+	}
+
+	base.keydown = function(e){
+		switch (e.keyCode) {
+
+			case 67: // c
+				base.exportCamera()
+				break;
+
+			case 86: // v
+				base.exportObjects()
+				break;
+
+		}
+	}
+
+}