actually finish refactor

.env

@@ -1,5 +1,5 @@
 # Required for all uses
-# It takes like 2 mins to get a free twilio account https://www.twilio.com/login
+# It takes 2 mins to get a free twilio account https://www.twilio.com/login
 
 TWILIO_ACCOUNT_SID=ACfc9705a2b725a7a314995eb8635a9079
 TWILIO_AUTH_TOKEN=9ab36b8ac190d20687aff0561749dbc1

public/chat.html

@@ -125,8 +125,8 @@
         <div class="HoverState">End Call</div>
       </div>
     </div>
-    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
 
+    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
     <script src="/socket.io/socket.io.js"></script>
     <script src="../js/snackbar.js"></script>
     <script src="../js/autolink.js"></script>

public/css/chat.css

@@ -28,7 +28,7 @@
   }
 }
 
-/*Fade in page on load*/
+/* End Fade in page on load*/
 
 body {
   background: #16171b;
@@ -60,10 +60,6 @@ video {
   white-space: nowrap;
   top: 20px;
   left: 20px;
-  /*margin-left: 30px;*/
-  /*margin-top: 30px;*/
-  /*-ms-transform: translate(-50%, -50%);*/
-  /*transform: translate(-50%, -50%);*/
   float: left;
 }
 
@@ -79,6 +75,7 @@ a {
   text-decoration: none;
 }
 
+/*Moveable local video id*/
 #moveable {
   z-index: 100;
   position: absolute;
@@ -86,6 +83,7 @@ a {
   cursor: move;
 }
 
+/*Text inside local video*/
 #moveable p {
   z-index: 101;
   position: absolute;
@@ -105,7 +103,7 @@ a {
 #local-video {
   width: 100%;
   height: auto;
-  border-radius: 20px;
+  border-radius: 10px;
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   background: #16171a;
@@ -114,20 +112,15 @@ a {
 /*caption text*/
 #remote-video-text {
   box-sizing: border-box;
-  /*padding: 0;*/
   margin: 0;
   width: 65vw;
   position: absolute;
   top: calc(80%);
   left: 20vw;
-  /*-ms-transform: translate(-50%, -90%);*/
-  /*transform: translate(-50%, -90%);*/
   z-index: 1;
-
   color: white;
   font-family: "Heebo", sans-serif;
   font-size: 1.2rem;
-  /*white-space: nowrap;*/
   font-weight: bold;
   text-align: left;
   background: rgba(0, 0, 0, 0.2);
@@ -145,26 +138,20 @@ a {
   transform: translate(-50%, -50%);
   width: 65%;
   height: auto;
-
   max-height: 100%;
   max-width: 100%;
-
   border-radius: 10px;
   background-image: url(../images/loader.gif);
   background-size: 400px auto;
   background-repeat: no-repeat;
   background-position: center center;
-  /*box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;*/
-  /*-webkit-box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;*/
-  /*object-fit: fill;*/
 }
 
 #remote-video.fullscreen {
-  /*object-fit: fill;*/
   width: 100%;
 }
 
-/*Neomorphic buttons*/
+/*Buttons*/
 .multi-button button {
   border: none;
   font-size: 1.5rem;
@@ -182,8 +169,6 @@ button:focus {
 
 button:hover {
   color: white;
-  /*border-radius: 100px;*/
-  /*background: #16171a;*/
 }
 
 .multi-button {
@@ -192,7 +177,6 @@ button:hover {
   top: 50%;
   -ms-transform: translate(0%, -50%);
   transform: translate(0%, -50%);
-
   z-index: 999;
   border-radius: 10px;
   background: #16171a;
@@ -222,10 +206,13 @@ button:hover {
   margin: 0 auto;
 }
 
-/*Neomorphic buttons*/
+/*.fa-phone-slash {*/
+/*  color: #470000;*/
+/*}*/
 
-/*simple chat*/
+/*End buttons*/
 
+/*Text chat*/
 #entire-chat {
   position: absolute;
   height: 100%;
@@ -280,9 +267,6 @@ button:hover {
   overflow: scroll;
   font-family: "Heebo", sans-serif;
   font-size: 0.8rem;
-  /*background: #1c1d22;*/
-  /*background: #16171a;*/
-  /*box-shadow: 9px 9px 16px #0a0b0c, -9px -9px 16px #222328;*/
 }
 
 #chat-zone::-webkit-scrollbar {
@@ -311,9 +295,6 @@ button:hover {
 
 /*recieved messages*/
 #chat-zone .message-item.moderator .message-bloc {
-  /*background-color: #376df9;*/
-  /*background: linear-gradient(100deg, #376df9 0, #ff5fa0 75%, #ffc55a 100%);*/
-
   background-color: rgb(29, 30, 33);
   color: #fff;
   position: relative;
@@ -373,4 +354,4 @@ button:hover {
   }
 }
 
-/*simple chat*/
+/*End text chat*/

server.js

@@ -10,11 +10,12 @@ var http = require("http").createServer(app);
 var io = require("socket.io")(http);
 var path = require("path");
 var public = path.join(__dirname, "public");
-const url = require("url"); // built-in utility
+const url = require("url");
 
 // enable ssl redirect
 app.use(sslRedirect());
 
+// Remove trailing slashes in url
 app.use(function (req, res, next) {
   if (req.path.substr(-1) === "/" && req.path.length > 1) {
     let query = req.url.slice(req.path.length);
@@ -49,8 +50,10 @@ app.get("/notsupported", function (req, res) {
   res.sendFile(path.join(public, "notsupported.html"));
 });
 
+// Serve static files in the public directory
 app.use(express.static("public"));
 
+// Simple logging function to add room name
 function logIt(msg, room) {
   if (room) {
     console.log(room + ": " + msg);
@@ -73,6 +76,7 @@ io.on("connection", function (socket) {
       socket.join(room);
       // When the client is second to join the room, both clients are ready.
       logIt("Broadcasting ready message", room);
+      // First to join call initiates call
       socket.broadcast.to(room).emit("willInitiateCall", room);
       socket.emit("ready", room).to(room);
       socket.broadcast.to(room).emit("ready", room);
@@ -115,6 +119,7 @@ io.on("connection", function (socket) {
   });
 });
 
+// Listen for Heroku port, otherwise just use 3000
 var port = process.env.PORT || 3000;
 http.listen(port, function () {
   console.log("http://localhost:" + port);