@rpg-engine/long-bow 0.1.69 → 0.1.72

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

@@ -0,0 +1,192 @@
+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();

package/src/index.tsx

@@ -3,10 +3,10 @@ export * from './components/Chat/Chat';
 export * from './components/CheckButton';
 export * from './components/DraggableContainer';
 export * from './components/Dropdown';
+export * from './components/Equipment/EquipmentSet';
 export * from './components/Input';
 export * from './components/Item/Inventory/ItemContainer';
 export * from './components/Item/Inventory/ItemSlot';
-export * from './components/Item/SpriteFromAtlas';
 export * from './components/ListMenu';
 export * from './components/NPCDialog/NPCDialog';
 export * from './components/NPCDialog/QuestionDialog/QuestionDialog';
@@ -15,6 +15,8 @@ export * from './components/RadioButton';
 export * from './components/RangeSlider';
 export * from './components/RPGUIContainer';
 export * from './components/RPGUIRoot';
+export * from './components/shared/SpriteFromAtlas';
+export * from './components/shared/SpriteIcon';
 export * from './components/SkillProgressBar';
 export * from './components/TextArea';
 export * from './components/Truncate';

package/src/mocks/atlas/icons/icons.json

@@ -0,0 +1,303 @@
+{
+  "frames": {
+    "metamask-large.png": {
+      "frame": {
+        "x": 0,
+        "y": 0,
+        "w": 33,
+        "h": 30
+      },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 33,
+        "h": 30
+      },
+      "sourceSize": {
+        "w": 33,
+        "h": 30
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "chat-large.png": {
+      "frame": {
+        "x": 0,
+        "y": 30,
+        "w": 31,
+        "h": 29
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 1,
+        "y": 3,
+        "w": 31,
+        "h": 29
+      },
+      "sourceSize": {
+        "w": 32,
+        "h": 32
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "equipment.png": {
+      "frame": {
+        "x": 33,
+        "y": 0,
+        "w": 17,
+        "h": 16
+      },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 17,
+        "h": 16
+      },
+      "sourceSize": {
+        "w": 17,
+        "h": 16
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "inventory.png": {
+      "frame": {
+        "x": 33,
+        "y": 16,
+        "w": 17,
+        "h": 16
+      },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 17,
+        "h": 16
+      },
+      "sourceSize": {
+        "w": 17,
+        "h": 16
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "icon-base-blue.png": {
+      "frame": {
+        "x": 31,
+        "y": 32,
+        "w": 16,
+        "h": 16
+      },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 16,
+        "h": 16
+      },
+      "sourceSize": {
+        "w": 16,
+        "h": 16
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "icon-base-brown.png": {
+      "frame": {
+        "x": 50,
+        "y": 0,
+        "w": 16,
+        "h": 16
+      },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 16,
+        "h": 16
+      },
+      "sourceSize": {
+        "w": 16,
+        "h": 16
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "chat-small.png": {
+      "frame": {
+        "x": 50,
+        "y": 16,
+        "w": 16,
+        "h": 16
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 1,
+        "y": 0,
+        "w": 16,
+        "h": 16
+      },
+      "sourceSize": {
+        "w": 17,
+        "h": 16
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "icon-base-gold.png": {
+      "frame": {
+        "x": 47,
+        "y": 32,
+        "w": 16,
+        "h": 16
+      },
+      "rotated": false,
+      "trimmed": false,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 16,
+        "h": 16
+      },
+      "sourceSize": {
+        "w": 16,
+        "h": 16
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "equipment-raw.png": {
+      "frame": {
+        "x": 0,
+        "y": 59,
+        "w": 15,
+        "h": 13
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 0,
+        "y": 0,
+        "w": 15,
+        "h": 13
+      },
+      "sourceSize": {
+        "w": 16,
+        "h": 13
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "metamask-small.png": {
+      "frame": {
+        "x": 31,
+        "y": 48,
+        "w": 15,
+        "h": 15
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 1,
+        "y": 0,
+        "w": 15,
+        "h": 15
+      },
+      "sourceSize": {
+        "w": 16,
+        "h": 16
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "settings.png": {
+      "frame": {
+        "x": 46,
+        "y": 48,
+        "w": 14,
+        "h": 14
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 1,
+        "y": 1,
+        "w": 14,
+        "h": 14
+      },
+      "sourceSize": {
+        "w": 16,
+        "h": 16
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    },
+    "inventory-raw.png": {
+      "frame": {
+        "x": 15,
+        "y": 59,
+        "w": 13,
+        "h": 13
+      },
+      "rotated": false,
+      "trimmed": true,
+      "spriteSourceSize": {
+        "x": 1,
+        "y": 2,
+        "w": 13,
+        "h": 13
+      },
+      "sourceSize": {
+        "w": 16,
+        "h": 16
+      },
+      "pivot": {
+        "x": 0.5,
+        "y": 0.5
+      }
+    }
+  },
+  "meta": {
+    "app": "http://free-tex-packer.com",
+    "version": "0.6.7",
+    "image": "icons.png",
+    "format": "RGBA8888",
+    "size": {
+      "w": 66,
+      "h": 72
+    },
+    "scale": 1
+  }
+}