minecraft-inventory 0.1.0

package/src/components/JEI/JEI.tsx

@@ -0,0 +1,303 @@
+import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react'
+import type { ItemStack, RecipeGuide, RecipeNavFrame } from '../../types'
+import { useScale } from '../../context/ScaleContext'
+import { useInventoryContext } from '../../context/InventoryContext'
+import { Slot } from '../Slot'
+import styles from './JEI.module.css'
+
+export interface JEIItem {
+  type: number
+  name: string
+  displayName: string
+  count?: number
+  metadata?: number
+}
+
+interface JEIProps {
+  items?: JEIItem[]
+  position?: 'left' | 'right'
+  width?: number
+  onItemClick?: (item: JEIItem) => void
+  onItemMiddleClick?: (item: JEIItem) => void
+  /** Called when R is pressed while hovering an item — return list of recipes to display */
+  onGetRecipes?: (item: JEIItem) => RecipeGuide[]
+  /** Called when U is pressed while hovering an item — return list of usages to display */
+  onGetUsages?: (item: JEIItem) => RecipeGuide[]
+  /** Called when R/U shortcut should push a new recipe frame (managed externally by InventoryOverlay) */
+  onPushRecipeFrame?: (frame: RecipeNavFrame) => void
+  className?: string
+  style?: React.CSSProperties
+}
+
+const ITEMS_PER_ROW = 6
+const PADDING = 4
+const FAV_KEY = 'mc-inv-jei-favorites'
+
+function getItemKey(item: JEIItem): string {
+  return `${item.type}:${item.metadata ?? 0}:${item.name}`
+}
+
+function loadFavorites(): Set<string> {
+  try {
+    const raw = localStorage.getItem(FAV_KEY)
+    return new Set(raw ? (JSON.parse(raw) as string[]) : [])
+  } catch {
+    return new Set()
+  }
+}
+
+function saveFavorites(favs: Set<string>) {
+  try {
+    localStorage.setItem(FAV_KEY, JSON.stringify([...favs]))
+  } catch {}
+}
+
+export function JEI({
+  items = [],
+  position = 'right',
+  width,
+  onItemClick,
+  onItemMiddleClick,
+  onGetRecipes,
+  onGetUsages,
+  onPushRecipeFrame,
+  className,
+  style,
+}: JEIProps) {
+  const { scale, contentSize } = useScale()
+  const { hoveredSlot } = useInventoryContext()
+  const [search, setSearch] = useState('')
+  const [page, setPage] = useState(0)
+  const [showFavorites, setShowFavorites] = useState(false)
+  const [favorites, setFavorites] = useState<Set<string>>(loadFavorites)
+  // Map from negative slot index → JEI item (to enable F-key and R/U on hover)
+  const slotToItemRef = useRef<Map<number, JEIItem>>(new Map())
+
+  const pushRecipeFrame = useCallback((targetItem: JEIItem, mode: 'recipes' | 'usages') => {
+    const getter = mode === 'recipes' ? onGetRecipes : onGetUsages
+    if (!getter || !onPushRecipeFrame) return
+    const guides = getter(targetItem)
+    if (guides.length === 0) return
+    onPushRecipeFrame({ item: targetItem, mode, guides, guideIndex: 0 })
+  }, [onGetRecipes, onGetUsages, onPushRecipeFrame])
+
+  const padding = PADDING * scale
+  const itemSize = contentSize
+  const cols = ITEMS_PER_ROW
+  const panelWidth = width ?? cols * itemSize + padding * 2
+  const rows = Math.floor((300 * scale) / itemSize)
+  const itemsPerPage = cols * rows
+
+  const toggleFavorite = useCallback((key: string) => {
+    setFavorites((prev) => {
+      const next = new Set(prev)
+      if (next.has(key)) next.delete(key)
+      else next.add(key)
+      saveFavorites(next)
+      return next
+    })
+  }, [])
+
+  // F / R / U keyboard handlers
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      // F: toggle favorite for hovered JEI item
+      if (e.code === 'KeyF' && hoveredSlot !== null && hoveredSlot < 0) {
+        const item = slotToItemRef.current.get(hoveredSlot)
+        if (item) toggleFavorite(getItemKey(item))
+        return
+      }
+
+      // R / U: show recipes / usages for hovered JEI item slot
+      if (e.code !== 'KeyR' && e.code !== 'KeyU') return
+      const mode = e.code === 'KeyR' ? 'recipes' : 'usages'
+
+      if (hoveredSlot !== null && hoveredSlot < 0) {
+        const item = slotToItemRef.current.get(hoveredSlot)
+        if (item) pushRecipeFrame(item, mode)
+      }
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [hoveredSlot, toggleFavorite, pushRecipeFrame])
+
+  // Expose hoveredSlot info for parent-level nested navigation
+  // (RecipeInventoryView handles its own R/U, JEI only needs to handle its own items)
+
+  const baseList = useMemo(() => {
+    if (showFavorites) return items.filter((i) => favorites.has(getItemKey(i)))
+    return items
+  }, [items, showFavorites, favorites])
+
+  const filteredItems = useMemo(() => {
+    if (!search.trim()) return baseList
+    const q = search.toLowerCase()
+    return baseList.filter(
+      (item) =>
+        item.displayName.toLowerCase().includes(q) ||
+        item.name.toLowerCase().includes(q) ||
+        String(item.type).includes(q),
+    )
+  }, [baseList, search])
+
+  const totalPages = Math.ceil(filteredItems.length / itemsPerPage)
+  const visibleItems = filteredItems.slice(page * itemsPerPage, (page + 1) * itemsPerPage)
+
+  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value)
+    setPage(0)
+  }, [])
+
+  const handleWheel = useCallback(
+    (e: React.WheelEvent<HTMLDivElement>) => {
+      e.preventDefault()
+      setPage((prev) => {
+        if (e.deltaY > 0) return Math.min(prev + 1, totalPages - 1)
+        return Math.max(prev - 1, 0)
+      })
+    },
+    [totalPages],
+  )
+
+  // Build slot→item map on each render
+  slotToItemRef.current.clear()
+  visibleItems.forEach((jeiItem, i) => {
+    const slotIndex = -(page * itemsPerPage + i + 1)
+    slotToItemRef.current.set(slotIndex, jeiItem)
+  })
+
+  return (
+    <div
+      className={['mc-inv-root', styles.jei, className].filter(Boolean).join(' ')}
+      style={{
+        width: panelWidth,
+        background: '#c6c6c6',
+        border: `${scale}px solid #555555`,
+        display: 'flex',
+        flexDirection: 'column',
+        ...style,
+      }}
+    >
+      {/* Search + pagination controls */}
+      <div style={{ padding: `${padding}px`, borderBottom: `${scale}px solid #555555` }}>
+        <input
+          type="text"
+          value={search}
+          onChange={handleSearchChange}
+          placeholder="Search items…"
+          className={styles.searchInput}
+          style={{
+            width: '100%',
+            padding: `${2 * scale}px`,
+            fontSize: 6 * scale,
+            background: '#8b8b8b',
+            border: `${scale}px solid #373737`,
+            color: '#ffffff',
+            fontFamily: "'Minecraftia', 'Minecraft', monospace",
+            outline: 'none',
+            boxSizing: 'border-box',
+          }}
+        />
+        {/* Prev / Next / Favorites below search bar */}
+        <div style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: scale,
+          marginTop: 2 * scale,
+          fontSize: 6 * scale,
+          fontFamily: "'Minecraftia', 'Minecraft', monospace",
+        }}>
+          <button
+            className={styles.pageBtn}
+            onClick={() => setPage((p) => Math.max(0, p - 1))}
+            disabled={page === 0}
+            style={{ fontSize: 6 * scale, padding: `${scale}px ${2 * scale}px` }}
+            title="Previous page"
+          >
+            ◀
+          </button>
+          <span style={{ flex: 1, textAlign: 'center', color: '#404040' }}>
+            {page + 1} / {Math.max(1, totalPages)}
+          </span>
+          <button
+            className={styles.pageBtn}
+            onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
+            disabled={page >= totalPages - 1}
+            style={{ fontSize: 6 * scale, padding: `${scale}px ${2 * scale}px` }}
+            title="Next page"
+          >
+            ▶
+          </button>
+          <button
+            className={[styles.pageBtn, showFavorites ? styles.pageBtnActive : ''].join(' ')}
+            onClick={() => { setShowFavorites((v) => !v); setPage(0) }}
+            style={{ fontSize: 6 * scale, padding: `${scale}px ${2 * scale}px` }}
+            title={showFavorites ? 'Show all items' : 'Show favorites (F to toggle)'}
+          >
+            ★
+          </button>
+        </div>
+      </div>
+
+      {/* Item grid — no slot backgrounds, just raw items */}
+      <div
+        style={{
+          position: 'relative',
+          display: 'flex',
+          flexWrap: 'wrap',
+          padding: `${padding}px`,
+          gap: 0,
+          flex: 1,
+          alignContent: 'flex-start',
+          overflowY: 'hidden',
+        }}
+        onWheel={handleWheel}
+      >
+        {visibleItems.map((jeiItem, i) => {
+          const itemStack: ItemStack = {
+            type: jeiItem.type,
+            name: jeiItem.name,
+            count: jeiItem.count ?? 1,
+            metadata: jeiItem.metadata,
+            displayName: jeiItem.displayName,
+          }
+          const slotIndex = -(page * itemsPerPage + i + 1)
+          const isFav = favorites.has(getItemKey(jeiItem))
+          return (
+            <div
+              key={`${jeiItem.type}-${jeiItem.metadata ?? 0}-${i}`}
+              style={{ position: 'relative' }}
+            >
+              <Slot
+                index={slotIndex}
+                item={itemStack}
+                size={itemSize}
+                noBackground
+                onClickOverride={(button, mode) => {
+                  if (button === 'left' && mode === 'normal' && onItemClick) {
+                    onItemClick(jeiItem)
+                  } else if (button === 'middle' && onItemMiddleClick) {
+                    onItemMiddleClick(jeiItem)
+                  }
+                }}
+              />
+              {isFav && (
+                <span style={{
+                  position: 'absolute',
+                  top: 0,
+                  right: 0,
+                  fontSize: Math.round(5 * scale),
+                  color: '#ffcc00',
+                  lineHeight: 1,
+                  pointerEvents: 'none',
+                  textShadow: `0 0 ${scale}px rgba(0,0,0,0.8)`,
+                }}>★</span>
+              )}
+            </div>
+          )
+        })}
+
+      </div>
+    </div>
+  )
+}

package/src/components/JEI/index.ts

@@ -0,0 +1,2 @@
+export { JEI } from './JEI'
+export type { JEIItem } from './JEI'

package/src/components/RecipeGuide/RecipeInventoryView.tsx

@@ -0,0 +1,293 @@
+import React, { useState, useCallback, useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import type { RecipeNavFrame, ItemStack } from '../../types'
+import { ItemCanvas } from '../ItemCanvas'
+import { Tooltip } from '../Tooltip'
+import { useScale } from '../../context/ScaleContext'
+import { InventoryBackground } from '../InventoryWindow/InventoryBackground'
+import { getInventoryType } from '../../registry'
+
+interface RecipeInventoryViewProps {
+  navStack: RecipeNavFrame[]
+  onBack: () => void
+  onGuideIndexChange: (idx: number) => void
+  /** Called when R or U is pressed while hovering a recipe item (nested navigation) */
+  onPushFrame: (item: RecipeNavFrame['item'], mode: 'recipes' | 'usages') => void
+}
+
+/** Slot item with a Tooltip, used inside the recipe view */
+function RecipeItemCell({
+  item,
+  x,
+  y,
+  size,
+  onHover,
+}: {
+  item: ItemStack | null
+  x: number
+  y: number
+  size: number
+  onHover: (item: ItemStack | null, mx: number, my: number) => void
+}) {
+  const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 })
+  const [hovered, setHovered] = useState(false)
+
+  if (!item) {
+    return (
+      <div
+        style={{
+          position: 'absolute',
+          left: x,
+          top: y,
+          width: size,
+          height: size,
+        }}
+      />
+    )
+  }
+
+  return (
+    <div
+      style={{ position: 'absolute', left: x, top: y, width: size, height: size, cursor: 'default' }}
+      onMouseEnter={(e) => {
+        setTooltipPos({ x: e.clientX, y: e.clientY })
+        setHovered(true)
+        onHover(item, e.clientX, e.clientY)
+      }}
+      onMouseLeave={() => {
+        setHovered(false)
+        onHover(null, 0, 0)
+      }}
+      onMouseMove={(e) => {
+        setTooltipPos({ x: e.clientX, y: e.clientY })
+        onHover(item, e.clientX, e.clientY)
+      }}
+    >
+      <ItemCanvas item={item} size={size} style={{ position: 'absolute', top: 0, left: 0, pointerEvents: 'none' }} />
+      {hovered && createPortal(
+        <Tooltip item={item} mouseX={tooltipPos.x} mouseY={tooltipPos.y} visible />,
+        document.body
+      )}
+    </div>
+  )
+}
+
+/**
+ * Renders the current recipe guide using the actual inventory background layout
+ * (crafting_table for crafting, furnace for smelting). Replaces the main
+ * InventoryWindow while a recipe is being browsed.
+ */
+export function RecipeInventoryView({
+  navStack,
+  onBack,
+  onGuideIndexChange,
+  onPushFrame,
+}: RecipeInventoryViewProps) {
+  const { scale, contentSize } = useScale()
+  // Registry coords already point to item area — no border offset needed
+  const borderPx = 0
+  const frame = navStack[navStack.length - 1]
+  const guide = frame.guides[frame.guideIndex]
+  const hoveredItemRef = useRef<RecipeNavFrame['item'] | null>(null)
+
+  const handleHoverItem = useCallback((item: ItemStack | null) => {
+    if (!item) { hoveredItemRef.current = null; return }
+    hoveredItemRef.current = {
+      type: item.type,
+      name: item.name ?? '',
+      displayName: item.displayName ?? item.name ?? `Item #${item.type}`,
+      count: item.count,
+      metadata: item.metadata,
+    }
+  }, [])
+
+  // R / U for nested navigation on hovered recipe items
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.code !== 'KeyR' && e.code !== 'KeyU') return
+      const item = hoveredItemRef.current
+      if (!item) return
+      onPushFrame(item, e.code === 'KeyR' ? 'recipes' : 'usages')
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [onPushFrame])
+
+  // Escape = go back one level
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.code === 'Escape') onBack()
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [onBack])
+
+  const isMultiFrame = navStack.length > 1
+
+  // Determine layout type and get definition
+  const layoutType = guide.type === 'smelting' ? 'furnace' : 'crafting_table'
+  const def = getInventoryType(layoutType)!
+
+  // Container-only slots (no player inv / hotbar, group !== 'player' && group !== 'hotbar')
+  const containerSlots = def.slots.filter(
+    (s) => s.group !== 'player' && s.group !== 'hotbar',
+  )
+
+  // Map recipe items to slot indices
+  const slotItems = new Map<number, ItemStack | null>()
+
+  if (guide.type === 'crafting') {
+    // Slot 0 = result, slots 1-9 = 3x3 grid
+    slotItems.set(0, guide.result ?? null)
+    const ingr = guide.ingredients ?? []
+    for (let i = 0; i < 9; i++) {
+      slotItems.set(i + 1, ingr[i] ?? null)
+    }
+  } else if (guide.type === 'smelting') {
+    slotItems.set(0, guide.input ?? null)
+    slotItems.set(1, guide.fuel ?? null)
+    slotItems.set(2, guide.result ?? null)
+  }
+
+  const totalGuides = frame.guides.length
+  const navFontSize = Math.max(6, Math.round(6 * scale))
+  const navPx = Math.max(1, Math.round(scale))
+
+  return (
+    <div
+      className="mc-inv-recipe-view"
+      style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'stretch' }}
+    >
+      {/* ── Navigation bar ABOVE the inventory background ── */}
+      <div
+        className="mc-inv-recipe-nav"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 4 * scale,
+          marginBottom: 3 * scale,
+          fontSize: navFontSize,
+          fontFamily: "'Minecraftia', 'Minecraft', monospace",
+        }}
+      >
+        <NavBtn scale={scale} onClick={onBack}>
+          {isMultiFrame ? '◀ Back' : '✕ Close'}
+        </NavBtn>
+
+        {/* Mode label */}
+        <span style={{ color: '#505050', flex: 1 }}>
+          {frame.mode === 'recipes' ? 'Recipes for' : 'Usages of'}{' '}
+          <span style={{ color: '#205090' }}>{frame.item.displayName}</span>
+          {navStack.length > 1 && (
+            <span style={{ color: '#aaa', marginLeft: 4 * scale }}>
+              {'▸'.repeat(navStack.length - 1)}
+            </span>
+          )}
+        </span>
+
+        {/* Prev / next for multiple guides */}
+        {totalGuides > 1 && (
+          <>
+            <NavBtn
+              scale={scale}
+              onClick={() => onGuideIndexChange(Math.max(0, frame.guideIndex - 1))}
+              disabled={frame.guideIndex === 0}
+            >◀</NavBtn>
+            <span style={{ color: '#404040', minWidth: 40 * scale, textAlign: 'center' }}>
+              {frame.guideIndex + 1} / {totalGuides}
+            </span>
+            <NavBtn
+              scale={scale}
+              onClick={() => onGuideIndexChange(Math.min(totalGuides - 1, frame.guideIndex + 1))}
+              disabled={frame.guideIndex >= totalGuides - 1}
+            >▶</NavBtn>
+          </>
+        )}
+      </div>
+
+      {/* ── Inventory background with container slots only ── */}
+      <InventoryBackground definition={def} title={guide.title}>
+        {containerSlots.map((slotDef) => {
+          const item = slotItems.get(slotDef.index) ?? null
+          return (
+            <RecipeItemCell
+              key={slotDef.index}
+              item={item}
+              x={slotDef.x * scale}
+              y={slotDef.y * scale}
+              size={slotDef.size ? slotDef.size * scale - 2 * navPx : contentSize}
+              onHover={handleHoverItem}
+            />
+          )
+        })}
+
+        {/* Description for custom-type guides */}
+        {guide.description && (
+          <div style={{
+            position: 'absolute',
+            top: 24 * scale,
+            left: 8 * scale,
+            right: 8 * scale,
+            fontSize: navFontSize,
+            fontFamily: "'Minecraftia', 'Minecraft', monospace",
+            color: '#404040',
+            lineHeight: 1.5,
+            pointerEvents: 'none',
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+          }}>
+            {guide.description}
+          </div>
+        )}
+      </InventoryBackground>
+
+      {/* ── Hint below ── */}
+      <div style={{
+        marginTop: 2 * scale,
+        textAlign: 'center',
+        fontSize: Math.max(5, Math.round(5.5 * scale)),
+        fontFamily: "'Minecraftia', 'Minecraft', monospace",
+        color: 'rgba(80,80,80,0.7)',
+        pointerEvents: 'none',
+      }}>
+        Hover ingredient + R / U for nested lookup
+      </div>
+    </div>
+  )
+}
+
+function NavBtn({
+  scale,
+  onClick,
+  disabled,
+  title,
+  children,
+}: {
+  scale: number
+  onClick: () => void
+  disabled?: boolean
+  title?: string
+  children: React.ReactNode
+}) {
+  return (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      title={title}
+      style={{
+        background: disabled ? '#8b8b8b' : '#c6c6c6',
+        border: `${Math.max(1, Math.round(scale))}px solid #555`,
+        color: disabled ? '#666' : '#404040',
+        fontFamily: 'inherit',
+        fontSize: 'inherit',
+        cursor: disabled ? 'default' : 'pointer',
+        padding: `${Math.round(scale)}px ${Math.round(3 * scale)}px`,
+        lineHeight: 1,
+        outline: 'none',
+        flexShrink: 0,
+      }}
+    >
+      {children}
+    </button>
+  )
+}

package/src/components/RecipeGuide/index.ts

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

package/src/components/Slot/Slot.module.css

@@ -0,0 +1,111 @@
+/* Bare variant: no background/border (used in JEI grid) */
+.slotBare {
+  cursor: default;
+  position: relative;
+  overflow: visible;
+}
+
+.slot {
+  cursor: default;
+  position: relative;
+  overflow: visible;
+}
+
+.hovered::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.4);
+  pointer-events: none;
+}
+
+.highlighted::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 128, 0.4);
+  pointer-events: none;
+}
+
+.dragTarget::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.3);
+  pointer-events: none;
+}
+
+.resultSlot {
+  background: #8b8b8b;
+}
+
+.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.emptyLabel {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.3);
+  font-family: 'Minecraft', monospace;
+  text-align: center;
+  pointer-events: none;
+  font-size: 0.6em;
+}
+
+/* Mobile overlay backdrop */
+.mobileOverlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.mobileMenu {
+  display: flex;
+  flex-direction: column;
+  background: #282828;
+  border: 2px solid #555555;
+  font-family: 'Minecraft', monospace;
+  image-rendering: pixelated;
+  z-index: 10001;
+}
+
+.mobileMenuTitle {
+  color: #ffffff;
+  font-weight: bold;
+  padding-bottom: 4px;
+  border-bottom: 1px solid #555555;
+  margin-bottom: 4px;
+}
+
+.mobileBtn {
+  background: #404040;
+  color: #ffffff;
+  border: 1px solid #666666;
+  cursor: pointer;
+  padding: 4px 8px;
+  font-family: inherit;
+  font-size: inherit;
+  text-align: left;
+  transition: background 0.1s;
+}
+
+.mobileBtn:hover,
+.mobileBtn:active {
+  background: #555555;
+}
+
+.mobileBtnDanger {
+  color: #ff5555;
+  border-color: #aa0000;
+}
+
+.mobileBtnDanger:hover,
+.mobileBtnDanger:active {
+  background: #330000;
+}