minecraft-inventory 0.1.0

package/src/context/InventoryContext.tsx

@@ -0,0 +1,157 @@
+import React, { createContext, useContext, useEffect, useRef, useState, useCallback } from 'react'
+import type { InventoryWindowState, PlayerState, ItemStack, SlotState } from '../types'
+import type { InventoryConnector } from '../connector/types'
+
+export interface InventoryContextValue {
+  windowState: InventoryWindowState | null
+  playerState: PlayerState | null
+  heldItem: ItemStack | null
+  setHeldItem: (item: ItemStack | null) => void
+  connector: InventoryConnector | null
+  sendAction: InventoryConnector['sendAction']
+  isDragging: boolean
+  dragSlots: number[]
+  dragButton: 'left' | 'right' | null
+  startDrag: (slotIndex: number, button: 'left' | 'right') => void
+  addDragSlot: (slotIndex: number) => void
+  endDrag: () => void
+  cancelDrag: () => void
+  hoveredSlot: number | null
+  setHoveredSlot: (slot: number | null) => void
+  activeNumberKey: number | null
+  setActiveNumberKey: (key: number | null) => void
+  getSlot: (index: number) => SlotState | undefined
+  /** Pixel offset from the cursor item's top-left to the grab point, preserving pick-up position */
+  grabOffset: { x: number; y: number }
+  setGrabOffset: (offset: { x: number; y: number }) => void
+}
+
+const InventoryContext = createContext<InventoryContextValue | null>(null)
+
+export function useInventoryContext(): InventoryContextValue {
+  const ctx = useContext(InventoryContext)
+  if (!ctx) throw new Error('useInventoryContext must be used within InventoryProvider')
+  return ctx
+}
+
+interface InventoryProviderProps {
+  connector: InventoryConnector | null
+  children: React.ReactNode
+}
+
+export function InventoryProvider({ connector, children }: InventoryProviderProps) {
+  const [windowState, setWindowState] = useState<InventoryWindowState | null>(
+    () => connector?.getWindowState() ?? null,
+  )
+  const [playerState, setPlayerState] = useState<PlayerState | null>(
+    () => connector?.getPlayerState() ?? null,
+  )
+  const [heldItem, setHeldItemState] = useState<ItemStack | null>(
+    () => connector?.getWindowState()?.heldItem ?? null,
+  )
+  const [hoveredSlot, setHoveredSlot] = useState<number | null>(null)
+  const [isDragging, setIsDragging] = useState(false)
+  const [dragSlots, setDragSlots] = useState<number[]>([])
+  const [dragButton, setDragButton] = useState<'left' | 'right' | null>(null)
+  const [activeNumberKey, setActiveNumberKey] = useState<number | null>(null)
+  const [grabOffset, setGrabOffset] = useState<{ x: number; y: number }>({ x: 0, y: 0 })
+
+  const connectorRef = useRef(connector)
+  connectorRef.current = connector
+
+  useEffect(() => {
+    if (!connector) return
+    setWindowState(connector.getWindowState())
+    setPlayerState(connector.getPlayerState())
+
+    return connector.subscribe((event) => {
+      if (event.type === 'windowOpen' || event.type === 'windowUpdate') {
+        setWindowState({ ...event.state })
+        setHeldItemState(event.state.heldItem)
+      } else if (event.type === 'windowClose') {
+        setWindowState(null)
+        setHeldItemState(null)
+        setIsDragging(false)
+        setDragSlots([])
+      } else if (event.type === 'playerUpdate') {
+        setPlayerState(event.state)
+      } else if (event.type === 'heldItemChange') {
+        setHeldItemState(event.item)
+      }
+    })
+  }, [connector])
+
+  const setHeldItem = useCallback((item: ItemStack | null) => {
+    setHeldItemState(item)
+  }, [])
+
+  const sendAction = useCallback<InventoryConnector['sendAction']>(
+    (action) => {
+      return connectorRef.current?.sendAction(action)
+    },
+    [],
+  )
+
+  const startDrag = useCallback((slotIndex: number, button: 'left' | 'right') => {
+    setIsDragging(true)
+    setDragButton(button)
+    setDragSlots([slotIndex])
+    connectorRef.current?.sendAction({ type: 'drag', slots: [], button })
+  }, [])
+
+  const addDragSlot = useCallback((slotIndex: number) => {
+    setDragSlots((prev) => {
+      if (prev.includes(slotIndex)) return prev
+      return [...prev, slotIndex]
+    })
+  }, [])
+
+  const endDrag = useCallback(() => {
+    setDragSlots((slots) => {
+      if (slots.length > 0 && dragButton) {
+        connectorRef.current?.sendAction({ type: 'drag', slots, button: dragButton })
+      }
+      return []
+    })
+    setIsDragging(false)
+    setDragButton(null)
+  }, [dragButton])
+
+  const cancelDrag = useCallback(() => {
+    setIsDragging(false)
+    setDragSlots([])
+    setDragButton(null)
+  }, [])
+
+  const getSlot = useCallback(
+    (index: number) => {
+      return windowState?.slots.find((s) => s.index === index)
+    },
+    [windowState],
+  )
+
+  const value: InventoryContextValue = {
+    windowState,
+    playerState,
+    heldItem,
+    setHeldItem,
+    connector,
+    sendAction,
+    isDragging,
+    dragSlots,
+    dragButton,
+    startDrag,
+    addDragSlot,
+    endDrag,
+    cancelDrag,
+    hoveredSlot,
+    setHoveredSlot,
+    activeNumberKey,
+    setActiveNumberKey,
+    getSlot,
+    grabOffset,
+    setGrabOffset,
+  }
+
+  return <InventoryContext.Provider value={value}>{children}</InventoryContext.Provider>
+}

package/src/context/ScaleContext.tsx

@@ -0,0 +1,73 @@
+import React, { createContext, useContext, useMemo } from 'react'
+
+export interface ScaleContextValue {
+  scale: number
+  /** Full grid cell size: 18 × scale. Used for layout/positioning. */
+  slotSize: number
+  /** Item content area size: slotSize - 2 × borderPx. This is the slot div size. */
+  contentSize: number
+  /** 1 unscaled pixel, Math.max(1, Math.round(scale)). Offset from grid cell to content area. */
+  borderPx: number
+  fontSize: number
+  borderRadius: number
+  pixelSize: number
+  getCSSVars(): React.CSSProperties
+}
+
+const BASE_SLOT_SIZE = 18
+
+const ScaleContext = createContext<ScaleContextValue>({
+  scale: 2,
+  slotSize: BASE_SLOT_SIZE * 2,
+  contentSize: BASE_SLOT_SIZE * 2 - 4,
+  borderPx: 2,
+  fontSize: 12,
+  borderRadius: 0,
+  pixelSize: 2,
+  getCSSVars: () => ({}),
+})
+
+export function useScale(): ScaleContextValue {
+  return useContext(ScaleContext)
+}
+
+interface ScaleProviderProps {
+  scale?: number
+  children: React.ReactNode
+}
+
+export function ScaleProvider({ scale = 2, children }: ScaleProviderProps) {
+  const value = useMemo<ScaleContextValue>(() => {
+    const slotSize = BASE_SLOT_SIZE * scale
+    const fontSize = 7 * scale
+    const pixelSize = scale
+    const borderPx = Math.max(1, Math.round(scale))
+    const contentSize = slotSize - 2 * borderPx
+
+    return {
+      scale,
+      slotSize,
+      contentSize,
+      borderPx,
+      fontSize,
+      borderRadius: 0,
+      pixelSize,
+      getCSSVars: () => ({
+        '--mc-scale': scale,
+        '--mc-slot-size': `${slotSize}px`,
+        '--mc-font-size': `${fontSize}px`,
+        '--mc-pixel': `${pixelSize}px`,
+        '--mc-border': `${borderPx}px`,
+        '--mc-gap': `${2 * pixelSize}px`,
+        '--mc-padding': `${4 * pixelSize}px`,
+        '--mc-count-font': `${Math.round(6 * scale)}px`,
+      } as React.CSSProperties),
+    }
+  }, [scale])
+
+  return (
+    <ScaleContext.Provider value={value}>
+      <div style={value.getCSSVars()}>{children}</div>
+    </ScaleContext.Provider>
+  )
+}

package/src/context/TextureContext.tsx

@@ -0,0 +1,70 @@
+import React, { createContext, useContext } from 'react'
+
+// Default: 1.16.4 for GUI textures (most containers existed here; 1.21.4 for items)
+export const MC_ITEMS_BASE =
+  'https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data/1.21.4'
+export const MC_GUI_BASE =
+  'https://raw.githubusercontent.com/PrismarineJS/minecraft-assets/master/data'
+
+export interface TextureConfig {
+  baseUrl: string
+  getItemTextureUrl(item: { type: number; name?: string }): string
+  getBlockTextureUrl(item: { type: number; name?: string }): string
+  /** version defaults to '1.16.4' for GUI textures unless overridden per-container */
+  getGuiTextureUrl(path: string, version?: string): string
+}
+
+function buildDefault(base: string): TextureConfig {
+  const isRemote = base.startsWith('http')
+  // For remote default: use the same base for items, separate versioned base for GUI
+  const guiBase = isRemote ? MC_GUI_BASE : base
+
+  return {
+    baseUrl: base,
+
+    getItemTextureUrl({ type, name }) {
+      const root = isRemote ? MC_ITEMS_BASE : base
+      if (name) return `${root}/items/${name}.png`
+      return `${root}/items/${type}.png`
+    },
+
+    getBlockTextureUrl({ type, name }) {
+      const root = isRemote ? MC_ITEMS_BASE : base
+      if (name) return `${root}/blocks/${name}.png`
+      return `${root}/blocks/${type}.png`
+    },
+
+    getGuiTextureUrl(path: string, version = '1.16.4') {
+      if (isRemote) {
+        return `${guiBase}/${version}/${path}.png`
+      }
+      return `${base}/textures/${path}.png`
+    },
+  }
+}
+
+const defaultTextureConfig = buildDefault(MC_ITEMS_BASE)
+
+const TextureContext = createContext<TextureConfig>(defaultTextureConfig)
+
+export function useTextures(): TextureConfig {
+  return useContext(TextureContext)
+}
+
+interface TextureProviderProps {
+  config?: Partial<TextureConfig>
+  baseUrl?: string
+  children: React.ReactNode
+}
+
+export function TextureProvider({ config, baseUrl, children }: TextureProviderProps) {
+  const base = baseUrl ?? config?.baseUrl ?? MC_ITEMS_BASE
+  const merged: TextureConfig = {
+    ...buildDefault(base),
+    ...config,
+  }
+
+  return <TextureContext.Provider value={merged}>{children}</TextureContext.Provider>
+}
+
+export { defaultTextureConfig }

package/src/globals.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+  const content: Record<string, string>
+  export default content
+}

package/src/hooks/useKeyboardShortcuts.ts

@@ -0,0 +1,41 @@
+import { useEffect } from 'react'
+import { useInventoryContext } from '../context/InventoryContext'
+
+export function useKeyboardShortcuts(enabled = true) {
+  const { setActiveNumberKey, hoveredSlot, sendAction } = useInventoryContext()
+
+  useEffect(() => {
+    if (!enabled) return
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Digit1–Digit9 → hotbar swap (works regardless of keyboard layout)
+      if (e.code >= 'Digit1' && e.code <= 'Digit9') {
+        setActiveNumberKey(parseInt(e.code.replace('Digit', ''), 10) - 1)
+      }
+
+      // Q to drop
+      if (e.code === 'KeyQ') {
+        if (hoveredSlot !== null) {
+          sendAction({
+            type: 'drop',
+            slotIndex: hoveredSlot,
+            all: e.ctrlKey || e.metaKey,
+          })
+        }
+      }
+    }
+
+    const handleKeyUp = (e: KeyboardEvent) => {
+      if (e.code >= 'Digit1' && e.code <= 'Digit9') {
+        setActiveNumberKey(null)
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    window.addEventListener('keyup', handleKeyUp)
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+      window.removeEventListener('keyup', handleKeyUp)
+    }
+  }, [enabled, hoveredSlot, sendAction, setActiveNumberKey])
+}

package/src/hooks/useMobile.ts

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react'
+
+let cachedIsMobile: boolean | null = null
+
+function detectMobile(): boolean {
+  if (typeof window === 'undefined') return false
+  return (
+    'ontouchstart' in window ||
+    navigator.maxTouchPoints > 0 ||
+    window.matchMedia('(pointer: coarse)').matches
+  )
+}
+
+export function useMobile(): boolean {
+  const [isMobile, setIsMobile] = useState<boolean>(() => {
+    if (cachedIsMobile !== null) return cachedIsMobile
+    return detectMobile()
+  })
+
+  useEffect(() => {
+    const mq = window.matchMedia('(pointer: coarse)')
+    const update = (e: MediaQueryListEvent) => setIsMobile(e.matches)
+    mq.addEventListener('change', update)
+    return () => mq.removeEventListener('change', update)
+  }, [])
+
+  return isMobile
+}

package/src/index.tsx

@@ -0,0 +1,65 @@
+export { InventoryGUI } from './InventoryGUI'
+export type { InventoryGUIProps } from './InventoryGUI'
+
+// Contexts & Providers
+export { InventoryProvider, useInventoryContext } from './context/InventoryContext'
+export { ScaleProvider, useScale } from './context/ScaleContext'
+export { TextureProvider, useTextures, defaultTextureConfig } from './context/TextureContext'
+
+// Components
+export { InventoryWindow } from './components/InventoryWindow'
+export { InventoryBackground } from './components/InventoryWindow'
+export { Slot } from './components/Slot'
+export { ItemCanvas } from './components/ItemCanvas'
+export { Tooltip } from './components/Tooltip'
+export { JEI } from './components/JEI'
+export type { JEIItem } from './components/JEI'
+export { Hotbar } from './components/Hotbar'
+export { HUD } from './components/HUD'
+export { CursorItem } from './components/CursorItem'
+export { InventoryOverlay } from './components/InventoryOverlay'
+export type { InventoryOverlayProps } from './components/InventoryOverlay'
+export { RecipeInventoryView } from './components/RecipeGuide'
+
+// Text components
+export { MessageFormattedString } from './components/Text/MessageFormattedString'
+export { default as MessageFormatted, MessagePart } from './components/Text/MessageFormatted'
+
+// Programmatic mount (no React needed)
+export { mountInventory } from './mount'
+export type { MountedInventory } from './mount'
+
+// Hooks
+export { useMobile } from './hooks/useMobile'
+export { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts'
+
+// Connector
+export { createMineflayerConnector } from './connector/mineflayer'
+export { createDemoConnector } from './connector/demo'
+export type {
+  InventoryConnector,
+  ConnectorEvent,
+  ConnectorListener,
+  MineflayerBot,
+} from './connector/types'
+export type { ActionLogEntry, DemoConnectorOptions } from './connector/demo'
+
+// Registry
+export { registerInventoryType, getInventoryType, getAllInventoryTypes } from './registry'
+export type { InventoryTypeDefinition } from './registry'
+
+// Types
+export type {
+  ItemStack,
+  SlotState,
+  SlotDefinition,
+  ProgressBar,
+  InventoryWindowState,
+  PlayerState,
+  TradeOffer,
+  InventoryAction,
+  MouseButton,
+  ClickMode,
+  RecipeGuide,
+  RecipeNavFrame,
+} from './types'

package/src/mount.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { InventoryGUI, type InventoryGUIProps } from './InventoryGUI'
+
+export interface MountedInventory {
+  update(props: Partial<InventoryGUIProps>): void
+  destroy(): void
+}
+
+/**
+ * Mount an inventory GUI into a DOM element without writing React code.
+ *
+ * ```js
+ * import { mountInventory, createDemoConnector } from 'minecraft-inventory'
+ *
+ * const connector = createDemoConnector({ windowType: 'chest', slots: [] })
+ * const inv = mountInventory(document.getElementById('root'), {
+ *   type: 'chest',
+ *   connector,
+ *   scale: 2,
+ * })
+ *
+ * // Later: update props
+ * inv.update({ scale: 3 })
+ *
+ * // Cleanup
+ * inv.destroy()
+ * ```
+ */
+export function mountInventory(
+  container: HTMLElement,
+  initialProps: InventoryGUIProps,
+): MountedInventory {
+  let currentProps = { ...initialProps }
+  const root: Root = createRoot(container)
+
+  function render() {
+    root.render(<InventoryGUI {...currentProps} />)
+  }
+
+  render()
+
+  return {
+    update(props: Partial<InventoryGUIProps>) {
+      currentProps = { ...currentProps, ...props }
+      render()
+    },
+    destroy() {
+      root.unmount()
+    },
+  }
+}

package/src/registry/index.ts

@@ -0,0 +1,21 @@
+import type { InventoryTypeDefinition } from '../types'
+import { inventoryDefinitions } from './inventories'
+
+const registry = new Map<string, InventoryTypeDefinition>(
+  Object.entries(inventoryDefinitions),
+)
+
+export function registerInventoryType(def: InventoryTypeDefinition): void {
+  registry.set(def.name, def)
+}
+
+export function getInventoryType(name: string): InventoryTypeDefinition | undefined {
+  return registry.get(name)
+}
+
+export function getAllInventoryTypes(): InventoryTypeDefinition[] {
+  return Array.from(registry.values())
+}
+
+export { inventoryDefinitions }
+export type { InventoryTypeDefinition }