rough sketch of builder view

15 files changed, 144 insertions, 27 deletions

diff --git a/public/assets/javascripts/rectangles/_env.js b/public/assets/javascripts/rectangles/_env.js
index 972b1fe..09d1532 100644
--- a/public/assets/javascripts/rectangles/_env.js
+++ b/public/assets/javascripts/rectangles/_env.js
@@ -35,7 +35,7 @@ environment.init = function(){
 	
 	app.movements.gravity(true)
 	
-	$("#map").hide()
+	// $("#map").hide()
 	
 	Rooms.init()
 	Scenery.init()
diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js
index 967e28b..b62a813 100644
--- a/public/assets/javascripts/rectangles/engine/map/_map.js
+++ b/public/assets/javascripts/rectangles/engine/map/_map.js
@@ -9,8 +9,8 @@ var map = new function(){
 	
 	if (! base.el) return
 	
-	base.dimensions = new vec2(500,500)
-	base.bounds = new vec2(500,500)
+	base.dimensions = new vec2(window.innerWidth, window.innerHeight)
+	base.bounds = new vec2(window.innerWidth, window.innerHeight)
 	base.center = new vec2(0,0)
 	
 	base.sides = function(){
@@ -28,8 +28,8 @@ var map = new function(){
 
 	var canvas = document.createElement("canvas")
 	var ctx = window.ctx = canvas.getContext("2d")
-	var w = window.w = canvas.width = 500
-	var h = window.h = canvas.height = 500
+	var w = window.w = canvas.width = base.dimensions.a
+	var h = window.h = canvas.height = base.dimensions.b
 	document.querySelector("#map").appendChild(canvas)
 
 	base.update = function(){
diff --git a/public/assets/javascripts/rectangles/engine/map/draw.js b/public/assets/javascripts/rectangles/engine/map/draw.js
index b2fc05f..ec60d31 100644
--- a/public/assets/javascripts/rectangles/engine/map/draw.js
+++ b/public/assets/javascripts/rectangles/engine/map/draw.js
@@ -22,7 +22,7 @@ map.draw = new function(){
 	}
 
 	base.clear_canvas = function(){
-		ctx.fillStyle = "rgba(255,255,255,0.99)"
+		ctx.fillStyle = "rgba(255,255,255,0.9)"
 		ctx.clearRect(0,0,w,h)
 		ctx.fillRect(0,0,w,h)
 	}
diff --git a/public/assets/javascripts/ui/BuilderView.js b/public/assets/javascripts/ui/BuilderView.js
new file mode 100644
index 0000000..c91d9ee
--- /dev/null
+++ b/public/assets/javascripts/ui/BuilderView.js
@@ -0,0 +1,23 @@
+
+var BuilderView = View.extend({
+	el: "#builderView",
+
+	events: {
+		"click [data-role='toggle-map-view']": 'toggleMap',
+		"click [data-role='toggle-layout-settings']": 'toggleSettings',
+	},
+
+	load: function(){
+		$("#map").show()
+	},
+	
+	toggleMap: function(){
+		map.toggle()
+	},
+	
+	toggleSettings: function(){
+		this.$(".settings").toggleClass("active")
+	},
+
+})
+
diff --git a/public/assets/javascripts/ui/EditorView.js b/public/assets/javascripts/ui/EditorView.js
new file mode 100644
index 0000000..91329de
--- /dev/null
+++ b/public/assets/javascripts/ui/EditorView.js
@@ -0,0 +1,13 @@
+
+var EditorView = View.extend({
+//	el: "#editorControls",
+
+	events: {
+	},
+
+	load: function(){
+		$("#map").hide()
+	}
+
+})
+
diff --git a/public/assets/javascripts/ui/Router.js b/public/assets/javascripts/ui/Router.js
index 85ed1aa..fe544ae 100644
--- a/public/assets/javascripts/ui/Router.js
+++ b/public/assets/javascripts/ui/Router.js
@@ -25,6 +25,8 @@ var Router = View.extend({
 	},
 
 	initialize: function(){
+		this.builderView = new BuilderView()
+		this.editorView = new EditorView()
 		this.signUpModal = new SignUpModal()
 		this.signInModal = new SignInModal()
 		this.newProjectModal = new NewProjectModal()
@@ -62,11 +64,13 @@ var Router = View.extend({
 	launchBuilder: function(){
 		app.mode.builder = true
 		app.launch()
+		this.builderView.load()
 	},
 
 	launchEditor: function(){
 		app.mode.editor = true
 		app.launch()
+		this.editorView.load()
 	},
 	
 	signup: function(e){
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 53a198a..e5666ca 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -535,8 +535,14 @@ h5{
 #hud {
 	position: absolute;
 	top:0;left:0;
+	z-index: 2;
+}
+#palette {
+	position: fixed;
+	bottom:20px;left:20px;
 	z-index: 10;
 }
+
 .face {
 	background-color: #fff;
 	transition: 0.1s background-color ease;
@@ -593,6 +599,7 @@ h5{
   cursor:pointer;
 }
 .vvbox {
+	z-index: 3;
   border: 1px solid;
   position: fixed;
   display: inline-block;
@@ -612,6 +619,9 @@ h5{
   right: 10px;
   top: 70px;
   z-index:3;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
 }
 
 
diff --git a/views/builder.ejs b/views/builder.ejs
index 73cfa8d..b0e2004 100644
--- a/views/builder.ejs
+++ b/views/builder.ejs
@@ -10,7 +10,11 @@
 
 	<div class="rapper">
 		[[ include partials/header ]]
-		[[ include controls/builder/toolbar ]]
+		
+		<div id="builderView">
+			[[ include controls/builder/toolbar ]]
+			[[ include controls/builder/settings ]]
+		</div>
 
 	<!--
 		<div id="minimap" class="vvbox">
@@ -18,27 +22,27 @@
 		</div>
 	-->
 
+		<select id="palette">
+			<option>colors</option>
+			<option>redblue</option>
+			<option>gray</option>
+			<option selected>bone</option>
+			<option>alpha</option>
+			<option>white</option>
+			<option>black</option>
+		</select>
+
 		<div id="hud">
 			<div id="map" style="display: block">
 			</div>
 
 			<div id="info">
-				<select id="palette">
-					<option>colors</option>
-					<option>redblue</option>
-					<option>gray</option>
-					<option selected>bone</option>
-					<option>alpha</option>
-					<option>white</option>
-					<option>black</option>
-				</select>
 				<div id="intersects"></div>
 			</div>
 		</div>
 
 	</div>
 
-	[[ include partials/alert-modal ]]	
 	[[ include partials/confirm-modal ]]	
 	[[ include partials/sign-in ]]	
 
diff --git a/views/controls/builder/settings.ejs b/views/controls/builder/settings.ejs
new file mode 100644
index 0000000..f92d1c7
--- /dev/null
+++ b/views/controls/builder/settings.ejs
@@ -0,0 +1,40 @@
+<div class="vvbox settings">
+
+	<div class="setting">
+		<a href="#" id="startpoint">
+			<span class="icon-ios7-navigate-outline"></span>
+			<span id="startText">Select Startpoint</span>
+			<span id="moveText">Move to Desired Point</span></a>
+	</div>
+
+	<div class="setting">
+		<input type="text" placeholder="room name" />
+	</div>
+	
+	<div class="setting">
+		<textarea placeholder="short description"></textarea>
+	</div>
+	<div class="setting">
+		<input type="text" placeholder="http://vvalls.com/t987" />
+	</div>
+	<div class="setting">
+	<div class="radio-group">
+		<input id="opt_1" class="radio-group__option" type="radio" name="opt" checked="checked">
+		<label class="radio-group__label" for="opt_1">
+			Everyone
+		</label>
+		<input id="opt_2" class="radio-group__option" type="radio" name="opt">
+		<label class="radio-group__label" for="opt_2">
+			Just for me
+		</label>
+	</div>
+	</div>
+	<div class="setting">
+		<button>Save</button>
+	</div>
+	<div class="setting subButtons">
+		<a href="#">Clone</a>
+		<a href="#">Clear</a>
+		<a href="#" id="deleteRoom">Delete</a>
+	</div>
+</div>
\ No newline at end of file
diff --git a/views/controls/builder/toolbar.ejs b/views/controls/builder/toolbar.ejs
index 1bf87eb..1d57322 100644
--- a/views/controls/builder/toolbar.ejs
+++ b/views/controls/builder/toolbar.ejs
@@ -1,9 +1,29 @@
 <div class="edit menu vvbox">
-	<span class="icon-ios7-photos-outline addMedia" data-info="add media"></span>
-	<span class="icon-arrow-resize" data-info="resize media"></span>
-	<span class="icon-ios7-keypad-outline" data-info="add wallpaper"></span>
-	<span class="icon-ios7-sunny-outline" data-info="light control"></span>
-	<span class="icon-ios7-trash-outline delete-image-toggle" data-info="delete images"></span>
-	<span class="icon-ios7-compose-outline edit-text-toggle" data-info="edit wall text"></span>
-	<span class="icon-key" data-info="room settings"></span>
+	<span
+		data-info="add media"
+		class="icon-ios7-photos-outline"></span>
+	<span
+		data-role='undo'
+		data-info="undo"
+		class="icon-reply"></span>
+	<span
+		data-role='create-mode'
+		data-info="draw"
+		class="icon-plus"></span>
+	<span
+		data-role='resize-mode'
+		data-info="resize"
+		class="icon-arrow-resize"></span>
+	<span
+		data-role='move-mode'
+		data-info="move"
+		class="icon-arrow-move"></span>
+	<span
+		data-role='delete-mode'
+		data-info="delete"
+		class="icon-close"></span>
+	<span
+		data-role='toggle-layout-settings'
+		data-info="layout settings"
+		class="icon-ios7-compose-outline"></span>
 </div>
diff --git a/views/editor.ejs b/views/editor.ejs
index ff27282..133cbd3 100755
--- a/views/editor.ejs
+++ b/views/editor.ejs
@@ -44,7 +44,6 @@
 
 	</div>
 
-	[[ include partials/alert-modal ]]	
 	[[ include partials/confirm-modal ]]	
 	[[ include partials/sign-in ]]	
 
diff --git a/views/home.ejs b/views/home.ejs
index 899aa66..26bf1d7 100755
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -45,7 +45,6 @@
 	
 	<a href="#loadmore" class="viewMore">View More</a>
 
-	[[ include partials/alert-modal ]]	
 	[[ include partials/confirm-modal ]]	
 	[[ include partials/sign-in ]]	
 	[[ include partials/footer ]]
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index e0e98c2..c73cc47 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -2,10 +2,12 @@
 
 <span class="topLinks">
 [[ if (logged_in) { ]]
+	<a href="/builder" class="topLink">Layouts</a>
+	<a href="/editor" class="topLink">Projects</a>
 	[[ if (profile && String(user._id) == String(profile._id)) { ]]
 	<a href="/profile" data-role="edit-profile-modal" class="topLink editProfile">Edit Profile <span class="icon-ios7-gear-outline"></span></a>
 	[[ } else if (! profile) { ]]
-	<a href="/profile" class="topLink">View Profile</a>
+	<a href="/profile" class="topLink">Profile</a>
 	[[ } ]]
 [[ } else { ]]
 	<a href="#" data-role="show-signup-modal" class="signUp topLink">Sign Up</a>
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index b31b3f7..c80c174 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -55,5 +55,7 @@
 <script type="text/javascript" src="/assets/javascripts/ui/DocumentModal.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/AlertModal.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/ConfirmModal.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/BuilderView.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/EditorView.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/app.js"></script>
diff --git a/views/staff.ejs b/views/staff.ejs
index bc07bc2..13a0361 100644
--- a/views/staff.ejs
+++ b/views/staff.ejs
@@ -12,6 +12,7 @@
   - rooms list
   - projects list
 
+	[[ include partials/confirm-modal ]]
 	[[ include partials/footer ]]
 </div>