minecraft-inventory 0.1.0

package/src/cache/textureCache.ts

@@ -0,0 +1,95 @@
+import { useEffect, useRef, useState } from 'react'
+
+/** Cached data URLs keyed by the original URL */
+const dataUrlCache = new Map<string, string>()
+/** URLs that failed to load (404 / network error) */
+const failedUrls = new Set<string>()
+/** In-flight fetch promises */
+const inflight = new Map<string, Promise<void>>()
+
+async function fetchAsDataUrl(url: string): Promise<string | null> {
+  try {
+    const res = await fetch(url)
+    if (!res.ok) return null
+    const blob = await res.blob()
+    return await new Promise<string>((resolve, reject) => {
+      const reader = new FileReader()
+      reader.onload = () => resolve(reader.result as string)
+      reader.onerror = () => reject(new Error('FileReader error'))
+      reader.readAsDataURL(blob)
+    })
+  } catch {
+    return null
+  }
+}
+
+function scheduleLoad(url: string): Promise<void> {
+  if (inflight.has(url)) return inflight.get(url)!
+  const p = fetchAsDataUrl(url).then((dataUrl) => {
+    inflight.delete(url)
+    if (dataUrl) {
+      dataUrlCache.set(url, dataUrl)
+    } else {
+      failedUrls.add(url)
+    }
+  })
+  inflight.set(url, p)
+  return p
+}
+
+export function getCachedDataUrl(url: string): string | undefined {
+  return dataUrlCache.get(url)
+}
+
+export function isTextureFailed(url: string): boolean {
+  return failedUrls.has(url)
+}
+
+/**
+ * Hook that resolves a URL to a cached base64 data URL.
+ * Returns:
+ *   - `string`    — loaded (data URL)
+ *   - `null`      — permanently failed (404 / network error)
+ *   - `undefined` — still loading
+ */
+export function useDataUrl(url: string | null): string | null | undefined {
+  const urlRef = useRef(url)
+
+  const [state, setState] = useState<string | null | undefined>(() => {
+    if (!url) return undefined
+    const cached = dataUrlCache.get(url)
+    if (cached !== undefined) return cached
+    if (failedUrls.has(url)) return null
+    return undefined
+  })
+
+  useEffect(() => {
+    urlRef.current = url
+
+    if (!url) {
+      setState(undefined)
+      return
+    }
+
+    // Synchronous fast-path: already in cache
+    const cached = dataUrlCache.get(url)
+    if (cached !== undefined) {
+      setState(cached)
+      return
+    }
+    if (failedUrls.has(url)) {
+      setState(null)
+      return
+    }
+
+    // Fetch asynchronously
+    setState(undefined) // mark loading
+    scheduleLoad(url).then(() => {
+      if (urlRef.current !== url) return // stale, ignore
+      const result = dataUrlCache.get(url)
+      setState(result !== undefined ? result : null)
+    })
+  }, [url])
+
+  return state
+}

package/src/components/CursorItem/CursorItem.tsx

@@ -0,0 +1,94 @@
+import React, { useEffect, useRef } from 'react'
+import { useInventoryContext } from '../../context/InventoryContext'
+import { useScale } from '../../context/ScaleContext'
+import { ItemCanvas } from '../ItemCanvas'
+import { useMobile } from '../../hooks/useMobile'
+
+// Global mouse tracker — always knows cursor position, even before item is picked up
+const globalMouse = { x: -9999, y: -9999 }
+
+if (typeof window !== 'undefined') {
+  window.addEventListener('mousemove', (e) => {
+    globalMouse.x = e.clientX
+    globalMouse.y = e.clientY
+  }, { passive: true, capture: true })
+}
+
+/**
+ * CursorItem — optimized to bypass React re-renders on mouse move.
+ * Uses direct DOM manipulation via refs to update position every frame.
+ * Only re-renders when heldItem or contentSize changes (for ItemCanvas updates).
+ */
+export function CursorItem() {
+  const { heldItem } = useInventoryContext()
+  const { contentSize } = useScale()
+  const isMobile = useMobile()
+  const containerRef = useRef<HTMLDivElement>(null)
+  const rafRef = useRef(0)
+  const halfSizeRef = useRef(Math.round(contentSize / 2))
+
+  // Update halfSize when contentSize changes
+  useEffect(() => {
+    halfSizeRef.current = Math.round(contentSize / 2)
+  }, [contentSize])
+
+  // Direct DOM position updates — no React state, no re-renders
+  useEffect(() => {
+    if (isMobile || !heldItem || !containerRef.current) {
+      // Cancel RAF if item dropped or mobile
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current)
+        rafRef.current = 0
+      }
+      return
+    }
+
+    const container = containerRef.current
+
+    // Immediately position at current cursor
+    const half = halfSizeRef.current
+    container.style.left = `${globalMouse.x - half}px`
+    container.style.top = `${globalMouse.y - half}px`
+
+    // RAF loop — direct DOM updates, no React state
+    const update = () => {
+      if (!containerRef.current) return
+      const half = halfSizeRef.current
+      container.style.left = `${globalMouse.x - half}px`
+      container.style.top = `${globalMouse.y - half}px`
+      rafRef.current = requestAnimationFrame(update)
+    }
+    rafRef.current = requestAnimationFrame(update)
+
+    return () => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current)
+        rafRef.current = 0
+      }
+    }
+  }, [isMobile, heldItem])
+
+  // Only re-render when heldItem or contentSize changes (for ItemCanvas)
+  if (!heldItem || isMobile) return null
+
+  return (
+    <div
+      ref={containerRef}
+      className="mc-inv-cursor-item"
+      style={{
+        position: 'fixed',
+        width: contentSize,
+        height: contentSize,
+        pointerEvents: 'none',
+        zIndex: 9999,
+        // left/top set directly by RAF, not via React style prop
+      }}
+    >
+      <ItemCanvas
+        item={heldItem}
+        size={contentSize}
+        style={{ position: 'absolute', top: 0, left: 0 }}
+      />
+    </div>
+  )
+}

package/src/components/CursorItem/index.ts

@@ -0,0 +1 @@
+export { CursorItem } from './CursorItem'

package/src/components/HUD/HUD.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+interface HUDProps {
+  className?: string
+  style?: React.CSSProperties
+}
+
+export function HUD({ className, style }: HUDProps) {
+  // HUD removed - inventory GUI doesn't need health/food/armor/XP/air display
+  return null
+}

package/src/components/HUD/index.ts

@@ -0,0 +1 @@
+export { HUD } from './HUD'

package/src/components/Hotbar/Hotbar.tsx

@@ -0,0 +1,180 @@
+import React from 'react'
+import { useInventoryContext } from '../../context/InventoryContext'
+import { useScale } from '../../context/ScaleContext'
+import { useTextures } from '../../context/TextureContext'
+import { Slot } from '../Slot'
+import { ItemCanvas } from '../ItemCanvas'
+import type { SlotState } from '../../types'
+
+interface HotbarProps {
+  slots?: SlotState[]
+  activeSlot?: number
+  showOffhand?: boolean
+  offhandSlot?: SlotState
+  className?: string
+  style?: React.CSSProperties
+}
+
+export function Hotbar({
+  slots: slotsProp,
+  activeSlot: activeSlotProp,
+  showOffhand = true,
+  offhandSlot: offhandProp,
+  className,
+  style,
+}: HotbarProps) {
+  const { playerState, windowState, sendAction } = useInventoryContext()
+  const { scale } = useScale()
+  const textures = useTextures()
+
+  const hotbarSlots = slotsProp ?? (
+    playerState?.inventory
+      .filter((s) => s.index >= 36 && s.index <= 44)
+      .sort((a, b) => a.index - b.index) ?? []
+  )
+
+  const activeSlot = activeSlotProp ?? playerState?.activeHotbarSlot ?? 0
+  const offhandItem = offhandProp ?? playerState?.inventory.find((s) => s.index === 45) ?? null
+
+  const SLOT_SIZE = 20 * scale
+  const HOTBAR_H = 22 * scale
+  const OFFHAND_W = 24 * scale
+
+  const hotbarUrl = textures.getGuiTextureUrl('gui/widgets')
+
+  const totalWidth = (showOffhand ? OFFHAND_W + 4 * scale : 0) + 182 * scale
+
+  return (
+    <div
+      className={['mc-inv-root', className].filter(Boolean).join(' ')}
+      style={{
+        position: 'relative',
+        width: totalWidth,
+        height: HOTBAR_H + 2 * scale,
+        display: 'flex',
+        alignItems: 'flex-end',
+        ...style,
+      }}
+    >
+      {/* Offhand slot */}
+      {showOffhand && (
+        <div
+          className="mc-inv-hotbar-offhand"
+          style={{
+            position: 'relative',
+            width: OFFHAND_W,
+            height: HOTBAR_H,
+            flexShrink: 0,
+            marginRight: 4 * scale,
+          }}
+        >
+          <img
+            className="mc-inv-hotbar-offhand-bg"
+            src={hotbarUrl}
+            alt=""
+            aria-hidden
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: OFFHAND_W,
+              height: HOTBAR_H,
+              objectFit: 'none',
+              objectPosition: `-${24 * scale}px -${22 * scale}px`,
+              imageRendering: 'pixelated',
+              display: 'block',
+            }}
+            draggable={false}
+          />
+          {offhandItem?.item && (
+            <div
+              className="mc-inv-hotbar-offhand-item"
+              style={{
+                position: 'absolute',
+                top: 3 * scale,
+                left: 3 * scale,
+              }}
+            >
+              <ItemCanvas item={offhandItem.item} size={16 * scale} />
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Main hotbar */}
+      <div
+        className="mc-inv-hotbar-main"
+        style={{
+          position: 'relative',
+          width: 182 * scale,
+          height: HOTBAR_H + 2 * scale,
+          flexShrink: 0,
+        }}
+      >
+        {/* Hotbar background */}
+        <img
+          className="mc-inv-hotbar-bg"
+          src={hotbarUrl}
+          alt=""
+          aria-hidden
+          style={{
+            position: 'absolute',
+            top: scale,
+            left: 0,
+            width: 182 * scale,
+            height: HOTBAR_H,
+            objectFit: 'none',
+            objectPosition: `0 0`,
+            imageRendering: 'pixelated',
+            display: 'block',
+          }}
+          draggable={false}
+        />
+
+        {/* Active slot indicator */}
+        <img
+          className="mc-inv-hotbar-indicator"
+          src={hotbarUrl}
+          alt=""
+          aria-hidden
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: (activeSlot * 20 - 1) * scale,
+            width: 24 * scale,
+            height: 24 * scale,
+            objectFit: 'none',
+            objectPosition: `0 -${22 * scale}px`,
+            imageRendering: 'pixelated',
+            display: 'block',
+          }}
+          draggable={false}
+        />
+
+        {/* Items */}
+        {hotbarSlots.map((slot, i) => (
+          <div
+            key={slot.index}
+            className="mc-inv-hotbar-slot"
+            style={{
+              position: 'absolute',
+              top: 4 * scale,
+              left: (3 + i * 20) * scale,
+              cursor: 'pointer',
+            }}
+            onClick={() => {
+              sendAction({
+                type: 'click',
+                slotIndex: slot.index,
+                button: 'left',
+                mode: 'normal',
+              })
+            }}
+          >
+            {slot.item && <ItemCanvas item={slot.item} size={16 * scale} />}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/components/Hotbar/index.ts

@@ -0,0 +1 @@
+export { Hotbar } from './Hotbar'

package/src/components/InventoryOverlay/InventoryOverlay.tsx

@@ -0,0 +1,196 @@
+import React, { useCallback, useState } from 'react'
+import { useInventoryContext } from '../../context/InventoryContext'
+import { useScale } from '../../context/ScaleContext'
+import { InventoryWindow } from '../InventoryWindow'
+import { CursorItem } from '../CursorItem'
+import { Hotbar } from '../Hotbar'
+import { JEI } from '../JEI'
+import type { JEIItem } from '../JEI'
+import { RecipeInventoryView } from '../RecipeGuide'
+import type { RecipeGuide, RecipeNavFrame } from '../../types'
+
+export interface InventoryOverlayProps {
+  type: string
+  title?: string
+  /** Show semi-transparent backdrop behind inventory (default: true) */
+  showBackdrop?: boolean
+  /** Backdrop color (default: 'rgba(0,0,0,0.5)') */
+  backdropColor?: string
+  /** Called when clicking outside the inventory (or pressing Esc) */
+  onClose?: () => void
+  /** Show JEI sidebar */
+  showJEI?: boolean
+  jeiItems?: JEIItem[]
+  jeiPosition?: 'left' | 'right'
+  jeiOnGetRecipes?: (item: JEIItem) => RecipeGuide[]
+  jeiOnGetUsages?: (item: JEIItem) => RecipeGuide[]
+  /** Show hotbar below inventory */
+  showHotbar?: boolean
+  className?: string
+  style?: React.CSSProperties
+  /** Style applied to the inner content container (around inventory + JEI) */
+  contentStyle?: React.CSSProperties
+  children?: React.ReactNode
+}
+
+export function InventoryOverlay({
+  type,
+  title,
+  showBackdrop = true,
+  backdropColor = 'rgba(0,0,0,0.5)',
+  onClose,
+  showJEI = false,
+  jeiItems = [],
+  jeiPosition = 'right',
+  jeiOnGetRecipes,
+  jeiOnGetUsages,
+  showHotbar = true,
+  className,
+  style,
+  contentStyle,
+  children,
+}: InventoryOverlayProps) {
+  const { heldItem, sendAction, setHeldItem } = useInventoryContext()
+  const { scale } = useScale()
+
+  // Recipe navigation stack — when non-empty, RecipeInventoryView replaces InventoryWindow
+  const [recipeNavStack, setRecipeNavStack] = useState<RecipeNavFrame[]>([])
+
+  const pushRecipeFrame = useCallback((frame: RecipeNavFrame) => {
+    setRecipeNavStack((s) => [...s, frame])
+  }, [])
+
+  const popRecipeFrame = useCallback(() => {
+    setRecipeNavStack((s) => s.slice(0, -1))
+  }, [])
+
+  const handleGuideIndexChange = useCallback((idx: number) => {
+    setRecipeNavStack((s) => {
+      const next = [...s]
+      next[next.length - 1] = { ...next[next.length - 1], guideIndex: idx }
+      return next
+    })
+  }, [])
+
+  // Called by RecipeInventoryView when R/U is pressed over a recipe ingredient
+  const handleRecipePushFrame = useCallback((item: RecipeNavFrame['item'], mode: 'recipes' | 'usages') => {
+    const getter = mode === 'recipes' ? jeiOnGetRecipes : jeiOnGetUsages
+    if (!getter) return
+    const jeiItem: JEIItem = { type: item.type, name: item.name, displayName: item.displayName, count: item.count, metadata: item.metadata }
+    const guides = getter(jeiItem)
+    if (guides.length === 0) return
+    pushRecipeFrame({ item, mode, guides, guideIndex: 0 })
+  }, [jeiOnGetRecipes, jeiOnGetUsages, pushRecipeFrame])
+
+  // Fires for any click that isn't stopped by an interactive panel (inventory, hotbar, JEI, etc.)
+  const handleBackdropClick = useCallback(() => {
+    if (heldItem) {
+      sendAction({ type: 'drop', slotIndex: -1, all: true })
+      setHeldItem(null)
+    } else {
+      onClose?.()
+    }
+  }, [heldItem, sendAction, setHeldItem, onClose])
+
+  const jeiPanel = showJEI ? (
+    <JEI
+      items={jeiItems}
+      position={jeiPosition}
+      onGetRecipes={jeiOnGetRecipes}
+      onGetUsages={jeiOnGetUsages}
+      onPushRecipeFrame={pushRecipeFrame}
+    />
+  ) : null
+
+  return (
+    <>
+      <div
+        className={['mc-inv-overlay', className].filter(Boolean).join(' ')}
+        onClick={handleBackdropClick}
+        style={{
+          position: 'absolute',
+          inset: 0,
+          background: showBackdrop ? backdropColor : 'transparent',
+          cursor: 'default',
+          zIndex: 1,
+          ...style,
+        }}
+      >
+        {/* Centered anchor — inventory always stays centered */}
+        <div
+          className="mc-inv-overlay-center"
+          style={{
+            position: 'absolute',
+            left: '50%',
+            top: '50%',
+            transform: 'translate(-50%, -50%)',
+          }}
+        >
+          <div className="mc-inv-overlay-content" style={{ position: 'relative', ...contentStyle }}>
+            {/* JEI on left — stopPropagation so clicks on JEI don't close the overlay */}
+            {showJEI && jeiPosition === 'left' && (
+              <div
+                className="mc-inv-overlay-jei mc-inv-overlay-jei-left"
+                onClick={(e) => e.stopPropagation()}
+                style={{
+                  position: 'absolute',
+                  right: `calc(100% + ${4 * scale}px)`,
+                  top: 0,
+                  zIndex: 5,
+                }}
+              >
+                {jeiPanel}
+              </div>
+            )}
+
+            {/* Inventory / Recipe view — stopPropagation so clicks inside don't close the overlay */}
+            <div className="mc-inv-overlay-window" onClick={(e) => e.stopPropagation()}>
+              {recipeNavStack.length > 0 ? (
+                <RecipeInventoryView
+                  navStack={recipeNavStack}
+                  onBack={popRecipeFrame}
+                  onGuideIndexChange={handleGuideIndexChange}
+                  onPushFrame={handleRecipePushFrame}
+                />
+              ) : (
+                <InventoryWindow type={type} title={title} />
+              )}
+            </div>
+
+            {/* Hotbar — stopPropagation */}
+            {showHotbar && (
+              <div
+                className="mc-inv-overlay-hotbar"
+                onClick={(e) => e.stopPropagation()}
+                style={{ marginTop: 8 * scale }}
+              >
+                <Hotbar />
+              </div>
+            )}
+
+            {/* JEI on right — stopPropagation */}
+            {showJEI && jeiPosition === 'right' && (
+              <div
+                className="mc-inv-overlay-jei mc-inv-overlay-jei-right"
+                onClick={(e) => e.stopPropagation()}
+                style={{
+                  position: 'absolute',
+                  left: `calc(100% + ${4 * scale}px)`,
+                  top: 0,
+                  zIndex: 5,
+                }}
+              >
+                {jeiPanel}
+              </div>
+            )}
+
+            {/* Extra children (notes, etc.) */}
+            {children}
+          </div>
+        </div>
+      </div>
+
+      <CursorItem />
+    </>
+  )
+}

package/src/components/InventoryOverlay/index.ts

@@ -0,0 +1,2 @@
+export { InventoryOverlay } from './InventoryOverlay'
+export type { InventoryOverlayProps } from './InventoryOverlay'

package/src/components/InventoryWindow/EnchantmentOptions.tsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import { useInventoryContext } from '../../context/InventoryContext'
+import { useScale } from '../../context/ScaleContext'
+
+const ENCHANTMENT_NAMES: Record<number, string> = {
+  0: 'Protection',
+  1: 'Fire Protection',
+  2: 'Feather Falling',
+  3: 'Blast Protection',
+  4: 'Projectile Protection',
+  5: 'Respiration',
+  6: 'Aqua Affinity',
+  7: 'Thorns',
+  8: 'Depth Strider',
+  9: 'Frost Walker',
+  10: 'Binding Curse',
+  16: 'Sharpness',
+  17: 'Smite',
+  18: 'Bane of Arthropods',
+  19: 'Knockback',
+  20: 'Fire Aspect',
+  21: 'Looting',
+  22: 'Sweeping Edge',
+  32: 'Efficiency',
+  33: 'Silk Touch',
+  34: 'Unbreaking',
+  35: 'Fortune',
+  48: 'Power',
+  49: 'Punch',
+  50: 'Flame',
+  51: 'Infinity',
+  61: 'Luck of the Sea',
+  62: 'Lure',
+  65: 'Loyalty',
+  66: 'Impaling',
+  67: 'Riptide',
+  68: 'Channeling',
+  70: 'Multishot',
+  71: 'Quick Charge',
+  72: 'Piercing',
+  73: 'Mending',
+  74: 'Vanishing Curse',
+}
+
+interface EnchantmentOptionsProps {
+  properties: Record<string, number>
+  x: number
+  y: number
+}
+
+const OPTION_KEYS = [
+  { levelKey: 'topEnchantLevel', idKey: 'topEnchantId', slot: 0 },
+  { levelKey: 'middleEnchantLevel', idKey: 'middleEnchantId', slot: 1 },
+  { levelKey: 'bottomEnchantLevel', idKey: 'bottomEnchantId', slot: 2 },
+]
+
+export function EnchantmentOptions({ properties, x, y }: EnchantmentOptionsProps) {
+  const { sendAction } = useInventoryContext()
+  const { scale } = useScale()
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: x * scale,
+        top: y * scale,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 0,
+      }}
+    >
+      {OPTION_KEYS.map(({ levelKey, idKey, slot }, i) => {
+        const level = properties[levelKey] ?? 0
+        const enchId = properties[idKey] ?? -1
+        const name = ENCHANTMENT_NAMES[enchId] ?? (enchId >= 0 ? `Enchant #${enchId}` : '???')
+        const disabled = level <= 0
+
+        return (
+          <div
+            key={i}
+            onClick={() => !disabled && sendAction({ type: 'enchant', enchantIndex: slot })}
+            style={{
+              width: 108 * scale,
+              height: 19 * scale,
+              display: 'flex',
+              alignItems: 'center',
+              padding: `0 ${4 * scale}px`,
+              gap: 4 * scale,
+              background: disabled ? 'rgba(0,0,0,0.3)' : 'rgba(0,60,0,0.5)',
+              cursor: disabled ? 'not-allowed' : 'pointer',
+              border: `${scale}px solid ${disabled ? '#333333' : '#446644'}`,
+              boxSizing: 'border-box',
+              fontSize: 6 * scale,
+              fontFamily: "'Minecraft', monospace",
+              color: disabled ? '#555555' : '#80c060',
+            }}
+          >
+            <span style={{ color: disabled ? '#555' : '#558855', fontWeight: 'bold' }}>
+              {level}
+            </span>
+            <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              {disabled ? '' : name}
+            </span>
+          </div>
+        )
+      })}
+    </div>
+  )
+}