@rpg-engine/long-bow 0.3.95 → 0.3.96

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.3.95",
+  "version": "0.3.96",
   "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.7.51",
+    "@rpg-engine/shared": "^0.7.82",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/Item/Cards/ItemInfo.tsx

@@ -99,6 +99,16 @@ export const ItemInfo: React.FC<IItemInfoProps> = ({
     return statistics;
   };
 
+  const renderEntityEffects = () => {
+    if (!item.entityEffects || !item.entityEffectChance) return null;
+
+    return item.entityEffects.map((effect, index) => (
+      <Statistic key={index} $isSpecial>
+        {effect[0].toUpperCase() + effect.slice(1)} ({item.entityEffectChance}%)
+      </Statistic>
+    ));
+  };
+
   const renderAvaibleSlots = () => {
     if (!item.allowedEquipSlotType) return null;
 
@@ -130,8 +140,26 @@ export const ItemInfo: React.FC<IItemInfoProps> = ({
         <AllowedSlots>{renderAvaibleSlots()}</AllowedSlots>
       </Header>
 
+      {item.minRequirements && (
+        <LevelRequirement>
+          <div>Level: {item.minRequirements.level}</div>
+          <div>
+            {item.minRequirements.skill.name[0].toUpperCase() +
+              item.minRequirements.skill.name.slice(1)}
+            : {item.minRequirements.skill.level}
+          </div>
+        </LevelRequirement>
+      )}
+
       {renderStatistics()}
-      {item.isTwoHanded && <Statistic>Two handed</Statistic>}
+      {renderEntityEffects()}
+      {item.usableEffectDescription && (
+        <Statistic $isSpecial>{item.usableEffectDescription}</Statistic>
+      )}
+      {item.equippedBuffDescription && (
+        <Statistic $isSpecial>{item.equippedBuffDescription}</Statistic>
+      )}
+      {item.isTwoHanded && <Statistic $isSpecial>Two handed</Statistic>}
 
       <Description>{item.description}</Description>
 
@@ -159,9 +187,9 @@ const Container = styled.div<{ item: IItem }>`
   font-size: ${uiFonts.size.small};
   border: 3px solid ${({ item }) => rarityColor(item) ?? uiColors.lightGray};
   height: max-content;
-  width: 15rem;
+  width: 18rem;
 
-  @media (max-width: 580px) {
+  @media (max-width: 640px) {
     width: 80vw;
   }
 `;
@@ -189,9 +217,17 @@ const Type = styled.div`
   color: ${uiColors.lightGray};
 `;
 
-const Statistic = styled.div`
+const LevelRequirement = styled.div`
+  font-size: ${uiFonts.size.small};
+  margin-top: 0.2rem;
+  margin-bottom: 1rem;
+  color: ${uiColors.orange};
+`;
+
+const Statistic = styled.div<{ $isSpecial?: boolean }>`
   margin-bottom: 0.4rem;
-  width: max-content;
+  width: 100%;
+  color: ${({ $isSpecial }) => ($isSpecial ? uiColors.darkYellow : 'inherit')};
 
   .label {
     display: inline-block;

package/src/components/Item/Cards/ItemInfoDisplay.tsx

@@ -66,7 +66,13 @@ export const ItemInfoDisplay: React.FC<IItemInfoDisplayProps> = ({
         itemSubTypeCamelCase
       );
 
-      const itemFromEquipment = equipmentSet[slotType] as IItem;
+      const itemSubTypeFromEquipment = Object.values(equipmentSet).find(
+        item => camelCase(item?.subType ?? '') === itemSubTypeCamelCase
+      );
+
+      const itemFromEquipment = itemSubTypeFromEquipment
+        ? itemSubTypeFromEquipment
+        : (equipmentSet[slotType] as IItem);
 
       if (
         itemFromEquipment &&
@@ -109,8 +115,9 @@ const Flex = styled.div<{ $isMobile?: boolean }>`
   display: flex;
   gap: 0.5rem;
   flex-direction: ${({ $isMobile }) => ($isMobile ? 'row-reverse' : 'row')};
+  align-items: center;
 
-  @media (max-width: 580px) {
+  @media (max-width: 640px) {
     flex-direction: column-reverse;
     align-items: center;
   }

package/src/components/Item/Cards/MobileItemTooltip.tsx

@@ -113,7 +113,7 @@ const Container = styled.div<{ scale: number }>`
     animation: fadeOut 0.1s forwards;
   }
 
-  @media (max-width: 580px) {
+  @media (max-width: 640px) {
     flex-direction: column;
   }
 `;
@@ -124,7 +124,7 @@ const OptionsContainer = styled.div`
   gap: 0.5rem;
   flex-wrap: wrap;
 
-  @media (max-width: 580px) {
+  @media (max-width: 640px) {
     flex-direction: row;
     justify-content: center;
   }
@@ -143,7 +143,7 @@ const Option = styled.button`
     background-color: #555;
   }
 
-  @media (max-width: 580px) {
+  @media (max-width: 640px) {
     padding: 1rem 0.5rem;
   }
 `;

package/src/constants/uiColors.ts

@@ -15,6 +15,6 @@ export const uiColors = {
   blue: '#597DCE',
   darkBlue: '#30346D',
   brown: '#854C30',
-  lightGreen: '#88ed1c',
+  lightGreen: '#66cd1c',
   brownGreen: '#346524',
 };

package/src/mocks/equipmentSet.mocks.ts

@@ -383,7 +383,7 @@ export const equipmentSetMock: IEquipmentSet = {
   legs: undefined,
   boot: items.boot,
   leftHand: items.leftHand,
-  rightHand: undefined,
+  rightHand: items.rightHand,
   neck: undefined,
   ring: undefined,
   accessory: items.accessory,

package/src/mocks/itemContainer.mocks.ts

@@ -42,6 +42,16 @@ export const items: IItem[] = [
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     rarity: ItemRarities.Legendary,
+    minRequirements: {
+      level: 10,
+      skill: {
+        name: 'sword',
+        level: 5,
+      }
+    },
+    equippedBuffDescription: "Character speed +10%",
+    entityEffectChance: 50,
+    entityEffects: ['freezing']
   },
   {
     _id: '629acef1c7c8e8002ff73564',
@@ -530,6 +540,37 @@ export const items: IItem[] = [
     updatedAt: '2022-06-04T18:16:49.056Z',
     rarity: ItemRarities.Common,
   },
+  {
+    "type": ItemType.Consumable,
+    "subType": ItemSubType.Food,
+    "rarity": "Common",
+    "textureAtlas": "items",
+    "allowedEquipSlotType": [],
+    "maxStackSize": 100,
+    "isUsable": false,
+    "isStorable": true,
+    "isItemContainer": false,
+    "isSolid": false,
+    "requiredAmmoKeys": [],
+    "isTwoHanded": false,
+    "hasUseWith": false,
+    "entityEffects": [],
+    "entityEffectChance": 0,
+    "_id": "64529049d45546003b2c6c6d",
+    "key": "apple",
+    "texturePath": "foods/apple.png",
+    textureKey: 'apple',
+    isEquipable: false,
+    isStackable: true,
+    "name": "Apple",
+    "description": "A red apple.",
+    "weight": 0.05,
+    "stackQty": 16,
+    "attack": 0,
+    "defense": 0,
+    fullDescription: "",
+    usableEffectDescription: "Regenerates 10 HP and Mana 5 times"
+  }
 ];
 
 export const itemContainerMock: IItemContainer = {
@@ -553,6 +594,7 @@ export const itemContainerMock: IItemContainer = {
     12: items[12],
     13: items[13],
     14: items[14],
+    15: items[15],
     //remaining slots are considered null by default
   },
   allowedItemTypes: [],