@rpg-engine/long-bow 0.3.44 → 0.3.46

package/dist/mocks/equipmentSet.mocks.d.ts

@@ -1,3 +1,16 @@
-import { IEquipmentSet } from '@rpg-engine/shared';
-export declare const items: any;
+import { IEquipmentSet, IItem } from '@rpg-engine/shared';
+interface IEquipmentSetItems {
+    leftHand: IItem;
+    head: IItem;
+    armor: IItem;
+    legs: IItem;
+    boot: IItem;
+    neck: IItem;
+    ring: IItem;
+    accessory: IItem;
+    inventory: IItem;
+    rightHand: IItem;
+}
+export declare const items: IEquipmentSetItems;
 export declare const equipmentSetMock: IEquipmentSet;
+export {};

package/dist/mocks/skills.mocks.d.ts

@@ -1,121 +1,2 @@
-import { SkillType } from '@rpg-engine/shared';
-export declare const skillMock: {
-    _id: string;
-    stamina: {
-        type: SkillType;
-        level: number;
-        skillPoints: number;
-        skillPointsToNextLevel: number;
-    };
-    magic: {
-        type: SkillType;
-        level: number;
-        skillPoints: number;
-        skillPointsToNextLevel: number;
-    };
-    magicResistance: {
-        type: SkillType;
-        level: number;
-        skillPoints: number;
-        skillPointsToNextLevel: number;
-    };
-    strength: {
-        type: SkillType;
-        level: number;
-        skillPoints: number;
-        skillPointsToNextLevel: number;
-    };
-    resistance: {
-        type: SkillType;
-        level: number;
-        skillPoints: number;
-        skillPointsToNextLevel: number;
-    };
-    dexterity: {
-        type: SkillType;
-        level: number;
-        skillPoints: number;
-        skillPointsToNextLevel: number;
-    };
-    first: {
-        type: SkillType;
-        level: number;
-        skillPoints: number;
-        skillPointsToNextLevel: number;
-    };
-    club: {
-        type: SkillType;
-        level: number;
-        skillPoints: number;
-        skillPointsToNextLevel: number;
-    };
-    sword: {
-        type: SkillType;
-        level: number;
-        skillPoints: number;
-        skillPointsToNextLevel: number;
-    };
-    dagger: {
-        type: SkillType;
-        level: number;
-        skillPoints: number;
-        skillPointsToNextLevel: number;
-    };
-    axe: {
-        type: SkillType;
-        level: number;
-        skillPoints: number;
-        skillPointsToNextLevel: number;
-    };
-    distance: {
-        type: SkillType;
-        level: number;
-        skillPoints: number;
-        skillPointsToNextLevel: number;
-    };
-    shielding: {
-        type: SkillType;
-        level: number;
-        skillPoints: number;
-        skillPointsToNextLevel: number;
-    };
-    fishing: {
-        type: SkillType;
-        level: number;
-        skillPoints: number;
-        skillPointsToNextLevel: number;
-    };
-    mining: {
-        type: SkillType;
-        level: number;
-        skillPoints: number;
-        skillPointsToNextLevel: number;
-    };
-    lumberjacking: {
-        type: SkillType;
-        level: number;
-        skillPoints: number;
-        skillPointsToNextLevel: number;
-    };
-    cooking: {
-        type: SkillType;
-        level: number;
-        skillPoints: number;
-        skillPointsToNextLevel: number;
-    };
-    alchemy: {
-        type: SkillType;
-        level: number;
-        skillPoints: number;
-        skillPointsToNextLevel: number;
-    };
-    level: number;
-    xpGainRate: number;
-    experience: number;
-    xpToNextLevel: number;
-    ownerType: string;
-    owner: string;
-    createdAt: string;
-    updatedAt: string;
-    __v: number;
-};
+import { ISkill } from '@rpg-engine/shared';
+export declare const skillMock: ISkill;

package/dist/stories/ChatDeprecated.stories.d.ts

@@ -0,0 +1,5 @@
+import { IChatMessage } from '@rpg-engine/shared';
+import { Meta } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IChatMessage>;

package/dist/stories/CircullarController.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { CircularControllerProps } from '../components/CircularController/CircularController';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, CircularControllerProps>;

package/dist/stories/CraftBook.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;

package/dist/stories/DropdownSelectorContainer.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { IDropdownSelectorContainer } from '../components/DropdownSelectorContainer';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IDropdownSelectorContainer>;

package/dist/stories/ItemQuantitySelector.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { IItemQuantitySelectorProps } from '../components/Item/Inventory/ItemQuantitySelector';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IItemQuantitySelectorProps>;

package/dist/stories/ItemSelector.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;

package/dist/stories/QuickSpells.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { QuickSpellsProps } from '../components/Spellbook/QuickSpells';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, QuickSpellsProps>;

package/dist/stories/RadioInput.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { IRadioInput } from '../components/RadioInput/RadioInput';
+declare const meta: Meta;
+export default meta;
+export declare const RadioInputElement: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IRadioInput>;

package/dist/stories/Spellbook.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ISpellbookProps } from '../components/Spellbook/Spellbook';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ISpellbookProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.3.44",
+  "version": "0.3.46",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,15 +83,18 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.6.79",
+    "@rpg-engine/shared": "^0.6.80",
     "dayjs": "^1.11.2",
+    "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",
+    "is-mobile": "^3.1.1",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "mobx": "^6.6.0",
     "mobx-react": "^7.5.0",
     "react-draggable": "^4.4.5",
     "react-error-boundary": "^3.1.4",
+    "react-icons": "^4.7.1",
     "rollup-plugin-image-files": "^1.4.2",
     "rpgui": "^1.0.3"
   }

package/src/components/Abstractions/SlotsContainer.tsx

@@ -9,6 +9,7 @@ interface IProps {
   onClose?: () => void;
   onPositionChange?: (position: IPosition) => void;
   onOutsideClick?: () => void;
+  initialPosition?: IPosition;
 }
 
 export const SlotsContainer: React.FC<IProps> = ({
@@ -17,6 +18,7 @@ export const SlotsContainer: React.FC<IProps> = ({
   onClose,
   onPositionChange,
   onOutsideClick,
+  initialPosition,
 }) => {
   return (
     <DraggableContainer
@@ -35,6 +37,7 @@ export const SlotsContainer: React.FC<IProps> = ({
         }
       }}
       onOutsideClick={onOutsideClick}
+      initialPosition={initialPosition}
     >
       {children}
     </DraggableContainer>

package/src/components/Button.tsx

@@ -7,25 +7,35 @@ export enum ButtonTypes {
   RPGUIGoldButton = 'rpgui-button golden',
 }
 
-export interface IButtonProps {
+export interface IButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   disabled?: boolean;
   children: React.ReactNode;
   buttonType: ButtonTypes;
+  onClick?: (e: any) => void;
 }
 
-export const Button: React.FC<IButtonProps &
-  React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  >> = ({ disabled = false, children, buttonType, ...props }) => {
+export const Button = ({
+  disabled = false,
+  children,
+  buttonType,
+  onClick,
+  ...props
+}: IButtonProps) => {
   return (
-    <ButtonContainer className={`${buttonType}`} disabled={disabled} {...props}>
+    <ButtonContainer
+      className={`${buttonType}`}
+      disabled={disabled}
+      {...props}
+      onTouchStart={onClick}
+      onClick={onClick}
+    >
       <p>{children}</p>
     </ButtonContainer>
   );
 };
 
-const ButtonContainer = styled.button<any>`
+const ButtonContainer = styled.button`
   height: 45px;
   font-size: ${uiFonts.size.small};
 `;

package/src/components/Chat/Chat.tsx

@@ -2,34 +2,46 @@ import { IChatMessage } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import React, { useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
+import { RxPaperPlane } from 'react-icons/rx';
 import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
-import { uiFonts } from '../../constants/uiFonts';
-import { Button, ButtonTypes } from '../Button';
-import { Input } from '../Input';
-import { RPGUIContainer, RPGUIContainerTypes } from '../RPGUIContainer';
 import { Column } from '../shared/Column';
 
 interface IEmitter {
   _id: string;
   name: string;
 }
+
+interface IStyles {
+  textColor?: string;
+  buttonColor?: string;
+  buttonBackgroundColor?: string;
+  width?: string;
+  height?: string;
+}
+
 export interface IChatProps {
   chatMessages: IChatMessage[];
   onSendChatMessage: (message: string) => void;
   onCloseButton: () => void;
+  onFocus?: () => void;
+  onBlur?: () => void;
   opacity?: number;
-  width?: string;
-  height?: string;
+  sendMessage: boolean;
+  styles?: IStyles;
 }
 
 export const Chat: React.FC<IChatProps> = ({
   chatMessages,
   onSendChatMessage,
-  opacity = 1,
-  width = '100%',
-  height = '250px',
-  onCloseButton,
+  onFocus,
+  onBlur,
+  styles = {
+    textColor: '#c65102',
+    buttonColor: '#005b96',
+    buttonBackgroundColor: 'rgba(0,0,0,.2)',
+    width: '80%',
+    height: 'auto',
+  },
 }) => {
   const [message, setMessage] = useState('');
 
@@ -70,114 +82,102 @@ export const Chat: React.FC<IChatProps> = ({
   const onRenderChatMessages = (chatMessages: IChatMessage[]) => {
     return chatMessages?.length ? (
       chatMessages?.map(({ _id, createdAt, emitter, message }, index) => (
-        <MessageText key={`${_id}_${index}`}>
-          {onRenderMessageLines(emitter, createdAt, message)}
-        </MessageText>
+        <Message color={styles?.textColor || '#c65102'} key={`${_id}_${index}`}>
+          {onRenderMessageLines(emitter, createdAt as string, message)}
+        </Message>
       ))
     ) : (
-      <MessageText>No messages available.</MessageText>
+      <Message color={styles?.textColor || '#c65102'}>
+        No messages available.
+      </Message>
     );
   };
 
   return (
-    <Container>
-      <CustomContainer
-        type={RPGUIContainerTypes.FramedGrey}
-        width={width}
-        height={height}
-        className="chat-container"
-        opacity={opacity}
-      >
-        <ErrorBoundary fallback={<p>Oops! Your chat has crashed.</p>}>
-          {onCloseButton && (
-            <CloseButton onClick={onCloseButton} onTouchStart={onCloseButton}>
-              X
-            </CloseButton>
-          )}
-          <RPGUIContainer
-            type={RPGUIContainerTypes.FramedGrey}
-            width={'100%'}
-            height={'80%'}
-            className="chat-body dark-background"
-          >
-            {onRenderChatMessages(chatMessages)}
-          </RPGUIContainer>
-
-          <Form onSubmit={handleSubmit}>
-            <Column flex={70}>
-              <CustomInput
-                value={message}
-                id="inputMessage"
-                onChange={e => getInputValue(e.target.value)}
-                height={20}
-                className="chat-input dark-background"
-                type="text"
-                autoComplete="off"
-              />
-            </Column>
-            <Column justifyContent="flex-end">
-              <Button
-                buttonType={ButtonTypes.RPGUIButton}
-                id="chat-send-button"
-              >
-                Send
-              </Button>
-            </Column>
-          </Form>
-        </ErrorBoundary>
-      </CustomContainer>
-    </Container>
+    <ChatContainer
+      width={styles?.width || '80%'}
+      height={styles?.height || 'auto'}
+    >
+      <ErrorBoundary fallback={<p>Oops! Your chat has crashed.</p>}>
+        <MessagesContainer className="chat-body">
+          {onRenderChatMessages(chatMessages)}
+        </MessagesContainer>
+
+        <Form onSubmit={handleSubmit}>
+          <Column flex={70}>
+            <TextField
+              value={message}
+              id="inputMessage"
+              onChange={e => getInputValue(e.target.value)}
+              height={20}
+              type="text"
+              autoComplete="off"
+              onFocus={onFocus}
+              onBlur={onBlur}
+              onTouchStart={onFocus}
+            />
+          </Column>
+          <Column justifyContent="flex-end">
+            <Button
+              buttonColor={styles?.buttonColor || '#005b96'}
+              buttonBackgroundColor={
+                styles?.buttonBackgroundColor || 'rgba(0,0,0,.5)'
+              }
+              id="chat-send-button"
+              style={{ borderRadius: '20%' }}
+            >
+              <RxPaperPlane size={15} />
+            </Button>
+          </Column>
+        </Form>
+      </ErrorBoundary>
+    </ChatContainer>
   );
 };
 
-const Container = styled.div`
-  position: relative;
-`;
-
-const CloseButton = styled.div`
-  position: absolute;
-  top: 2px;
-  right: 0px;
-  color: white;
-  z-index: 22;
-  font-size: 0.7rem;
-`;
-
-const CustomInput = styled(Input)`
-  height: 30px;
-  width: 100%;
-
-  .rpgui-content .input {
-    min-height: 39px;
-  }
-`;
-
-interface ICustomContainerProps {
-  opacity: number;
+interface IContainerProps {
+  width: string;
+  height: string;
 }
 
-const CustomContainer = styled(RPGUIContainer)`
-  display: block;
+interface IMessageProps {
+  color: string;
+}
 
-  opacity: ${(props: ICustomContainerProps) => props.opacity};
+interface IButtonProps {
+  buttonColor: string;
+  buttonBackgroundColor: string;
+}
 
-  &:hover {
-    opacity: 1;
-  }
+const ChatContainer = styled.div<IContainerProps>`
+  height: ${props => props.height};
+  width: ${({ width }) => width};
+  padding: 10px;
+  background-color: rgba(0, 0, 0, 0.2);
+  height: auto;
+`;
 
-  .dark-background {
-    background-color: ${uiColors.darkGray} !important;
-  }
+const TextField = styled.input`
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.25) !important;
+  border: none !important;
+  max-height: 28px !important;
+`;
 
+const MessagesContainer = styled.div`
+  height: 70%;
+  margin-bottom: 10px;
   .chat-body {
-    &.rpgui-container.framed-grey {
-      background: unset;
-    }
-    max-height: 170px;
+    max-height: auto;
     overflow-y: auto;
   }
 `;
 
+const Message = styled.div<IMessageProps>`
+  margin-bottom: 8px;
+  color: ${({ color }) => color};
+`;
+
 const Form = styled.form`
   display: flex;
   width: 100%;
@@ -185,10 +185,10 @@ const Form = styled.form`
   align-items: center;
 `;
 
-const MessageText = styled.p`
-  display: block !important;
-  width: 100%;
-  font-size: ${uiFonts.size.xsmall} !important;
-  overflow-y: auto;
-  margin: 0;
+const Button = styled.button<IButtonProps>`
+  color: ${({ buttonColor }) => buttonColor};
+  background-color: ${({ buttonBackgroundColor }) => buttonBackgroundColor};
+  width: 28px;
+  height: 28px;
+  border: none !important;
 `;