@rpg-engine/long-bow 0.3.77 → 0.3.78

package/src/components/TradingMenu/TradingMenu.tsx

@@ -1,203 +1,215 @@
-import { ITradeResponseItem, TradeTransactionType } from '@rpg-engine/shared';
-import React, { 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;
-  onConfirm: (items: ITradeResponseItem[]) => void;
-  type: TradeTransactionType;
-  atlasJSON: any;
-  atlasIMG: any;
-  characterAvailableGold: number;
-}
-
-export const TradingMenu: React.FC<ITrandingMenu> = ({
-  traderItems,
-  onClose,
-  type,
-  atlasJSON,
-  atlasIMG,
-  characterAvailableGold,
-  onConfirm,
-}) => {
-  const [sum, setSum] = useState(0);
-  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 => {
-      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}
-      onCloseButton={() => {
-        if (onClose) onClose();
-      }}
-      width="600px"
-      cancelDrag="#TraderContainer"
-    >
-      <>
-        <div style={{ width: '100%' }}>
-          <Title>{Capitalize(type)} Menu</Title>
-          <hr className="golden" />
-        </div>
-        <TradingComponentScrollWrapper id="TraderContainer">
-          {traderItems.map((tradeItem, index) => (
-            <ItemWrapper key={`${tradeItem.key}_${index}`}>
-              <TradingItemRow
-                atlasIMG={atlasIMG}
-                atlasJSON={atlasJSON}
-                onQuantityChange={onQuantityChange}
-                traderItem={tradeItem}
-                selectedQty={qtyMap.get(tradeItem.key) ?? 0}
-              />
-            </ItemWrapper>
-          ))}
-        </TradingComponentScrollWrapper>
-        <GoldWrapper>
-          <p>Available Gold:</p>
-          <p>${characterAvailableGold}</p>
-        </GoldWrapper>
-        <TotalWrapper>
-          <p>Total:</p>
-          <p>${sum}</p>
-        </TotalWrapper>
-        {!hasGoldForSale() ? (
-          <AlertWrapper>
-            <p> Sorry, not enough money.</p>
-          </AlertWrapper>
-        ) : (
-          <GoldWrapper>
-            <p>Final Gold:</p>
-            <p>${getFinalGold()}</p>
-          </GoldWrapper>
-        )}
-
-        <ButtonWrapper>
-          <Button
-            buttonType={ButtonTypes.RPGUIButton}
-            disabled={!hasGoldForSale()}
-            onPointerDown={() => onConfirmClick()}
-          >
-            Confirm
-          </Button>
-          <Button
-            buttonType={ButtonTypes.RPGUIButton}
-            onPointerDown={() => onClose()}
-          >
-            Cancel
-          </Button>
-        </ButtonWrapper>
-      </>
-    </DraggableContainer>
-  );
-};
-
-const Title = styled.h1`
-  z-index: 22;
-  font-size: 0.6rem;
-  color: yellow !important;
-`;
-
-const TradingComponentScrollWrapper = styled.div`
-  overflow-y: scroll;
-  height: 390px;
-  width: 100%;
-  margin-top: 1rem;
-`;
-
-const ItemWrapper = styled.div`
-  margin: auto;
-  display: flex;
-  justify-content: space-between;
-`;
-
-const TotalWrapper = styled.div`
-  margin-top: 1rem;
-  display: flex;
-  justify-content: space-between;
-  height: 20px;
-  p {
-    color: white !important;
-  }
-  width: 100%;
-  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`
-  margin-top: 1rem;
-  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;
-`;
+import {
+  IEquipmentSet,
+  ITradeRequestItem,
+  ITradeResponseItem,
+  TradeTransactionType,
+} from '@rpg-engine/shared';
+import React, { 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 ITradingMenu {
+  traderItems: ITradeResponseItem[];
+  onClose: () => void;
+  onConfirm: (items: ITradeRequestItem[]) => void;
+  type: TradeTransactionType;
+  atlasJSON: any;
+  atlasIMG: any;
+  characterAvailableGold: number;
+  equipmentSet?: IEquipmentSet | null;
+  scale?: number;
+}
+
+export const TradingMenu: React.FC<ITradingMenu> = ({
+  traderItems,
+  onClose,
+  type,
+  atlasJSON,
+  atlasIMG,
+  characterAvailableGold,
+  onConfirm,
+  equipmentSet,
+  scale,
+}) => {
+  const [sum, setSum] = useState(0);
+  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 => {
+      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: ITradeRequestItem[] = [];
+
+    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}
+      onCloseButton={() => {
+        if (onClose) onClose();
+      }}
+      width="600px"
+      cancelDrag="#TraderContainer"
+    >
+      <>
+        <div style={{ width: '100%' }}>
+          <Title>{Capitalize(type)} Menu</Title>
+          <hr className="golden" />
+        </div>
+        <TradingComponentScrollWrapper id="TraderContainer">
+          {traderItems.map((tradeItem, index) => (
+            <ItemWrapper key={`${tradeItem.key}_${index}`}>
+              <TradingItemRow
+                atlasIMG={atlasIMG}
+                atlasJSON={atlasJSON}
+                onQuantityChange={onQuantityChange}
+                traderItem={tradeItem}
+                selectedQty={qtyMap.get(tradeItem.key) ?? 0}
+                equipmentSet={equipmentSet}
+                scale={scale}
+              />
+            </ItemWrapper>
+          ))}
+        </TradingComponentScrollWrapper>
+        <GoldWrapper>
+          <p>Available Gold:</p>
+          <p>${characterAvailableGold}</p>
+        </GoldWrapper>
+        <TotalWrapper>
+          <p>Total:</p>
+          <p>${sum}</p>
+        </TotalWrapper>
+        {!hasGoldForSale() ? (
+          <AlertWrapper>
+            <p> Sorry, not enough money.</p>
+          </AlertWrapper>
+        ) : (
+          <GoldWrapper>
+            <p>Final Gold:</p>
+            <p>${getFinalGold()}</p>
+          </GoldWrapper>
+        )}
+
+        <ButtonWrapper>
+          <Button
+            buttonType={ButtonTypes.RPGUIButton}
+            disabled={!hasGoldForSale()}
+            onPointerDown={() => onConfirmClick()}
+          >
+            Confirm
+          </Button>
+          <Button
+            buttonType={ButtonTypes.RPGUIButton}
+            onPointerDown={() => onClose()}
+          >
+            Cancel
+          </Button>
+        </ButtonWrapper>
+      </>
+    </DraggableContainer>
+  );
+};
+
+const Title = styled.h1`
+  z-index: 22;
+  font-size: 0.6rem;
+  color: yellow !important;
+`;
+
+const TradingComponentScrollWrapper = styled.div`
+  overflow-y: scroll;
+  height: 390px;
+  width: 100%;
+  margin-top: 1rem;
+`;
+
+const ItemWrapper = styled.div`
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const TotalWrapper = styled.div`
+  margin-top: 1rem;
+  display: flex;
+  justify-content: space-between;
+  height: 20px;
+  p {
+    color: white !important;
+  }
+  width: 100%;
+  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`
+  margin-top: 1rem;
+  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

@@ -1,96 +1,48 @@
-import { ITradeResponseItem } from '@rpg-engine/shared';
-
-export enum SwordsBlueprint {
-  ShortSword = "short-sword",
-  BasiliskSword = "basilisk-sword",
-  DragonsSword = "dragon's-sword",
-  DoubleEdgedSword = "double-edged-sword",
-  BroadSword = "broad-sword",
-  ElvenSword = "elven-sword",
-  FireSword = "fire-sword",
-  Katana = "katana",
-  KnightsSword = "knights-sword",
-  IceSword = "ice-sword",
-}
-
-export const itemMock: ITradeResponseItem[] = [
-  {
-    texturePath: 'swords/broad-sword.png',
-    name: 'Silver Short Sword Premium',
-    price: 100,
-    key: SwordsBlueprint.IceSword,
-    qty: 12
-  },
-  {
-    texturePath: "swords/corruption-sword.png",
-    name: 'Short sword Best',
-    price: 100,
-    key: SwordsBlueprint.DragonsSword,
-  },
-  {
-    texturePath: 'swords/broad-sword.png',
-    name: 'Short sword Trade',
-    price: 100,
-    key: SwordsBlueprint.FireSword,
-  },
-  {
-    texturePath: 'swords/broad-sword.png',
-    name: 'Silver Short Sword Premium',
-    price: 100,
-    key: SwordsBlueprint.IceSword,
-    qty: 12
-  },
-  {
-    texturePath: "swords/corruption-sword.png",
-    name: 'Short sword Best',
-    price: 100,
-    key: SwordsBlueprint.DragonsSword,
-  },
-  {
-    texturePath: 'swords/broad-sword.png',
-    name: 'Short sword Trade',
-    price: 100,
-    key: SwordsBlueprint.FireSword,
-  },
-  
-  {
-    texturePath: 'swords/broad-sword.png',
-    name: 'Silver Short Sword Premium',
-    price: 100,
-    key: SwordsBlueprint.IceSword,
-    qty: 12
-  },
-  {
-    texturePath: "swords/corruption-sword.png",
-    name: 'Short sword Best',
-    price: 100,
-    key: SwordsBlueprint.DragonsSword,
-  },
-  {
-    texturePath: 'swords/broad-sword.png',
-    name: 'Short sword Trade',
-    price: 100,
-    key: SwordsBlueprint.FireSword,
-  },
-  {
-    texturePath: 'swords/broad-sword.png',
-    name: 'Silver Short Sword Premium',
-    price: 100,
-    key: SwordsBlueprint.IceSword,
-    qty: 12
-  },
-  {
-    texturePath: "swords/corruption-sword.png",
-    name: 'Short sword Best',
-    price: 100,
-    key: SwordsBlueprint.DragonsSword,
-  },
-  {
-    texturePath: 'swords/broad-sword.png',
-    name: 'Short sword Trade',
-    price: 100,
-    key: SwordsBlueprint.FireSword,
-  },
-  
-  
-];
+import { ITradeResponseItem } from '@rpg-engine/shared';
+import { items } from '../../mocks/itemContainer.mocks';
+
+export enum SwordsBlueprint {
+  ShortSword = 'short-sword',
+  BasiliskSword = 'basilisk-sword',
+  DragonsSword = "dragon's-sword",
+  DoubleEdgedSword = 'double-edged-sword',
+  BroadSword = 'broad-sword',
+  ElvenSword = 'elven-sword',
+  FireSword = 'fire-sword',
+  Katana = 'katana',
+  KnightsSword = 'knights-sword',
+  IceSword = 'ice-sword',
+}
+
+export const itemMock: ITradeResponseItem[] = [
+  {
+    ...items[0],
+    price: 100,
+    stackQty: 12,
+  },
+  {
+    ...items[1],
+    price: 100,
+  },
+  {
+    ...items[2],
+    price: 100,
+  },
+  {
+    ...items[3],
+    price: 100,
+    stackQty: 100,
+  },
+  {
+    ...items[4],
+    price: 100,
+  },
+  {
+    ...items[5],
+    price: 100,
+  },
+  {
+    ...items[6],
+    price: 100,
+  },
+];

package/src/components/Truncate.tsx

@@ -1,25 +1,25 @@
-/* eslint-disable react/require-default-props */
-import React from 'react';
-import styled from 'styled-components';
-
-interface IProps {
-  maxLines?: number;
-  children: React.ReactNode;
-}
-
-export const Truncate: React.FC<IProps> = ({ maxLines = 1, children }) => {
-  return <Container maxLines={maxLines}>{children}</Container>;
-};
-
-interface IContainerProps {
-  maxLines: number;
-}
-
-const Container = styled.div<IContainerProps>`
-  display: -webkit-box;
-  max-width: 100%;
-  max-height: 100%;
-  -webkit-line-clamp: ${props => props.maxLines};
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-`;
+/* eslint-disable react/require-default-props */
+import React from 'react';
+import styled from 'styled-components';
+
+interface IProps {
+  maxLines?: number;
+  children: React.ReactNode;
+}
+
+export const Truncate: React.FC<IProps> = ({ maxLines = 1, children }) => {
+  return <Container maxLines={maxLines}>{children}</Container>;
+};
+
+interface IContainerProps {
+  maxLines: number;
+}
+
+const Container = styled.div<IContainerProps>`
+  display: -webkit-box;
+  max-width: 100%;
+  max-height: 100%;
+  -webkit-line-clamp: ${props => props.maxLines};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;