first commit

README.md

@@ -0,0 +1,3 @@
+# Old webchat client
+
+Nothing much to say?

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

index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>WebChat</title>
+        <script src="assets/js/chat.js"></script>
+        <link rel="stylesheet" href="assets/css/style.css">
+        <link rel="i"
+    </head>
+    <body onload="onload();">
+        <header>
+            <h2>WebChat</h2>
+            <div>
+                <h3 id="username" onclick="setUsername();"/>
+            </div>
+        </header>
+        <audio id="notify" src="assets/mp3/notify.mp3" hidden></audio>
+        <audio id="join" src="assets/wav/join.wav" hidden></audio>
+        <div class="container">
+        <div class="chatbox" id="chat-box">
+            <p class="chattext">Connecting to server...</p>
+        </div>
+        <div id="chatstuff" class="chatstuff">
+            <textarea rows="2" id="message" class="consolas" placeholder="Type your message..."></textarea>
+            <button onclick="sendMessage();" class="consolas" id="sendbutton">Send</button>
+        </div>
+    </body>
+</html>