@rpg-engine/long-bow 0.3.43 → 0.3.44

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

@@ -1,16 +1,3 @@
-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;
+import { IEquipmentSet } from '@rpg-engine/shared';
+export declare const items: any;
 export declare const equipmentSetMock: IEquipmentSet;
-export {};

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

@@ -1,2 +1,121 @@
-import { ISkill } from '@rpg-engine/shared';
-export declare const skillMock: ISkill;
+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;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.3.43",
+  "version": "0.3.44",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,18 +83,15 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.6.73",
+    "@rpg-engine/shared": "^0.6.79",
     "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,7 +9,6 @@ interface IProps {
   onClose?: () => void;
   onPositionChange?: (position: IPosition) => void;
   onOutsideClick?: () => void;
-  initialPosition?: IPosition;
 }
 
 export const SlotsContainer: React.FC<IProps> = ({
@@ -18,7 +17,6 @@ export const SlotsContainer: React.FC<IProps> = ({
   onClose,
   onPositionChange,
   onOutsideClick,
-  initialPosition,
 }) => {
   return (
     <DraggableContainer
@@ -37,7 +35,6 @@ export const SlotsContainer: React.FC<IProps> = ({
         }
       }}
       onOutsideClick={onOutsideClick}
-      initialPosition={initialPosition}
     >
       {children}
     </DraggableContainer>

package/src/components/Button.tsx

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

package/src/components/Chat/Chat.tsx

@@ -2,46 +2,34 @@ 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;
-  sendMessage: boolean;
-  styles?: IStyles;
+  width?: string;
+  height?: string;
 }
 
 export const Chat: React.FC<IChatProps> = ({
   chatMessages,
   onSendChatMessage,
-  onFocus,
-  onBlur,
-  styles = {
-    textColor: '#c65102',
-    buttonColor: '#005b96',
-    buttonBackgroundColor: 'rgba(0,0,0,.2)',
-    width: '80%',
-    height: 'auto',
-  },
+  opacity = 1,
+  width = '100%',
+  height = '250px',
+  onCloseButton,
 }) => {
   const [message, setMessage] = useState('');
 
@@ -82,103 +70,114 @@ export const Chat: React.FC<IChatProps> = ({
   const onRenderChatMessages = (chatMessages: IChatMessage[]) => {
     return chatMessages?.length ? (
       chatMessages?.map(({ _id, createdAt, emitter, message }, index) => (
-        <Message color={styles?.textColor || '#c65102'} key={`${_id}_${index}`}>
-          {onRenderMessageLines(emitter, createdAt as string, message)}
-        </Message>
+        <MessageText key={`${_id}_${index}`}>
+          {onRenderMessageLines(emitter, createdAt, message)}
+        </MessageText>
       ))
     ) : (
-      <Message color={styles?.textColor || '#c65102'}>
-        No messages available.
-      </Message>
+      <MessageText>No messages available.</MessageText>
     );
   };
 
   return (
-    <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}
-              autoFocus
-            />
-          </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>
+    <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>
   );
 };
 
-interface IContainerProps {
-  width: string;
-  height: string;
-}
-
-interface IMessageProps {
-  color: string;
-}
-
-interface IButtonProps {
-  buttonColor: string;
-  buttonBackgroundColor: string;
-}
+const Container = styled.div`
+  position: relative;
+`;
 
-const ChatContainer = styled.div<IContainerProps>`
-  height: ${props => props.height};
-  width: ${({ width }) => width};
-  padding: 10px;
-  background-color: rgba(0, 0, 0, 0.2);
-  height: auto;
+const CloseButton = styled.div`
+  position: absolute;
+  top: 2px;
+  right: 0px;
+  color: white;
+  z-index: 22;
+  font-size: 0.7rem;
 `;
 
-const TextField = styled.input`
+const CustomInput = styled(Input)`
+  height: 30px;
   width: 100%;
-  background-color: rgba(0, 0, 0, 0.25) !important;
-  border: none !important;
-  max-height: 28px !important;
+
+  .rpgui-content .input {
+    min-height: 39px;
+  }
 `;
 
-const MessagesContainer = styled.div`
-  height: 70%;
-  margin-bottom: 10px;
+interface ICustomContainerProps {
+  opacity: number;
+}
+
+const CustomContainer = styled(RPGUIContainer)`
+  display: block;
+
+  opacity: ${(props: ICustomContainerProps) => props.opacity};
+
+  &:hover {
+    opacity: 1;
+  }
+
+  .dark-background {
+    background-color: ${uiColors.darkGray} !important;
+  }
+
   .chat-body {
-    max-height: auto;
+    &.rpgui-container.framed-grey {
+      background: unset;
+    }
+    max-height: 170px;
     overflow-y: auto;
   }
 `;
 
-const Message = styled.div<IMessageProps>`
-  margin-bottom: 8px;
-  color: ${({ color }) => color};
-`;
-
 const Form = styled.form`
   display: flex;
   width: 100%;
@@ -186,10 +185,10 @@ const Form = styled.form`
   align-items: center;
 `;
 
-const Button = styled.button<IButtonProps>`
-  color: ${({ buttonColor }) => buttonColor};
-  background-color: ${({ buttonBackgroundColor }) => buttonBackgroundColor};
-  width: 28px;
-  height: 28px;
-  border: none !important;
+const MessageText = styled.p`
+  display: block !important;
+  width: 100%;
+  font-size: ${uiFonts.size.xsmall} !important;
+  overflow-y: auto;
+  margin: 0;
 `;

package/src/components/CheckButton.tsx

@@ -10,7 +10,7 @@ export interface ICheckProps {
   onChange: (selectedValues: IChecklistSelectedValues) => void;
 }
 
-export interface IChecklistSelectedValues {
+interface IChecklistSelectedValues {
   [label: string]: boolean;
 }
 

package/src/components/DraggableContainer.tsx

@@ -19,7 +19,6 @@ export interface IDraggableContainerProps {
   cancelDrag?: string;
   onPositionChange?: (position: IPosition) => void;
   onOutsideClick?: () => void;
-  initialPosition?: IPosition;
 }
 
 export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
@@ -35,7 +34,6 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
   cancelDrag,
   onPositionChange,
   onOutsideClick,
-  initialPosition = { x: 0, y: 0 },
 }) => {
   const draggableRef = useRef(null);
 
@@ -68,7 +66,6 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
           });
         }
       }}
-      defaultPosition={initialPosition}
     >
       <Container
         ref={draggableRef}
@@ -123,7 +120,7 @@ const CloseButton = styled.div`
   right: 0px;
   color: white;
   z-index: 22;
-  font-size: 1.1rem;
+  font-size: 0.8rem;
 `;
 
 const TitleContainer = styled.div`

package/src/components/Dropdown.tsx

@@ -28,7 +28,7 @@ export const Dropdown: React.FC<IDropdownProps> = ({
   useEffect(() => {
     const firstOption = options[0];
 
-    if (firstOption && !selectedValue) {
+    if (firstOption) {
       setSelectedValue(firstOption.value);
       setSelectedOption(firstOption.option);
     }
@@ -46,7 +46,6 @@ export const Dropdown: React.FC<IDropdownProps> = ({
         id={`dropdown-${dropdownId}`}
         className="rpgui-dropdown-imp rpgui-dropdown-imp-header"
         onClick={() => setOpened(prev => !prev)}
-        onTouchStart={() => setOpened(prev => !prev)}
       >
         <label>▼</label> {selectedOption}
       </DropdownSelect>
@@ -61,11 +60,6 @@ export const Dropdown: React.FC<IDropdownProps> = ({
                 setSelectedOption(option.option);
                 setOpened(false);
               }}
-              onTouchStart={() => {
-                setSelectedValue(option.value);
-                setSelectedOption(option.option);
-                setOpened(false);
-              }}
             >
               {option.option}
             </li>

package/src/components/Equipment/EquipmentSet.tsx

@@ -8,7 +8,6 @@ import {
 } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
-import { IPosition } from '../../types/eventTypes';
 import { DraggableContainer } from '../DraggableContainer';
 import { ItemSlot } from '../Item/Inventory/ItemSlot';
 import { RPGUIContainerTypes } from '../RPGUIContainer';
@@ -21,21 +20,6 @@ export interface IEquipmentSetProps {
     item: IItem,
     itemContainerType: ItemContainerType | null
   ) => void;
-  onItemDragStart?: (
-    item: IItem,
-    slotIndex: number,
-    itemContainerType: ItemContainerType | null
-  ) => void;
-  onItemDragEnd?: (quantity?: number) => void;
-  onItemPlaceDrop?: (
-    item: IItem | null,
-    slotIndex: number,
-    itemContainerType: ItemContainerType | null
-  ) => void;
-  onItemOutsideDrop?: (item: IItem, position: IPosition) => void;
-  dragScale?: number;
-  checkIfItemCanBeMoved: () => boolean;
-  checkIfItemShouldDragEnd?: () => boolean;
   onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
   onSelected?: (optionId: string) => void;
   initialPosition?: { x: number; y: number };
@@ -52,13 +36,6 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
   onItemClick,
   atlasIMG,
   atlasJSON,
-  onItemDragEnd,
-  onItemDragStart,
-  onItemPlaceDrop,
-  onItemOutsideDrop,
-  checkIfItemCanBeMoved,
-  checkIfItemShouldDragEnd,
-  dragScale,
 }) => {
   const {
     neck,
@@ -125,27 +102,6 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
           onSelected={(optionId: string) => {
             if (onSelected) onSelected(optionId);
           }}
-          onDragStart={(item, slotIndex, itemContainerType) => {
-            if (!item) {
-              return;
-            }
-
-            if (onItemDragStart)
-              onItemDragStart(item, slotIndex, itemContainerType);
-          }}
-          onDragEnd={quantity => {
-            if (onItemDragEnd) onItemDragEnd(quantity);
-          }}
-          dragScale={dragScale}
-          checkIfItemCanBeMoved={checkIfItemCanBeMoved}
-          checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
-          onPlaceDrop={(item, slotIndex, itemContainerType) => {
-            if (onItemPlaceDrop)
-              onItemPlaceDrop(item, slotIndex, itemContainerType);
-          }}
-          onOutsideDrop={(item, position) => {
-            if (onItemOutsideDrop) onItemOutsideDrop(item, position);
-          }}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
         />
@@ -178,7 +134,6 @@ const EquipmentSetContainer = styled.div`
   justify-content: center;
   flex-wrap: wrap;
   flex-direction: row;
-  touch-action: none;
 `;
 
 const EquipmentColumn = styled.div`
@@ -186,5 +141,4 @@ const EquipmentColumn = styled.div`
   justify-content: center;
   flex-wrap: wrap;
   flex-direction: column;
-  touch-action: none;
 `;

package/src/components/Input.tsx

@@ -4,12 +4,8 @@ export interface IInputProps
   extends React.DetailedHTMLProps<
     React.InputHTMLAttributes<HTMLInputElement>,
     HTMLInputElement
-  > {
-  innerRef?: React.Ref<HTMLInputElement>;
-}
+  > {}
 
 export const Input: React.FC<IInputProps> = ({ ...props }) => {
-  const { innerRef, ...rest } = props;
-
-  return <input {...rest} ref={props.innerRef} />;
+  return <input {...props} />;
 };