From 4efff81a6ae6819ec8d730dbf46964ff1352ad26 Mon Sep 17 00:00:00 2001 From: Romain Beaumont Date: Sun, 14 Mar 2021 18:24:09 +0100 Subject: [PATCH] move loading screen to component (#86) --- index.html | 8 +--- index.js | 43 ++++++-------------- lib/loading_screen.js | 94 +++++++++++++++++++++++++++++++++++++++++++ styles.css | 35 ---------------- 4 files changed, 109 insertions(+), 71 deletions(-) create mode 100644 lib/loading_screen.js diff --git a/index.html b/index.html index 3d7b107..e8a363b 100644 --- a/index.html +++ b/index.html @@ -33,12 +33,8 @@ - + + diff --git a/index.js b/index.js index 62ffd9b..272411e 100644 --- a/index.js +++ b/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!' - console.log(status) // only do that because it's read in index.html and npm run fix complains. + loadingScreen.status = 'Done!' + 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) => { - item.style = 'display: none;' - }) + loadingScreen.style = 'display: none;' }, 2500) // Browser animation loop diff --git a/lib/loading_screen.js b/lib/loading_screen.js new file mode 100644 index 0000000..450f474 --- /dev/null +++ b/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` +
+ +
+

${this.loadingText}

+
+
+ ` + } +} + +window.customElements.define('loading-screen', LoadingScreen) diff --git a/styles.css b/styles.css index 8412dbd..e49fb48 100644 --- a/styles.css +++ b/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;