@rpg-engine/long-bow 0.2.28 → 0.2.33

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

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

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+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.28",
+  "version": "0.2.33",
   "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.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/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/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/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/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;
+`;