phofu
Coder
Hello everyone! I recently made a web chat app, called Box Chat, and so far it is looking great! I made the web chat app using HTML and Notepad, but I made the website using Google Sites. I used a guide on making this: https://davidwalsh.name/build-a-decentralized-web-chat-in-15-minutes. Anyways, there's a few things that I need help with:
1. Having the system generate a random name for users when they log on. This site is supposed to encourage anonymity, so for right now, usernames are generated as long keys, like a Bit Coin key. I would much rather have the system generate a random color for usernames, such as GREEN.
2. I need help on making it to where when a user disconnects, it says it disconnects. Right now, I have say a user connects when they connect, however, I am not sure how to make it say a user has disconnected when someone disconnects.
3. I need help to make it say "someone is typing" when someone is typing.
Here is my code so far:
If you want to check out my site, here's the link: https://sites.google.com/view/box-chat/box-chat
I hope I can get help, I've asked reddit, but no one seems to be helping me.
1. Having the system generate a random name for users when they log on. This site is supposed to encourage anonymity, so for right now, usernames are generated as long keys, like a Bit Coin key. I would much rather have the system generate a random color for usernames, such as GREEN.
2. I need help on making it to where when a user disconnects, it says it disconnects. Right now, I have say a user connects when they connect, however, I am not sure how to make it say a user has disconnected when someone disconnects.
3. I need help to make it say "someone is typing" when someone is typing.
Here is my code so far:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Box Chat</title>
<style>
body { background-color: #333; font-size: 1.5em; padding: 0em 0.25em; }
pre { color: #fff; white-space: pre-wrap; word-wrap: break-word; text-shadow: 0 0 10px #ccc; }
#input { border-bottom: 1px solid #ccc; background-color: #383838; padding: 0.25em; outline: 0; }
#input::before { content: "> "; }
</style>
<script>
function log(message) {
document.getElementById("log").textContent += message + "\n";
}
</script>
<script src="https://chr15m.github.io/bugout/bugout.min.js" type="application/javascript"></script>
</head>
<body>
<pre id="log"></pre>
<pre id="input" contenteditable="true"></pre>
</body>
<script>
log("Welcome to Box Chat! It may take a few moments for users to connect, please be patient. Remember, it is your responsibility to stay safe!");
/***** Your code goes here! *****/
var b = Bugout();
log(b.address() + " [ you have connected ]");
var b = Bugout("box-chat");
b.on("seen", function(address) { log(address + " [ someone else has connected ]"); });
b.on("message", function(address, message) {
log(address + ": " + message);
});
document.getElementById("input").onkeydown = function(ev) {
if (ev.keyCode == 13) {
if (b.lastwirecount) {
b.send(ev.target.textContent);
ev.target.textContent = "";
}
ev.preventDefault();
}
}
</script>
</html>
If you want to check out my site, here's the link: https://sites.google.com/view/box-chat/box-chat
I hope I can get help, I've asked reddit, but no one seems to be helping me.