@rpg-engine/long-bow 0.2.42 → 0.2.44

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

@@ -1,5 +1,5 @@
+/// <reference types="react" />
 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>;
+export declare const Default: () => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.2.42",
+  "version": "0.2.44",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

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

@@ -10,12 +10,12 @@ import {
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
+import { v4 as uuidv4 } from 'uuid';
 import { RelativeListMenu } from '../../RelativeListMenu';
 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',
@@ -77,7 +77,7 @@ export const ItemSlot: React.FC<IProps> = observer(
 
     useEffect(() => {
       if (item) {
-        setContextActions(generateContextMenu(item.type, containerType));
+        setContextActions(generateContextMenu(item, containerType));
       }
     }, [item]);
 

package/src/components/Item/Inventory/itemContainerHelper.ts

@@ -3,6 +3,7 @@ import {
   ActionsForInventory,
   ActionsForLoot,
   ActionsForMapContainer,
+  IItem,
   ItemContainerType,
   ItemSocketEventsDisplayLabels,
   ItemType,
@@ -23,13 +24,13 @@ const generateContextMenuListOptions = (actionsByTypeList: any) => {
 };
 
 export const generateContextMenu = (
-  itemType: ItemType,
+  item: IItem,
   itemContainerType: ItemContainerType | null
 ) => {
   let contextActionMenu: IContextMenuItem[] = [];
 
   if (itemContainerType === ItemContainerType.Inventory) {
-    switch (itemType) {
+    switch (item.type) {
       case ItemType.Weapon:
       case ItemType.Armor:
       case ItemType.Accessory:
@@ -67,7 +68,7 @@ export const generateContextMenu = (
     }
   }
   if (itemContainerType === ItemContainerType.Equipment) {
-    switch (itemType) {
+    switch (item.type) {
       case ItemType.Container:
         contextActionMenu = generateContextMenuListOptions(
           ActionsForEquipmentSet.Container
@@ -81,7 +82,7 @@ export const generateContextMenu = (
     }
   }
   if (itemContainerType === ItemContainerType.Loot) {
-    switch (itemType) {
+    switch (item.type) {
       case ItemType.Weapon:
       case ItemType.Armor:
       case ItemType.Accessory:
@@ -111,7 +112,7 @@ export const generateContextMenu = (
     }
   }
   if (itemContainerType === ItemContainerType.MapContainer) {
-    switch (itemType) {
+    switch (item.type) {
       case ItemType.Weapon:
       case ItemType.Armor:
       case ItemType.Accessory:
@@ -142,5 +143,10 @@ export const generateContextMenu = (
         break;
     }
   }
+
+  if (item.hasUseWith) {
+    contextActionMenu.push({ id: 'use-with', text: 'Use With...' });
+  }
+
   return contextActionMenu;
 };

package/src/components/TradingMenu/TradingItemRow.tsx

@@ -1,6 +1,6 @@
 import { ITradeResponseItem } from '@rpg-engine/shared';
 import capitalize from 'lodash/capitalize';
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { uiFonts } from '../../constants/uiFonts';
@@ -9,43 +9,32 @@ import { Ellipsis } from '../shared/Ellipsis';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 export interface ITradeComponentProps {
   traderItem: ITradeResponseItem;
-  updateChartTotals: (traderItem: ITradeResponseItem) => void;
+  onQuantityChange: (
+    traderItem: ITradeResponseItem,
+    selectedQty: number
+  ) => void;
   atlasJSON: any;
   atlasIMG: any;
+  selectedQty: number;
 }
 
 export const TradingItemRow: React.FC<ITradeComponentProps> = ({
   atlasIMG,
   atlasJSON,
-  updateChartTotals,
+  onQuantityChange,
   traderItem,
+  selectedQty,
 }) => {
-  const [itemQuantity, setItemQuantity] = useState(0);
-
   const onLeftClick = () => {
-    if (itemQuantity > 0) {
-      const newQuantity = itemQuantity - 1;
-      setItemQuantity(newQuantity);
-      updateChartTotals({
-        key: traderItem.key,
-        qty: newQuantity,
-        price: traderItem.price,
-        texturePath: traderItem.texturePath,
-        name: traderItem.name,
-      });
+    if (selectedQty > 0) {
+      const newQuantity = selectedQty - 1;
+      onQuantityChange(traderItem, newQuantity);
     }
   };
   const onRightClick = () => {
-    if (itemQuantity < 999) {
-      const newQuantity = itemQuantity + 1;
-      setItemQuantity(newQuantity);
-      updateChartTotals({
-        key: traderItem.key,
-        qty: newQuantity,
-        price: traderItem.price,
-        texturePath: traderItem.texturePath,
-        name: traderItem.name,
-      });
+    if (selectedQty < (traderItem.qty ?? 999)) {
+      const newQuantity = selectedQty + 1;
+      onQuantityChange(traderItem, newQuantity);
     }
   };
 
@@ -80,7 +69,7 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
         ></SelectArrow>
         <QuantityDisplay>
           <TextOverlay>
-            <Item>{itemQuantity}</Item>
+            <Item>{selectedQty}</Item>
           </TextOverlay>
         </QuantityDisplay>
         <SelectArrow

package/src/components/TradingMenu/TradingMenu.tsx

@@ -8,7 +8,7 @@ import { TradingItemRow } from './TradingItemRow';
 export interface ITrandingMenu {
   traderItems: ITradeResponseItem[];
   onClose: () => void;
-  onConfirm: () => void;
+  onConfirm: (items: ITradeResponseItem[]) => void;
   type: TradeTransactionType;
   atlasJSON: any;
   atlasIMG: any;
@@ -25,23 +25,55 @@ export const TradingMenu: React.FC<ITrandingMenu> = ({
   onConfirm,
 }) => {
   const [sum, setSum] = useState(0);
-  let newSumArray = 0;
-  const updateChartTotals = (item: ITradeResponseItem) => {
-    const itemIndex = traderItems.findIndex(
-      itemArray => itemArray.key === item.key
-    );
-    traderItems[itemIndex] = item;
+  const [qtyMap, setQtyMap] = useState(new Map());
 
+  const onQuantityChange = (item: ITradeResponseItem, selectedQty: number) => {
+    setQtyMap(new Map(qtyMap.set(item.key, selectedQty)));
+
+    let newSum = 0;
     traderItems.forEach(item => {
-      if (item.qty) newSumArray += item.qty * item.price;
-      setSum(newSumArray);
+      const qty = qtyMap.get(item.key);
+      if (qty) newSum += qty * item.price;
+      setSum(newSum);
     });
   };
 
+  const isBuy = () => {
+    return type == 'buy';
+  };
+
+  const hasGoldForSale = () => {
+    if (isBuy()) {
+      return !(sum > characterAvailableGold);
+    }
+    return true;
+  };
+
+  const getFinalGold = () => {
+    if (isBuy()) {
+      return characterAvailableGold - sum;
+    } else {
+      return characterAvailableGold + sum;
+    }
+  };
+
   const Capitalize = (word: string) => {
     return word[0].toUpperCase() + word.substring(1);
   };
 
+  const onConfirmClick = () => {
+    const items: ITradeResponseItem[] = [];
+
+    traderItems.forEach(item => {
+      const qty = qtyMap.get(item.key);
+      if (qty) {
+        items.push(Object.assign({}, item, { qty: qty }));
+      }
+    });
+
+    onConfirm(items);
+  };
+
   return (
     <DraggableContainer
       type={RPGUIContainerTypes.Framed}
@@ -62,8 +94,9 @@ export const TradingMenu: React.FC<ITrandingMenu> = ({
               <TradingItemRow
                 atlasIMG={atlasIMG}
                 atlasJSON={atlasJSON}
-                updateChartTotals={updateChartTotals}
+                onQuantityChange={onQuantityChange}
                 traderItem={tradeItem}
+                selectedQty={qtyMap.get(tradeItem.key) ?? 0}
               />
             </ItemWrapper>
           ))}
@@ -76,22 +109,22 @@ export const TradingMenu: React.FC<ITrandingMenu> = ({
           <p>Total:</p>
           <p>${sum}</p>
         </TotalWrapper>
-        {sum > characterAvailableGold ? (
+        {!hasGoldForSale() ? (
           <AlertWrapper>
             <p> Sorry, not enough money.</p>
           </AlertWrapper>
         ) : (
           <GoldWrapper>
             <p>Final Gold:</p>
-            <p>${characterAvailableGold - sum}</p>
+            <p>${getFinalGold()}</p>
           </GoldWrapper>
         )}
 
         <ButtonWrapper>
           <Button
             buttonType={ButtonTypes.RPGUIButton}
-            disabled={sum > characterAvailableGold}
-            onClick={() => onConfirm()}
+            disabled={!hasGoldForSale()}
+            onClick={() => onConfirmClick()}
           >
             Confirm
           </Button>

package/src/mocks/itemContainer.mocks.ts

@@ -141,7 +141,7 @@ export const items: IItem[] = [
   },
   {
     _id: '629acek4j7c8e8002fg60034',
-    hasUseWith: false,
+    hasUseWith: true,
     type: ItemType.Consumable,
     subType: ItemSubType.Accessory,
     textureAtlas: 'items',
@@ -156,7 +156,7 @@ export const items: IItem[] = [
     layer: 1,
     isItemContainer: false,
     isSolid: false,
-    key: 'board-sword-22',
+    key: 'silver-key',
     texturePath: 'others/silver-key.png',
     textureKey: 'silver-key',
     name: 'Key',

package/src/stories/ItemTradingComponent.stories.tsx

@@ -1,39 +1,35 @@
 import { ITradeResponseItem } from '@rpg-engine/shared';
-import { Meta, Story } from '@storybook/react';
-import React from 'react';
+import { Meta } from '@storybook/react';
+import React, { useState } from 'react';
 import { RPGUIRoot } from '../components/RPGUIRoot';
 import { itemMock } from '../components/TradingMenu/items.mock';
-import {
-  ITradeComponentProps,
-  TradingItemRow,
-} from '../components/TradingMenu/TradingItemRow';
+import { TradingItemRow } from '../components/TradingMenu/TradingItemRow';
 import atlasJSON from '../mocks/atlas/items/items.json';
 import atlasIMG from '../mocks/atlas/items/items.png';
 
-const updateChartTotals = (itemInfo: ITradeResponseItem) => {
-  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 = () => {
+  const [selectedQty, setSelectedQty] = useState(0);
 
-export const Default = Template.bind({});
+  const handleOnChange = (item: ITradeResponseItem, qty: number) => {
+    console.log(item);
+    setSelectedQty(qty);
+  };
 
-Default.args = {
-  atlasIMG: atlasIMG,
-  atlasJSON: atlasJSON,
-  updateChartTotals,
+  return (
+    <RPGUIRoot>
+      <TradingItemRow
+        atlasIMG={atlasIMG}
+        atlasJSON={atlasJSON}
+        onQuantityChange={handleOnChange}
+        selectedQty={selectedQty}
+        traderItem={itemMock[0]}
+      />
+    </RPGUIRoot>
+  );
 };

package/src/stories/TradingMenu.stories.tsx

@@ -1,3 +1,4 @@
+import { ITradeResponseItem } from '@rpg-engine/shared';
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
 import { RPGUIRoot } from '../components/RPGUIRoot';
@@ -24,6 +25,11 @@ const Template: Story<ITrandingMenu> = args => (
 
 export const Default = Template.bind({});
 
+const onConfirm = (items: ITradeResponseItem[]) => {
+  console.log('on confirm trading menu');
+  console.log(items);
+};
+
 const onClose = () => {
   console.log('close');
 };
@@ -31,6 +37,7 @@ const onClose = () => {
 Default.args = {
   traderItems: itemMock,
   onClose: onClose,
+  onConfirm: onConfirm,
   type: 'buy',
   atlasJSON: atlasJSON,
   atlasIMG: atlasIMG,