@rpg-engine/long-bow 0.1.69 → 0.1.72

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

@@ -1,12 +1,34 @@
-import { IItem } from '@rpg-engine/shared';
+import { IItem, IItemContainer, ItemSlotType } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
 import atlasJSON from '../../../mocks/atlas/items/items.json';
 import atlasIMG from '../../../mocks/atlas/items/items.png';
-import { SpriteFromAtlas } from '../SpriteFromAtlas';
+import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
+
+export enum SlotContainerType {
+  INVENTORY = 'Inventory',
+  EQUIPMENT_SET = 'EquipmentSet',
+}
+
+const EquipmentSlotSpriteByType: any = {
+  Neck: 'accessories/corruption-necklace.png',
+  LeftHand: 'swords/broad-sword.png',
+  Ring: 'rings/iron-ring.png',
+  Head: 'helmets/viking-helmet.png',
+  Torso: 'armors/iron-armor.png',
+  Legs: 'crafting-resources/medicinal-leaf.png',
+  Feet: 'boots/iron-boots.png',
+  Inventory: 'containers/bag.png',
+  RightHand: 'shields/plate-shield.png',
+  Accessory: 'gloves/plate-gloves.png',
+};
+
 interface IProps {
   slotIndex: number;
   item: IItem | null;
+  itemContainer?: IItemContainer | null;
+  slotContainerType: SlotContainerType | null;
+  slotSpriteMask?: ItemSlotType | null;
   onMouseOver: (
     event: any,
     slotIndex: number,
@@ -14,14 +36,23 @@ interface IProps {
     x: number,
     y: number
   ) => void;
-  onClick: (item: IItem, posX: number, posY: number) => void;
+  onMouseOut: () => void;
+  onClick: (
+    item: IItem,
+    posX: number,
+    posY: number,
+    slotContainerType: SlotContainerType | null
+  ) => void;
   onCancelContextMenu: () => void;
 }
 
 export const ItemSlot: React.FC<IProps> = ({
   slotIndex,
   item,
+  slotContainerType,
+  slotSpriteMask,
   onMouseOver,
+  onMouseOut,
   onClick,
   onCancelContextMenu,
 }) => {
@@ -32,51 +63,88 @@ export const ItemSlot: React.FC<IProps> = ({
     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)
       }
+      onMouseOut={() => onMouseOut()}
       onClick={e => {
         if (item) {
-          console.log(e);
-          onClick(item, e.clientX, e.clientY);
+          onClick(item, e.clientX, e.clientY, slotContainerType);
         } else {
           onCancelContextMenu();
         }
       }}
     >
-      {item && item.texturePath ? (
-        <SpriteFromAtlas
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          spriteKey={item.texturePath}
-          scale={3}
-        />
-      ) : null}
-      {item && item.isStackable && item?.stackQty ? (
-        <ItemQty left={getLeftPositionValue(item.stackQty)}>
-          {' '}
-          {item.stackQty}{' '}
-        </ItemQty>
-      ) : null}
+      {onRenderSlot(item)}
     </Container>
   );
 };
 
 const Container = styled.div`
   margin: 0.1rem;
-  // border: 1px red solid;
-
   .sprite-from-atlas-img {
     position: relative;
     top: 1.5rem;
     left: 1.5rem;
-
-    &:hover {
-      filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(180deg);
-    }
   }
 `;
 

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

@@ -1,21 +1,32 @@
-import { ActionsByItemType, ItemType } from '@rpg-engine/shared';
+import {
+  ActionsByItemType,
+  ItemSocketEventsDisplayLabels,
+  ItemType,
+} from '@rpg-engine/shared';
 
-interface IContextMenuItem {
+export 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;
-  };
+export enum ContainerType {
+  INVENTORY = 'Inventory',
+  EQUIPMENT_SET = 'EquipmentSet',
+}
+
+// TODO: Refactor this file
+const generateContextList = (actionsByTypeList: any) => {
+  const contextMenu: IContextMenuItem[] = actionsByTypeList.map(
+    (action: string) => {
+      return { id: action, text: ItemSocketEventsDisplayLabels[action] };
+    }
+  );
+  return contextMenu;
+};
 
+export const handleContextMenuList = (itemType: ItemType) => {
   let contextActionMenu: IContextMenuItem[] = [];
+
   switch (itemType) {
     case ItemType.Weapon:
     case ItemType.Armor:
@@ -42,3 +53,29 @@ export const handleContextMenuList = (itemType: ItemType) => {
   }
   return contextActionMenu;
 };
+
+export const handleEquipmentContextMenuList = (itemType: ItemType) => {
+  let contextActionMenu: IContextMenuItem[] = [];
+  switch (itemType) {
+    case ItemType.Weapon:
+    case ItemType.Armor:
+    case ItemType.Accessory:
+    case ItemType.Jewelry:
+    case ItemType.Tool:
+      contextActionMenu = generateContextList(
+        ActionsByItemType.EquipmenSetItems
+      );
+      break;
+    case ItemType.Container:
+      contextActionMenu = generateContextList(
+        ActionsByItemType.EquipmenSetContainer
+      );
+      break;
+    default:
+      contextActionMenu = generateContextList(
+        ActionsByItemType.EquipmenSetItems
+      );
+      break;
+  }
+  return contextActionMenu;
+};

package/src/components/ListMenu.tsx

@@ -24,14 +24,14 @@ export const ListMenu: React.FC<IListMenuProps> = ({
   return (
     <Container x={x} y={y} fontSize={fontSize}>
       <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
-        {options.map(params => (
+        {options.map((params, index) => (
           <ListElement
-            key={params.text}
+            key={params?.id || index}
             onClick={() => {
-              onSelected(params.id);
+              onSelected(params?.id);
             }}
           >
-            {params.text}
+            {params?.text || 'No text'}
           </ListElement>
         ))}
       </ul>

package/src/components/Multitab/Tab.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import styled from 'styled-components';
+import { MultitabType } from './TabsContainer';
+
+export interface ISingleTab {
+  active: boolean;
+  label: string;
+  onClick: () => void;
+  type: MultitabType;
+}
+
+export const Tab: React.FC<ISingleTab> = ({ active, label, onClick, type }) => {
+  return (
+    <CustomTab activeTab={active} onClick={onClick} className={type}>
+      <p>{label}</p>
+    </CustomTab>
+  );
+};
+
+interface ICustomTab {
+  activeTab: boolean;
+}
+
+const CustomTab = styled.div<ICustomTab>`
+  width: 120px;
+  color: white;
+  font-size: 0.8rem;
+
+  &.gray {
+    border-left: 0.25rem solid rgba(0, 0, 0, 0.25);
+    border-right: 0.25rem solid rgba(0, 0, 0, 0.25);
+    border-top: 0.25rem solid rgba(0, 0, 0, 0.25);
+    background: ${props => (props.activeTab ? '#4E4A4E' : '#2b292b')};
+  }
+
+  &.brown {
+    border-left: 0.25rem solid #996d55;
+    border-right: 0.25rem solid #996d55;
+    border-top: 0.25rem solid #996d55;
+    background: ${props => (props.activeTab ? '#BF886A' : '#B67051')};
+  }
+
+  margin-right: 10px;
+  p {
+    text-align: center;
+    font-size: 0.6rem;
+
+    opacity: ${props => (props.activeTab ? '1' : '0.5')};
+  }
+
+  border-radius: 5px 5px 0 0;
+
+  z-index: ${props => (props.activeTab ? 1 : -1)};
+
+  position: relative;
+  top: 0.3rem;
+`;

package/src/components/Multitab/TabBody.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IProps {
+  id: string;
+  children: React.ReactNode;
+}
+
+export const TabBody: React.FC<IProps> = ({ id, children }) => {
+  return <Container data-tab-id={id}>{children}</Container>;
+};
+
+const Container = styled.div``;

package/src/components/Multitab/TabsContainer.tsx

@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { DraggableContainer } from '../DraggableContainer';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { Tab } from './Tab';
+
+interface ITab {
+  label: string;
+  id: string;
+}
+
+export enum MultitabType {
+  Brown = 'brown',
+  Gray = 'gray',
+}
+
+export interface ITabsContainer {
+  children: React.ReactNode;
+  onCloseButton?: () => void;
+  tabs: ITab[];
+  type: MultitabType;
+}
+
+export const TabsContainer: React.FC<ITabsContainer> = ({
+  children,
+  onCloseButton,
+  tabs,
+  type = MultitabType.Brown,
+}) => {
+  const [selectedTab, setSelectedTab] = useState(tabs[0].id); //by default the first one
+
+  const onRenderTabs = () =>
+    tabs.map((tab, index) => (
+      <Tab
+        type={type}
+        active={selectedTab === tab.id}
+        label={tab.label}
+        key={`${tab.label}_${index}`}
+        onClick={() => setSelectedTab(tab.id)}
+      >
+        {tab.label}
+      </Tab>
+    ));
+
+  const onGetContainerType = () => {
+    switch (type) {
+      case 'brown':
+        return RPGUIContainerTypes.FramedGold;
+      case 'gray':
+        return RPGUIContainerTypes.Framed;
+      default:
+        return RPGUIContainerTypes.Framed;
+    }
+  };
+
+  return (
+    <DraggableContainer
+      onCloseButton={onCloseButton}
+      type={onGetContainerType()}
+    >
+      {onRenderTabs()}
+      <BodyContainer selectedTab={selectedTab} className={type}>
+        {children}
+      </BodyContainer>
+    </DraggableContainer>
+  );
+};
+
+interface IBodyContainer {
+  selectedTab: string;
+}
+
+const BodyContainer = styled.div<IBodyContainer>`
+  display: flex; 
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+
+  /* hide everything that is not data-tab-id selectedTab */
+  & > *:not([data-tab-id=${props => props.selectedTab}]) {
+    display: none;
+  }
+
+  &.brown {
+  border: 0.25rem solid #996D55;
+  background-color: #BF886A;
+  }
+  
+
+  &.gray {
+    border: 0.25rem solid rgba(0, 0, 0, 0.25);
+    background-color: #4E4A4E;
+  }
+ 
+
+  border-radius: 5px; 
+  padding: 0.5rem; 
+   
+`;

package/src/components/SkillProgressBar.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import styled from 'styled-components';
 import atlasJSON from '../mocks/atlas/items/items.json';
 import atlasIMG from '../mocks/atlas/items/items.png';
-import { SpriteFromAtlas } from './Item/SpriteFromAtlas';
+import { SpriteFromAtlas } from './shared/SpriteFromAtlas';
 import { SimpleProgressBar } from './SimpleProgressBar';
 
 export interface ISkillProgressBarProps {
@@ -42,7 +42,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
                 atlasIMG={atlasIMG}
                 atlasJSON={atlasJSON}
                 spriteKey={texturePath}
-                scale={1}
+                imgScale={1}
                 grayScale
                 opacity={0.5}
               />

package/src/components/{Item → shared}/SpriteFromAtlas.tsx

@@ -8,9 +8,12 @@ interface IProps {
   spriteKey: string;
   width?: number;
   height?: number;
-  scale?: number;
   grayScale?: boolean;
   opacity?: number;
+  onClick?: () => void;
+  containerStyle?: any;
+  imgStyle?: any;
+  imgScale?: number;
 }
 
 export const SpriteFromAtlas: React.FC<IProps> = ({
@@ -19,7 +22,10 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
   spriteKey,
   width = GRID_WIDTH,
   height = GRID_HEIGHT,
-  scale = 2,
+  imgScale = 2,
+  imgStyle,
+  onClick,
+  containerStyle,
   grayScale = false,
   opacity = 1,
 }) => {
@@ -29,14 +35,21 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
   const spriteData = atlasJSON.frames[spriteKey];
 
   return (
-    <Container width={width} height={height}>
+    <Container
+      width={width}
+      height={height}
+      hasHover={grayScale}
+      onClick={onClick}
+      style={containerStyle}
+    >
       <ImgSprite
         className="sprite-from-atlas-img"
         atlasIMG={atlasIMG}
         frame={spriteData.frame}
-        scale={scale}
+        scale={imgScale}
         grayScale={grayScale}
         opacity={opacity}
+        style={imgStyle}
       />
     </Container>
   );
@@ -58,11 +71,18 @@ interface IImgSpriteProps {
 interface IContainerProps {
   width: number;
   height: number;
+  hasHover: boolean;
 }
 
 const Container = styled.div`
   width: ${(props: IContainerProps) => props.width}px;
   height: ${(props: IContainerProps) => props.height}px;
+  ${(props: IContainerProps) =>
+    !props.hasHover
+      ? `&:hover {
+    filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(180deg);
+  }`
+      : ``}
 `;
 
 const ImgSprite = styled.div<IImgSpriteProps>`

package/src/components/shared/SpriteIcon.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import styled from 'styled-components';
+import iconsAtlasJSON from '../../mocks/atlas/icons/icons.json';
+import iconsAtlasIMG from '../../mocks/atlas/icons/icons.png';
+import { SpriteFromAtlas } from './SpriteFromAtlas';
+
+interface IProps {
+  onClick?: () => void;
+  spriteKey: string;
+  baseSpriteKey?: string;
+  imgStyle?: any;
+}
+
+export const SpriteIcon: React.FC<IProps> = ({
+  onClick,
+  spriteKey,
+  baseSpriteKey,
+  imgStyle,
+}) => {
+  return (
+    <Container>
+      {baseSpriteKey && (
+        <Slot>
+          <SpriteFromAtlas
+            onClick={onClick}
+            atlasJSON={iconsAtlasJSON}
+            atlasIMG={iconsAtlasIMG}
+            spriteKey={baseSpriteKey}
+            width={32}
+            height={32}
+            containerStyle={{
+              zIndex: -1,
+            }}
+          />
+        </Slot>
+      )}
+      <Slot>
+        <SpriteFromAtlas
+          onClick={onClick}
+          atlasJSON={iconsAtlasJSON}
+          atlasIMG={iconsAtlasIMG}
+          spriteKey={spriteKey}
+          width={28}
+          height={28}
+          containerStyle={{
+            zIndex: 0,
+          }}
+          imgScale={baseSpriteKey ? 1.5 : 2}
+          imgStyle={imgStyle}
+        />
+      </Slot>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  position: relative;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Slot = styled.div`
+  position: absolute;
+`;