Merge ccac218 into 1e3afa4

app/views/includes/foot.jade

@@ -18,6 +18,8 @@ script(type='text/javascript', src='https://code.angularjs.org/1.1.5/angular-coo
 script(type='text/javascript', src='/lib/angular-bootstrap/ui-bootstrap-tpls.js')
 script(type='text/javascript', src='/lib/angular-ui-utils/modules/route/route.js')
 
+//Firebase
+script(type='text/javascript' src='lib/firebase/firebase.js')
 //Application Init
 script(type='text/javascript', src='/js/init.js')
 script(type='text/javascript', src='/js/app.js')
@@ -29,12 +31,14 @@ script(type='text/javascript', src='/js/services/global.js')
 script(type='text/javascript', src='/js/services/socket.js')
 script(type='text/javascript', src='/js/services/game.js')
 script(type='text/javascript', src='/js/services/history.fac.js')
+script(type='text/javascript', src='/js/services/game-chat.js')
 
 //Application Controllers
 script(type='text/javascript', src='/js/controllers/index.js')
 script(type='text/javascript', src='/js/controllers/header.js')
 script(type='text/javascript', src='/js/controllers/game.js')
 script(type='text/javascript', src='/js/controllers/history.ctr.js')
+script(type='text/javascript', src='/js/controllers/game-chat.js')
 script(type='text/javascript', src='/js/init.js')
 
 //Socket.io Client Library

app/views/includes/head.jade

@@ -24,6 +24,7 @@ head
 
   link(rel='stylesheet', href='/lib/bootstrap/dist/css/bootstrap.css')
   link(rel='stylesheet', href='/css/landing.css')
+  link(rel='stylesheet', href='/css/chat.css')
 
 
   //if lt IE 9

bower.json

@@ -10,7 +10,8 @@
     "angular": "^1.5.8",
     "angular-mocks": "^1.5.8",
     "angular-resource": "^1.5.8",
-    "jasmine-jquery": "^2.1.1"
+    "jasmine-jquery": "^2.1.1",
+    "firebase": "^3.4.1"
   },
   "exportsOverride": {
     "bootstrap": {

gulpfile.js

@@ -22,7 +22,7 @@ gulp.task('karma',function (done) {
 });
 
 gulp.task('sass', function(){
-  return gulp.src('public/css/common.scss')
+  return gulp.src('public/css/*.scss')
     .pipe(sass().on('error', sass.logError))
     .pipe(gulp.dest('public/css/'));
 });

karma.conf.js

@@ -25,6 +25,7 @@ module.exports = function(config) {
       'public/lib/angular/angular.js',
       'public/lib/angular-resource/angular-resource.js',
       'public/lib/angular-mocks/angular-mocks.js',
+      'public/lib/firebase/firebase.js',
       './src/app/**/*.js',
       './src/app/*.js',
       'public/js/**/*.js',

public/css/chat.css

@@ -0,0 +1,120 @@
+.chat-box {
+  background: #fff;
+  bottom: 0;
+  color: #000;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  width: 100%; }
+  .chat-box .box {
+    background: #fff;
+    border: thin solid #006ce5;
+    border-radius: 5px 5px 0 0;
+    bottom: 2px;
+    height: 360px;
+    position: absolute;
+    width: 300px;
+    z-index: 1; }
+  .chat-box .chat-messages {
+    height: 280px;
+    overflow-y: scroll; }
+  .chat-box .chat-top {
+    background: #006ce5;
+    border-color: #444;
+    color: #fff;
+    height: 20px;
+    top: 0; }
+  .chat-box .chat {
+    background: url("../img/chatnone1.png");
+    border: thin solid;
+    border-bottom: 0;
+    border-radius: 5px 5px 0 0;
+    bottom: 0;
+    color: #000;
+    height: 35px;
+    position: absolute;
+    width: 300px;
+    z-index: 2; }
+  .chat-box .chat-bottom {
+    background-color: #fff;
+    bottom: 5px;
+    box-shadow: 0 -1px 2px 0, rgba(65, 65, 65, 0.75);
+    display: inline-block;
+    height: 35px;
+    padding: 0 5px 0 10px;
+    position: absolute;
+    right: 0;
+    text-align: left;
+    width: 297px; }
+  .chat-box .message {
+    display: inline-block;
+    height: 35px;
+    padding-left: 5px;
+    padding-right: 5px;
+    position: relative;
+    top: 0;
+    width: 220px; }
+
+.close-chat {
+  background: #006ce5;
+  border: thin solid #006ce5;
+  border-width: thin;
+  bottom: 0;
+  height: 2px;
+  position: absolute;
+  width: 300px;
+  z-index: 1; }
+
+li.chat-li {
+  border-bottom: 1px;
+  border-bottom-style: solid;
+  border-bottom-width: thin;
+  border-color: #d6d6d6;
+  display: inline-block;
+  margin-bottom: 5px;
+  min-height: 50px;
+  width: 270px; }
+
+li img {
+  float: left;
+  margin-right: 10px;
+  width: 42px; }
+
+ul.chat-ul {
+  padding-left: 10px;
+  padding-right: 5px;
+  text-align: left; }
+
+.chat-side-text {
+  text-align: left;
+  width: 270px; }
+
+.chat-name {
+  font-size: 15px;
+  font-style: oblique;
+  margin: 0;
+  padding: 0;
+  text-align: left; }
+
+.chat-text {
+  color: #444;
+  font-size: 12px;
+  margin: 0;
+  overflow-x: auto;
+  padding: 0;
+  text-align: left; }
+
+.chat-time {
+  color: #444;
+  font-size: 10px;
+  margin-left: 5px; }
+
+.is-typing {
+  color: #444;
+  float: left;
+  font-size: 10px; }
+
+.chat-sign {
+  display: block;
+  padding: 2px; }

public/css/chat.scss

@@ -0,0 +1,163 @@
+$main-color: #fff;
+$primary-text: #000;
+$secondary-text: #444;
+$ascent: #006ce5;
+$secondary-light: #d6d6d6;
+$black-shadow-radius: 0 -2px 5px 0;
+$black-shadow-75: rgba(0, 0, 0, 0.75);
+$grey-shadow-radius: 0 -1px 2px 0;
+$grey-shadow-75: rgba(65, 65, 65, 0.75);
+$box-radius: 5px 5px 0 0;
+$chat-bottom-padding: 0 5px 0 10px;
+
+$url-0: url("../img/chatnone1.png");
+$url-1: url("../img/chatnone.png");
+
+.chat-box {
+  background: $main-color;
+  bottom: 0;
+  color: $primary-text;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  width: 100%;
+
+  .box {
+    background: $main-color;
+    border: thin solid $ascent;
+    border-radius: $box-radius;
+    bottom: 2px;
+    height: 360px;
+    position: absolute;
+    width: 300px;
+    z-index: 1;
+  }
+
+  .chat-messages {
+    height: 280px;
+    overflow-y: scroll;
+  }
+
+  .chat-top {
+    background: $ascent;
+    border-color: $secondary-text;
+    color: $main-color;
+    height: 20px;
+    top: 0;
+  }
+
+  .chat {
+    background: $url-0;
+    border: thin solid;
+    border-bottom: 0;
+    border-radius: $box-radius;
+    bottom: 0;
+    color: $primary-text;
+    height: 35px;
+    position: absolute;
+    width: 300px;
+    z-index: 2;
+  }
+
+  .chat-bottom {
+    background-color: $main-color;
+    bottom: 5px;
+    box-shadow: ($grey-shadow-radius, $grey-shadow-75);
+    display: inline-block;
+    height: 35px;
+    padding: $chat-bottom-padding;
+    position: absolute;
+    right: 0;
+    text-align: left;
+    width: 297px;
+  }
+
+  .message {
+    display: inline-block;
+    height: 35px;
+    padding-left: 5px;
+    padding-right: 5px;
+    position: relative;
+    top: 0;
+    width: 220px;
+  }
+}
+
+.close-chat {
+  background: $ascent;
+  border: thin solid $ascent;
+  border-width: thin;
+  bottom: 0;
+  height: 2px;
+  position: absolute;
+  width: 300px;
+  z-index: 1;
+}
+
+li {
+  &.chat-li {
+    border-bottom: 1px;
+    border-bottom-style: solid;
+    border-bottom-width: thin;
+    border-color: $secondary-light;
+    display: inline-block;
+    margin-bottom: 5px;
+    min-height: 50px;
+    width: 270px;
+  }
+
+  img {
+    float: left;
+    margin-right: 10px;
+    width: 42px;
+  }
+}
+
+ul {
+  &.chat-ul {
+    padding-left: 10px;
+    padding-right: 5px;
+    text-align: left;
+  }
+}
+
+.chat-side-text {
+  text-align: left;
+  width: 270px;
+}
+
+
+.chat-name {
+  font-size: 15px;
+  font-style: oblique;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+}
+
+.chat-text {
+  color: $secondary-text;
+  font-size: 12px;
+  margin: 0;
+  overflow-x: auto;
+  padding: 0;
+  text-align: left;
+}
+
+.chat-time {
+  color: $secondary-text;
+  font-size: 10px;
+  margin-left: 5px;
+}
+
+.is-typing {
+  color: $secondary-text;
+  float: left;
+  font-size: 10px;
+}
+
+.chat-sign {
+  display: block;
+  padding: 2px;
+}

public/js/app.js

@@ -1,4 +1,4 @@
-angular.module('mean', ['ngCookies', 'ngResource', 'ui.bootstrap', 'ui.route', 'mean.system', 'mean.directives', 'services.History'])
+angular.module('mean', ['ngCookies', 'ngResource', 'ui.bootstrap', 'ui.route', 'mean.system', 'mean.directives', 'services.History', 'mean.gameChat'])
   .config(['$routeProvider',
       function($routeProvider) {
           $routeProvider.
@@ -23,6 +23,9 @@ angular.module('mean', ['ngCookies', 'ngResource', 'ui.bootstrap', 'ui.route', '
           when('/choose-avatar', {
             templateUrl: '/views/choose-avatar.html'
           }).
+          when('/game', {
+            templateUrl: '/views/game.tpl.html'
+          }).
           when('/history', {
             templateUrl: '/views/history.tpl.html'
           }).
@@ -53,4 +56,5 @@ angular.module('mean', ['ngCookies', 'ngResource', 'ui.bootstrap', 'ui.route', '
 
 angular.module('mean.system', []);
 angular.module('mean.directives', []);
-angular.module('services.History', ['mean.system']);
+angular.module('services.History', ['mean.system']);
+angular.module('mean.gameChat', []);