@rpg-engine/long-bow 0.1.78 → 0.1.794

package/src/components/store/UI.store.ts

@@ -1,192 +1,232 @@
-import {
-  IItem,
-  IPayloadProps,
-  ItemSocketEvents,
-  ItemSocketEventsDisplayLabels,
-  ItemType,
-} from '@rpg-engine/shared';
-import { makeAutoObservable, toJS } from 'mobx';
-import {
-  handleContextMenuList,
-  handleEquipmentContextMenuList,
-  IContextMenuItem,
-} from '../Item/Inventory/itemContainerHelper';
-import { SlotContainerType } from '../Item/Inventory/ItemSlot';
-
-interface IContextMenu {
-  visible: boolean;
-  posX: number;
-  posY: number;
-  slotItem: IItem | null;
-  slotIndex?: number | null;
-  contextActions: IContextMenuItem[];
-}
-
-interface IHoverDetail {
-  visible: boolean;
-  posX: number;
-  posY: number;
-  item: IItem | null;
-}
-
-interface ISetContextMenu extends Omit<IContextMenu, 'contextActions'> {}
-
-const initialState = {
-  visible: false,
-  posX: 0,
-  posY: 0,
-  contextActions: [],
-  slotItem: null,
-};
-
-const initialHoverState = {
-  visible: false,
-  posX: 0,
-  posY: 0,
-  item: null,
-};
-class UIStore {
-  public contextMenu: IContextMenu | null = initialState;
-
-  public onHoverDetail: IHoverDetail | null = initialHoverState;
-
-  constructor() {
-    makeAutoObservable(this);
-  }
-
-  public setContextMenu(contextMenu: ISetContextMenu, itemType: ItemType) {
-    const contextActions = handleContextMenuList(itemType);
-
-    this.contextMenu = {
-      ...contextMenu,
-      contextActions,
-    };
-
-    console.log(toJS(this.contextMenu));
-  }
-
-  public setEquipContextMenu(
-    contextMenu: ISetContextMenu,
-    itemType: ItemType,
-    isItemContainer: boolean | undefined
-  ) {
-    const contextActions = handleEquipmentContextMenuList(itemType);
-    if (isItemContainer)
-      contextActions.push({
-        id: ItemSocketEvents.ContainerOpen,
-        text: ItemSocketEventsDisplayLabels[ItemSocketEvents.ContainerOpen],
-      });
-    this.contextMenu = {
-      ...contextMenu,
-      contextActions,
-    };
-
-    console.log(toJS(this.contextMenu));
-  }
-
-  public clearContextMenu() {
-    this.contextMenu = initialState;
-  }
-
-  public setItemHoverDetail(hoverDetail: IHoverDetail) {
-    if (hoverDetail?.item === null) this.clearItemHoverDetail();
-
-    this.onHoverDetail = {
-      ...hoverDetail,
-    };
-  }
-
-  public clearItemHoverDetail() {
-    this.onHoverDetail = initialHoverState;
-  }
-
-  public handleOnItemClick = (
-    item: IItem,
-    posX: number,
-    posY: number,
-    slotContainerType: SlotContainerType | null
-  ): void => {
-    if (
-      !item ||
-      JSON.stringify(this.contextMenu?.slotItem) === JSON.stringify(item)
-    ) {
-      this.clearContextMenu();
-      this.clearItemHoverDetail();
-      return;
-    }
-    switch (slotContainerType) {
-      case SlotContainerType.EQUIPMENT_SET:
-        this.setEquipContextMenu(
-          {
-            visible: true,
-            posX,
-            posY,
-            slotItem: item,
-          },
-          item.type,
-          item.isItemContainer
-        );
-        break;
-      case SlotContainerType.INVENTORY:
-        this.setContextMenu(
-          {
-            visible: true,
-            posX,
-            posY,
-            slotItem: item,
-          },
-          item.type
-        );
-        break;
-      default:
-        this.setContextMenu(
-          {
-            visible: true,
-            posX,
-            posY,
-            slotItem: item,
-          },
-          item.type
-        );
-    }
-
-    this.clearItemHoverDetail();
-  };
-
-  public handleOnMouseHover = (
-    event: any,
-    slotIndex: number,
-    item: IItem | null,
-    posX: number,
-    posY: number,
-    onMouseOver: any
-  ): void => {
-    if (item) {
-      this.setItemHoverDetail({
-        visible: true,
-        posX,
-        posY,
-        item: item,
-      });
-    }
-    if (onMouseOver) {
-      onMouseOver(event, slotIndex, item);
-    }
-  };
-
-  public onSelected(
-    selectedActionId: ItemSocketEvents | string,
-    onActionSelected: any
-  ) {
-    let payloadData: IPayloadProps = {
-      actionType: selectedActionId,
-      item: this.contextMenu?.slotItem!,
-    };
-    if (onActionSelected) {
-      onActionSelected(payloadData);
-    }
-    this.clearContextMenu!();
-  }
-}
-
-export const uiStore = new UIStore();
+import {
+  IItem,
+  IPayloadProps,
+  ItemSocketEvents,
+  ItemSocketEventsDisplayLabels,
+  ItemType,
+} from '@rpg-engine/shared';
+import { makeAutoObservable, toJS } from 'mobx';
+import { IPosition } from '../../types/eventTypes';
+import {
+  handleContextMenuList,
+  handleEquipmentContextMenuList,
+  IContextMenuItem,
+} from '../Item/Inventory/itemContainerHelper';
+import { SlotContainerType } from '../Item/Inventory/ItemSlot';
+
+interface IContextMenu {
+  visible: boolean;
+  posX: number;
+  posY: number;
+  slotItem: IItem | null;
+  slotIndex?: number | null;
+  contextActions: IContextMenuItem[];
+}
+
+interface IHoverDetail {
+  visible: boolean;
+  posX: number;
+  posY: number;
+  item: IItem | null;
+}
+
+interface ISetContextMenu extends Omit<IContextMenu, 'contextActions'> {}
+
+const initialState = {
+  visible: false,
+  posX: 0,
+  posY: 0,
+  contextActions: [],
+  slotItem: null,
+};
+
+const initialHoverState = {
+  visible: false,
+  posX: 0,
+  posY: 0,
+  item: null,
+};
+
+const initialPosition = {
+  x: 0,
+  y: 0
+}
+class UIStore {
+  public contextMenu: IContextMenu | null = initialState;
+  public onHoverDetail: IHoverDetail | null = initialHoverState;
+
+  public draggablePosition: IPosition  = initialPosition;
+
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  public setContextMenu(contextMenu: ISetContextMenu, itemType: ItemType) {
+    const contextActions = handleContextMenuList(itemType);
+
+    this.contextMenu = {
+      ...contextMenu,
+      contextActions,
+    };
+
+    console.log(toJS(this.contextMenu));
+  }
+
+  public setEquipContextMenu(
+    contextMenu: ISetContextMenu,
+    itemType: ItemType,
+    isItemContainer: boolean | undefined
+  ) {
+    const contextActions = handleEquipmentContextMenuList(itemType);
+    if (isItemContainer)
+      contextActions.push({
+        id: ItemSocketEvents.ContainerOpen,
+        text: ItemSocketEventsDisplayLabels[ItemSocketEvents.ContainerOpen],
+      });
+    this.contextMenu = {
+      ...contextMenu,
+      contextActions,
+    };
+
+    console.log(toJS(this.contextMenu));
+  }
+
+  public clearContextMenu() {
+    this.contextMenu = initialState;
+  }
+
+  public setItemHoverDetail(hoverDetail: IHoverDetail) {
+    if (hoverDetail?.item === null) this.clearItemHoverDetail();
+
+    this.onHoverDetail = {
+      ...hoverDetail,
+    };
+  }
+
+  public clearItemHoverDetail() {
+    this.onHoverDetail = initialHoverState;
+  }
+
+  public handleOnItemClick = (
+    item: IItem,
+    posX: number,
+    posY: number,
+    slotContainerType: SlotContainerType | null
+  ): void => {
+    if (
+      !item ||
+      JSON.stringify(this.contextMenu?.slotItem) === JSON.stringify(item)
+    ) {
+      this.clearContextMenu();
+      this.clearItemHoverDetail();
+      return;
+    }
+
+    this.setDraggablePosition(this.getOffsets())
+
+    switch (slotContainerType) {
+      case SlotContainerType.EQUIPMENT_SET:
+        this.setEquipContextMenu(
+          {
+            visible: true,
+            posX,
+            posY,
+            slotItem: item,
+          },
+          item.type,
+          item.isItemContainer
+        );
+        break;
+      case SlotContainerType.INVENTORY:
+        this.setContextMenu(
+          {
+            visible: true,
+            posX,
+            posY,
+            slotItem: item,
+          },
+          item.type
+        );
+        break;
+      default:
+        this.setContextMenu(
+          {
+            visible: true,
+            posX,
+            posY,
+            slotItem: item,
+          },
+          item.type
+        );
+    }
+
+    this.clearItemHoverDetail();
+  };
+
+  public handleOnMouseHover = (
+    event: any,
+    slotIndex: number,
+    item: IItem | null,
+    posX: number,
+    posY: number,
+    onMouseOver: any
+  ): void => {
+    if (item) {
+      this.setDraggablePosition(this.getOffsets())
+      this.setItemHoverDetail({
+        visible: true,
+        posX: posX,
+        posY: posY,
+        item: item,
+      });
+    }
+    if (onMouseOver) {
+      onMouseOver(event, slotIndex, item);
+    }
+  };
+
+  public onSelected(
+    selectedActionId: ItemSocketEvents | string,
+    onActionSelected: any
+  ) {
+    let payloadData: IPayloadProps = {
+      actionType: selectedActionId,
+      item: this.contextMenu?.slotItem!,
+    };
+    if (onActionSelected) {
+      onActionSelected(payloadData);
+    }
+    this.clearContextMenu!();
+  }
+
+  public setDraggablePosition(currentPosition: IPosition){
+    this.draggablePosition = { ...currentPosition }
+  }
+
+  private getOffsets = () => {
+    const p = { x: 0, y: 0};
+    // const body = document.getElementsByTagName('body')
+    let body = document.querySelector('body') as any | null;
+    
+    if( body != null){
+      p.x = body.offsetLeft;
+      p.y = body.offsetTop;
+      while(body!.offsetParent){
+        console.log(`offsetParent: ${body!.offsetParent}`)
+        p.x = p.x + body!.offsetLeft
+        p.y = p.y + body!.offsetTop;
+        if (body == document.getElementsByTagName("body")[0]) {
+            break;
+        }
+        else {
+            body = body!.offsetParent;
+        }
+      }
+    }    
+    return p;    
+  }
+
+}
+
+export const uiStore = new UIStore();

package/src/components/typography/DynamicText.tsx

@@ -1,49 +1,49 @@
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-
-interface IProps {
-  text: string;
-  onFinish?: () => void;
-  onStart?: () => void;
-}
-
-export const DynamicText: React.FC<IProps> = ({ text, onFinish, onStart }) => {
-  const [textState, setTextState] = useState<string>('');
-
-  useEffect(() => {
-    let i = 0;
-    const interval = setInterval(() => {
-      // on every interval, show one more character
-
-      if (i === 0) {
-        if (onStart) {
-          onStart();
-        }
-      }
-
-      if (i < text.length) {
-        setTextState(text.substring(0, i + 1));
-        i++;
-      } else {
-        clearInterval(interval);
-        if (onFinish) {
-          onFinish();
-        }
-      }
-    }, 50);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, [text]);
-
-  return <TextContainer>{textState}</TextContainer>;
-};
-
-const TextContainer = styled.p`
-  font-size: 0.7rem !important;
-  color: white;
-  text-shadow: 1px 1px 0px #000000;
-  letter-spacing: 1.2px;
-  word-break: normal;
-`;
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+interface IProps {
+  text: string;
+  onFinish?: () => void;
+  onStart?: () => void;
+}
+
+export const DynamicText: React.FC<IProps> = ({ text, onFinish, onStart }) => {
+  const [textState, setTextState] = useState<string>('');
+
+  useEffect(() => {
+    let i = 0;
+    const interval = setInterval(() => {
+      // on every interval, show one more character
+
+      if (i === 0) {
+        if (onStart) {
+          onStart();
+        }
+      }
+
+      if (i < text.length) {
+        setTextState(text.substring(0, i + 1));
+        i++;
+      } else {
+        clearInterval(interval);
+        if (onFinish) {
+          onFinish();
+        }
+      }
+    }, 50);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [text]);
+
+  return <TextContainer>{textState}</TextContainer>;
+};
+
+const TextContainer = styled.p`
+  font-size: 0.7rem !important;
+  color: white;
+  text-shadow: 1px 1px 0px #000000;
+  letter-spacing: 1.2px;
+  word-break: normal;
+`;

package/src/constants/uiColors.ts

@@ -1,10 +1,10 @@
-export const colors = {
-  darkGrey: '#3e3e3e',
-  darkYellow: '#FFC857',
-  orange: '#E9724C',
-  cardinal: '#C5283D',
-  raisinBlack: '#191923',
-  navyBlue: '#0E79B2',
-  purple: '#8C3D8C',
-  blue: '#3772FF',
-};
+export const colors = {
+  darkGrey: '#3e3e3e',
+  darkYellow: '#FFC857',
+  orange: '#E9724C',
+  cardinal: '#C5283D',
+  raisinBlack: '#191923',
+  navyBlue: '#0E79B2',
+  purple: '#8C3D8C',
+  blue: '#3772FF',
+};

package/src/hooks/useEventListener.ts

@@ -1,21 +1,21 @@
-import React from 'react';
-
-//@ts-ignore
-export const useEventListener = (type, handler, el = window) => {
-  const savedHandler = React.useRef();
-
-  React.useEffect(() => {
-    savedHandler.current = handler;
-  }, [handler]);
-
-  React.useEffect(() => {
-    //@ts-ignore
-    const listener = e => savedHandler.current(e);
-
-    el.addEventListener(type, listener);
-
-    return () => {
-      el.removeEventListener(type, listener);
-    };
-  }, [type, el]);
-};
+import React from 'react';
+
+//@ts-ignore
+export const useEventListener = (type, handler, el = window) => {
+  const savedHandler = React.useRef();
+
+  React.useEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+
+  React.useEffect(() => {
+    //@ts-ignore
+    const listener = e => savedHandler.current(e);
+
+    el.addEventListener(type, listener);
+
+    return () => {
+      el.removeEventListener(type, listener);
+    };
+  }, [type, el]);
+};

package/src/hooks/useOutsideAlerter.ts

@@ -1,25 +1,25 @@
-import { useEffect } from 'react';
-
-export function useOutsideClick(ref: any, id: string) {
-  useEffect(() => {
-    /**
-     * Alert if clicked on outside of element
-     */
-    function handleClickOutside(event: any) {
-      if (ref.current && !ref.current.contains(event.target)) {
-        const event = new CustomEvent('clickOutside', {
-          detail: {
-            id,
-          },
-        });
-        document.dispatchEvent(event);
-      }
-    }
-    // Bind the event listener
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      // Unbind the event listener on clean up
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [ref]);
-}
+import { useEffect } from 'react';
+
+export function useOutsideClick(ref: any, id: string) {
+  useEffect(() => {
+    /**
+     * Alert if clicked on outside of element
+     */
+    function handleClickOutside(event: any) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        const event = new CustomEvent('clickOutside', {
+          detail: {
+            id,
+          },
+        });
+        document.dispatchEvent(event);
+      }
+    }
+    // Bind the event listener
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref]);
+}