2 files changed, 59 insertions, 4 deletions
diff --git a/public/assets/javascripts/rectangles/models/room.js b/public/assets/javascripts/rectangles/models/room.js
index d19ca2f..c2850ba 100644
--- a/public/assets/javascripts/rectangles/models/room.js
+++ b/public/assets/javascripts/rectangles/models/room.js
@@ -109,10 +109,10 @@
 			var side = pair[0], els = pair[1]
 			
 			if (side & LEFT_RIGHT) {
- 				els.sort(sort.compare_x)
+ 				els.sort(sort.compare_rect_x)
 			}
 			else if (side & FRONT_BACK) {
- 				els.sort(sort.compare_z)
+ 				els.sort(sort.compare_rect_y)
 			}
 			
 			// wall holds state for the last wall we created/saw..
diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index 9e37785..027d5f5 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -53,6 +53,7 @@ window.Wall = (function(){
 				}
 			}
 		})
+		this.outline()
 	}
 	
 	Wall.prototype.bounds_for = function(img, scale) {
@@ -116,12 +117,12 @@ window.Wall = (function(){
 	}
 	
 	Wall.prototype.wallpaper = function(){
-		var useZ = this.side & FRONT_BACK
+		var useX = this.side & FRONT_BACK
 		var shouldFlip = this.side & (LEFT | BACK)
 		this.siblings().forEach(function(w){
 			w.mx.forEach(function(mx){
 				
-				var partitionOffset = useZ ? mx.x : mx.z
+				var partitionOffset = useX ? mx.x : mx.z
 				if (shouldFlip) partitionOffset *= -1
 				partitionOffset += mx.width/2
 				var floorOffset = mx.y + mx.height/2
@@ -132,6 +133,60 @@ window.Wall = (function(){
 		})
 	}
 	
+	Wall.prototype.outline = function(){
+		var canvas = document.createElement("canvas")
+		var ctx = canvas.getContext('2d')
+		var useX = this.side & FRONT_BACK
+		var shouldFlip = this.side & (LEFT | BACK)
+
+		var sortedWalls = this.siblings().reduce(function(a,w){
+			return a.concat(w.mx)
+		}, []).sort( useX ? sort.compare_x : sort.compare_z )
+
+		if (shouldFlip) {
+			sortedWalls = sortedWalls.reverse()
+		}
+		
+console.log(sortedWalls.map(function(z){return useX ? z.x : z.z}).join(" "))
+
+		var len = sortedWalls.length
+		
+		zz = window.zz || 0
+
+		sortedWalls.forEach(function(mx, i){
+			if (mx.outlined) return
+			mx.outlined = true
+			canvas.width = mx.width
+			canvas.height = mx.height
+			ctx.fillStyle = "rgba(255,255,255,0.9)"
+			ctx.fillRect(0, 0, canvas.width, canvas.height)
+			ctx.fillStyle = "rgba(0,0,0,1.0)"
+
+			// all walls except top-half walls get bottom lines
+			ctx.fillRect(0, 0, canvas.width, 1)
+			
+			// all walls except bottom-half walls get top lines
+			ctx.fillRect(0, canvas.height-1, canvas.width, 1)
+			
+			// walls on initial sides get left lines
+			// if their left edge lines up with the rect edge
+			if (i == 0) {
+ 				ctx.fillRect(0, 0, 1, canvas.height)
+			}
+			
+			// walls on terminal sides get right lines....
+			// if their right edge lines up with the rect edge
+			if (i == len-1) {
+				// ctx.fillStyle = "rgba(255,0,0,1.0)"
+				ctx.fillRect(canvas.width-1, 0, 1, canvas.height)
+			}
+			var dataUrl = canvas.toDataURL()
+
+			mx.el.style.backgroundImage = "url(" + dataUrl + ")"
+		})
+		window.zz += 1
+	}
+	
 	Wall.prototype.siblings = function(){
 		var base = this
 		var match = base.side | base.half_side