Initial commit

2020-03-20 12:23:27 +01:00
commit 619eca519a
6 changed files with 193 additions and 0 deletions
@@ -0,0 +1,13 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>Twitch Chat</title>
+        <meta charset="utf-8">
+        <link href="/static/main.css" rel="stylesheet">
+    </head>
+    <body>
+        <ul id='messages'></ul>
+        <script src="/socket.io/socket.io.js"></script>
+        <script src="/static/main.js"></script>
+    </body>
+</html>
@@ -0,0 +1,47 @@
+body {
+    background-color: #18181b;
+    padding: 0px;
+    margin: 0px;
+    overflow: hidden;
+}
+
+#messages {
+    color: white;
+    list-style-type: none;
+    position: absolute;
+    bottom: 0px;
+    margin: 0px;
+    padding: 0px;
+}
+
+.slide {
+    animation: slide 0.5s forwards;
+}
+
+.item {
+    width: 200px;
+    margin: 0.5rem;
+}
+
+.destroy {
+    animation: disappear 1s;
+    opacity: 0;
+}
+
+.text {
+    padding-right: 0.5rem;
+}
+
+.name {
+    font-weight: bold;
+}
+
+@keyframes slide {
+    from {  }
+    to   { bottom: 0rem; }
+}
+
+@keyframes disappear {
+    from { opacity: 1; }
+    to   { opacity: 0; }
+}
@@ -0,0 +1,55 @@
+const timeout = 30000;
+
+class Message {
+    constructor(object, onDestroy) {
+        this.target = object.target;
+        this.context = object.context;
+        this.message = object.message;
+        this.self = object.self;
+    }
+
+    createEl() {
+        this.element = document.createElement('li');
+        this.element.className = "item";
+        this.element.style.position = "relative";
+        let name = document.createElement('span');
+        name.className = "text name";
+        name.style.color = this.context.color;
+        name.innerHTML = escapeHtml(this.context["display-name"]);
+        this.element.appendChild(name);
+
+        let message = document.createElement('span');
+        message.innerHTML = escapeHtml(this.message);
+        message.className = "text message";
+        this.element.appendChild(message);
+
+        setTimeout(() => this.destroy(), timeout);
+        return this.element;
+    }
+
+    destroy() {
+        console.log(this.element);
+        this.element.className += ' destroy';
+    }
+}
+
+function escapeHtml(unsafe) {
+    return unsafe
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}
+
+function addMessage(object) {
+    messages .className = "";
+    let message = new Message(object);
+    messages.appendChild(message.createEl());
+    messages.style.bottom = '-' + message.element.offsetHeight + 'px';
+    messages.className = "slide";
+};
+
+let messages = document.getElementById('messages');
+let socket = io();
+socket.on('message', addMessage);