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

Gemfile

@@ -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'

Gemfile.lock

@@ -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

app/assets/javascripts/application.js

@@ -12,8 +12,10 @@
 //
 //= require jquery
 //= require jquery_ujs
-//
 //= require twitter/bootstrap
-//
+//= require backbone-rails
+//= require handlebars
+//= require 'init'
+//= require 'socket_chat'
 //= require_tree .
 

app/assets/javascripts/chat.coffee

@@ -1,7 +1,4 @@
-
-class ChatEngine
-  constructor: ->
-    @sc = new SocketChat()
-
-
-window.Chat = ChatEngine
+# class ChatEngine
+#   constructor: ->
+#     @sc = new SocketChat()
+# window.Chat = ChatEngine

app/assets/javascripts/init.coffee

@@ -0,0 +1 @@
+window.Derp = {}

app/assets/javascripts/rooms.coffee

@@ -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

app/assets/stylesheets/application.css

@@ -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 .
  */
+
+

app/assets/stylesheets/home.css.less

@@ -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;
+}

app/assets/stylesheets/rooms.css.less

@@ -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);
+  }
+}

app/views/home/index.html.haml

@@ -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
 

app/views/layouts/application.html.haml

@@ -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
 

app/views/rooms/show.html.haml

@@ -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