@rpg-engine/long-bow 0.2.92 → 0.2.94

package/package.json

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

package/src/components/Character/CharacterSelection.tsx

@@ -24,12 +24,15 @@ export const CharacterSelection: React.FC<ICharacterSelectionProps> = ({
   availableCharacters,
   onChange,
 }) => {
-  const propertySelectValues = availableCharacters.map(item => {
-    return {
-      id: item.textureKey,
-      name: item.name,
-    };
-  });
+  const randomSort = () => 0.5 - Math.random();
+  const propertySelectValues = availableCharacters
+    .sort(randomSort)
+    .map(item => {
+      return {
+        id: item.textureKey,
+        name: item.name,
+      };
+    });
 
   const [selectedValue, setSelectedValue] = useState<IPropertiesProps>();
   const [selectedSpriteKey, setSelectedSpriteKey] = useState('');
@@ -38,6 +41,8 @@ export const CharacterSelection: React.FC<ICharacterSelectionProps> = ({
     const textureKey = selectedValue ? selectedValue.id : '';
     const spriteKey = textureKey ? textureKey + '/down/standing/0.png' : '';
 
+    console.log(selectedValue);
+
     if (spriteKey === selectedSpriteKey) {
       return;
     }

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

@@ -122,23 +122,18 @@ export const ItemSlot: React.FC<IProps> = observer(
     }, [dropPosition]);
 
     const getStackInfo = (itemId: string, stackQty: number) => {
-      // if (itemToRender?.isStackable && itemToRender?.stackQty) {
-
       const isFractionalStackQty = stackQty % 1 !== 0;
       const isLargerThan999 = stackQty > 999;
 
+      let qtyClassName = 'regular';
+      if (isLargerThan999) qtyClassName = 'small';
+      if (isFractionalStackQty) qtyClassName = 'xsmall';
+
       if (stackQty > 1) {
         return (
           <ItemQtyContainer key={`qty-${itemId}`}>
             <Ellipsis maxLines={1} maxWidth="48px">
-              <ItemQty
-                className={
-                  isFractionalStackQty || isLargerThan999 ? 'small' : 'regular'
-                }
-              >
-                {' '}
-                {stackQty}{' '}
-              </ItemQty>
+              <ItemQty className={qtyClassName}> {stackQty} </ItemQty>
             </Ellipsis>
           </ItemQtyContainer>
         );
@@ -284,13 +279,10 @@ export const ItemSlot: React.FC<IProps> = observer(
               //@ts-ignore
               const classes: string[] = Array.from(e.target?.classList);
 
-              console.log(classes);
-
-              const isOutsideDrop = classes.some(elm => {
-                //elm matches ItemContainer string
-
-                return elm.includes('rpgui-content');
-              });
+              const isOutsideDrop =
+                classes.some(elm => {
+                  return elm.includes('rpgui-content');
+                }) || classes.length === 0;
 
               if (isOutsideDrop) {
                 setDropPosition({
@@ -426,4 +418,7 @@ const ItemQty = styled.span`
   &.small {
     font-size: ${uiFonts.size.xsmall};
   }
+  &.xsmall {
+    font-size: ${uiFonts.size.xxsmall};
+  }
 `;

package/src/mocks/itemContainer.mocks.ts

@@ -3,7 +3,7 @@ import {
   IItemContainer,
   ItemSlotType,
   ItemSubType,
-  ItemType,
+  ItemType
 } from '@rpg-engine/shared';
 
 export const items: IItem[] = [
@@ -455,7 +455,7 @@ export const items: IItem[] = [
     isEquipable: true,
     isStackable: true,
     maxStackSize: 100,
-    stackQty: 3.75,
+    stackQty: 203.23,
     isUsable: false,
     isStorable: true,
     isTwoHanded: false,
@@ -479,6 +479,40 @@ export const items: IItem[] = [
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
   },
+  {
+    _id: '392acek4j7casd0d2fs60404',
+    hasUseWith: false,
+    type: ItemType.Other,
+    subType: ItemSubType.Other,
+    textureAtlas: 'items',
+    allowedEquipSlotType: [],
+    isEquipable: true,
+    isStackable: true,
+    maxStackSize: 100,
+    stackQty: 345,
+    isUsable: false,
+    isStorable: true,
+    isTwoHanded: false,
+    layer: 1,
+    isItemContainer: true,
+    isSolid: false,
+    key: 'gold-coin',
+    texturePath: 'others/gold-coin.png',
+    textureKey: 'gold-coin',
+    name: 'gold-coin',
+    generateContainerSlots: 10,
+    description: 'You see a coin.',
+    attack: 7,
+    defense: 3,
+    weight: 13,
+    tiledId: 67,
+    x: 320,
+    y: 144,
+    scene: 'MainScene',
+    fullDescription: 'You see a stone. It is used with slingshot',
+    createdAt: '2022-06-04T03:18:09.335Z',
+    updatedAt: '2022-06-04T18:16:49.056Z',
+  }
 ];
 
 export const itemContainerMock: IItemContainer = {
@@ -501,7 +535,7 @@ export const itemContainerMock: IItemContainer = {
     11: items[11],
     12: items[12],
     13: items[13],
-    // 14: items[14],
+    14: items[14],
     //remaining slots are considered null by default
   },
   allowedItemTypes: [],