floor/ceiling colors

4 files changed, 83 insertions, 8 deletions

diff --git a/public/assets/javascripts/rectangles/models/room.js b/public/assets/javascripts/rectangles/models/room.js
index 33a94d0..1cc929f 100644
--- a/public/assets/javascripts/rectangles/models/room.js
+++ b/public/assets/javascripts/rectangles/models/room.js
@@ -182,6 +182,18 @@
 		return collision
 	}
 
+  Room.prototype.setFloorColor = function(rgbColor) {
+    this.mx_floor.map(function(mx){
+      mx.el.style.backgroundColor = rgbColor
+    })
+  }
+  
+  Room.prototype.setCeilingColor = function(rgbColor) {
+    this.mx_ceiling.map(function(mx){
+      mx.el.style.backgroundColor = rgbColor
+    })
+  }
+
 	if ('window' in this) {
 		window.Room = Room
 	}
diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
index f35b19e..a3a19c7 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/LightControl.js
@@ -6,6 +6,8 @@ var LightControl = View.extend({
 		"mousedown": "stopPropagation",
 		"click #wall-color": "editWallColor",
 		"click #outline-color": "editOutlineColor",
+		"click #floor-color": "editFloorColor",
+		"click #ceiling-color": "editCeilingColor",
 		"click label": "clickLabel",
 		"input #shadow-control": "updateShadow",
 		"input #brightness-control": "updateBrightness",
@@ -17,14 +19,20 @@ var LightControl = View.extend({
 		this.colorPicker = new LabColorPicker(this, 180, 180)
 		this.$el.prepend( this.colorPicker.canvas )
 		
+		this.$swatches = this.$(".swatch")
+		this.$labels = this.$(".swatch + label")
 		this.$wallSwatch = this.$("#wall-color")
 		this.$outlineSwatch = this.$("#outline-color")
+		this.$floorSwatch = this.$("#floor-color")
+		this.$ceilingSwatch = this.$("#ceiling-color")
 		this.$brightnessControl = this.$("#brightness-control")
 		
 		this.setMode("wall")
 		
-		this.setWallColor([255,255,255], false)
-		this.setOutlineColor([0,0,0])
+		this.setWallColor(this.wallColor, false)
+		this.setOutlineColor(this.outlineColor)
+		this.setFloorColor(this.floorColor)
+		this.setCeilingColor(this.ceilingColor)
 	},
 	
 	toggle: function(state){
@@ -48,27 +56,44 @@ var LightControl = View.extend({
 	    case "outline":
 	      this.setOutlineColor(rgb)
 	      break
+	    case "floor":
+	      this.setFloorColor(rgb)
+	      break
+	    case "ceiling":
+	      this.setCeilingColor(rgb)
+	      break
 	  }
 	},
 	
 	wallColor: [255,255,255],
 	outlineColor: [0,0,0],
+	floorColor: [246,246,246],
+	ceilingColor: [255,255,255],
 	
 	setMode: function (mode) {
 	  var color, brightness
 	  this.mode = mode
+    this.$swatches.removeClass("selected")
+    this.$labels.removeClass("selected")
 	  switch (mode) {
 	    case "wall":
 	      this.$wallSwatch.addClass("selected")
-	      this.$outlineSwatch.removeClass("selected")
 	      color = this.wallColor
 	      break
 	    case "outline":
 	      this.$outlineSwatch.addClass("selected")
-	      this.$wallSwatch.removeClass("selected")
 	      color = this.outlineColor
 	      break
+	    case "floor":
+	      this.$floorSwatch.addClass("selected")
+	      color = this.floorColor
+	      break
+	    case "ceiling":
+	      this.$ceilingSwatch.addClass("selected")
+	      color = this.ceilingColor
+	      break
 	  }
+    this.$(".swatch.selected").next("label").addClass("selected")
 	  this.labColor = this.colorPicker.load(color)
 	  this.$brightnessControl.val( this.labColor[0] )
 	},
@@ -83,7 +108,15 @@ var LightControl = View.extend({
 	  this.setMode("outline")
 	},
 	
-	setWallColor: function(rgb, repaint){
+	editFloorColor: function(){
+	  this.setMode("floor")
+	},
+	
+	editCeilingColor: function(){
+	  this.setMode("ceiling")
+	},
+	
+  setWallColor: function(rgb, repaint){
 	  repaint = typeof repaint != "undefined" ? repaint : true
 	  var rgbColor = rgb_string(rgb)
 	  var rgbaColor = rgba_string(rgb, 0.95)
@@ -94,6 +127,26 @@ var LightControl = View.extend({
 	  })
 	},
 
+	setFloorColor: function(rgb, repaint){
+	  repaint = typeof repaint != "undefined" ? repaint : true
+	  var rgbColor = rgb_string(rgb)
+	  this.floorColor = rgb
+	  this.$floorSwatch.css("background-color", rgbColor)
+	  Rooms.forEach(function(room){
+	    room.setFloorColor(rgbColor)
+	  })
+	},
+
+	setCeilingColor: function(rgb, repaint){
+	  repaint = typeof repaint != "undefined" ? repaint : true
+	  var rgbColor = rgb_string(rgb)
+	  this.ceilingColor = rgb
+	  this.$ceilingSwatch.css("background-color", rgbColor)
+	  Rooms.forEach(function(room){
+	    room.setCeilingColor(rgbColor)
+	  })
+	},
+
 	setOutlineColor: function(rgb){
 	  repaint = typeof repaint != "undefined" ? repaint : true
 	  var rgbColor = rgb_string(rgb)
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index ff35ca4..6f6a192 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1201,6 +1201,7 @@ input[type="range"]::-webkit-slider-thumb {
   height: 20px;
   border: 1px solid black;
   display: inline-block;
+  cursor: pointer;
 }
 .swatch.selected {
   border-width: 2px;
@@ -1213,7 +1214,13 @@ input[type="range"]::-webkit-slider-thumb {
   font-weight: 300;
   position: relative;
   top: -6px;
-  margin-right: 15px;
+  padding-left: 5px;
+  display: inline-block;
+  width: 60px;
+  cursor: pointer;
+}
+.color-swatches label.selected {
+  font-weight: 500;
 }
 
 
diff --git a/views/controls/editor/light-control.ejs b/views/controls/editor/light-control.ejs
index 4324087..02a78b6 100644
--- a/views/controls/editor/light-control.ejs
+++ b/views/controls/editor/light-control.ejs
@@ -6,8 +6,11 @@
 	</div>
 
   <div class="color-swatches">
-    <div class="swatch" id="wall-color"></div> <label>wall color</label>
-    <div class="swatch" id="outline-color"></div> <label>outline color</label>
+    <div class="swatch" id="wall-color"></div><label>wall</label>
+    <div class="swatch" id="outline-color"></div><label>outlines</label>
+    <br>
+    <div class="swatch" id="floor-color"></div><label>floor</label>
+    <div class="swatch" id="ceiling-color"></div><label>ceiling</label>
   </div>
 
 <!--