9 files changed, 178 insertions, 55 deletions

diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js
index c27c159..d5a8442 100644
--- a/public/assets/javascripts/rectangles/engine/map/_map.js
+++ b/public/assets/javascripts/rectangles/engine/map/_map.js
@@ -1,42 +1,70 @@
 /*
 */
 
-var Map = function(){
+var Map = function(opt){
+	
+	opt = defaults(opt, {
+		type: "editor",
+		el: document.querySelector("#map"),
+		width: window.innerWidth,
+		height: window.innerHeight,
+		zoom: -2,
+		zoom_min: -6.2,
+		zoom_max: 0,
+	})
+	
 	var base = this
-	base.el = document.querySelector("#map")
+	base.el = opt.el
 	
 	if (! base.el) return
 	
-	base.dimensions = new vec2(window.innerWidth, window.innerHeight)
+	base.dimensions = new vec2(opt.width, opt.height)
 	base.center = new vec2(0,0)
 	
-	base.sides = function(){
+	base.sides_for_center = function(){
 		var sides = base.dimensions.clone().div(2).div(base.zoom)
 		return new Rect( base.center.a - sides.a, -base.center.b - sides.b,
 										 base.center.a + sides.a, -base.center.b + sides.b )
 	}
+	base.sides_for_camera = function(){
+		var sides = base.dimensions.clone().div(2).div(base.zoom)
+		return new Rect( scene.camera.x - sides.a, scene.camera.z - sides.b,
+										 scene.camera.x + sides.a, scene.camera.z + sides.b )
+	}
+
 
-	base.zoom = 1/4
-	base.zoom_exponent = -2
 	base.set_zoom = function (n) {
+		n = clamp(n, opt.zoom_min, opt.zoom_max)
 		base.zoom_exponent = n
-		base.zoom = pow(2, base.zoom_exponent)
+		base.zoom = pow(2, n)
 	}
+	base.set_zoom(opt.zoom)
 
 	var canvas = base.canvas = document.createElement("canvas")
 	canvas.width = base.dimensions.a
 	canvas.height = base.dimensions.b
 	
-	document.querySelector("#map").appendChild(canvas)
+	base.el.appendChild(canvas)
 	
-	base.draw = new MapDraw (base)
-	base.ui = new MapUI (base)
+	switch (opt.type) {
+		case "editor":
+			base.draw = new Map.Draw (base)
+			base.ui = new Map.UI.Editor (base)
+			base.sides = base.sides_for_center
+			$(window).resize(base.resize)
+			break
+		
+		case "minimap":
+			base.draw = new Map.Draw (base, { center: scene.camera, minimap: true })
+			base.ui = new Map.UI.Minimap (base)
+			base.sides = base.sides_for_camera
+			break
+	}
 	
 	base.resize = function(){
 		canvas.width = base.dimensions.a = window.innerWidth
 		canvas.height = base.dimensions.b = window.innerHeight
 	}
-	$(window).resize(base.resize)
 
 	base.update = function(){
 		base.draw.animate()
diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js
index a441de4..8e1fe5a 100644
--- a/public/assets/javascripts/rectangles/engine/map/draw.js
+++ b/public/assets/javascripts/rectangles/engine/map/draw.js
@@ -1,5 +1,7 @@
 
-var MapDraw = function(map){
+Map.Draw = function(map, opt){
+
+	opt = defaults(opt, { minimap: false })
 
 	var draw = this
 	
@@ -8,17 +10,30 @@ var MapDraw = function(map){
 	draw.animate = function(){
 		ctx.save()
 		draw.clear()
-		draw.ruler()
+		// draw.ruler()
 
-		ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
-		ctx.scale( map.zoom, map.zoom )
-		ctx.translate( map.center.a,  map.center.b)
-		ctx.scale( -1, 1 )
+		if (opt.minimap) {
+			ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
+			ctx.scale( map.zoom, map.zoom )
+			ctx.translate( opt.center.x, - opt.center.z )
+			ctx.scale( -1, 1 )
 
-		draw.regions(Rooms.regions, colors)
-		draw.mouse(map.ui.mouse.cursor)
-		draw.coords()
-		scene && draw.camera(scene.camera)
+			draw.coords()
+			draw.regions(Rooms.regions, [ "#fff" ])
+			draw.camera(scene.camera)
+		}
+		
+		else {
+			ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
+			ctx.scale( map.zoom, map.zoom )
+			ctx.translate( map.center.a,  map.center.b )
+			ctx.scale( -1, 1 )
+
+			draw.regions(Rooms.regions, colors)
+			draw.mouse(map.ui.mouse.cursor)
+			draw.coords()
+			scene && draw.camera(scene.camera)
+		}
 
 		ctx.restore()
 	}
@@ -29,7 +44,7 @@ var MapDraw = function(map){
 
 		ctx.translate( map.dimensions.a * 1/2, map.dimensions.b * 1/2)
 		ctx.scale( map.zoom, map.zoom )
-		ctx.translate( map.center.a,  map.center.b)
+		ctx.translate( map.center.a,  map.center.b )
 		ctx.scale( -1, 1 )
 
 		draw.regions(Rooms.regions, ["#fff"])
@@ -109,6 +124,7 @@ var MapDraw = function(map){
 	}
 
 	draw.coords = function(){
+		/*
 		ctx.fillStyle = "#888";
 		dot_at(0,0)
 		ctx.fillStyle = "#bbb";
@@ -120,6 +136,7 @@ var MapDraw = function(map){
 		ctx.fillStyle = "#eee";
 		dot_at(300,0)
 		dot_at(0,300)
+		*/
 		
 		ctx.strokeStyle = "rgba(0,0,0,0.1)"
 		ctx.lineWidth = 1/map.zoom
diff --git a/public/assets/javascripts/rectangles/engine/map/ui.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
index 7890c9b..262272b 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
@@ -1,5 +1,6 @@
 
-var MapUI = function(map){
+Map.UI = Map.UI || {}
+Map.UI.Editor = function(map){
 
 	var base = this
 
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_minimap.js b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js
new file mode 100644
index 0000000..fabbdb9
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/map/ui_minimap.js
@@ -0,0 +1,81 @@
+
+Map.UI = Map.UI || {}
+
+Map.UI.Minimap = function(map){
+
+	var base = this
+
+	base.creating = base.dragging = base.resizing = false
+
+	base.mouse = new mouse({
+		el: map.el,
+		down: down,
+		move: move,
+		drag: drag,
+		up: up,
+		rightclick: rightclick,
+	})
+
+	base.wheel = new wheel({
+		el: map.el,
+		update: mousewheel,
+	})
+	
+	var x, z
+	
+	//
+	
+	function down (e, cursor){
+		cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+		cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+		
+		x = scene.camera.x
+		z = scene.camera.z
+
+		if (e.ctrlKey || e.which === 3) {
+			cursor.quantize(1/map.zoom)
+			map.center.a = cursor.x.a
+			map.center.b = -cursor.y.a
+			console.log(map.center+"")
+			cursor.x.b = cursor.x.a
+			cursor.y.b = cursor.y.a
+			base.mouse.down = false
+			e.preventDefault()
+			e.stopPropagation()
+			return
+		}
+	}
+
+	function move (e, cursor) {
+		cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+		cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+	}
+
+	function drag (e, cursor) {
+		cursor.x.b = ((cursor.x.b/map.dimensions.a)+0.5) * map.dimensions.a / map.zoom + map.center.a
+		cursor.y.b = ((cursor.y.b/map.dimensions.b)-0.5) * map.dimensions.b / map.zoom - map.center.b
+
+		scene.camera.x = x + cursor.x.magnitude() * map.zoom * 16
+		scene.camera.z = z + cursor.y.magnitude() * map.zoom * 16
+		Rooms.mover.room = null
+
+		if (base.dragging) {
+			base.dragging.rect.translation.a = cursor.x.magnitude()
+			base.dragging.rect.translation.b = cursor.y.magnitude()
+		}
+	}
+
+	function up (e, cursor, new_cursor) {
+		new_cursor.x.div(map.dimensions.a).add(0.5).mul(map.dimensions.a / map.zoom).add(map.center.a)
+		new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
+
+		base.dragging = false
+	}
+
+	function mousewheel (e, val, delta){
+		map.set_zoom(map.zoom_exponent - delta/20)
+	}
+	
+	function rightclick (e){
+	}
+}
diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
index 0a3187c..3fe6b66 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
@@ -45,7 +45,6 @@ var Scenery = new function(){
 		var scenery = base.media.map(function(media){
 			return media.serialize()
 		})
-		console.log(scenery)
 		return scenery
 	}
 
diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js
index ce4f297..8acc1c2 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/move.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/move.js
@@ -56,11 +56,11 @@ Scenery.move = function(base){
 	function switch_wall (e, new_wall, cursor){
 		if (! dragging) return
 		if (new_wall.uid == base.wall.uid) return
-		if (! new_wall.fits(base.media)) return
+		if (! new_wall.fits(base.media, base.scale)) return
 
 		var old_wall_side = base.wall.side
 		var wall_group = old_wall_side | new_wall.side
-		
+
 		base.set_wall(new_wall)
 
 		bounds = base.bounds
diff --git a/public/assets/javascripts/rectangles/engine/scenery/resize.js b/public/assets/javascripts/rectangles/engine/scenery/resize.js
index 2a400f5..ac13326 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/resize.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/resize.js
@@ -6,7 +6,7 @@ Scenery.resize = new function(){
 	var obj
 	var x, y, z, bounds
 	var dragging = false
-	var dimensions, position
+	var dimensions, position, scale
 
 	var dots = [], dot, selected_dot
 
@@ -147,54 +147,48 @@ Scenery.resize = new function(){
 		selected_dot = selection[0]
 		dragging = true
 		
-		dimensions = new vec2(obj.mx.width, obj.mx.height)
+		dimensions = obj.dimensions
 		position = new vec3(obj.mx.x, obj.mx.y, obj.mx.z)
+		scale = obj.mx.scale
 
-		console.log("down on", sidesToString(selected_dot.side))
-		
 		document.body.classList.add("dragging")
 	}
 
 	function drag (e, cursor){
 		if (! dragging) return
-		// cursor.x.magnitude()*cursor_amp
 
 		var x_sign = selected_dot.side & LEFT ? -1 : selected_dot.side & RIGHT ? 1 : 0
 		var y_sign = selected_dot.side & TOP ? -1 : selected_dot.side & BOTTOM ? 1 : 0
+		var width = cursor.x.magnitude()
+		var height = cursor.y.magnitude()
+		var mag = cursor.magnitude()
+		var old_width = dimensions.a * scale
+
+		if (abs(width) > abs(height)) {
+			mag = x_sign * mag * sign(width)
+		}
+		else {
+			mag = y_sign * mag * sign(height)
+		}
 		
-		var translation = new vec2( x_sign * cursor.x.magnitude() * cursor_amp, y_sign * cursor.y.magnitude() * cursor_amp )
+ 		obj.mx.scale = scale * (old_width + mag) / old_width
 
 		if (selected_dot.side & LEFT_RIGHT) {
-			obj.mx.width = dimensions.a + translation.a
-			obj.mx.x = position.a + x_sign * cos(rotationY) * translation.a/2 * obj.mx.scale
-			obj.mx.z = position.c + x_sign * sin(rotationY) * translation.a/2 * obj.mx.scale
+			obj.mx.x = position.a + cos(rotationY) * mag/2 * (x_sign)
+			obj.mx.z = position.c + sin(rotationY) * mag/2 * (x_sign)
 		}
 		if (selected_dot.side & TOP_BOTTOM) {
-			obj.mx.height = dimensions.b + translation.b
-			obj.mx.y = position.b - y_sign * translation.b/2 * obj.mx.scale
+			obj.mx.y = position.b - mag/2 * y_sign
 		}
-		
-// 		bounds = obj.wall.bounds_for(dimensions)
-
-// 		base.mx.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp )
-// 		switch (base.wall.side) {
-// 			case FRONT:
-// 			case BACK:
-// 				base.mx.x = bounds.x.clamp( x + cos(wall_rotation[base.wall.side]) * cursor.x.magnitude()*cursor_amp )
-// 				break
-// 			case LEFT:
-// 			case RIGHT:
-// 				base.mx.z = bounds.x.clamp( z + sin(wall_rotation[base.wall.side]) * cursor.x.magnitude()*cursor_amp )
-// 				break
-// 		}
 
 		base.move_dots()
-		
 	}
 
 	function up (e, cursor){
 		dragging = false
 		selected_dot = null
+		obj.scale = obj.mx.ops.scale = obj.mx.scale
+		obj.set_wall()
 		document.body.classList.remove("dragging")
 	}
 
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
index f892c0c..1aa037c 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
@@ -8,6 +8,7 @@ Scenery.types.base = Fiber.extend(function(base){
 			this.move = new Scenery.move (this)
 			this.media = opt.media
 			this.dimensions = new vec2(this.media.width, this.media.height)
+			this.scale = this.media.scale
 			
 			if (opt.wall) {
 				this.set_wall(opt.wall)
@@ -42,7 +43,7 @@ Scenery.types.base = Fiber.extend(function(base){
 
 		set_wall: function(wall){
 			this.wall = wall || this.wall
-			this.bounds = this.wall.bounds_for(this.media)
+			this.bounds = this.wall.bounds_for(this.media, this.scale)
 			this.center = this.wall.center()
 		},
 
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/image.js b/public/assets/javascripts/rectangles/engine/scenery/types/image.js
index 98b26f4..b668e6a 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/image.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/image.js
@@ -5,7 +5,7 @@ Scenery.types.image = Scenery.types.base.extend(function(base){
 	
 		init: function(opt){
 			base.init.call(this, opt)
-			this.scale = this.media.scale = 300 / max(300, this.media.width)
+			this.scale = 300 / max(300, this.media.width)
 
 			this.build()
 			this.bind()
@@ -16,6 +16,7 @@ Scenery.types.image = Scenery.types.base.extend(function(base){
 		build: function(){
 			this.mx = new MX.Image({
 				src: this.media.url,
+				scale: this.scale,
 				y: this.scale * this.media.height/2,
 				backface: false,
 			})
@@ -24,12 +25,13 @@ Scenery.types.image = Scenery.types.base.extend(function(base){
 
 		serialize: function(){
 			var data = base.serialize.call(this)
-			console.log(data)
 			return data
 		},
 	
 		deserialize: function(data){
 			this.mx.move(data.position)
+			this.mx.ops.width = data.dimensions.a
+			this.mx.ops.height = data.dimensions.b
 		},
 	}