NEW REWORKED inventory GUI : Spread, Anvil, Enchant and more!

package.json

@@ -88,6 +88,7 @@
     "lodash-es": "^4.17.21",
     "mcraft-fun-mineflayer": "^0.1.23",
     "minecraft-data": "3.103.0",
+    "minecraft-inventory": "^0.1.4",
     "minecraft-protocol": "github:PrismarineJS/node-minecraft-protocol#master",
     "mineflayer-item-map-downloader": "github:zardoy/mineflayer-item-map-downloader",
     "mojangson": "^2.0.4",

src/inventoryWindows.ts

@@ -25,6 +25,7 @@ import { MessageFormatPart } from './chatUtils'
 import { GeneralInputItem, getItemMetadata, getItemModelName, getItemNameRaw, RenderItem } from './mineflayer/items'
 import { playerState } from './mineflayer/playerState'
 import { modelViewerState } from './react/OverlayModelViewer'
+import { openInventoryProxy } from './react/inventory/Inventory'
 
 const loadedImagesCache = new Map<string, HTMLImageElement | ImageBitmap>()
 const cleanLoadedImagesCache = () => {
@@ -45,38 +46,42 @@ export const jeiCustomCategories = proxy({
 let remotePlayerSkin: string | undefined | Promise<string>
 
 export const showInventoryPlayer = () => {
-  modelViewerState.model = {
-    positioning: {
-      windowWidth: 176,
-      windowHeight: 166,
-      x: 25,
-      y: 8,
-      width: 50,
-      height: 70,
-      scaled: true,
-      onlyInitialScale: true,
-    },
-    followCursor: true,
-    followCursorCenter: {
-      x: 51,
-      y: 27,
-    },
-    // models: ['https://bucket.mcraft.fun/sitarbuckss.glb'],
-    // debug: true,
-    steveModelSkin: appViewer.playerState.reactive.playerSkin ?? (typeof remotePlayerSkin === 'string' ? remotePlayerSkin : ''),
-  }
-  if (remotePlayerSkin === undefined && !appViewer.playerState.reactive.playerSkin) {
-    remotePlayerSkin = loadSkinFromUsername(bot.username, 'skin').then(a => {
-      setTimeout(() => {
-        // Check if player inventory is still open before updating
-        if (lastWindowType === null) {
-          showInventoryPlayer()
-        }
-      }, 0) // todo patch instead and make reactive
-      remotePlayerSkin = a ?? ''
-      return remotePlayerSkin
-    })
-  }
+  // openInventoryProxy.inventory = {
+  //   type: 'player',
+  // }
+
+  // modelViewerState.model = {
+  //   positioning: {
+  //     windowWidth: 176,
+  //     windowHeight: 166,
+  //     x: 25,
+  //     y: 8,
+  //     width: 50,
+  //     height: 70,
+  //     scaled: true,
+  //     onlyInitialScale: true,
+  //   },
+  //   followCursor: true,
+  //   followCursorCenter: {
+  //     x: 51,
+  //     y: 27,
+  //   },
+  //   // models: ['https://bucket.mcraft.fun/sitarbuckss.glb'],
+  //   // debug: true,
+  //   steveModelSkin: appViewer.playerState.reactive.playerSkin ?? (typeof remotePlayerSkin === 'string' ? remotePlayerSkin : ''),
+  // }
+  // if (remotePlayerSkin === undefined && !appViewer.playerState.reactive.playerSkin) {
+  //   remotePlayerSkin = loadSkinFromUsername(bot.username, 'skin').then(a => {
+  //     setTimeout(() => {
+  //       // Check if player inventory is still open before updating
+  //       if (lastWindowType === null) {
+  //         showInventoryPlayer()
+  //       }
+  //     }, 0) // todo patch instead and make reactive
+  //     remotePlayerSkin = a ?? ''
+  //     return remotePlayerSkin
+  //   })
+  // }
 }
 
 export const onGameLoad = () => {
@@ -577,7 +582,10 @@ const openWindow = (type: string | undefined, title: string | any = undefined) =
 let destroyFn = () => { }
 
 export const openPlayerInventory = () => {
-  openWindow(undefined)
+  openInventoryProxy.inventory = {
+    type: 'player',
+  }
+  // openWindow(undefined)
 }
 
 const getResultingRecipe = (slots: Array<Item | null>, gridRows: number) => {

src/react/inventory/Inventory.tsx

@@ -0,0 +1,38 @@
+import { TextureProvider, ScaleProvider, InventoryProvider, InventoryOverlay, createMineflayerConnector, MineflayerBot, InventoryOverlayProps } from 'minecraft-inventory/src'
+import { useMemo } from 'react'
+import { proxy, useSnapshot } from 'valtio'
+import { localTexturesConfig } from 'minecraft-inventory/src/generated/localTextures'
+import { useAppScale } from '../../scaleInterface'
+
+export const openInventoryProxy = proxy({
+  inventory: undefined as InventoryOverlayProps | undefined,
+})
+
+export const Inventory = () => {
+  const windowType = 'player'
+  const connector = useMemo(() => createMineflayerConnector(bot as MineflayerBot), [bot])
+  const appScale = useAppScale()
+  const { inventory } = useSnapshot(openInventoryProxy) as typeof openInventoryProxy
+
+  if (!inventory) return null
+
+  return <div style={{
+    position: 'fixed',
+    inset: 0,
+    width: '100%',
+    height: '100dvh',
+    zIndex: 1000,
+  }}>
+    <TextureProvider config={localTexturesConfig}>
+      <ScaleProvider scale={appScale}>
+        <InventoryProvider connector={connector}>
+          <InventoryOverlay
+            showJEI
+            enableNotes
+            {...inventory}
+          />
+        </InventoryProvider>
+      </ScaleProvider>
+    </TextureProvider>
+  </div>
+}

src/reactUi.tsx

@@ -75,6 +75,7 @@ import AllSettingsEditor from './react/AllSettingsEditor'
 import { isPlayground, urlParams } from './playgroundIntegration'
 import { withInjectableUi } from './react/extendableSystem'
 import { hadReactUiRegistered } from './clientMods'
+import { Inventory } from './react/inventory/Inventory'
 
 const isFirefox = ua.getBrowser().name === 'Firefox'
 if (isFirefox) {
@@ -204,6 +205,7 @@ const InGameUi = () => {
     <PerComponentErrorBoundary>
       <SignEditorProvider />
       <DisplayQr />
+      <Inventory />
     </PerComponentErrorBoundary>
     <RobustPortal to={document.body}>
       {displayFullmap && <MinimapProvider adapter={adapter} displayMode='fullmapOnly' />}