Permalink
Browse files

add style, make a router for em-websocket, reorganize

  • Loading branch information...
1 parent 00ab28e commit 9ec5803db187986fcf9a99841f63f80d695200e9 @abachman abachman committed Jun 8, 2012
View
@@ -13,6 +13,7 @@ gem 'therubyracer', :platforms => :ruby
# in production environments by default.
group :assets do
gem 'sass-rails', '~> 3.2.3'
+ gem 'compass-rails'
gem 'coffee-rails', '~> 3.2.1'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
@@ -23,7 +24,10 @@ group :assets do
gem 'uglifier', '>= 1.0.3'
end
+# js, yeah
+gem 'backbone-rails'
gem 'jquery-rails'
+gem 'handlebars-rails', :git => 'git://github.com/crtrg/handlebars-rails.git'
# To use ActiveModel has_secure_password
gem 'bcrypt-ruby', '~> 3.0.0'
View
@@ -1,3 +1,9 @@
+GIT
+ remote: git://github.com/crtrg/handlebars-rails.git
+ revision: 7f8a0eafe185cf934d221703f815f35972b2ec75
+ specs:
+ handlebars-rails (0.9.1)
+
GEM
remote: https://rubygems.org/
specs:
@@ -30,8 +36,11 @@ GEM
multi_json (~> 1.0)
addressable (2.2.8)
arel (3.0.2)
+ backbone-rails (0.9.2)
+ rails (>= 3.0.0)
bcrypt-ruby (3.0.1)
builder (3.0.0)
+ chunky_png (1.2.5)
coffee-rails (3.2.2)
coffee-script (>= 2.2.0)
railties (~> 3.2.0)
@@ -40,6 +49,12 @@ GEM
execjs
coffee-script-source (1.3.3)
commonjs (0.2.6)
+ compass (0.12.1)
+ chunky_png (~> 1.2)
+ fssm (>= 0.2.7)
+ sass (~> 3.1)
+ compass-rails (1.0.2)
+ compass (>= 0.12.0, < 0.14)
em-websocket (0.3.6)
addressable (>= 2.1.1)
eventmachine (>= 0.12.9)
@@ -49,6 +64,7 @@ GEM
multi_json (~> 1.0)
foreman (0.46.0)
thor (>= 0.13.6)
+ fssm (0.2.9)
haml (3.1.6)
hike (1.2.1)
i18n (0.6.0)
@@ -123,11 +139,14 @@ PLATFORMS
ruby
DEPENDENCIES
+ backbone-rails
bcrypt-ruby (~> 3.0.0)
coffee-rails (~> 3.2.1)
+ compass-rails
em-websocket
foreman
haml
+ handlebars-rails!
jquery-rails
less-rails
less-rails-bootstrap
@@ -12,8 +12,10 @@
//
//= require jquery
//= require jquery_ujs
-//
//= require twitter/bootstrap
-//
+//= require backbone-rails
+//= require handlebars
+//= require 'init'
+//= require 'socket_chat'
//= require_tree .
@@ -1,7 +1,4 @@
-
-class ChatEngine
- constructor: ->
- @sc = new SocketChat()
-
-
-window.Chat = ChatEngine
+# class ChatEngine
+# constructor: ->
+# @sc = new SocketChat()
+# window.Chat = ChatEngine
@@ -0,0 +1 @@
+window.Derp = {}
@@ -0,0 +1,24 @@
+class Derp.Room
+ constructor: (@room, @user) ->
+ @ws = new WebSocket "ws://#{ SOCKET_HOST }/#{@room}/#{@user}"
+
+ @ws.onmessage = (e) =>
+ data = JSON.parse(e.data)
+ comments = $('#comments')
+
+ comments.append """
+ <div class='message'>
+ <div class='username #{if (data['user'] == @user) then 'myself' else '' }'>#{data['user']}</div>
+ <div class='comment'>#{data['comment']}</div>
+ </div>
+ """
+
+ @ws.onclose = => @setStatus('disconnected')
+ @ws.onopen = => @setStatus('connected')
+
+ sendMessage: ->
+ @ws.send $('#comment').val()
+ $('#comment').val ''
+
+ setStatus: (str) ->
+ $('#msg').text str
@@ -9,8 +9,8 @@
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
- *
*= require twitter/bootstrap
- *
*= require_tree .
*/
+
+
@@ -0,0 +1,12 @@
+@import "twitter/bootstrap/variables.less";
+@import "twitter/bootstrap/mixins.less";
+
+.title {
+ h1 {
+ font-size: 90px; margin-bottom: 32px;
+ a {
+ color: @black; }
+ }
+ text-align: center;
+ margin-bottom: 8px;
+}
@@ -0,0 +1,19 @@
+@import "twitter/bootstrap/variables.less";
+@import "twitter/bootstrap/mixins.less";
+
+.message {
+ .clearfix();
+ margin-bottom: 16px;
+ margin-left: -20px;
+
+ .username {
+ .makeColumn(2);
+ color: @blue;
+ &.myself {
+ color: @green;
+ }
+ }
+ .comment {
+ .makeColumn(6);
+ }
+}
@@ -1,12 +1,15 @@
-%h1 chat
-= @message
-%form{:name=>'room_join', :action=> rooms_path, :method=>'POST'}
- %label
- RoomName
- %input{:name=>'room', :type=>'text', :value=>'test'}
- %label
- UserName
- %input{:name=>'user', :type=>'text', :value=> session[:user] || 'noname'}
+.container
+ .row
+ .span4.offset4
+ %h3 join or create
+ = @message
+ %form.well{:name=>'room_join', :action=> rooms_path, :method=>'POST'}
+ %label{for: 'room'} Room name
+ %input{:name=>'room', :type=>'text', :placeholder => 'Name a room'}
+ %label{for: 'user'} Your name
+ %input{name: 'user', type: 'text', placeholder: 'Name yourself'}
- %input{:type=>'submit'}
+ %br
+
+ %button.btn{:type=>'submit'} go
@@ -7,13 +7,16 @@
= javascript_include_tag "application"
= csrf_meta_tags
+ %meta{name: "viewport", content: "width=device-width, initial-scale=1.0"}
+
= yield :head
%body
.container
.row
- .span4.offset4
- %center
- %h1 derpchat
+ .span8.offset2
+ .title
+ %h1
+ = link_to_unless_current 'derpchat', root_path
= yield
@@ -1,49 +1,17 @@
- content_for :head do
%title= @room
%script
- var room_name = "#{ @room }";
- var user_name = "#{ @user }";
-
- :javascript
- function message(str) {
- var msg = document.getElementById('msg');
- msg.innerHTML += str;
- }
-
- ws = new WebSocket('ws://' + SOCKET_HOST + '/?room='+room_name+'&user='+user_name);
-
- ws.onmessage = function (e) {
- var data = JSON.parse(e.data);
- var comments = document.getElementById('comments');
- comments.innerHTML = "<tr><td class='user_name'>" +
- data['user'] + "</td><td class='comment'>" +
- data['comment'] + "</td></tr>" +
- comments.innerHTML;
- }
-
- ws.onclose = function () {
- message('disconnected');
- }
-
- ws.onopen= function () {
- message('connected');
- }
-
- var post_comment = function () {
- comment = document.getElementById('comment');
- ws.send(comment.value);
- comment.value = '';
- }
+ var room = new Derp.Room('#{@room}', '#{@user}');
.container
.row
- .span12
-
+ .span8.offset2
%h2= @room
%div#form
- %form#comment_form{:onsubmit => 'post_comment(); return false'}
- %input#comment{:type=>'text', :style => 'width:200px'}
- %input#submit.btn.info{:type=>'button', :value=>'send', :onclick=>'post_comment();'}
+ %form.form-inline#comment_form{:onsubmit => 'room.sendMessage(); return false'}
+ %input.span4#comment{:type=>'text'}
+ %input#submit.btn.info{:type=>'button', :value=>'send', :onclick=>'room.sendMessage();'}
%span#msg
- %table#comments
+
+ %table.table.table-condensed#comments
Oops, something went wrong.

0 comments on commit 9ec5803

Please sign in to comment.