etc

3 files changed, 106 insertions, 88 deletions

diff --git a/assets/javascripts/rectangles/map/_map.js b/assets/javascripts/rectangles/map/_map.js
new file mode 100644
index 0000000..833df7a
--- /dev/null
+++ b/assets/javascripts/rectangles/map/_map.js
@@ -0,0 +1,31 @@
+/*
+*/
+
+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()
+		map.draw.clear_canvas()
+		map.draw.ruler()
+
+		ctx.translate( map.center.a + map.bounds.a/2,  map.center.b + map.bounds.b/2 )
+		ctx.scale( -1, 1 )
+
+		map.draw.regions(clipper.regions)
+		map.draw.mouse(map.ui.mouse.cursor)
+
+		ctx.restore()
+	}
+
+}
diff --git a/assets/javascripts/rectangles/map/draw.js b/assets/javascripts/rectangles/map/draw.js
index 40bb483..8a0649a 100644
--- a/assets/javascripts/rectangles/map/draw.js
+++ b/assets/javascripts/rectangles/map/draw.js
@@ -1,66 +1,80 @@
-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)
+
+map.draw = new function(){
+
+	var base = this
+
+	base.clear_canvas = function (){
+		ctx.fillStyle = "rgba(255,255,255,0.7)"
+		ctx.clearRect(0,0,w,h)
+		ctx.fillRect(0,0,w,h)
 	}
-}
-function line (x,y,a,b,translation){
-	if (translation) {
-		x += translation.a
-		a += translation.a
-		y += translation.b
-		b += translation.b
+
+	base.ruler = function (){
+		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)
+		}
 	}
-	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])
+
+	base.regions = function(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 (map.ui.dragging) {
-			stroke_rect(mouse)
+	base.mouse = function(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 (map.ui.dragging) {
+				stroke_rect(mouse)
+			}
+			else {
+				ctx.fillStyle = "rgba(255,255,0,0.5)"
+				fill_region( mouse.clone().translate() )
+			}
 		}
-		else {
-			ctx.fillStyle = "rgba(255,255,0,0.5)"
-			fill_region( mouse.clone().translate() )
+	}
+
+	//
+
+	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 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 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)
-}
+	function stroke_rect (r){
+		line(r.x.a, r.y.a, r.x.b, r.y.b, r.translation)
+	}
+}
\ No newline at end of file
diff --git a/assets/javascripts/rectangles/map/ui.js b/assets/javascripts/rectangles/map/ui.js
index 0c90388..cc9a560 100644
--- a/assets/javascripts/rectangles/map/ui.js
+++ b/assets/javascripts/rectangles/map/ui.js
@@ -1,35 +1,6 @@
-/*
-*/
-
-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")
 
@@ -50,6 +21,8 @@ map.ui = new function(){
 		},
 	})
 	
+	//
+	
 	function down (e, cursor){
 		cursor.x.add( map.center.a + map.bounds.a/2 )
 		cursor.y.add( -map.center.b - map.bounds.b/2 )