From 527a65ca570891ff473dbdac36d41b1be60196f1 Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Tue, 14 Oct 2014 19:16:45 -0400
Subject: load more on media drawer and some other stuff

---
 .../javascripts/rectangles/engine/rooms/_walls.js     | 19 ++++++++++++-------
 .../javascripts/rectangles/engine/rooms/mover.js      |  2 ++
 2 files changed, 14 insertions(+), 7 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine/rooms')

diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
index 0da3b9a..119a659 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
@@ -134,19 +134,24 @@
       })
 		}
 		
+		base.luminance = function(rgb){
+			rgb = rgb || Walls.colors.wall
+			var rgb_max = Math.max.apply(0, rgb)
+			var rgb_min = Math.min.apply(255, rgb)
+			return (rgb_max + rgb_min ) / 2
+		}
+		
     base.setColor = {
     
       wall: function(rgb){
         var rgbaColor = rgba_string(rgb, app.defaults.wallOpacity)
         var rgbColor = rgb_string(rgb)
+        				
+				if (Rooms.mover.room) {
+					$("#header").toggleClass("black", base.luminance() < 100)
+					$("body").css("background-color", rgbColor)
+				}
         
-        var rgb_max = Math.max.apply(0, rgb)
-        var rgb_min = Math.min.apply(255, rgb)
-        var luminance = (rgb_max + rgb_min ) / 2
-
-        $("#header").toggleClass("black", luminance < 128)
-        $("body").css("background-color", rgbColor)
-                
         Walls.colors.wall = rgb
         Walls.list.forEach(function(wall){
           wall.outline(rgbaColor, null)
diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js
index 98f80c5..a2d2223 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/mover.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js
@@ -43,6 +43,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")
 			base.room = null
 		}
@@ -59,6 +60,7 @@ 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 ))
       app.tube("change-room", { room: base.room })
 		}
-- 
cgit v1.2.3-70-g09d2


From d50fa94e9b758270b15dfeb5100063c6d876d64c Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Wed, 15 Oct 2014 12:04:00 -0400
Subject: cursor that follows mouse

---
 .../javascripts/mx/extensions/mx.movements.js      | 14 ++++----
 .../javascripts/rectangles/engine/rooms/_walls.js  |  2 +-
 .../javascripts/rectangles/engine/rooms/mover.js   |  3 +-
 public/assets/javascripts/ui/editor/EditorView.js  |  1 +
 public/assets/javascripts/ui/editor/HelpCursor.js  | 38 ++++++++++++++++++++++
 public/assets/javascripts/ui/editor/MediaViewer.js | 33 ++++++++++++++-----
 public/assets/stylesheets/app.css                  | 18 +++++++---
 views/controls/editor/media-drawer.ejs             | 13 +++++++-
 views/controls/editor/settings.ejs                 |  2 ++
 views/partials/scripts.ejs                         |  1 +
 10 files changed, 104 insertions(+), 21 deletions(-)
 create mode 100644 public/assets/javascripts/ui/editor/HelpCursor.js

(limited to 'public/assets/javascripts/rectangles/engine/rooms')

diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index 5ba5d69..b158625 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -226,12 +226,14 @@ MX.Movements = function (cam) {
 		},
 		
 		mousewheel: function (e, deltaY, deltaX) {
-			cam.rotationY += deltaX / 20
-
-			pos.x += deltaY * Math.cos(cam.rotationY + Math.PI / 2) * 10
-			pos.z += deltaY * Math.sin(cam.rotationY + Math.PI / 2) * 10
-
-			app.tube("move", pos)
+		  if (e.shiftKey) {
+        cam.rotationY -= deltaY / 150
+      }
+      else {
+        pos.x += deltaY * Math.cos(cam.rotationY + Math.PI / 2) * 10
+        pos.z += deltaY * Math.sin(cam.rotationY + Math.PI / 2) * 10
+        app.tube("move", pos)
+      }
 		},
 
 		update: function () {
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
index 119a659..f2348f0 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
@@ -135,7 +135,7 @@
 		}
 		
 		base.luminance = function(rgb){
-			rgb = rgb || Walls.colors.wall
+			rgb = rgb || Walls.colors.ceiling
 			var rgb_max = Math.max.apply(0, rgb)
 			var rgb_min = Math.min.apply(255, rgb)
 			return (rgb_max + rgb_min ) / 2
diff --git a/public/assets/javascripts/rectangles/engine/rooms/mover.js b/public/assets/javascripts/rectangles/engine/rooms/mover.js
index a2d2223..dd63db2 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/mover.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/mover.js
@@ -11,7 +11,8 @@ Rooms.mover = new function(){
 	
 	base.bind = function(){
 		app.on("move", base.update)
-		keys.on("backslash", function(){
+		keys.on("backslash", function(e){
+		  if ( ! (e.ctrlKey || e.metaKey) ) return
 			base.noclip = ! base.noclip
 			base.room = null
 			app.movements.gravity( ! base.noclip )
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index ccd6c63..05d1bec 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -9,6 +9,7 @@ var EditorView = View.extend({
 	},
 	
 	initialize: function(){
+	  this.cursor = new HelpCursor ({ parent: this })
 		this.toolbar = new EditorToolbar ({ parent: this })
 		this.settings = new EditorSettings ({ parent: this })
 		this.info = new BuilderInfo ({ parent: this })
diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js
new file mode 100644
index 0000000..842e871
--- /dev/null
+++ b/public/assets/javascripts/ui/editor/HelpCursor.js
@@ -0,0 +1,38 @@
+
+var HelpCursor = View.extend({
+	el: "#helpCursor",
+	
+	messages: {
+	  start: "Welcome to Vvalls!",
+	  move: "Use the up and down keys to move around. Use left and right to pivot. WASD works too.",
+	},
+	shown: {},
+
+  initialize: function(){
+    $(window).mousemove(function(e){
+      this.el.style.left = e.pageX + "px"
+      this.el.style.top = e.pageY + "px"
+    }.bind(this))
+    this.show("start")
+  },
+
+  show: function(name){
+    if (name) this.showMessage(name)
+    this.$el.show()
+  },
+
+  hide: function(){
+    this.$el.hide()
+  },
+
+  showMessage: function(name){
+    if (+(this.shown[name] || 0) < 2) {
+      this.$el.html(this.messages[name])
+      this.shown[name] = (+this.shown[name] || 0) + 1
+    }
+    else {
+      this.$el.html("")
+    }
+  },
+
+})
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index 10819af..b270be5 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -20,29 +20,46 @@ var MediaViewer = ModalView.extend({
 	initialize: function(opt){
 		this.__super__.initialize.call(this)
 		this.parent = opt.parent
+
 		this.$myMedia = this.$(".myMedia")
 		this.$myMediaContainer = this.$(".myMedia > .container")
 		this.$userToggle = this.$(".userToggle")
+
 		this.$foundMedia = this.$(".foundMedia")
 		this.$foundMediaContainer = this.$(".foundMedia > .container")
 		this.$foundToggle = this.$(".foundToggle")
+
+		this.$wallpaperMedia = this.$(".wallpaperMedia")
+		this.$wallpaperMediaContainer = this.$(".wallpaperMedia > .container")
+		this.$wallpaperToggle = this.$(".wallpaperToggle")
+
 		this.$deleteMedia = this.$("#deleteMedia")
 		this.$viewMore = this.$(".viewMore")
 		this.$noMedia = this.$(".noMedia")
   },
 
+	wallpaperToggle: function(){
+    this.$wallpaperMedia.addClass("active")
+    this.$foundMedia.addClass("inactive")
+    this.$myMedia.addClass("inactive")
+    this.$("a").removeClass("active")
+    this.$foundToggle.addClass("active")
+	},
+	
 	foundToggle: function(){
-    this.$foundMedia.addClass("active");
-    this.$myMedia.addClass("inactive");
-    this.$("a").removeClass("active");
-    this.$foundToggle.addClass("active");
+    this.$wallpaperMedia.removeClass("active")
+    this.$foundMedia.addClass("active")
+    this.$myMedia.addClass("inactive")
+    this.$("a").removeClass("active")
+    this.$foundToggle.addClass("active")
 	},
 	
 	userToggle: function(){
-    this.$foundMedia.removeClass("active");
-    this.$myMedia.removeClass("inactive");
-    this.$("a").removeClass("active");
-    this.$userToggle.addClass("active");
+    this.$wallpaperMedia.removeClass("active")
+    this.$foundMedia.removeClass("active")
+    this.$myMedia.removeClass("inactive")
+    this.$("a").removeClass("active")
+    this.$userToggle.addClass("active")
 	},
 
 	show: function(){
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index cf98170..0140dc6 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -901,7 +901,7 @@ border-left: 1px solid black;
 
 .face {
 	background-color: #fff;
-	transition: 0.1s background-color ease;
+	transition: 0.1s background-color ease, 0.05s background-color ease;
 }
 .front { background-color: #fff; }
 .back  { background-color: #fff; }
@@ -1271,7 +1271,7 @@ border-left: 1px solid black;
 .noMedia {
   margin: 40px;
 }
-.foundMedia {
+.foundMedia, .wallpaperMedia {
   position:absolute;
   top:0;
   left:0;
@@ -1282,8 +1282,7 @@ border-left: 1px solid black;
   padding-top:40px;
   width: 100%;
 }
-
-.foundMedia.active {
+.foundMedia.active, .wallpaperMedia.active {
   -webkit-transform: translateX(0%);
   transform: translateX(0%);
 }
@@ -1718,6 +1717,17 @@ input[type="range"]::-webkit-slider-thumb {
 	cursor: pointer;
 }
 
+#helpCursor {
+  position: fixed;
+  max-width: 200px;
+  font-size: 13px;
+  color: black;
+  background: #fff;
+  margin: 8px 0 0 8px;
+  padding: 4px;
+  font-weight: 500;
+  z-index: 22;
+}
 
 .settings.info {
   right: auto;
diff --git a/views/controls/editor/media-drawer.ejs b/views/controls/editor/media-drawer.ejs
index 7996f84..d1e2c99 100644
--- a/views/controls/editor/media-drawer.ejs
+++ b/views/controls/editor/media-drawer.ejs
@@ -6,7 +6,13 @@
 <span class="close" id="fixed_close">X</span>
 
 <div class="mediaDrawer fixed animate mediaViewer">
-	<h2><a href="#" class="userToggle active">Your Media</a> – <a href="#" class="foundToggle">Found Media</a></h2><br>
+	<h2>
+	  <a href="#" class="userToggle active">Your Media</a>
+	  – <a href="#" class="foundToggle">Found Media</a>
+<!--
+	  – <a href="#" class="wallpaperToggle">Wallpaper</a>
+ -->
+	</h2><br>
 	<h3 class="editBtn warn" id="deleteMedia"></h3>
 
 	<div class="myMedia">
@@ -29,4 +35,9 @@
 	<div class="foundMedia">
 	  <span class="container"></span>
  	</div>
+ 	
+ 	<div class="wallpaperMedia">
+	  <span class="container"></span>
+ 	</div>
+ 	
 </div>
\ No newline at end of file
diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs
index 7c40a75..8443abb 100644
--- a/views/controls/editor/settings.ejs
+++ b/views/controls/editor/settings.ejs
@@ -1,3 +1,5 @@
+<span id="helpCursor"></span>
+
 <div class="vvbox settings" id="editorSettings">
 	<h4>Room Settings</h4>
 	<input type="hidden" name="_csrf" value="[[- token ]]">
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 07ee7a5..05f4b58 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -102,6 +102,7 @@
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorView.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorSettings.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorToolbar.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/editor/HelpCursor.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/LightControl.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/Collaborators.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaEditor.js"></script>
-- 
cgit v1.2.3-70-g09d2


From 9ae4f45f24e3e79aeb32e0a128ee798381b80569 Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Wed, 15 Oct 2014 22:35:48 -0400
Subject: more help text

---
 public/assets/javascripts/defaults.js                        | 2 +-
 public/assets/javascripts/rectangles/engine/rooms/builder.js | 2 +-
 public/assets/javascripts/ui/editor/HelpCursor.js            | 8 +++++---
 public/assets/javascripts/ui/editor/MediaViewer.js           | 5 ++++-
 public/assets/javascripts/ui/editor/Presets.js               | 4 ++--
 public/assets/stylesheets/app.css                            | 2 ++
 6 files changed, 15 insertions(+), 8 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine/rooms')

diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js
index 9ba0b4d..12aed62 100644
--- a/public/assets/javascripts/defaults.js
+++ b/public/assets/javascripts/defaults.js
@@ -3,7 +3,7 @@ app.defaults = {
 	units: app.units = "ft",
 	footResolution: 36,
 	meterResolution: 100,
-	wallOpacity: 0.95,
+	wallOpacity: 0.98,
 	outlineWidth: 2,
 	colors: {
     wall: [255,255,255],
diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js
index 33333fb..c95734b 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/builder.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js
@@ -280,7 +280,7 @@
 			return el
 		}
 		this.make_wall = function (klass) {
-		  // klass += ".backface-hidden"
+		  klass += ".backface-hidden"
 			var el = new MX.Object3D(".face" + (klass || ""))
 			el.width = el.height = el.scaleX = el.scaleY = el.scaleZ = 1
 			el.z = el.y = el.x = 0
diff --git a/public/assets/javascripts/ui/editor/HelpCursor.js b/public/assets/javascripts/ui/editor/HelpCursor.js
index 8bfaef8..9b6807e 100644
--- a/public/assets/javascripts/ui/editor/HelpCursor.js
+++ b/public/assets/javascripts/ui/editor/HelpCursor.js
@@ -5,9 +5,11 @@ var HelpCursor = View.extend({
 	active: false,
 	
 	messages: {
-	  start: "Welcome to Vvalls!  Click one of the tools at right to learn how it works.",
-	  media: "This is where you pick media to go on the walls.  You can upload media, paste links, or use some of the found media.",
-	  presets: "These presets will affect on all the walls.  Click some of them to see the walls change.",
+	  start: "Welcome to Vvalls!  Click one of the tools at right to learn about it.",
+	  media: "This is where you pick media to go on the walls.  You can upload media and paste links.",
+	  addmedia: "Great, now click a wall to place this image.",
+	  resize: "Drag the image to position it, or use the dots to resize.",
+	  presets: "These are some basic presets to get you started. Click em! :-)",
 	  wallpaper: "Drag the wallpaper onto the walls, floor, and ceiling.",
 	  colors: "Use these colors to change the color of the walls, floor, and ceiling.",
 	  settings: "This is where you publish your project. Give it a name, hit save, and you'll have a URL you can share with your friends.",
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index e196e41..8cae4a4 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -77,6 +77,7 @@ var MediaViewer = ModalView.extend({
 		this.__super__.hide.call(this)
 		this.deleteArmed(false)
 		this.parent.mediaUpload.hide()
+		this.parent.cursor.message('start')
 	},
 
 	load: function(){
@@ -232,7 +233,8 @@ var MediaViewer = ModalView.extend({
 		}
 
 		this.hide()
-		
+		this.parent.cursor.message('addmedia')
+
 		var $ants = $('.ants');
 		var $floatingImg = $('.floatingImg');
 		
@@ -267,6 +269,7 @@ var MediaViewer = ModalView.extend({
 			$(window).off('mousedown', _hideCursor)
       app.off('cancel-scenery', _hideCursor)
 			$floatingImg.parent().removeClass('edit')
+			app.controller.cursor.message('resize')
 		}
 		$(window).on('mousemove', _followCursor)
 		$(window).on('mousedown', _hideCursor)
diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js
index 35b5b58..4edc957 100644
--- a/public/assets/javascripts/ui/editor/Presets.js
+++ b/public/assets/javascripts/ui/editor/Presets.js
@@ -39,11 +39,11 @@ var Presets = View.extend({
   },
 
   toggle: function(state){
-    this.$el.toggleClass("active", state);
+    this.$el.toggleClass("active", state)
+    this.parent.cursor.message(state ? "presets" : "start")
   },
   
   show: function(){
-    this.parent.cursor.message("presets")
     this.toggle(true)
   },
   
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 250ae67..1ab1198 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1676,6 +1676,7 @@ input[type="range"]::-webkit-slider-thumb {
 	cursor:pointer;
   border-bottom: 1px transparent solid;
 }
+.presets span:hover,
 .presets span.active {
 	text-decoration: underline;
 }
@@ -1728,6 +1729,7 @@ input[type="range"]::-webkit-slider-thumb {
   padding: 4px;
   font-weight: 500;
   z-index: 22;
+  display: none;
 }
 
 .settings.info {
-- 
cgit v1.2.3-70-g09d2


From c13532ec95c2d410354f7d342df70fd68dd78272 Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Thu, 16 Oct 2014 02:21:46 -0400
Subject: matrix mode

---
 .../javascripts/rectangles/engine/rooms/_walls.js  | 31 ++++++++++++++++-
 .../javascripts/rectangles/engine/rooms/mover.js   |  8 ++---
 .../assets/javascripts/rectangles/models/wall.js   |  4 +--
 .../assets/javascripts/ui/editor/ColorControl.js   | 21 ++++++++----
 public/assets/javascripts/ui/editor/Presets.js     | 39 ++++++++++++++++++++--
 public/assets/stylesheets/app.css                  | 22 +++++++-----
 views/controls/editor/presets.ejs                  | 12 -------
 7 files changed, 101 insertions(+), 36 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine/rooms')

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>
-- 
cgit v1.2.3-70-g09d2


From 37851cbd12dcb17be77265164876184019d34602 Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Thu, 16 Oct 2014 03:09:22 -0400
Subject: .. and floor and ceiling

---
 .../javascripts/rectangles/engine/rooms/_walls.js  | 28 ++++++++++++++++++++--
 .../assets/javascripts/rectangles/models/floor.js  |  5 ++--
 public/assets/javascripts/ui/editor/Presets.js     | 25 ++++++++++++++++---
 public/assets/javascripts/util.js                  |  3 ++-
 public/assets/stylesheets/app.css                  |  7 ++++++
 views/controls/editor/presets.ejs                  |  1 +
 6 files changed, 60 insertions(+), 9 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine/rooms')

diff --git a/public/assets/javascripts/rectangles/engine/rooms/_walls.js b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
index 5c16ce6..fe5913d 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_walls.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_walls.js
@@ -160,7 +160,19 @@
 				}.bind(this)
 				img.src = background.src
 				img.complete && img.onload()
-			}
+			},
+			floor: function(background){
+				Walls.floors.forEach(function(floor){
+					if (floor.ceiling) return
+					floor.wallpaper(background)
+				})
+			},
+			ceiling: function(background){
+				Walls.floors.forEach(function(floor){
+					if (! floor.ceiling) return
+					floor.wallpaper(background)
+				})
+			},
 		}
 		
 		base.clearWallpaper = {
@@ -168,7 +180,19 @@
 				Walls.list.forEach(function(wall){
 					wall.wallpaper("none")
 				})
-			}
+			},
+			floor: function(){
+				Walls.floors.forEach(function(floor){
+					if (floor.ceiling) return
+					wall.wallpaper("none")
+				})
+			},
+			ceiling: function(){
+				Walls.floors.forEach(function(floor){
+					if (! floor.ceiling) return
+					wall.wallpaper("none")
+				})
+			},
 		}
 		
     base.setColor = {
diff --git a/public/assets/javascripts/rectangles/models/floor.js b/public/assets/javascripts/rectangles/models/floor.js
index 7ed52a1..9838232 100644
--- a/public/assets/javascripts/rectangles/models/floor.js
+++ b/public/assets/javascripts/rectangles/models/floor.js
@@ -15,6 +15,7 @@
 	var Floor = function(opt){
 		this.id = opt.id
 		this.side = opt.side
+		this.ceiling = opt.side & CEILING
 		this.mx = opt.mx
 	}
 	
@@ -114,8 +115,6 @@
 	  this.background.x = background.x || this.background.x
 	  this.background.y = background.y || this.background.y
 	  this.background.scale = background.scale || this.background.scale || 1
-	  
-		var shouldFlip = this.side & (CEILING)
 
 		var mx, dx, dy
 		var w = Math.round( this.backgroundImage.naturalWidth * this.background.scale )
@@ -125,7 +124,7 @@
       
       var region = mx.rect
       
-      if (shouldFlip) {
+      if (this.ceiling) {
         dx = Math.round( this.background.x - region.x.a )
         dy = Math.round( this.background.y - region.y.a )
       }
diff --git a/public/assets/javascripts/ui/editor/Presets.js b/public/assets/javascripts/ui/editor/Presets.js
index c34c826..cde2fdf 100644
--- a/public/assets/javascripts/ui/editor/Presets.js
+++ b/public/assets/javascripts/ui/editor/Presets.js
@@ -5,6 +5,8 @@ var Presets = View.extend({
 		"mousedown": "stopPropagation",
     "click .presets span": "selectPreset",
     "click .swatches span": "selectColor",
+    "change .url": "tileWalls",
+    "keydown .url": "enterSetUrl",
 	},
 	
   presets: {
@@ -21,7 +23,7 @@ var Presets = View.extend({
       ceiling: [159,163,157],
       background: [109,116,106],
     },
-    "p.funk": {
+    "p.Funk": {
       wall: [255,63,78],
       outline: [255,246,0],
       floor: [255,255,0],
@@ -34,7 +36,7 @@ var Presets = View.extend({
       ceiling: [0,0,0],
     },
     matrix: {
-    	wall: { src: "http://bibleway.biz/images/Matrix1.gif", scale: 4.0, color: [0,0,0] },
+    	wall: { src: "http://dump.fm/images/20130225/1361818675427-dumpfm-melipone-matrixremixtransfast.gif", scale: 4.0, color: [0,0,0] },
     	outline: [0,0,0],
       floor: [10,15,10],
       ceiling: [0,0,0],
@@ -43,7 +45,9 @@ var Presets = View.extend({
   
   initialize: function(opt){
     this.parent = opt.parent
-
+    
+    this.$url = this.$(".url")
+    
 		this.$presets = this.$(".presets")
   	_.keys(this.presets).forEach(function(name){
 			var $swatch = $("<span>")
@@ -99,4 +103,19 @@ var Presets = View.extend({
     this.lastPreset = preset
   },
   
+  tileWalls: function(){
+  	var url = this.$url.sanitize()
+  	if (url.length && url.indexOf("http://") == 0) {
+			Walls.setWallpaper.wall({ src: url })
+			Walls.setWallpaper.floor({ src: url })
+			Walls.setWallpaper.ceiling({ src: url })
+  	}
+  },
+	enterSetUrl: function (e) {
+		e.stopPropagation()
+		if (e.keyCode == 13) {
+			setTimeout(this.tileWalls.bind(this), 100)
+		}
+	},
+
 })
\ No newline at end of file
diff --git a/public/assets/javascripts/util.js b/public/assets/javascripts/util.js
index 76c5c7b..367e20e 100644
--- a/public/assets/javascripts/util.js
+++ b/public/assets/javascripts/util.js
@@ -4,10 +4,11 @@ if (window.$) {
   $.fn.string = function() { return trim($(this).val()) }
   $.fn.enable = function() { return $(this).attr("disabled",null) }
   $.fn.disable = function() { return $(this).attr("disabled","disabled") }
+  $.fn.sanitize = function(s) { return trim(sanitize($(this).val())) }
   $.fn.htmlSafe = function(s) { return $(this).html(sanitize(s)) }
 }
 
-function trim(s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") }
+function trim (s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") }
 function sanitize (s){ return (s || "").replace(new RegExp("[<>&]", 'g'), "") }
 function capitalize (s){ return s.split(" ").map(capitalizeWord).join(" ") }
 function capitalizeWord (s){ return s.charAt(0).toUpperCase() + s.slice(1) }
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index bd2d42c..a711baa 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1698,6 +1698,13 @@ input[type="range"]::-webkit-slider-thumb {
 	width: 100%;
 	color: #555;
 }
+#presets .url {
+	margin: 4px 0;
+	padding: 2px;
+	font-size: 12px;
+	border: 1px black solid;
+	width: 100%;
+}
 
 .color-swatches span:nth-child(1),.color-swatches span:nth-child(2){
 	margin-bottom:5px;
diff --git a/views/controls/editor/presets.ejs b/views/controls/editor/presets.ejs
index 04b1cf1..02e9d42 100644
--- a/views/controls/editor/presets.ejs
+++ b/views/controls/editor/presets.ejs
@@ -2,4 +2,5 @@
   <h4>Preset Styles</h4>
   <div class="presets">
   </div>
+  <input type="text" class="url" placeholder="enter a url">
 </div>
-- 
cgit v1.2.3-70-g09d2