minecraft-inventory 0.1.10 → 0.1.11

package/package.json

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

package/src/cache/blockRenderer.ts

@@ -4,7 +4,7 @@
  */
 
 const POOL_SIZE = 8
-const OUTPUT_SIZE = 32
+const OUTPUT_SIZE = 64
 
 const pool: HTMLCanvasElement[] = []
 const inUse = new Set<HTMLCanvasElement>()
@@ -59,42 +59,43 @@ export function renderBlockIcon(
         ctx.imageSmoothingEnabled = false
         ctx.clearRect(0, 0, OUTPUT_SIZE, OUTPUT_SIZE)
 
-        const s = OUTPUT_SIZE / 2 - 2 // face size with padding (14px at 32px canvas)
-        const ox = (OUTPUT_SIZE - 2 * s) / 2 // horizontal offset to center
-        const oy = (OUTPUT_SIZE - 2 * s) / 2 // vertical offset to center
+        // Parameters from the original minecraft-inventory-gui renderer
+        const A = 0.9   // horizontal compression (makes blocks narrower/taller)
+        const K = 0.5   // skew factor
+        const s = OUTPUT_SIZE / 2 - 2
+        const cubeWidth = 2 * A * s
+        const cubeHeight = 2 * K * s + s
+        const ox = Math.round((OUTPUT_SIZE - cubeWidth) / 2)
+        const topY = Math.round((OUTPUT_SIZE - cubeHeight) / 2)
+        const ex = ox
+        const ey = topY + K * s
+
         const [tx, ty, tw, th] = top
         const [lx, ly, lw, lh] = left
         const [rx, ry, rw, rh] = right
 
-        // Enable smoothing for isometric transforms (better diagonal edges)
         ctx.imageSmoothingEnabled = true
         ctx.imageSmoothingQuality = 'high'
 
-        // Isometric cube using affine transforms.
-        // Face vertices for a cube centered in OUTPUT_SIZE × OUTPUT_SIZE:
-        //   Top:   (s+ox, oy) → (2s+ox, s/2+oy) → (s+ox, s+oy) → (ox, s/2+oy)
-        //   Left:  (ox, s/2+oy) → (s+ox, s+oy) → (s+ox, 2s+oy) → (ox, 3s/2+oy)
-        //   Right: (s+ox, s+oy) → (2s+ox, s/2+oy) → (2s+ox, 3s/2+oy) → (s+ox, 2s+oy)
-
         // Top face
         ctx.save()
-        ctx.setTransform(1, 0.5, -1, 0.5, s + ox, oy)
+        ctx.setTransform(A, -K, A, K, ex, ey)
         ctx.drawImage(image, tx, ty, tw, th, 0, 0, s, s)
         ctx.restore()
 
-        // Left face (darkened)
+        // Left face (lightly darkened)
         ctx.save()
-        ctx.setTransform(1, 0.5, 0, 1, ox, s / 2 + oy)
+        ctx.setTransform(A, K, 0, 1, ex, ey)
         ctx.drawImage(image, lx, ly, lw, lh, 0, 0, s, s)
-        ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.35)'
         ctx.fillRect(0, 0, s, s)
         ctx.restore()
 
-        // Right face (slightly darkened)
+        // Right face (darkened — light comes from upper-left)
         ctx.save()
-        ctx.setTransform(1, -0.5, 0, 1, s + ox, s + oy)
+        ctx.setTransform(A, -K, 0, 1, A * s + ex, K * s + ey)
         ctx.drawImage(image, rx, ry, rw, rh, 0, 0, s, s)
-        ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'
         ctx.fillRect(0, 0, s, s)
         ctx.restore()
 

package/src/components/InventoryOverlay/InventoryOverlay.tsx

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