first commit

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

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 += "<p class='chattext'>" + line + "</p>";
+                    })
+                    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 += "<p class='chattext'>" + data.username + " joined the chat</p>";
+                    if (data.username != this.username) {
+                        document.getElementById('join').play();
+                    }
+                    break;
+                case "leave":
+                    console.log(data.username + " left the chat");
+                    chatbox.innerHTML += "<p class='chattext'>" + data.username + " left the chat</p>";
+                    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 += "<p class='chattext'>" + event.data + "</p>";
+            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 += "<p class='chattext'>Disconnected</p>";
+    }
+
+    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 = "";
+}