@rpg-engine/long-bow 0.1.66 → 0.1.69

package/src/components/DraggableContainer.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import Draggable from 'react-draggable';
+import Draggable, { DraggableData } from 'react-draggable';
 import styled from 'styled-components';
+import { IPosition } from '../types/eventTypes';
 import { RPGUIContainerTypes } from './RPGUIContainer';
 
 export interface IDraggableContainerProps {
@@ -12,7 +13,9 @@ export interface IDraggableContainerProps {
   title: string;
   imgSrc?: string;
   imgWidth?: string;
-  onCloseButton: () => void;
+  onCloseButton?: () => void;
+  cancelDrag?: string;
+  onPositionChange?: (position: IPosition) => void;
 }
 
 export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
@@ -25,13 +28,25 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
   title,
   imgSrc,
   imgWidth = '20px',
+  cancelDrag,
+  onPositionChange,
 }) => {
   return (
-    <Draggable handle=".drag-handdler" cancel=".container-close">
+    <Draggable
+      cancel={`.container-close,${cancelDrag}`}
+      onDrag={(_e, data: DraggableData) => {
+        if (onPositionChange) {
+          onPositionChange({
+            x: data.x,
+            y: data.y,
+          });
+        }
+      }}
+    >
       <Container
         width={width}
         height={height || 'auto'}
-        className={`rpgui-container ${type} ${className} rpgui-draggable`}
+        className={`rpgui-container ${type} ${className}`}
       >
         <TitleContainer className="drag-handler">
           <Title>
@@ -86,7 +101,7 @@ const TitleContainer = styled.div`
   height: 100%;
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
 `;
 

package/src/components/Item/Cards/ItemCard.tsx

@@ -25,6 +25,12 @@ const Container = styled.div<IContainerProps>`
   position: absolute;
   top: ${props => props.y || 0}px;
   left: ${props => props.x || 0}px;
-  font-size: 7px;
+  font-size: 0.5rem;
   color: white;
+  background-color: black;
+  border-radius: 5px;
+  padding: 0.5rem;
+  min-width: 20px;
+
+  opacity: 0.5;
 `;

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

@@ -1,27 +1,29 @@
 import {
-  ActionsByItemType,
   IItem,
   IItemContainer,
   IPayloadProps,
   ItemSocketEvents,
-  ItemType,
 } from '@rpg-engine/shared';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
+import { useOutsideClick } from '../../../hooks/useOutsideAlerter';
+import { IPosition } from '../../../types/eventTypes';
 import { DraggableContainer } from '../../DraggableContainer';
 import { ListMenu } from '../../ListMenu';
 import { RPGUIContainerTypes } from '../../RPGUIContainer';
 import { ItemCard } from '../Cards/ItemCard';
+import { handleContextMenuList } from './itemContainerHelper';
 import { ItemSlot } from './ItemSlot';
 
 export interface IItemContainerProps {
   itemContainer: IItemContainer;
-  onClose: () => void;
-  onMouseOver: (e: any, slotIndex: number, item: IItem | null) => void;
-  onActionSelected: (payload: any) => void;
+  onClose?: () => void;
+  onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
+  onActionSelected?: (payload: any) => void;
+  initialPosition?: { x: number; y: number };
 }
 
-interface contextItemPropx {
+interface IContextItemProps {
   visible: boolean;
   posX: number;
   posY: number;
@@ -30,127 +32,113 @@ interface contextItemPropx {
   contextActions: any;
 }
 
+interface IHoverDetailProps {
+  visible: boolean;
+  posX: number;
+  posY: number;
+  item: IItem | null;
+}
+
 export const ItemContainer: React.FC<IItemContainerProps> = ({
   itemContainer,
   onClose,
   onMouseOver,
   onActionSelected,
+  initialPosition = { x: 0, y: 0 },
 }) => {
-  const [contextData, setContextData] = useState<contextItemPropx>({
+  // we use this draggable position to offset the menu position, after the container is dragged (otherwise, it bugs!)
+  const [draggablePosition, setDraggablePosition] = useState<IPosition>(
+    initialPosition
+  );
+
+  const draggableRef = useRef(null);
+
+  useOutsideClick(draggableRef, 'item-container');
+
+  useEffect(() => {
+    document.addEventListener('clickOutside', event => {
+      const e = event as CustomEvent;
+
+      if (e.detail.id === 'item-container') {
+        clearContextMenu();
+        clearItemHoverDetail();
+      }
+    });
+
+    return () => {
+      document.removeEventListener('clickOutside', _e => {});
+    };
+  }, []);
+
+  const { x: initX, y: initY } = initialPosition;
+
+  const [contextData, setContextData] = useState<IContextItemProps>({
     visible: false,
-    posX: 0,
-    posY: 0,
+    posX: initX,
+    posY: initY,
     contextActions: [],
     slotItem: null,
   });
-  const [itemHoverDetail] = useState({
+  const [itemHoverDetail, setItemHoverDetail] = useState<IHoverDetailProps>({
     visible: false,
-    posX: 0,
-    posY: 0,
+    posX: initX,
+    posY: initY,
     item: null,
   });
-  let selectedSlotContext: number | null = null;
-
-  const handleContextMenuList = (itemType: ItemType) => {
-    const generateContextList = (actionsByTypeList: any) => {
-      let contextMenu = actionsByTypeList.map((action: string) => {
-        return { id: action, text: action };
-      });
-      return contextMenu;
-    };
 
-    let contextActionMenu: any = [];
-    switch (itemType) {
-      case ItemType.Weapon:
-      case ItemType.Armor:
-      case ItemType.Accessory:
-      case ItemType.Jewelry:
-      case ItemType.Tool:
-        contextActionMenu = generateContextList(ActionsByItemType.Equipment);
-        break;
-      case ItemType.Consumable:
-        contextActionMenu = generateContextList(ActionsByItemType.Consumable);
-        break;
-      case ItemType.CraftMaterial:
-        contextActionMenu = generateContextList(
-          ActionsByItemType.CraftMaterial
-        );
-        break;
-      case ItemType.Other:
-      case ItemType.Information:
-      case ItemType.Quest:
-      case ItemType.Container:
-        contextActionMenu = generateContextList(ActionsByItemType.Other);
-        break;
-      default:
-        contextActionMenu = generateContextList(ActionsByItemType.Other);
-        break;
-    }
-    return contextActionMenu;
+  const clearContextMenu = () => {
+    setContextData({
+      visible: false,
+      posX: 0,
+      posY: 0,
+      contextActions: [],
+      slotItem: null,
+    });
   };
 
-  useEffect(() => {
-    const contextMenuEventHandler = (event: any) => {
-      event.preventDefault();
-      if (selectedSlotContext !== null) {
-        const itemData = itemContainer.slots?.[selectedSlotContext] ?? null;
-        if (itemData) {
-          // TODO: generate a menuActionList based on type and subType of the item.
-          let contextActionMenu: any = handleContextMenuList(itemData.type);
-          setContextData({
-            ...contextData,
-            visible: true,
-            posX: event.clientX,
-            posY: event.clientY,
-            slotItem: itemData,
-            contextActions: contextActionMenu,
-          });
-        } else {
-          // console.log("Empty Slot")
-          setContextData({
-            ...contextData,
-            visible: false,
-            posX: 0,
-            posY: 0,
-            slotIndex: null,
-            slotItem: null,
-            contextActions: [],
-          });
-        }
-      }
-    };
-
-    const offClickHandler = (event: any) => {
-      console.log(event);
-      setContextData({
-        ...contextData,
-        visible: false,
-        posX: 0,
-        posY: 0,
-        slotIndex: null,
-        slotItem: null,
+  const handleOnMouseHover = (
+    event: any,
+    slotIndex: number,
+    item: IItem | null,
+    x: number,
+    y: number
+  ) => {
+    if (item) {
+      setItemHoverDetail({
+        ...itemHoverDetail,
+        visible: true,
+        item: item,
+        posX: x - draggablePosition.x,
+        posY: y - draggablePosition.y,
       });
-    };
-
-    document.addEventListener('contextmenu', contextMenuEventHandler);
-    document.addEventListener('click', offClickHandler);
-    return () => {
-      document.removeEventListener('contextmenu', contextMenuEventHandler);
-      document.removeEventListener('click', offClickHandler);
-    };
-  }, [contextData, selectedSlotContext]);
+      if (onMouseOver) {
+        onMouseOver(event, slotIndex, item);
+      }
+    } else {
+      clearItemHoverDetail();
+    }
+  };
 
-  const onActionContextMenu = (event: any, slotIndex: number) => {
-    selectedSlotContext = slotIndex;
-    console.log(event);
-    // setContextData({...contextData, slotItem: slotIndex})
+  const clearItemHoverDetail = () => {
+    setItemHoverDetail({
+      ...itemHoverDetail,
+      visible: false,
+      item: null,
+    });
   };
 
-  const handleOnMouseHover = (event: any, slotIndex: number, item: any) => {
-    // TODO: Show a tip view with basic info about the item.
-    //  set a minimun hover period before show infos.
-    // setItemHoverDetail({...itemHoverDetail, visible: true, item: item, posX: event.clientX, posY: event.clientY})
-    onMouseOver(event, slotIndex, item);
+  const handleOnItemClick = (item: IItem, posX: number, posY: number) => {
+    const contextList = handleContextMenuList(item.type);
+
+    setContextData({
+      ...contextData,
+      visible: true,
+      posX,
+      posY,
+      slotItem: item,
+      contextActions: contextList,
+    });
+    clearItemHoverDetail();
   };
 
   const onSelected = (selectedActionId: ItemSocketEvents | string): void => {
@@ -158,8 +146,10 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
       actionType: selectedActionId,
       item: contextData.slotItem,
     };
-    // TODO: create a function to validate the selection set the paylod data.
-    onActionSelected(payloadData);
+    if (onActionSelected) {
+      onActionSelected(payloadData);
+    }
+    clearContextMenu();
   };
 
   const onRenderSlots = () => {
@@ -172,7 +162,10 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
           slotIndex={i}
           item={itemContainer.slots?.[i] || null}
           onMouseOver={handleOnMouseHover}
-          onActionContextMenu={onActionContextMenu}
+          onClick={handleOnItemClick}
+          onCancelContextMenu={() => {
+            clearContextMenu();
+          }}
         />
       );
     }
@@ -180,31 +173,43 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   };
 
   return (
-    <DraggableContainer
-      title={itemContainer.name || 'Container'}
-      type={RPGUIContainerTypes.Framed}
-      onCloseButton={() => onClose()}
-      width="330px"
-    >
-      <ItemsContainer>{onRenderSlots()}</ItemsContainer>
-
-      {contextData.visible ? (
-        <ListMenu
-          x={contextData.posX}
-          y={contextData.posY}
-          options={contextData.contextActions}
-          onSelected={onSelected}
-        />
-      ) : null}
-
-      {itemHoverDetail.visible ? (
-        <ItemCard
-          item={itemHoverDetail.item}
-          x={itemHoverDetail.posX}
-          y={itemHoverDetail.posY}
-        />
-      ) : null}
-    </DraggableContainer>
+    <div ref={draggableRef}>
+      <DraggableContainer
+        title={itemContainer.name || 'Container'}
+        type={RPGUIContainerTypes.Framed}
+        onCloseButton={() => {
+          if (onClose) {
+            onClose();
+          }
+        }}
+        width="330px"
+        cancelDrag=".item-container-body"
+        onPositionChange={({ x, y }) => {
+          setDraggablePosition({ x, y });
+        }}
+      >
+        <ItemsContainer className="item-container-body">
+          {onRenderSlots()}
+        </ItemsContainer>
+
+        {contextData.visible ? (
+          <ListMenu
+            x={contextData.posX - draggablePosition.x}
+            y={contextData.posY - draggablePosition.y}
+            options={contextData.contextActions}
+            onSelected={onSelected}
+          />
+        ) : null}
+
+        {itemHoverDetail.visible ? (
+          <ItemCard
+            item={itemHoverDetail.item}
+            x={itemHoverDetail.posX}
+            y={itemHoverDetail.posY}
+          />
+        ) : null}
+      </DraggableContainer>
+    </div>
   );
 };
 

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

@@ -7,17 +7,25 @@ import { SpriteFromAtlas } from '../SpriteFromAtlas';
 interface IProps {
   slotIndex: number;
   item: IItem | null;
-  onMouseOver: (event: any, slotIndex: number, item: IItem | null) => void;
-  onActionContextMenu: (event: any, slotIndex: number) => void;
+  onMouseOver: (
+    event: any,
+    slotIndex: number,
+    item: IItem | null,
+    x: number,
+    y: number
+  ) => void;
+  onClick: (item: IItem, posX: number, posY: number) => void;
+  onCancelContextMenu: () => void;
 }
 
 export const ItemSlot: React.FC<IProps> = ({
   slotIndex,
   item,
   onMouseOver,
-  onActionContextMenu,
+  onClick,
+  onCancelContextMenu,
 }) => {
-  const getLeftPostionValue = (quantity: number) => {
+  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';
@@ -26,11 +34,18 @@ export const ItemSlot: React.FC<IProps> = ({
 
   return (
     <Container
-      onContextMenu={event => {
-        onActionContextMenu(event, slotIndex);
-      }}
       className="rpgui-icon empty-slot"
-      onMouseOver={event => onMouseOver(event, slotIndex, item)}
+      onMouseOver={event =>
+        onMouseOver(event, slotIndex, item, event.clientX, event.clientY)
+      }
+      onClick={e => {
+        if (item) {
+          console.log(e);
+          onClick(item, e.clientX, e.clientY);
+        } else {
+          onCancelContextMenu();
+        }
+      }}
     >
       {item && item.texturePath ? (
         <SpriteFromAtlas
@@ -41,7 +56,7 @@ export const ItemSlot: React.FC<IProps> = ({
         />
       ) : null}
       {item && item.isStackable && item?.stackQty ? (
-        <ItemQty left={getLeftPostionValue(item.stackQty)}>
+        <ItemQty left={getLeftPositionValue(item.stackQty)}>
           {' '}
           {item.stackQty}{' '}
         </ItemQty>

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

@@ -0,0 +1,44 @@
+import { ActionsByItemType, ItemType } from '@rpg-engine/shared';
+
+interface IContextMenuItem {
+  id: string;
+  text: string;
+}
+
+export const handleContextMenuList = (itemType: ItemType) => {
+  const generateContextList = (actionsByTypeList: any) => {
+    const contextMenu: IContextMenuItem[] = actionsByTypeList.map(
+      (action: string) => {
+        return { id: action, text: action };
+      }
+    );
+    return contextMenu;
+  };
+
+  let contextActionMenu: IContextMenuItem[] = [];
+  switch (itemType) {
+    case ItemType.Weapon:
+    case ItemType.Armor:
+    case ItemType.Accessory:
+    case ItemType.Jewelry:
+    case ItemType.Tool:
+      contextActionMenu = generateContextList(ActionsByItemType.Equipment);
+      break;
+    case ItemType.Consumable:
+      contextActionMenu = generateContextList(ActionsByItemType.Consumable);
+      break;
+    case ItemType.CraftMaterial:
+      contextActionMenu = generateContextList(ActionsByItemType.CraftMaterial);
+      break;
+    case ItemType.Other:
+    case ItemType.Information:
+    case ItemType.Quest:
+    case ItemType.Container:
+      contextActionMenu = generateContextList(ActionsByItemType.Other);
+      break;
+    default:
+      contextActionMenu = generateContextList(ActionsByItemType.Other);
+      break;
+  }
+  return contextActionMenu;
+};

package/src/components/Item/SpriteFromAtlas.tsx

@@ -9,6 +9,8 @@ interface IProps {
   width?: number;
   height?: number;
   scale?: number;
+  grayScale?: boolean;
+  opacity?: number;
 }
 
 export const SpriteFromAtlas: React.FC<IProps> = ({
@@ -18,6 +20,8 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
   width = GRID_WIDTH,
   height = GRID_HEIGHT,
   scale = 2,
+  grayScale = false,
+  opacity = 1,
 }) => {
   //! If an item is not showing, remember that you MUST run yarn atlas:copy everytime you add a new item to the atlas (it will sync our public folder atlas with src/atlas).
   //!Due to React's limitations, we cannot import it from the public folder directly!
@@ -31,6 +35,8 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
         atlasIMG={atlasIMG}
         frame={spriteData.frame}
         scale={scale}
+        grayScale={grayScale}
+        opacity={opacity}
       />
     </Container>
   );
@@ -45,6 +51,8 @@ interface IImgSpriteProps {
     h: number;
   };
   scale: number;
+  grayScale: boolean;
+  opacity: number;
 }
 
 interface IContainerProps {
@@ -66,4 +74,6 @@ const ImgSprite = styled.div<IImgSpriteProps>`
   position: relative;
   top: 8px;
   left: 8px;
+  filter: ${props => (props.grayScale ? 'grayscale(100%)' : 'none')};
+  opacity: ${props => props.opacity};
 `;

package/src/components/SimpleProgressBar.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
 import styled from 'styled-components';
 
-interface IProps {
+export interface ISimpleProgressBarProps {
   value: number;
-  height?: string;
   bgColor?: string;
+  margin?: number;
 }
 
-export const SimpleProgressBar: React.FC<IProps> = ({
+export const SimpleProgressBar: React.FC<ISimpleProgressBarProps> = ({
   value,
-
   bgColor = 'red',
+  margin = 20,
 }) => {
   return (
-    <Container>
-      <ProgressBarContainer>
+    <Container className="simple-progress-bar">
+      <ProgressBarContainer margin={margin}>
         <BackgroundBar>
           <Progress value={value} bgColor={bgColor} />
         </BackgroundBar>
@@ -34,16 +34,20 @@ const BackgroundBar = styled.span`
   background-color: rgba(0, 0, 0, 0.075);
 `;
 
-interface IProgressProps {
+interface ISimpleProgressBarThemeProps {
   value: number;
   bgColor: string;
 }
 
 const Progress = styled.span`
-  background-color: ${(props: IProgressProps) => props.bgColor};
-  width: ${(props: IProgressProps) => props.value}%;
+  background-color: ${(props: ISimpleProgressBarThemeProps) => props.bgColor};
+  width: ${(props: ISimpleProgressBarThemeProps) => props.value}%;
 `;
 
+interface ISimpleProgressBarTheme2Props {
+  margin: number;
+}
+
 const ProgressBarContainer = styled.div`
   border-radius: 60px;
   border: 1px solid #282424;
@@ -53,6 +57,6 @@ const ProgressBarContainer = styled.div`
     display: block;
     height: 100%;
   }
-
   height: 8px;
+  margin-left: ${(props: ISimpleProgressBarTheme2Props) => props.margin}px;
 `;