@rpg-engine/long-bow 0.5.13 → 0.5.14

package/package.json

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

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

@@ -13,7 +13,6 @@ import { ItemQuantitySelector } from './ItemQuantitySelector';
 
 import { IPosition } from '../../../types/eventTypes';
 import ModalPortal from '../../Abstractions/ModalPortal';
-import SelectArrow from '../../Arrow/SelectArrow';
 import { ShortcutsSetter } from '../../Shortcuts/ShortcutsSetter';
 import { ItemSlot } from './ItemSlot';
 
@@ -82,15 +81,12 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   onPositionChangeEnd,
   onPositionChangeStart,
 }) => {
-  const MAX_SLOTS_PER_PAGE = 20;
   const [quantitySelect, setQuantitySelect] = useState({
     isOpen: false,
     maxQuantity: 1,
-    callback: (_quantity: number) => { },
+    callback: (_quantity: number) => {},
   });
   const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
-  const [currentPage, setCurrentPage] = useState(1);
-  const totalPages = Math.ceil(itemContainer.slotQty / MAX_SLOTS_PER_PAGE);
 
   const handleSetShortcut = (item: IItem, index: number) => {
     if (item.type === ItemType.Consumable || item.type === ItemType.Tool) {
@@ -100,11 +96,8 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
 
   const onRenderSlots = () => {
     const slots = [];
-    const start = (currentPage - 1) * MAX_SLOTS_PER_PAGE;
-    const end = start + MAX_SLOTS_PER_PAGE;
 
-    for (let i = start; i < end && i < itemContainer.slotQty; i++) {
-      console.log(itemContainer)
+    for (let i = 0; i < itemContainer.slotQty; i++) {
       slots.push(
         <ItemSlot
           isContextMenuDisabled={disableContextMenu}
@@ -163,14 +156,6 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
     return slots;
   };
 
-  const goToNextPage = () => {
-    setCurrentPage(current => Math.min(current + 1, totalPages));
-  };
-
-  const goToPreviousPage = () => {
-    setCurrentPage(current => Math.max(current - 1, 1));
-  };
-
   return (
     <>
       <SlotsContainer
@@ -196,32 +181,6 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
         <ItemsContainer className="item-container-body">
           {onRenderSlots()}
         </ItemsContainer>
-        {totalPages > 1 && (
-          <ArrowContainer>
-            {currentPage > 1 && (
-              <SelectArrow
-                className='arrow .arrow-up'
-                direction="left"
-                onPointerDown={() => {
-                  if (currentPage > 1) {
-                    goToPreviousPage();
-                  }
-                }}
-              />
-            )}
-            {currentPage < totalPages && (
-              <SelectArrow
-                className='arrow .arrow-down'
-                direction="right"
-                onPointerDown={() => {
-                  if (currentPage < totalPages) {
-                    goToNextPage();
-                  }
-                }}
-              />
-            )}
-          </ArrowContainer>
-        )}
       </SlotsContainer>
       {quantitySelect.isOpen && (
         <ModalPortal>
@@ -233,7 +192,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
                 setQuantitySelect({
                   isOpen: false,
                   maxQuantity: 1,
-                  callback: () => { },
+                  callback: () => {},
                 });
               }}
               onClose={() => {
@@ -241,7 +200,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
                 setQuantitySelect({
                   isOpen: false,
                   maxQuantity: 1,
-                  callback: () => { },
+                  callback: () => {},
                 });
               }}
             />
@@ -270,17 +229,3 @@ const QuantitySelectorContainer = styled.div`
   align-items: center;
   background-color: rgba(0, 0, 0, 0.5);
 `;
-
-const ArrowContainer = styled.div`
-  margin-top: 10px;
-  margin-bottom: 30px;
-  /* Aplica a margem ao primeiro span (seta para a esquerda) */
-  span:first-child {
-    margin-left: 20px;
-  }
-
-  /* Aplica a margem ao último span (seta para a direita) */
-  span:last-child {
-    margin-right: 20px;
-  }
-`;

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

@@ -2,6 +2,7 @@ import {
   getItemTextureKeyPath,
   IEquipmentSet,
   ITradeResponseItem,
+  UserAccountTypes,
 } from '@rpg-engine/shared';
 import capitalize from 'lodash/capitalize';
 import React from 'react';
@@ -23,6 +24,7 @@ export interface ITradeComponentProps {
   selectedQty: number;
   equipmentSet?: IEquipmentSet | null;
   scale?: number;
+  isBuy?: boolean;
 }
 
 const outerQty = 10;
@@ -35,6 +37,7 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
   selectedQty,
   equipmentSet,
   scale,
+  isBuy,
 }) => {
   const onLeftClick = (qty = 1) => {
     onQuantityChange(traderItem, Math.max(0, selectedQty - qty));
@@ -47,6 +50,46 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
     );
   };
 
+  const renderAccountTypeIndicator = () => {
+    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 (
+            <PremiumLabel
+              backgroundColor={backgroundColor}
+              textColor={textColor}
+              key={accountType}
+            >
+              {capitalize(accountType) + ' PA'}
+            </PremiumLabel>
+          );
+        }
+        return null;
+      });
+    }
+    return null;
+  };
+
   return (
     <ItemWrapper>
       <ItemIconContainer>
@@ -84,6 +127,7 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
             </Ellipsis>
           </p>
           <p>${traderItem.price}</p>
+          <p>{renderAccountTypeIndicator()}</p>
         </NameValue>
       </ItemNameContainer>
       <QuantityContainer>
@@ -121,6 +165,20 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
   );
 };
 
+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;
+`;
+
 const StyledArrow = styled(SelectArrow)`
   margin: 40px;
 `;

package/src/components/TradingMenu/TradingMenu.tsx

@@ -110,6 +110,7 @@ export const TradingMenu: React.FC<ITradingMenu> = ({
                 selectedQty={qtyMap.get(tradeItem.key) ?? 0}
                 equipmentSet={equipmentSet}
                 scale={scale}
+                isBuy={isBuy()}
               />
             </ItemWrapper>
           ))}

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,43 +546,43 @@ 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 = {
   _id: '629ba0b6fe3f43002f58f23b',
   name: 'Item Container',
   owner: '629ba0b6fe3f43002f58f23b',
-  slotQty: 60,
+  slotQty: 20,
   slots: {
     0: items[0],
     1: items[1],
@@ -595,7 +600,6 @@ export const itemContainerMock: IItemContainer = {
     13: items[13],
     14: items[14],
     15: items[15],
-    21: items[15],
     //remaining slots are considered null by default
   },
   allowedItemTypes: [],