url invite working, showing url in the room

public/css/style.scss

@@ -2306,7 +2306,10 @@ key {
   .lobby{
     display: grid;
     grid-template-areas: "currentsettings currentsettings"
-                         "chat userlist";
+                         "chat userlist"
+                         "inviteLink inviteLink";
+    gap: 2rem;
+    grid-template-columns: 3fr 1fr;
     .title{
       color: var(--sub-color);
     }
@@ -2315,7 +2318,10 @@ key {
     }
     .chat{
       grid-area: chat;
+      gap: 1rem;
       .messages{
+        height: 200px;
+        overflow-y: scroll;
         .systemMessage{
           color: var(--sub-color);
         }
@@ -2328,6 +2334,14 @@ key {
           }
         }
       }
+      .input input{
+        width: 100%;
+      }
+    }
+    .inviteLink{
+      grid-area: inviteLink;
+      text-align: center;
+      color: var(--sub-color);
     }
     .userlist{
       grid-area: userlist;

public/index.html

@@ -3030,6 +3030,7 @@
               <div class="title">users</div>
               <div class="list"></div>
             </div>
+            <div class="inviteLink"></div>
           </div>
           
         </div>
@@ -3111,6 +3112,7 @@
   <script src="js/chartjs-plugin-annotation.js"></script>
   <script src="js/html2canvas.min.js"></script>
   <script src="js/misc.js"></script>
+  <script src="js/tribe.js"></script>
   <script src="js/words.js"></script>
   <script src="js/layouts.js"></script>
   <script src="js/db.js"></script>
@@ -3120,5 +3122,4 @@
   <script src="js/settings.js"></script>
   <script src="js/account.js"></script>
   <script src="js/script.js"></script>
-  <script src="js/tribe.js"></script>
 </html>

public/js/account.js

@@ -256,7 +256,7 @@ firebase.auth().onAuthStateChanged(function (user) {
   } else {
     console.log('user is not logged in');
   }
-  if ($(".pageTribe").hasClass('active') && !MP.socket.connected) {
+  if (!MP.socket.connected) {
     if (MP.state === -1) {
       mp_init();
     }

public/js/script.js

@@ -4882,11 +4882,16 @@ $(document).ready(() => {
       if (window.location.pathname === "/account") {
         history.replaceState("/", null, "/");
       } else if (window.location.pathname !== "/") {
-        let page = window.location.pathname.replace("/", "");
-        changePage(page);
-      }
-      if (/\/tribe\/.+/.test(window.location.pathname)) {
-        MP.autoJoin = window.location.pathname.split('/')[2];
+        if (/\/tribe_.+/.test(window.location.pathname)) {
+          changePage('tribe');
+          let code = window.location.pathname.split('/')[1];
+          code = code.substring(5);
+          code = "room" + code;
+          MP.autoJoin = code;
+        } else {
+          let page = window.location.pathname.replace("/", "");
+          changePage(page);
+        }
       }
     });
 });

public/js/tribe.js

@@ -29,6 +29,12 @@ function mp_refreshUserList() {
   })
 }
 
+function resetLobby(){
+  $(".pageTribe .lobby .userlist .list").empty();
+  $(".pageTribe .lobby .chat .messages").empty();
+  $(".pageTribe .lobby .inviteLink").text('');
+}
+
 MP.socket.on('connect', (f) => {
   MP.state = 1;
   MP.reconnectionAttempts = 0;
@@ -48,8 +54,16 @@ MP.socket.on('connect', (f) => {
 })
 
 MP.socket.on('disconnect', (f) => {
-  MP.state = 1;
+  MP.state = -1;
+  MP.room = undefined;
   showNotification('Disconnected from Tribe', 1000);
+  resetLobby();
+  $(".pageTribe div").addClass("hidden");
+  $('.pageTribe .preloader').removeClass('hidden').css('opacity',1);
+  $(".pageTribe .preloader").html(`
+  <i class="fas fa-fw fa-times"></i>
+            <div class="text">Disconnected from tribe</div>
+            `);
 })
 
 MP.socket.on('connect_failed', (f) => {
@@ -88,6 +102,8 @@ MP.socket.on('mp_room_joined', data => {
     //user is already in the room and somebody joined
   } else if(MP.state === 1) {
     //user is in prelobby and joined a room
+    let link = "www.monkey-type.com/tribe" + MP.room.id.substring(4);
+    $(".pageTribe .lobby .inviteLink").text(link);
     swapElements($(".pageTribe .prelobby"), $(".pageTribe .lobby"), 250, () => {MP.state = 10});
   }
 })
@@ -103,6 +119,8 @@ MP.socket.on('mp_chat_message', data => {
   $(".pageTribe .lobby .chat .messages").append(`
     <div class="${cls}">${author}${data.message}</div>
   `);
+  let chatEl = $(".pageTribe .lobby .chat .messages");
+  chatEl.animate({ scrollTop: $($(".pageTribe .lobby .chat .message")[0]).outerHeight() * 2 * $(".pageTribe .lobby .chat .messages .message").length }, 0);
 })
 
 MP.socket.on('mp_system_message', data => {