minecraft-inventory 0.1.11 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minecraft-inventory",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "type": "module",
   "license": "MIT",
   "release": {

package/src/components/InventoryOverlay/InventoryOverlay.tsx

@@ -298,7 +298,7 @@ export function InventoryOverlay({
               lineHeight: 1,
             }}
           >
-            INV 0.1.11
+            INV 0.1.13
           </a>
         )}
 

package/src/components/ItemCanvas/ItemCanvas.tsx

@@ -193,29 +193,40 @@ export const ItemCanvas = memo(function ItemCanvas({
         />
       ) : null /* still loading — render nothing (slot stays empty) */}
 
-      {/* Durability bar */}
-      {hasDurability && (
-        <>
-          <div className="mc-inv-item-durability-bg" style={{
-            position: 'absolute',
-            bottom: 1,
-            left: 1,
-            width: 'calc(100% - 2px)',
-            height: Math.max(1, Math.round(renderSize * 0.063)),
-            background: '#000',
-            pointerEvents: 'none',
-          }} />
-          <div className="mc-inv-item-durability-bar" style={{
-            position: 'absolute',
-            bottom: 1,
-            left: 1,
-            width: `${(item.durability! / item.maxDurability!) * 100}%`,
-            height: Math.max(1, Math.round(renderSize * 0.063)),
-            background: barColor,
-            pointerEvents: 'none',
-          }} />
-        </>
-      )}
+      {/* Durability bar — vanilla layout: x=2, y=13 in 16×16 item area */}
+      {hasDurability && (() => {
+        const mcPx = Math.max(1, Math.round(pixelSize))
+        const barLeft = 2 * mcPx
+        const bgBottom = mcPx
+        const bgWidth = 13 * mcPx
+        const bgHeight = 2 * mcPx
+        const ratio = item.durability! / item.maxDurability!
+        const fillWidth = Math.round(13 * ratio) * mcPx
+        const fillHeight = mcPx
+        const fillBottom = 2 * mcPx
+        return (
+          <>
+            <div className="mc-inv-item-durability-bg" style={{
+              position: 'absolute',
+              bottom: bgBottom,
+              left: barLeft,
+              width: bgWidth,
+              height: bgHeight,
+              background: '#000',
+              pointerEvents: 'none',
+            }} />
+            <div className="mc-inv-item-durability-bar" style={{
+              position: 'absolute',
+              bottom: fillBottom,
+              left: barLeft,
+              width: fillWidth,
+              height: fillHeight,
+              background: barColor,
+              pointerEvents: 'none',
+            }} />
+          </>
+        )
+      })()}
 
       {/* Item count */}
       {!noCount && item.count > 1 && (

package/src/components/JEI/JEI.tsx

@@ -347,8 +347,12 @@ export function JEI({
                 size={itemSize}
                 noBackground
                 onClickOverride={(button, mode) => {
-                  if (button === 'left' && mode === 'normal' && onItemClick) {
-                    onItemClick(jeiItem)
+                  if (button === 'left' && mode === 'normal') {
+                    if (onItemClick) {
+                      onItemClick(jeiItem)
+                    } else {
+                      pushRecipeFrame(jeiItem, 'recipes')
+                    }
                   } else if (button === 'middle' && onItemMiddleClick) {
                     onItemMiddleClick(jeiItem)
                   }

package/src/components/RecipeGuide/RecipeInventoryView.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useCallback, useEffect, useRef } from 'react'
-import type { RecipeNavFrame, ItemStack } from '../../types'
+import type { RecipeNavFrame, RecipeGuide, ItemStack } from '../../types'
 import { ItemCanvas } from '../ItemCanvas'
 import { Tooltip } from '../Tooltip'
 import { useScale } from '../../context/ScaleContext'
-import { InventoryBackground } from '../InventoryWindow/InventoryBackground'
+import { useTextures } from '../../context/TextureContext'
 import { getInventoryType } from '../../registry'
 
 interface RecipeInventoryViewProps {
@@ -113,21 +113,21 @@ export function RecipeInventoryView({
   }, [onBack])
 
   const isMultiFrame = navStack.length > 1
+  const isCustom = guide.type === 'custom'
 
-  // Determine layout type and get definition
+  // Determine layout type and get definition (not needed for custom)
   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',
+  // Container-only slots (no player inv / hotbar)
+  const containerSlots = isCustom ? [] : def.slots.filter(
+    (s) => s.group !== 'inventory' && 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++) {
@@ -156,8 +156,13 @@ export function RecipeInventoryView({
           alignItems: 'center',
           gap: 4 * scale,
           marginBottom: 3 * scale,
+          padding: `${Math.round(2 * scale)}px ${Math.round(4 * scale)}px`,
           fontSize: navFontSize,
           fontFamily: "'Minecraftia', 'Minecraft', monospace",
+          background: '#c6c6c6',
+          border: `${Math.max(1, Math.round(scale))}px solid #555`,
+          boxSizing: 'border-box',
+          width: def.backgroundWidth * scale,
         }}
       >
         <NavBtn scale={scale} onClick={onBack}>
@@ -195,53 +200,296 @@ export function RecipeInventoryView({
         )}
       </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,
+      {isCustom ? (
+        /* ── Compact description card for non-craftable items ── */
+        <DescriptionCard
+          guide={guide}
+          itemName={frame.item.name}
+          scale={scale}
+        />
+      ) : (
+        /* ── Cropped inventory background with container slots only (no player inv) ── */
+        <CroppedRecipeBackground
+          guide={guide}
+          containerSlots={containerSlots}
+          slotItems={slotItems}
+          scale={scale}
+          navPx={navPx}
+          contentSize={contentSize}
+          onHoverItem={handleHoverItem}
+        />
+      )}
+
+      {/* ── Hint below ── */}
+      {!isCustom && (
+        <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>
+  )
+}
+
+/**
+ * Cropped recipe background — shows only the container area (no player inventory).
+ * Crafting: crops to 80px height (title bar + 3×3 grid + result).
+ * Smelting: crops to 84px height (input + fuel + result + arrow).
+ */
+function CroppedRecipeBackground({
+  guide,
+  containerSlots,
+  slotItems,
+  scale,
+  navPx,
+  contentSize,
+  onHoverItem,
+}: {
+  guide: RecipeGuide
+  containerSlots: Array<{ index: number; x: number; y: number; size?: number; group?: string }>
+  slotItems: Map<number, ItemStack | null>
+  scale: number
+  navPx: number
+  contentSize: number
+  onHoverItem: (item: ItemStack | null) => void
+}) {
+  const textures = useTextures()
+  const layoutType = guide.type === 'smelting' ? 'furnace' : 'crafting_table'
+  const def = getInventoryType(layoutType)!
+  const bgUrl = textures.getGuiTextureUrl(def.backgroundTexture)
+
+  // Crop height: crafting=80, furnace=84 (matches old lib's CraftingTableGuide slice)
+  const CROP_H = guide.type === 'smelting' ? 84 : 80
+  const SRC_W = def.backgroundWidth
+  const fontSize = Math.max(6, Math.round(6 * scale))
+
+  return (
+    <div
+      className="mc-inv-recipe-cropped"
+      style={{
+        position: 'relative',
+        width: SRC_W * scale,
+        height: CROP_H * scale,
+        imageRendering: 'pixelated',
+        display: 'inline-block',
+      }}
+    >
+      {/* Cropped background texture */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: SRC_W,
+          height: CROP_H,
+          overflow: 'hidden',
+          transform: `scale(${scale})`,
+          transformOrigin: 'top left',
+        }}
+      >
+        <img
+          src={bgUrl}
+          alt=""
+          aria-hidden
+          draggable={false}
+          style={{
+            display: 'block',
+            width: SRC_W,
+            imageRendering: 'pixelated',
             pointerEvents: 'none',
-            whiteSpace: 'pre-wrap',
-            wordBreak: 'break-word',
-          }}>
-            {guide.description}
-          </div>
+            userSelect: 'none',
+            objectFit: 'none',
+            objectPosition: '0 0',
+          }}
+        />
+      </div>
+
+      {/* Title */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 6 * scale,
+          left: 8 * scale,
+          fontSize,
+          fontFamily: "'Minecraftia', 'Minecraft', monospace",
+          color: '#404040',
+          lineHeight: 1,
+          pointerEvents: 'none',
+        }}
+      >
+        {guide.title}
+        {guide.description && (
+          <span style={{ color: '#808080', marginLeft: 4 * scale }}>
+            ({guide.description})
+          </span>
         )}
-      </InventoryBackground>
+      </div>
 
-      {/* ── 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
+      {/* Slot items */}
+      {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={onHoverItem}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+/**
+ * Compact description card for non-craftable items (replaces full inventory background).
+ * Mirrors the old canvas-based GenericDescription layout: cropped crafting_table header,
+ * gray content area, item icon, description text, and a Minecraft Wiki link.
+ */
+function DescriptionCard({
+  guide,
+  itemName,
+  scale,
+}: {
+  guide: RecipeGuide
+  itemName: string
+  scale: number
+}) {
+  const textures = useTextures()
+  const craftingDef = getInventoryType('crafting_table')!
+  const bgUrl = textures.getGuiTextureUrl(craftingDef.backgroundTexture)
+
+  const CARD_W = 176
+  const CARD_H = 120
+  const TITLE_H = 15
+  const fontSize = Math.max(6, Math.round(6 * scale))
+  const iconSize = 16 * scale
+
+  const wikiUrl = `https://minecraft.wiki/w/${encodeURIComponent(itemName.replace(/ /g, '_'))}`
+
+  return (
+    <div
+      className="mc-inv-description-card"
+      style={{
+        position: 'relative',
+        width: CARD_W * scale,
+        height: CARD_H * scale,
+        imageRendering: 'pixelated',
+        display: 'inline-block',
+      }}
+    >
+      {/* Cropped crafting_table texture as background header */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: CARD_W,
+          height: CARD_H,
+          overflow: 'hidden',
+          transform: `scale(${scale})`,
+          transformOrigin: 'top left',
+        }}
+      >
+        <img
+          src={bgUrl}
+          alt=""
+          aria-hidden
+          draggable={false}
+          style={{
+            display: 'block',
+            width: CARD_W,
+            imageRendering: 'pixelated',
+            pointerEvents: 'none',
+            userSelect: 'none',
+            objectFit: 'none',
+            objectPosition: '0 0',
+          }}
+        />
+      </div>
+
+      {/* Gray content overlay (below title bar) */}
+      <div
+        style={{
+          position: 'absolute',
+          top: TITLE_H * scale,
+          left: 3 * scale,
+          width: (CARD_W - 6) * scale,
+          height: (CARD_H - TITLE_H) * scale,
+          background: '#c6c6c6',
+        }}
+      />
+
+      {/* Title */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 6 * scale,
+          left: 8 * scale,
+          fontSize,
+          fontFamily: "'Minecraftia', 'Minecraft', monospace",
+          color: '#404040',
+          lineHeight: 1,
+          pointerEvents: 'none',
+        }}
+      >
+        {guide.title}
       </div>
+
+      {/* Item icon */}
+      <div style={{ position: 'absolute', top: (TITLE_H + 3) * scale, left: 5 * scale }}>
+        <ItemCanvas
+          item={{ type: 0, name: itemName, displayName: guide.title, count: 1 }}
+          size={iconSize}
+          style={{ pointerEvents: 'none' }}
+        />
+      </div>
+
+      {/* Description text */}
+      {guide.description && (
+        <div style={{
+          position: 'absolute',
+          top: (TITLE_H + 3) * scale,
+          left: (5 + 18) * scale,
+          right: 8 * scale,
+          fontSize,
+          fontFamily: "'Minecraftia', 'Minecraft', monospace",
+          color: '#404040',
+          lineHeight: 1.6,
+          pointerEvents: 'none',
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-word',
+        }}>
+          {guide.description}
+        </div>
+      )}
+
+      {/* Minecraft Wiki link */}
+      <a
+        href={wikiUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        style={{
+          position: 'absolute',
+          bottom: 4 * scale,
+          right: 8 * scale,
+          fontSize,
+          fontFamily: "'Minecraftia', 'Minecraft', monospace",
+          color: '#3366bb',
+          textDecoration: 'underline',
+          cursor: 'pointer',
+        }}
+      >
+        Minecraft Wiki
+      </a>
     </div>
   )
 }