@rpg-engine/long-bow 0.4.6 → 0.4.8

package/src/components/Marketplace/{__mocks__ → filters}/index.tsx

@@ -1,25 +1,27 @@
-import { ItemRarities, ItemType } from '@rpg-engine/shared';
+import { ItemRarities, ItemSubType } from '@rpg-engine/shared';
 import React from 'react';
 import { IOptionsProps } from '../../Dropdown';
 
 export enum OrderByType {
   Name = 'Name',
-  Rarity = 'Rarity',
   Price = 'Price',
-  DateAdded = 'Date Added',
 }
 
-export const itemTypeOptions: IOptionsProps[] = Object.values(ItemType).map(
-  (itemType, index) => ({
+export const itemTypeOptions: IOptionsProps[] = [
+  'Type',
+  ...Object.keys(ItemSubType),
+]
+  .filter(type => type !== 'DeadBody')
+  .map((itemType, index) => ({
     id: index + 1,
     value: itemType,
     option: itemType,
-  })
-);
+  }));
 
-export const itemRarityOptions: IOptionsProps[] = Object.values(
-  ItemRarities
-).map((itemRarity, index) => ({
+export const itemRarityOptions: IOptionsProps[] = [
+  'Rarity',
+  ...Object.values(ItemRarities),
+].map((itemRarity, index) => ({
   id: index + 1,
   value: itemRarity,
   option: itemRarity,
@@ -30,7 +32,7 @@ export const orderByOptions: IOptionsProps[] = Object.values(
 ).flatMap((orderBy, index) => [
   {
     id: index * 2 + 1,
-    value: orderBy,
+    value: orderBy.toLowerCase(),
     option: (
       <>
         {orderBy}{' '}

package/src/components/Pager.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../constants/uiColors';
+import { uiFonts } from '../constants/uiFonts';
+
+interface PagerProps {
+  totalItems: number;
+  currentPage: number;
+  itemsPerPage: number;
+  onPageChange: (page: number) => void;
+}
+
+export const Pager: React.FC<PagerProps> = ({
+  totalItems,
+  currentPage,
+  itemsPerPage,
+  onPageChange,
+}) => {
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+  return (
+    <Container>
+      <p>Total items: {totalItems}</p>
+      <PagerContainer>
+        <button
+          disabled={currentPage === 1}
+          onPointerDown={() => onPageChange(Math.max(currentPage - 1, 1))}
+        >
+          {'<'}
+        </button>
+
+        <div className="rpgui-container framed-grey">{currentPage}</div>
+
+        <button
+          disabled={currentPage === totalPages}
+          onPointerDown={() =>
+            onPageChange(Math.min(currentPage + 1, totalPages))
+          }
+        >
+          {'>'}
+        </button>
+      </PagerContainer>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  p {
+    margin: 0;
+    font-size: ${uiFonts.size.xsmall};
+  }
+`;
+
+const PagerContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+
+  p {
+    margin: 0;
+  }
+
+  div {
+    color: white;
+  }
+
+  button {
+    width: 40px;
+    height: 40px;
+    background-color: ${uiColors.darkGray};
+    border: none;
+    border-radius: 5px;
+    color: white;
+
+    :hover {
+      background-color: ${uiColors.lightGray};
+    }
+
+    :disabled {
+      opacity: 0.5;
+    }
+
+    &.active {
+      background-color: ${uiColors.orange};
+      font-weight: bold;
+      color: black;
+    }
+  }
+`;

package/src/components/SkillProgressBar.tsx

@@ -1,9 +1,10 @@
 import { getSPForLevel } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
+import { uiColors } from '../constants/uiColors';
 import { ErrorBoundary } from './Item/Inventory/ErrorBoundary';
-import { SpriteFromAtlas } from './shared/SpriteFromAtlas';
 import { SimpleProgressBar } from './SimpleProgressBar';
+import { SpriteFromAtlas } from './shared/SpriteFromAtlas';
 
 export interface ISkillProgressBarProps {
   skillName: string;
@@ -15,6 +16,7 @@ export interface ISkillProgressBarProps {
   showSkillPoints?: boolean;
   atlasJSON: any;
   atlasIMG: any;
+  buffAndDebuff?: number;
 }
 
 export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
@@ -27,6 +29,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
   showSkillPoints = true,
   atlasIMG,
   atlasJSON,
+  buffAndDebuff,
 }) => {
   if (!skillPointsToNextLevel) {
     skillPointsToNextLevel = getSPForLevel(level + 1);
@@ -36,12 +39,55 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
 
   const ratio = (skillPoints / nextLevelSPWillbe) * 100;
 
+  const skillsBuffsCalc = () => {
+    if (buffAndDebuff) {
+      return 1 + buffAndDebuff / 100;
+    }
+    return;
+  };
+
   return (
     <>
       <ProgressTitle>
-        <TitleName>{skillName}</TitleName>
-        <ValueDisplay>lv {level}</ValueDisplay>
+        {buffAndDebuff !== undefined && (
+          <>
+            {buffAndDebuff > 0 ? (
+              <BuffAndDebuffContainer>
+                <TitleNameContainer>
+                  <TitleNameBuff>{skillName}</TitleNameBuff>
+                  <TitleNameBuff>
+                    lv {level} ({skillsBuffsCalc()})
+                  </TitleNameBuff>
+                </TitleNameContainer>
+                <TitleNameBuffContainer>
+                  <TitleNameBuff>(+{buffAndDebuff}%)</TitleNameBuff>
+                </TitleNameBuffContainer>
+              </BuffAndDebuffContainer>
+            ) : buffAndDebuff < 0 ? (
+              <>
+                <TitleNameContainer>
+                  <TitleNameDebuff>{skillName}</TitleNameDebuff>
+                  <TitleNameDebuff>
+                    lv {level} ({skillsBuffsCalc()})
+                  </TitleNameDebuff>
+                </TitleNameContainer>
+                <div>
+                  <TitleNameDebuff>({buffAndDebuff}%)</TitleNameDebuff>
+                </div>
+              </>
+            ) : (
+              <TitleName>{skillName}</TitleName>
+            )}
+          </>
+        )}
+        {!buffAndDebuff && (
+          <TitleNameContainer>
+            <TitleName>{skillName}</TitleName>
+            <ValueDisplay>lv {level}</ValueDisplay>
+          </TitleNameContainer>
+        )}
       </ProgressTitle>
+
       <ProgressBody>
         <ProgressIconContainer>
           {atlasIMG && atlasJSON ? (
@@ -108,6 +154,16 @@ const TitleName = styled.span`
   margin-left: 5px;
 `;
 
+const TitleNameBuff = styled.span`
+  margin-left: 5px;
+  color: ${uiColors.lightGreen} !important;
+`;
+
+const TitleNameDebuff = styled.span`
+  margin-left: 5px;
+  color: ${uiColors.red} !important;
+`;
+
 const ValueDisplay = styled.span``;
 
 const ProgressIconContainer = styled.div`
@@ -125,9 +181,18 @@ const ProgressBody = styled.div`
 const ProgressTitle = styled.div`
   width: 100%;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   justify-content: space-between;
   span {
     font-size: 0.6rem;
   }
 `;
+
+const BuffAndDebuffContainer = styled.div``;
+
+const TitleNameBuffContainer = styled.div``;
+
+const TitleNameContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;

package/src/components/SkillsContainer.tsx

@@ -112,6 +112,7 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
           texturePath={value}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
+          buffAndDebuff={skillDetails.buffAndDebuff}
         />
       );
     }

package/src/components/Spellbook/Spell.tsx

@@ -38,7 +38,6 @@ export const Spell: React.FC<ISpellProps> = ({
   return (
     <SpellInfoWrapper spell={spell}>
       <Container
-        disabled={disabled || (activeCooldown ?? 0) > 0}
         onPointerUp={onPointerUp?.bind(null, spellKey)}
         isSettingShortcut={isSettingShortcut && !disabled}
         className="spell"

package/src/components/Spellbook/Spellbook.tsx

@@ -1,5 +1,5 @@
 import { IShortcut, ISpell } from '@rpg-engine/shared';
-import React, { Fragment, useEffect, useMemo, useState } from 'react';
+import React, { Fragment, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { uiFonts } from '../../constants/uiFonts';
 import { DraggableContainer } from '../DraggableContainer';
@@ -44,20 +44,6 @@ export const Spellbook: React.FC<ISpellbookProps> = ({
   const [search, setSearch] = useState('');
   const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
 
-  useEffect(() => {
-    const handleEscapeClose = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose?.();
-      }
-    };
-
-    document.addEventListener('keydown', handleEscapeClose);
-
-    return () => {
-      document.removeEventListener('keydown', handleEscapeClose);
-    };
-  }, [onClose]);
-
   const spellsToDisplay = useMemo(() => {
     return spells
       .sort((a, b) => {
@@ -137,7 +123,6 @@ export const Spellbook: React.FC<ISpellbookProps> = ({
 const Title = styled.h1`
   font-size: ${uiFonts.size.large} !important;
   margin-bottom: 0 !important;
-  
 `;
 
 const Container = styled.div`
@@ -146,7 +131,6 @@ const Container = styled.div`
   color: white;
   display: flex;
   flex-direction: column;
-  
 `;
 
 const SpellList = styled.div`

package/src/components/Spellbook/mockSpells.ts

@@ -3,9 +3,9 @@ import { AnimationEffectKeys, ISpell, SpellCastingType, SpellsBlueprint } from '
 
 export const mockSpells: ISpell[] = [
   {
-    key: SpellsBlueprint.ArrowCreationSpell,
+    key: SpellsBlueprint.ArrowCreationSpell + '1' as SpellsBlueprint,
     name: 'Arrow Creation Spell',
-    description: 'A spell that creates arrow in your inventory.',
+    description: 'A spell that creates arrow in your inventory.1',
     magicWords: 'iquar elandi',
     manaCost: 10,
     minMagicLevelRequired: 3,
@@ -16,70 +16,70 @@ export const mockSpells: ISpell[] = [
     castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
     targetHitAnimationKey: AnimationEffectKeys.Rooted,
     projectileAnimationKey: AnimationEffectKeys.Energy,
-    usableEffect: () => {}
-    },
-    {
-      key: SpellsBlueprint.ArrowCreationSpell,
-      name: 'Arrow Creation Spell',
-      description: 'A spell that creates arrow in your inventory.',
-      magicWords: 'iquar elandi',
-      manaCost: 10,
-      minMagicLevelRequired: 3,
-      castingType: SpellCastingType.RangedCasting,
-      minLevelRequired: 1,
-      cooldown: 20,
-      maxDistanceGrid: 2,
-      castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
-      targetHitAnimationKey: AnimationEffectKeys.Rooted,
-      projectileAnimationKey: AnimationEffectKeys.Energy,
-      usableEffect: () => {}
-      },
-      {
-        key: SpellsBlueprint.ArrowCreationSpell,
-        name: 'Arrow Creation Spell',
-        description: 'A spell that creates arrow in your inventory.',
-        magicWords: 'iquar elandi',
-        manaCost: 10,
-        minMagicLevelRequired: 3,
-        castingType: SpellCastingType.RangedCasting,
-        minLevelRequired: 1,
-        cooldown: 20,
-        maxDistanceGrid: 2,
-        castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
-        targetHitAnimationKey: AnimationEffectKeys.Rooted,
-        projectileAnimationKey: AnimationEffectKeys.Energy,
-        usableEffect: () => {}
-        },
-        {
-          key: SpellsBlueprint.ArrowCreationSpell,
-          name: 'Arrow Creation Spell',
-          description: 'A spell that creates arrow in your inventory.',
-          magicWords: 'iquar elandi',
-          manaCost: 10,
-          minMagicLevelRequired: 3,
-          castingType: SpellCastingType.RangedCasting,
-          minLevelRequired: 1,
-          cooldown: 20,
-          maxDistanceGrid: 2,
-          castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
-          targetHitAnimationKey: AnimationEffectKeys.Rooted,
-          projectileAnimationKey: AnimationEffectKeys.Energy,
-          usableEffect: () => {}
-          },
-          {
-            key: SpellsBlueprint.ArrowCreationSpell,
-            name: 'Arrow Creation Spell',
-            description: 'A spell that creates arrow in your inventory.',
-            magicWords: 'iquar elandi',
-            manaCost: 10,
-            minMagicLevelRequired: 3,
-            castingType: SpellCastingType.RangedCasting,
-            minLevelRequired: 1,
-            cooldown: 20,
-            maxDistanceGrid: 2,
-            castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
-            targetHitAnimationKey: AnimationEffectKeys.Rooted,
-            projectileAnimationKey: AnimationEffectKeys.Energy,
-            usableEffect: () => {}
-            },
+    usableEffect: () => { }
+  },
+  {
+    key: SpellsBlueprint.ArrowCreationSpell + '2' as SpellsBlueprint,
+    name: 'Arrow Creation Spell',
+    description: 'A spell that creates arrow in your inventory.2',
+    magicWords: 'iquar elandi',
+    manaCost: 10,
+    minMagicLevelRequired: 3,
+    castingType: SpellCastingType.RangedCasting,
+    minLevelRequired: 1,
+    cooldown: 20,
+    maxDistanceGrid: 2,
+    castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
+    targetHitAnimationKey: AnimationEffectKeys.Rooted,
+    projectileAnimationKey: AnimationEffectKeys.Energy,
+    usableEffect: () => { }
+  },
+  {
+    key: SpellsBlueprint.ArrowCreationSpell + '3' as SpellsBlueprint,
+    name: 'Arrow Creation Spell',
+    description: 'A spell that creates arrow in your inventory.3',
+    magicWords: 'iquar elandi',
+    manaCost: 10,
+    minMagicLevelRequired: 3,
+    castingType: SpellCastingType.RangedCasting,
+    minLevelRequired: 1,
+    cooldown: 20,
+    maxDistanceGrid: 2,
+    castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
+    targetHitAnimationKey: AnimationEffectKeys.Rooted,
+    projectileAnimationKey: AnimationEffectKeys.Energy,
+    usableEffect: () => { }
+  },
+  {
+    key: SpellsBlueprint.ArrowCreationSpell + '4' as SpellsBlueprint,
+    name: 'Arrow Creation Spell',
+    description: 'A spell that creates arrow in your inventory.4',
+    magicWords: 'iquar elandi',
+    manaCost: 10,
+    minMagicLevelRequired: 3,
+    castingType: SpellCastingType.RangedCasting,
+    minLevelRequired: 1,
+    cooldown: 20,
+    maxDistanceGrid: 2,
+    castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
+    targetHitAnimationKey: AnimationEffectKeys.Rooted,
+    projectileAnimationKey: AnimationEffectKeys.Energy,
+    usableEffect: () => { }
+  },
+  {
+    key: SpellsBlueprint.ArrowCreationSpell + '5' as SpellsBlueprint,
+    name: 'Arrow Creation Spell',
+    description: 'A spell that creates arrow in your inventory.5',
+    magicWords: 'iquar elandi',
+    manaCost: 10,
+    minMagicLevelRequired: 3,
+    castingType: SpellCastingType.RangedCasting,
+    minLevelRequired: 1,
+    cooldown: 20,
+    maxDistanceGrid: 2,
+    castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
+    targetHitAnimationKey: AnimationEffectKeys.Rooted,
+    projectileAnimationKey: AnimationEffectKeys.Energy,
+    usableEffect: () => { }
+  },
 ];

package/src/components/shared/Ellipsis.tsx

@@ -18,7 +18,7 @@ export const Ellipsis = ({
 }: IProps) => {
   return (
     <Container maxWidth={maxWidth} fontSize={fontSize} center={center}>
-      <div className={`ellipsis-${maxLines}-lines`}>{children}</div>
+      <span className={`ellipsis-${maxLines}-lines`}>{children}</span>
     </Container>
   );
 };
@@ -29,8 +29,12 @@ interface IContainerProps {
   center?: boolean;
 }
 
-const Container = styled.div<IContainerProps>`
+const Container = styled.span<IContainerProps>`
+  display: block;
+  margin: 0;
+
   .ellipsis-1-lines {
+    display: block;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -39,7 +43,9 @@ const Container = styled.div<IContainerProps>`
 
     ${props => props.center && `margin: 0 auto;`}
   }
+
   .ellipsis-2-lines {
+    display: block;
     display: -webkit-box;
     max-width: ${props => props.maxWidth}px;
 
@@ -52,7 +58,9 @@ const Container = styled.div<IContainerProps>`
     overflow: hidden;
     font-size: ${props => props.fontSize};
   }
+
   .ellipsis-3-lines {
+    display: block;
     display: -webkit-box;
     max-width: ${props => props.maxWidth}px;
 

package/src/mocks/skills.mocks.ts

@@ -13,12 +13,14 @@ export const skillMock = {
     level: 1,
     skillPoints: 22,
     skillPointsToNextLevel: 80,
+    buffAndDebuff: -10
   },
   magicResistance: {
     type: SkillType.BasicAttributes,
     level: 1,
     skillPoints: 13,
     skillPointsToNextLevel: 80,
+    buffAndDebuff: 10,
   },
   strength: {
     type: SkillType.BasicAttributes,

package/src/stories/Marketplace.stories.tsx

@@ -2,11 +2,6 @@ import { Meta, Story } from '@storybook/react';
 import React from 'react';
 import { RPGUIRoot } from '..';
 import { Marketplace } from '../components/Marketplace/Marketplace';
-import {
-  itemRarityOptions,
-  itemTypeOptions,
-  orderByOptions,
-} from '../components/Marketplace/__mocks__';
 import atlasJSON from '../mocks/atlas/items/items.json';
 import atlasIMG from '../mocks/atlas/items/items.png';
 import { equipmentSetMock } from '../mocks/equipmentSet.mocks';
@@ -25,16 +20,32 @@ const Template: Story = () => (
       onChangeOrder={value => console.log(value)}
       onChangeRarity={value => console.log(value)}
       onChangeType={value => console.log(value)}
-      onChangeNameInput={event => console.log(event.target.value)}
+      onChangeNameInput={event => console.log(event)}
+      onChangePriceInput={value => console.log(value)}
+      onChangeMainLevelInput={value => console.log(value)}
+      onChangeSecondaryLevelInput={value => console.log(value)}
       atlasIMG={atlasIMG}
       atlasJSON={atlasJSON}
       onClose={() => console.log('close')}
-      items={items}
-      optionsPrice={orderByOptions}
-      optionsRarity={itemRarityOptions}
-      optionsType={itemTypeOptions}
+      items={items.map(item => ({
+        item,
+        price: Math.round(Math.random() * 1000),
+        _id: Math.random().toString(),
+        owner: Math.random().toString(),
+      }))}
       equipmentSet={equipmentSetMock}
-      onHandleClick={value => console.log(value)}
+      onMarketPlaceItemBuy={tradeId => console.log(tradeId)}
+      availableGold={0}
+      selectedItemToSell={null}
+      onSelectedItemToSellRemove={() => console.log('click')}
+      onYourPanelToggle={() => console.log('toggle')}
+      onAddItemToMarketplace={() => console.log('add')}
+      characterId="1"
+      onMoneyWithdraw={() => console.log('withdraw')}
+      totalItems={100}
+      currentPage={1}
+      itemsPerPage={30}
+      onPageChange={page => console.log(page)}
     />
   </RPGUIRoot>
 );