@rpg-engine/long-bow 0.5.12 → 0.5.14

package/package.json

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

package/src/components/Spellbook/mockSpells.ts

@@ -23,6 +23,7 @@ export const mockSpells: ISpell[] = [
     targetHitAnimationKey: AnimationEffectKeys.Rooted,
     projectileAnimationKey: AnimationEffectKeys.Energy,
     usableEffect: () => {},
+    onlyPremiumAccountType: [],
   },
   {
     key: (SpellsBlueprint.ArrowCreationSpell + '2') as SpellsBlueprint,
@@ -41,6 +42,7 @@ export const mockSpells: ISpell[] = [
     targetHitAnimationKey: AnimationEffectKeys.Rooted,
     projectileAnimationKey: AnimationEffectKeys.Energy,
     usableEffect: () => {},
+    onlyPremiumAccountType: [],
   },
   {
     key: (SpellsBlueprint.ArrowCreationSpell + '3') as SpellsBlueprint,
@@ -59,6 +61,7 @@ export const mockSpells: ISpell[] = [
     targetHitAnimationKey: AnimationEffectKeys.Rooted,
     projectileAnimationKey: AnimationEffectKeys.Energy,
     usableEffect: () => {},
+    onlyPremiumAccountType: [],
   },
   {
     key: (SpellsBlueprint.ArrowCreationSpell + '4') as SpellsBlueprint,
@@ -77,6 +80,7 @@ export const mockSpells: ISpell[] = [
     targetHitAnimationKey: AnimationEffectKeys.Rooted,
     projectileAnimationKey: AnimationEffectKeys.Energy,
     usableEffect: () => {},
+    onlyPremiumAccountType: [],
   },
   {
     key: (SpellsBlueprint.ArrowCreationSpell + '5') as SpellsBlueprint,
@@ -95,5 +99,6 @@ export const mockSpells: ISpell[] = [
     targetHitAnimationKey: AnimationEffectKeys.Rooted,
     projectileAnimationKey: AnimationEffectKeys.Energy,
     usableEffect: () => {},
+    onlyPremiumAccountType: [],
   },
 ];

package/src/components/TradingMenu/TradingItemRow.tsx

@@ -51,35 +51,41 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
   };
 
   const renderAccountTypeIndicator = () => {
-    if (isBuy) {
-      switch (traderItem?.accountType) {
-        case UserAccountTypes.PremiumBronze:
-          return (
-            <div>
-              <SmallCircle color="#CD7F32" /> Account
-            </div>
-          );
-        case UserAccountTypes.PremiumSilver:
-          return (
-            <div>
-              <SmallCircle color="#C0C0C0" /> Account
-            </div>
-          );
-        case UserAccountTypes.PremiumGold:
-          return (
-            <div>
-              <SmallCircle color="#FFD700" /> Account
-            </div>
-          );
-        case UserAccountTypes.PremiumUltimate:
+    if (isBuy && traderItem.canBePurchasedOnlyByPremiumPlans) {
+      return traderItem.canBePurchasedOnlyByPremiumPlans.map(accountType => {
+        if (accountType !== UserAccountTypes.Free) {
+          let backgroundColor;
+          let textColor = 'black';
+
+          switch (accountType) {
+            case UserAccountTypes.PremiumBronze:
+              backgroundColor = '#CD7F32';
+              break;
+            case UserAccountTypes.PremiumSilver:
+              backgroundColor = '#C0C0C0';
+              break;
+            case UserAccountTypes.PremiumGold:
+              backgroundColor = '#FFD700';
+              break;
+            case UserAccountTypes.PremiumUltimate:
+              backgroundColor = '#002E99';
+              break;
+            default:
+              return null;
+          }
+
           return (
-            <div>
-              <SmallCircle color="#002E99" /> Account
-            </div>
+            <PremiumLabel
+              backgroundColor={backgroundColor}
+              textColor={textColor}
+              key={accountType}
+            >
+              {capitalize(accountType) + ' PA'}
+            </PremiumLabel>
           );
-        default:
-          return null;
-      }
+        }
+        return null;
+      });
     }
     return null;
   };
@@ -118,10 +124,10 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
           <p>
             <Ellipsis maxLines={1} maxWidth="250px">
               {capitalize(traderItem.name)}
-              {renderAccountTypeIndicator()}
             </Ellipsis>
           </p>
           <p>${traderItem.price}</p>
+          <p>{renderAccountTypeIndicator()}</p>
         </NameValue>
       </ItemNameContainer>
       <QuantityContainer>
@@ -159,14 +165,18 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
   );
 };
 
-// Styled component for the small circle
-const SmallCircle = styled.span<{ color: string }>`
+const PremiumLabel = styled.span<{
+  backgroundColor: string;
+  textColor: string;
+}>`
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  color: ${({ textColor }) => textColor};
+  font-weight: bold;
+  padding: 2px 5px;
+  border-radius: 5px;
+  margin-right: 5px;
+  margin-bottom: 5px;
   display: inline-block;
-  margin-left: 8px;
-  height: 10px;
-  width: 10px;
-  background-color: ${({ color }) => color};
-  border-radius: 50%;
 `;
 
 const StyledArrow = styled(SelectArrow)`

package/src/mocks/itemContainer.mocks.ts

@@ -5,6 +5,7 @@ import {
   ItemSlotType,
   ItemSubType,
   ItemType,
+  UserAccountTypes,
 } from '@rpg-engine/shared';
 
 export const items: IItem[] = [
@@ -42,16 +43,20 @@ export const items: IItem[] = [
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     rarity: ItemRarities.Legendary,
+    canBePurchasedOnlyByPremiumPlans: [
+      UserAccountTypes.PremiumGold,
+      UserAccountTypes.PremiumUltimate,
+    ],
     minRequirements: {
       level: 10,
       skill: {
         name: 'sword',
         level: 5,
-      }
+      },
     },
-    equippedBuffDescription: "Character speed +10%",
+    equippedBuffDescription: 'Character speed +10%',
     entityEffectChance: 50,
-    entityEffects: ['freezing']
+    entityEffects: ['freezing'],
   },
   {
     _id: '629acef1c7c8e8002ff73564',
@@ -541,36 +546,36 @@ export const items: IItem[] = [
     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",
+    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"
-  }
+    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 = {