Updatable inventory

index.js

@@ -316,7 +316,7 @@ async function connect (options) {
       renderer.domElement.mozRequestPointerLock ||
       renderer.domElement.webkitRequestPointerLock
     document.addEventListener('mousedown', (e) => {
-      if (!chat.inChat && !gameMenu.inMenu) {
+      if (!chat.inChat && !gameMenu.inMenu && !inventoryMenu.inMenu) {
         renderer.domElement.requestPointerLock()
       }
     })

lib/menus/inventory.js

@@ -96,7 +96,15 @@ class Inventory extends LitElement {
         return new Item(this.type, this.count)
       }
     }
-    inventory['inventoryItems'] = bot.inventory.slots.slice(bot.inventory.inventoryStart, bot.inventory.inventoryEnd + 1).map(slot => slot ? new Item(slot ? slot.name : 'air', slot ? slot.count : 0) : new Item('air', ''))
+    inventory.inventoryItems = bot.inventory.slots.slice(bot.inventory.inventoryStart, bot.inventory.inventoryEnd + 1).map(slot => slot ? new Item(slot ? slot.name : 'air', slot ? slot.count : 0) : new Item('air', ''))
+    bot.inventory.on('updateSlot', (slot, _oldItem, newItem) => {
+      if (newItem) {
+        inventory.inventoryItems[slot - bot.inventory.inventoryStart] = new Item(newItem.name, newItem.count)
+      } else {
+        inventory.inventoryItems[slot - bot.inventory.inventoryStart] = new Item('air', '')
+      }
+      inventory.needsUpdate = true
+    })
   }
 
   render () {

lib/menus/utils/image-util.js

@@ -4,60 +4,43 @@ const invspritePositions = require('../../invsprite.json')
 
 globalThis.layouts = layouts
 
-if (window.location.href.includes('127.0.0.1')) {
-  var IMAGE_ROOT = 'textures/'
-} else {
-  var IMAGE_ROOT = 'https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.16.4/'
-}
+const IMAGE_ROOT = 'https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.16.4/'
 
-function patchPath(path) {
-  if (IMAGE_ROOT.includes('.com')) {path = path.replace('block/', 'blocks/'); path=path.replace('item/', 'items/')}
-  //if (path.includes('enchant_table_anim'))path='enchant_table_anims2'
+function patchPath (path) {
+  if (IMAGE_ROOT.includes('.com')) { path = path.replace('block/', 'blocks/'); path = path.replace('item/', 'items/') }
+  // if (path.includes('enchant_table_anim'))path='enchant_table_anims2'
   console.log(path)
   return path
 }
 
-window.loadedImageBlobs = {}
+const images = []
 
-const images = [
-  'item/brick',
-  'block/brain_coral',
-  'item/redstone',
-  'block/powered_rail_on',
-  'block/bookshelf',
-  'item/compass_00',
-  'item/lava_bucket',
-  'item/apple',
-  'item/iron_axe',
-  'item/golden_sword',
-  'item/glass_bottle',
-  'item/chest_minecart',
-]
-
-for (const win in layouts) {
+for (const win in layouts) { // Preload layouts
   const val = layouts[win]
   for (const key in val.with) {
     const path = val.with[key].path
     if (path && !images.includes(path)) {
-      images.push(path);
+      images.push(path)
     }
   }
 }
 
-function loadAllImagesWeb() {
-  for (let path of images) {
-    var img = new Image();   // Create new img element
-    img.src = patchPath(IMAGE_ROOT + path) + '.png'; // Set source path
+const loadedImageBlobs = [] // Caching array
+
+function loadAllImagesWeb () { // Preload all images
+  for (const path of images) {
+    const img = new window.Image() // Create new img element
+    img.src = patchPath(IMAGE_ROOT + path) + '.png' // Set source path
     img.onload = function () {
       loadedImageBlobs[path] = this
     }
   }
 }
 
-function loadRuntimeImage(atPath) {
-  var img = new Image();   // Create new img element
+function loadRuntimeImage (atPath) {
+  const img = new window.Image() // Create new img element
   // if (IMAGE_ROOT.includes('.com')) {atPath = atPath.replace('block/', 'blocks/');atPath=atPath.replace('item/', 'items/')}
-  img.src = patchPath(IMAGE_ROOT + atPath) + '.png'; // Set source path
+  img.src = patchPath(IMAGE_ROOT + atPath) + '.png' // Set source path
   img.style.imageRendering = 'pixelated'
   // img.onload = function () {
   //   loadedImageBlobs[path] = this
@@ -65,8 +48,8 @@ function loadRuntimeImage(atPath) {
   loadedImageBlobs[atPath] = img
 }
 
-export function getImage(resource) {
-  console.log('getImage triggered with arguments:', resource)
+export function getImage (resource) {
+  // console.log('getImage triggered with arguments:', resource)
   if ((resource.type ?? 'gui') !== 'item') { // nullishly coalesce to 'gui' because spec says to assume gui if unspecified. Run old code if it isn't an item because the new code is for items lol
     let path = patchPath(resource.path)
 

package.json

@@ -38,7 +38,7 @@
     "express": "^4.17.1",
     "ismobilejs": "^1.1.1",
     "lit": "^2.0.2",
-    "minecraft-inventory-gui": "github:AwesomestCode/prismarine-inventory-gui",
+    "minecraft-inventory-gui": "file:////Users/owl/Documents/GitHub/prismarine-inventory-gui/",
     "net-browserify": "PrismarineJS/net-browserify",
     "querystring": "^0.2.1",
     "url": "^0.11.0"