diff options
Diffstat (limited to 'public/js/lib/views')
| -rw-r--r-- | public/js/lib/views/index.js | 13 | ||||
| -rw-r--r-- | public/js/lib/views/lobby/lobby.js (renamed from public/js/lib/views/lobby/index.js) | 12 | ||||
| -rw-r--r-- | public/js/lib/views/login.js | 6 | ||||
| -rw-r--r-- | public/js/lib/views/room/chat.js | 63 | ||||
| -rw-r--r-- | public/js/lib/views/room/index.js | 10 | ||||
| -rw-r--r-- | public/js/lib/views/room/room.js | 29 | ||||
| -rw-r--r-- | public/js/lib/views/room/userlist.js | 15 |
7 files changed, 128 insertions, 20 deletions
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/views/room/chat.js b/public/js/lib/views/room/chat.js new file mode 100644 index 0000000..2c1140e --- /dev/null +++ b/public/js/lib/views/room/chat.js @@ -0,0 +1,63 @@ +var ChatView = View.extend({ + + el: "#chat", + + template: $("#message_template").html(), + + events: { + "submit form": "send", + "scroll #messages": "scroll", + }, + + initialize: function(){ + 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) + this.$messages.append($el) + if (! this.scrolled) { + this.scrollToBottom() + } + }, + + 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.msg = val + msg.nick = user.username + msg.date = +new Date + this.add(msg) + app.socket.send("message", msg) + }, + + empty: function(){ + this.$messages.empty() + }, + + scrolled: false, + scroll: function(){ + this.scrolled = (this.messages.scrollTop > this.messages.scrollHeight - this.$el.height() - 100) + }, + scrollToBottom: function(){ + this.messages.scrollTop = document.body.scrollHeight + } + +}) 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 |
