added executable

andrewhavens · Nov 11, 2011 · 91b93fe · 91b93fe
1 parent 831c7ae
commit 91b93fe
Show file tree

Hide file tree

Showing 8 changed files with 372 additions and 6 deletions.
diff --git a/Gemfile b/Gemfile
@@ -1,3 +1,4 @@
 source :rubygems
 
+gem 'thor'
 gem 'em-websocket'
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -6,9 +6,11 @@ GEM
       addressable (>= 2.1.1)
       eventmachine (>= 0.12.9)
     eventmachine (0.12.10)
+    thor (0.14.6)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   em-websocket
+  thor
diff --git a/bin/mad_chatter b/bin/mad_chatter
@@ -1,3 +1,29 @@
 #!/usr/bin/env ruby
 
-require 'mad_chatter'
+# require 'mad_chatter'
+
+require "thor"
+
+module MadChatter
+
+  class Cli < Thor
+    include Thor::Actions
+
+    def self.source_root
+      File.expand_path(File.dirname(__FILE__) + '/../')
+    end
+
+    desc "new", "Creates a scaffold of a new Mad Chatter chatroom"
+    def new(name)
+      copy_file "templates/index.html", "#{name}/web/index.html"
+      copy_file "templates/javascript.js", "#{name}/web/javascript.js"
+      copy_file "templates/stylesheets/reset.css", "#{name}/web/stylesheets/reset.css"
+      copy_file "templates/stylesheets/styles.css", "#{name}/web/stylesheets/styles.css"
+      copy_file "README.md", "#{name}/README.md"
+      copy_file "README.md", "#{name}/LICENSE"
+    end
+
+  end
+end
+
+MadChatter::Cli.start
diff --git a/mad_chatter.gemspec b/mad_chatter.gemspec
@@ -1,9 +1,9 @@
 Gem::Specification.new do |s|
   s.name        = 'mad_chatter'
-  s.version     = '0.0.1'
+  s.version     = '0.0.2'
   s.date        = '2011-11-11'
-  s.summary     = "Mad Chatter is a fun, easy to customize chat server written in Ruby utilizing HTML 5 Web Sockets"
-  s.description = "Mad Chatter is a fun, easy to customize chat server written in Ruby utilizing HTML 5 Web Sockets"
+  s.summary     = "Mad Chatter is a fun, easy to customize chat server, utilizing HTML 5 Web Sockets"
+  s.description = "Mad Chatter is a fun, easy to customize chat server, written in Ruby, utilizing HTML 5 Web Sockets"
   s.authors     = ["Andrew Havens"]
   s.email       = 'email@andrewhavens.com'
   s.homepage    = 'http://github.com/andrewhavens/mad_chatter'
@@ -12,7 +12,7 @@ Gem::Specification.new do |s|
   s.require_path = 'lib'
   s.executables << 'mad_chatter'
 
-  # If you have other dependencies, add them here
-  # s.add_dependency "another", "~> 1.2"
+  s.add_dependency 'thor', '~> 0.14.6'
+  s.add_dependency 'em-websocket', '~> 0.3.5'
 
 end
diff --git a/templates/index.html b/templates/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+	<title>Mad Chatter</title>
+	<link rel="stylesheet" href="stylesheets/reset.css">
+	<link rel="stylesheet" href="stylesheets/styles.css">
+    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
+	<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'></script>
+	<script src='javascript.js'></script>
+	<script>
+		$(document).ready(function(){
+			MadChatter.init('ws://localhost:8100');
+		});
+	</script>
+  </head>
+  <body>
+
+	<div id="login_screen">
+		<header>
+			<h1>Welcome!</h1>
+		</header>
+		<div id="pick_a_username">
+			<p>What is your name?</p>
+			<input id="username" type="text"> <button id="join">Join</button>
+		</div>
+	</div>
+
+	<div id="chatroom">
+		<div id="sidebar">
+			<h2>Members</h2>
+			<ul id="members"></ul>
+		</div>
+		<div id="keyboard">
+			<input type="text">
+		</div>
+		<div id="messages"></div>
+	</div>
+
+  </body>
+</html>
diff --git a/templates/javascript.js b/templates/javascript.js
@@ -0,0 +1,128 @@
+function get_current_time(){
+	var time = new Date();
+	var hours = time.getHours();
+	var minutes = time.getMinutes();
+	var ampm = 'am';
+	if (hours > 11) { ampm = 'pm'; }
+	if (minutes < 10) { minutes = "0" + minutes; }
+	if (hours == 0) { hours = 12; }
+	if (hours > 12) { hours = hours - 12; }
+	return hours + ':' + minutes + ampm;
+}
+
+var MadChatter = {
+
+	init: function(ws_host){
+		if (typeof WebSocket === 'undefined') {
+	    	alert("Your browser does not support websockets.")
+			return false;
+	    }
+		MadChatter.init_websocket(ws_host);
+		$('#chatroom').hide();
+		MadChatter.wait_for_join();
+		MadChatter.wait_for_chat_submit();
+	},
+
+	init_websocket: function(ws_host){
+		var ws =  new WebSocket(ws_host);
+		ws.onopen = function(){};
+		ws.onclose = function(){
+			MadChatter.display_status('You have been disconnected');
+		};
+		ws.onmessage = function(evt){
+			//console.log(evt.data)
+			var data = JSON.parse(evt.data);
+			MadChatter.message_received(data.type, data.username, data.message);
+		};
+		MadChatter.ws = ws;
+	},
+
+	wait_for_join: function(){
+		$('#username').keyup(function (event) {
+			if (event.keyCode == 13) { // The enter key.
+				MadChatter.join_chat();
+			}
+	    });
+		$('#join').click(function(){
+			MadChatter.join_chat();
+		});
+	},
+
+	wait_for_chat_submit: function(){
+		var keyboard = $("#keyboard input");
+	    keyboard.keyup(function (event) {
+	      if (event.keyCode == 13) { // The enter key.
+			MadChatter.send_message(keyboard.val());
+	        keyboard.val('');
+	      }
+	    });
+	},
+
+	join_chat: function(){
+		var username = $.trim($('#username').val());
+		if (username.length == 0) {
+			alert('Please enter your name.');
+			return false;
+		}
+		MadChatter.send_message('/join ' + username);
+		$('#login_screen').hide();
+		$('#chatroom').show();
+	},
+
+	message_received: function(type, username, message){
+		if (type == 'error') {
+			console.log('Client error: ' + message)
+			return;
+		}
+		if (type == 'token') {
+			MadChatter.client_token = message;
+			return;
+		}
+		if (type == 'users') {
+			MadChatter.update_users_list(message);
+			return;
+		}
+		if (type == 'status') {
+			MadChatter.display_status(message);
+		}
+		if (type == 'action') {
+			MadChatter.run_action(message);
+		}
+		if (type == 'message') {
+			MadChatter.display_message(username, message);
+		}
+		MadChatter.scroll_to_bottom_of_chat();
+	},
+
+	update_users_list: function(users){
+		$("#members").html('');
+		$.each(users, function(index, username) {
+		  $("#members").append('<li>' + username + '</li>');
+		});
+	},
+
+	run_action: function(action){
+		eval(action);
+	},
+
+	display_status: function(message){
+		$("#messages").append("<p class='status'>" + message + "<time>" + get_current_time() + "</time></p>");
+	},
+
+	display_message: function(username, message){
+		$("#messages").append("<p><strong>" + username + ":</strong> " + message + "<time>" + get_current_time() + "</time></p>");
+	},
+
+	scroll_to_bottom_of_chat: function(){
+		$("body")[0].scrollTop = $("#messages")[0].scrollHeight;
+	},
+
+	send_message: function(message){
+		MadChatter.send_json('message', message);
+	},
+
+	send_json: function(type, msg){
+		var json = { type: type, token: MadChatter.client_token, message: msg };
+		MadChatter.ws.send(JSON.stringify(json));
+	}
+};
diff --git a/templates/stylesheets/reset.css b/templates/stylesheets/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}