Merge branch 'master' of ghghgh.us:asdf-yt

12 files changed, 165 insertions, 84 deletions

diff --git a/public/js/index.js b/public/js/index.js
index 6e171fc..f46c1ac 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -5,6 +5,7 @@ var app = (function(){
     user.init()
     
     app.router = new SiteRouter ()
+    app.view = null
 
     $(window).on("focus", app.focus)
     $(window).on("blur", app.blur)
@@ -21,4 +22,6 @@ var app = (function(){
   }
   
   document.addEventListener('DOMContentLoaded', app.init)  
+  
+  return app
 })()
diff --git a/public/js/lib/video.js b/public/js/lib/video.js
index 2eb5c82..aa01d23 100644
--- a/public/js/lib/video.js
+++ b/public/js/lib/video.js
@@ -1,12 +1,16 @@
-var video = (function(){
-  var video = {}
-  var mx
-  
-  video.init = function(media){
-    video.build()
-  }
+var VideoView = View.extend({
+
+  events: {
+  },
+
+  initialize: function(media){
+    this.media = media
+    this.mx
+    this.build(media)
+  },
 
-  video.build = function(media){
+  build: function(media){
+    var mxType
     switch (media.type) {
       case 'video':
         mxType = MX.Video
@@ -21,71 +25,71 @@ var video = (function(){
     if (app.muted) {
       media.mute = true
     }
-    mx = new mxType({
+    this.mx = new mxType({
       media: media,
       backface: false,
     })
-    video.el.innerHTML = ""
-    video.el.appendChild(mx.el)
+    this.el.innerHTML = ""
+    this.el.appendChild(this.mx.el)
     
-    mx.load()
-  }
+    this.mx.load()
+  },
   
-  video.play = function(){
-    mx.play()
-  }
+  play: function(){
+    this.mx.play()
+  },
   
-  video.pause = function(){
-    mx.pause()
-  }
+  pause: function(){
+    this.mx.pause()
+  },
   
-  video.toggle = function(shouldPause){
+  toggle: function(shouldPause){
     if (typeof shouldPause !== "boolean") {
-      shouldPause = ! mx.paused
+      shouldPause = ! this.mx.paused
     }
-    shouldPause ? mx.pause() : mx.play()
+    shouldPause ? this.mx.pause() : this.mx.play()
     return shouldPause
-  }
+  },
   
-  video.toggleMuted = function(shouldMute){
+  toggleMuted: function(shouldMute){
     if (typeof shouldMute !== "boolean") {
-      shouldMute = ! mx.muted
+      shouldMute = ! this.mx.muted
     }
-    shouldMute ? mx.mute() : mx.unmute()
+    shouldMute ? this.mx.mute() : this.mx.unmute()
     return shouldMute
-  }
+  },
   
-  video.paused = function(){
-    return mx.paused
-  }
+  paused: function(){
+    return this.mx.paused
+  },
   
-  video.muted = function(){
-    return mx.muted
-  }
+  muted: function(){
+    return this.mx.muted
+  },
   
-  video.seek = function(n){
-    mx.seek(n)
-  }
+  seek: function(n){
+    this.mx.seek(n)
+  },
   
-  video.setLoop = function(shouldLoop){
-    mx.setLoop(shouldLoop)
-  }
+  setLoop: function(shouldLoop){
+    this.mx.setLoop(shouldLoop)
+  },
   
-  video.mute = function(muted){
+  mute: function(muted){
     if (muted) {
-      mx.mute()
+      this.mx.mute()
     }
     else {
-      mx.unmute()
+      this.mx.unmute()
     }
-  }
+  },
 
-  video.unmute = function(){
-    mx.unmute()
-  }
+  unmute: function(){
+    this.mx.unmute()
+  },
   
-  video.setVolume = function(n){
-    mx.setVolume(n)
+  setVolume: function(n){
+    this.mx.setVolume(n)
   }
 
-})()
+})
diff --git a/public/js/lib/views/index.js b/public/js/lib/views/index.js
index d5ec35d..a333b45 100644
--- a/public/js/lib/views/index.js
+++ b/public/js/lib/views/index.js
@@ -1,9 +1,9 @@
+var lobby, room
+
 var SiteRouter = Router.extend({
+
 	el: "body",
 	
-	events: {
-	},
-	
 	routes: {
 		"/":           'lobby',
 		"/v/:name":    'room',
@@ -11,7 +11,7 @@ var SiteRouter = Router.extend({
 	
 	initialize: function(){
 		if (! user.username) {
-		  $("#login").show()
+		  app.view = new LoginView()
 		}
 		else {
       this.route()
@@ -19,11 +19,12 @@ var SiteRouter = Router.extend({
   },
   
   lobby: function(){
-    this.view = new LobbyView ()
+    lobby = app.view = new LobbyView ()
   },
   
   room: function(name){
-    this.view = new RoomView (name)
+  console.log("hi")
+    room = app.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/lobby.js
index 0306445..6821436 100644
--- a/public/js/lib/views/lobby/index.js
+++ b/public/js/lib/views/lobby/lobby.js
@@ -1,17 +1,23 @@
 var LobbyView = View.extend({
 
+  el: "#lobby",
+
   events: {
-    "form submit": "join"
+    "submit form": "join"
   },
   
   initialize: function(){
     this.$createRoom = this.$("#create-room")
   },
   
-  join: function(){
+  join: function(e){
+    console.log("hwat")
+    e && e.preventDefault()
     var name = this.$createRoom.sanitizeName()
+    console.log("name")
+    
     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
index 325d22d..280f051 100644
--- a/public/js/lib/views/login.js
+++ b/public/js/lib/views/login.js
@@ -1,12 +1,16 @@
 var LoginView = View.extend({
+
   el: "#login",
   
   events: { 
-    "form submit": "save",
+    "submit form": "save",
   },
   
   initialize: function(){
     this.$el.show()
+    this.$username = this.$("#username")
+    this.$username.focus()
+    console.log(this.$username)
   },
   
   save: function(e){
diff --git a/public/js/lib/chat.js b/public/js/lib/views/room/chat.js
index 0968418..0932e47 100644
--- a/public/js/lib/chat.js
+++ b/public/js/lib/views/room/chat.js
@@ -1,36 +1,50 @@
 var ChatView = View.extend({
 
-  template: $("#collaborator-template").html(),
+  el: "#chat",
+  
+  template: $("#message_template").html(),
 
   events: {
     "submit form": "send",
     "scroll #messages": "scroll",
   },
   
-  initialize: function(){
-    this.$msg = this.$("#message")
+  initialize: function(socket){
+    var $msg = this.$msg = this.$("#message")
     this.$messages = this.$("#messages")
     this.messages = this.$messages.get(0)
+    this.$msg.focus()
+    $(window).focus(function(){ $msg.focus() })
   },
   
+  seen: {},
   add: function(msg){
+    var key = msg.date + "_" + msg.nick
+    if (key in this.seen) return
+    this.seen[key] = true
+    
     var $el = $( this.template )
-    $el.find(".nick").html(msg.nick)
-    $el.find(".msg").html(msg.msg)
+    $el.find(".nick").html(sanitize(msg.nick))
+    $el.find(".msg").html(sanitizeHTML(msg.msg))
     this.$messages.append($el)
     if (! this.scrolled) {
       this.scrollToBottom()
     }
   },
   
-  send: function(){
+  send: function(e){
+    e && e.preventDefault()
     var val = this.$msg.sanitize()
+    this.$msg.focus()
     if (! val) return
+    this.$msg.val("")
     var msg = {}
-    msg.room = room.name()
+    msg.room = room.name
     msg.msg = val
     msg.nick = user.username
-    // app.socket.send("message", msg)
+    msg.date = +new Date
+    this.add(msg)
+    app.socket.emit("message", msg)
   },
   
   empty: function(){
diff --git a/public/js/lib/views/room/index.js b/public/js/lib/views/room/index.js
deleted file mode 100644
index 58d7449..0000000
--- a/public/js/lib/views/room/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-var RoomView = View.extend({
-
-  events: {
-  },
-  
-  initialize: function(name){
-    app.socket = ws.connect(name)
-  }
-  
-})
\ No newline at end of file
diff --git a/public/js/lib/views/room/room.js b/public/js/lib/views/room/room.js
new file mode 100644
index 0000000..13f08ce
--- /dev/null
+++ b/public/js/lib/views/room/room.js
@@ -0,0 +1,29 @@
+var RoomView = View.extend({
+
+  events: {
+  },
+  
+  initialize: function(name){
+
+    app.socket = ws.connect(name)
+
+    var base = this
+    this.name = name
+    this.chatView = new ChatView (socket)
+    this.userlist = new UserlistView (socket)
+    
+    app.socket.emit("join", { nick: user.username })
+    
+    app.socket.on("welcome", function(room){
+      room.messages.forEach(base.chat.add)
+      base.userlist.users = room.users
+      base.userlist.update()
+    })
+    
+    app.socket.on("message", function(msg){
+      base.chat.add(msg)
+    })
+
+  }
+  
+})
\ No newline at end of file
diff --git a/public/js/lib/views/room/userlist.js b/public/js/lib/views/room/userlist.js
new file mode 100644
index 0000000..600f647
--- /dev/null
+++ b/public/js/lib/views/room/userlist.js
@@ -0,0 +1,29 @@
+var UserlistView = View.extend({
+  
+  el: "#userlist",
+  
+  events: {
+  },
+  
+  users: {},
+  initialize: function(socket){
+    var base = this
+    app.socket.on("joined", function(data){
+      base.users[data.nick] = true
+      base.update()
+    })
+    app.socket.on("parted", function(data){
+      delete base.users[data.nick]
+      base.update()
+    })
+  },
+  
+  update: function(){
+    base.el.empty()
+    Object.keys(base.users).sort().forEach(function(nick){
+      var el = document.createElement("div")
+      base.el.appendChild(el)
+    })
+  },
+  
+})
\ No newline at end of file
diff --git a/public/js/lib/ws.js b/public/js/lib/ws.js
index 3d62ef0..7d784ba 100644
--- a/public/js/lib/ws.js
+++ b/public/js/lib/ws.js
@@ -2,7 +2,7 @@ var ws = (function(){
   var ws = {}
   var socket, ready
 	ws.connect = function (room) {
-    if (this.socket) return;
+    if (ws.socket) return;
 
     var path = window.location.origin + '/' + room
 
diff --git a/public/js/vendor/util.js b/public/js/vendor/util.js
index 73a25ad..3637f49 100644
--- a/public/js/vendor/util.js
+++ b/public/js/vendor/util.js
@@ -14,6 +14,7 @@ function trim (s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") }
 function sanitize (s){ return (s || "").replace(new RegExp("[<>&]", 'g'), "") }
 function sanitizeName (s){ return (s || "").replace(new RegExp("[^-_a-zA-Z0-9]", 'g'), "") }
 function stripHTML (s){ return (s || "").replace(/<[^>]+>/g, "") }
+function sanitizeHTML (s){ return (s || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;") }
 function capitalize (s){ return s.split(" ").map(capitalizeWord).join(" ") }
 function capitalizeWord (s){ return s.charAt(0).toUpperCase() + s.slice(1) }
 function slugify (s){ return (s || "").toLowerCase().replace(/\s/g,"-").replace(/[^-_a-zA-Z0-9]/g, '-').replace(/-+/g,"-") }
diff --git a/public/js/vendor/view/router.js b/public/js/vendor/view/router.js
index 28905b2..ac2b5d4 100644
--- a/public/js/vendor/view/router.js
+++ b/public/js/vendor/view/router.js
@@ -15,7 +15,7 @@ var Router = View.extend({
 		}
 		
 		if (pathname in routes) {	
-			this[this.routes[pathname]](null)
+			this[this.routes[pathname]]()
 			return
 		}
 		
@@ -27,27 +27,27 @@ var Router = View.extend({
 			var routePath = route.split("/")
 			if (routePath[1] == path[1]) {
 				if (routePath[2] && routePath[2].indexOf(":") !== -1 && path[2] && (path[3] === routePath[3]) ) {
-					this[this.routes[route]](null, path[2])
+					this[this.routes[route]](path[2])
 					return
 				}
 				else if (routePath[2] == path[2]) {
 					if (routePath[3] && path[3]) {
 						if (routePath[3].indexOf(":") !== -1) {
-							this[this.routes[route]](null, path[3])
+							this[this.routes[route]](path[3])
 							return
 						}
 						else if (routePath[3] == path[3]) {
-							this[this.routes[route]](null)
+							this[this.routes[route]]()
 							return
 						}
 					}
 					else if (! routePath[3] && ! path[3]) {
-						this[this.routes[route]](null)
+						this[this.routes[route]]()
 						return
 					}
 				}
 				else if (! routePath[2] && (! path[2].length || ! path[2])) {
-					this[this.routes[route]](null)
+					this[this.routes[route]]()
 					return
 				}
 			}