From 3ff3a89f8ecd4ab79779d471ac47947de0bcc1a7 Mon Sep 17 00:00:00 2001 From: usernames122 <88596366+usernames122@users.noreply.github.com> Date: Thu, 7 Aug 2025 23:58:45 +0200 Subject: [PATCH] first commit --- README.md | 3 + assets/css/style.css | 49 ++++++++++++++++ assets/js/chat.js | 127 ++++++++++++++++++++++++++++++++++++++++++ assets/mp3/notify.mp3 | Bin 0 -> 28884 bytes assets/wav/join.wav | Bin 0 -> 109402 bytes favicon.ico | Bin 0 -> 165662 bytes index.html | 27 +++++++++ 7 files changed, 206 insertions(+) create mode 100644 README.md create mode 100644 assets/css/style.css create mode 100644 assets/js/chat.js create mode 100644 assets/mp3/notify.mp3 create mode 100644 assets/wav/join.wav create mode 100644 favicon.ico create mode 100644 index.html diff --git a/README.md b/README.md new file mode 100644 index 0000000..1794b5b --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# Old webchat client + +Nothing much to say? \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..95f02b4 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,49 @@ +header { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +#username { + font-weight: 500; +} + +.chatbox{ + height: 88vh; + width:100%; + background-color: black; + overflow-y: scroll; + overflow-x: hidden; + font-family: 'Consolas', 'Arial', sans-serif; + color: white; +} + +.container { + background-color: black; +} + +.chattext { + color: white; +} +.consolas { + font-family: 'Consolas', 'Arial', sans-serif; +} + +body { + overflow: hidden; +} + +.chatstuff { + display: flex; + background-color: rgb(50,50,50); +} + +.chatstuff button { + align-self: flex-end; +} + +#message { + flex: 1; + resize: none; +} + diff --git a/assets/js/chat.js b/assets/js/chat.js new file mode 100644 index 0000000..4514ef0 --- /dev/null +++ b/assets/js/chat.js @@ -0,0 +1,127 @@ +class Client extends WebSocket { + #connected = false + username = "Guest".concat(Math.round(Math.random() * 9999).toString()); + + constructor(url, username) { + super(url); + if (username != null || username != "") { + this.username = username; + } + super.onopen = this.onopen; + super.onmessage = this.onmessage; + super.onclose = this.onclose; + console.log("Trying to connect to server {} with username {}.".format(url,username)) + } + + onopen() { + console.log("Connecting..."); + this.connected = true; + this.send({username: this.username, clientdata: {}}); + } + + onmessage(event) { + var chatbox = document.getElementById("chat-box"); + var follow = chatbox.scrollHeight - chatbox.scrollTop - chatbox.clientHeight == 0; + try { + const data = JSON.parse(event.data); + switch (data.type) { + case "message": + console.log(data.content.replaceAll("\n", " ")); + data.content.split("\n").forEach(line => { + chatbox.innerHTML += "
" + line + "
"; + }) + if (data.content.slice(0, data.content.search(":")) != this.username) { + document.getElementById('notify').play(); + } + break; + case "join": + console.log(data.username + " joined the chat"); + chatbox.innerHTML += "" + data.username + " joined the chat
"; + if (data.username != this.username) { + document.getElementById('join').play(); + } + break; + case "leave": + console.log(data.username + " left the chat"); + chatbox.innerHTML += "" + data.username + " left the chat
"; + break; + default: + console.log("Unhandled packet: " + JSON.stringify(data)); + this.send({type: "unhandled", packet: JSON.stringify(data)}); + break; + } + } catch { + console.log(event.data) + chatbox.innerHTML += "" + event.data + "
"; + if (event.data.slice(0, event.data.search(":")) != this.username) { + document.getElementById('audioElement').play(); + } + } + if (follow) { + chatbox.scrollTop = chatbox.scrollHeight; + } + } + + onclose() { + this.connected = false; + console.log("Disconnected!"); + document.getElementById("chat-box").innerHTML += "Disconnected
"; + } + + send(data) { + super.send(JSON.stringify(data)); + } +}; + +// JS Patch for formatting +// STACKOVERFLOW!!! +String.prototype.format = function () { + var i = 0, args = arguments; + return this.replace(/{}/g, function () { + return typeof args[i] != 'undefined' ? args[i++] : ''; + }); +}; + +let socket = new Client("ws://" + (location.host.search(":") == -1 ? location.host : location.host.slice(0, location.host.search(":"))) + ":8765", getUsername()); + +function getUsername() { + var username = localStorage.getItem("username") + if (username == null) { + username = prompt("Enter your username. Press cancel or just type in nothing to get a anonymous username:"); + if (username == null || username == ""){ + username = "Guest".concat(Math.round(Math.random() * 9999).toString()); + } + localStorage.setItem("username", username); + } + return username; +} + +function setUsername() { + username = prompt("Enter your username. Press cancel or just type in nothing to get a anonymous username:"); + if (username == null || username == ""){ + username = "Guest".concat(Math.round(Math.random() * 9999).toString()); + } + localStorage.setItem("username", username); + location.reload(); +} + +function onload() { + document.getElementById("username").innerText = "Chatting as " + getUsername(); + document.getElementById("message").addEventListener("keyup", event => { + if (event.key == "Enter" && !event.shiftKey) { + document.getElementById("sendbutton").click(); + } + event.preventDefault(); + }); +} + +function sendMessage() { + var element = document.getElementById("message"); + var message = element.value; + element.value = message.split + socket.send({ + type: "message", + message: message + }); + element.value = ""; +} \ No newline at end of file diff --git a/assets/mp3/notify.mp3 b/assets/mp3/notify.mp3 new file mode 100644 index 0000000000000000000000000000000000000000..27d6bbf11e00f5d15166fb03efdb796dad9235c0 GIT binary patch literal 28884 zcmeFYcT`is*EV{RPyz%9Jyb*Q5UMmK^cH$YP`ZHhCSVIaR6`F)?^Wpnw$P>bswllG zD%er-;d_7YU3abfu6yqv_s{QHYp