merge

1 files changed, 167 insertions, 107 deletions

diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index 6e2c728..8723c3c 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -1,21 +1,28 @@
-window.Wall = (function(){
+(function(){
 
+	var vec2, Rect, sort
+	if ('window' in this) {
+		vec2 = window.vec2
+		Rect = window.Rect
+		sort = window.sort
+	}
+	else {
+		vec2 = require('./vec2')
+		Rect = require('./rect')
+		UidGenerator = require('../util/uid')
+	}
+	
 	var Wall = function(opt){
 		this.id = opt.id
-		this.uid = Uid()
-		this.room = opt.room
-		this.rect = opt.rect || new Rect (0,0,0,0)
-		this.rect.sides = opt.side
+		this.vec = opt.vec
+		this.edge = opt.edge
 		this.side = opt.side
-		this.mx = []
- 		this.els = []
- 		if (opt.el) {
- 			this.mx.push(opt.el)
- 		}
+		this.surface = opt.surface
+		this.mx = opt.mx
 	}
 	
 	Wall.prototype.toString = function(){
-		return this.rect.toString()
+		return this.vec.toString()
 	}
 
 	Wall.prototype.reset = function(){
@@ -25,42 +32,118 @@ window.Wall = (function(){
 		this.mx.forEach(function(mx){
 			mx.destroy && mx.destroy()
 		})
-		this.room = this.rect = this.mx = this.els = null
+		this.room = this.vec = this.mx = null
 	}
 	
 	Wall.prototype.bind = function(){
 		var base = this
 		base.$walls = $( this.mx.map(function(mx){ return mx.el }) )
-		base.$walls.bind({
-			mouseover: function(){
-			},
-			mouseenter: function(e){
-				Scenery.mouse.mouseenter(e, base)
-			},
-			mousemove: function(e){
-			},
-			mousedown: function(){
-				// base.randomize_colors()
-				// console.log(sidesToString(base.side))
-				if (Scenery.nextMedia) {
-					var scenery = Scenery.addNextToWall(base)
-					
-					UndoStack.push({
-					  type: 'create-scenery',
-					  undo: { id: scenery.id },
-            redo: scenery.serialize(),
+		
+		this.mx.forEach(function(mx, index){
+			$(mx.el).bind({
+				mouseover: function(){
+				},
+				mouseenter: function(e){
+					Scenery.mouse.mouseenter(e, {
+						wall: base,
+						index: index,
 					})
+				},
+				mousemove: function(e){
+				},
+				mousedown: function(e){
+					if (Scenery.nextMedia) {
+            var scenery = Scenery.addNextToWall({
+            	wall: base,
+            	index: index
+            })
+            
+            // scenery was not placed
+            if (! scenery) {	
+            	e.stopPropagation()
+            	return
+            }
+					
+  					UndoStack.push({
+  					  type: 'create-scenery',
+  					  undo: { id: scenery.id },
+              redo: scenery.serialize(),
+  					})
+
+  					// TODO: watch individual scenery object here
+  					Minotaur.watch( app.router.editorView.settings )
+					}
+					else if (Scenery.nextWallpaper) {
+						base.wallpaper()
+					}
+					else {
+						app.controller.hideExtras()
+					}
 				}
-				else if (Scenery.nextWallpaper) {
-					base.wallpaper()
-				}
-				else {
-					app.controller.hideExtras()
-				}
-			}
+			})
 		})
 		this.outline()
 	}
+
+
+  // wall
+  // side: corresponds to the orientation of this wall
+  // vec: equivalent to the bounds of the Surface
+  // edge: the coordinate of the normal of this surface
+  // 			 var useX = side & LEFT_RIGHT
+  //			 var useA = side & (FRONT | LEFT)
+  //       edge = mx.rect[useX ? 'x': 'y'][ useA ? 'a': 'b']
+  // surface: an ordered set of contiguous wall regions, corresponding to mx objects
+
+	Wall.prototype.positionToMx = function(position, dimension) {
+		var x, z
+		switch (this.side) {
+			case FRONT:
+				x = position.a + dimension.a / 2
+				z = this.edge + painting_distance_from_wall
+				break
+			case BACK:
+				x = position.a + dimension.a / 2
+				z = this.edge - painting_distance_from_wall
+				break
+			case LEFT:
+				x = this.edge + painting_distance_from_wall
+				z = position.a + dimension.a / 2
+				break
+			case RIGHT:
+				x = this.edge - painting_distance_from_wall
+ 				z = position.a + dimension.a / 2
+				break
+		}
+		return {
+		  x: x,
+		  y: position.b + dimension.b / 2,
+		  z: z,
+		  rotationY: wall_rotation[ this.side ],
+		}
+	}
+	Wall.prototype.mxToPosition = function(mx, dimension) {
+	  var position = new vec2(0,0)
+	  switch (this.side) {
+	    case FRONT:
+	    case BACK:
+	      position.a = mx.x
+	      position.b = mx.y
+	      break
+	    case LEFT:
+	    case RIGHT:
+	      position.a = mx.z
+	      position.b = mx.y
+	      break
+	  }
+	  if (dimension) {
+	  	position.a -= dimension.a / 2
+	  	position.b -= dimension.b / 2
+	  }
+// 	  if (mx.width)  { position.a -= mx.width  / 2 }
+// 	  if (mx.height) { position.b -= mx.height / 2 }
+	  return position
+	}
 	
 	Wall.prototype.bounds_for = function(img, scale) {
 		scale = scale || 1
@@ -84,37 +167,25 @@ window.Wall = (function(){
 	
 	Wall.prototype.center = function(offset){
 	
-		offset = offset || 0
-
-		var major_axis, minor_axis
-		if (this.side & FRONT_BACK) {
-			major_axis = this.rect.x
-			minor_axis = this.rect.y
-		}
-		else {
-			major_axis = this.rect.y
-			minor_axis = this.rect.x
-		}
-		
 		switch (this.side) {
 			case FRONT:
-				x = major_axis.midpoint()
-				z = minor_axis.a + painting_distance_from_wall + offset
+				x = this.vec.midpoint()
+				z = this.edge + painting_distance_from_wall
 				break
 			case BACK:
-				x = major_axis.midpoint()
-				z = minor_axis.b - painting_distance_from_wall + offset
+				x = this.vec.midpoint()
+				z = this.edge - painting_distance_from_wall
 				break
 			case LEFT:
-				x = minor_axis.a + painting_distance_from_wall + offset
-				z = major_axis.midpoint()
+				x = this.edge + painting_distance_from_wall
+				z = this.vec.midpoint()
 				break
 			case RIGHT:
-				x = minor_axis.b - painting_distance_from_wall + offset
- 				z = major_axis.midpoint()
+				x = this.edge - painting_distance_from_wall
+ 				z = this.vec.midpoint()
 				break
 		}
-		
+
 		return new vec2 (x, z)
 	}
 	
@@ -125,88 +196,71 @@ window.Wall = (function(){
 	Wall.prototype.wallpaper = function(){
 		var useX = this.side & FRONT_BACK
 		var shouldFlip = this.side & (LEFT | BACK)
-		this.siblings().forEach(function(w){
-			w.mx.forEach(function(mx){
-				
-				var partitionOffset = useX ? mx.x : mx.z
-				if (shouldFlip) partitionOffset *= -1
-				partitionOffset += mx.width/2
-				var floorOffset = mx.y + mx.height/2
+		this.mx.forEach(function(mx){
+      var partitionOffset = useX ? mx.x : mx.z
+      if (shouldFlip) partitionOffset *= -1
+      partitionOffset += mx.width/2
+      var floorOffset = mx.y + mx.height/2
 
-				mx.el.style.backgroundImage = Scenery.nextWallpaper
-				mx.el.style.backgroundPosition = (~~partitionOffset) + "px " + (~~floorOffset) + "px"
-			})
-		})
+      mx.el.style.backgroundImage = Scenery.nextWallpaper
+      mx.el.style.backgroundPosition = (~~partitionOffset) + "px " + (~~floorOffset) + "px"
+    })
 	}
 	
 	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 mx = this.mx
 
-		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()
+		if (! shouldFlip) {
+			mx = mx.reverse()
 		}
 
-		var len = sortedWalls.length
+		var len = this.mx.length
 		
+    var backgroundColor = "rgba(255,255,255,0.95)"
+    var borderColor = "rgba(0,0,0,1.0)"
+
 		zz = window.zz || 0
 
-		sortedWalls.forEach(function(mx, i){
+		mx.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)"
+      mx.el.style.backgroundColor = backgroundColor
 
-			// all walls except top-half walls get bottom lines
-			ctx.fillRect(0, 0, canvas.width, 1)
+			// all walls get bottom lines
+			mx.el.style.borderBottom = "1px solid " + borderColor
 			
-			// all walls except bottom-half walls get top lines
-			ctx.fillRect(0, canvas.height-1, canvas.width, 1)
+			// all walls get top lines
+			mx.el.style.borderTop = "1px solid " + borderColor
 			
 			// 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)
+        mx.el.style.borderLeft = "1px solid " + borderColor
 			}
 			
 			// 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)
+        mx.el.style.borderRight = "1px solid " + borderColor
 			}
-			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
-		var walls = Rooms.list[this.room].walls.filter(function(w){
-			return (w.side | w.half_side) & match && w.$walls
-		})
-		return walls
+		return this
+// 		var base = this
+// 		var match = base.side | base.half_side
+// 		var walls = Rooms.list[this.room].walls.filter(function(w){
+// 			return (w.side | w.half_side) & match && w.$walls
+// 		})
+// 		return walls
 	}
 
 	Wall.prototype.randomize_colors = function(){
 		var color = window.grayColors[ this.side | this.half_side ]
-		var siblings = this.siblings()
-		siblings.forEach(function(w, i){
-			if (! w.$walls) return
-			w.color(color)
-		})
+		// this.color(color)
 	}
 
 	Wall.prototype.stroke_colors = function(){
@@ -226,6 +280,12 @@ window.Wall = (function(){
 		})
 	}
 	
-	return Wall
+	if ('window' in this) {
+		window.Wall = Wall
+	}
+	else {
+		module.exports = Wall
+	}
+
 
 })()