mirror of
https://github.com/PrismarineJS/prismarine-web-client.git
synced 2024-11-14 19:25:07 -05:00
move loading screen to component (#86)
This commit is contained in:
Romain Beaumont
GitHub
parent
5cf0cb4a4f
commit
4efff81a6a
4 changed files with 109 additions and 71 deletions
|
|
@ -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">
|
||||
<div id="loading" class="loader">
|
||||
<h1 class="middle" id="loading-text">Waiting for JS load...</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<loading-screen id="loading-background" style="display: none;"></loading-screen>
|
||||
<prismarine-menu id="prismarine-menu"></prismarine-menu>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
43
index.js
43
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
|
||||
|
|
|
|||
94
lib/loading_screen.js
Normal file
94
lib/loading_screen.js
Normal file
|
|
@ -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)
|
||||
35
styles.css
35
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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue