pushing messages into a div

15 files changed, 134 insertions, 76 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/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..2c1140e 100644
--- a/public/js/lib/chat.js
+++ b/public/js/lib/views/room/chat.js
@@ -1,6 +1,8 @@
 var ChatView = View.extend({
 
-  template: $("#collaborator-template").html(),
+  el: "#chat",
+  
+  template: $("#message_template").html(),
 
   events: {
     "submit form": "send",
@@ -8,12 +10,19 @@ var ChatView = View.extend({
   },
   
   initialize: function(){
-    this.$msg = this.$("#message")
+    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)
@@ -23,14 +32,20 @@ var ChatView = View.extend({
     }
   },
   
-  send: function(){
+  send: function(e){
+    e && e.preventDefault()
+    console.log("hi")
     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.send("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..c8d7f3f
--- /dev/null
+++ b/public/js/lib/views/room/room.js
@@ -0,0 +1,29 @@
+var chat
+
+var RoomView = View.extend({
+
+  events: {
+  },
+  
+  initialize: function(name){
+    this.name = name
+    chat = this.chatView = new ChatView ()
+    this.userlist = new UserlistView ()
+
+    app.socket = ws.connect(name)
+
+    app.socket.on("joined", function(msgs){
+      msgs && msgs.forEach(chat.add)
+    })
+    
+    app.socket.on("messages", function(msgs){
+      msgs && msgs.forEach(chat.add)
+    })
+    
+    app.socket.on("message", function(msg){
+      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..d638a02
--- /dev/null
+++ b/public/js/lib/views/room/userlist.js
@@ -0,0 +1,15 @@
+var UserlistView = View.extend({
+  
+  el: "#userlist",
+  
+  events: {
+  },
+  
+  initialize: function(){
+  },
+  
+  update: function(users){
+    
+  },
+  
+})
\ 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/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
 				}
 			}
diff --git a/server/index.js b/server/index.js
index 1843ae0..96bca33 100644
--- a/server/index.js
+++ b/server/index.js
@@ -13,8 +13,6 @@ var http = require('http'),
 	ws = require("./ws"),
 	util = require("./util");
 
-var websocket = require('./websocket')
-
 var app = express()
 var server, io
 
@@ -33,15 +31,6 @@ app.use(express.query())
 //   app.use(require('express-error-handler'))
 // }
 
-server = http.createServer(app)
-server.listen(app.get('port'), function () {
-  console.log('asdf-yt server listening on port ' + app.get('port'));
-})
-
-var io = websocket.init(server)
-
-var rooms = {}
-
 app.all('*', function(req, res, next){
   res.locals.config = config
   next()
@@ -65,4 +54,4 @@ server.listen(app.get('port'), function () {
   console.log('asdf-yt server listening on port ' + app.get('port'));
 })
 
-ws.listen(server)
+var io = ws.listen(server)
diff --git a/server/ws.js b/server/ws.js
index 5819b94..75f430c 100644
--- a/server/ws.js
+++ b/server/ws.js
@@ -11,10 +11,11 @@ ws.listen = function(app){
 ws.add = function(name){
   if (name in rooms) { return }
   var room = rooms[name] = {}
+  var messages = room.messages = []
   room.users = {}
   sockets = {}
   
-  var ns = base.io.of('/' + name)
+  var ns = ws.io.of('/' + name)
   
   ns.on('connection', function(socket){
     
@@ -27,6 +28,7 @@ ws.add = function(name){
         sockets[nick].disconnect()
         sockets[nick] = socket
         room.users[nick] = true
+        socket.emit("messages", messages)
       }
     })
     
diff --git a/views/pages/room.ejs b/views/pages/room.ejs
index 568a136..29fb027 100644
--- a/views/pages/room.ejs
+++ b/views/pages/room.ejs
@@ -13,15 +13,12 @@
 
 <div id="chat">
   <div id="messages"></div>
-  <form>
-    <input type="text" id="message">
+  <form autocomplete="off">
+    <input type="text" id="message" autocomplete="off">
   </form>
 </div>
 
-<div id="login">
-  please enter your nick..<br>
-  <input type="text" id="username">
-</div>
+<% include ../partials/login %>
 
 <script type="text/html" id="message_template">
   <div class="row">
@@ -31,5 +28,5 @@
 </script>
 
 </body>
-[[ include ../partials/scripts ]]
+<% include ../partials/scripts %>
 </html>
\ No newline at end of file
diff --git a/views/partials/login.ejs b/views/partials/login.ejs
new file mode 100644
index 0000000..0c2dc74
--- /dev/null
+++ b/views/partials/login.ejs
@@ -0,0 +1,6 @@
+<div id="login">
+  <form>
+    please enter your nick..<br>
+    <input type="text" id="username">
+  </form>
+</div>
\ No newline at end of file
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index d67bdc0..d3a8c82 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -1,27 +1,28 @@
-<script src="//[[- config.host ]]/socket.io/socket.io.js"></script>
-<script src="js/vendor/zepto.min.js"></script>
-<script src="js/vendor/lodash.min.js"></script>
-<script src="js/vendor/mx/mx.js"></script>
-<script src="js/vendor/mx/mx.soundcloud.js"></script>
-<script src="js/vendor/mx/mx.video.js"></script>
-<script src="js/vendor/mx/mx.vimeo.js"></script>
-<script src="js/vendor/mx/mx.youtube.js"></script>
-<script src="js/vendor/oktween.js"></script>
-<script src="js/vendor/parser.js"></script>
-<script src="js/vendor/util.js"></script>
-<script src="js/vendor/view/view.js"></script>
-<script src="js/vendor/view/formview.js"></script>
-<script src="js/vendor/view/router.js"></script>
-<script src="js/lib/bg.js"></script>
-<script src="js/lib/chat.js"></script>
-<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 src="//<%- config.host %>/socket.io/socket.io.js"></script>
+<script src="/js/vendor/zepto.min.js"></script>
+<script src="/js/vendor/lodash.min.js"></script>
+<script src="/js/vendor/mx/mx.js"></script>
+<script src="/js/vendor/mx/mx.soundcloud.js"></script>
+<script src="/js/vendor/mx/mx.video.js"></script>
+<script src="/js/vendor/mx/mx.vimeo.js"></script>
+<script src="/js/vendor/mx/mx.youtube.js"></script>
+<script src="/js/vendor/oktween.js"></script>
+<script src="/js/vendor/parser.js"></script>
+<script src="/js/vendor/util.js"></script>
+<script src="/js/vendor/view/view.js"></script>
+<script src="/js/vendor/view/formview.js"></script>
+<script src="/js/vendor/view/router.js"></script>
+<script src="/js/lib/bg.js"></script>
+<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/room.js"></script>
+<script src="/js/lib/views/room/chat.js"></script>
+<script src="/js/lib/views/room/userlist.js"></script>
+<script src="/js/lib/views/lobby/lobby.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>