@rpg-engine/long-bow 0.2.23 → 0.2.25

package/package.json

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

package/src/components/Character/CharacterSelection.tsx

@@ -5,6 +5,7 @@ import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 
 import entitiesJSON from '../../mocks/atlas/entities/entities.json';
 import entitiesIMG from '../../mocks/atlas/entities/entities.png';
+import { ErrorBoundary } from '../Item/Inventory/ErrorBoundary';
 import PropertySelect, {
   IPropertiesProps,
 } from '../PropertySelect/PropertySelect';
@@ -56,17 +57,24 @@ export const CharacterSelection: React.FC<ICharacterSelectionProps> = ({
   return (
     <Container>
       {selectedSpriteKey && (
-        <SpriteFromAtlas
-          spriteKey={selectedSpriteKey}
-          atlasIMG={entitiesIMG}
-          atlasJSON={entitiesJSON}
-          imgScale={4}
-          height={50}
-          width={50}
-          containerStyle={{
-            padding: '25px 10px 5px 27px',
-          }}
-        />
+        <ErrorBoundary>
+          <SpriteFromAtlas
+            spriteKey={selectedSpriteKey}
+            atlasIMG={entitiesIMG}
+            atlasJSON={entitiesJSON}
+            imgScale={4}
+            height={80}
+            width={64}
+            containerStyle={{
+              display: 'flex',
+              alignItems: 'center',
+              paddingBottom: '15px',
+            }}
+            imgStyle={{
+              left: '22px',
+            }}
+          />
+        </ErrorBoundary>
       )}
       <PropertySelect
         availableProperties={propertySelectValues}

package/src/components/Equipment/EquipmentSet.tsx

@@ -24,6 +24,8 @@ export interface IEquipmentSetProps {
   onSelected?: (optionId: string) => void;
   initialPosition?: { x: number; y: number };
   type: ItemContainerType | null;
+  atlasIMG: any;
+  atlasJSON: any;
 }
 
 export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
@@ -32,6 +34,8 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
   onMouseOver,
   onSelected,
   onItemClick,
+  atlasIMG,
+  atlasJSON,
 }) => {
   const {
     neck,
@@ -98,6 +102,8 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
           onSelected={(optionId: string) => {
             if (onSelected) onSelected(optionId);
           }}
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
         />
       );
     });

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

@@ -0,0 +1,43 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import atlasJSON from '../../../mocks/atlas/items/items.json';
+import atlasIMG from '../../../mocks/atlas/items/items.png';
+import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
+
+interface Props {
+  children?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+  };
+
+  public static getDerivedStateFromError(_: Error): State {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('Uncaught error:', error, errorInfo);
+    console.log('quelquer cois');
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <SpriteFromAtlas
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          spriteKey={'others/no-image.png'}
+          imgScale={3}
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}

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

@@ -16,6 +16,8 @@ export interface IItemContainerProps {
   onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
   onSelected?: (optionId: string, item: IItem) => void;
   type: ItemContainerType;
+  atlasJSON: any;
+  atlasIMG: any;
 }
 
 export const ItemContainer: React.FC<IItemContainerProps> = ({
@@ -25,6 +27,8 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   onSelected,
   onItemClick,
   type,
+  atlasJSON,
+  atlasIMG,
 }) => {
   const onRenderSlots = () => {
     const slots = [];
@@ -45,6 +49,8 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
           onSelected={(optionId: string, item: IItem) => {
             if (onSelected) onSelected(optionId, item);
           }}
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
         />
       );
     }

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

@@ -9,11 +9,11 @@ import {
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import atlasJSON from '../../../mocks/atlas/items/items.json';
-import atlasIMG from '../../../mocks/atlas/items/items.png';
+import { getItemTextureKeyPath } from '../../../libs/ItemSlotHelper';
 import { RelativeListMenu } from '../../RelativeListMenu';
 import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 import { ItemTooltip } from '../Cards/ItemTooltip';
+import { ErrorBoundary } from './ErrorBoundary';
 import { generateContextMenu, IContextMenuItem } from './itemContainerHelper';
 
 const EquipmentSlotSpriteByType: any = {
@@ -49,6 +49,8 @@ interface IProps {
     itemContainerType: ItemContainerType | null,
     item: IItem
   ) => void;
+  atlasJSON: any;
+  atlasIMG: any;
 }
 
 export const ItemSlot: React.FC<IProps> = observer(
@@ -61,6 +63,8 @@ export const ItemSlot: React.FC<IProps> = observer(
     onMouseOut,
     onClick,
     onSelected,
+    atlasJSON,
+    atlasIMG,
   }) => {
     const [isTooltipVisible, setTooltipVisible] = useState(false);
 
@@ -96,18 +100,38 @@ 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(
-          <SpriteFromAtlas
-            key={itemToRender._id}
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            spriteKey={itemToRender.texturePath}
-            imgScale={3}
-          />
+          <ErrorBoundary>
+            <SpriteFromAtlas
+              key={itemToRender._id}
+              atlasIMG={atlasIMG}
+              atlasJSON={atlasJSON}
+              spriteKey={getItemTextureKeyPath(itemToRender, atlasJSON)}
+              imgScale={3}
+            />
+          </ErrorBoundary>
         );
       }
       const stackInfo = getStackInfo(
@@ -128,13 +152,15 @@ export const ItemSlot: React.FC<IProps> = observer(
       ) {
         const element = [];
         element.push(
-          <SpriteFromAtlas
-            key={itemToRender._id}
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            spriteKey={itemToRender.texturePath}
-            imgScale={3}
-          />
+          <ErrorBoundary>
+            <SpriteFromAtlas
+              key={itemToRender._id}
+              atlasIMG={atlasIMG}
+              atlasJSON={atlasJSON}
+              spriteKey={getItemTextureKeyPath(itemToRender, atlasJSON)}
+              imgScale={3}
+            />
+          </ErrorBoundary>
         );
         const stackInfo = getStackInfo(
           itemToRender?._id ?? '',
@@ -146,14 +172,16 @@ export const ItemSlot: React.FC<IProps> = observer(
         return element;
       } else {
         return (
-          <SpriteFromAtlas
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            spriteKey={EquipmentSlotSpriteByType[slotSpriteMask!]}
-            imgScale={3}
-            grayScale={true}
-            opacity={0.4}
-          />
+          <ErrorBoundary>
+            <SpriteFromAtlas
+              atlasIMG={atlasIMG}
+              atlasJSON={atlasJSON}
+              spriteKey={EquipmentSlotSpriteByType[slotSpriteMask!]}
+              imgScale={3}
+              grayScale={true}
+              opacity={0.4}
+            />
+          </ErrorBoundary>
         );
       }
     };

package/src/components/SkillProgressBar.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import styled from 'styled-components';
 import atlasJSON from '../mocks/atlas/items/items.json';
 import atlasIMG from '../mocks/atlas/items/items.png';
+import { ErrorBoundary } from './Item/Inventory/ErrorBoundary';
 import { SpriteFromAtlas } from './shared/SpriteFromAtlas';
 import { SimpleProgressBar } from './SimpleProgressBar';
 
@@ -38,14 +39,16 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
         <ProgressIconContainer>
           {atlasIMG && atlasJSON ? (
             <SpriteContainer>
-              <SpriteFromAtlas
-                atlasIMG={atlasIMG}
-                atlasJSON={atlasJSON}
-                spriteKey={texturePath}
-                imgScale={1}
-                grayScale
-                opacity={0.5}
-              />
+              <ErrorBoundary>
+                <SpriteFromAtlas
+                  atlasIMG={atlasIMG}
+                  atlasJSON={atlasJSON}
+                  spriteKey={texturePath}
+                  imgScale={1}
+                  grayScale
+                  opacity={0.5}
+                />
+              </ErrorBoundary>
             </SpriteContainer>
           ) : (
             <></>

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;
+};
+