@rpg-engine/long-bow 0.2.24 → 0.2.26

package/package.json

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

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

@@ -23,7 +23,6 @@ export class ErrorBoundary extends Component<Props, State> {
 
   public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
     console.error('Uncaught error:', error, errorInfo);
-    console.log('quelquer cois');
   }
 
   public render() {

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';
@@ -102,14 +103,13 @@ export const ItemSlot: React.FC<IProps> = observer(
     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 +138,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/components/shared/Ellipsis.tsx

@@ -7,7 +7,6 @@ interface IProps {
 }
 
 export const Ellipsis = ({ children, maxLines }: IProps) => {
-  console.log('Ellipsis Component 2');
   return (
     <Container>
       <div className={`ellipsis-${maxLines}-lines`}>{children}</div>

package/src/libs/ItemSlotHelper.ts

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