From 5d66217e8e994bf763e8112bad3d37014d326524 Mon Sep 17 00:00:00 2001
From: Daniel Seripap <daniel@seripap.com>
Date: Tue, 27 Dec 2016 12:53:01 -0500
Subject: [PATCH] Added roomID to top nav, fix tests

---
 src/app.js               |  2 +-
 src/js/app.js            | 15 ++++++++-------
 src/public/style.css     | 12 ++++++++++++
 src/views/index.mustache |  3 +++
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/app.js b/src/app.js
index 75fd5cc..757b748 100644
--- a/src/app.js
+++ b/src/app.js
@@ -37,7 +37,7 @@ function generateNewRoom(req, res, id) {
   return res.redirect(`/${id}`);
 }
 
-app.get('/', (req, res) => generateNewRoom(req, res, 'lobby') );
+app.get('/', (req, res) => generateNewRoom(req, res, 'lobby'));
 
 app.get('/:roomId', (req, res) => {
   const stripName = (name) => {
diff --git a/src/js/app.js b/src/js/app.js
index 1b3eb29..f938675 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -20,12 +20,12 @@ export default class App {
     const chatName = name.replace('/','').toLowerCase().replace(/[^A-Za-z0-9]/g, '-');
     if (chatName.length >= 25) {
       const limitedChatName = chatName.substr(0, 25);
-      window.history.replaceState( {} , limitedChatName, `/${limitedChatName}` );
+      window.history.replaceState({}, limitedChatName, `/${limitedChatName}`);
       return `/${limitedChatName}`;
     }
 
     return '/' + chatName;
-  };
+  }
 
   init() {
     this._chat = new Chat(this._darkwire, this._socket);
@@ -37,7 +37,7 @@ export default class App {
     $('input.share-text').click(() => {
       $(this).focus();
       $(this).select();
-      this.setSelectionRange(0, 9999);
+      $(this).setSelectionRange(0, 9999);
     });
 
     const windowHandler = new WindowHandler(this._darkwire, this._socket, this._chat);
@@ -118,9 +118,9 @@ export default class App {
 
     this._socket.on('disconnect', (data) => {
       this._darkwire.connected = false;
-      this._chat.log('Disconnected from server, automatically reloading chatroom in 10 seconds.', {
+      this._chat.log('Disconnected from server, automatically reconnecting in 4 seconds.', {
         error: true,
-      });      
+      });
       this.retryConnection();
     });
 
@@ -259,6 +259,7 @@ export default class App {
     }
 
     this._chat.log(moment().format('MMMM Do YYYY, h:mm:ss a'), {info: true});
+    $('#roomName').text(this._roomId);
     this._darkwire.updateUsername(username).then((socketData) => {
       this._chat.chatPage.show();
       this._chat.inputMessage.focus();
@@ -269,7 +270,7 @@ export default class App {
   addParticipantsMessage(data) {
     let message = '';
     let headerMsg = '';
-    const { numUsers } = data;
+    const {numUsers} = data;
 
     if (numUsers === 0) {
       window.location.reload();
@@ -296,7 +297,7 @@ export default class App {
   retryConnection() {
     window.setTimeout(() => {
       window.location.reload();
-    }, 10000);
+    }, 4000);
   }
 
 }
diff --git a/src/public/style.css b/src/public/style.css
index 2e3cb18..a051d60 100644
--- a/src/public/style.css
+++ b/src/public/style.css
@@ -364,3 +364,15 @@ html.no-touchevents .chat #input-icons {
   color: #FFF;
   background-color: red;
 }
+
+.room-name-top {
+  float: left;
+  text-align: center;
+  padding: 16px;
+}
+
+.room-name-top p {
+  margin: 0;
+  color: palegoldenrod;
+  font-weight: bold;
+}
diff --git a/src/views/index.mustache b/src/views/index.mustache
index 6314a17..653688f 100644
--- a/src/views/index.mustache
+++ b/src/views/index.mustache
@@ -28,6 +28,9 @@
           <a class="navbar-brand" href="javascript:void(0)">
             <img src="/logo.png">
           </a>
+          <span class="room-name-top">
+            <p id="roomName" class="room-name"></p>
+          </span>
           <span class="participants">
             <span class="glyphicon glyphicon-user"></span>&nbsp;<span id="participants"></span>
           </span>