further code bath, fix minimap orientation/translation

2 files changed, 169 insertions, 0 deletions

diff --git a/assets/javascripts/rectangles/map/draw.js b/assets/javascripts/rectangles/map/draw.js
new file mode 100644
index 0000000..eb3dece
--- /dev/null
+++ b/assets/javascripts/rectangles/map/draw.js
@@ -0,0 +1,66 @@
+function clear_canvas(){
+	ctx.fillStyle = "rgba(255,255,255,0.7)"
+	ctx.clearRect(0,0,w,h)
+	ctx.fillRect(0,0,w,h)
+}
+function draw_ruler(){
+	ctx.strokeStyle = "rgba(80,80,80,0.5)"
+	ctx.lineWidth = 1
+	var len = 5
+	for (var i = 0.5; i < w; i += 10) {
+		line(i, 0, i, len)
+		line(0, i, len, i)
+	}
+}
+function line (x,y,a,b,translation){
+	if (translation) {
+		x += translation.a
+		a += translation.a
+		y += translation.b
+		b += translation.b
+	}
+	ctx.beginPath()
+	ctx.moveTo(x,y)
+	ctx.lineTo(a,b)
+	ctx.stroke()
+}
+function draw_regions(regions){
+	for (var i = 0; i < regions.length; i++) {
+		if (regions[i].dupe) continue
+		ctx.fillStyle = colors[i % colors.length]
+		fill_region(regions[i])
+		stroke_sides(regions[i])
+	}
+}
+function draw_mouse(mouse){
+	ctx.fillStyle = "rgba(255,0,0,0.4)";
+	ctx.beginPath();
+	ctx.arc(mouse.x.b, mouse.y.b, 5, 0, 2*Math.PI, false);
+	ctx.fill();
+
+	if (mouse.width() != 0 && mouse.height() != 0) {
+		if (clipper.dragging) {
+			stroke_rect(mouse)
+		}
+		else {
+			ctx.fillStyle = "rgba(255,255,0,0.5)"
+			fill_region( mouse.clone().translate() )
+		}
+	}
+}
+
+function fill_region(r){
+	ctx.fillRect(r.x.a + r.translation.a,
+							 r.y.a + r.translation.b,
+							 r.x.length(),
+							 r.y.length())
+}
+function stroke_sides (r){
+	if (r.sides & FRONT) line(r.x.a, r.y.a, r.x.b, r.y.a)
+	if (r.sides &  BACK) line(r.x.a, r.y.b, r.x.b, r.y.b)
+	if (r.sides &  LEFT) line(r.x.a, r.y.a, r.x.a, r.y.b)
+	if (r.sides & RIGHT) line(r.x.b, r.y.a, r.x.b, r.y.b)
+}
+function stroke_rect (r){
+	line(r.x.a, r.y.a, r.x.b, r.y.b, r.translation)
+}
diff --git a/assets/javascripts/rectangles/map/ui.js b/assets/javascripts/rectangles/map/ui.js
new file mode 100644
index 0000000..05fad90
--- /dev/null
+++ b/assets/javascripts/rectangles/map/ui.js
@@ -0,0 +1,103 @@
+/*
+*/
+
+window.ctx = window.w = window.h = null;
+
+var map = new function(){
+	var base = this
+	base.bounds = new vec2(500,500)
+	base.center = new vec2(0,0)
+
+	var canvas = document.createElement("canvas")
+	var ctx = window.ctx = canvas.getContext("2d")
+	var w = window.w = canvas.width = 500
+	var h = window.h = canvas.height = 500
+	document.querySelector("#map").appendChild(canvas)
+
+	base.animate = function(){
+		ctx.save()
+		clear_canvas()
+		draw_ruler()
+
+		ctx.translate( map.center.a + map.bounds.a/2,  map.center.b + map.bounds.b/2 )
+		ctx.scale( -1, 1 )
+
+		draw_regions(clipper.regions)
+		draw_mouse(map.ui.mouse.cursor)
+
+		ctx.restore()
+	}
+}
+
+map.ui = new function(){
+	var base = this
+	base.el = document.querySelector("#map")
+	
+	base.mouse = new mouse({
+		el: base.el,
+		down: down,
+		move: move,
+		drag: drag,
+		up: up,
+	})
+
+	base.wheel = new wheel({
+		el: base.el,
+		update: function(e, val, delta){
+			// do something with val
+		},
+	})
+	
+	function down (e, cursor){
+		cursor.x.add( map.center.a + map.bounds.a/2 )
+		cursor.y.add( map.center.b - map.bounds.b/2 )
+
+		var intersects = clipper.rooms.filter(function(r){
+			return r.focused = r.rect.contains(cursor)
+		})
+
+		if (intersects.length){
+			base.dragging = intersects[0]
+		}
+		else {
+			base.creating = true
+		}
+
+		if (e.shiftKey && base.dragging) {
+			base.dragging.rect.quantize(10)
+		}
+	}
+
+	function move (e, cursor) {
+		cursor.x.add( map.center.a + map.bounds.a/2 )
+		cursor.y.add( map.center.b - map.bounds.b/2 )
+		z=true
+	}
+
+	function drag (e, cursor) {
+		cursor.x.b += map.center.a + map.bounds.a/2
+		cursor.y.b += map.center.b - map.bounds.b/2
+
+		if (base.dragging) {
+			base.dragging.rect.translation.a = cursor.x.magnitude()
+			base.dragging.rect.translation.b = cursor.y.magnitude()
+		}
+	}
+
+	function up (e, cursor) {
+
+		if (base.creating) {
+			if (cursor.height() != 0 && cursor.width() != 0) {
+				cursor.x.abs()
+				cursor.y.abs()
+				clipper.add_room( cursor )
+			}
+		}
+		
+		if (base.dragging) {
+			base.dragging.rect.translate()
+		}
+
+		base.creating = base.dragging = false
+	}
+}
\ No newline at end of file