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 <romain.rom1@gmail.com>
This commit is contained in:
AwesomestCode
GitHub
parent
eace2c97cc
commit
01c1cabdef
3 changed files with 134 additions and 2 deletions
21
index.html
21
index.html
|
|
@ -4,7 +4,24 @@
|
|||
<title>Prismarine Web Client</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body id="main-body">
|
||||
<body>
|
||||
<div id="hotbar-wrapper">
|
||||
<img id="hotbar-image" src="textures/1.16.4/gui/widgets.png"> <!--NOTE: DELETE THE PUBLIC HERE BEFORE MERGING! THIS IS FOR TESTING W/O WEBPACK !-->
|
||||
<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">
|
||||
<h1 style="color: gray;">test</h1>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<img id="crosshair" src="extra-textures/icons.png">
|
||||
<div class="chat-wrapper chat-display-wrapper">
|
||||
<div class="chat" id="chat">
|
||||
|
|
@ -19,7 +36,7 @@
|
|||
<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">Waiting for user...</h1>
|
||||
<h1 class="middle" id="loading-text">Waiting for JS load...</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
61
index.js
61
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()
|
||||
|
|
|
|||
54
styles.css
54
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);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue