move loading screen to component (#86)

index.html

@@ -33,12 +33,8 @@
         <input type="text" class="chat" id="chatinput"></input>
       </div>
     </div>
-    <div id="loading-background" class="loader" style="display: none;">
+    
-      <img src="extra-textures/loading.png" id="loading-image">
+    <loading-screen id="loading-background"  style="display: none;"></loading-screen>
-      <div id="loading" class="loader">
-        <h1 class="middle" id="loading-text">Waiting for JS load...</h1>
-      </div>
-    </div>
     <prismarine-menu id="prismarine-menu"></prismarine-menu>
   </body>
 </html>

index.js

@@ -1,5 +1,6 @@
 /* global THREE */
 require('./lib/menu')
+require('./lib/loading_screen')
 
 const net = require('net')
 
@@ -13,26 +14,9 @@ const { Vec3 } = require('vec3')
 global.THREE = require('three')
 const Chat = require('./lib/chat')
 
-let status = 'Waiting for user'
-
 const maxPitch = 0.5 * Math.PI
 const minPitch = -0.5 * Math.PI
 
-async function statusRunner () {
-  const array = ['.', '..', '...', '']
-  // eslint-disable-next-line promise/param-names
-  const timer = ms => new Promise(res => setTimeout(res, ms))
-
-  async function load () {
-    for (let i = 0; true; i = ((i + 1) % array.length)) {
-      document.getElementById('loading-text').innerText = status + array[i]
-      await timer(500)
-    }
-  }
-
-  load()
-}
-
 async function reloadHotbar (bot, viewer) {
   for (let i = 0; i < 9; i++) {
     // eslint-disable-next-line no-undef
@@ -74,7 +58,8 @@ async function main () {
 }
 
 async function connect (options) {
-  statusRunner()
+  const loadingScreen = document.getElementById('loading-background')
+
   const viewDistance = 6
   const hostprompt = options.server
   const proxyprompt = options.proxy
@@ -104,7 +89,7 @@ async function connect (options) {
     net.setProxy({ hostname: proxy, port: proxyport })
   }
 
-  status = 'Logging in'
+  loadingScreen.status = 'Logging in'
 
   const bot = mineflayer.createBot({
     host,
@@ -119,28 +104,28 @@ async function connect (options) {
 
   bot.on('error', (err) => {
     console.log('Encountered error!', err)
-    status = 'Error encountered. Please reload the page'
+    loadingScreen.status = 'Error encountered. Please reload the page'
   })
 
   bot.on('kicked', (kickReason) => {
     console.log('User was kicked!', kickReason)
-    status = 'The Minecraft server kicked you. Please reload the page to rejoin'
+    loadingScreen.status = 'The Minecraft server kicked you. Please reload the page to rejoin'
   })
 
   bot.on('end', (endReason) => {
     console.log('disconnected for', endReason)
-    status = 'You have been disconnected from the server. Please reload the page to rejoin'
+    loadingScreen.status = 'You have been disconnected from the server. Please reload the page to rejoin'
   })
 
   bot.once('login', () => {
-    status = 'Loading world...'
+    loadingScreen.status = 'Loading world...'
   })
 
   bot.once('spawn', () => {
     const mcData = require('minecraft-data')(bot.version)
 
     reloadHotbarSelected(bot, 0)
-    status = 'Placing blocks (starting viewer)...'
+    loadingScreen.status = 'Placing blocks (starting viewer)...'
 
     console.log('bot spawned - starting viewer')
 
@@ -183,7 +168,7 @@ async function connect (options) {
     bot.on('move', botPosition)
     viewer.camera.position.set(center.x, center.y, center.z)
 
-    status = 'Setting callbacks...'
+    loadingScreen.status = 'Setting callbacks...'
 
     function moveCallback (e) {
       bot.entity.pitch -= e.movementY * 0.01
@@ -275,14 +260,12 @@ async function connect (options) {
       reloadHotbarSelected(bot, newSlot)
     })
 
-    status = 'Done!'
+    loadingScreen.status = 'Done!'
-    console.log(status) // only do that because it's read in index.html and npm run fix complains.
+    console.log(loadingScreen.status) // only do that because it's read in index.html and npm run fix complains.
 
     setTimeout(function () {
       // remove loading screen, wait a second to make sure a frame has properly rendered
-      document.querySelectorAll('.loader').forEach((item) => {
+      loadingScreen.style = 'display: none;'
-        item.style = 'display: none;'
-      })
     }, 2500)
 
     // Browser animation loop

lib/loading_screen.js

@@ -0,0 +1,94 @@
+const { LitElement, html, css } = require('lit-element')
+
+class LoadingScreen extends LitElement {
+  constructor () {
+    super()
+    this.status = 'Waiting for JS load'
+  }
+
+  firstUpdated () {
+    this.statusRunner()
+  }
+
+  static get properties () {
+    return {
+      status: { type: String },
+      loadingText: { type: String }
+    }
+  }
+
+  async statusRunner () {
+    const array = ['.', '..', '...', '']
+    // eslint-disable-next-line promise/param-names
+    const timer = ms => new Promise(res => setTimeout(res, ms))
+
+    const load = async () => {
+      for (let i = 0; true; i = ((i + 1) % array.length)) {
+        this.loadingText = this.status + array[i]
+        await timer(500)
+      }
+    }
+
+    load()
+  }
+
+  static get styles () {
+    return css`
+       @font-face {
+            font-family: minecraft;
+            src: url(minecraftia.woff);
+        }
+
+        @font-face {
+            font-family: mojangles;
+            src: url(mojangles.ttf);
+        }
+
+        h1 {
+            font-family: mojangles, minecraft, monospace;
+        }
+        .loader {
+            display: initial;
+        }
+        #loading-image {
+            height: 75%;
+            top: 50%;
+            left: 50%;
+            position: absolute;
+            transform: translate(-50%, -50%);
+            image-rendering: crisp-edges;
+            image-rendering: -webkit-crisp-edges;
+        }
+
+        #loading-background {
+            background-color: #60a490;
+            z-index: 100;
+            height: 100% !important;
+            width: 100%;
+            position: fixed;
+        }
+
+        #loading-text {
+            color: #29594b;
+            z-index: 200;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, 12rem);
+        }
+    `
+  }
+
+  render () {
+    return html`
+    <div id="loading-background" class="loader">
+      <img src="extra-textures/loading.png" id="loading-image">
+      <div id="loading" class="loader">
+        <h1 class="middle" id="loading-text">${this.loadingText}</h1>
+      </div>
+    </div>
+    `
+  }
+}
+
+window.customElements.define('loading-screen', LoadingScreen)

styles.css

@@ -83,41 +83,6 @@ li {
 	clip-path: inset(0px calc(240px * 4) calc(240px * 4) 0px);
 }
 
-h1 {
-	font-family: mojangles, minecraft, monospace;
-}
-
-.loader {
-	display: initial;
-}
-
-#loading-image {
-	height: 75%;
-	top: 50%;
-	left: 50%;
-	position: absolute;
-	transform: translate(-50%, -50%);
-	image-rendering: crisp-edges;
-	image-rendering: -webkit-crisp-edges;
-}
-
-#loading-background {
-	background-color: #60a490;
-	z-index: 100;
-	height: 100% !important;
-	width: 100%;
-	position: fixed;
-}
-
-#loading-text {
-	color: #29594b;
-	z-index: 200;
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, 12rem);
-}
-
 body {
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;