first commit! 🎉

static/css/chat.css

@@ -0,0 +1,76 @@
+html {
+    font-family: "Inter", sans-serif;
+    font-size: 32px;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    background: #101010;
+}
+
+#chat {
+    width: calc(100% - 1rem);
+    padding: .5rem;
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+}
+
+.chat-message {
+    width: calc(100% - 2.7rem);
+    margin: 0;
+    padding: .5rem .8rem .5rem 2rem;
+
+    display: flex;
+    align-items: start;
+    gap: .5rem;
+
+    color: #f0f0f0;
+    background: #202020;
+    border-radius: .5rem;
+    text-shadow: 0 0 1rem #f0f0f080;
+}
+
+.system-message {
+    width: calc(100% - 1.5rem);
+    margin: 0;
+    padding: .5rem .8rem;
+
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+
+    color: #909090;
+    background: #202020;
+    text-shadow: none;
+    border-radius: .5rem;
+
+    font-size: .8rem;
+}
+
+.chat-avatar {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 100%;
+    position: absolute;
+    transform: translate(-2.3rem,-.7rem);
+}
+
+.chat-username {
+    color: #b7fd49;
+    color: var(--colour);
+    text-shadow: 0 0 1rem #b7fd4980;
+    text-shadow: 0 0 1rem var(--glow_colour);
+    font-weight: bold;
+}
+
+.system-message .chat-username {
+    color: #909090;
+    text-shadow: inherit;
+    font-weight: bold;
+}
+
+.chat-content {
+    word-break: break-word;
+}

static/js/chat.js

@@ -0,0 +1,92 @@
+const params = new URLSearchParams(window.location.search);
+
+function start() {
+    pushSystemMessage("Connecting to Server...");
+
+    const ws = new WebSocket("ws://" + window.location.host);
+    ws.addEventListener("open", () => {
+        pushSystemMessage("Connected!");
+    });
+    ws.addEventListener("message", msg => {
+        handleWSMessage(JSON.parse(msg.data));
+    });
+    ws.addEventListener("close", () => {
+        console.log("Websocket connection closed.");
+    });
+    ws.addEventListener("error", err => {
+        console.error(err);
+    });
+}
+
+function handleWSMessage(data) {
+    switch (data.type) {
+        case 'message':
+            pushMessage(
+                data.message.name,
+                data.message.avatar,
+                data.message.colour,
+                data.message.text,
+            );
+            window.scrollTo(0, document.body.scrollHeight);
+            break;
+        case 'system':
+            pushSystemMessage(data.message);
+            window.scrollTo(0, document.body.scrollHeight);
+            break;
+        default:
+            console.warn("Received unknown message type \"" + data.type + "\".");
+            console.log(data);
+            break;
+    }
+}
+
+function pushSystemMessage(content) {
+    if (params.get("system") == "false") return;
+
+    console.log("<SYSTEM> " + content);
+
+    const container = document.createElement("p");
+    container.className = "system-message";
+
+    const username = document.createElement("span");
+    username.className = "chat-username";
+    username.innerText = "SYSTEM";
+
+    const contentSpan = document.createElement("span");
+    contentSpan.className = "chat-content";
+    contentSpan.innerText = content;
+
+    container.appendChild(username);
+    container.appendChild(contentSpan);
+
+    document.getElementById("chat").appendChild(container);
+}
+
+function pushMessage(username, avatarURL, colour, content) {
+    console.log(`<${username}> ${content}`);
+
+    const container = document.createElement("p");
+    container.className = "chat-message";
+
+    const avatar = document.createElement("img");
+    avatar.className = "chat-avatar";
+    avatar.src = avatarURL;
+
+    const usernameSpan = document.createElement("span");
+    usernameSpan.className = "chat-username";
+    usernameSpan.innerText = username;
+    usernameSpan.style.setProperty("--colour", colour); // #ff00ff
+    usernameSpan.style.setProperty("--glow_colour", colour + "80"); // #ff00ff80
+
+    const contentSpan = document.createElement("span");
+    contentSpan.className = "chat-content";
+    contentSpan.innerText = content;
+
+    container.appendChild(avatar);
+    container.appendChild(usernameSpan);
+    container.appendChild(contentSpan);
+
+    document.getElementById("chat").appendChild(container);
+}
+
+start();