Skip to content

Commit 49a347b

Browse files
raymondjxuraymondjxu
authored
Feature: loading screen (#26)
* add broken loading screen * Add loading screen Add image & change webpack for easier testing * more loading script stuff * not really working kick detector * last ditch attempt * lint
1 parent 7c09897 commit 49a347b

File tree

7 files changed

+178
-7
lines changed

7 files changed

+178
-7
lines changed

‎extra-textures/loading.png

88.3 KB
Loading

‎extra-textures/options_background.png

949 Bytes
Loading

‎index.html

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -82,20 +82,58 @@
8282
transform: translate(calc(-50% + 120px * 4), calc(-50% + 120px * 4));
8383
clip-path: inset(0px calc(240px * 4) calc(240px * 4) 0px);
8484
}
85+
86+
h1 {
87+
font-family: mojangles, minecraft, monospace;
88+
}
89+
.loader {
90+
display: initial;
91+
}
92+
#loading-image {
93+
height: 75%;
94+
top: 50%;
95+
left: 50%;
96+
position: absolute;
97+
transform: translate(-50%, -50%);
98+
image-rendering: crisp-edges;
99+
image-rendering: -webkit-crisp-edges;
100+
}
101+
#loading-background {
102+
background-color: #60a490;
103+
z-index: 100;
104+
height: 100% !important;
105+
width: 100%;
106+
position: fixed;
107+
}
108+
#loading-text {
109+
color: #29594b;
110+
z-index: 200;
111+
position: absolute;
112+
top: 50%;
113+
left: 50%;
114+
transform: translate(-50%, 12rem);
115+
}
85116
</style>
86117
</head>
87-
<body>
88-
<img id="crosshair" src="textures/icons.png">
89-
<div class="chat-wrapper chat-display-wrapper">
90-
<div class="chat" id="chat">
91-
<p>Welcome to prismarine-web-client! Chat appears here.</p>
92-
</div>
118+
<body id="main-body">
119+
<img id="crosshair" src="extra-textures/icons.png">
120+
<div class="chat-wrapper chat-display-wrapper">
121+
<div class="chat" id="chat">
122+
<p>Welcome to prismarine-web-client! Chat appears here.</p>
123+
</div>
93124
</div>
94125
<div class="chat-wrapper chat-input-wrapper">
95126
<div class="chat" id="chat-input">
96127
<input type="text" class="chat" id="chatinput"></input>
97128
</div>
98129
</div>
130+
<div id="loading-background" class="loader">
131+
<img src="extra-textures/loading.png" id="loading-image">
132+
<div id="loading" class="loader">
133+
<h1 class="middle" id="loading-text">Waiting for user...</h1>
134+
</div>
135+
</div>
136+
99137
<script type="text/javascript" src="index.js"></script>
100138
</body>
101139
</html>

‎index.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,28 @@ const { WorldView, Viewer } = require('prismarine-viewer/viewer')
88
const Vec3 = require('vec3').Vec3
99
global.THREE = require('three')
1010
const Chat = require('./lib/chat')
11+
let status = 'Waiting for user'
1112

1213
const maxPitch = 0.5 * Math.PI
1314
const minPitch = -0.5 * Math.PI
1415

16+
async function statusRunner () {
17+
const array = ['.', '..', '...', '']
18+
// eslint-disable-next-line promise/param-names
19+
const timer = ms => new Promise(res => setTimeout(res, ms))
20+
21+
async function load () {
22+
for (let i = 0; true; i = ((i + 1) % array.length)) {
23+
document.getElementById('loading-text').innerText = status + array[i]
24+
await timer(500)
25+
}
26+
}
27+
28+
load()
29+
}
30+
1531
async function main () {
32+
statusRunner()
1633
const viewDistance = 6
1734
const host = prompt('Host', '95.111.249.143')
1835
const port = parseInt(prompt('Port', '10000'))
@@ -21,18 +38,38 @@ async function main () {
2138
password = password === '' ? undefined : password
2239
console.log(`connecting to ${host} ${port} with ${username}`)
2340

41+
status = 'Logging in'
42+
43+
document.getElementById('loading-text').requestFullscreen()
44+
2445
const bot = mineflayer.createBot({
2546
host,
2647
port,
2748
username,
2849
password
2950
})
3051

52+
bot.on('error', () => {
53+
console.log('Encountered error!')
54+
status = 'Error encountered. Please reload the page'
55+
})
56+
57+
bot.on('kicked', () => {
58+
console.log('User was kicked!')
59+
status = 'The Minecraft server kicked you. Please reload the page to rejoin'
60+
})
61+
3162
bot.on('end', () => {
3263
console.log('disconnected')
64+
status = 'You have been disconnected from the server. Please reload the page to rejoin'
65+
})
66+
bot.once('login', () => {
67+
status = 'Loading world...'
3368
})
3469

3570
bot.once('spawn', () => {
71+
status = 'Placing blocks (starting viewer)...'
72+
3673
console.log('bot spawned - starting viewer')
3774

3875
const version = bot.version
@@ -67,6 +104,8 @@ async function main () {
67104
viewer.listen(worldView)
68105
viewer.camera.position.set(center.x, center.y, center.z)
69106

107+
status = 'Setting callbacks...'
108+
70109
function moveCallback (e) {
71110
bot.entity.pitch -= e.movementY * 0.01
72111
bot.entity.pitch = Math.max(minPitch, Math.min(maxPitch, bot.entity.pitch))
@@ -141,6 +180,16 @@ async function main () {
141180
bot.stopDigging()
142181
}, false)
143182

183+
status = 'Done!'
184+
console.log(status) // only do that because it's read in index.html and npm run fix complains.
185+
186+
setTimeout(function () {
187+
// remove loading screen, wait a second to make sure a frame has properly rendered
188+
document.querySelectorAll('.loader').forEach((item) => {
189+
item.style = 'display: none;'
190+
})
191+
}, 2500)
192+
144193
// Browser animation loop
145194
const animate = () => {
146195
window.requestAnimationFrame(animate)

‎loading.psd

2.51 MB
Binary file not shown.

‎prismarinejs.svg

Lines changed: 84 additions & 0 deletions
Loading

‎webpack.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const config = {
6464
{ from: path.join(__dirname, '/node_modules/prismarine-viewer/public/supportedVersions.json'), to: './' },
6565
{ from: path.join(__dirname, 'assets/minecraftia.woff'), to: './' },
6666
{ from: path.join(__dirname, 'assets/mojangles.ttf'), to: './' },
67-
{ from: path.join(__dirname, 'extra-textures/'), to: './textures/' }
67+
{ from: path.join(__dirname, 'extra-textures/'), to: './extra-textures/' }
6868
]
6969
}),
7070
new webpack.optimize.ModuleConcatenationPlugin(),

0 commit comments

Comments
 (0)