etc

10 files changed, 163 insertions, 111 deletions

diff --git a/assets/javascripts/rectangles/_env.js b/assets/javascripts/rectangles/_env.js
index dbdaf5c..9df73c2 100644
--- a/assets/javascripts/rectangles/_env.js
+++ b/assets/javascripts/rectangles/_env.js
@@ -33,10 +33,16 @@ environment.init = function(){
 	builder.init()
 	clipper.init()
 	window.scene && scene.update()
+	environment.update()
 }
 environment.update = function(t){
-	map.center.a = scene.camera.x
-	map.center.b = -scene.camera.z
+	if (window.scene && scene.camera) {
+		map.center.a = scene.camera.x
+		map.center.b = -scene.camera.z
+	}
+	else {
+		requestAnimationFrame(environment.update)
+	}
 	map.animate()
 	z = false
 }
diff --git a/assets/javascripts/rectangles/engine/clipper.js b/assets/javascripts/rectangles/engine/clipper.js
index 2ca8444..d6eb618 100644
--- a/assets/javascripts/rectangles/engine/clipper.js
+++ b/assets/javascripts/rectangles/engine/clipper.js
@@ -32,7 +32,6 @@ var clipper = new function(){
 		if (base.rooms.length == 0) return;
 
 		for (var i = 0; i < base.rooms.length; i++) {
-			base.rooms[i].id = i
 			base.rooms[i].reset()
 		}
 
@@ -92,6 +91,7 @@ var clipper = new function(){
 			}
 		}
 
+		base.rooms = sort_rooms_by_id(rooms)
 		base.regions = sort_rects_by_position(regions)
 	}
 
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 )
diff --git a/assets/javascripts/rectangles/models/room.js b/assets/javascripts/rectangles/models/room.js
index 8c9d67d..a9d6936 100644
--- a/assets/javascripts/rectangles/models/room.js
+++ b/assets/javascripts/rectangles/models/room.js
@@ -23,7 +23,6 @@ window.room = (function(){
 		// for each of this rect's regions split the region if necessary
 		var regions = this.regions
 		var splits
-
 		for (var i = 0, len = regions.length; i < len; i++) {
 			if (regions[i] && regions[i].intersects(r)) {
 				splits = regions[i].split(r)
diff --git a/assets/javascripts/rectangles/util/debug.js b/assets/javascripts/rectangles/util/debug.js
index 437abb8..924c816 100644
--- a/assets/javascripts/rectangles/util/debug.js
+++ b/assets/javascripts/rectangles/util/debug.js
@@ -1,2 +1,8 @@
+/*
+	on mousedown, z := true
+	
+	if (z) // log stuff
+*/
+
 window.z = true;
 document.body.addEventListener("mousedown", function(){ z = true })
diff --git a/assets/javascripts/rectangles/util/sort.js b/assets/javascripts/rectangles/util/sort.js
index 8ece95f..673b3cc 100644
--- a/assets/javascripts/rectangles/util/sort.js
+++ b/assets/javascripts/rectangles/util/sort.js
@@ -1,12 +1,4 @@
-function sort_rooms_by_position(list){
-	return list.sort(function(a,b){
-		return compare_rect_position(a.rect, b.rect)
-	})
-}
 
-function sort_rects_by_position(list){
-	return list.sort(compare_rect_position)
-}
 
 function compare_rect_position(a,b){
 	if (a.x.a < b.x.a) {
@@ -24,14 +16,39 @@ function compare_rect_position(a,b){
 	return 0
 }
 
+function compare_rect_area (a,b){
+	if (a[0] < b[0]) {
+		return 1
+	}
+	if (a[0] > b[0]) {
+		return -1
+	}
+	return 0
+}
+
+
+function sort_rooms_by_id(list){
+	return list.sort(function(a,b){
+		return a.id < b.id ? -1 : a.id == b.id ? 0 : 1
+	})
+}
+function sort_rooms_by_position(list){
+	return list.sort(function(a,b){
+		return compare_rect_position(a.rect, b.rect)
+	})
+}
+function sort_rooms_by_area(list){
+	return list.map(function(r){ return [r.rect.area(), r] })
+	           .sort(compare_rect_area)
+				     .map(function(r){ return r[1] })
+}
+
+
+function sort_rects_by_position(list){
+	return list.sort(compare_rect_position)
+}
 function sort_rects_by_area(list){
-	return list.map(function(r){ return [r.area(), r] }).sort(function(a,b){
-		if (a[0] < b[0]) {
-			return 1
-		}
-		if (a[0] > b[0]) {
-			return -1
-		}
-		return 0
-	}).map(function(r){ return r[1] })
+	return list.map(function(r){ return [r.area(), r] })
+	           .sort(compare_rect_area)
+	           .map(function(r){ return r[1] })
 }
diff --git a/rectangles-canvas-only.html b/rectangles-canvas-only.html
index 3157a7f..4cb030b 100644
--- a/rectangles-canvas-only.html
+++ b/rectangles-canvas-only.html
@@ -36,10 +36,10 @@ body > div {
 
 		<div id="info">
 			<select id="palette">
-				<option>colors</option>
+				<option selected>colors</option>
 				<option>redblue</option>
 				<option>gray</option>
-				<option selected>alpha</option>
+				<option>alpha</option>
 			</select>
 			<div id="intersects"></div>
 		</div>
@@ -62,6 +62,11 @@ body > div {
 <script type="text/javascript" src="assets/javascripts/rectangles/models/room.js"></script>
 <script type="text/javascript" src="assets/javascripts/rectangles/models/rect.js"></script>
 <script type="text/javascript" src="assets/javascripts/rectangles/models/vec2.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/engine/builder.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/engine/clipper.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/map/_map.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/map/ui.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/map/draw.js"></script>
 
 <script type="text/javascript" src="assets/javascripts/rectangles/map/ui.js"></script>
 <script type="text/javascript" src="assets/javascripts/rectangles/map/draw.js"></script>
diff --git a/rectangles.html b/rectangles.html
index 4c1334a..535e366 100644
--- a/rectangles.html
+++ b/rectangles.html
@@ -66,6 +66,7 @@ body > div {
 <script type="text/javascript" src="assets/javascripts/rectangles/models/vec2.js"></script>
 <script type="text/javascript" src="assets/javascripts/rectangles/engine/builder.js"></script>
 <script type="text/javascript" src="assets/javascripts/rectangles/engine/clipper.js"></script>
+<script type="text/javascript" src="assets/javascripts/rectangles/map/_map.js"></script>
 <script type="text/javascript" src="assets/javascripts/rectangles/map/ui.js"></script>
 <script type="text/javascript" src="assets/javascripts/rectangles/map/draw.js"></script>