feat: add held map image support for all versions!

fix: previously held item was activated too quickly

esbuild.mjs

@@ -46,6 +46,9 @@ const buildOptions = {
     // using \n breaks sourcemaps!
     js: banner.join(';'),
   },
+  external: [
+    'sharp'
+  ],
   alias: {
     events: 'events', // make explicit
     buffer: 'buffer',
@@ -56,7 +59,8 @@ const buildOptions = {
     stream: 'stream-browserify',
     net: 'net-browserify',
     assert: 'assert',
-    dns: './src/dns.js'
+    dns: './src/dns.js',
+    // todo write advancedAliases plugin
   },
   inject: [
     './src/shims.js'

package.json

@@ -72,6 +72,7 @@
     "minecraft-assets": "^1.12.2",
     "minecraft-data": "3.65.0",
     "minecraft-protocol": "github:PrismarineJS/node-minecraft-protocol",
+    "mineflayer-item-map-downloader": "github:zardoy/mineflayer-item-map-downloader",
     "mojangson": "^2.0.4",
     "net-browserify": "github:zardoy/prismarinejs-net-browserify",
     "node-gzip": "^1.1.2",

src/index.ts

@@ -128,6 +128,12 @@ if (isFirefox) {
   document.body.style.setProperty('--thin-if-firefox', 'thin')
 }
 
+const isIphone = ua.getDevice().model === 'iPhone' // todo ipad?
+
+if (isIphone) {
+  document.documentElement.style.setProperty('--hud-bottom-max', '21px') // env-safe-aria-inset-bottom
+}
+
 // Create viewer
 const viewer: import('prismarine-viewer/viewer/lib/viewer').Viewer = new Viewer(renderer)
 window.viewer = viewer
@@ -438,7 +444,9 @@ async function connect (connectOptions: ConnectOptions) {
       async versionSelectedHook (client) {
         await downloadMcData(client.version)
         setLoadingScreenStatus(initialLoadingText)
-      }
+      },
+      'mapDownloader-saveToFile': false,
+      // "mapDownloader-saveInternal": false, // do not save into memory, todo must be implemeneted as we do really care of ram
     }) as unknown as typeof __type_bot
     window.bot = bot
     earlySoundsMapCheck()

src/react/HeldMapUi.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react'
+import { mapDownloader } from 'mineflayer-item-map-downloader/'
+import { setImageConverter } from 'mineflayer-item-map-downloader/lib/util'
+
+export default () => {
+  const [dataUrl, setDataUrl] = useState<string | null | true>(null) // true means loading
+
+  useEffect(() => {
+    bot.loadPlugin(mapDownloader)
+
+    setImageConverter((buf: Uint8Array) => {
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')!
+      canvas.width = 128
+      canvas.height = 128
+      const imageData = ctx.createImageData(canvas.width, canvas.height)
+      imageData.data.set(buf)
+      ctx.putImageData(imageData, 0, 0)
+      // data url
+      return canvas.toDataURL('image/png')
+    })
+
+    const updateHeldMap = () => {
+      setDataUrl(null)
+      if (!bot.heldItem || !['filled_map', 'map'].includes(bot.heldItem.name)) return
+      // setDataUrl(true)
+      const mapNumber = (bot.heldItem?.nbt?.value as any)?.map?.value
+      // if (!mapNumber) return
+      setDataUrl(bot.mapDownloader.maps[mapNumber] as unknown as string)
+    }
+
+    bot.on('heldItemChanged' as any, () => {
+      updateHeldMap()
+    })
+
+    bot.on('new_map', () => {
+      // total maps: Object.keys(bot.mapDownloader.maps).length
+      updateHeldMap()
+    })
+  }, [])
+
+  return dataUrl && dataUrl !== true ? <div style={{
+    position: 'fixed',
+    bottom: 20,
+    left: 8,
+    pointerEvents: 'none',
+  }}>
+    <img src={dataUrl} style={{
+      width: 92,
+      height: 92,
+      imageRendering: 'pixelated',
+    }} />
+  </div> : null
+}

src/react/IndicatorEffects.tsx

@@ -7,9 +7,9 @@ import './IndicatorEffects.css'
 function formatTime (seconds: number): string {
   if (seconds < 0) return ''
   const minutes = Math.floor(seconds / 60)
-  const remainingSeconds = seconds % 60
+  const remainingSeconds = Math.floor(seconds % 60)
   const formattedMinutes = String(minutes).padStart(2, '0')
-  const formattedSeconds = String(remainingSeconds).padStart(2, '0')
+  const formattedSeconds = String(remainingSeconds)
   return `${formattedMinutes}:${formattedSeconds}`
 }
 
@@ -32,10 +32,10 @@ const EffectBox = ({ image, time, level }: Pick<EffectType, 'image' | 'time' | '
         // if time is negative then effect is shown without time.
         // Component should be removed manually with time = 0
         <div className='effect-box__time'>{formattedTime}</div>
-      ) : null }
+      ) : null}
       {level > 0 && level < 256 ? (
         <div className='effect-box__level'>{level + 1}</div>
-      ) : null }
+      ) : null}
     </div>
   </div>
 }
@@ -56,7 +56,7 @@ const indicatorIcons: Record<keyof typeof defaultIndicatorsState, string> = {
   readonlyFiles: 'file-off',
 }
 
-export default ({ indicators, effects }: {indicators: typeof defaultIndicatorsState, effects: readonly EffectType[]}) => {
+export default ({ indicators, effects }: { indicators: typeof defaultIndicatorsState, effects: readonly EffectType[] }) => {
   const effectsRef = useRef(effects)
   useEffect(() => {
     effectsRef.current = effects

src/reactUi.tsx

@@ -36,6 +36,7 @@ import Crosshair from './react/Crosshair'
 import ButtonAppProvider from './react/ButtonAppProvider'
 import ServersListProvider from './react/ServersListProvider'
 import GamepadUiCursor from './react/GamepadUiCursor'
+import HeldMapUi from './react/HeldMapUi'
 
 const RobustPortal = ({ children, to }) => {
   return createPortal(<PerComponentErrorBoundary>{children}</PerComponentErrorBoundary>, to)
@@ -85,6 +86,12 @@ const GameHud = ({ children }) => {
   return gameLoaded ? children : null
 }
 
+const InGameComponent = ({ children }) => {
+  const { gameLoaded } = useSnapshot(miscUiState)
+  if (!gameLoaded) return null
+  return children
+}
+
 const InGameUi = () => {
   const { gameLoaded } = useSnapshot(miscUiState)
   if (!gameLoaded) return
@@ -135,6 +142,14 @@ const WidgetDisplay = ({ name, Component }) => {
 const App = () => {
   return <div>
     <ButtonAppProvider>
+      <RobustPortal to={document.body}>
+        <div className='overlay-bottom-scaled'>
+          <InGameComponent>
+            <HeldMapUi />
+          </InGameComponent>
+        </div>
+        <div></div>
+      </RobustPortal>
       <EnterFullscreenButton />
       <InGameUi />
       <RobustPortal to={document.querySelector('#ui-root')}>
@@ -151,6 +166,7 @@ const App = () => {
         </GameHud> */}
       </RobustPortal>
       <RobustPortal to={document.body}>
+        {/* todo correct mounting! */}
         <div className='overlay-top-scaled'>
           <GamepadUiCursor />
         </div>

src/styles.css

@@ -134,7 +134,7 @@ body {
   -ms-interpolation-mode: nearest-neighbor;
 }
 
-.overlay-top-scaled {
+.overlay-top-scaled, .overlay-bottom-scaled {
   position: fixed;
   inset: 0;
   transform-origin: top left;
@@ -146,6 +146,10 @@ body {
   pointer-events: none;
 }
 
+.overlay-bottom-scaled {
+  z-index: 1;
+}
+
 #viewer-canvas {
   position: fixed;
   top: 0;

src/worldInteractions.ts

@@ -197,7 +197,7 @@ class WorldInteraction {
         'minecart', 'boat', 'tnt_minecart', 'chest_minecart', 'hopper_minecart',
         'command_block_minecart', 'armor_stand', 'lead', 'name_tag',
         //
-        'writable_book', 'written_book', 'compass', 'clock', 'filled_map', 'empty_map',
+        'writable_book', 'written_book', 'compass', 'clock', 'filled_map', 'empty_map', 'map',
         'shears', 'carrot_on_a_stick', 'warped_fungus_on_a_stick',
         'spawn_egg', 'trident', 'crossbow', 'elytra', 'shield', 'turtle_helmet',
       ].includes(bot.heldItem.name)
@@ -219,10 +219,10 @@ class WorldInteraction {
             bot.lookAt = oldLookAt
           }).catch(console.warn)
         }
-        this.lastBlockPlaced = 0
       } else {
         bot.activateItem() // todo offhand
       }
+      this.lastBlockPlaced = 0
     }
 
     // Stop break