chipmunkmc/prismarine-web-client
1
0
Fork 0
forked from chipmunkmc/prismarine-web-client-mirror
Code Issues Pull requests Projects Releases Packages Wiki Activity

Use item atlas

Browse source
This commit is contained in:
Karang 2021-03-14 19:56:54 +01:00
parent f0294abf9e
commit 267afce9db
6 changed files with 4838 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/invsprite.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.2 MiB

1
index.html
View file

@ -6,7 +6,6 @@
<link rel="favicon" href="favicon.ico"> <link rel="favicon" href="favicon.ico">
</head> </head>
<body> <body>
<img id="crosshair" src="extra-textures/icons.png" style="display: none;"> <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 id="chat-wrapper" class="chat-wrapper chat-display-wrapper" style="display: none;">
<div class="chat" id="chat"> <div class="chat" id="chat">

70
lib/hotbar.js
View file

@ -1,4 +1,5 @@
const { LitElement, html, css } = require('lit-element') const { LitElement, html, css } = require('lit-element')
const invsprite = require('./invsprite.json')
class HotBar extends LitElement { class HotBar extends LitElement {
updated (changedProperties) { updated (changedProperties) {
@ -13,8 +14,6 @@ class HotBar extends LitElement {
init () { init () {
this.reloadHotbar() this.reloadHotbar()
this.reloadHotbarSelected(0) this.reloadHotbarSelected(0)
const baseUrl = window.location.href.match(/(^[^#]*)/)[0]
const self = this
document.addEventListener('wheel', (e) => { document.addEventListener('wheel', (e) => {
const newSlot = ((this.bot.quickBarSlot + Math.sign(e.deltaY)) % 9 + 9) % 9 const newSlot = ((this.bot.quickBarSlot + Math.sign(e.deltaY)) % 9 + 9) % 9
this.reloadHotbarSelected(newSlot) this.reloadHotbarSelected(newSlot)
@ -24,41 +23,20 @@ class HotBar extends LitElement {
if (slot >= this.bot.inventory.hotbarStart + 9) return if (slot >= this.bot.inventory.hotbarStart + 9) return
if (slot < this.bot.inventory.hotbarStart) return if (slot < this.bot.inventory.hotbarStart) return
// eslint-disable-next-line no-undef const sprite = newItem ? invsprite[newItem.name] : invsprite.air
const http = new XMLHttpRequest() const slotImage = this.shadowRoot.getElementById('hotbar-' + (slot - this.bot.inventory.hotbarStart))
let url = newItem ? baseUrl + 'textures/' + this.viewerVersion + '/items/' + newItem.name + '.png' : '' slotImage.style['background-position-x'] = `-${sprite.x * 2}px`
http.open('HEAD', url) slotImage.style['background-position-y'] = `-${sprite.y * 2}px`
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 () { async reloadHotbar () {
const baseUrl = window.location.href.match(/(^[^#]*)/)[0]
const self = this
for (let i = 0; i < 9; i++) { for (let i = 0; i < 9; i++) {
// eslint-disable-next-line no-undef const item = this.bot.inventory.slots[this.bot.inventory.hotbarStart + i]
const http = new XMLHttpRequest() const sprite = item ? invsprite[item.name] : invsprite.air
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' : '' const slotImage = this.shadowRoot.getElementById('hotbar-' + i)
http.open('HEAD', url) slotImage.style['background-position-x'] = `-${sprite.x * 2}px`
slotImage.style['background-position-y'] = `-${sprite.y * 2}px`
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()
} }
} }
@ -126,10 +104,12 @@ class HotBar extends LitElement {
} }
.hotbar-item { .hotbar-item {
height: calc(16px * 4); height: 64px;
width: calc(16px * 4); width: 64px;
margin-top: calc(3px * 4); margin-top: 12px;
margin-left: calc(3px * 4); margin-left: 12px;
background-image: url('invsprite.png');
background-size: 2048px auto;
} }
` `
} }
@ -140,15 +120,15 @@ class HotBar extends LitElement {
<img id="hotbar-image" src="textures/1.16.4/gui/widgets.png"> <img id="hotbar-image" src="textures/1.16.4/gui/widgets.png">
<img id="hotbar-highlight" 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"> <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-0">
<img class="hotbar-item" id="hotbar-1" src="textures/1.16.4/items/chain.png"> <img class="hotbar-item" id="hotbar-1">
<img class="hotbar-item" id="hotbar-2" src="textures/1.16.4/items/flint_and_steel.png"> <img class="hotbar-item" id="hotbar-2">
<img class="hotbar-item" id="hotbar-3" src="textures/1.16.4/items/firework_rocket.png"> <img class="hotbar-item" id="hotbar-3">
<img class="hotbar-item" id="hotbar-4" src="textures/1.16.4/items/golden_carrot.png"> <img class="hotbar-item" id="hotbar-4">
<img class="hotbar-item" id="hotbar-5" src="textures/1.16.4/items/netherite_pickaxe.png"> <img class="hotbar-item" id="hotbar-5">
<img class="hotbar-item" id="hotbar-6" src="textures/1.16.4/items/netherite_pickaxe.png"> <img class="hotbar-item" id="hotbar-6">
<img class="hotbar-item" id="hotbar-7" src="textures/1.16.4/items/netherite_axe.png"> <img class="hotbar-item" id="hotbar-7">
<img class="hotbar-item" id="hotbar-8" src="textures/1.16.4/items/netherite_shovel.png"> <img class="hotbar-item" id="hotbar-8">
</div> </div>
</div> </div>
` `

4812
lib/invsprite.json Normal file
View file

File diff suppressed because it is too large Load diff

1
styles.css
View file

@ -91,4 +91,3 @@ body {
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }

4
webpack.common.js
View file

@ -64,9 +64,7 @@ const config = {
{ from: path.join(__dirname, '/node_modules/prismarine-viewer/public/textures/'), to: './textures/' }, { from: path.join(__dirname, '/node_modules/prismarine-viewer/public/textures/'), to: './textures/' },
{ from: path.join(__dirname, '/node_modules/prismarine-viewer/public/worker.js'), to: './' }, { from: path.join(__dirname, '/node_modules/prismarine-viewer/public/worker.js'), to: './' },
{ from: path.join(__dirname, '/node_modules/prismarine-viewer/public/supportedVersions.json'), to: './' }, { from: path.join(__dirname, '/node_modules/prismarine-viewer/public/supportedVersions.json'), to: './' },
{ from: path.join(__dirname, 'assets/minecraftia.woff'), to: './' }, { from: path.join(__dirname, 'assets/'), to: './' },
{ from: path.join(__dirname, 'assets/mojangles.ttf'), to: './' },
{ from: path.join(__dirname, 'assets/prismarinejs.ico'), to: './favicon.ico' },
{ from: path.join(__dirname, 'extra-textures/'), to: './extra-textures/' } { from: path.join(__dirname, 'extra-textures/'), to: './extra-textures/' }
] ]
}) })