@rpg-engine/long-bow 0.2.24 → 0.2.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.2.24",
+  "version": "0.2.25",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Item/Inventory/ItemSlot.tsx

@@ -9,6 +9,7 @@ import {
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
+import { getItemTextureKeyPath } from '../../../libs/ItemSlotHelper';
 import { RelativeListMenu } from '../../RelativeListMenu';
 import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 import { ItemTooltip } from '../Cards/ItemTooltip';
@@ -99,17 +100,35 @@ export const ItemSlot: React.FC<IProps> = observer(
       return undefined;
     };
 
+    // const getItemTextureKeyPath = (itemToRender: IItem) => {
+    //   const stackQty = itemToRender?.stackQty ?? 0;
+    //   let itemTexturePath = itemToRender.texturePath;
+
+    //   if (stackQty > 1) {
+    //     const txtExtension: string = itemToRender.texturePath.split('.')[1];
+    //     const txtDir: string = itemToRender.texturePath.split('/')[0];
+    //     const idx = stackQty >= 5 ? '5' : stackQty;
+    //     const newTexturePath = `${txtDir}/${itemToRender.textureKey}-qty-${idx}.${txtExtension}`;
+    //     const spriteData = atlasJSON.frames[newTexturePath];
+
+    //     if (spriteData !== undefined) {
+    //       itemTexturePath = newTexturePath;
+    //     }
+    //   }
+
+    //   return itemTexturePath;
+    // };
+
     const renderItem = (itemToRender: IItem | null) => {
       const element = [];
       if (itemToRender?.texturePath) {
-        console.table(itemToRender);
         element.push(
           <ErrorBoundary>
             <SpriteFromAtlas
               key={itemToRender._id}
               atlasIMG={atlasIMG}
               atlasJSON={atlasJSON}
-              spriteKey={itemToRender.texturePath}
+              spriteKey={getItemTextureKeyPath(itemToRender, atlasJSON)}
               imgScale={3}
             />
           </ErrorBoundary>
@@ -138,7 +157,7 @@ export const ItemSlot: React.FC<IProps> = observer(
               key={itemToRender._id}
               atlasIMG={atlasIMG}
               atlasJSON={atlasJSON}
-              spriteKey={itemToRender.texturePath}
+              spriteKey={getItemTextureKeyPath(itemToRender, atlasJSON)}
               imgScale={3}
             />
           </ErrorBoundary>

package/src/libs/ItemSlotHelper.ts

@@ -0,0 +1,21 @@
+import { IItem } from "@rpg-engine/shared";
+
+export const getItemTextureKeyPath = (itemToRender: IItem, atlasJSON: any) => {
+    const stackQty = itemToRender?.stackQty ?? 0;
+    let itemTexturePath = itemToRender.texturePath;
+
+    if (itemToRender.isStackable && stackQty > 1) {
+      const txtExtension: string = itemToRender.texturePath.split('.')[1];
+      const txtDir: string = itemToRender.texturePath.split('/')[0];
+      const idx = stackQty >= 5 ? '5' : stackQty;
+      const newTexturePath = `${txtDir}/${itemToRender.textureKey}-qty-${idx}.${txtExtension}`;
+      const spriteData = atlasJSON.frames[newTexturePath];
+
+      if (spriteData !== undefined) {
+        itemTexturePath = newTexturePath;
+      }
+    }
+
+    return itemTexturePath;
+};
+