minecraft-inventory 0.1.0

package/src/components/InventoryWindow/InventoryBackground.tsx

@@ -0,0 +1,110 @@
+import React from 'react'
+import { useTextures } from '../../context/TextureContext'
+import { useScale } from '../../context/ScaleContext'
+import { MessageFormattedString } from '../Text/MessageFormattedString'
+import type { InventoryTypeDefinition } from '../../registry'
+
+interface InventoryBackgroundProps {
+  definition: InventoryTypeDefinition
+  children: React.ReactNode
+  title?: string
+}
+
+export function InventoryBackground({
+  definition,
+  children,
+  title,
+}: InventoryBackgroundProps) {
+  const textures = useTextures()
+  const { scale } = useScale()
+
+  const bgUrl = textures.getGuiTextureUrl(definition.backgroundTexture, definition.guiTextureVersion)
+  const w = definition.backgroundWidth * scale
+  const h = definition.backgroundHeight * scale
+
+  // Source dimensions from definition (e.g., 176x166) — clip to this region from texture
+  const srcW = definition.backgroundWidth
+  const srcH = definition.backgroundHeight
+
+  return (
+    <div
+      className="mc-inv-background"
+      style={{
+        position: 'relative',
+        width: w,
+        height: h,
+        imageRendering: 'pixelated',
+        display: 'inline-block',
+        outline: '1px solid rgba(255, 0, 0, 0.7)',
+        outlineOffset: 0,
+      }}
+    >
+      {/* Background texture wrapper — clips source to srcW×srcH, then scales */}
+      <div
+        className="mc-inv-background-wrapper"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: srcW,
+          height: srcH,
+          overflow: 'hidden',
+          transform: `scale(${scale})`,
+          transformOrigin: 'top left',
+        }}
+      >
+        {/* Background texture — render at natural size, clipped by wrapper overflow */}
+        <img
+          className="mc-inv-background-image"
+          src={bgUrl}
+          alt=""
+          aria-hidden
+          style={{
+            display: 'block',
+            width: srcW,
+            height: srcH,
+            imageRendering: 'pixelated',
+            pointerEvents: 'none',
+            userSelect: 'none',
+            // Clip to top-left srcW×srcH region (if texture is larger)
+            objectFit: 'none',
+            objectPosition: '0 0',
+          }}
+          draggable={false}
+        />
+      </div>
+
+      {/* Title */}
+      {title !== undefined && (
+        <div
+          className="mc-inv-background-title"
+          style={{
+            position: 'absolute',
+            top: 6 * scale,
+            left: 8 * scale,
+            fontSize: 7 * scale,
+            fontFamily: "'Minecraftia', 'Minecraft', monospace",
+            pointerEvents: 'none',
+            lineHeight: 1,
+          }}
+        >
+          <MessageFormattedString text={title} fallbackColor="#404040" />
+        </div>
+      )}
+
+      {/* Slot layer */}
+      <div
+        className="mc-inv-background-slots"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: w,
+          height: h,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/components/InventoryWindow/InventoryWindow.tsx

@@ -0,0 +1,120 @@
+import React, { useMemo } from 'react'
+import type { SlotState } from '../../types'
+import { getInventoryType } from '../../registry'
+import { useInventoryContext } from '../../context/InventoryContext'
+import { useScale } from '../../context/ScaleContext'
+import { useKeyboardShortcuts } from '../../hooks/useKeyboardShortcuts'
+import { Slot } from '../Slot'
+import { InventoryBackground } from './InventoryBackground'
+import { ProgressBar } from './ProgressBar'
+import { VillagerTradeList } from './VillagerTradeList'
+import { EnchantmentOptions } from './EnchantmentOptions'
+
+interface InventoryWindowProps {
+  type: string
+  title?: string
+  slots?: SlotState[]
+  properties?: Record<string, number>
+  className?: string
+  style?: React.CSSProperties
+  enableKeyboardShortcuts?: boolean
+}
+
+export function InventoryWindow({
+  type,
+  title,
+  slots: slotsProp,
+  properties = {},
+  className,
+  style,
+  enableKeyboardShortcuts = true,
+}: InventoryWindowProps) {
+  const def = getInventoryType(type)
+  const { windowState, getSlot } = useInventoryContext()
+  const { scale, slotSize, contentSize } = useScale()
+  // borderPx removed from slot positioning: registry coords already point to the item area
+  const borderPx = 0
+
+  useKeyboardShortcuts(enableKeyboardShortcuts)
+
+  const effectiveSlots = useMemo(() => {
+    if (slotsProp) return slotsProp
+    return windowState?.slots ?? []
+  }, [slotsProp, windowState])
+
+  const effectiveProperties = useMemo(() => {
+    return { ...properties, ...(windowState?.properties ?? {}) }
+  }, [properties, windowState])
+
+  if (!def) {
+    return (
+      <div style={{ color: 'red', padding: 8 }}>
+        Unknown inventory type: {type}
+      </div>
+    )
+  }
+
+  // Player inventory: don't show title (it's just the player's own inventory)
+  const effectiveTitle = type === 'player' ? undefined : (title ?? windowState?.title ?? def.title)
+  const isVillager = type === 'villager'
+  const isEnchanting = type === 'enchanting_table'
+
+  const resolveItem = (slotIndex: number) => {
+    const fromProp = effectiveSlots.find((s) => s.index === slotIndex)
+    if (fromProp) return fromProp.item
+    return getSlot(slotIndex)?.item ?? null
+  }
+
+  return (
+    <div
+      className={['mc-inv-root', className].filter(Boolean).join(' ')}
+      style={{ position: 'relative', display: 'inline-block', ...style }}
+    >
+      <InventoryBackground definition={def} title={effectiveTitle}>
+        {/* Render slots */}
+        {def.slots.map((slotDef) => (
+          <div
+            key={slotDef.index}
+            className="mc-inv-slot-wrapper"
+            style={{
+              position: 'absolute',
+              // Offset by borderPx to land inside the texture's slot cell (skip the 1px border)
+              left: slotDef.x * scale + borderPx,
+              top: slotDef.y * scale + borderPx,
+            }}
+          >
+            <Slot
+              index={slotDef.index}
+              item={resolveItem(slotDef.index)}
+              size={slotDef.size ? slotDef.size * scale - 2 * borderPx : contentSize}
+              resultSlot={slotDef.resultSlot}
+              label={slotDef.label}
+            />
+          </div>
+        ))}
+
+        {/* Progress bars */}
+        {def.progressBars?.map((pb) => (
+          <ProgressBar
+            key={pb.id}
+            definition={pb}
+            properties={effectiveProperties}
+            backgroundTexture={def.backgroundTexture}
+          />
+        ))}
+
+        {/* Villager trades */}
+        {isVillager && <VillagerTradeList />}
+
+        {/* Enchanting options */}
+        {isEnchanting && (
+          <EnchantmentOptions
+            properties={effectiveProperties}
+            x={60}
+            y={14}
+          />
+        )}
+      </InventoryBackground>
+    </div>
+  )
+}

package/src/components/InventoryWindow/ProgressBar.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { useTextures } from '../../context/TextureContext'
+import { useScale } from '../../context/ScaleContext'
+import type { ProgressBar as ProgressBarDef } from '../../types'
+
+interface ProgressBarProps {
+  definition: ProgressBarDef
+  properties: Record<string, number>
+  backgroundTexture: string
+}
+
+export function ProgressBar({ definition, properties, backgroundTexture }: ProgressBarProps) {
+  const textures = useTextures()
+  const { scale } = useScale()
+
+  const value = definition.getValue(properties)
+  const max = definition.getMax(properties)
+  const ratio = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0
+
+  const bgUrl = textures.getGuiTextureUrl(backgroundTexture)
+  const x = definition.x * scale
+  const y = definition.y * scale
+  const w = definition.width * scale
+  const h = definition.height * scale
+  const srcX = definition.textureX
+  const srcY = definition.textureY
+
+  let clipPath: string
+  let clipWidth = w
+  let clipHeight = h
+
+  switch (definition.direction) {
+    case 'right':
+      clipWidth = w * ratio
+      break
+    case 'left':
+      clipWidth = w * ratio
+      break
+    case 'up':
+      clipHeight = h * ratio
+      break
+    case 'down':
+      clipHeight = h * ratio
+      break
+  }
+
+  if (ratio <= 0) return null
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: x,
+        top: y,
+        width: clipWidth,
+        height: clipHeight,
+        overflow: 'hidden',
+        imageRendering: 'pixelated',
+        pointerEvents: 'none',
+      }}
+    >
+      <img
+        src={bgUrl}
+        alt=""
+        aria-hidden
+        style={{
+          position: 'absolute',
+          left: -srcX * scale,
+          top: -srcY * scale,
+          imageRendering: 'pixelated',
+          display: 'block',
+          maxWidth: 'none',
+        }}
+        draggable={false}
+      />
+    </div>
+  )
+}

package/src/components/InventoryWindow/VillagerTradeList.tsx

@@ -0,0 +1,136 @@
+import React, { useState } from 'react'
+import type { TradeOffer } from '../../types'
+import { useInventoryContext } from '../../context/InventoryContext'
+import { useScale } from '../../context/ScaleContext'
+import { ItemCanvas } from '../ItemCanvas'
+import { Tooltip } from '../Tooltip'
+
+interface TradeRowProps {
+  trade: TradeOffer
+  index: number
+  selected: boolean
+  onSelect(): void
+}
+
+function TradeRow({ trade, index, selected, onSelect }: TradeRowProps) {
+  const { scale } = useScale()
+  const { sendAction } = useInventoryContext()
+  const [hoveredItem, setHoveredItem] = useState<'in1' | 'in2' | 'out' | null>(null)
+  const slotSize = 16 * scale
+
+  const handleClick = () => {
+    onSelect()
+    sendAction({ type: 'trade', tradeIndex: index })
+  }
+
+  return (
+    <div
+      onClick={handleClick}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: scale * 2,
+        padding: `${scale * 2}px`,
+        background: selected ? '#555555' : trade.disabled ? '#222222' : '#404040',
+        border: `${scale}px solid ${selected ? '#aaaaaa' : '#666666'}`,
+        cursor: trade.disabled ? 'not-allowed' : 'pointer',
+        opacity: trade.disabled ? 0.6 : 1,
+        width: '100%',
+        boxSizing: 'border-box',
+      }}
+    >
+      {/* Input 1 */}
+      <div
+        style={{ position: 'relative' }}
+        onMouseEnter={() => setHoveredItem('in1')}
+        onMouseLeave={() => setHoveredItem(null)}
+      >
+        <ItemCanvas item={trade.inputItem1} size={slotSize} />
+        {hoveredItem === 'in1' && (
+          <Tooltip item={trade.inputItem1} visible />
+        )}
+      </div>
+
+      {/* Input 2 */}
+      {trade.inputItem2 && (
+        <div
+          style={{ position: 'relative' }}
+          onMouseEnter={() => setHoveredItem('in2')}
+          onMouseLeave={() => setHoveredItem(null)}
+        >
+          <ItemCanvas item={trade.inputItem2} size={slotSize} />
+          {hoveredItem === 'in2' && (
+            <Tooltip item={trade.inputItem2} visible />
+          )}
+        </div>
+      )}
+
+      {/* Arrow */}
+      <div style={{ color: '#aaaaaa', fontSize: scale * 8 }}>→</div>
+
+      {/* Output */}
+      <div
+        style={{ position: 'relative' }}
+        onMouseEnter={() => setHoveredItem('out')}
+        onMouseLeave={() => setHoveredItem(null)}
+      >
+        <ItemCanvas item={trade.outputItem} size={slotSize} />
+        {hoveredItem === 'out' && (
+          <Tooltip item={trade.outputItem} visible />
+        )}
+      </div>
+
+      {/* Uses */}
+      <div
+        style={{
+          marginLeft: 'auto',
+          fontSize: scale * 6,
+          color: trade.uses >= trade.maxUses ? '#ff5555' : '#aaaaaa',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {trade.uses}/{trade.maxUses}
+      </div>
+    </div>
+  )
+}
+
+export function VillagerTradeList() {
+  const { windowState } = useInventoryContext()
+  const { scale } = useScale()
+  const [selectedIndex, setSelectedIndex] = useState(0)
+
+  const villagerState = windowState as (typeof windowState & {
+    trades?: TradeOffer[]
+  }) | null
+
+  const trades = villagerState?.trades ?? []
+  if (trades.length === 0) return null
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: 4 * scale,
+        top: 18 * scale,
+        width: 100 * scale,
+        maxHeight: 130 * scale,
+        overflowY: 'auto',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: scale,
+        scrollbarWidth: 'thin',
+      }}
+    >
+      {trades.map((trade, i) => (
+        <TradeRow
+          key={i}
+          trade={trade}
+          index={i}
+          selected={selectedIndex === i}
+          onSelect={() => setSelectedIndex(i)}
+        />
+      ))}
+    </div>
+  )
+}

package/src/components/InventoryWindow/index.ts

@@ -0,0 +1,5 @@
+export { InventoryWindow } from './InventoryWindow'
+export { InventoryBackground } from './InventoryBackground'
+export { ProgressBar } from './ProgressBar'
+export { VillagerTradeList } from './VillagerTradeList'
+export { EnchantmentOptions } from './EnchantmentOptions'

package/src/components/ItemCanvas/ItemCanvas.tsx

@@ -0,0 +1,154 @@
+import React, { useState, useEffect, memo } from 'react'
+import type { ItemStack } from '../../types'
+import { useTextures } from '../../context/TextureContext'
+import { useScale } from '../../context/ScaleContext'
+import { useDataUrl, isTextureFailed } from '../../cache/textureCache'
+
+interface ItemCanvasProps {
+  item: ItemStack
+  size?: number
+  showCount?: boolean
+  showDurability?: boolean
+  className?: string
+  style?: React.CSSProperties
+}
+
+function getDurabilityColor(current: number, max: number): string {
+  const ratio = current / max
+  if (ratio > 0.6) return '#55ff55'
+  if (ratio > 0.3) return '#ffff55'
+  return '#ff5555'
+}
+
+/** Renders a single item: texture as <img>, count as <span>, durability as CSS bars. */
+export const ItemCanvas = memo(function ItemCanvas({
+  item,
+  size,
+  showCount = true,
+  showDurability = true,
+  className,
+  style,
+}: ItemCanvasProps) {
+  const textures = useTextures()
+  const { contentSize, pixelSize } = useScale()
+  const renderSize = size ?? contentSize
+
+  const primaryUrl = textures.getItemTextureUrl(item)
+  const fallbackUrl = item.name ? textures.getBlockTextureUrl(item) : null
+
+  // Load primary URL as cached data URL
+  const primaryDataUrl = useDataUrl(primaryUrl)
+  const primaryFailed = primaryDataUrl === null || isTextureFailed(primaryUrl)
+
+  // Load fallback only once primary is known to have failed
+  const [loadFallback, setLoadFallback] = useState(false)
+  useEffect(() => {
+    if (primaryFailed && fallbackUrl) setLoadFallback(true)
+    else setLoadFallback(false)
+  }, [primaryFailed, fallbackUrl])
+  const fallbackDataUrl = useDataUrl(loadFallback ? fallbackUrl : null)
+
+  const src = loadFallback ? fallbackDataUrl : primaryDataUrl
+  const failed = loadFallback
+    ? (fallbackDataUrl === null || isTextureFailed(fallbackUrl ?? ''))
+    : primaryFailed && !fallbackUrl
+
+  const hasDurability =
+    showDurability &&
+    item.durability !== undefined &&
+    item.maxDurability !== undefined &&
+    item.durability < item.maxDurability
+
+  const barColor = hasDurability
+    ? getDurabilityColor(item.durability!, item.maxDurability!)
+    : '#55ff55'
+
+  // Font size for count: ~38% of slot size, min 7px, shadow offset = 1 scaled pixel
+  const countFontSize = Math.max(7, Math.round(renderSize * 0.38))
+  const shadow = Math.max(1, Math.round(pixelSize))
+
+  return (
+    <div
+      className={['mc-inv-item', className].filter(Boolean).join(' ')}
+      style={{
+        position: 'relative',
+        width: renderSize,
+        height: renderSize,
+        flexShrink: 0,
+        ...style,
+      }}
+    >
+      {failed ? (
+        /* Missing texture — magenta/black checkerboard */
+        <div className="mc-inv-item-placeholder" style={{
+          width: '100%',
+          height: '100%',
+          background: 'linear-gradient(45deg, #8b008b 25%, #000 25%, #000 50%, #8b008b 50%, #8b008b 75%, #000 75%)',
+          backgroundSize: `${renderSize / 2}px ${renderSize / 2}px`,
+        }} />
+      ) : src ? (
+        /* Loaded — render cached data URL; no onError needed */
+        <img
+          className="mc-inv-item-image"
+          src={src}
+          alt=""
+          aria-hidden
+          draggable={false}
+          style={{
+            width: '100%',
+            height: '100%',
+            imageRendering: 'pixelated',
+            display: 'block',
+            pointerEvents: 'none',
+          }}
+        />
+      ) : 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',
+          }} />
+        </>
+      )}
+
+      {/* Item count */}
+      {showCount && item.count > 1 && (
+        <span className="mc-inv-item-count" style={{
+          position: 'absolute',
+          bottom: 0,
+          right: 0,
+          fontSize: countFontSize,
+          fontFamily: "'Minecraftia', 'Minecraft', monospace",
+          fontWeight: 'bold',
+          color: '#ffffff',
+          lineHeight: 1,
+          pointerEvents: 'none',
+          // Double shadow trick: dark shadow at +1,+1 for Minecraft count text look
+          textShadow: `${shadow}px ${shadow}px 0 rgba(0,0,0,0.6)`,
+          userSelect: 'none',
+          // Prevent wrapping
+          whiteSpace: 'nowrap',
+        }}>
+          {item.count}
+        </span>
+      )}
+    </div>
+  )
+})

package/src/components/ItemCanvas/index.ts

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

package/src/components/JEI/JEI.module.css

@@ -0,0 +1,37 @@
+.jei {
+  font-family: 'Minecraft', monospace;
+  image-rendering: pixelated;
+}
+
+.searchInput::placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.pageBtn {
+  background: #404040;
+  color: #ffffff;
+  border: 1px solid #666666;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  transition: background 0.1s;
+}
+
+.pageBtn:hover:not(:disabled) {
+  background: #555555;
+}
+
+.pageBtn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.pageBtnActive {
+  background: #8b6914;
+  color: #ffcc00;
+  border-color: #ffcc00;
+}
+
+.pageBtnActive:hover:not(:disabled) {
+  background: #a07820;
+}