@rpg-engine/long-bow 0.1.82 → 0.1.85

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;

package/src/components/QuestInfo/QuestInfo.tsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Button, ButtonTypes } from '../Button';
+import { DraggableContainer } from '../DraggableContainer';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { Column } from '../shared/Column';
+
+import thumbnailDefault from './img/default.png';
+
+export interface IQuestInfoProps {
+  title: string;
+  children: React.ReactNode;
+  onClose?: () => void;
+  button?: Array<IQuestButtonProps>;
+  thumbnail?: string;
+}
+
+export interface IQuestButtonProps {
+  disabled: boolean;
+  title: string;
+  onClick: () => void;
+}
+
+export const QuestInfo: React.FC<IQuestInfoProps> = ({
+  title,
+  onClose,
+  button,
+  thumbnail,
+  children,
+}) => {
+  return (
+    <QuestDraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={() => {
+        if (onClose) onClose();
+      }}
+      width="730px"
+      cancelDrag=".equipment-container-body"
+    >
+      {title && (
+        <TitleContainer className="drag-handler">
+          <Title>
+            <Thumbnail src={thumbnail || thumbnailDefault} />
+            {title}
+          </Title>
+          <QuestSplitDiv>
+            <hr className="golden" />
+          </QuestSplitDiv>
+        </TitleContainer>
+      )}
+      <Content>{children}</Content>
+      <QuestColumn className="dark-background" justifyContent="flex-end">
+        {button &&
+          button.map((item, index) => (
+            <Button
+              key={index}
+              onClick={item.onClick}
+              disabled={item.disabled}
+              buttonType={ButtonTypes.RPGUIButton}
+              id={`button-${index}`}
+            >
+              {item.title}
+            </Button>
+          ))}
+      </QuestColumn>
+    </QuestDraggableContainer>
+  );
+};
+
+const QuestDraggableContainer = styled(DraggableContainer)`
+  border: 1px solid black;
+  width: 600px;
+  height: 500px;
+  overflow-y: scroll;
+  padding: 0 0 0 0 !important;
+  .DraggableContainer__TitleContainer-sc-184mpyl-2 {
+    height: auto;
+  }
+  .container-close {
+    position: sticky;
+    margin-left: auto;
+    top: 10px;
+    padding-right: 5px;
+  }
+  img {
+    display: inline-block;
+    vertical-align: middle;
+    line-height: normal;
+  }
+`;
+
+const Content = styled.div`
+  padding: 18px;
+  h1 {
+    text-align: left;
+    margin: 14px 0px;
+  }
+`;
+
+const QuestSplitDiv = styled.div`
+  width: 100%;
+  font-size: 11px;
+  margin-bottom: 10px;
+  hr {
+    margin: 0px;
+    padding: 0px;
+  }
+  p {
+    margin-bottom: 0px;
+  }
+`;
+
+const QuestColumn = styled(Column)`
+  background: #4e4a4e;
+  padding-top: 5px;
+  position: sticky;
+  bottom: 0;
+`;
+
+const TitleContainer = styled.div`
+  background: #4e4a4e;
+  position: sticky;
+  top: 0;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
+const Title = styled.h1`
+  color: white;
+  z-index: 22;
+  font-size: 0.6rem;
+`;
+
+const Thumbnail = styled.img`
+  color: white;
+  z-index: 22;
+  font-size: 10px;
+  width: 64px;
+  margin-right: 0.5rem;
+`;

package/src/components/RelativeListMenu.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { useOutsideClick } from '../hooks/useOutsideAlerter';
+
+interface IListMenuOption {
+  id: string;
+  text: string;
+}
+
+export interface IRelativeMenuProps {
+  options: IListMenuOption[];
+  onSelected: (selectedOptionId: string) => void;
+  fontSize?: number;
+  onOutsideClick?: () => void;
+}
+
+export const RelativeListMenu: React.FC<IRelativeMenuProps> = ({
+  options,
+  onSelected,
+  onOutsideClick,
+  fontSize = 0.8,
+}) => {
+  const ref = useRef(null);
+
+  useOutsideClick(ref, 'relative-context-menu');
+
+  useEffect(() => {
+    document.addEventListener('clickOutside', event => {
+      const e = event as CustomEvent;
+
+      if (e.detail.id === 'relative-context-menu') {
+        if (onOutsideClick) {
+          onOutsideClick();
+        }
+      }
+    });
+
+    return () => {
+      document.removeEventListener('clickOutside', _e => {});
+    };
+  }, []);
+
+  return (
+    <Container fontSize={fontSize} ref={ref}>
+      <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
+        {options.map((params, index) => (
+          <ListElement
+            key={params?.id || index}
+            onClick={() => {
+              onSelected(params?.id);
+            }}
+          >
+            {params?.text || 'No text'}
+          </ListElement>
+        ))}
+      </ul>
+    </Container>
+  );
+};
+
+interface IContainerProps {
+  fontSize?: number;
+}
+
+const Container = styled.div<IContainerProps>`
+  position: absolute;
+  top: 1rem;
+  left: 4rem;
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: start;
+  align-items: flex-start;
+
+  li {
+    font-size: ${props => props.fontSize}em;
+  }
+`;
+
+const ListElement = styled.li`
+  margin-right: 0.5rem;
+`;

package/src/components/SkillsContainer.tsx

@@ -15,7 +15,12 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
   skill,
 }) => {
   return (
-    <SkillsDraggableContainer title="Skills" onCloseButton={onCloseButton}>
+    <SkillsDraggableContainer title="Skills">
+      {onCloseButton && (
+        <CloseButton onClick={onCloseButton} onTouchStart={onCloseButton}>
+          X
+        </CloseButton>
+      )}
       <SkillSplitDiv>
         <p>Combat Skills</p>
         <hr className="golden" />
@@ -233,3 +238,12 @@ const SkillSplitDiv = styled.div`
     margin-bottom: 0px;
   }
 `;
+
+const CloseButton = styled.div`
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  color: white;
+  z-index: 22;
+  font-size: 0.7rem;
+`;