@rpg-engine/long-bow 0.1.794 → 0.2.2

package/src/stories/Text.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../../src';
+import {
+  IInputProps,
+  Input as InputComponent,
+} from '../../src/components/Input';
+import {
+  ITextArea,
+  TextArea as TextAreaComponent,
+} from '../../src/components/TextArea';
+
+const meta: Meta = {
+  title: 'Text',
+  component: InputComponent,
+};
+
+export default meta;
+
+const InputTemplate: Story<IInputProps> = args => (
+  <RPGUIRoot>
+    <InputComponent {...args} />
+  </RPGUIRoot>
+);
+
+export const Input = InputTemplate.bind({});
+
+Input.args = {
+  placeholder: 'Test placeholder',
+};
+
+const TextAreaTemplate: Story<ITextArea> = args => (
+  <RPGUIRoot>
+    <TextAreaComponent {...args} />
+  </RPGUIRoot>
+);
+
+export const TextArea = TextAreaTemplate.bind({});
+
+TextArea.args = {
+  placeholder: 'Test placeholder',
+};

package/src/types/eventTypes.ts

@@ -1,4 +1,4 @@
-export interface IPosition {
-  x: number;
-  y: number;
-}
+export interface IPosition {
+  x: number;
+  y: number;
+}

package/src/types/index.d.ts

@@ -1,2 +1,2 @@
-declare module '*.gif';
-declare module '*.png';
+declare module '*.gif';
+declare module '*.png';

package/dist/components/Item/Cards/ItemCard.d.ts

@@ -1,9 +0,0 @@
-import { IItem } from '@rpg-engine/shared';
-import React from 'react';
-interface IProps {
-    item: IItem | null;
-    x: number;
-    y: number;
-}
-export declare const ItemCard: React.FC<IProps>;
-export {};

package/dist/components/shared/SpriteIcon.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-interface IProps {
-    onClick?: () => void;
-    spriteKey: string;
-    baseSpriteKey?: string;
-    imgStyle?: any;
-}
-export declare const SpriteIcon: React.FC<IProps>;
-export {};

package/dist/components/store/UI.store.d.ts

@@ -1,38 +0,0 @@
-import { IItem, ItemSocketEvents, ItemType } from '@rpg-engine/shared';
-import { IPosition } from '../../types/eventTypes';
-import { 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'> {
-}
-declare class UIStore {
-    contextMenu: IContextMenu | null;
-    onHoverDetail: IHoverDetail | null;
-    draggablePosition: IPosition;
-    constructor();
-    setContextMenu(contextMenu: ISetContextMenu, itemType: ItemType): void;
-    setEquipContextMenu(contextMenu: ISetContextMenu, itemType: ItemType, isItemContainer: boolean | undefined): void;
-    clearContextMenu(): void;
-    setItemHoverDetail(hoverDetail: IHoverDetail): void;
-    clearItemHoverDetail(): void;
-    handleOnItemClick: (item: IItem, posX: number, posY: number, slotContainerType: SlotContainerType | null) => void;
-    handleOnMouseHover: (event: any, slotIndex: number, item: IItem | null, posX: number, posY: number, onMouseOver: any) => void;
-    onSelected(selectedActionId: ItemSocketEvents | string, onActionSelected: any): void;
-    setDraggablePosition(currentPosition: IPosition): void;
-    private getOffsets;
-}
-export declare const uiStore: UIStore;
-export {};

package/src/components/Item/Cards/ItemCard.tsx

@@ -1,36 +0,0 @@
-import { IItem } from '@rpg-engine/shared';
-import React from 'react';
-import styled from 'styled-components';
-
-interface IProps {
-  item: IItem | null;
-  x: number;
-  y: number;
-}
-
-export const ItemCard: React.FC<IProps> = ({ item, x, y }) => {
-  return (
-    <Container x={x} y={y}>
-      {item?.name}
-    </Container>
-  );
-};
-
-interface IContainerProps {
-  x?: number;
-  y?: number;
-  fontSize?: number;
-}
-const Container = styled.div<IContainerProps>`
-  position: absolute;
-  top: ${props => props.y || 0}px;
-  left: ${props => props.x || 0}px;
-  font-size: 0.5rem;
-  color: white;
-  background-color: black;
-  border-radius: 5px;
-  padding: 0.5rem;
-  min-width: 20px;
-
-  opacity: 0.5;
-`;

package/src/components/shared/SpriteIcon.tsx

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

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

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