inventories are almost here wip:

add mobile button
review upstream
wip react refresh (thats why migrating to react)
to migrate to tsx
to impl advanced settings

package.json

@@ -21,7 +21,9 @@
   "author": "PrismarineJS",
   "license": "MIT",
   "dependencies": {
+    "@dimaka/interface": "0.0.0-dev",
     "@emotion/css": "^11.11.2",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@zardoy/react-util": "^0.2.0",
@@ -38,9 +40,9 @@
     "net-browserify": "github:PrismarineJS/net-browserify",
     "prismarine-world": "^3.6.2",
     "querystring": "^0.2.1",
-    "@dimaka/interface": "0.0.0-dev",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-refresh": "^0.14.0",
     "space-squid": "github:zardoy/space-squid",
     "speed-measure-webpack-plugin": "^1.5.0",
     "stats.js": "^0.17.0",
@@ -77,6 +79,7 @@
     "stream-browserify": "^3.0.0",
     "three": "0.128.0",
     "timers-browserify": "^2.0.12",
+    "use-typed-event-listener": "^4.0.2",
     "vite": "^4.4.9",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
@@ -88,7 +91,9 @@
   "pnpm": {
     "overrides": {
       "minecraft-data": "latest",
-      "minecraft-protocol": "github:zardoy/minecraft-protocol#custom-client"
+      "minecraft-protocol": "github:zardoy/minecraft-protocol#custom-client",
+      "space-squid": "file:../space-squid",
+      "@dimaka/interface": "file:../interface"
     }
   }
 }

src/index.js

@@ -593,6 +593,12 @@ async function connect (options) {
       keyBindScrn.keymaps.forEach(km => {
         if (e.code === km.key) {
           switch (km.defaultKey) {
+            case 'KeyE':
+              showModal({ reactType: 'inventory', })
+              // todo seems to be workaround
+              // avoid calling inner keybinding listener, but should be handled there
+              e.stopImmediatePropagation()
+              break
             case 'KeyQ':
               if (bot.heldItem) bot.tossStack(bot.heldItem)
               break
@@ -621,7 +627,9 @@ async function connect (options) {
           }
         }
       })
-    }, false)
+    }, {
+      capture: true,
+    })
 
     registerListener(document, 'keyup', (e) => {
       keyBindScrn.keymaps.forEach(km => {

src/menus/keybinds_screen.js

@@ -104,7 +104,7 @@ class KeyBindsScreen extends LitElement {
       { defaultKey: 'Slash', key: 'Slash', name: 'Open Command' },
       // { defaultKey: '0', key: '0', name: 'Attack/Destroy' },
       // { defaultKey: '1', key: '1', name: 'Place Block' },
-      { defaultKey: 'KeyQ', key: 'KeyQ', name: 'Drop Item' }
+      { defaultKey: 'KeyQ', key: 'KeyQ', name: 'Drop Item' },
       // { defaultKey: 'Digit1', key: 'Digit1', name: 'Hotbar Slot 1' },
       // { defaultKey: 'Digit2', key: 'Digit2', name: 'Hotbar Slot 2' },
       // { defaultKey: 'Digit3', key: 'Digit3', name: 'Hotbar Slot 3' },
@@ -114,7 +114,7 @@ class KeyBindsScreen extends LitElement {
       // { defaultKey: 'Digit7', key: 'Digit7', name: 'Hotbar Slot 7' },
       // { defaultKey: 'Digit8', key: 'Digit8', name: 'Hotbar Slot 8' },
       // { defaultKey: 'Digit9', key: 'Digit9', name: 'Hotbar Slot 9' },
-      // { defaultKey: 'KeyE', key: 'KeyE', name: 'Open Inventory' }
+      { defaultKey: 'KeyE', key: 'KeyE', name: 'Open Inventory' },
     ]
 
     document.addEventListener('keydown', (e) => {

src/reactUi.jsx

@@ -1,9 +1,12 @@
 //@ts-check
 import { renderToDom } from '@zardoy/react-util'
 
-import React, { useEffect } from 'react'
-import { LeftTouchArea, RightTouchArea, useUsingTouch, useInterfaceState } from '@dimaka/interface'
+import { LeftTouchArea, InventoryNew, RightTouchArea, useUsingTouch, useInterfaceState } from '@dimaka/interface'
 import { css } from '@emotion/css'
+import { activeModalStack, hideCurrentModal, isGameActive } from './globalState'
+import { useEffect, useState } from 'react'
+import { useProxy } from 'valtio/utils'
+import useTypedEventListener from 'use-typed-event-listener'
 
 // todo
 useInterfaceState.setState({
@@ -32,7 +35,8 @@ useInterfaceState.setState({
     }
 })
 
-const App = () => {
+const TouchControls = () => {
+    // todo setting
     const usingTouch = useUsingTouch()
 
     if (!usingTouch) return null
@@ -56,6 +60,76 @@ const App = () => {
     )
 }
 
+const useActivateModal = (/** @type {string} */search, onlyLast = true) => {
+    const stack = useProxy(activeModalStack)
+
+    return onlyLast ? stack.at(-1)?.reactType === search : stack.some((modal) => modal.reactType === search)
+}
+
+function useIsBotAvailable() {
+    const stack = useProxy(activeModalStack)
+
+    return isGameActive(false)
+}
+
+function InventoryWrapper() {
+    const isInventoryOpen = useActivateModal('inventory', false)
+    const [slots, setSlots] = useState(bot.inventory.slots)
+
+    useEffect(() => {
+        if (isInventoryOpen) {
+            document.exitPointerLock()
+        }
+    }, [isInventoryOpen])
+
+    useTypedEventListener(document, 'keydown', (e) => {
+        // todo use refactored keymap
+        if (e.code === 'KeyE' && activeModalStack.at(-1)?.reactType === 'inventory') {
+            hideCurrentModal()
+        }
+    })
+
+    useEffect(() => {
+        bot.inventory.on('updateSlot', () => {
+            setSlots(bot.inventory.slots)
+        })
+        // todo need to think of better solution
+        window['mcData'] = require('minecraft-data')(bot.version)
+        window['mcAssets'] = require('minecraft-assets')(bot.version)
+    }, [])
+
+    console.log('isInventoryOpen', isInventoryOpen)
+    if (!isInventoryOpen) return null
+
+    return <div className={css`
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+
+            & > div {
+                scale: 0.6;
+                background: transparent !important;
+            }
+        `}>
+        <InventoryNew slots={slots} action={(oldSlot, newSlotIndex) => {
+            bot.moveSlotItem(oldSlot, newSlotIndex)
+            // bot.inventory.selectedItem
+            // bot.inventory.updateSlot(oldSlot, )
+        } } />
+    </div>
+}
+
+const App = () => {
+    const isBotAvailable = useIsBotAvailable()
+    if (!isBotAvailable) return null
+
+    return <div>
+        <InventoryWrapper />
+        <TouchControls />
+    </div>
+}
+
 renderToDom(<App />, {
     strictMode: false,
     selector: '#react-root',

webpack.dev.js

@@ -1,6 +1,6 @@
 const { merge } = require('webpack-merge')
 const common = require('./webpack.common.js')
-const path = require('path')
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
 
 /** @type {import('webpack-dev-server').Configuration['rel']} */
 module.exports = merge(common,
@@ -17,8 +17,8 @@ module.exports = merge(common,
       compress: true,
       // inline: true,
       // open: true,
-      // hot: true,
-      liveReload: true,
+      hot: true,
+      // liveReload: true,
       devMiddleware: {
         writeToDisk: true,
       },
@@ -44,5 +44,8 @@ module.exports = merge(common,
           }
         }
       }
-    }
+    },
+    plugins: [
+      new ReactRefreshWebpackPlugin()
+    ],
   })