matrix mode

7 files changed, 101 insertions, 36 deletions

diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
index f2348f0..5c16ce6 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
@@ -140,6 +140,36 @@
 			var rgb_min = Math.min.apply(255, rgb)
 			return (rgb_max + rgb_min ) / 2
 		}
+    
+    base.setBodyColor = function(){
+  		$("#header").toggleClass("black", Walls.luminance() < 100)
+			$("body").css("background-color", rgb_string( Walls.colors.wall ))
+		}
+		base.clearBodyColor = function(){
+			$("#header").removeClass("black")
+			$("body").css("background-color", "transparent")
+		}
+		
+		base.setWallpaper = {
+			wall: function(background){
+				var img = new Image ()
+				img.onload = function(){
+					Walls.list.forEach(function(wall){
+						wall.wallpaper(background, img)
+					})
+				}.bind(this)
+				img.src = background.src
+				img.complete && img.onload()
+			}
+		}
+		
+		base.clearWallpaper = {
+			wall: function(){
+				Walls.list.forEach(function(wall){
+					wall.wallpaper("none")
+				})
+			}
+		}
 		
     base.setColor = {
     
@@ -181,7 +211,6 @@
           room.setCeilingColor(rgbColor)
         })
       },
-  
     }
   }
 
diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js
index dd63db2..fae2ce6 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/mover.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js
@@ -44,8 +44,7 @@ Rooms.mover = new function(){
 
 			// in this case, we appear to have left the room..
 			// $(".face.active").removeClass("active")
-			$("#header").removeClass("black")
-			$("body").css("background-color", "transparent")
+			Walls.clearBodyColor()
 			base.room = null
 		}
 
@@ -61,8 +60,9 @@ Rooms.mover = new function(){
 		// did we actually enter a room?
 		if (intersects.length) {
 			base.room = intersects[0]
-			$("#header").toggleClass("black", Walls.luminance() < 100)
-			$("body").css("background-color", rgb_string( Walls.colors.wall ))
+			if (! base.noclip) {
+				Walls.setBodyColor()
+			}
       app.tube("change-room", { room: base.room })
 		}
 
diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index 2ee88d9..542c99a 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -213,7 +213,7 @@
 		this.$walls.css("background-color", color)
 	}
 	
-	Wall.prototype.wallpaper = function(background){
+	Wall.prototype.wallpaper = function(background, img){
 	  if (! background) {
 	    background = { src: "none" }
 	  }
@@ -235,7 +235,7 @@
 		  return
 		}
 		
-		var img = new Image ()
+		img = img || new Image ()
 		img.onload = function(){
 		  this.backgroundImage = img
 		  this.wallpaperLoad(this.background.src)
diff --git a/public/assets/javascripts/ui/editor/ColorControl.js b/public/assets/javascripts/ui/editor/ColorControl.js
index 26358f1..61a7ef6 100644
--- a/public/assets/javascripts/ui/editor/ColorControl.js
+++ b/public/assets/javascripts/ui/editor/ColorControl.js
@@ -4,9 +4,10 @@ var ColorControl = View.extend({
   
   events: {
     "mousedown": "stopPropagation",
-    "click .color-swatches span": "select",
     "mousedown #brightness-control": "beginBrightness",
     "input #brightness-control": "updateBrightness",
+    "click .color-swatches span": "setSurface",
+    "click .colors span": "setHue",
   },
 
 	colors: [
@@ -48,16 +49,15 @@ var ColorControl = View.extend({
     	$swatch.css("background-color","rgb(" + color + ")")
     	$swatch.data('color', color)
     	this.$colors.append($swatch)
-    }.bind(this))
-    
+    }.bind(this))    
   },
 
   modes: [ "wall", "outline", "floor", "ceiling" ],
 
   load: function(data){
     this.modes.forEach(function(mode){
-      Walls.setColor[mode](data[mode])
-      this.$swatch[ mode ].css("background-color", rgb_string(data[mode]))
+			Walls.setColor[mode](data[mode])
+			this.$swatch[ mode ].css("background-color", rgb_string(data[mode]))
     }.bind(this))
     this.setMode("wall")
   },
@@ -134,11 +134,20 @@ var ColorControl = View.extend({
     this.$brightnessControl.val( this.labColor[0] )
   },
   
-  select: function(e){
+  setSurface: function(e){
     var mode = $('.swatch', e.currentTarget).data('mode')
     this.setMode(mode)
   },
   
+  setHue: function(e){
+  	var color = $(e.currentTarget).data('color')
+
+    this.labColor = this.colorPicker.load(color)
+    this.$brightnessControl.val( this.labColor[0] )
+
+    this.pick(color, this.labColor)
+  },
+  
   beginBrightness: function(){
     this.begin()
     $(window).one("mouseup", this.finalize.bind(this))
diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js
index a3dc610..c34c826 100644
--- a/public/assets/javascripts/ui/editor/Presets.js
+++ b/public/assets/javascripts/ui/editor/Presets.js
@@ -19,8 +19,9 @@ var Presets = View.extend({
       outline: [0,0,0],
       floor: [109,116,106],
       ceiling: [159,163,157],
+      background: [109,116,106],
     },
-    pfunk: {
+    "p.funk": {
       wall: [255,63,78],
       outline: [255,246,0],
       floor: [255,255,0],
@@ -32,10 +33,24 @@ var Presets = View.extend({
       floor: [0,0,0],
       ceiling: [0,0,0],
     },
+    matrix: {
+    	wall: { src: "http://bibleway.biz/images/Matrix1.gif", scale: 4.0, color: [0,0,0] },
+    	outline: [0,0,0],
+      floor: [10,15,10],
+      ceiling: [0,0,0],
+    },
   },
   
   initialize: function(opt){
     this.parent = opt.parent
+
+		this.$presets = this.$(".presets")
+  	_.keys(this.presets).forEach(function(name){
+			var $swatch = $("<span>")
+			$swatch.html(capitalize(name))
+			$swatch.data('preset', name)
+			this.$presets.append($swatch)
+  	}.bind(this))
   },
 
   toggle: function(state){
@@ -54,9 +69,9 @@ var Presets = View.extend({
   selectPreset: function(e){
     var preset = $(e.currentTarget).data('preset')
     if (! this.presets[preset]) return
-    this.parent.colorControl.load(this.presets[preset])
     this.$(".active").removeClass('active')
     $(e.currentTarget).addClass('active')
+    this.load(this.presets[preset])
   },
   
   selectColor: function(e){
@@ -64,4 +79,24 @@ var Presets = View.extend({
     console.log(preset)
   },
   
+  lastPreset: {wall:[1],outline:[1],floor:[1],ceiling:[1]},
+  load: function(preset){
+    this.parent.colorControl.modes.forEach(function(mode){
+    	if (! preset[mode].length) {
+    		Walls.setWallpaper[mode](preset[mode])
+				Walls.setColor[mode](preset[mode].color)
+			}
+			else {
+				if (! this.lastPreset[mode].length) {
+					Walls.clearWallpaper[mode]()
+				}
+				Walls.setColor[mode](preset[mode])
+				this.parent.colorControl.$swatch[ mode ].css("background-color", rgb_string(preset[mode]))
+    	}
+    }.bind(this))
+    this.parent.colorControl.setMode(preset.wall.color ? "wall" : "floor")
+    Walls.setBodyColor()
+    this.lastPreset = preset
+  },
+  
 })
\ No newline at end of file
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index d7999b9..bd2d42c 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1445,12 +1445,12 @@ border-left: 1px solid black;
 .wallpaper, #presets {
   right: 80px;
   margin-top: 77px;
-  width: 172px;
+  width: 202px;
   -webkit-transition: -webkit-transform 0.1s ease-in-out;
   -webkit-transform: translateX(400px);
   transition: transform 0.1s ease-in-out;
   transform: translateX(400px);
-	padding: 5px 5px 9px 5px;
+	padding: 10px 12px 12px 12px;
 }
 
 #presets {
@@ -1467,6 +1467,7 @@ border-left: 1px solid black;
   display: inline-block;
   border: 1px solid;
   background-size: contain;
+  margin: 0 2px 4px 2px;
   -webkit-transition: -webkit-transform 0.1s ease-in-out;
   line-height: 0;
   vertical-align: text-bottom;
@@ -1486,7 +1487,7 @@ border-left: 1px solid black;
 }
 
 .vvbox .colors {
-  max-width: 170px;
+  max-width: 155px;
 	margin-bottom: 5px;
 }
 .vvbox .colors span {
@@ -1585,7 +1586,7 @@ border-left: 1px solid black;
 .colorcontrol {
   margin-top: 8%;
   right: 80px;
-  padding: 13px 20px 20px 20px;
+  padding: 10px 12px 12px 12px;
   -webkit-transform: translateX(400px);
   -webkit-transition: -webkit-transform 0.2s ease-in-out;
   transform: translateX(400px);
@@ -1607,8 +1608,8 @@ input[type=range] {
   -moz-appearance: none;
   cursor: pointer;
   background-color: black;
-  width: 180px;
-  height:3px;
+  width: 155px;
+  height: 3px;
 }
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
@@ -1702,8 +1703,7 @@ input[type="range"]::-webkit-slider-thumb {
 	margin-bottom:5px;
 }
 .color-swatches span.active, .color-swatches span.active:hover{
-	background:#000;
-	color:white;
+	background: #fff;
 }
 .color-swatches span:nth-child(3){
 	clear:left;
@@ -1711,10 +1711,14 @@ input[type="range"]::-webkit-slider-thumb {
 .color-swatches span:hover {
 	background:#eee;
 }
+.color-swatches span.active label,
+.color-swatches span:hover label {
+	border-bottom: 1px solid;
+}
 
 .color-swatches label {
 	position: relative;
-	padding-left: 5px;
+	margin-left: 5px;
 	display: inline-block;
 	cursor: pointer;
 }
diff --git a/views/controls/editor/presets.ejs b/views/controls/editor/presets.ejs
index 8dd1986..04b1cf1 100644
--- a/views/controls/editor/presets.ejs
+++ b/views/controls/editor/presets.ejs
@@ -1,17 +1,5 @@
 <div class="vvbox" id="presets">
   <h4>Preset Styles</h4>
   <div class="presets">
-    <span data-preset="inverse">
-      Inverse
-    </span>
-    <span data-preset="shaded">
-      Shaded
-    </span>
-    <span data-preset="wireframe">
-      Wireframe
-    </span>
-    <span data-preset="pfunk">
-      P.Funk
-    </span>
   </div>
 </div>