@rpg-engine/long-bow 0.2.28 → 0.2.29

package/dist/stories/ItemTradingComponent.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ITradeComponentProps } from '../components/TradingMenu/itemComponent';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ITradeComponentProps>;

package/dist/stories/TrandingMenu.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ITrandingMenu } from '../components/TradingMenu/TrandingMenu';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ITrandingMenu>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.2.28",
+  "version": "0.2.29",
   "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.59",
+    "@rpg-engine/shared": "^0.5.60",
     "dayjs": "^1.11.2",
     "fs-extra": "^10.1.0",
     "lodash": "^4.17.21",

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

@@ -15,6 +15,7 @@ import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 import { ItemTooltip } from '../Cards/ItemTooltip';
 import { ErrorBoundary } from './ErrorBoundary';
 import { generateContextMenu, IContextMenuItem } from './itemContainerHelper';
+import { v4 as uuidv4 } from 'uuid';
 
 const EquipmentSlotSpriteByType: any = {
   Neck: 'accessories/corruption-necklace.png',
@@ -104,7 +105,7 @@ export const ItemSlot: React.FC<IProps> = observer(
       const element = [];
       if (itemToRender?.texturePath) {
         element.push(
-          <ErrorBoundary>
+          <ErrorBoundary key={itemToRender._id}>
             <SpriteFromAtlas
               key={itemToRender._id}
               atlasIMG={atlasIMG}
@@ -133,7 +134,7 @@ export const ItemSlot: React.FC<IProps> = observer(
       ) {
         const element = [];
         element.push(
-          <ErrorBoundary>
+          <ErrorBoundary key={itemToRender._id}>
             <SpriteFromAtlas
               key={itemToRender._id}
               atlasIMG={atlasIMG}
@@ -153,8 +154,9 @@ export const ItemSlot: React.FC<IProps> = observer(
         return element;
       } else {
         return (
-          <ErrorBoundary>
+          <ErrorBoundary key={uuidv4()}>
             <SpriteFromAtlas
+              key={uuidv4()}
               atlasIMG={atlasIMG}
               atlasJSON={atlasJSON}
               spriteKey={EquipmentSlotSpriteByType[slotSpriteMask!]}

package/src/components/ScrollList.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { DraggableContainer } from './DraggableContainer';
+import { v4 as uuidv4 } from 'uuid';
 
 interface IListMenuOption {
   id: string;
@@ -30,7 +31,7 @@ export const ListMenu: React.FC<IListMenuProps> = ({
       <ListContainer className="rpgui-list-imp">
         {options.map(params => (
           <ListElement
-            key={params?.id}
+            key={uuidv4()}
             onClick={() => {
               onSelected(params?.id);
             }}

package/src/components/SkillProgressBar.tsx

@@ -1,8 +1,6 @@
 import { getSPForLevel } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
-import atlasJSON from '../mocks/atlas/items/items.json';
-import atlasIMG from '../mocks/atlas/items/items.png';
 import { ErrorBoundary } from './Item/Inventory/ErrorBoundary';
 import { SpriteFromAtlas } from './shared/SpriteFromAtlas';
 import { SimpleProgressBar } from './SimpleProgressBar';
@@ -15,6 +13,8 @@ export interface ISkillProgressBarProps {
   skillPointsToNextLevel?: number;
   texturePath: string;
   showSkillPoints?: boolean;
+  atlasJSON: any;
+  atlasIMG: any;
 }
 
 export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
@@ -24,6 +24,8 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
   skillPoints,
   texturePath,
   showSkillPoints = true,
+  atlasIMG,
+  atlasJSON,
 }) => {
   const spForNextLevel = getSPForLevel(level + 1);
 

package/src/components/SkillsContainer.tsx

@@ -9,6 +9,8 @@ import { SkillProgressBar } from './SkillProgressBar';
 export interface ISkillContainerProps {
   skill: ISkill;
   onCloseButton: () => void;
+  atlasJSON: any;
+  atlasIMG: any;
 }
 
 const skillProps = {
@@ -50,6 +52,8 @@ const skillProps = {
 export const SkillsContainer: React.FC<ISkillContainerProps> = ({
   onCloseButton,
   skill,
+  atlasIMG,
+  atlasJSON,
 }) => {
   const onRenderSkillCategory = (
     category: 'attributes' | 'combat' | 'crafting'
@@ -75,6 +79,8 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
             Math.round(skillDetails.skillPointsToNextLevel) || 0
           }
           texturePath={value}
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
         />
       );
     }
@@ -100,6 +106,8 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
           skillPoints={Math.round(skill.experience) || 0}
           skillPointsToNextLevel={Math.round(skill.xpToNextLevel) || 0}
           texturePath={'swords/broad-sword.png'}
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
         />
 
         <p>Combat Skills</p>
@@ -121,43 +129,6 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
       </SkillSplitDiv>
 
       {onRenderSkillCategory('attributes')}
-
-      {/* <SkillSplitDiv>
-        <p>Magic Skills</p>
-        <hr className="golden" />
-      </SkillSplitDiv>
-      <SkillProgressBar
-        skillName={'Ice'}
-        bgColor={'red'}
-        level={skill?.ice?.level || 0}
-        skillPoints={skill?.ice?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.ice?.skillPointsToNextLevel || 0}
-        texturePath={'spell-icons/freeze.png'}
-      />
-      <SkillProgressBar
-        skillName={'Earth'}
-        bgColor={'red'}
-        level={skill?.earth?.level || 0}
-        skillPoints={skill?.earth?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.earth?.skillPointsToNextLevel || 0}
-        texturePath={'spell-icons/earth-barrier.png'}
-      />
-      <SkillProgressBar
-        skillName={'Air'}
-        bgColor={'red'}
-        level={skill?.air?.level || 0}
-        skillPoints={skill?.air?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.air?.skillPointsToNextLevel || 0}
-        texturePath={'spell-icons/poison-tornado.png'}
-      />
-      <SkillProgressBar
-        skillName={'Water'}
-        bgColor={'red'}
-        level={skill?.water?.level || 0}
-        skillPoints={skill?.water?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.water?.skillPointsToNextLevel || 0}
-        texturePath={'spell-icons/tsunami.png'}
-      /> */}
     </SkillsDraggableContainer>
   );
 };

package/src/components/TradingMenu/TrandingMenu.tsx

@@ -0,0 +1,190 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import { DraggableContainer } from '../DraggableContainer';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { Button, ButtonTypes } from '../Button';
+import { ItemTradingComponent } from './itemComponent';
+import { ITransactionItem, TradeTransactionType } from '@rpg-engine/shared';
+import { v4 as uuidv4 } from 'uuid';
+export interface ITrandingMenu {
+  traderItems: ITransactionItem[];
+  onClose: () => void;
+  type: TradeTransactionType;
+  atlasJSON: any;
+  atlasIMG: any;
+  characterAvailableGold: number;
+  onChangeTraderItems: (traderItems: ITransactionItem[]) => void;
+}
+
+export const TrandingMenu: React.FC<ITrandingMenu> = ({
+  traderItems,
+  onClose,
+  type,
+  atlasJSON,
+  atlasIMG,
+  characterAvailableGold,
+  onChangeTraderItems,
+}) => {
+  const [sum, setSum] = useState(0);
+  let newSumArray = 0;
+  const updateChartTotals = (item: ITransactionItem) => {
+    const itemIndex = traderItems.findIndex(
+      itemArray => itemArray.itemId === item.itemId
+    );
+    traderItems[itemIndex] = item;
+
+    traderItems.forEach(item => {
+      if (item.qty) newSumArray += item.qty * item.price;
+      setSum(newSumArray);
+    });
+  };
+
+  useEffect(() => {
+    if (onChangeTraderItems) {
+      onChangeTraderItems(traderItems);
+    }
+  }, [traderItems]);
+  const Capitalize = (word: string) => {
+    return word[0].toUpperCase() + word.substring(1);
+  };
+
+  return (
+    <TradingMenuDraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={() => {
+        if (onClose) onClose();
+      }}
+      width="500px"
+      cancelDrag=".equipment-container-body .arrow-selector"
+    >
+      <>
+        <div style={{ width: '100%' }}>
+          <Title>{Capitalize(type)}</Title>
+          <hr className="golden" />
+        </div>
+        <TrandingComponentScrollWrapper>
+          {traderItems.map(tradeItem => (
+            <ItemWrapper key={uuidv4()}>
+              <ItemTradingComponent
+                key={uuidv4()}
+                atlasIMG={atlasIMG}
+                atlasJSON={atlasJSON}
+                updateChartTotals={updateChartTotals}
+                traderItem={tradeItem}
+              />
+            </ItemWrapper>
+          ))}
+        </TrandingComponentScrollWrapper>
+        <GoldWrapper>
+          <p>Available Gold:</p>
+          <p>${characterAvailableGold}</p>
+        </GoldWrapper>
+        <TotalWrapper>
+          <p>Total:</p>
+          <p>${sum}</p>
+        </TotalWrapper>
+        {sum > characterAvailableGold ? (
+          <AlertWrapper>
+            <p> Sorry, not enough money.</p>
+          </AlertWrapper>
+        ) : (
+          <GoldWrapper>
+            <p>Final Gold:</p>
+            <p>${characterAvailableGold - sum}</p>
+          </GoldWrapper>
+        )}
+
+        <ButtonWrapper>
+          <Button
+            buttonType={ButtonTypes.RPGUIButton}
+            disabled={sum > characterAvailableGold}
+          >
+            Confirm
+          </Button>
+          <Button buttonType={ButtonTypes.RPGUIButton}>Cancel</Button>
+        </ButtonWrapper>
+      </>
+    </TradingMenuDraggableContainer>
+  );
+};
+
+const TradingMenuDraggableContainer = styled(DraggableContainer)`
+  .container-close {
+    top: 10px;
+    right: 10px;
+  }
+
+  .quest-title {
+    text-align: left;
+    margin-left: 44px;
+    margin-top: 20px;
+    color: yellow;
+  }
+
+  .quest-desc {
+    margin-top: 12px;
+    margin-left: 44px;
+  }
+
+  .rpgui-progress {
+    min-width: 80%;
+    margin: 0 auto;
+  }
+`;
+
+const Title = styled.h1`
+  z-index: 22;
+  font-size: 0.6rem;
+  color: yellow !important;
+`;
+
+const TrandingComponentScrollWrapper = styled.div`
+  overflow-y: scroll;
+  height: 500px;
+  width: 100%;
+`;
+
+const ItemWrapper = styled.div`
+  width: 80%;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const TotalWrapper = styled.div`
+  width: 80%;
+  display: flex;
+  margin: auto;
+  justify-content: space-between;
+  height: 20px;
+`;
+
+const GoldWrapper = styled.div`
+  width: 80%;
+  display: flex;
+  margin: auto;
+  justify-content: space-between;
+  height: 20px;
+  p {
+    color: yellow !important;
+  }
+`;
+
+const AlertWrapper = styled.div`
+  width: 80%;
+  display: flex;
+  margin: auto;
+  justify-content: center;
+  height: 20px;
+  p {
+    color: red !important;
+  }
+`;
+
+const ButtonWrapper = styled.div`
+  width: 80%;
+  margin: auto;
+  display: flex;
+  justify-content: space-around;
+  padding-top: 20px;
+`;

package/src/components/TradingMenu/itemComponent.tsx

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import LeftArrowClickIcon from '../PropertySelect/img/ui-arrows/arrow01-left-clicked.png';
+import LeftArrowIcon from '../PropertySelect/img/ui-arrows/arrow01-left.png';
+import RightArrowClickIcon from '../PropertySelect/img/ui-arrows/arrow01-right-clicked.png';
+import RightArrowIcon from '../PropertySelect/img/ui-arrows/arrow01-right.png';
+import { ITransactionItem } from '@rpg-engine/shared';
+
+export interface ITradeComponentProps {
+  traderItem: ITransactionItem;
+  updateChartTotals: (traderItem: ITransactionItem) => void;
+  atlasJSON: any;
+  atlasIMG: any;
+}
+
+export const ItemTradingComponent: React.FC<ITradeComponentProps> = ({
+  atlasIMG,
+  atlasJSON,
+  updateChartTotals,
+  traderItem,
+}) => {
+  const [itemQuantity, setItemQuantity] = useState(0);
+
+  const onLeftClick = () => {
+    if (itemQuantity > 0) {
+      const newQuantity = itemQuantity - 1;
+      setItemQuantity(newQuantity);
+      updateChartTotals({
+        key: traderItem.key,
+        itemId: traderItem.itemId,
+        qty: newQuantity,
+        price: traderItem.price,
+        texturePath: traderItem.texturePath,
+        name: traderItem.name,
+      });
+    }
+  };
+  const onRightClick = () => {
+    const newQuantity = itemQuantity + 1;
+    setItemQuantity(newQuantity);
+    updateChartTotals({
+      key: traderItem.key,
+      itemId: traderItem.itemId,
+      qty: newQuantity,
+      price: traderItem.price,
+      texturePath: traderItem.texturePath,
+      name: traderItem.name,
+    });
+  };
+
+  return (
+    <ItemWrapper>
+      <IconContainer>
+        <SpriteContainer>
+          <SpriteFromAtlas
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            spriteKey={traderItem.texturePath}
+            imgScale={2.5}
+          />
+        </SpriteContainer>
+      </IconContainer>
+      <NameValue>
+        <p>{traderItem.name}</p>
+        <p>${traderItem.price}</p>
+      </NameValue>
+      <Container>
+        <TextOverlay>
+          <Item>{itemQuantity}</Item>
+        </TextOverlay>
+        <LeftArrow onClick={onLeftClick} onTouchStart={onLeftClick}></LeftArrow>
+        <RightArrow
+          onClick={onRightClick}
+          onTouchStart={onRightClick}
+        ></RightArrow>
+      </Container>
+    </ItemWrapper>
+  );
+};
+
+const ItemWrapper = styled.div`
+  width: 80%;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const IconContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const SpriteContainer = styled.div`
+  position: relative;
+  top: -3px;
+  left: 0;
+`;
+
+const NameValue = styled.div``;
+
+const Item = styled.span`
+  font-size: 1rem;
+  color: white;
+  text-align: center;
+  z-index: 1;
+  position: absolute;
+  top: -12px;
+  width: 100%;
+`;
+
+const TextOverlay = styled.div`
+  width: 100%;
+  position: relative;
+`;
+
+interface IContainerProps {
+  percentageWidth?: number;
+  minWidth?: number;
+  style?: Record<string, any>;
+}
+
+const Container = styled.div<IContainerProps>`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: flex-start;
+  min-width: 100px;
+  width: 40%;
+`;
+
+const LeftArrow = styled.div`
+  background-image: url(${LeftArrowIcon});
+  background-size: 100% 100%;
+  left: 0;
+  position: absolute;
+  width: 40px;
+  height: 42px;
+  :active {
+    background-image: url(${LeftArrowClickIcon});
+  }
+  z-index: 2;
+`;
+
+const RightArrow = styled.div`
+  background-image: url(${RightArrowIcon});
+  right: 0;
+  position: absolute;
+  width: 40px;
+  background-size: 100% 100%;
+  height: 42px;
+  :active {
+    background-image: url(${RightArrowClickIcon});
+  }
+  z-index: 2;
+`;

package/src/components/TradingMenu/items.mock.ts

@@ -0,0 +1,87 @@
+import { ITransactionItem } from '@rpg-engine/shared';
+export const itemMock: ITransactionItem[] = [
+  {
+    texturePath: 'swords/broad-sword.png',
+    itemId: 'itemId01',
+    name: 'sword',
+    price: 100,
+    key: 'Short sword',
+  },
+  {
+    texturePath: 'swords/broad-sword.png',
+    itemId: 'itemId02',
+    name: 'sword',
+    price: 100,
+    key: 'Short sword',
+  },
+  {
+    texturePath: 'swords/broad-sword.png',
+    itemId: 'itemId03',
+    name: 'sword',
+    price: 100,
+    key: 'Short sword',
+  },
+  {
+    texturePath: 'swords/broad-sword.png',
+    itemId: 'itemId01',
+    name: 'sword',
+    price: 100,
+    key: 'Short sword',
+  },
+  {
+    texturePath: 'swords/broad-sword.png',
+    itemId: 'itemId02',
+    name: 'sword',
+    price: 100,
+    key: 'Short sword',
+  },
+  {
+    texturePath: 'swords/broad-sword.png',
+    itemId: 'itemId03',
+    name: 'sword',
+    price: 100,
+    key: 'Short sword',
+  },
+  {
+    texturePath: 'swords/broad-sword.png',
+    itemId: 'itemId01',
+    name: 'sword',
+    price: 100,
+    key: 'Short sword',
+  },
+  {
+    texturePath: 'swords/broad-sword.png',
+    itemId: 'itemId02',
+    name: 'sword',
+    price: 100,
+    key: 'Short sword',
+  },
+  {
+    texturePath: 'swords/broad-sword.png',
+    itemId: 'itemId03',
+    name: 'sword',
+    price: 100,
+    key: 'Short sword',
+  },
+  {
+    texturePath: 'swords/broad-sword.png',
+    itemId: 'itemId01',
+    name: 'sword',
+    price: 100,
+    key: 'Short sword',
+  },
+  {
+    texturePath: 'swords/broad-sword.png',
+    itemId: 'itemId02',
+    name: 'sword',
+    price: 100,
+    key: 'Short sword',
+  },
+  {
+    texturePath: 'swords/broad-sword.png',
+    itemId: 'itemId03',
+    name: 'sword',
+    price: 100,
+    key: 'Short sword',
+  },
+];

package/src/index.tsx

@@ -27,4 +27,5 @@ export * from './components/Truncate';
 export * from './components/typography/DynamicText';
 export * from './components/NPCDialog/NPCMultiDialog';
 export * from './components/HistoryDialog';
+export * from './components/TradingMenu/TrandingMenu';
 export { useEventListener } from './hooks/useEventListener';

package/src/stories/ItemTradingComponent.stories.tsx

@@ -0,0 +1,39 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../components/RPGUIRoot';
+import {
+  ItemTradingComponent,
+  ITradeComponentProps,
+} from '../components/TradingMenu/itemComponent';
+import atlasJSON from '../mocks/atlas/items/items.json';
+import atlasIMG from '../mocks/atlas/items/items.png';
+import { itemMock } from '../components/TradingMenu/items.mock';
+import { ITransactionItem } from '@rpg-engine/shared';
+
+const updateChartTotals = (itemInfo: ITransactionItem) => {
+  console.log(itemInfo);
+  // will be needed read all itens from chart list ignoring the current item (itemInfo) and recalculate the totals
+  // with the amount updated set the total to a state to be shown to the player.
+  // OBS: This list with Id, quantity and amount will be the one to send to API,
+  //    because the API need to know wichi Items and the quantity of it to make a purchese and set the itens to the player.
+};
+
+const meta: Meta = {
+  title: 'Trading Item',
+  component: ItemTradingComponent,
+};
+export default meta;
+
+const Template: Story<ITradeComponentProps> = args => (
+  <RPGUIRoot>
+    <ItemTradingComponent {...args} traderItem={itemMock[0]} />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  atlasIMG: atlasIMG,
+  atlasJSON: atlasJSON,
+  updateChartTotals,
+};

package/src/stories/SkillProgressBar.stories.tsx

@@ -1,6 +1,8 @@
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
 import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+import atlasJSON from '../mocks/atlas/items/items.json';
+import atlasIMG from '../mocks/atlas/items/items.png';
 import {
   ISkillProgressBarProps,
   SkillProgressBar,
@@ -27,4 +29,6 @@ Default.args = {
   skillPoints: 10,
   skillPointsToNextLevel: 100,
   texturePath: 'swords/broad-sword.png',
+  atlasIMG: atlasIMG,
+  atlasJSON: atlasJSON,
 };