@rpg-engine/long-bow 0.4.2 → 0.4.4

package/src/components/Marketplace/Marketplace.tsx

@@ -1,132 +1,132 @@
-import { IEquipmentSet, IItem } from '@rpg-engine/shared';
-import React, { ChangeEvent } from 'react';
-import styled from 'styled-components';
-import { DraggableContainer } from '../DraggableContainer';
-import { Dropdown, IOptionsProps } from '../Dropdown';
-import { Input } from '../Input';
-import { RPGUIContainerTypes } from '../RPGUIContainer';
-import { MarketplaceRows } from './MarketplaceRows';
-
-export interface IMarketPlaceProps {
-  items: IItem[] | null;
-  atlasJSON: any;
-  atlasIMG: any;
-  optionsType: IOptionsProps[];
-  optionsRarity: IOptionsProps[];
-  optionsPrice: IOptionsProps[];
-  onClose: () => void;
-  onChangeType: (value: string) => void;
-  onChangeRarity: (value: string) => void;
-  onChangeOrder: (value: string) => void;
-  onChangeNameInput: (event: ChangeEvent<HTMLInputElement>) => void;
-  scale?: number;
-  equipmentSet?: IEquipmentSet | null;
-  onHandleClick: (value: string) => void;
-}
-
-export const Marketplace: React.FC<IMarketPlaceProps> = ({
-  items,
-  atlasIMG,
-  atlasJSON,
-  onClose,
-  optionsType,
-  optionsRarity,
-  optionsPrice,
-  onChangeType,
-  onChangeRarity,
-  onChangeOrder,
-  onChangeNameInput,
-  scale,
-  equipmentSet,
-  onHandleClick,
-}) => {
-  return (
-    <DraggableContainer
-      type={RPGUIContainerTypes.Framed}
-      onCloseButton={() => {
-        if (onClose) onClose();
-      }}
-      width="800px"
-      cancelDrag="#MarketContainer"
-      scale={scale}
-    >
-      <>
-        <InputWrapper>
-          <p> Search By Name</p>
-          <Input onChange={onChangeNameInput} placeholder={'Search...'} />
-        </InputWrapper>
-
-        <WrapperContainer>
-          <StyledDropdown
-            options={optionsType}
-            onChange={onChangeType}
-            width={'220px'}
-          />
-          <StyledDropdown
-            options={optionsRarity}
-            onChange={onChangeRarity}
-            width={'220px'}
-          />
-          <StyledDropdown
-            options={optionsPrice}
-            onChange={onChangeOrder}
-            width={'220px'}
-          />
-        </WrapperContainer>
-        <ItemComponentScrollWrapper id="MarketContainer">
-          {items?.map((item, index) => (
-            <MarketplaceRows
-              key={`${item.key}_${index}`}
-              atlasIMG={atlasIMG}
-              atlasJSON={atlasJSON}
-              item={item}
-              itemPrice={10}
-              equipmentSet={equipmentSet}
-              onHandleClick={onHandleClick}
-            />
-          ))}
-        </ItemComponentScrollWrapper>
-      </>
-    </DraggableContainer>
-  );
-};
-
-const InputWrapper = styled.div`
-  width: 95%;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  margin: auto;
-  margin-bottom: 10px;
-  p {
-    width: auto;
-    margin-right: 20px;
-  }
-  input {
-    width: 68%;
-    height: 10px;
-  }
-`;
-
-const WrapperContainer = styled.div`
-  display: grid;
-  grid-template-columns: 30% 30% 30%;
-  justify-content: space-between;
-  width: 90%;
-  margin-left: 10px;
-  .rpgui-content .rpgui-dropdown-imp-header {
-    padding: 0px 10px 0 !important;
-  }
-`;
-
-const ItemComponentScrollWrapper = styled.div`
-  overflow-y: scroll;
-  height: 390px;
-  width: 100%;
-  margin-top: 1rem;
-`;
-
-const StyledDropdown = styled(Dropdown)`
-  margin: 3px !important;
-  width: 170px !important;
-`;
+import { IEquipmentSet, IItem } from '@rpg-engine/shared';
+import React, { ChangeEvent } from 'react';
+import styled from 'styled-components';
+import { DraggableContainer } from '../DraggableContainer';
+import { Dropdown, IOptionsProps } from '../Dropdown';
+import { Input } from '../Input';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { MarketplaceRows } from './MarketplaceRows';
+
+export interface IMarketPlaceProps {
+  items: IItem[] | null;
+  atlasJSON: any;
+  atlasIMG: any;
+  optionsType: IOptionsProps[];
+  optionsRarity: IOptionsProps[];
+  optionsPrice: IOptionsProps[];
+  onClose: () => void;
+  onChangeType: (value: string) => void;
+  onChangeRarity: (value: string) => void;
+  onChangeOrder: (value: string) => void;
+  onChangeNameInput: (event: ChangeEvent<HTMLInputElement>) => void;
+  scale?: number;
+  equipmentSet?: IEquipmentSet | null;
+  onHandleClick: (value: string) => void;
+}
+
+export const Marketplace: React.FC<IMarketPlaceProps> = ({
+  items,
+  atlasIMG,
+  atlasJSON,
+  onClose,
+  optionsType,
+  optionsRarity,
+  optionsPrice,
+  onChangeType,
+  onChangeRarity,
+  onChangeOrder,
+  onChangeNameInput,
+  scale,
+  equipmentSet,
+  onHandleClick,
+}) => {
+  return (
+    <DraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={() => {
+        if (onClose) onClose();
+      }}
+      width="800px"
+      cancelDrag="#MarketContainer"
+      scale={scale}
+    >
+      <>
+        <InputWrapper>
+          <p> Search By Name</p>
+          <Input onChange={onChangeNameInput} placeholder={'Search...'} />
+        </InputWrapper>
+
+        <WrapperContainer>
+          <StyledDropdown
+            options={optionsType}
+            onChange={onChangeType}
+            width={'220px'}
+          />
+          <StyledDropdown
+            options={optionsRarity}
+            onChange={onChangeRarity}
+            width={'220px'}
+          />
+          <StyledDropdown
+            options={optionsPrice}
+            onChange={onChangeOrder}
+            width={'220px'}
+          />
+        </WrapperContainer>
+        <ItemComponentScrollWrapper id="MarketContainer">
+          {items?.map((item, index) => (
+            <MarketplaceRows
+              key={`${item.key}_${index}`}
+              atlasIMG={atlasIMG}
+              atlasJSON={atlasJSON}
+              item={item}
+              itemPrice={10}
+              equipmentSet={equipmentSet}
+              onHandleClick={onHandleClick}
+            />
+          ))}
+        </ItemComponentScrollWrapper>
+      </>
+    </DraggableContainer>
+  );
+};
+
+const InputWrapper = styled.div`
+  width: 95%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin: auto;
+  margin-bottom: 10px;
+  p {
+    width: auto;
+    margin-right: 20px;
+  }
+  input {
+    width: 68%;
+    height: 10px;
+  }
+`;
+
+const WrapperContainer = styled.div`
+  display: grid;
+  grid-template-columns: 30% 30% 30%;
+  justify-content: space-between;
+  width: 90%;
+  margin-left: 10px;
+  .rpgui-content .rpgui-dropdown-imp-header {
+    padding: 0px 10px 0 !important;
+  }
+`;
+
+const ItemComponentScrollWrapper = styled.div`
+  overflow-y: scroll;
+  height: 390px;
+  width: 100%;
+  margin-top: 1rem;
+`;
+
+const StyledDropdown = styled(Dropdown)`
+  margin: 3px !important;
+  width: 170px !important;
+`;

package/src/components/Marketplace/MarketplaceRows.tsx

@@ -1,171 +1,171 @@
-import {
-  getItemTextureKeyPath,
-  IEquipmentSet,
-  IItem,
-} from '@rpg-engine/shared';
-import React from 'react';
-import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
-import { uiFonts } from '../../constants/uiFonts';
-import { Button, ButtonTypes } from '../Button';
-import { ItemInfoWrapper } from '../Item/Cards/ItemInfoWrapper';
-import { Ellipsis } from '../shared/Ellipsis';
-import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
-
-export interface IMarketPlaceRowsPropos {
-  atlasJSON: any;
-  atlasIMG: any;
-  item: IItem;
-  itemPrice: number;
-  equipmentSet?: IEquipmentSet | null;
-  scale?: number;
-  onHandleClick: (value: string) => void;
-}
-
-export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
-  atlasJSON,
-  atlasIMG,
-  item,
-  itemPrice,
-  equipmentSet,
-  scale,
-  onHandleClick,
-}) => {
-  return (
-    <MarketPlaceWrapper>
-      <ItemIconContainer>
-        <SpriteContainer>
-          <ItemInfoWrapper
-            item={item}
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            equipmentSet={equipmentSet}
-            scale={scale}
-          >
-            <SpriteFromAtlas
-              atlasIMG={atlasIMG}
-              atlasJSON={atlasJSON}
-              spriteKey={getItemTextureKeyPath(
-                {
-                  key: item.key,
-                  stackQty: item.stackQty || 1,
-                  texturePath: item.texturePath,
-                  isStackable: item.isStackable,
-                },
-                atlasJSON
-              )}
-              imgScale={2}
-            />
-          </ItemInfoWrapper>
-        </SpriteContainer>
-        <PriceValue>
-          <p>
-            <Ellipsis maxLines={1} maxWidth="150px" fontSize="10px">
-              {item.name}
-            </Ellipsis>
-          </p>
-        </PriceValue>
-      </ItemIconContainer>
-      <QuantityContainer>
-        <QuantityDisplay>
-          <TextOverlay>
-            <Item>
-              <Ellipsis maxLines={1} maxWidth="150px" fontSize="10px">
-                {item.rarity}
-              </Ellipsis>
-            </Item>
-          </TextOverlay>
-        </QuantityDisplay>
-      </QuantityContainer>
-      <ItemIconContainer>
-        <SpriteContainer>
-          <SpriteFromAtlas
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            spriteKey={'others/gold-coin-qty-4.png'}
-            imgScale={2}
-          />
-        </SpriteContainer>
-        <PriceValue>
-          <p>
-            <Ellipsis maxLines={1} maxWidth="150px" fontSize="10px">
-              ${itemPrice}
-            </Ellipsis>
-          </p>
-        </PriceValue>
-      </ItemIconContainer>
-      <ButtonContainer>
-        <Button
-          buttonType={ButtonTypes.RPGUIButton}
-          onClick={() => onHandleClick(item.name)}
-        >
-          Buy
-        </Button>
-      </ButtonContainer>
-    </MarketPlaceWrapper>
-  );
-};
-
-const MarketPlaceWrapper = styled.div`
-  margin: auto;
-  display: grid;
-  grid-template-columns: 35% 20% 20% 25%;
-
-  &:hover {
-    background-color: ${uiColors.darkGray};
-  }
-  padding: 0.5rem;
-  p {
-    font-size: 0.8rem;
-  }
-`;
-
-const ItemIconContainer = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-`;
-
-const SpriteContainer = styled.div`
-  position: relative;
-  top: -0.5rem;
-  left: 0.5rem;
-`;
-
-const Item = styled.span`
-  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;
-  justify-content: center;
-  align-items: center;
-`;
-
-const QuantityDisplay = styled.div`
-  font-size: ${uiFonts.size.small};
-`;
-
-const PriceValue = styled.div`
-  margin-left: 40px;
-`;
-
-const ButtonContainer = styled.div`
-  margin: auto;
-`;
+import {
+  getItemTextureKeyPath,
+  IEquipmentSet,
+  IItem,
+} from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { uiFonts } from '../../constants/uiFonts';
+import { Button, ButtonTypes } from '../Button';
+import { ItemInfoWrapper } from '../Item/Cards/ItemInfoWrapper';
+import { Ellipsis } from '../shared/Ellipsis';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+export interface IMarketPlaceRowsPropos {
+  atlasJSON: any;
+  atlasIMG: any;
+  item: IItem;
+  itemPrice: number;
+  equipmentSet?: IEquipmentSet | null;
+  scale?: number;
+  onHandleClick: (value: string) => void;
+}
+
+export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
+  atlasJSON,
+  atlasIMG,
+  item,
+  itemPrice,
+  equipmentSet,
+  scale,
+  onHandleClick,
+}) => {
+  return (
+    <MarketPlaceWrapper>
+      <ItemIconContainer>
+        <SpriteContainer>
+          <ItemInfoWrapper
+            item={item}
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            equipmentSet={equipmentSet}
+            scale={scale}
+          >
+            <SpriteFromAtlas
+              atlasIMG={atlasIMG}
+              atlasJSON={atlasJSON}
+              spriteKey={getItemTextureKeyPath(
+                {
+                  key: item.key,
+                  stackQty: item.stackQty || 1,
+                  texturePath: item.texturePath,
+                  isStackable: item.isStackable,
+                },
+                atlasJSON
+              )}
+              imgScale={2}
+            />
+          </ItemInfoWrapper>
+        </SpriteContainer>
+        <PriceValue>
+          <p>
+            <Ellipsis maxLines={1} maxWidth="150px" fontSize="10px">
+              {item.name}
+            </Ellipsis>
+          </p>
+        </PriceValue>
+      </ItemIconContainer>
+      <QuantityContainer>
+        <QuantityDisplay>
+          <TextOverlay>
+            <Item>
+              <Ellipsis maxLines={1} maxWidth="150px" fontSize="10px">
+                {item.rarity}
+              </Ellipsis>
+            </Item>
+          </TextOverlay>
+        </QuantityDisplay>
+      </QuantityContainer>
+      <ItemIconContainer>
+        <SpriteContainer>
+          <SpriteFromAtlas
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            spriteKey={'others/gold-coin-qty-4.png'}
+            imgScale={2}
+          />
+        </SpriteContainer>
+        <PriceValue>
+          <p>
+            <Ellipsis maxLines={1} maxWidth="150px" fontSize="10px">
+              ${itemPrice}
+            </Ellipsis>
+          </p>
+        </PriceValue>
+      </ItemIconContainer>
+      <ButtonContainer>
+        <Button
+          buttonType={ButtonTypes.RPGUIButton}
+          onClick={() => onHandleClick(item.name)}
+        >
+          Buy
+        </Button>
+      </ButtonContainer>
+    </MarketPlaceWrapper>
+  );
+};
+
+const MarketPlaceWrapper = styled.div`
+  margin: auto;
+  display: grid;
+  grid-template-columns: 35% 20% 20% 25%;
+
+  &:hover {
+    background-color: ${uiColors.darkGray};
+  }
+  padding: 0.5rem;
+  p {
+    font-size: 0.8rem;
+  }
+`;
+
+const ItemIconContainer = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
+const SpriteContainer = styled.div`
+  position: relative;
+  top: -0.5rem;
+  left: 0.5rem;
+`;
+
+const Item = styled.span`
+  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;
+  justify-content: center;
+  align-items: center;
+`;
+
+const QuantityDisplay = styled.div`
+  font-size: ${uiFonts.size.small};
+`;
+
+const PriceValue = styled.div`
+  margin-left: 40px;
+`;
+
+const ButtonContainer = styled.div`
+  margin: auto;
+`;