move hotbar to web component (#89)
This commit is contained in:
parent
4efff81a6a
commit
77fa0ee0cd
4 changed files with 167 additions and 126 deletions
19
index.html
19
index.html
|
@ -6,22 +6,7 @@
|
|||
<link rel="favicon" href="favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<div id="hotbar-wrapper" style="display: none;">
|
||||
<img id="hotbar-image" src="textures/1.16.4/gui/widgets.png">
|
||||
<img id="hotbar-highlight" src="textures/1.16.4/gui/widgets.png">
|
||||
<div id="hotbar-items-wrapper">
|
||||
<img class="hotbar-item" id="hotbar-0" src="textures/1.16.4/blocks/stone.png">
|
||||
<img class="hotbar-item" id="hotbar-1" src="textures/1.16.4/items/chain.png">
|
||||
<img class="hotbar-item" id="hotbar-2" src="textures/1.16.4/items/flint_and_steel.png">
|
||||
<img class="hotbar-item" id="hotbar-3" src="textures/1.16.4/items/firework_rocket.png">
|
||||
<img class="hotbar-item" id="hotbar-4" src="textures/1.16.4/items/golden_carrot.png">
|
||||
<img class="hotbar-item" id="hotbar-5" src="textures/1.16.4/items/netherite_pickaxe.png">
|
||||
<img class="hotbar-item" id="hotbar-6" src="textures/1.16.4/items/netherite_pickaxe.png">
|
||||
<img class="hotbar-item" id="hotbar-7" src="textures/1.16.4/items/netherite_axe.png">
|
||||
<img class="hotbar-item" id="hotbar-8" src="textures/1.16.4/items/netherite_shovel.png">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<img id="crosshair" src="extra-textures/icons.png" style="display: none;">
|
||||
<div id="chat-wrapper" class="chat-wrapper chat-display-wrapper" style="display: none;">
|
||||
<div class="chat" id="chat">
|
||||
|
@ -33,7 +18,7 @@
|
|||
<input type="text" class="chat" id="chatinput"></input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hot-bar id="hotbar" style="display: none;"></hot-bar>
|
||||
<loading-screen id="loading-background" style="display: none;"></loading-screen>
|
||||
<prismarine-menu id="prismarine-menu"></prismarine-menu>
|
||||
</body>
|
||||
|
|
63
index.js
63
index.js
|
@ -1,6 +1,7 @@
|
|||
/* global THREE */
|
||||
require('./lib/menu')
|
||||
require('./lib/loading_screen')
|
||||
require('./lib/hotbar')
|
||||
|
||||
const net = require('net')
|
||||
|
||||
|
@ -17,37 +18,12 @@ const Chat = require('./lib/chat')
|
|||
const maxPitch = 0.5 * Math.PI
|
||||
const minPitch = -0.5 * Math.PI
|
||||
|
||||
async function reloadHotbar (bot, viewer) {
|
||||
for (let i = 0; i < 9; i++) {
|
||||
// eslint-disable-next-line no-undef
|
||||
const http = new XMLHttpRequest()
|
||||
let url = bot.inventory.slots[bot.inventory.hotbarStart + i] ? window.location.href + 'textures/' + viewer.version + '/items/' + bot.inventory.slots[bot.inventory.hotbarStart + i].name + '.png' : ''
|
||||
http.open('HEAD', url)
|
||||
|
||||
http.onreadystatechange = function () {
|
||||
if (this.readyState === this.DONE) {
|
||||
if (this.status === 404) {
|
||||
url = bot.inventory.slots[bot.inventory.hotbarStart + i] ? window.location.href + 'textures/' + viewer.version + '/blocks/' + bot.inventory.slots[bot.inventory.hotbarStart + i].name + '.png' : ''
|
||||
}
|
||||
document.getElementById('hotbar-' + i).src = url
|
||||
}
|
||||
}
|
||||
http.send()
|
||||
}
|
||||
}
|
||||
|
||||
async function reloadHotbarSelected (bot, slot) {
|
||||
const planned = (20 * 4 * slot) + 'px'
|
||||
document.getElementById('hotbar-highlight').style.marginLeft = planned
|
||||
bot.setQuickBarSlot(slot)
|
||||
}
|
||||
|
||||
async function main () {
|
||||
const menu = document.getElementById('prismarine-menu')
|
||||
menu.addEventListener('connect', e => {
|
||||
const options = e.detail
|
||||
menu.style = 'display: none;'
|
||||
document.getElementById('hotbar-wrapper').style = 'display:block'
|
||||
document.getElementById('hotbar').style = 'display:block'
|
||||
document.getElementById('crosshair').style = 'display:block'
|
||||
document.getElementById('chat-wrapper').style = 'display:block'
|
||||
document.getElementById('chat-wrapper2').style = 'display:block'
|
||||
|
@ -59,6 +35,7 @@ async function main () {
|
|||
|
||||
async function connect (options) {
|
||||
const loadingScreen = document.getElementById('loading-background')
|
||||
const hotbar = document.getElementById('hotbar')
|
||||
|
||||
const viewDistance = 6
|
||||
const hostprompt = options.server
|
||||
|
@ -102,6 +79,8 @@ async function connect (options) {
|
|||
closeTimeout: 240 * 1000
|
||||
})
|
||||
|
||||
hotbar.bot = bot
|
||||
|
||||
bot.on('error', (err) => {
|
||||
console.log('Encountered error!', err)
|
||||
loadingScreen.status = 'Error encountered. Please reload the page'
|
||||
|
@ -124,7 +103,6 @@ async function connect (options) {
|
|||
bot.once('spawn', () => {
|
||||
const mcData = require('minecraft-data')(bot.version)
|
||||
|
||||
reloadHotbarSelected(bot, 0)
|
||||
loadingScreen.status = 'Placing blocks (starting viewer)...'
|
||||
|
||||
console.log('bot spawned - starting viewer')
|
||||
|
@ -147,6 +125,7 @@ async function connect (options) {
|
|||
const viewer = new Viewer(renderer)
|
||||
viewer.setVersion(version)
|
||||
|
||||
hotbar.viewerVersion = viewer.version
|
||||
window.worldView = worldView
|
||||
window.bot = bot
|
||||
window.mcData = mcData
|
||||
|
@ -154,8 +133,6 @@ async function connect (options) {
|
|||
window.Vec3 = Vec3
|
||||
window.pathfinder = pathfinder
|
||||
|
||||
reloadHotbar(bot, viewer)
|
||||
|
||||
// Link WorldView and Viewer
|
||||
viewer.listen(worldView)
|
||||
worldView.listenToBot(bot)
|
||||
|
@ -219,7 +196,7 @@ async function connect (options) {
|
|||
}
|
||||
if (e.code.startsWith('Digit')) {
|
||||
const numPressed = e.code.substr(5)
|
||||
reloadHotbarSelected(bot, numPressed - 1)
|
||||
hotbar.reloadHotbarSelected(bot, numPressed - 1)
|
||||
}
|
||||
if (e.code === 'KeyQ') {
|
||||
if (bot.heldItem) bot.tossStack(bot.heldItem)
|
||||
|
@ -255,11 +232,6 @@ async function connect (options) {
|
|||
bot.stopDigging()
|
||||
}, false)
|
||||
|
||||
document.addEventListener('wheel', (e) => {
|
||||
const newSlot = ((bot.quickBarSlot + Math.sign(e.deltaY)) % 9 + 9) % 9
|
||||
reloadHotbarSelected(bot, newSlot)
|
||||
})
|
||||
|
||||
loadingScreen.status = 'Done!'
|
||||
console.log(loadingScreen.status) // only do that because it's read in index.html and npm run fix complains.
|
||||
|
||||
|
@ -276,27 +248,6 @@ async function connect (options) {
|
|||
}
|
||||
animate()
|
||||
|
||||
// inventory listener
|
||||
bot.inventory.on('updateSlot', (slot, oldItem, newItem) => {
|
||||
if (slot >= bot.inventory.hotbarStart + 9) return
|
||||
if (slot < bot.inventory.hotbarStart) return
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
const http = new XMLHttpRequest()
|
||||
let url = newItem ? window.location.href + 'textures/' + viewer.version + '/items/' + newItem.name + '.png' : ''
|
||||
http.open('HEAD', url)
|
||||
|
||||
http.onreadystatechange = function () {
|
||||
if (this.readyState === this.DONE) {
|
||||
if (this.status === 404) {
|
||||
url = newItem ? window.location.href + 'textures/' + viewer.version + '/blocks/' + newItem.name + '.png' : ''
|
||||
}
|
||||
document.getElementById('hotbar-' + (slot - bot.inventory.hotbarStart)).src = url
|
||||
}
|
||||
}
|
||||
http.send()
|
||||
})
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
viewer.camera.aspect = window.innerWidth / window.innerHeight
|
||||
viewer.camera.updateProjectionMatrix()
|
||||
|
|
158
lib/hotbar.js
Normal file
158
lib/hotbar.js
Normal file
|
@ -0,0 +1,158 @@
|
|||
const { LitElement, html, css } = require('lit-element')
|
||||
|
||||
class HotBar extends LitElement {
|
||||
updated (changedProperties) {
|
||||
if (changedProperties.has('bot')) {
|
||||
// inventory listener
|
||||
this.bot.on('spawn', () => {
|
||||
this.init()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
init () {
|
||||
this.reloadHotbar()
|
||||
this.reloadHotbarSelected(0)
|
||||
const baseUrl = window.location.href.match(/(^[^#]*)/)[0]
|
||||
const self = this
|
||||
document.addEventListener('wheel', (e) => {
|
||||
const newSlot = ((this.bot.quickBarSlot + Math.sign(e.deltaY)) % 9 + 9) % 9
|
||||
this.reloadHotbarSelected(newSlot)
|
||||
})
|
||||
|
||||
this.bot.inventory.on('updateSlot', (slot, oldItem, newItem) => {
|
||||
if (slot >= this.bot.inventory.hotbarStart + 9) return
|
||||
if (slot < this.bot.inventory.hotbarStart) return
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
const http = new XMLHttpRequest()
|
||||
let url = newItem ? baseUrl + 'textures/' + this.viewerVersion + '/items/' + newItem.name + '.png' : ''
|
||||
http.open('HEAD', url)
|
||||
|
||||
http.onreadystatechange = function () {
|
||||
if (this.readyState === this.DONE) {
|
||||
if (this.status === 404) {
|
||||
url = newItem ? baseUrl + 'textures/' + self.viewerVersion + '/blocks/' + newItem.name + '.png' : ''
|
||||
}
|
||||
self.shadowRoot.getElementById('hotbar-' + (slot - self.bot.inventory.hotbarStart)).src = url
|
||||
}
|
||||
}
|
||||
http.send()
|
||||
})
|
||||
}
|
||||
|
||||
async reloadHotbar () {
|
||||
const baseUrl = window.location.href.match(/(^[^#]*)/)[0]
|
||||
const self = this
|
||||
for (let i = 0; i < 9; i++) {
|
||||
// eslint-disable-next-line no-undef
|
||||
const http = new XMLHttpRequest()
|
||||
let url = this.bot.inventory.slots[this.bot.inventory.hotbarStart + i] ? baseUrl + 'textures/' + this.viewerVersion + '/items/' + this.bot.inventory.slots[this.bot.inventory.hotbarStart + i].name + '.png' : ''
|
||||
http.open('HEAD', url)
|
||||
|
||||
http.onreadystatechange = function () {
|
||||
if (this.readyState === this.DONE) {
|
||||
if (this.status === 404) {
|
||||
url = self.bot.inventory.slots[self.bot.inventory.hotbarStart + i] ? baseUrl + 'textures/' + self.viewerVersion + '/blocks/' + self.bot.inventory.slots[self.bot.inventory.hotbarStart + i].name + '.png' : ''
|
||||
}
|
||||
self.shadowRoot.getElementById('hotbar-' + i).src = url
|
||||
}
|
||||
}
|
||||
http.send()
|
||||
}
|
||||
}
|
||||
|
||||
async reloadHotbarSelected (slot) {
|
||||
const planned = (20 * 4 * slot) + 'px'
|
||||
this.shadowRoot.getElementById('hotbar-highlight').style.marginLeft = planned
|
||||
this.bot.setQuickBarSlot(slot)
|
||||
}
|
||||
|
||||
static get properties () {
|
||||
return {
|
||||
bot: { type: Object },
|
||||
viewerVersion: { type: String }
|
||||
}
|
||||
}
|
||||
|
||||
static get styles () {
|
||||
return css`
|
||||
#hotbar-image {
|
||||
image-rendering: optimizeSpeed;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: -o-crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
height: calc(256px * 4);
|
||||
width: calc(256px * 4);
|
||||
transform: translate(calc(-182px * 2), calc(-22px * 4));
|
||||
clip-path: inset(0px calc(74px * 4) calc(234px * 4) 0px);
|
||||
}
|
||||
#hotbar-items-wrapper {
|
||||
image-rendering: optimizeSpeed;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: -o-crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
height: calc(256px * 4);
|
||||
width: calc(256px * 4);
|
||||
transform: translate(calc(-182px * 2), calc(-22px * 4));
|
||||
clip-path: inset(0px calc(74px * 4) calc(234px * 4) 0px);
|
||||
}
|
||||
|
||||
#hotbar-highlight {
|
||||
image-rendering: optimizeSpeed;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: -o-crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
height: calc(256px * 4);
|
||||
width: calc(256px * 4);
|
||||
margin-left: calc(20px * 4 * 4); /* EDIT THIS TO CHANGE WHICH SLOT IS SELECTED */
|
||||
transform: translate(calc((-24px * 2) - (20px * 4 * 4) ), calc((-22px * 4) + (-24px * 4) + 4px)); /* first need to translate up to account for clipping, then account for size of image, then 1px to center vertically over the image*/
|
||||
clip-path: inset(calc(22px * 4) calc(232px * 4) calc(210px * 4) 0px);
|
||||
}
|
||||
|
||||
.hotbar-item {
|
||||
height: calc(16px * 4);
|
||||
width: calc(16px * 4);
|
||||
margin-top: calc(3px * 4);
|
||||
margin-left: calc(3px * 4);
|
||||
}
|
||||
`
|
||||
}
|
||||
|
||||
render () {
|
||||
return html`
|
||||
<div id="hotbar-wrapper">
|
||||
<img id="hotbar-image" src="textures/1.16.4/gui/widgets.png">
|
||||
<img id="hotbar-highlight" src="textures/1.16.4/gui/widgets.png">
|
||||
<div id="hotbar-items-wrapper">
|
||||
<img class="hotbar-item" id="hotbar-0" src="textures/1.16.4/blocks/stone.png">
|
||||
<img class="hotbar-item" id="hotbar-1" src="textures/1.16.4/items/chain.png">
|
||||
<img class="hotbar-item" id="hotbar-2" src="textures/1.16.4/items/flint_and_steel.png">
|
||||
<img class="hotbar-item" id="hotbar-3" src="textures/1.16.4/items/firework_rocket.png">
|
||||
<img class="hotbar-item" id="hotbar-4" src="textures/1.16.4/items/golden_carrot.png">
|
||||
<img class="hotbar-item" id="hotbar-5" src="textures/1.16.4/items/netherite_pickaxe.png">
|
||||
<img class="hotbar-item" id="hotbar-6" src="textures/1.16.4/items/netherite_pickaxe.png">
|
||||
<img class="hotbar-item" id="hotbar-7" src="textures/1.16.4/items/netherite_axe.png">
|
||||
<img class="hotbar-item" id="hotbar-8" src="textures/1.16.4/items/netherite_shovel.png">
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
window.customElements.define('hot-bar', HotBar)
|
53
styles.css
53
styles.css
|
@ -91,57 +91,4 @@ body {
|
|||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
#hotbar-image {
|
||||
image-rendering: optimizeSpeed;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: -o-crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
height: calc(256px * 4);
|
||||
width: calc(256px * 4);
|
||||
transform: translate(calc(-182px * 2), calc(-22px * 4));
|
||||
clip-path: inset(0px calc(74px * 4) calc(234px * 4) 0px);
|
||||
}
|
||||
#hotbar-items-wrapper {
|
||||
image-rendering: optimizeSpeed;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: -o-crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
height: calc(256px * 4);
|
||||
width: calc(256px * 4);
|
||||
transform: translate(calc(-182px * 2), calc(-22px * 4));
|
||||
clip-path: inset(0px calc(74px * 4) calc(234px * 4) 0px);
|
||||
}
|
||||
|
||||
#hotbar-highlight {
|
||||
image-rendering: optimizeSpeed;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: -o-crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
height: calc(256px * 4);
|
||||
width: calc(256px * 4);
|
||||
margin-left: calc(20px * 4 * 4); /* EDIT THIS TO CHANGE WHICH SLOT IS SELECTED */
|
||||
transform: translate(calc((-24px * 2) - (20px * 4 * 4) ), calc((-22px * 4) + (-24px * 4) + 4px)); /* first need to translate up to account for clipping, then account for size of image, then 1px to center vertically over the image*/
|
||||
clip-path: inset(calc(22px * 4) calc(232px * 4) calc(210px * 4) 0px);
|
||||
}
|
||||
|
||||
.hotbar-item {
|
||||
height: calc(16px * 4);
|
||||
width: calc(16px * 4);
|
||||
margin-top: calc(3px * 4);
|
||||
margin-left: calc(3px * 4);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue