@rpg-engine/long-bow 0.7.82 → 0.7.84

package/package.json

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

package/src/components/Marketplace/MarketplaceRows.tsx

@@ -9,6 +9,7 @@ import { uiColors } from '../../constants/uiColors';
 import { uiFonts } from '../../constants/uiFonts';
 import { Button, ButtonTypes } from '../Button';
 import { ItemInfoWrapper } from '../Item/Cards/ItemInfoWrapper';
+import { onRenderGems } from '../Item/Inventory/ItemGem';
 import { rarityColor } from '../Item/Inventory/ItemSlotRarity';
 import { Ellipsis } from '../shared/Ellipsis';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
@@ -36,6 +37,10 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
   onMarketPlaceItemRemove,
   disabled,
 }) => {
+  const renderGems = (item: IItem) => {
+    return item.attachedGems && onRenderGems(item);
+  };
+
   return (
     <MarketplaceWrapper>
       <ItemIconContainer>
@@ -47,6 +52,7 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
             equipmentSet={equipmentSet}
             scale={scale}
           >
+            <GemContainer>{renderGems(item)}</GemContainer>
             <RarityContainer item={item}>
               <SpriteFromAtlas
                 atlasIMG={atlasIMG}
@@ -61,8 +67,10 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
                   atlasJSON
                 )}
                 imgScale={2}
+                imgClassname="sprite-from-atlas-img--item"
               />
             </RarityContainer>
+
             <QuantityContainer>
               {item.stackQty &&
                 item.stackQty > 1 &&
@@ -139,6 +147,14 @@ const QuantityContainer = styled.p`
   font-size: ${uiFonts.size.xsmall} !important;
 `;
 
+const GemContainer = styled.p`
+  position: absolute;
+  display: block;
+  top: -5px;
+  left: -10px;
+  font-size: ${uiFonts.size.xsmall} !important;
+`;
+
 const Flex = styled.div`
   display: flex;
   gap: 24px;

package/src/components/TradingMenu/PremiumLabel.tsx

@@ -0,0 +1,62 @@
+import { UserAccountTypes } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+
+interface IPremiumLabelProps {
+  accountType: UserAccountTypes;
+}
+
+const PremiumLabel: React.FC<IPremiumLabelProps> = ({ accountType }) => {
+  if (accountType === UserAccountTypes.Free) return null;
+
+  const getBackgroundColor = () => {
+    switch (accountType) {
+      case UserAccountTypes.PremiumBronze:
+        return '#CD7F32';
+      case UserAccountTypes.PremiumSilver:
+        return '#C0C0C0';
+      case UserAccountTypes.PremiumGold:
+        return '#FFD700';
+      case UserAccountTypes.PremiumUltimate:
+        return '#002E99';
+      default:
+        return 'transparent';
+    }
+  };
+
+  const getShortLabel = () => {
+    switch (accountType) {
+      case UserAccountTypes.PremiumBronze:
+        return 'Bronze PA';
+      case UserAccountTypes.PremiumSilver:
+        return 'Silver PA';
+      case UserAccountTypes.PremiumGold:
+        return 'Gold PA';
+      case UserAccountTypes.PremiumUltimate:
+        return 'Ultimate PA';
+      default:
+        return '';
+    }
+  };
+
+  return (
+    <StyledLabel backgroundColor={getBackgroundColor()}>
+      {getShortLabel()}
+    </StyledLabel>
+  );
+};
+
+const StyledLabel = styled.span<{ backgroundColor: string }>`
+  background-color: ${({ backgroundColor }) => backgroundColor};
+  color: ${({ backgroundColor }) =>
+    backgroundColor === '#002E99' ? 'white' : 'black'};
+  font-weight: bold;
+  padding: 0 0.4rem;
+  border-radius: 3px;
+  margin-right: 3px;
+  margin-bottom: 2px;
+  display: inline-block;
+  font-size: 0.5rem !important;
+`;
+
+export default PremiumLabel;

package/src/components/TradingMenu/TradingItemRow.tsx

@@ -2,7 +2,6 @@ import {
   getItemTextureKeyPath,
   IEquipmentSet,
   ITradeResponseItem,
-  UserAccountTypes,
 } from '@rpg-engine/shared';
 import capitalize from 'lodash/capitalize';
 import React, { useEffect, useState } from 'react';
@@ -13,6 +12,8 @@ import SelectArrow from '../Arrow/SelectArrow';
 import { ItemInfoWrapper } from '../Item/Cards/ItemInfoWrapper';
 import { Ellipsis } from '../shared/Ellipsis';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import PremiumLabel from './PremiumLabel';
+
 export interface ITradeComponentProps {
   traderItem: ITradeResponseItem;
   onQuantityChange: (
@@ -76,40 +77,9 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
 
   const renderAccountTypeIndicator = () => {
     if (isBuy && traderItem.canBePurchasedOnlyByPremiumPlans) {
-      return traderItem.canBePurchasedOnlyByPremiumPlans.map(accountType => {
-        if (accountType !== UserAccountTypes.Free) {
-          let backgroundColor;
-          let textColor = 'black';
-
-          switch (accountType) {
-            case UserAccountTypes.PremiumBronze:
-              backgroundColor = '#CD7F32';
-              break;
-            case UserAccountTypes.PremiumSilver:
-              backgroundColor = '#C0C0C0';
-              break;
-            case UserAccountTypes.PremiumGold:
-              backgroundColor = '#FFD700';
-              break;
-            case UserAccountTypes.PremiumUltimate:
-              backgroundColor = '#002E99';
-              break;
-            default:
-              return null;
-          }
-
-          return (
-            <PremiumLabel
-              backgroundColor={backgroundColor}
-              textColor={textColor}
-              key={accountType}
-            >
-              {capitalize(accountType) + ' PA'}
-            </PremiumLabel>
-          );
-        }
-        return null;
-      });
+      return traderItem.canBePurchasedOnlyByPremiumPlans.map(accountType => (
+        <PremiumLabel key={accountType} accountType={accountType} />
+      ));
     }
     return null;
   };
@@ -137,7 +107,7 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
                 },
                 atlasJSON
               )}
-              imgScale={2.5}
+              imgScale={2}
             />
           </ItemInfoWrapper>
         </SpriteContainer>
@@ -146,7 +116,7 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
       <ItemNameContainer>
         <NameValue>
           <p>
-            <Ellipsis maxLines={1} maxWidth="250px">
+            <Ellipsis maxLines={1} maxWidth="180px">
               {capitalize(traderItem.name)}
             </Ellipsis>
           </p>
@@ -156,17 +126,17 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
       </ItemNameContainer>
       <QuantityContainer>
         <SelectArrow
-          size={32}
+          size={24}
           className="arrow-selector"
           direction="left"
-          onPointerDown={onLeftClick.bind(null, outerQty)}
-          scale={0.8}
+          onPointerDown={() => onLeftClick(outerQty)}
+          scale={0.7}
         />
         <StyledArrow
-          size={32}
+          size={24}
           className="arrow-selector"
           direction="left"
-          onPointerDown={onLeftClick}
+          onPointerDown={() => onLeftClick()}
         />
         <QuantityInput
           type="text"
@@ -175,107 +145,85 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
           onBlur={handleBlur}
         />
         <StyledArrow
-          size={32}
+          size={24}
           className="arrow-selector"
           direction="right"
-          onPointerDown={onRightClick}
+          onPointerDown={() => onRightClick()}
         />
         <SelectArrow
-          size={32}
+          size={24}
           className="arrow-selector"
           direction="right"
-          onPointerDown={onRightClick.bind(null, outerQty)}
-          scale={0.8}
+          onPointerDown={() => onRightClick(outerQty)}
+          scale={0.7}
         />
       </QuantityContainer>
     </ItemWrapper>
   );
 };
 
-const PremiumLabel = styled.span<{
-  backgroundColor: string;
-  textColor: string;
-}>`
-  background-color: ${({ backgroundColor }) => backgroundColor};
-  color: ${({ textColor }) => textColor};
-  font-weight: bold;
-  padding: 2px 5px;
-  border-radius: 5px;
-  margin-right: 5px;
-  margin-bottom: 5px;
-  display: inline-block;
-`;
-
 const StyledArrow = styled(SelectArrow)`
-  margin: 40px;
+  margin: 0 1.5rem;
 `;
 
 const ItemWrapper = styled.div`
   width: 100%;
-  margin: auto;
   display: flex;
   justify-content: space-between;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
+  padding: 0.25rem;
 
   &:hover {
     background-color: ${uiColors.darkGray};
   }
-  padding: 0.5rem;
 `;
 
 const ItemNameContainer = styled.div`
   flex: 60%;
+  display: flex;
+  align-items: center;
 `;
 
 const ItemIconContainer = styled.div`
   display: flex;
   justify-content: flex-start;
   align-items: center;
-
-  flex: 0 0 58px;
+  flex: 0 0 40px;
 `;
 
 const SpriteContainer = styled.div`
   position: relative;
   top: -0.5rem;
-  left: 0.5rem;
+  left: 0;
 `;
 
 const NameValue = styled.div`
   p {
-    font-size: 0.75rem;
+    font-size: 0.6rem;
     margin: 0;
+    line-height: 1.2;
   }
 `;
 
-interface IContainerProps {
-  percentageWidth?: number;
-  minWidth?: number;
-  style?: Record<string, any>;
-}
-
-const QuantityContainer = styled.div<IContainerProps>`
-  position: relative;
+const QuantityContainer = styled.div`
   display: flex;
-
-  min-width: 100px;
+  min-width: 90px;
   width: 40%;
-  justify-content: center;
+  justify-content: flex-end;
   align-items: center;
-
-  flex: 40%;
+  flex: 30%;
+  gap: 2px;
+  position: relative;
 `;
 
 const QuantityInput = styled.input`
-  width: 40px;
+  width: 30px;
   text-align: center;
   background-color: ${uiColors.darkGray};
   color: white;
-  border: 1px solid ${uiColors.lightGray};
-  padding: 2px;
-  font-size: ${uiFonts.size.small};
   border: none;
-
+  padding: 1px;
+  font-size: ${uiFonts.size.small};
   position: relative;
-  left: -3px;
+  right: 4px;
 `;

package/src/components/TradingMenu/TradingMenu.tsx

@@ -4,12 +4,13 @@ import {
   ITradeResponseItem,
   TradeTransactionType,
 } from '@rpg-engine/shared';
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { Button, ButtonTypes } from '../Button';
 import { DraggableContainer } from '../DraggableContainer';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
 import { TradingItemRow } from './TradingItemRow';
+import { useTradingGold } from './useTradingGold';
 
 export interface ITradingMenu {
   traderItems: ITradeResponseItem[];
@@ -34,187 +35,127 @@ export const TradingMenu: React.FC<ITradingMenu> = ({
   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);
-  };
+  const {
+    sum,
+    qtyMap,
+    isBuy,
+    hasGoldForSale,
+    getFinalGold,
+    getTradeItems,
+    updateQuantity,
+  } = useTradingGold({ characterAvailableGold, type, traderItems });
 
   return (
     <DraggableContainer
       type={RPGUIContainerTypes.Framed}
-      onCloseButton={() => {
-        if (onClose) onClose();
-      }}
-      width="600px"
+      onCloseButton={onClose}
+      width="500px"
       cancelDrag="#TraderContainer"
       scale={scale}
     >
-      <>
-        <div style={{ width: '100%' }}>
-          <Title>{Capitalize(type)} Menu</Title>
-          <hr className="golden" />
-        </div>
-        <TradingComponentScrollWrapper id="TraderContainer">
+      <Container>
+        <Title>{type.charAt(0).toUpperCase() + type.slice(1)} Menu</Title>
+        <hr className="golden" />
+
+        <ScrollWrapper 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}
-                isBuy={isBuy()}
-              />
-            </ItemWrapper>
+            <TradingItemRow
+              key={`${tradeItem.key}_${index}`}
+              atlasIMG={atlasIMG}
+              atlasJSON={atlasJSON}
+              onQuantityChange={updateQuantity}
+              traderItem={tradeItem}
+              selectedQty={qtyMap.get(tradeItem.key) ?? 0}
+              equipmentSet={equipmentSet}
+              scale={scale}
+              isBuy={isBuy()}
+            />
           ))}
-        </TradingComponentScrollWrapper>
-        <GoldWrapper>
-          <p>Available Gold:</p>
-          <p>${characterAvailableGold.toFixed(2)}</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().toFixed(2)}</p>
-          </GoldWrapper>
-        )}
+        </ScrollWrapper>
+
+        <InfoSection>
+          <GoldInfo>
+            <p>Available Gold:</p>
+            <p>${characterAvailableGold.toFixed(2)}</p>
+          </GoldInfo>
+          <GoldInfo>
+            <p>Total:</p>
+            <p>${sum}</p>
+          </GoldInfo>
+          {!hasGoldForSale() ? (
+            <AlertText>Sorry, not enough money.</AlertText>
+          ) : (
+            <GoldInfo>
+              <p>Final Gold:</p>
+              <p>${getFinalGold().toFixed(2)}</p>
+            </GoldInfo>
+          )}
+        </InfoSection>
 
         <ButtonWrapper>
           <Button
             buttonType={ButtonTypes.RPGUIButton}
             disabled={!hasGoldForSale()}
-            onPointerDown={() => onConfirmClick()}
+            onPointerDown={() => onConfirm(getTradeItems())}
           >
             Confirm
           </Button>
-          <Button
-            buttonType={ButtonTypes.RPGUIButton}
-            onPointerDown={() => onClose()}
-          >
+          <Button buttonType={ButtonTypes.RPGUIButton} onPointerDown={onClose}>
             Cancel
           </Button>
         </ButtonWrapper>
-      </>
+      </Container>
     </DraggableContainer>
   );
 };
 
+const Container = styled.div`
+  width: 100%;
+`;
+
 const Title = styled.h1`
-  z-index: 22;
-  font-size: 0.6rem;
+  font-size: 0.7rem !important;
   color: yellow !important;
+  text-align: center;
 `;
 
-const TradingComponentScrollWrapper = styled.div`
+const ScrollWrapper = styled.div`
   overflow-y: scroll;
-  height: 390px;
+  height: 250px;
   width: 100%;
-  margin-top: 1rem;
+  margin-top: 0.3rem;
+  overflow-x: hidden;
+  padding: 0 0.3rem;
 `;
 
-const ItemWrapper = styled.div`
-  margin: auto;
-  display: flex;
-  justify-content: space-between;
+const InfoSection = styled.div`
+  margin-top: 0.3rem;
+  padding: 0 0.5rem;
 `;
 
-const TotalWrapper = styled.div`
-  margin-top: 1rem;
+const GoldInfo = styled.div`
   display: flex;
   justify-content: space-between;
-  height: 20px;
-  p {
-    color: white !important;
-  }
+  height: 16px;
   width: 100%;
-  margin-left: 0.8rem;
-`;
-
-const GoldWrapper = styled.div`
-  margin-top: 1rem;
-  display: flex;
-  justify-content: space-between;
-  height: 20px;
+  margin: 0.5rem 0;
   p {
     color: yellow !important;
+    margin: 0;
+    font-size: 0.6rem;
   }
-  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 AlertText = styled.p`
+  color: red !important;
+  text-align: center;
+  margin: 0.3rem 0;
+  font-size: 0.5rem;
 `;
 
 const ButtonWrapper = styled.div`
   display: flex;
   justify-content: space-around;
-  padding-top: 20px;
   width: 100%;
-  margin-top: 1rem;
-  button {
-    padding: 0px 50px;
-  }
+  margin-top: 0.5rem;
 `;

package/src/components/TradingMenu/useTradingGold.ts

@@ -0,0 +1,64 @@
+import {
+  ITradeRequestItem,
+  ITradeResponseItem,
+  TradeTransactionType,
+} from '@rpg-engine/shared';
+import { useState } from 'react';
+
+interface ITradingGoldHook {
+  characterAvailableGold: number;
+  type: TradeTransactionType;
+  traderItems: ITradeResponseItem[];
+}
+
+export const useTradingGold = ({
+  characterAvailableGold,
+  type,
+  traderItems,
+}: ITradingGoldHook) => {
+  const [sum, setSum] = useState(0);
+  const [qtyMap, setQtyMap] = useState(new Map<string, number>());
+
+  const isBuy = () => type === 'buy';
+
+  const hasGoldForSale = () =>
+    isBuy() ? !(sum > characterAvailableGold) : true;
+
+  const getFinalGold = () =>
+    isBuy() ? characterAvailableGold - sum : characterAvailableGold + sum;
+
+  const getTradeItems = (): ITradeRequestItem[] => {
+    const items: ITradeRequestItem[] = [];
+    traderItems.forEach(item => {
+      const qty = qtyMap.get(item.key);
+      if (qty) {
+        items.push({
+          ...item,
+          qty,
+        });
+      }
+    });
+    return items;
+  };
+
+  const updateQuantity = (item: ITradeResponseItem, selectedQty: number) => {
+    setQtyMap(new Map(qtyMap.set(item.key, selectedQty)));
+
+    let newSum = 0;
+    qtyMap.forEach((qty, key) => {
+      const item = traderItems.find(i => i.key === key);
+      if (item) newSum += qty * item.price;
+    });
+    setSum(newSum);
+  };
+
+  return {
+    sum,
+    qtyMap,
+    isBuy,
+    hasGoldForSale,
+    getFinalGold,
+    getTradeItems,
+    updateQuantity,
+  };
+};