Added support to Simple Interactive Chat

fmbenhassine · Jan 21, 2015 · 3301e6e · 3301e6e
1 parent 2d63718
commit 3301e6e
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 1 deletion.
diff --git a/config/socket.js b/config/socket.js
@@ -1,6 +1,14 @@
 module.exports = function (server) {
 
     var io = require('socket.io').listen(server);
+    /*
+    socket support for chat
+     */
+    io.on('connection', function(socket){
+        socket.on('chat message', function(msg){
+            io.emit('chat message', msg);
+        });
+    });
 
     var chess =  require('chess.js');
 

diff --git a/public/stylesheets/chesshub.css b/public/stylesheets/chesshub.css
@@ -103,3 +103,29 @@ body {
 .table td, th {
     text-align: center;
 }
+/*chat css*/
+.chat { font: 15px Helvetica, Arial;padding: 0; box-sizing: border-box; border: 1px solid ;border-color: #428BCA;
+    right:15px;top:3px;position:fixed;
+    height: 99%;
+}
+.chat-title{text-align: center;color:#31708F;height:5%;display: block;position: relative;padding-top: 10px;background-color: #D9EDF7}
+.chat-container{  border: 1px solid ;border-color: #428BCA;
+    display: block;
+    height: 87%;
+    position: relative;
+}
+
+form .chat-form {
+    border-top:1px solid #5599ff; padding: 3px;  width: 100%;;position: relative;
+    height: 8%;
+}
+.chat-input-form {width:75% ;height: 100%;margin-top:4px}
+.submit-chat {width:25%;color: #111}
+#messages { list-style-type: none; margin: 0; padding: 0;overflow-y: scroll;
+    position: relative;
+    width:250px;
+    height: 100%;
+}
+#messages li { padding: 5px 10px; }
+#messages li:nth-child(odd) { background: #F5F5F5; }
+#messages li:nth-child(even) { background: #5599ff; }
diff --git a/site/Simple-chat.jpg b/site/Simple-chat.jpg
diff --git a/views/layout.hbs b/views/layout.hbs
@@ -23,21 +23,32 @@
             <li class="{{#if isPlayPage}} active {{/if}}"><a href="/play" title="Create a new game"><i class="fa fa-gamepad"></i> Play</a></li>
             <li class="{{#if isTvPage}} active {{/if}}"><a href="/tv" title="Watch live games"><i class="fa fa-eye"></i> Tv</a></li>
             <li class="{{#if isSearchPage}} active {{/if}}"><a href="/search" title="Search a game"><i class="fa fa-search"></i> Search</a></li>
+            <li><a href="#" title="Show/Hide Chat" onclick="showhideChat()"><i class="fa fa-home"></i> Chat</a></li>
             {{#if user}}
             <li class="{{#if isAccountPage}} active {{/if}}"><a href="/account" title="My account"><span id="loggedUser" data-user="{{ user.name }}"></span><i class="fa fa-user"></i> {{ user.name }}</a></li>
             <li><a href="/logout" title="Sign out"><i class="fa fa-sign-out"></i></a></li>
+
             {{else}}
             <li class="{{#if isLoginPage}} active {{/if}}"><a href="/login"><i class="fa fa-sign-in"></i> Sign in</a></li>
             {{/if}}
 
         </ul>
         <h3><i class="fa fa-group"></i> Chess Hub</h3>
     </div>
-
+   <div class="chat" >
+        <h4 class="chat-title">Quick Chat</h4>
+        <div class="chat-container">
+            <ul id="messages"></ul>
+            <form action="" class="chat-form">
+                <input id="m" autocomplete="off" class="chat-input-form"/><button class="submit-chat">Send</button>
+            </form>
+        </div>
+    </div>
     <div class="content">
         {{{body}}}
     </div>
 
+
     <div class="footer">
         <p>&copy; ChessHub 2014, <i class="fa fa-code"></i> with <i class="fa fa-heart"></i> by
             <a target="_blank" href="http://www.mahmoud-benhassine.fr">Mahmoud Ben Hassine</a></p>