constrain position to walls

5 files changed, 26 insertions, 16 deletions

diff --git a/assets/javascripts/app.js b/assets/javascripts/app.js
index b142a02..1f7fc7d 100644
--- a/assets/javascripts/app.js
+++ b/assets/javascripts/app.js
@@ -15,7 +15,7 @@ var scene,
 		cam,
 		map;
 
-var viewHeight = window.viewHeight || 100
+var viewHeight = window.viewHeight || 150
 
 var app = new function(){}
 app.dragging = false
diff --git a/assets/javascripts/rectangles/engine/builder.js b/assets/javascripts/rectangles/engine/builder.js
index 67dd922..0d2240d 100644
--- a/assets/javascripts/rectangles/engine/builder.js
+++ b/assets/javascripts/rectangles/engine/builder.js
@@ -281,8 +281,12 @@ var builder = new function(){
 		el.side = 0
 		el.rect = null
 		el.destroy = function(){
-			this.el = this.rect = null
+			this.el = this.rect = this.rect.x = this.rect.y = null
 		}
+
+		// possible if walls are opaque
+		// el.el.classList.add("backface-hidden")
+
 		return el
 	}
 
diff --git a/assets/javascripts/rectangles/engine/scenery.js b/assets/javascripts/rectangles/engine/scenery.js
index 816bf06..79ffbf2 100644
--- a/assets/javascripts/rectangles/engine/scenery.js
+++ b/assets/javascripts/rectangles/engine/scenery.js
@@ -41,7 +41,7 @@ var scenery = new function(){
 				z = wall.rect.y.a + 10
 				break
 			case BACK:
-				x = wall.rect.x.b - wall.rect.x.length()/2
+				x = wall.rect.x.a + wall.rect.x.length()/2
 				z = wall.rect.y.b - 10
 				break
 			case LEFT:
@@ -50,14 +50,14 @@ var scenery = new function(){
 				break
 			case RIGHT:
 				x = wall.rect.x.b - 10
- 				z = wall.rect.y.b - wall.rect.y.length()/2
+ 				z = wall.rect.y.a + wall.rect.y.length()/2
 				break
 		}
 
 		var mx_img = new MX.Image({
 			src: img.src,
 			x: x,
-			y: 70,
+			y: img.height/3,
 			z: z,
 			scale: 300/img.naturalWidth,
 			rotationY: wall_rotation[ wall.side ],
@@ -67,37 +67,39 @@ var scenery = new function(){
 
 		// https://s3.amazonaws.com/luckyplop/f5b2c20e602cdfc86383910f294dcf23d91fa956.png
 		
-		var x = 0, y = 0, z = 0, ry = 3 * PI/4
+		var x = 0, y = 0, z = 0, bounds
+
+		// should be proportional to distance from wall
+		var cursor_amp = 1.5
 		
 		my_mouse = new mouse ({ el: mx_img.el })
 		my_mouse.tube.on("down", function(e, cursor){
-			console.log("down")
 			x = mx_img.x
 			y = mx_img.y
 			z = mx_img.z
+			bounds = bounds_for(wall, img)
 		})
 		my_mouse.tube.on("drag", function(e, cursor){
-			console.log("drag")
-			mx_img.y = y - cursor.y.magnitude()
+			mx_img.y = bounds.y.clamp( y - cursor.y.magnitude()*cursor_amp )
 			switch (wall.side) {
 				case FRONT:
-					mx_img.x = x + cursor.x.magnitude()
+					mx_img.x = bounds.x.clamp( x + cursor.x.magnitude()*cursor_amp )
 					break
 				case BACK:
-					mx_img.x = x - cursor.x.magnitude()
+					mx_img.x = bounds.x.clamp( x - cursor.x.magnitude()*cursor_amp )
 					break
 				case LEFT:
-					mx_img.z = z - cursor.x.magnitude()
+					mx_img.z = bounds.x.clamp( z - cursor.x.magnitude()*cursor_amp )
 					break
 				case RIGHT:
-					mx_img.z = z + cursor.x.magnitude()
+					mx_img.z = bounds.x.clamp( z + cursor.x.magnitude()*cursor_amp )
 					break
 			}
 		})
 		my_mouse.tube.on("up", function(e, cursor){
 		})
 	}
-	
+		
 	return base
 
 }
diff --git a/assets/javascripts/rectangles/models/wall.js b/assets/javascripts/rectangles/models/wall.js
index 41d0e97..b1af41e 100644
--- a/assets/javascripts/rectangles/models/wall.js
+++ b/assets/javascripts/rectangles/models/wall.js
@@ -40,6 +40,11 @@ window.Wall = (function(){
 		})
 	}
 	
+	Wall.prototype.bounds_for(img) {
+		var coord = wall.side & FRONT_BACK ? wall.rect.x : wall.rect.y
+		return new Rect( new vec2( coord.a + img.width/2, coord.b - img.width/2 ),
+		                 new vec2( img.height/2, clipper.rooms[wall.room].height - img.height/2 ) )
+	}
 	
 	var bzz = 0
 	Wall.prototype.randomize_colors = function(){
diff --git a/rectangles.html b/rectangles.html
index 370e913..de8cf74 100644
--- a/rectangles.html
+++ b/rectangles.html
@@ -23,10 +23,9 @@ body > div {
 .back  { background-color: #fff; }
 .left  { background-color: #fff; }
 .right { background-color: #fff; }
-.floor { background-color: #ffe; }
+.floor { background-color: #eee; }
 .ceiling { background-color: rgba(230,230,255,0.3); }
 
-
 .active.floor { background-color: #ffe; }
 .active.ceiling { background-color: rgba(230,230,255,0.3); }