@rpg-engine/long-bow 0.1.81 → 0.1.84

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

@@ -1,109 +1,61 @@
-import { IItem, IItemContainer, ItemSocketEvents } from '@rpg-engine/shared';
-import { observer } from 'mobx-react';
-import React, { useState } from 'react';
+import { IItem, IItemContainer } from '@rpg-engine/shared';
+import React from 'react';
 import styled from 'styled-components';
-import { IPosition } from '../../../types/eventTypes';
 import { SlotsContainer } from '../../Abstractions/SlotsContainer';
-import { ListMenu } from '../../ListMenu';
-import { uiStore } from '../../store/UI.store';
-import { ItemCard } from '../Cards/ItemCard';
-import { ItemSlot, SlotContainerType } from './ItemSlot';
+import { SlotContainerType } from './ItemContainerTypes';
+import { ItemSlot } from './ItemSlot';
 
 export interface IItemContainerProps {
   itemContainer: IItemContainer;
   onClose?: () => void;
+  onItemClick?: (
+    item: IItem,
+    slotContainerType: SlotContainerType | null
+  ) => void;
   onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
-  onActionSelected?: (payload: any) => void;
-  initialPosition?: { x: number; y: number };
+  onSelected?: (optionId: string) => void;
 }
 
-export const ItemContainer: React.FC<IItemContainerProps> = observer(
-  ({
-    itemContainer,
-    onClose,
-    onMouseOver,
-    onActionSelected,
-    initialPosition = { x: 0, y: 0 },
-  }) => {
-    // we use this draggable position to offset the menu position, after the container is dragged (otherwise, it bugs!)
-    const [draggablePosition, setDraggablePosition] = useState<IPosition>(
-      initialPosition
-    );
+export const ItemContainer: React.FC<IItemContainerProps> = ({
+  itemContainer,
+  onClose,
+  onMouseOver,
+  onSelected,
+  onItemClick,
+}) => {
+  const onRenderSlots = () => {
+    const slots = [];
 
-    const handleOnMouseHover = (
-      event: any,
-      slotIndex: number,
-      item: IItem | null,
-      x: number,
-      y: number
-    ) => {
-      uiStore.handleOnMouseHover(event, slotIndex, item, x, y, onMouseOver);
-    };
+    for (let i = 0; i < itemContainer.slotQty; i++) {
+      slots.push(
+        <ItemSlot
+          key={i}
+          slotIndex={i}
+          item={itemContainer.slots?.[i] || null}
+          slotContainerType={SlotContainerType.INVENTORY}
+          onMouseOver={(event, slotIndex, item) => {
+            if (onMouseOver) onMouseOver(event, slotIndex, item);
+          }}
+          onClick={(item, slotContainerType) => {
+            if (onItemClick) onItemClick(item, slotContainerType);
+          }}
+          onSelected={(optionId: string) => {
+            if (onSelected) onSelected(optionId);
+          }}
+        />
+      );
+    }
+    return slots;
+  };
 
-    const onSelected = (selectedActionId: ItemSocketEvents | string): void => {
-      uiStore.onSelected(selectedActionId, onActionSelected);
-    };
-
-    const onRenderSlots = () => {
-      const slots = [];
-
-      for (let i = 0; i < itemContainer.slotQty; i++) {
-        slots.push(
-          <ItemSlot
-            key={i}
-            slotIndex={i}
-            item={itemContainer.slots?.[i] || null}
-            slotContainerType={SlotContainerType.INVENTORY}
-            onMouseOver={handleOnMouseHover}
-            onClick={uiStore.handleOnItemClick}
-            onMouseOut={() => {
-              uiStore.clearItemHoverDetail();
-            }}
-            onCancelContextMenu={() => {
-              uiStore.clearContextMenu();
-            }}
-          />
-        );
-      }
-      return slots;
-    };
-
-    return (
-      <SlotsContainer
-        title={itemContainer.name || 'Container'}
-        onPositionChange={({ x, y }) => {
-          setDraggablePosition({ x, y });
-        }}
-        onOutsideClick={() => {
-          uiStore.clearContextMenu();
-          uiStore.clearItemHoverDetail();
-        }}
-        onClose={onClose}
-      >
-        <ItemsContainer className="item-container-body">
-          {onRenderSlots()}
-        </ItemsContainer>
-
-        {uiStore.contextMenu?.visible ? (
-          <ListMenu
-            x={uiStore.contextMenu.posX - draggablePosition.x}
-            y={uiStore.contextMenu.posY - draggablePosition.y}
-            options={uiStore.contextMenu.contextActions}
-            onSelected={onSelected}
-          />
-        ) : null}
-
-        {uiStore.onHoverDetail?.visible ? (
-          <ItemCard
-            item={uiStore.onHoverDetail.item}
-            x={uiStore.onHoverDetail.posX - draggablePosition.x}
-            y={uiStore.onHoverDetail.posY - draggablePosition.y}
-          />
-        ) : null}
-      </SlotsContainer>
-    );
-  }
-);
+  return (
+    <SlotsContainer title={itemContainer.name || 'Container'} onClose={onClose}>
+      <ItemsContainer className="item-container-body">
+        {onRenderSlots()}
+      </ItemsContainer>
+    </SlotsContainer>
+  );
+};
 
 const ItemsContainer = styled.div`
   max-width: 280px;

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

@@ -0,0 +1,4 @@
+export enum SlotContainerType {
+  INVENTORY = 'Inventory',
+  EQUIPMENT_SET = 'EquipmentSet',
+}

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

@@ -1,14 +1,18 @@
 import { IItem, IItemContainer, ItemSlotType } from '@rpg-engine/shared';
-import React from 'react';
+
+import { observer } from 'mobx-react-lite';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import atlasJSON from '../../../mocks/atlas/items/items.json';
 import atlasIMG from '../../../mocks/atlas/items/items.png';
+import { RelativeListMenu } from '../../RelativeListMenu';
 import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
-
-export enum SlotContainerType {
-  INVENTORY = 'Inventory',
-  EQUIPMENT_SET = 'EquipmentSet',
-}
+import { ItemTooltip } from '../Cards/ItemTooltip';
+import {
+  handleEquipmentContextMenuList,
+  IContextMenuItem,
+} from './itemContainerHelper';
+import { SlotContainerType } from './ItemContainerTypes';
 
 const EquipmentSlotSpriteByType: any = {
   Neck: 'accessories/corruption-necklace.png',
@@ -29,6 +33,7 @@ interface IProps {
   itemContainer?: IItemContainer | null;
   slotContainerType: SlotContainerType | null;
   slotSpriteMask?: ItemSlotType | null;
+  onSelected: (payload: any) => void;
   onMouseOver: (
     event: any,
     slotIndex: number,
@@ -36,108 +41,143 @@ interface IProps {
     x: number,
     y: number
   ) => void;
-  onMouseOut: () => void;
-  onClick: (
-    item: IItem,
-    posX: number,
-    posY: number,
-    slotContainerType: SlotContainerType | null
-  ) => void;
-  onCancelContextMenu: () => void;
+  onMouseOut?: () => void;
+  onClick: (item: IItem, slotContainerType: SlotContainerType | null) => void;
 }
 
-export const ItemSlot: React.FC<IProps> = ({
-  slotIndex,
-  item,
-  slotContainerType,
-  slotSpriteMask,
-  onMouseOver,
-  onMouseOut,
-  onClick,
-  onCancelContextMenu,
-}) => {
-  const getLeftPositionValue = (quantity: number) => {
-    if (quantity > 0 && quantity < 10) return '2.5rem';
-    else if (quantity > 9 && quantity < 100) return '2.0rem';
-    else if (quantity > 99) return '1rem';
-    return '2.5rem';
-  };
-
-  const renderItem = (itemToRender: IItem | null) => {
-    const element = [];
-    if (itemToRender?.texturePath) {
-      element.push(
-        <SpriteFromAtlas
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          spriteKey={itemToRender.texturePath}
-          imgScale={3}
-        />
-      );
-    }
-    if (itemToRender?.isStackable && itemToRender?.stackQty) {
-      element.push(
-        <ItemQty left={getLeftPositionValue(itemToRender.stackQty)}>
-          {' '}
-          {itemToRender.stackQty}{' '}
-        </ItemQty>
-      );
-    }
-    return element;
-  };
-
-  const renderEquipment = (itemToRender: IItem | null) => {
-    if (
-      itemToRender?.texturePath &&
-      itemToRender.allowedEquipSlotType?.includes(slotSpriteMask!)
-    ) {
-      return (
-        <SpriteFromAtlas
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          spriteKey={itemToRender.texturePath}
-          imgScale={3}
-        />
-      );
-    } else {
-      return (
-        <SpriteFromAtlas
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          spriteKey={EquipmentSlotSpriteByType[slotSpriteMask!]}
-          imgScale={3}
-          grayScale={true}
-          opacity={0.4}
-        />
-      );
-    }
-  };
-
-  const onRenderSlot = (itemToRender: IItem | null) => {
-    if (slotContainerType === SlotContainerType.EQUIPMENT_SET)
-      return renderEquipment(itemToRender);
-    return renderItem(itemToRender);
-  };
-
-  return (
-    <Container
-      className="rpgui-icon empty-slot"
-      onMouseOver={event =>
-        onMouseOver(event, slotIndex, item, event.clientX, event.clientY)
+export const ItemSlot: React.FC<IProps> = observer(
+  ({
+    slotIndex,
+    item,
+    slotContainerType,
+    slotSpriteMask,
+    onMouseOver,
+    onMouseOut,
+    onClick,
+    onSelected,
+  }) => {
+    const [isTooltipVisible, setTooltipVisible] = useState(false);
+
+    const [isContextMenuVisible, setIsContextMenuVisible] = useState(false);
+
+    const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
+      []
+    );
+
+    useEffect(() => {
+      if (item) {
+        setContextActions(handleEquipmentContextMenuList(item.type));
+      }
+    }, [item]);
+
+    const getLeftPositionValue = (quantity: number) => {
+      if (quantity > 0 && quantity < 10) return '2.5rem';
+      else if (quantity > 9 && quantity < 100) return '2.0rem';
+      else if (quantity > 99) return '1rem';
+      return '2.5rem';
+    };
+
+    const renderItem = (itemToRender: IItem | null) => {
+      const element = [];
+      if (itemToRender?.texturePath) {
+        element.push(
+          <SpriteFromAtlas
+            key={itemToRender._id}
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            spriteKey={itemToRender.texturePath}
+            imgScale={3}
+          />
+        );
+      }
+      if (itemToRender?.isStackable && itemToRender?.stackQty) {
+        element.push(
+          <ItemQty
+            left={getLeftPositionValue(itemToRender.stackQty)}
+            key={`qty-${itemToRender._id}`}
+          >
+            {' '}
+            {itemToRender.stackQty}{' '}
+          </ItemQty>
+        );
       }
-      onMouseOut={() => onMouseOut()}
-      onClick={e => {
-        if (item) {
-          onClick(item, e.clientX, e.clientY, slotContainerType);
-        } else {
-          onCancelContextMenu();
+      return element;
+    };
+
+    const renderEquipment = (itemToRender: IItem | null) => {
+      if (
+        itemToRender?.texturePath &&
+        itemToRender.allowedEquipSlotType?.includes(slotSpriteMask!)
+      ) {
+        return (
+          <SpriteFromAtlas
+            key={itemToRender._id}
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            spriteKey={itemToRender.texturePath}
+            imgScale={3}
+          />
+        );
+      } else {
+        return (
+          <SpriteFromAtlas
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            spriteKey={EquipmentSlotSpriteByType[slotSpriteMask!]}
+            imgScale={3}
+            grayScale={true}
+            opacity={0.4}
+          />
+        );
+      }
+    };
+
+    const onRenderSlot = (itemToRender: IItem | null) => {
+      if (slotContainerType === SlotContainerType.EQUIPMENT_SET)
+        return renderEquipment(itemToRender);
+      return renderItem(itemToRender);
+    };
+
+    return (
+      <Container
+        className="rpgui-icon empty-slot"
+        onMouseOver={event =>
+          onMouseOver(event, slotIndex, item, event.clientX, event.clientY)
         }
-      }}
-    >
-      {onRenderSlot(item)}
-    </Container>
-  );
-};
+        onMouseOut={() => {
+          if (onMouseOut) onMouseOut();
+        }}
+        onMouseEnter={() => setTooltipVisible(true)}
+        onMouseLeave={() => setTooltipVisible(false)}
+        onClick={() => {
+          setTooltipVisible(false);
+
+          if (item) {
+            setIsContextMenuVisible(!isContextMenuVisible);
+            onClick(item, slotContainerType);
+          }
+        }}
+      >
+        {isContextMenuVisible && contextActions && (
+          <RelativeListMenu
+            options={contextActions}
+            onSelected={(optionId: string) => {
+              setIsContextMenuVisible(false);
+              onSelected(optionId);
+            }}
+            onOutsideClick={() => {
+              setIsContextMenuVisible(false);
+            }}
+          />
+        )}
+
+        {isTooltipVisible && item && <ItemTooltip label={item.name} />}
+
+        {onRenderSlot(item)}
+      </Container>
+    );
+  }
+);
 
 const Container = styled.div`
   margin: 0.1rem;
@@ -146,6 +186,7 @@ const Container = styled.div`
     top: 1.5rem;
     left: 1.5rem;
   }
+  position: relative;
 `;
 
 interface IItemQtyProps {

package/src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx

@@ -191,9 +191,7 @@ export const QuestionDialog: React.FC<IProps> = ({
 
 const Container = styled.div`
   display: flex;
-
   word-break: break-all;
-
   box-sizing: border-box;
   justify-content: flex-start;
   align-items: flex-start;
@@ -233,7 +231,6 @@ const AnswerRow = styled.div`
   align-items: center;
   margin-bottom: 0.5rem;
   height: 22px;
-
   p {
     line-height: unset;
     margin-top: 0;

package/src/components/PropertySelect/PropertySelect.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import LeftArrowClickIcon from './img/ui-arrows/arrow01-left-clicked.png';
+import LeftArrowIcon from './img/ui-arrows/arrow01-left.png';
+import RightArrowClickIcon from './img/ui-arrows/arrow01-right-clicked.png';
+import RightArrowIcon from './img/ui-arrows/arrow01-right.png';
+
+export interface IPropertySelectProps {
+  availableProperties: Array<IPropertiesProps>;
+  selectedProperty: object;
+  children?: React.ReactNode;
+}
+
+export interface IPropertiesProps {
+  id: string;
+  name: string;
+}
+
+export const PropertySelect: React.FC<IPropertySelectProps> = ({
+  availableProperties,
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const propertiesLength = availableProperties.length - 1;
+
+  const onLeftClick = () => {
+    if (currentIndex === 0) setCurrentIndex(propertiesLength);
+    else setCurrentIndex(index => index - 1);
+  };
+  const onRightClick = () => {
+    if (currentIndex === propertiesLength) setCurrentIndex(0);
+    else setCurrentIndex(index => index + 1);
+  };
+  return (
+    <Container>
+      <TextOverlay>
+        <Item>{availableProperties[currentIndex].name}</Item>
+      </TextOverlay>
+      <div className="rpgui-progress-track"></div>
+      <LeftArrow onClick={onLeftClick}></LeftArrow>
+      <RightArrow onClick={onRightClick}></RightArrow>
+    </Container>
+  );
+};
+
+const Item = styled.span`
+  font-size: 1rem;
+  color: white;
+  text-align: center;
+  z-index: 1;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 12px;
+`;
+
+const TextOverlay = styled.div`
+  width: 100%;
+  position: relative;
+`;
+
+interface IContainerProps {
+  percentageWidth?: number;
+  minWidth?: number;
+  style?: Record<string, any>;
+}
+
+const Container = styled.div<IContainerProps>`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: flex-start;
+  min-width: 100px;
+  width: 40%;
+`;
+
+const LeftArrow = styled.div`
+  background-image: url(${LeftArrowIcon});
+  background-size: 100% 100%;
+  left: 0;
+  position: absolute;
+  width: 40px;
+  height: 42px;
+  :active {
+    background-image: url(${LeftArrowClickIcon});
+  }
+`;
+
+const RightArrow = styled.div`
+  background-image: url(${RightArrowIcon});
+  right: 0;
+  position: absolute;
+  width: 40px;
+  background-size: 100% 100%;
+  height: 42px;
+  :active {
+    background-image: url(${RightArrowClickIcon});
+  }
+`;
+
+export default PropertySelect;