Makes chat auto fade away (and fixes CI) (#236)

lib/chat.js

@@ -40,7 +40,6 @@ class ChatBox extends LitElement {
     return css`
         .chat-wrapper {
             position: fixed;
-            background-color: rgba(0, 0, 0, 0.5);
             z-index:10;
         }
 
@@ -67,17 +66,36 @@ class ChatBox extends LitElement {
             text-shadow: 2px 2px 0px #3f3f3f;
             font-family: mojangles, minecraft, monospace;
             width: 100%;
-            max-height: calc(90px * 8)
+            max-height: calc(90px * 8);
         }
 
         input[type=text], #chatinput {
             background-color: rgba(0, 0, 0, 0.5);
             display: none;
         }
-
-        li {
+        
+        .chat-message {
             display: block;
-        }    
+            background-color: rgba(0, 0, 0, 0.5);
+        }
+
+        .chat-message-fadeout {
+            opacity: 1;
+            transition: all 3s;
+        }
+
+        .chat-message-fade {
+            opacity: 0;
+        }
+
+        .chat-message-faded {
+            transition: none !important;
+        }
+
+        .chat-message-chat-opened {
+            opacity: 1 !important;
+            transition: none !important;
+        }
     `
   }
 
@@ -85,7 +103,7 @@ class ChatBox extends LitElement {
     return html`
     <div id="chat-wrapper" class="chat-wrapper chat-display-wrapper">
     <div class="chat" id="chat">
-      <p>Welcome to prismarine-web-client! Chat appears here.</p>
+      <li class="chat-message chat-message-fade chat-message-faded">Welcome to prismarine-web-client! Chat appears here.</li>
     </div>
     </div>
     <div id="chat-wrapper2" class="chat-wrapper chat-input-wrapper">
@@ -181,6 +199,7 @@ class ChatBox extends LitElement {
       // Focus element
       chatInput.focus()
       chatHistoryPos = chatHistory.length
+      document.querySelector('#chatbox').shadowRoot.querySelectorAll('.chat-message').forEach(e => e.classList.add('chat-message-chat-opened'))
     }
 
     function disableChat () {
@@ -203,6 +222,7 @@ class ChatBox extends LitElement {
       // Hide extended chat history
       chat.style.maxHeight = 'calc(90px * 4)'
       chat.scrollTop = chat.scrollHeight // Stay bottom of the list
+      document.querySelector('#chatbox').shadowRoot.querySelectorAll('.chat-message').forEach(e => e.classList.remove('chat-message-chat-opened'))
     }
 
     function readExtra (extra) {
@@ -282,6 +302,18 @@ class ChatBox extends LitElement {
       })
       chat.appendChild(li)
       chat.scrollTop = chat.scrollHeight // Stay bottom of the list
+      // fading
+      li.classList.add('chat-message')
+      if (this.inChat) {
+        li.classList.add('chat-message-chat-opened')
+      }
+      setTimeout(() => {
+        li.classList.add('chat-message-fadeout')
+        li.classList.add('chat-message-fade')
+        setTimeout(() => {
+          li.classList.add('chat-message-faded')
+        }, 3000)
+      }, 5000)
     })
 
     hideChat()

webpack.common.js

@@ -70,7 +70,17 @@ const config = {
     { from: path.join(__dirname, '/node_modules/prismarine-viewer/public/supportedVersions.json'), to: './' },
     { from: path.join(__dirname, 'assets/'), to: './' },
     { from: path.join(__dirname, 'config.json'), to: './config.json' }
-  ]
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.m?js/,
+        resolve: {
+          fullySpecified: false
+        }
+      }
+    ]
+  }
 }
 
 module.exports = config