CSS and append chat

3 years ago · ac3c9050b1
parent 47c008e23c
commit ac3c9050b1
5 changed files with 71 additions and 23 deletions
--- a/chat.js
+++ b/chat.js
@ -1,10 +1,17 @@
-chatArr=[]
-
-function chat(message, peer){
-    chatArr.push(peer+": "+message)
-    chathtml = ""
-    chatArr.forEach(element => {
-      chathtml=chathtml+element+"</br>"
-    })
-    document.getElementById("chat").innerHTML = chathtml
+chatArr = []
+
+function chat(message, peer) {
+  chatArr.push(peer + ": " + message)
+  //message=encodeURI(message)
+  messageDiv = document.createElement("div")
+  text = document.createTextNode(chatArr[chatArr.length - 1])
+  messageDiv.appendChild(text)
+
+  // chatArr.forEach(element => {
+  //   chathtml = chathtml + element + "</br>"
+
+  // })
+  //document.getElementById("chat" + (chatArr.length)).innerHTML = chathtml
+
+  document.getElementById("chatWrapper").appendChild(messageDiv)
 }
--- a/inbound.js
+++ b/inbound.js
@ -3,7 +3,6 @@ peer.on('connection', function(conn) {
    console.log(conn.peer+" has connected to me")
    conn.on('open', function() {
        peerlist[conn.peer]=conn
-        console.log(peerlist)
        // Receive messages
        conn.on('data', function(data) {
            handleData(conn,data,"Their Connection")
--- a/index.html
+++ b/index.html
@ -4,22 +4,30 @@
        <script src="outbound.js"></script>
        <script src="inbound.js"></script>
        <script src="chat.js"></script>
+        <link rel="stylesheet" href="style.css">
    </head>
    <body>
-        Hello Dan boys
-        <div id="id"></div>
+        Your ID is: <div id="id">Loading</div>
+        <div id = "preChat">
+            <br>
+            Acquire a peerID from anyone in an active chat or, to create a new chat, a user who is not in a chat.
+            </br>
+            </br>
+            <form action="javascript:void(0); connect()">
+                PeerID: <input type="text" id="connectToPeerID"></input> <button>Connect</button>
+             </form>
+        </div>

-        <form action="javascript:void(0); connect()">
-           PeerID: <input type="text" id="connectToPeerID"></input> <button>Connect</button>
-        </form>
-
-        <form action="javascript:void(0); startCall()">
+        <form action="javascript:void(0); startCall()" id="connectButton" class="callButton">
            <button>Call your buddy</button>
         </form>
-         <form action="javascript:void(0); makeNoise()">
-            <input type="text" id="chatSend"></input><button>Make Noise</button>
-         </form>
-         <div id="chat"></div>
+         <div class="chatWrapper" id="chatWrapper">
+            <div id="chat1">
+            </div>
+            <form action="javascript:void(0); makeNoise()" class="composeForm">
+               <input type="text" id="chatSend" autocomplete="off"></input><button>Make Noise</button>
+            </form>
+         </div>
         <div id="peers"></div>
    </body>
 </html>
--- a/outbound.js
+++ b/outbound.js
@ -29,8 +29,15 @@ peerlist={}


 function handleData(conn,data, who){
+    if (document.getElementById("preChat").style.visibility != "hidden"){
+
+        document.getElementById("preChat").style.visibility="hidden"
+        document.getElementById("preChat").style.height=0
+        document.getElementById("connectButton").style.height=0
+        document.getElementById("chatWrapper").style.visibility="visible"
+    }
+
    if (typeof data == "object" && data.peerID != document.getElementById("id").innerHTML && typeof peerlist[data.peerID] == "undefined"){
-        console.log("connecting to: "+data.peerID)
        var conn = peer.connect(data.peerID)
        peerlist[conn.peer]=conn
        conn.on('open', function() {
@ -51,6 +58,7 @@ function handleData(conn,data, who){

 function makeNoise(){
    message=document.getElementById("chatSend").value
+    document.getElementById("chatSend").value = ""
    Object.keys(peerlist).forEach(element => {
        peerlist[element].send(message)
    })
@ -63,10 +71,11 @@ function startCall(){
 }

 setInterval(() => {
+
+    // We can make this nicer by sending the last contact everything and every contact our most recent, but not sending everything to everyone except periodically, like once a minute
    Object.keys(peerlist).forEach(contact => {
        Object.keys(peerlist).forEach(peerDetail => {
            peerlist[contact].send({peerID: peerDetail})
-            //console.log("Sending " +peerlist[contact].peer +" info on "+peerDetail)
        })
    })
 }, 5000);
--- a/style.css
+++ b/style.css
@ -0,0 +1,25 @@
+body {
+    background-color: whitesmoke;
+}
+
+.chatWrapper {
+    height: 80%;
+    overflow-y: scroll;
+    background-color: silver;
+    visibility: hidden;
+    size: 0px;
+    border: 50px;
+    border-color: red;
+}
+
+.composeForm{
+    position: fixed;
+    bottom:0px;
+    height:30px;
+    width: 100%;
+}
+
+.callButton {
+    visibility: hidden;
+}
+