Usernames and exclude sender

2 files changed, 87 insertions, 0 deletions

diff --git a/Year_3/Web/chat-socket-io/assets/chat.js b/Year_3/Web/chat-socket-io/assets/chat.js
new file mode 100644
index 0000000..2dfdd62
--- /dev/null
+++ b/Year_3/Web/chat-socket-io/assets/chat.js
@@ -0,0 +1,37 @@
+var form = document.getElementById("form");
+var input = document.getElementById("input");
+const messages = document.getElementById("messages");
+
+form.addEventListener("submit", function(e) {
+    e.preventDefault();
+    let value = input.value;
+    if (value) {
+        if (value[0] == "/") {
+            let command = value.split(" ");
+            if (command.length == 2 && command[0] == "/user") {
+                socket.emit("set user", command[1]);
+            } else {
+                socket.emit("handle error", "Command not found");
+            }
+        } else {
+            socket.emit("chat message", value);
+        }
+        input.value = "";
+    }
+});
+socket.on("chat message", (msg) => {
+    var item = document.createElement("li");
+    item.textContent = msg;
+    messages.appendChild(item);
+    window.scrollTo(0, document.body.scrollHeight);
+});
+
+socket.on("handle error", (msg) => {
+    alert(msg);
+});
+
+socket.on("set user", (username) => {
+    const userBox = document.getElementById("userBox");
+    userBox.innerHTML = username;
+    alert("Username changed");
+});
diff --git a/Year_3/Web/chat-socket-io/assets/style.css b/Year_3/Web/chat-socket-io/assets/style.css
new file mode 100644
index 0000000..85f7376
--- /dev/null
+++ b/Year_3/Web/chat-socket-io/assets/style.css
@@ -0,0 +1,50 @@
+body {
+  margin: 0;
+  padding-bottom: 3rem;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif;
+}
+
+#form {
+  background: rgba(0, 0, 0, 0.15);
+  padding: 0.25rem;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  height: 3rem;
+  box-sizing: border-box;
+  backdrop-filter: blur(10px);
+}
+#input {
+  border: none;
+  padding: 0 1rem;
+  flex-grow: 1;
+  border-radius: 2rem;
+  margin: 0.25rem;
+}
+#input:focus {
+  outline: none;
+}
+#form > button {
+  background: #333;
+  border: none;
+  padding: 0 1rem;
+  margin: 0.25rem;
+  border-radius: 3px;
+  outline: none;
+  color: #fff;
+}
+
+#messages {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+#messages > li {
+  padding: 0.5rem 1rem;
+}
+#messages > li:nth-child(odd) {
+  background: #efefef;
+}