From ac3c9050b1410a18935dffeb9831f81979203014 Mon Sep 17 00:00:00 2001 From: dabbott Date: Wed, 13 Jan 2021 01:30:12 +0200 Subject: [PATCH] CSS and append chat --- chat.js | 25 ++++++++++++++++--------- inbound.js | 1 - index.html | 30 +++++++++++++++++++----------- outbound.js | 13 +++++++++++-- style.css | 25 +++++++++++++++++++++++++ 5 files changed, 71 insertions(+), 23 deletions(-) create mode 100644 style.css diff --git a/chat.js b/chat.js index 9c17f1e..6aeeeda 100644 --- 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+"
" - }) - 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 + "
" + + // }) + //document.getElementById("chat" + (chatArr.length)).innerHTML = chathtml + + document.getElementById("chatWrapper").appendChild(messageDiv) } \ No newline at end of file diff --git a/inbound.js b/inbound.js index 3d1555d..b9a9647 100644 --- 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") diff --git a/index.html b/index.html index 8930650..a8c8cb0 100644 --- a/index.html +++ b/index.html @@ -4,22 +4,30 @@ + - Hello Dan boys -
+ Your ID is:
Loading
+
+
+ Acquire a peerID from anyone in an active chat or, to create a new chat, a user who is not in a chat. +
+
+
+ PeerID: +
+
-
- PeerID: -
- -
+
-
- -
-
+
+
+
+
+ +
+
\ No newline at end of file diff --git a/outbound.js b/outbound.js index 9426a56..9be62c3 100644 --- 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); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..bdf87bb --- /dev/null +++ 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; +} +