nannal/Acusis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

CSS and append chat

Browse Source
This commit is contained in:
dabbott 2021-01-13 01:30:12 +02:00
parent 47c008e23c
commit ac3c9050b1
5 changed files with 70 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
chat.js
View File

@ -1,10 +1,17 @@
chatArr=[]
chatArr = []
function chat(message, peer){
chatArr.push(peer+": "+message)
chathtml = ""
chatArr.forEach(element => {
chathtml=chathtml+element+"</br>"
})
document.getElementById("chat").innerHTML = chathtml
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)
}

1
inbound.js
View File

@ -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")

30
index.html
View File

@ -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>

13
outbound.js
View File

@ -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);

25
style.css Normal file
View File

@ -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;
}