From 01c1cabdef98fc0abf00c210c00a7e4ebc9c64ed Mon Sep 17 00:00:00 2001 From: AwesomestCode <53128754+AwesomestCode@users.noreply.github.com> Date: Sun, 7 Mar 2021 16:49:49 -0500 Subject: [PATCH] Feature: Hotbar (#42) * Add Rendering Hotbar * Load hotbar on login * Add live hotbar changes * Add selecting slot * Add dropping * fix lint Co-authored-by: Romain Beaumont --- index.html | 21 +++++++++++++++++-- index.js | 61 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 54 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 134 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index a23dd200..9e6773df 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,24 @@ Prismarine Web Client - + +
+ + +
+ + + + + + + + + +

test

+
+ +
@@ -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