login view, lobby view

11 files changed, 124 insertions, 15 deletions

diff --git a/public/css/css.css b/public/css/css.css
index 1fce66f..a8d3df1 100644
--- a/public/css/css.css
+++ b/public/css/css.css
@@ -3,3 +3,24 @@ html,body{width:100%;height:100%;margin:0;padding:0;}
 #bg.tile{background-size:auto auto;}
 html{background:black;}
 body{background:transparent;}
+#login {
+  display: none;
+}
+#login {
+  position: absolute; top: 0; left: 0;
+  width: 100%; height: 100%;
+  background: rgba(0,0,0,0.95);
+}
+#lobby form, #login form {
+  position: absolute;
+  top: 50%; left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+  background: #fff;
+  padding: 20px;
+}
+
+#lobby input {
+  font-size: 3vw;
+  width: 40vw;
+}
\ No newline at end of file
diff --git a/public/js/index.js b/public/js/index.js
index 30f5975..6e171fc 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -4,8 +4,6 @@ var app = (function(){
   app.init = function(){
     user.init()
     
-    app.socket = ws.connect()
-    
     app.router = new SiteRouter ()
 
     $(window).on("focus", app.focus)
diff --git a/public/js/lib/user.js b/public/js/lib/user.js
index f96946f..1293895 100644
--- a/public/js/lib/user.js
+++ b/public/js/lib/user.js
@@ -2,10 +2,9 @@ var user = (function(){
   var user = {}
   user.init = function(){
     user.load()
-    user.bind()
   }
   user.bind = function(){
-    $("#username").on("input", user.save)
+    // $("#username").on("input", user.save)
   }
   user.load = function(){
     user.username = user.getCookie()
@@ -38,6 +37,7 @@ var user = (function(){
   }
   user.save = function(){
     var username = user.sanitize()
+    if (! username.length) return
     if (username != user.username) user.setCookie(username);
   }
   user.setCookie = function(username){
diff --git a/public/js/lib/views/index.js b/public/js/lib/views/index.js
index d96bffb..d5ec35d 100644
--- a/public/js/lib/views/index.js
+++ b/public/js/lib/views/index.js
@@ -10,13 +10,20 @@ var SiteRouter = Router.extend({
 	},
 	
 	initialize: function(){
-		this.route()
+		if (! user.username) {
+		  $("#login").show()
+		}
+		else {
+      this.route()
+    }
   },
   
   lobby: function(){
+    this.view = new LobbyView ()
   },
   
   room: function(name){
+    this.view = new RoomView (name)
   },
 
 })
\ No newline at end of file
diff --git a/public/js/lib/views/lobby/index.js b/public/js/lib/views/lobby/index.js
index 5ed1966..70b63c4 100644
--- a/public/js/lib/views/lobby/index.js
+++ b/public/js/lib/views/lobby/index.js
@@ -1,9 +1,17 @@
 var LobbyView = View.extend({
 
   events: {
+    "form submit": "join"
   },
   
   initialize: function(){
+    this.$createRoom = this.$("#create-room")
+  },
+  
+  join: function(){
+    var name = this.$createRoom.sanitize()
+    if (! name) { return }
+    window.location.href = "/v/" + name
   }
   
 })
\ No newline at end of file
diff --git a/public/js/lib/views/login.js b/public/js/lib/views/login.js
new file mode 100644
index 0000000..325d22d
--- /dev/null
+++ b/public/js/lib/views/login.js
@@ -0,0 +1,29 @@
+var LoginView = View.extend({
+  el: "#login",
+  
+  events: { 
+    "form submit": "save",
+  },
+  
+  initialize: function(){
+    this.$el.show()
+  },
+  
+  save: function(e){
+    e.preventDefault()
+    user.save()
+    var that = this
+    if (user.username.length) {
+      app.router.route()
+      oktween.add({
+        obj: this.el.style,
+        from: { opacity: 1 },
+        to: { opacity: 0 },
+        duration: 500,
+        finished: function(){
+          that.el.style.display = "none"
+        }
+      })
+    }
+  },
+})
\ No newline at end of file
diff --git a/public/js/lib/views/room/index.js b/public/js/lib/views/room/index.js
index b266e29..58d7449 100644
--- a/public/js/lib/views/room/index.js
+++ b/public/js/lib/views/room/index.js
@@ -3,7 +3,8 @@ var RoomView = View.extend({
   events: {
   },
   
-  initialize: function(){
+  initialize: function(name){
+    app.socket = ws.connect(name)
   }
   
 })
\ No newline at end of file
diff --git a/public/js/lib/ws.js b/public/js/lib/ws.js
index fbf9211..15af8a1 100644
--- a/public/js/lib/ws.js
+++ b/public/js/lib/ws.js
@@ -1,9 +1,9 @@
-var ws = function(){
+var ws = (function(){
   var ws = {}
   var socket, socketIsReady
-	ws.connect = function () {
+	ws.connect = function (room) {
     if (this.socket) return;
-    var socketPath = window.location.origin + '/' + posthang.room.subdomain
+    var socketPath = window.location.origin + '/' + room
 
     ws.socket = socket = io(socketPath)
     // this.socket.on('connect', function(){ console.log(new Date(), "connected")})
@@ -41,4 +41,5 @@ var ws = function(){
     console.log(new Date(), "disconnected")
     // this.chatView.appendInfo({ content: "Disconnected." })
   }
-}
+  return ws
+})()
diff --git a/public/js/vendor/util.js b/public/js/vendor/util.js
index 0f5c6ed..7c73ae2 100644
--- a/public/js/vendor/util.js
+++ b/public/js/vendor/util.js
@@ -240,6 +240,41 @@ if (!Function.prototype.bind) {
         };
 }());
 
+// Identify browser based on useragent string
+(function( ua ) {
+  ua = ua.toLowerCase();
+  var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
+    /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
+    /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
+    /(msie) ([\w.]+)/.exec( ua ) ||
+    ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
+    [];
+  var matched = {
+    browser: match[ 1 ] || "",
+    version: match[ 2 ] || "0"
+  };
+  browser = {};
+  if ( matched.browser ) {
+      browser[ matched.browser ] = true;
+      browser.version = matched.version;
+  }
+  // Chrome is Webkit, but Webkit is also Safari.
+  if ( browser.chrome ) {
+    browser.webkit = true;
+  } else if ( browser.webkit ) {
+    browser.safari = true;
+  }
+  if (window.$) $.browser = browser;
+  return browser;
+})( navigator.userAgent );
+
+// Naive useragent detection pattern
+var is_iphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
+var is_ipad = (navigator.userAgent.match(/iPad/i))
+var is_android = (navigator.userAgent.match(/Android/i))
+var is_mobile = is_iphone || is_ipad || is_android
+var is_desktop = ! is_mobile;
+var app_devicePixelRatio = is_mobile ? devicePixelRatio : 1;
 
 function selectElementContents(el) {
   if (window.getSelection && document.createRange) {
diff --git a/views/pages/lobby.ejs b/views/pages/lobby.ejs
index 46b634c..80bbf88 100644
--- a/views/pages/lobby.ejs
+++ b/views/pages/lobby.ejs
@@ -3,19 +3,23 @@
 <head>
 <title>yt-chat</title>
 <link rel="stylesheet" href="/css/css.css">
-<style>
-</style>
 </head>
 <body>
 
 <div id="bg"></div>
 
 <div id="login">
-  please enter your nick..<br>
-  <input type="text" id="username">
+  <form>
+    please enter your nick..<br>
+    <input type="text" id="username">
+  </form>
 </div>
 
-<input type="text" id="create-room" placeholder="enter a url to make a room">
+<div id="lobby">
+  <form>
+    <input type="text" id="create-room" placeholder="enter a url to make a room">
+  </form>
+</div>
 
 </body>
 <% include ../partials/scripts %>
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 5908ee7..844d884 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -16,7 +16,12 @@
 <script src="js/lib/user.js"></script>
 <script src="js/lib/video.js"></script>
 <script src="js/lib/ws.js"></script>
+<script src="js/lib/views/room/index.js"></script>
 <script src="js/lib/views/lobby/index.js"></script>
+<script src="js/lib/views/login.js"></script>
+<script src="js/lib/views/index.js"></script>
 <script src="js/index.js"></script>
 
+<!-- 
 <script type="text/javascript" src="http://www.youtube.com/player_api"></script>
+ -->