@rpg-engine/long-bow 0.2.46 → 0.2.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.2.46",
+  "version": "0.2.48",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.5.72",
+    "@rpg-engine/shared": "^0.5.74",
     "dayjs": "^1.11.2",
     "fs-extra": "^10.1.0",
     "lodash": "^4.17.21",

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

@@ -11,7 +11,9 @@ import { observer } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
+import { uiFonts } from '../../../constants/uiFonts';
 import { RelativeListMenu } from '../../RelativeListMenu';
+import { Ellipsis } from '../../shared/Ellipsis';
 import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 import { ItemTooltip } from '../Cards/ItemTooltip';
 import { ErrorBoundary } from './ErrorBoundary';
@@ -81,21 +83,26 @@ export const ItemSlot: React.FC<IProps> = observer(
       }
     }, [item]);
 
-    const getLeftPositionValue = (quantity: number) => {
-      if (quantity > 0 && quantity < 10) return '2.5rem';
-      else if (quantity > 9 && quantity < 100) return '2.0rem';
-      else if (quantity > 99) return '1rem';
-      return '2.5rem';
-    };
-
     const getStackInfo = (itemId: string, stackQty: number) => {
       // if (itemToRender?.isStackable && itemToRender?.stackQty) {
+
+      const isFractionalStackQty = stackQty % 1 !== 0;
+      const isLargerThan999 = stackQty > 999;
+
       if (stackQty > 1) {
         return (
-          <ItemQty left={getLeftPositionValue(stackQty)} key={`qty-${itemId}`}>
-            {' '}
-            {stackQty}{' '}
-          </ItemQty>
+          <ItemQtyContainer key={`qty-${itemId}`}>
+            <Ellipsis maxLines={1} maxWidth="48px">
+              <ItemQty
+                className={
+                  isFractionalStackQty || isLargerThan999 ? 'small' : 'regular'
+                }
+              >
+                {' '}
+                {stackQty}{' '}
+              </ItemQty>
+            </Ellipsis>
+          </ItemQtyContainer>
         );
       }
       return undefined;
@@ -233,11 +240,22 @@ const Container = styled.div`
   position: relative;
 `;
 
-interface IItemQtyProps {
-  left: string;
-}
-const ItemQty = styled.span<IItemQtyProps>`
+const ItemQtyContainer = styled.div`
   position: relative;
-  top: 1.5rem;
-  left: ${props => props.left};
+  width: 85%;
+  height: 16px;
+  top: 25px;
+  left: 2px;
+
+  display: flex;
+  justify-content: flex-end;
+`;
+
+const ItemQty = styled.span`
+  &.regular {
+    font-size: ${uiFonts.size.small};
+  }
+  &.small {
+    font-size: ${uiFonts.size.xsmall};
+  }
 `;

package/src/components/PropertySelect/PropertySelect.tsx

@@ -51,11 +51,13 @@ export const PropertySelect: React.FC<IPropertySelectProps> = ({
   return (
     <Container>
       <TextOverlay>
-        <Item>
-          <Ellipsis maxLines={1} maxWidth={200}>
-            {getCurrentSelectionName()}
-          </Ellipsis>
-        </Item>
+        <p>
+          <Item>
+            <Ellipsis maxLines={1} maxWidth="60%" center>
+              {getCurrentSelectionName()}
+            </Ellipsis>
+          </Item>
+        </p>
       </TextOverlay>
       <div className="rpgui-progress-track"></div>
 

package/src/components/TradingMenu/TradingItemRow.tsx

@@ -52,9 +52,11 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
       </ItemIconContainer>
       <ItemNameContainer>
         <NameValue>
-          <Ellipsis maxLines={1} maxWidth={250}>
-            {capitalize(traderItem.name)}
-          </Ellipsis>
+          <p>
+            <Ellipsis maxLines={1} maxWidth="250px">
+              {capitalize(traderItem.name)}
+            </Ellipsis>
+          </p>
           <p>${traderItem.price}</p>
         </NameValue>
       </ItemNameContainer>

package/src/components/shared/Ellipsis.tsx

@@ -4,8 +4,9 @@ import styled from 'styled-components';
 interface IProps {
   children: React.ReactNode;
   maxLines: 1 | 2 | 3;
-  maxWidth: number;
+  maxWidth: string;
   fontSize?: string;
+  center?: boolean;
 }
 
 export const Ellipsis = ({
@@ -13,29 +14,29 @@ export const Ellipsis = ({
   maxLines,
   maxWidth,
   fontSize,
+  center,
 }: IProps) => {
   return (
-    <Container maxWidth={maxWidth} fontSize={fontSize}>
-      <p className={`ellipsis-${maxLines}-lines`}>{children}</p>
+    <Container maxWidth={maxWidth} fontSize={fontSize} center={center}>
+      <div className={`ellipsis-${maxLines}-lines`}>{children}</div>
     </Container>
   );
 };
 
 interface IContainerProps {
-  maxWidth: number;
+  maxWidth?: string;
   fontSize?: string;
+  center?: boolean;
 }
 
 const Container = styled.div<IContainerProps>`
-  p {
-    font-size: ${props => props.fontSize || '1rem'};
-  }
-
   .ellipsis-1-lines {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    max-width: ${props => props.maxWidth}px;
+    max-width: ${props => props.maxWidth};
+
+    ${props => props.center && `margin: 0 auto;`}
   }
   .ellipsis-2-lines {
     display: -webkit-box;

package/src/mocks/itemContainer.mocks.ts

@@ -116,7 +116,7 @@ export const items: IItem[] = [
     isEquipable: false,
     isStackable: true,
     maxStackSize: 99,
-    stackQty: 13,
+    stackQty: 100,
     isUsable: true,
     isStorable: true,
     isTwoHanded: false,
@@ -148,7 +148,7 @@ export const items: IItem[] = [
     allowedEquipSlotType: [ItemSlotType.Inventory],
     isEquipable: false,
     isStackable: true,
-    maxStackSize: 999,
+    maxStackSize: 100,
     isTwoHanded: false,
 
     isUsable: true,
@@ -181,7 +181,7 @@ export const items: IItem[] = [
     allowedEquipSlotType: [ItemSlotType.Inventory],
     isEquipable: false,
     isStackable: true,
-    maxStackSize: 999,
+    maxStackSize: 100,
     stackQty: 32,
     isUsable: false,
     isStorable: true,
@@ -214,7 +214,7 @@ export const items: IItem[] = [
     allowedEquipSlotType: [ItemSlotType.Inventory],
     isEquipable: false,
     isStackable: true,
-    maxStackSize: 999,
+    maxStackSize: 100,
 
     isUsable: false,
     isStorable: true,
@@ -250,7 +250,7 @@ export const items: IItem[] = [
     allowedEquipSlotType: [ItemSlotType.Accessory],
     isEquipable: true,
     isStackable: true,
-    maxStackSize: 999,
+    maxStackSize: 100,
     stackQty: 1,
     isUsable: false,
     isStorable: true,
@@ -284,7 +284,7 @@ export const items: IItem[] = [
     allowedEquipSlotType: [ItemSlotType.Accessory],
     isEquipable: true,
     isStackable: true,
-    maxStackSize: 999,
+    maxStackSize: 100,
     stackQty: 2,
     isUsable: false,
     isStorable: true,
@@ -318,7 +318,7 @@ export const items: IItem[] = [
     allowedEquipSlotType: [ItemSlotType.Accessory],
     isEquipable: true,
     isStackable: true,
-    maxStackSize: 999,
+    maxStackSize: 100,
     stackQty: 3,
     isUsable: false,
     isStorable: true,
@@ -352,7 +352,7 @@ export const items: IItem[] = [
     allowedEquipSlotType: [ItemSlotType.Accessory],
     isEquipable: true,
     isStackable: true,
-    maxStackSize: 999,
+    maxStackSize: 100,
     stackQty: 4,
     isUsable: false,
     isStorable: true,
@@ -386,7 +386,7 @@ export const items: IItem[] = [
     allowedEquipSlotType: [ItemSlotType.Accessory],
     isEquipable: true,
     isStackable: true,
-    maxStackSize: 999,
+    maxStackSize: 100,
     stackQty: 5,
     isUsable: false,
     isStorable: true,
@@ -420,8 +420,42 @@ export const items: IItem[] = [
     allowedEquipSlotType: [],
     isEquipable: true,
     isStackable: true,
-    maxStackSize: 999,
-    stackQty: 1345,
+    maxStackSize: 100,
+    stackQty: 9999,
+    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',
+  },
+  {
+    _id: '392acek4j7c8e80d2fs60404',
+    hasUseWith: false,
+    type: ItemType.Other,
+    subType: ItemSubType.Other,
+    textureAtlas: 'items',
+    allowedEquipSlotType: [],
+    isEquipable: true,
+    isStackable: true,
+    maxStackSize: 100,
+    stackQty: 3.75,
     isUsable: false,
     isStorable: true,
     isTwoHanded: false,
@@ -466,7 +500,7 @@ export const itemContainerMock: IItemContainer = {
     10: items[10],
     11: items[11],
     12: items[12],
-    // 13: items[13],
+    13: items[13],
     // 14: items[14],
     //remaining slots are considered null by default
   },