@rpg-engine/long-bow 0.2.29 → 0.2.34

package/dist/stories/Arrow.stories.d.ts

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

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

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react';
-import { ITradeComponentProps } from '../components/TradingMenu/itemComponent';
+import { ITradeComponentProps } from '../components/TradingMenu/TradingItemRow';
 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 → TradingMenu.stories.d.ts}

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react';
-import { ITrandingMenu } from '../components/TradingMenu/TrandingMenu';
+import { ITrandingMenu } from '../components/TradingMenu/TradingMenu';
 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.29",
+  "version": "0.2.34",
   "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.60",
+    "@rpg-engine/shared": "^0.5.69",
     "dayjs": "^1.11.2",
     "fs-extra": "^10.1.0",
     "lodash": "^4.17.21",

package/src/components/Arrow/SelectArrow.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import styled from 'styled-components';
+import LeftArrowClickIcon from './img/arrow01-left-clicked.png';
+import LeftArrowIcon from './img/arrow01-left.png';
+import RightArrowClickIcon from './img/arrow01-right-clicked.png';
+import RightArrowIcon from './img/arrow01-right.png';
+
+export interface ArrowBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  direction: 'right' | 'left';
+  onClick: () => void;
+  size?: number;
+}
+
+export const SelectArrow: React.FC<ArrowBarProps> = ({
+  direction = 'left',
+  size,
+  onClick,
+  ...props
+}) => {
+  return (
+    <>
+      {direction === 'left' ? (
+        <LeftArrow size={size} onClick={() => onClick()} {...props}></LeftArrow>
+      ) : (
+        <RightArrow
+          size={size}
+          onClick={() => onClick()}
+          {...props}
+        ></RightArrow>
+      )}
+    </>
+  );
+};
+
+interface IArrowProps {
+  size?: number;
+}
+
+const LeftArrow = styled.span<IArrowProps>`
+  background-image: url(${LeftArrowIcon});
+  background-size: 100% 100%;
+  left: 0;
+  position: absolute;
+  width: ${props => props.size || 40}px;
+  height: ${props => props.size || 42}px;
+  :active {
+    background-image: url(${LeftArrowClickIcon});
+  }
+  z-index: 2;
+`;
+
+const RightArrow = styled.span<IArrowProps>`
+  background-image: url(${RightArrowIcon});
+  right: 0;
+  position: absolute;
+  width: ${props => props.size || 40}px;
+  height: ${props => props.size || 42}px;
+  background-size: 100% 100%;
+  :active {
+    background-image: url(${RightArrowClickIcon});
+  }
+  z-index: 2;
+`;
+
+export default SelectArrow;

package/src/components/PropertySelect/PropertySelect.tsx

@@ -1,10 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
+import SelectArrow from '../Arrow/SelectArrow';
 import { Ellipsis } from '../shared/Ellipsis';
-import LeftArrowClickIcon from './img/ui-arrows/arrow01-left-clicked.png';
-import LeftArrowIcon from './img/ui-arrows/arrow01-left.png';
-import RightArrowClickIcon from './img/ui-arrows/arrow01-right-clicked.png';
-import RightArrowIcon from './img/ui-arrows/arrow01-right.png';
 
 export interface IPropertySelectProps {
   availableProperties: Array<IPropertiesProps>;
@@ -54,16 +51,23 @@ export const PropertySelect: React.FC<IPropertySelectProps> = ({
     <Container>
       <TextOverlay>
         <Item>
-          <Ellipsis maxLines={1}>{getCurrentSelectionName()}</Ellipsis>
+          <Ellipsis maxLines={1} maxWidth={200}>
+            {getCurrentSelectionName()}
+          </Ellipsis>
         </Item>
       </TextOverlay>
       <div className="rpgui-progress-track"></div>
 
-      <LeftArrow onClick={onLeftClick} onTouchStart={onLeftClick}></LeftArrow>
-      <RightArrow
+      <SelectArrow
+        direction="left"
+        onClick={onLeftClick}
+        onTouchStart={onLeftClick}
+      ></SelectArrow>
+      <SelectArrow
+        direction="right"
         onClick={onRightClick}
         onTouchStart={onRightClick}
-      ></RightArrow>
+      ></SelectArrow>
     </Container>
   );
 };
@@ -99,30 +103,4 @@ const Container = styled.div<IContainerProps>`
   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;
-`;
-
 export default PropertySelect;

package/src/components/QuestInfo/QuestInfo.tsx

@@ -1,12 +1,10 @@
 import { IQuest } from '@rpg-engine/shared';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
+import SelectArrow from '../Arrow/SelectArrow';
 import { Button, ButtonTypes } from '../Button';
 import { DraggableContainer } from '../DraggableContainer';
-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 { RPGUIContainerTypes } from '../RPGUIContainer';
 import { Column } from '../shared/Column';
 import thumbnailDefault from './img/default.png';
@@ -60,18 +58,18 @@ export const QuestInfo: React.FC<IQuestInfoProps> = ({
       {quests.length >= 2 ? (
         <QuestsContainer>
           {currentIndex !== 0 && (
-            <LeftArrow
-              className="arrow-selector"
+            <SelectArrow
+              direction="left"
               onClick={onLeftClick}
               onTouchStart={onLeftClick}
-            ></LeftArrow>
+            ></SelectArrow>
           )}
           {currentIndex !== quests.length - 1 && (
-            <RightArrow
-              className="arrow-selector"
+            <SelectArrow
+              direction="right"
               onClick={onRightClick}
               onTouchStart={onRightClick}
-            ></RightArrow>
+            ></SelectArrow>
           )}
 
           <QuestContainer>
@@ -229,27 +227,3 @@ const Thumbnail = styled.img`
   width: 64px;
   margin-right: 0.5rem;
 `;
-
-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});
-  }
-`;
-
-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});
-  }
-`;

package/src/components/TradingMenu/TradingItemRow.tsx

@@ -0,0 +1,172 @@
+import { ITradeResponseItem } from '@rpg-engine/shared';
+import capitalize from 'lodash/capitalize';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { colors } from '../../constants/uiColors';
+import SelectArrow from '../Arrow/SelectArrow';
+import { Ellipsis } from '../shared/Ellipsis';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+export interface ITradeComponentProps {
+  traderItem: ITradeResponseItem;
+  updateChartTotals: (traderItem: ITradeResponseItem) => void;
+  atlasJSON: any;
+  atlasIMG: any;
+}
+
+export const TradingItemRow: 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 = () => {
+    if (itemQuantity < 999) {
+      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>
+      <ItemIconContainer>
+        <SpriteContainer>
+          <SpriteFromAtlas
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            spriteKey={traderItem.texturePath}
+            imgScale={2.5}
+          />
+        </SpriteContainer>
+      </ItemIconContainer>
+      <ItemNameContainer>
+        <NameValue>
+          <Ellipsis maxLines={1} maxWidth={250}>
+            {capitalize(traderItem.name)}
+          </Ellipsis>
+          <p>${traderItem.price}</p>
+        </NameValue>
+      </ItemNameContainer>
+
+      <QuantityContainer>
+        <SelectArrow
+          size={32}
+          className="arrow-selector"
+          direction="left"
+          onClick={onLeftClick}
+          onTouchStart={onLeftClick}
+        ></SelectArrow>
+        <QuantityDisplay>
+          <TextOverlay>
+            <Item>{itemQuantity}</Item>
+          </TextOverlay>
+        </QuantityDisplay>
+        <SelectArrow
+          size={32}
+          className="arrow-selector"
+          direction="right"
+          onClick={onRightClick}
+          onTouchStart={onRightClick}
+        ></SelectArrow>
+      </QuantityContainer>
+    </ItemWrapper>
+  );
+};
+
+const ItemWrapper = styled.div`
+  width: 100%;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+
+  &:hover {
+    background-color: ${colors.darkGrey};
+  }
+  padding: 0.5rem;
+`;
+
+const ItemNameContainer = styled.div`
+  flex: 60%;
+`;
+
+const ItemIconContainer = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  flex: 0 0 58px;
+`;
+
+const SpriteContainer = styled.div`
+  position: relative;
+  top: -0.5rem;
+  left: 0.5rem;
+`;
+
+const NameValue = styled.div`
+  p {
+    font-size: 0.75rem;
+    margin: 0;
+  }
+`;
+
+const Item = styled.span`
+  font-size: 1rem;
+  color: white;
+  text-align: center;
+  z-index: 1;
+
+  width: 100%;
+`;
+
+const TextOverlay = styled.div`
+  width: 100%;
+  position: relative;
+`;
+
+interface IContainerProps {
+  percentageWidth?: number;
+  minWidth?: number;
+  style?: Record<string, any>;
+}
+
+const QuantityContainer = styled.div<IContainerProps>`
+  position: relative;
+  display: flex;
+
+  min-width: 100px;
+  width: 40%;
+  justify-content: center;
+  align-items: center;
+
+  flex: 20%;
+`;
+
+const QuantityDisplay = styled.div`
+  font-size: 0.8rem;
+`;

package/src/components/TradingMenu/{TrandingMenu.tsx → TradingMenu.tsx}

@@ -1,22 +1,21 @@
-import React, { useState, useEffect } from 'react';
+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 { Button, ButtonTypes } from '../Button';
-import { ItemTradingComponent } from './itemComponent';
-import { ITransactionItem, TradeTransactionType } from '@rpg-engine/shared';
-import { v4 as uuidv4 } from 'uuid';
+import { TradingItemRow } from './TradingItemRow';
 export interface ITrandingMenu {
-  traderItems: ITransactionItem[];
+  traderItems: ITradeResponseItem[];
   onClose: () => void;
   type: TradeTransactionType;
   atlasJSON: any;
   atlasIMG: any;
   characterAvailableGold: number;
-  onChangeTraderItems: (traderItems: ITransactionItem[]) => void;
+  onChangeTraderItems: (traderItems: ITradeResponseItem[]) => void;
 }
 
-export const TrandingMenu: React.FC<ITrandingMenu> = ({
+export const TradingMenu: React.FC<ITrandingMenu> = ({
   traderItems,
   onClose,
   type,
@@ -27,7 +26,7 @@ export const TrandingMenu: React.FC<ITrandingMenu> = ({
 }) => {
   const [sum, setSum] = useState(0);
   let newSumArray = 0;
-  const updateChartTotals = (item: ITransactionItem) => {
+  const updateChartTotals = (item: ITradeResponseItem) => {
     const itemIndex = traderItems.findIndex(
       itemArray => itemArray.itemId === item.itemId
     );
@@ -49,7 +48,7 @@ export const TrandingMenu: React.FC<ITrandingMenu> = ({
   };
 
   return (
-    <TradingMenuDraggableContainer
+    <DraggableContainer
       type={RPGUIContainerTypes.Framed}
       onCloseButton={() => {
         if (onClose) onClose();
@@ -59,14 +58,13 @@ export const TrandingMenu: React.FC<ITrandingMenu> = ({
     >
       <>
         <div style={{ width: '100%' }}>
-          <Title>{Capitalize(type)}</Title>
+          <Title>{Capitalize(type)} Menu</Title>
           <hr className="golden" />
         </div>
-        <TrandingComponentScrollWrapper>
+        <TradingComponentScrollWrapper>
           {traderItems.map(tradeItem => (
-            <ItemWrapper key={uuidv4()}>
-              <ItemTradingComponent
-                key={uuidv4()}
+            <ItemWrapper>
+              <TradingItemRow
                 atlasIMG={atlasIMG}
                 atlasJSON={atlasJSON}
                 updateChartTotals={updateChartTotals}
@@ -74,7 +72,7 @@ export const TrandingMenu: React.FC<ITrandingMenu> = ({
               />
             </ItemWrapper>
           ))}
-        </TrandingComponentScrollWrapper>
+        </TradingComponentScrollWrapper>
         <GoldWrapper>
           <p>Available Gold:</p>
           <p>${characterAvailableGold}</p>
@@ -104,76 +102,56 @@ export const TrandingMenu: React.FC<ITrandingMenu> = ({
           <Button buttonType={ButtonTypes.RPGUIButton}>Cancel</Button>
         </ButtonWrapper>
       </>
-    </TradingMenuDraggableContainer>
+    </DraggableContainer>
   );
 };
 
-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`
+const TradingComponentScrollWrapper = styled.div`
   overflow-y: scroll;
-  height: 500px;
+  height: 390px;
   width: 100%;
+  margin-top: 1rem;
 `;
 
 const ItemWrapper = styled.div`
-  width: 80%;
   margin: auto;
   display: flex;
   justify-content: space-between;
 `;
 
 const TotalWrapper = styled.div`
-  width: 80%;
+  margin-top: 1rem;
   display: flex;
-  margin: auto;
   justify-content: space-between;
   height: 20px;
+  p {
+    color: white !important;
+  }
+  width: 100%;
+  margin-left: 0.8rem;
 `;
 
 const GoldWrapper = styled.div`
-  width: 80%;
+  margin-top: 1rem;
   display: flex;
-  margin: auto;
   justify-content: space-between;
   height: 20px;
   p {
     color: yellow !important;
   }
+  width: 100%;
+  margin-left: 0.8rem;
 `;
 
 const AlertWrapper = styled.div`
-  width: 80%;
   display: flex;
-  margin: auto;
+  width: 100%;
   justify-content: center;
   height: 20px;
   p {
@@ -182,9 +160,9 @@ const AlertWrapper = styled.div`
 `;
 
 const ButtonWrapper = styled.div`
-  width: 80%;
-  margin: auto;
   display: flex;
   justify-content: space-around;
   padding-top: 20px;
+  width: 100%;
+  margin-top: 1rem;
 `;