@@ -19,7 +36,7 @@
-
Waiting for user...
+ Waiting for JS load...
diff --git a/index.js b/index.js
index 62c17193..f9802abc 100644
--- a/index.js
+++ b/index.js
@@ -31,6 +31,34 @@ async function statusRunner () {
load()
}
+async function reloadHotbar (bot) {
+ console.log('Loading hotbar.')
+ 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/' + bot.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/' + bot.version + '/blocks/' + bot.inventory.slots[bot.inventory.hotbarStart + i].name + '.png' : ''
+ }
+ document.getElementById('hotbar-' + i).src = url
+ }
+ }
+ http.send()
+ }
+}
+
+async function reloadHotbarSelected (bot, slot) {
+ console.log('Changing the selected hotbar slot to ' + slot.toString() + '!')
+ const planned = (20 * 4 * slot) + 'px'
+ document.getElementById('hotbar-highlight').style.marginLeft = planned
+ bot.setQuickBarSlot(slot)
+ console.log('Successfully changed to ' + planned + '!')
+}
+
async function main () {
statusRunner()
const viewDistance = 6
@@ -86,15 +114,19 @@ async function main () {
console.log('disconnected')
status = 'You have been disconnected from the server. Please reload the page to rejoin'
})
+
bot.once('login', () => {
status = 'Loading world...'
})
bot.once('spawn', () => {
+ reloadHotbarSelected(bot, 0)
status = 'Placing blocks (starting viewer)...'
console.log('bot spawned - starting viewer')
+ reloadHotbar(bot)
+
const version = bot.version
const center = bot.entity.position
@@ -176,6 +208,14 @@ async function main () {
if (e.code in codes) {
bot.setControlState(codes[e.code], true)
}
+ if (e.code.startsWith('Digit')) {
+ const numPressed = e.code.substr(5)
+ console.log(numPressed)
+ reloadHotbarSelected(bot, numPressed - 1)
+ }
+ if (e.code === 'KeyQ') {
+ bot.tossStack(bot.heldItem)
+ }
}, false)
document.addEventListener('keyup', (e) => {
@@ -221,6 +261,27 @@ async function main () {
}
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/' + bot.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/' + bot.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()
diff --git a/styles.css b/styles.css
index 553d793e..64895a9a 100644
--- a/styles.css
+++ b/styles.css
@@ -126,3 +126,57 @@ 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);
+}
\ No newline at end of file
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 