ceiling, floor

5 files changed, 58 insertions, 16 deletions

diff --git a/assets/javascripts/rectangles/_env.js b/assets/javascripts/rectangles/_env.js
index a190385..11e01ba 100644
--- a/assets/javascripts/rectangles/_env.js
+++ b/assets/javascripts/rectangles/_env.js
@@ -9,11 +9,22 @@ environment.init = function(){
 		"rotationY": 0 // PI
 	})
 
-	clipper.add_room( new rect(100,100, 200,300) )
-	clipper.add_room( new rect(200,300, 300,500) )
-
-	clipper.add_room( new rect(300,100, 600,300) )
-	clipper.add_room( new rect(400,200, 700,400) )
+	clipper.rooms.push( new room ({
+		rect: new rect(100,100, 200,300),
+		height: 400,
+	}))
+	clipper.rooms.push( new room ({
+		rect: new rect(200,300, 300,500),
+		height: 300,
+	}))
+	clipper.rooms.push( new room ({
+		rect: new rect(300,100, 600,300),
+		height: 400,
+	}))
+	clipper.rooms.push( new room ({
+		rect: new rect(400,200, 700,400),
+		height: 500,
+	}))
 
 	builder.init()
 	clipper.init()
diff --git a/assets/javascripts/rectangles/builder.js b/assets/javascripts/rectangles/builder.js
index 09040a8..edca2ed 100644
--- a/assets/javascripts/rectangles/builder.js
+++ b/assets/javascripts/rectangles/builder.js
@@ -45,12 +45,13 @@ var builder = new function(){
 		
 		var width = r.x.length()
 		var depth = r.y.length()
-		var height = 500
+		var height = clipper.rooms[r.id].height
 
 		if (r.sides & FRONT) {
 			el = wall('.front')
 			el.width = width
 			el.height = height
+			el.rotationY = PI
 			el.x = r.x.a + width/2
 			el.z = r.y.a
 			list.push(el)
@@ -59,14 +60,14 @@ var builder = new function(){
 			var el = wall('.back')
 			el.width = width
 			el.height = height
-			el.rotationY = PI
+			el.rotationY = 0
 			el.x = r.x.b - width/2
 			el.z = r.y.b
 			list.push(el)
 		}
 		if (r.sides & LEFT) {
 			el = wall('.left')
-			el.rotationY = -HALF_PI
+			el.rotationY = HALF_PI
 			el.height = height
 			el.width = depth
 			el.x = r.x.a
@@ -75,7 +76,7 @@ var builder = new function(){
 		}
 		if (r.sides & RIGHT) {
 			el = wall('.right')
-			el.rotationY = HALF_PI
+			el.rotationY = -HALF_PI
 			el.height = height
 			el.width = depth
 			el.x = r.x.b
@@ -83,12 +84,35 @@ var builder = new function(){
 			list.push(el)
 		}
 
+		el = wall('.bottom')
+		el.height = depth
+		el.width = width
+		el.x = r.x.a + width/2
+		el.y = 0
+		el.z = r.y.a + depth/2
+		el.rotationX = PI/2
+		el.el.style.backgroundColor = "#f00"
+		list.push(el)
+
+		if (r.sides != 0) {
+			el = wall('.top')
+			el.height = depth
+			el.width = width
+			el.x = r.x.a + width/2
+			el.y = height
+			el.z = r.y.a + depth/2
+			el.rotationX = -PI/2
+			el.el.style.backgroundColor = "#00f"
+			list.push(el)
+		}
+
 		function wall(klass){
 			var el = new MX.Object3D(".face" + (klass || ""))
 			el.width = el.height = el.scaleX = el.scaleY = el.scaleZ = 1
 			el.z = el.y = el.x = 0
 			el.y = height/2
 			el.type = "Face"
+			el.el.style.opacity = 1.0
 			return el
 		}
 		
diff --git a/assets/javascripts/rectangles/clipper.js b/assets/javascripts/rectangles/clipper.js
index c606c8e..e712b71 100644
--- a/assets/javascripts/rectangles/clipper.js
+++ b/assets/javascripts/rectangles/clipper.js
@@ -32,12 +32,14 @@ var clipper = new function(){
 		draw_mouse(base.mouse)
 		modified = z = false
 	}
+	
 	base.add_room = function(r){
 		rooms.push( new room({
-			id: rooms.length,
+			id: base.rooms.length,
 			rect: r,
 		}) )
 	}
+	
 	base.bind = function(){
 		canvas.addEventListener("mousedown", function(e){
 			e.stopPropagation()
@@ -106,12 +108,14 @@ var clipper = new function(){
 	}
 
 	function solve_rects(){
-		var rooms = sort_rooms_by_position( base.rooms )
 
-		for (var i = 0; i < rooms.length; i++) {
-			rooms[i].id = i
-			rooms[i].reset()
+		for (var i = 0; i < base.rooms.length; i++) {
+			base.rooms[i].id = i
+			base.rooms[i].reset()
 		}
+
+		var rooms = sort_rooms_by_position( base.rooms )
+
 		var regions = []
 
 		var left, right
diff --git a/assets/javascripts/rectangles/room.js b/assets/javascripts/rectangles/room.js
index 795ef29..8c9d67d 100644
--- a/assets/javascripts/rectangles/room.js
+++ b/assets/javascripts/rectangles/room.js
@@ -1,10 +1,10 @@
 window.room = (function(){
 
 	var room = function(opt){
-		this.id = opt.id
+		this.id = opt.id || clipper.rooms.length
 		this.rect = opt.rect
 		this.regions = []
-		this.height = 500
+		this.height = opt.height || 200
 		this.focused = false
 	}
 	
@@ -14,6 +14,7 @@ window.room = (function(){
 
 	room.prototype.reset = function(){
 		var copy = this.rect.clone()
+		copy.id = this.id
 		copy.sides = FRONT | BACK | LEFT | RIGHT
 		this.regions = [ copy ]
 	}
diff --git a/assets/stylesheets/css.css b/assets/stylesheets/css.css
index 1e54a94..23ca23e 100644
--- a/assets/stylesheets/css.css
+++ b/assets/stylesheets/css.css
@@ -27,10 +27,12 @@ html, body {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility:    hidden;
   -ms-backface-visibility:     hidden;
+  backface-visibility:         hidden;
 }
 .mx-object3d.backface-visible, .mx-object3d.backface-visible canvas{
   -webkit-backface-visibility: visible;
   -moz-backface-visibility:    visible;
   -ms-backface-visibility:     visible;
+  backface-visibility:         visible;
 }