@rpg-engine/long-bow 0.4.6 → 0.4.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "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.8.1",
+    "@rpg-engine/shared": "^0.8.13",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/ConfirmModal.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import styled from 'styled-components';
+import ModalPortal from './Abstractions/ModalPortal';
+import { Button, ButtonTypes } from './Button';
+import { DraggableContainer } from './DraggableContainer';
+
+interface IConfirmModalProps {
+  onConfirm: () => void;
+  onClose: () => void;
+  message?: string;
+}
+
+export const ConfirmModal: React.FC<IConfirmModalProps> = ({
+  onConfirm,
+  onClose,
+  message,
+}) => {
+  return (
+    <ModalPortal>
+      <Background />
+      <Container onPointerDown={onClose}>
+        <DraggableContainer width="auto" dragDisabled>
+          <Wrapper onPointerDown={e => e.stopPropagation()}>
+            <p>{message ?? 'Are you sure?'}</p>
+
+            <ButtonsWrapper>
+              <div className="cancel-button">
+                <Button
+                  buttonType={ButtonTypes.RPGUIButton}
+                  onPointerDown={onClose}
+                >
+                  No
+                </Button>
+              </div>
+              <Button
+                buttonType={ButtonTypes.RPGUIButton}
+                onPointerDown={onConfirm}
+              >
+                Yes
+              </Button>
+            </ButtonsWrapper>
+          </Wrapper>
+        </DraggableContainer>
+      </Container>
+    </ModalPortal>
+  );
+};
+
+const Background = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: #000000;
+  opacity: 0.5;
+  left: 0;
+  top: 0;
+  z-index: 1000;
+`;
+
+const Container = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1001;
+`;
+
+const Wrapper = styled.div`
+  p {
+    margin: 0;
+  }
+`;
+
+const ButtonsWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 5px;
+  margin-top: 5px;
+
+  .cancel-button {
+    filter: grayscale(0.7);
+  }
+`;

package/src/components/DraggableContainer.tsx

@@ -23,6 +23,7 @@ export interface IDraggableContainerProps {
   onOutsideClick?: () => void;
   initialPosition?: IPosition;
   scale?: number;
+  dragDisabled?: boolean;
 }
 
 export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
@@ -42,6 +43,7 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
   onOutsideClick,
   initialPosition = { x: 0, y: 0 },
   scale,
+  dragDisabled = false,
 }) => {
   const draggableRef = useRef(null);
 
@@ -66,6 +68,7 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
   return (
     <Draggable
       cancel={`.container-close,${cancelDrag}`}
+      disabled={dragDisabled}
       onDrag={(_e, data) => {
         if (onPositionChange) {
           onPositionChange({

package/src/components/Dropdown.tsx

@@ -33,7 +33,7 @@ export const Dropdown: React.FC<IDropdownProps> = ({
     if (firstOption) {
       let change = !selectedValue;
       if (!change) {
-        change = options.filter((o) => o.value === selectedValue).length < 1;
+        change = options.filter(o => o.value === selectedValue).length < 1;
       }
 
       /**
@@ -58,17 +58,17 @@ export const Dropdown: React.FC<IDropdownProps> = ({
       <DropdownSelect
         id={`dropdown-${dropdownId}`}
         className="rpgui-dropdown-imp rpgui-dropdown-imp-header"
-        onPointerDown={() => setOpened((prev) => !prev)}
+        onPointerUp={() => setOpened(prev => !prev)}
       >
         <label>▼</label> {selectedOption}
       </DropdownSelect>
 
       <DropdownOptions className="rpgui-dropdown-imp" opened={opened}>
-        {options.map((option) => {
+        {options.map(option => {
           return (
             <li
               key={option.id}
-              onPointerDown={() => {
+              onPointerUp={() => {
                 setSelectedValue(option.value);
                 setSelectedOption(option.option);
                 setOpened(false);
@@ -85,12 +85,17 @@ export const Dropdown: React.FC<IDropdownProps> = ({
 
 const Container = styled.div<{ width: string | undefined }>`
   position: relative;
-  width: ${(props) => props.width || '100%'};
+  width: ${props => props.width || '100%'};
 `;
 
 const DropdownSelect = styled.p`
   width: 100%;
   box-sizing: border-box;
+
+  label {
+    display: inline-block;
+    transform: translateY(-2px);
+  }
 `;
 
 const DropdownOptions = styled.ul<{
@@ -98,8 +103,11 @@ const DropdownOptions = styled.ul<{
 }>`
   position: absolute;
   width: 100%;
-  display: ${(props) => (props.opened ? 'block' : 'none')};
+  max-height: 300px;
+  overflow-y: auto;
+  display: ${props => (props.opened ? 'block' : 'none')};
   box-sizing: border-box;
+
   @media (max-width: 768px) {
     padding: 8px 0;
   }

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

@@ -41,10 +41,10 @@ interface IProps {
   slotIndex: number;
   item: IItem | null;
   itemContainer?: IItemContainer | null;
-  itemContainerType: ItemContainerType | null;
+  itemContainerType?: ItemContainerType | null;
   slotSpriteMask?: ItemSlotType | null;
-  onSelected: (selectedOption: string, item: IItem) => void;
-  onMouseOver: (
+  onSelected?: (selectedOption: string, item: IItem) => void;
+  onMouseOver?: (
     event: any,
     slotIndex: number,
     item: IItem | null,
@@ -57,18 +57,18 @@ interface IProps {
     itemContainerType: ItemContainerType | null,
     item: IItem
   ) => void;
-  onDragStart: (
+  onDragStart?: (
     item: IItem,
     slotIndex: number,
     itemContainerType: ItemContainerType | null
   ) => void;
-  onDragEnd: (quantity?: number) => void;
+  onDragEnd?: (quantity?: number) => void;
   onOutsideDrop?: (item: IItem, position: IPosition) => void;
   dragScale?: number;
-  checkIfItemCanBeMoved: () => boolean;
+  checkIfItemCanBeMoved?: () => boolean;
   checkIfItemShouldDragEnd?: () => boolean;
   openQuantitySelector?: (maxQuantity: number, callback: () => void) => void;
-  onPlaceDrop: (
+  onPlaceDrop?: (
     item: IItem | null,
     slotIndex: number,
     itemContainerType: ItemContainerType | null
@@ -131,7 +131,7 @@ export const ItemSlot: React.FC<IProps> = observer(
       setDragPosition({ x: 0, y: 0 });
       setIsFocused(false);
 
-      if (item) {
+      if (item && containerType) {
         setContextActions(
           generateContextMenu(item, containerType, isDepotSystem)
         );
@@ -278,7 +278,7 @@ export const ItemSlot: React.FC<IProps> = observer(
         setDragPosition({ x: 0, y: 0 });
         setIsFocused(false);
       } else if (item) {
-        onDragEnd(quantity);
+        onDragEnd?.(quantity);
       }
     };
 
@@ -288,7 +288,8 @@ export const ItemSlot: React.FC<IProps> = observer(
         className="rpgui-icon empty-slot"
         onMouseUp={() => {
           const data = item ? item : null;
-          if (onPlaceDrop) onPlaceDrop(data, slotIndex, containerType);
+          if (onPlaceDrop && containerType)
+            onPlaceDrop(data, slotIndex, containerType);
         }}
         onTouchEnd={e => {
           const { clientX, clientY } = e.changedTouches[0];
@@ -302,6 +303,13 @@ export const ItemSlot: React.FC<IProps> = observer(
             .elementFromPoint(clientX, clientY)
             ?.dispatchEvent(simulatedEvent);
         }}
+        onPointerDown={
+          onDragStart !== undefined && onDragEnd !== undefined
+            ? undefined
+            : () => {
+                if (item) onPointerDown(item.type, containerType ?? null, item);
+              }
+        }
         isSelectingShortcut={
           isSelectingShortcut &&
           (item?.type === ItemType.Consumable || item?.type === ItemType.Tool)
@@ -311,6 +319,7 @@ export const ItemSlot: React.FC<IProps> = observer(
           axis={isSelectingShortcut ? 'none' : 'both'}
           defaultClassName={item ? 'draggable' : 'empty-slot'}
           scale={dragScale}
+          disabled={onDragStart === undefined || onDragEnd === undefined}
           onStop={(e, data) => {
             const target = e.target as HTMLElement;
             if (
@@ -353,7 +362,7 @@ export const ItemSlot: React.FC<IProps> = observer(
               setDragPosition({ x, y });
 
               setTimeout(() => {
-                if (checkIfItemCanBeMoved()) {
+                if (checkIfItemCanBeMoved?.()) {
                   if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd())
                     return;
 
@@ -393,7 +402,7 @@ export const ItemSlot: React.FC<IProps> = observer(
                 }
               }
 
-              onPointerDown(item.type, containerType, item);
+              onPointerDown(item.type, containerType ?? null, item);
             }
           }}
           onStart={() => {
@@ -401,7 +410,7 @@ export const ItemSlot: React.FC<IProps> = observer(
               return;
             }
 
-            if (onDragStart) {
+            if (onDragStart && containerType) {
               onDragStart(item, slotIndex, containerType);
             }
           }}
@@ -421,7 +430,13 @@ export const ItemSlot: React.FC<IProps> = observer(
             ref={dragContainer}
             isFocused={isFocused}
             onMouseOver={event => {
-              onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
+              onMouseOver?.(
+                event,
+                slotIndex,
+                item,
+                event.clientX,
+                event.clientY
+              );
             }}
             onMouseOut={() => {
               if (onMouseOut) onMouseOut();
@@ -460,7 +475,7 @@ export const ItemSlot: React.FC<IProps> = observer(
             onSelected={(optionId: string) => {
               setIsContextMenuVisible(false);
               if (item) {
-                onSelected(optionId, item);
+                onSelected?.(optionId, item);
               }
             }}
           />
@@ -472,7 +487,7 @@ export const ItemSlot: React.FC<IProps> = observer(
             onSelected={(optionId: string) => {
               setIsContextMenuVisible(false);
               if (item) {
-                onSelected(optionId, item);
+                onSelected?.(optionId, item);
               }
             }}
             onOutsideClick={() => {

package/src/components/Marketplace/BuyPanel.tsx

@@ -0,0 +1,296 @@
+import { IEquipmentSet, IMarketplaceItem } from '@rpg-engine/shared';
+import React, { useState } from 'react';
+import { AiFillCaretRight } from 'react-icons/ai';
+import styled from 'styled-components';
+import { ConfirmModal } from '../ConfirmModal';
+import { Dropdown } from '../Dropdown';
+import { Input } from '../Input';
+import { MarketplaceRows } from './MarketplaceRows';
+import { itemRarityOptions, itemTypeOptions, orderByOptions } from './filters';
+
+export interface IBuyPanelProps {
+  items: IMarketplaceItem[];
+  atlasJSON: any;
+  atlasIMG: any;
+  onClose: () => void;
+  onChangeType: (value: string) => void;
+  onChangeRarity: (value: string) => void;
+  onChangeOrder: (value: string) => void;
+  onChangeNameInput: (value: string) => void;
+  onChangeMainLevelInput: (
+    value: [number | undefined, number | undefined]
+  ) => void;
+  onChangeSecondaryLevelInput: (
+    value: [number | undefined, number | undefined]
+  ) => void;
+  onChangePriceInput: (value: [number | undefined, number | undefined]) => void;
+  scale?: number;
+  equipmentSet?: IEquipmentSet | null;
+  onMarketPlaceItemBuy?: (marketPlaceItemId: string) => void;
+  characterId: string;
+  enableHotkeys?: () => void;
+  disableHotkeys?: () => void;
+}
+
+export const BuyPanel: React.FC<IBuyPanelProps> = ({
+  items,
+  atlasIMG,
+  atlasJSON,
+  onChangeType,
+  onChangeRarity,
+  onChangeOrder,
+  onChangeNameInput,
+  onChangeMainLevelInput,
+  onChangeSecondaryLevelInput,
+  onChangePriceInput,
+  equipmentSet,
+  onMarketPlaceItemBuy,
+  characterId,
+  enableHotkeys,
+  disableHotkeys,
+}) => {
+  const [name, setName] = useState('');
+  const [mainLevel, setMainLevel] = useState<
+    [number | undefined, number | undefined]
+  >([undefined, undefined]);
+  const [secondaryLevel, setSecondaryLevel] = useState<
+    [number | undefined, number | undefined]
+  >([undefined, undefined]);
+  const [price, setPrice] = useState<[number | undefined, number | undefined]>([
+    undefined,
+    undefined,
+  ]);
+  const [buyingItemId, setBuyingItemId] = useState<string | null>(null);
+
+  return (
+    <>
+      {buyingItemId && (
+        <ConfirmModal
+          onClose={setBuyingItemId.bind(null, null)}
+          onConfirm={() => {
+            onMarketPlaceItemBuy?.(buyingItemId);
+            setBuyingItemId(null);
+            enableHotkeys?.();
+          }}
+          message="Are you sure to buy this item?"
+        />
+      )}
+      <InputWrapper>
+        <p>Search By Name</p>
+        <Input
+          onChange={e => {
+            setName(e.target.value);
+            onChangeNameInput(e.target.value);
+          }}
+          value={name}
+          placeholder="Enter name..."
+          onBlur={enableHotkeys}
+          onFocus={disableHotkeys}
+        />
+      </InputWrapper>
+
+      <OptionsWrapper>
+        <FilterInputsWrapper>
+          <div>
+            <p>Main level</p>
+            <Input
+              onChange={e => {
+                setMainLevel([Number(e.target.value), mainLevel[1]]);
+                onChangeMainLevelInput([Number(e.target.value), mainLevel[1]]);
+              }}
+              placeholder="Min"
+              type="number"
+              min={0}
+              onBlur={enableHotkeys}
+              onFocus={disableHotkeys}
+            />
+            <AiFillCaretRight />
+            <Input
+              onChange={e => {
+                setMainLevel([mainLevel[0], Number(e.target.value)]);
+                onChangeMainLevelInput([mainLevel[0], Number(e.target.value)]);
+              }}
+              placeholder="Max"
+              type="number"
+              min={0}
+              onBlur={enableHotkeys}
+              onFocus={disableHotkeys}
+            />
+          </div>
+
+          <div>
+            <p>Secondary level</p>
+            <Input
+              onChange={e => {
+                setSecondaryLevel([Number(e.target.value), secondaryLevel[1]]);
+                onChangeSecondaryLevelInput([
+                  Number(e.target.value),
+                  secondaryLevel[1],
+                ]);
+              }}
+              placeholder="Min"
+              type="number"
+              min={0}
+              onBlur={enableHotkeys}
+              onFocus={disableHotkeys}
+            />
+            <AiFillCaretRight />
+            <Input
+              onChange={e => {
+                setSecondaryLevel([secondaryLevel[0], Number(e.target.value)]);
+                onChangeSecondaryLevelInput([
+                  secondaryLevel[0],
+                  Number(e.target.value),
+                ]);
+              }}
+              placeholder="Max"
+              type="number"
+              min={0}
+              onBlur={enableHotkeys}
+              onFocus={disableHotkeys}
+            />
+          </div>
+
+          <div>
+            <p>Price</p>
+            <Input
+              onChange={e => {
+                setPrice([Number(e.target.value), price[1]]);
+                onChangePriceInput([Number(e.target.value), price[1]]);
+              }}
+              placeholder="Min"
+              type="number"
+              min={0}
+              className="big-input"
+              onBlur={enableHotkeys}
+              onFocus={disableHotkeys}
+            />
+            <AiFillCaretRight />
+            <Input
+              onChange={e => {
+                setPrice([price[0], Number(e.target.value)]);
+                onChangePriceInput([price[0], Number(e.target.value)]);
+              }}
+              placeholder="Max"
+              type="number"
+              min={0}
+              className="big-input"
+              onBlur={enableHotkeys}
+              onFocus={disableHotkeys}
+            />
+          </div>
+        </FilterInputsWrapper>
+
+        <WrapperContainer>
+          <StyledDropdown
+            options={itemTypeOptions}
+            onChange={onChangeType}
+            width="95%"
+          />
+          <StyledDropdown
+            options={itemRarityOptions}
+            onChange={onChangeRarity}
+            width="95%"
+          />
+          <StyledDropdown
+            options={orderByOptions}
+            onChange={onChangeOrder}
+            width="100%"
+          />
+        </WrapperContainer>
+      </OptionsWrapper>
+
+      <ItemComponentScrollWrapper id="MarketContainer">
+        {items?.map(({ item, price, _id, owner }, index) => (
+          <MarketplaceRows
+            key={`${item.key}_${index}`}
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            item={item}
+            itemPrice={price}
+            equipmentSet={equipmentSet}
+            onMarketPlaceItemBuy={setBuyingItemId.bind(null, _id)}
+            disabled={owner === characterId}
+          />
+        ))}
+      </ItemComponentScrollWrapper>
+    </>
+  );
+};
+
+const InputWrapper = styled.div`
+  width: 95%;
+  display: flex !important;
+  justify-content: flex-start;
+  align-items: center;
+  margin: auto;
+
+  p {
+    width: auto;
+    margin-right: 20px;
+  }
+
+  input {
+    width: 68%;
+    height: 10px;
+  }
+`;
+
+const OptionsWrapper = styled.div`
+  width: 100%;
+  height: 100px;
+`;
+
+const FilterInputsWrapper = styled.div`
+  width: 95%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  margin-left: 10px;
+  gap: 5px;
+  color: white;
+  flex-wrap: wrap;
+
+  p {
+    width: auto;
+    margin: 0;
+  }
+
+  input {
+    width: 75px;
+    height: 10px;
+  }
+
+  .big-input {
+    width: 130px;
+  }
+`;
+
+const WrapperContainer = styled.div`
+  display: grid;
+  grid-template-columns: 40% 30% 30%;
+  justify-content: space-between;
+  width: calc(100% - 40px);
+  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;
+
+  @media (max-width: 950px) {
+    height: 250px;
+  }
+`;
+
+const StyledDropdown = styled(Dropdown)`
+  margin: 3px !important;
+  width: 170px !important;
+`;