@rpg-engine/long-bow 0.3.54 → 0.3.57

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

@@ -1,156 +1,156 @@
-import {
-  ActionsForEquipmentSet,
-  ActionsForInventory,
-  ActionsForLoot,
-  ActionsForMapContainer,
-  IItem,
-  ItemContainerType,
-  ItemSocketEventsDisplayLabels,
-  ItemType,
-} from '@rpg-engine/shared';
-
-export interface IContextMenuItem {
-  id: string;
-  text: string;
-}
-
-const generateContextMenuListOptions = (actionsByTypeList: any) => {
-  const contextMenu: IContextMenuItem[] = actionsByTypeList.map(
-    (action: string) => {
-      return { id: action, text: ItemSocketEventsDisplayLabels[action] };
-    }
-  );
-  return contextMenu;
-};
-
-export const generateContextMenu = (
-  item: IItem,
-  itemContainerType: ItemContainerType | null
-) => {
-  let contextActionMenu: IContextMenuItem[] = [];
-
-  if (itemContainerType === ItemContainerType.Inventory) {
-    switch (item.type) {
-      case ItemType.Weapon:
-      case ItemType.Armor:
-      case ItemType.Accessory:
-      case ItemType.Jewelry:
-        contextActionMenu = generateContextMenuListOptions(
-          ActionsForInventory.Equipment
-        );
-        break;
-      case ItemType.Container:
-        contextActionMenu = generateContextMenuListOptions(
-          ActionsForInventory.Container
-        );
-        break;
-      case ItemType.Consumable:
-        contextActionMenu = generateContextMenuListOptions(
-          ActionsForInventory.Consumable
-        );
-        break;
-      case ItemType.CraftingResource:
-        contextActionMenu = generateContextMenuListOptions(
-          ActionsForInventory.CraftingResource
-        );
-        break;
-      case ItemType.Tool:
-        contextActionMenu = generateContextMenuListOptions(
-          ActionsForInventory.Tool
-        );
-        break;
-
-      default:
-        contextActionMenu = generateContextMenuListOptions(
-          ActionsForInventory.Other
-        );
-        break;
-    }
-  }
-  if (itemContainerType === ItemContainerType.Equipment) {
-    switch (item.type) {
-      case ItemType.Container:
-        contextActionMenu = generateContextMenuListOptions(
-          ActionsForEquipmentSet.Container
-        );
-
-        break;
-      default:
-        contextActionMenu = generateContextMenuListOptions(
-          ActionsForEquipmentSet.Equipment
-        );
-    }
-  }
-  if (itemContainerType === ItemContainerType.Loot) {
-    switch (item.type) {
-      case ItemType.Weapon:
-      case ItemType.Armor:
-      case ItemType.Accessory:
-      case ItemType.Jewelry:
-        contextActionMenu = generateContextMenuListOptions(
-          ActionsForLoot.Equipment
-        );
-        break;
-      case ItemType.Consumable:
-        contextActionMenu = generateContextMenuListOptions(
-          ActionsForLoot.Consumable
-        );
-        break;
-      case ItemType.CraftingResource:
-        contextActionMenu = generateContextMenuListOptions(
-          ActionsForLoot.CraftingResource
-        );
-        break;
-      case ItemType.Tool:
-        contextActionMenu = generateContextMenuListOptions(ActionsForLoot.Tool);
-        break;
-      default:
-        contextActionMenu = generateContextMenuListOptions(
-          ActionsForLoot.Other
-        );
-        break;
-    }
-  }
-  if (itemContainerType === ItemContainerType.MapContainer) {
-    switch (item.type) {
-      case ItemType.Weapon:
-      case ItemType.Armor:
-      case ItemType.Accessory:
-      case ItemType.Jewelry:
-        contextActionMenu = generateContextMenuListOptions(
-          ActionsForMapContainer.Equipment
-        );
-        break;
-      case ItemType.Consumable:
-        contextActionMenu = generateContextMenuListOptions(
-          ActionsForMapContainer.Consumable
-        );
-        break;
-      case ItemType.CraftingResource:
-        contextActionMenu = generateContextMenuListOptions(
-          ActionsForMapContainer.CraftingResource
-        );
-        break;
-      case ItemType.Tool:
-        contextActionMenu = generateContextMenuListOptions(
-          ActionsForMapContainer.Tool
-        );
-        break;
-      default:
-        contextActionMenu = generateContextMenuListOptions(
-          ActionsForMapContainer.Other
-        );
-        break;
-    }
-
-    const contextActionMenuDontHaveUseWith = !contextActionMenu.find(action =>
-      action.text.toLowerCase().includes('use with')
-    );
-
-    if (item.hasUseWith && contextActionMenuDontHaveUseWith) {
-      contextActionMenu.push({ id: 'use-with', text: 'Use with...' });
-    }
-  }
-
-  return contextActionMenu;
-};
+import {
+  ActionsForEquipmentSet,
+  ActionsForInventory,
+  ActionsForLoot,
+  ActionsForMapContainer,
+  IItem,
+  ItemContainerType,
+  ItemSocketEventsDisplayLabels,
+  ItemType,
+} from '@rpg-engine/shared';
+
+export interface IContextMenuItem {
+  id: string;
+  text: string;
+}
+
+const generateContextMenuListOptions = (actionsByTypeList: any) => {
+  const contextMenu: IContextMenuItem[] = actionsByTypeList.map(
+    (action: string) => {
+      return { id: action, text: ItemSocketEventsDisplayLabels[action] };
+    }
+  );
+  return contextMenu;
+};
+
+export const generateContextMenu = (
+  item: IItem,
+  itemContainerType: ItemContainerType | null
+) => {
+  let contextActionMenu: IContextMenuItem[] = [];
+
+  if (itemContainerType === ItemContainerType.Inventory) {
+    switch (item.type) {
+      case ItemType.Weapon:
+      case ItemType.Armor:
+      case ItemType.Accessory:
+      case ItemType.Jewelry:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForInventory.Equipment
+        );
+        break;
+      case ItemType.Container:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForInventory.Container
+        );
+        break;
+      case ItemType.Consumable:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForInventory.Consumable
+        );
+        break;
+      case ItemType.CraftingResource:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForInventory.CraftingResource
+        );
+        break;
+      case ItemType.Tool:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForInventory.Tool
+        );
+        break;
+
+      default:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForInventory.Other
+        );
+        break;
+    }
+  }
+  if (itemContainerType === ItemContainerType.Equipment) {
+    switch (item.type) {
+      case ItemType.Container:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForEquipmentSet.Container
+        );
+
+        break;
+      default:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForEquipmentSet.Equipment
+        );
+    }
+  }
+  if (itemContainerType === ItemContainerType.Loot) {
+    switch (item.type) {
+      case ItemType.Weapon:
+      case ItemType.Armor:
+      case ItemType.Accessory:
+      case ItemType.Jewelry:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForLoot.Equipment
+        );
+        break;
+      case ItemType.Consumable:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForLoot.Consumable
+        );
+        break;
+      case ItemType.CraftingResource:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForLoot.CraftingResource
+        );
+        break;
+      case ItemType.Tool:
+        contextActionMenu = generateContextMenuListOptions(ActionsForLoot.Tool);
+        break;
+      default:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForLoot.Other
+        );
+        break;
+    }
+  }
+  if (itemContainerType === ItemContainerType.MapContainer) {
+    switch (item.type) {
+      case ItemType.Weapon:
+      case ItemType.Armor:
+      case ItemType.Accessory:
+      case ItemType.Jewelry:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForMapContainer.Equipment
+        );
+        break;
+      case ItemType.Consumable:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForMapContainer.Consumable
+        );
+        break;
+      case ItemType.CraftingResource:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForMapContainer.CraftingResource
+        );
+        break;
+      case ItemType.Tool:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForMapContainer.Tool
+        );
+        break;
+      default:
+        contextActionMenu = generateContextMenuListOptions(
+          ActionsForMapContainer.Other
+        );
+        break;
+    }
+
+    const contextActionMenuDontHaveUseWith = !contextActionMenu.find(action =>
+      action.text.toLowerCase().includes('use with')
+    );
+
+    if (item.hasUseWith && contextActionMenuDontHaveUseWith) {
+      contextActionMenu.push({ id: 'use-with', text: 'Use with...' });
+    }
+  }
+
+  return contextActionMenu;
+};

package/src/components/ListMenu.tsx

@@ -1,63 +1,63 @@
-import React from 'react';
-import styled from 'styled-components';
-import { uiFonts } from '../constants/uiFonts';
-
-interface IListMenuOption {
-  id: string;
-  text: string;
-}
-
-export interface IListMenuProps {
-  x: number;
-  y: number;
-  options: IListMenuOption[];
-  onSelected: (selectedOptionId: string) => void;
-}
-
-export const ListMenu: React.FC<IListMenuProps> = ({
-  options,
-  onSelected,
-  x,
-  y,
-}) => {
-  return (
-    <Container x={x} y={y}>
-      <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 {
-  x?: number;
-  y?: number;
-}
-
-const Container = styled.div<IContainerProps>`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  justify-content: start;
-  align-items: flex-start;
-  position: absolute;
-  top: ${props => props.y || 0}px;
-  left: ${props => props.x || 0}px;
-
-  li {
-    font-size: ${uiFonts.size.xsmall};
-  }
-`;
-
-const ListElement = styled.li`
-  margin-right: 0.5rem;
-`;
+import React from 'react';
+import styled from 'styled-components';
+import { uiFonts } from '../constants/uiFonts';
+
+interface IListMenuOption {
+  id: string;
+  text: string;
+}
+
+export interface IListMenuProps {
+  x: number;
+  y: number;
+  options: IListMenuOption[];
+  onSelected: (selectedOptionId: string) => void;
+}
+
+export const ListMenu: React.FC<IListMenuProps> = ({
+  options,
+  onSelected,
+  x,
+  y,
+}) => {
+  return (
+    <Container x={x} y={y}>
+      <ul className="rpgui-list-imp" style={{ overflow: 'hidden' }}>
+        {options.map((params, index) => (
+          <ListElement
+            key={params?.id || index}
+            onPointerDown={() => {
+              onSelected(params?.id);
+            }}
+          >
+            {params?.text || 'No text'}
+          </ListElement>
+        ))}
+      </ul>
+    </Container>
+  );
+};
+
+interface IContainerProps {
+  x?: number;
+  y?: number;
+}
+
+const Container = styled.div<IContainerProps>`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: start;
+  align-items: flex-start;
+  position: absolute;
+  top: ${props => props.y || 0}px;
+  left: ${props => props.x || 0}px;
+
+  li {
+    font-size: ${uiFonts.size.xsmall};
+  }
+`;
+
+const ListElement = styled.li`
+  margin-right: 0.5rem;
+`;

package/src/components/Multitab/Tab.tsx

@@ -1,57 +1,66 @@
-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;
-`;
+import React from 'react';
+import styled from 'styled-components';
+import { MultitabType } from './TabsContainer';
+
+export interface ISingleTab {
+  active: boolean;
+  label: string;
+  onPointerDown: () => void;
+  type: MultitabType;
+}
+
+export const Tab: React.FC<ISingleTab> = ({
+  active,
+  label,
+  onPointerDown,
+  type,
+}) => {
+  return (
+    <CustomTab
+      activeTab={active}
+      onPointerDown={onPointerDown}
+      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

@@ -1,13 +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``;
+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``;