@rpg-engine/long-bow 0.2.28 → 0.2.33

package/src/components/TradingMenu/TradingMenu.tsx

@@ -0,0 +1,188 @@
+import { ITradeResponseItem, TradeTransactionType } from '@rpg-engine/shared';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { Button, ButtonTypes } from '../Button';
+import { DraggableContainer } from '../DraggableContainer';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { TradingItemRow } from './TradingItemRow';
+export interface ITrandingMenu {
+  traderItems: ITradeResponseItem[];
+  onClose: () => void;
+  type: TradeTransactionType;
+  atlasJSON: any;
+  atlasIMG: any;
+  characterAvailableGold: number;
+  onChangeTraderItems: (traderItems: ITradeResponseItem[]) => void;
+}
+
+export const TradingMenu: React.FC<ITrandingMenu> = ({
+  traderItems,
+  onClose,
+  type,
+  atlasJSON,
+  atlasIMG,
+  characterAvailableGold,
+  onChangeTraderItems,
+}) => {
+  const [sum, setSum] = useState(0);
+  let newSumArray = 0;
+  const updateChartTotals = (item: ITradeResponseItem) => {
+    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)} Menu</Title>
+          <hr className="golden" />
+        </div>
+        <TradingComponentScrollWrapper>
+          {traderItems.map(tradeItem => (
+            <ItemWrapper>
+              <TradingItemRow
+                atlasIMG={atlasIMG}
+                atlasJSON={atlasJSON}
+                updateChartTotals={updateChartTotals}
+                traderItem={tradeItem}
+              />
+            </ItemWrapper>
+          ))}
+        </TradingComponentScrollWrapper>
+        <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 TradingComponentScrollWrapper = styled.div`
+  overflow-y: scroll;
+  height: 500px;
+  width: 100%;
+  margin-top: 1rem;
+`;
+
+const ItemWrapper = styled.div`
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const TotalWrapper = styled.div`
+  display: flex;
+  margin: auto;
+  justify-content: space-between;
+  height: 20px;
+  margin-left: 0.8rem;
+`;
+
+const GoldWrapper = styled.div`
+  margin-top: 1rem;
+  display: flex;
+  justify-content: space-between;
+  height: 20px;
+  p {
+    color: yellow !important;
+  }
+  width: 100%;
+  margin-left: 0.8rem;
+`;
+
+const AlertWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  height: 20px;
+  p {
+    color: red !important;
+  }
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: space-around;
+  padding-top: 20px;
+  width: 100%;
+  margin-top: 1rem;
+`;

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

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

package/src/components/shared/Ellipsis.tsx

@@ -4,25 +4,43 @@ import styled from 'styled-components';
 interface IProps {
   children: React.ReactNode;
   maxLines: 1 | 2 | 3;
+  maxWidth: number;
+  fontSize?: string;
 }
 
-export const Ellipsis = ({ children, maxLines }: IProps) => {
+export const Ellipsis = ({
+  children,
+  maxLines,
+  maxWidth,
+  fontSize,
+}: IProps) => {
   return (
-    <Container>
-      <div className={`ellipsis-${maxLines}-lines`}>{children}</div>
+    <Container maxWidth={maxWidth} fontSize={fontSize}>
+      <p className={`ellipsis-${maxLines}-lines`}>{children}</p>
     </Container>
   );
 };
 
-const Container = styled.div`
+interface IContainerProps {
+  maxWidth: number;
+  fontSize?: string;
+}
+
+const Container = styled.div<IContainerProps>`
+  p {
+    font-size: ${props => props.fontSize || '1rem'};
+  }
+
   .ellipsis-1-lines {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    max-width: ${props => props.maxWidth}px;
   }
   .ellipsis-2-lines {
     display: -webkit-box;
-    max-width: 100%;
+    max-width: ${props => props.maxWidth}px;
+
     height: 25px;
     margin: 0 auto;
     line-height: 1;
@@ -33,7 +51,8 @@ const Container = styled.div`
   }
   .ellipsis-3-lines {
     display: -webkit-box;
-    max-width: 100%;
+    max-width: ${props => props.maxWidth}px;
+
     height: 43px;
     margin: 0 auto;
     line-height: 1;

package/src/index.tsx

@@ -5,11 +5,13 @@ export * from './components/CheckButton';
 export * from './components/DraggableContainer';
 export * from './components/Dropdown';
 export * from './components/Equipment/EquipmentSet';
+export * from './components/HistoryDialog';
 export * from './components/Input';
 export * from './components/Item/Inventory/ItemContainer';
 export * from './components/Item/Inventory/ItemSlot';
 export * from './components/ListMenu';
 export * from './components/NPCDialog/NPCDialog';
+export * from './components/NPCDialog/NPCMultiDialog';
 export * from './components/NPCDialog/QuestionDialog/QuestionDialog';
 export * from './components/ProgressBar';
 export * from './components/PropertySelect/PropertySelect';
@@ -23,8 +25,7 @@ export * from './components/shared/SpriteFromAtlas';
 export * from './components/SkillProgressBar';
 export * from './components/SkillsContainer';
 export * from './components/TextArea';
+export * from './components/TradingMenu/TradingMenu';
 export * from './components/Truncate';
 export * from './components/typography/DynamicText';
-export * from './components/NPCDialog/NPCMultiDialog';
-export * from './components/HistoryDialog';
 export { useEventListener } from './hooks/useEventListener';

package/src/stories/Arrow.stories.tsx

@@ -0,0 +1,26 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '..';
+import SelectArrow, { ArrowBarProps } from '../components/Arrow/SelectArrow';
+
+const meta: Meta = {
+  title: 'Arrow',
+  component: SelectArrow,
+};
+
+export default meta;
+
+const Template: Story<ArrowBarProps> = args => (
+  <RPGUIRoot>
+    <SelectArrow {...args} />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  direction: 'left',
+  onClick: () => {
+    console.log('clicked');
+  },
+};

package/src/stories/ItemTradingComponent.stories.tsx

@@ -0,0 +1,39 @@
+import { ITransactionItem } from '@rpg-engine/shared';
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../components/RPGUIRoot';
+import { itemMock } from '../components/TradingMenu/items.mock';
+import {
+  ITradeComponentProps,
+  TradingItemRow,
+} from '../components/TradingMenu/TradingItemRow';
+import atlasJSON from '../mocks/atlas/items/items.json';
+import atlasIMG from '../mocks/atlas/items/items.png';
+
+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: TradingItemRow,
+};
+export default meta;
+
+const Template: Story<ITradeComponentProps> = args => (
+  <RPGUIRoot>
+    <TradingItemRow {...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,
 };

package/src/stories/SkillsContainer.stories.tsx

@@ -6,6 +6,8 @@ import {
   SkillsContainer,
 } from '../../src/components/SkillsContainer';
 import { skillMock } from '../../src/mocks/skills.mocks';
+import atlasJSON from '../mocks/atlas/items/items.json';
+import atlasIMG from '../mocks/atlas/items/items.png';
 
 const meta: Meta = {
   title: 'Skills Container',
@@ -20,6 +22,8 @@ const Template: Story<ISkillContainerProps> = args => (
       {...args}
       skill={skillMock}
       onCloseButton={() => console.log('close skill container')}
+      atlasIMG={atlasIMG}
+      atlasJSON={atlasJSON}
     />
   </RPGUIRoot>
 );

package/src/stories/TradingMenu.stories.tsx

@@ -0,0 +1,38 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../components/RPGUIRoot';
+import { itemMock } from '../components/TradingMenu/items.mock';
+import {
+  ITrandingMenu,
+  TradingMenu,
+} from '../components/TradingMenu/TradingMenu';
+import atlasJSON from '../mocks/atlas/items/items.json';
+import atlasIMG from '../mocks/atlas/items/items.png';
+
+const meta: Meta = {
+  title: 'Trading Menu',
+  component: TradingMenu,
+};
+
+export default meta;
+
+const Template: Story<ITrandingMenu> = args => (
+  <RPGUIRoot>
+    <TradingMenu {...args} />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+const onClose = () => {
+  console.log('close');
+};
+
+Default.args = {
+  traderItems: itemMock,
+  onClose: onClose,
+  type: 'buy',
+  atlasJSON: atlasJSON,
+  atlasIMG: atlasIMG,
+  characterAvailableGold: 1000,
+};