@rpg-engine/long-bow 0.3.28 → 0.3.32

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.3.28",
+  "version": "0.3.32",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.6.57",
+    "@rpg-engine/shared": "^0.6.66",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/Chat/Chat.tsx

@@ -2,7 +2,7 @@ import { IChatMessage } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import React, { useEffect, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { CiPaperplane } from 'react-icons/ci';
+import { RxPaperPlane } from 'react-icons/rx';
 import styled from 'styled-components';
 import { Column } from '../shared/Column';
 
@@ -11,6 +11,14 @@ interface IEmitter {
   name: string;
 }
 
+interface IStyles {
+  textColor?: string;
+  buttonColor?: string;
+  buttonBackgroundColor?: string;
+  width?: string;
+  height?: string;
+}
+
 export interface IChatProps {
   chatMessages: IChatMessage[];
   onSendChatMessage: (message: string) => void;
@@ -18,24 +26,22 @@ export interface IChatProps {
   onFocus?: () => void;
   onBlur?: () => void;
   opacity?: number;
-  width?: string;
-  height?: string;
   sendMessage: boolean;
-  color?: string;
-  buttonColor?: string;
-  buttonBackgroundColor?: string;
+  styles?: IStyles;
 }
 
 export const Chat: React.FC<IChatProps> = ({
   chatMessages,
   onSendChatMessage,
-  width = '80%',
-  height = '250px',
   onFocus,
   onBlur,
-  color = '#c65102',
-  buttonColor = '#005b96',
-  buttonBackgroundColor = '#FFF',
+  styles = {
+    textColor: '#c65102',
+    buttonColor: '#005b96',
+    buttonBackgroundColor: 'rgba(0,0,0,.2)',
+    width: '80%',
+    height: 'auto',
+  },
 }) => {
   const [message, setMessage] = useState('');
 
@@ -76,17 +82,22 @@ export const Chat: React.FC<IChatProps> = ({
   const onRenderChatMessages = (chatMessages: IChatMessage[]) => {
     return chatMessages?.length ? (
       chatMessages?.map(({ _id, createdAt, emitter, message }, index) => (
-        <Message color={color} key={`${_id}_${index}`}>
-          {onRenderMessageLines(emitter, createdAt, message)}
+        <Message color={styles?.textColor || '#c65102'} key={`${_id}_${index}`}>
+          {onRenderMessageLines(emitter, createdAt as string, message)}
         </Message>
       ))
     ) : (
-      <Message color={color}>No messages available.</Message>
+      <Message color={styles?.textColor || '#c65102'}>
+        No messages available.
+      </Message>
     );
   };
 
   return (
-    <ChatContainer width={width} height={height}>
+    <ChatContainer
+      width={styles?.width || '80%'}
+      height={styles?.height || 'auto'}
+    >
       <ErrorBoundary fallback={<p>Oops! Your chat has crashed.</p>}>
         <MessagesContainer className="chat-body">
           {onRenderChatMessages(chatMessages)}
@@ -107,12 +118,14 @@ export const Chat: React.FC<IChatProps> = ({
           </Column>
           <Column justifyContent="flex-end">
             <Button
-              buttonColor={buttonColor}
-              buttonBackgroundColor={buttonBackgroundColor}
+              buttonColor={styles?.buttonColor || '#005b96'}
+              buttonBackgroundColor={
+                styles?.buttonBackgroundColor || 'rgba(0,0,0,.5)'
+              }
               id="chat-send-button"
               style={{ borderRadius: '20%' }}
             >
-              <CiPaperplane size={15} />
+              <RxPaperPlane size={15} />
             </Button>
           </Column>
         </Form>
@@ -139,12 +152,8 @@ const ChatContainer = styled.div<IContainerProps>`
   height: ${props => props.height};
   width: ${({ width }) => width};
   padding: 10px;
-  margin-top: 100px;
   background-color: rgba(0, 0, 0, 0.2);
-  .chat-body {
-    max-height: 170px;
-    overflow-y: auto;
-  }
+  height: auto;
 `;
 
 const TextField = styled.input`
@@ -157,6 +166,10 @@ const TextField = styled.input`
 const MessagesContainer = styled.div`
   height: 70%;
   margin-bottom: 10px;
+  .chat-body {
+    max-height: auto;
+    overflow-y: auto;
+  }
 `;
 
 const Message = styled.div<IMessageProps>`

package/src/components/Chatdeprecated/ChatDeprecated.tsx

@@ -75,7 +75,7 @@ export const ChatDeprecated: React.FC<IChatDeprecatedProps> = ({
     return chatMessages?.length ? (
       chatMessages?.map(({ _id, createdAt, emitter, message }, index) => (
         <MessageText key={`${_id}_${index}`}>
-          {onRenderMessageLines(emitter, createdAt, message)}
+          {onRenderMessageLines(emitter, createdAt as string, message)}
         </MessageText>
       ))
     ) : (

package/src/components/CraftBook/CraftBook.tsx

@@ -121,7 +121,13 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
                 onChange={() => handleClick(option.key)}
               />
               <label
-                onClick={() => handleClick(option.key)}
+                onClick={() => {
+                  handleClick(option.key);
+                }}
+                onTouchStart={() => {
+                  handleClick(option.key);
+                  setIsShown({ show: true, index: index });
+                }}
                 style={{ display: 'flex', alignItems: 'center' }}
                 onMouseEnter={() => setIsShown({ show: true, index: index })}
                 onMouseLeave={() => setIsShown({ show: false, index: index })}
@@ -149,12 +155,17 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
         ))}
       </RadioInputScroller>
       <ButtonWrapper>
-        <Button buttonType={ButtonTypes.RPGUIButton} onClick={onClose}>
+        <Button
+          buttonType={ButtonTypes.RPGUIButton}
+          onClick={onClose}
+          onTouchStart={onClose}
+        >
           Cancel
         </Button>
         <Button
           buttonType={ButtonTypes.RPGUIButton}
           onClick={() => onCraftItem(craftItem)}
+          onTouchStart={() => onCraftItem(craftItem)}
         >
           Craft
         </Button>
@@ -199,6 +210,7 @@ const RadioInputScroller = styled.div`
   align-items: flex-start;
   overflow-y: scroll;
   height: 360px;
+  -webkit-overflow-scrolling: touch;
 `;
 
 const SpriteAtlasWrapper = styled.div`

package/src/components/Equipment/EquipmentSet.tsx

@@ -33,6 +33,7 @@ export interface IEquipmentSetProps {
     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;
@@ -57,6 +58,7 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
   onItemOutsideDrop,
   checkIfItemCanBeMoved,
   checkIfItemShouldDragEnd,
+  dragScale,
 }) => {
   const {
     neck,
@@ -134,6 +136,7 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
           onDragEnd={quantity => {
             if (onItemDragEnd) onItemDragEnd(quantity);
           }}
+          dragScale={dragScale}
           checkIfItemCanBeMoved={checkIfItemCanBeMoved}
           checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
           onPlaceDrop={(item, slotIndex, itemContainerType) => {

package/src/components/Item/Inventory/ItemContainer.tsx

@@ -27,6 +27,7 @@ export interface IItemContainerProps {
     slotIndex: number,
     itemContainerType: ItemContainerType | null
   ) => void;
+  dragScale?: number;
   checkIfItemCanBeMoved: () => boolean;
   checkIfItemShouldDragEnd?: () => boolean;
   onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
@@ -55,6 +56,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   checkIfItemCanBeMoved,
   initialPosition,
   checkIfItemShouldDragEnd,
+  dragScale,
 }) => {
   const [quantitySelect, setQuantitySelect] = useState({
     isOpen: false,
@@ -89,6 +91,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
           onDragEnd={quantity => {
             if (onItemDragEnd) onItemDragEnd(quantity);
           }}
+          dragScale={dragScale}
           checkIfItemCanBeMoved={checkIfItemCanBeMoved}
           checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
           openQuantitySelector={(maxQuantity, callback) => {

package/src/components/Item/Inventory/ItemSlot.tsx

@@ -61,6 +61,7 @@ interface IProps {
   ) => void;
   onDragEnd: (quantity?: number) => void;
   onOutsideDrop?: (item: IItem, position: IPosition) => void;
+  dragScale?: number;
   checkIfItemCanBeMoved: () => boolean;
   checkIfItemShouldDragEnd?: () => boolean;
   openQuantitySelector?: (maxQuantity: number, callback: () => void) => void;
@@ -94,6 +95,7 @@ export const ItemSlot: React.FC<IProps> = observer(
     checkIfItemCanBeMoved,
     openQuantitySelector,
     checkIfItemShouldDragEnd,
+    dragScale,
   }) => {
     const [isTooltipVisible, setTooltipVisible] = useState(false);
 
@@ -276,6 +278,7 @@ export const ItemSlot: React.FC<IProps> = observer(
       >
         <Draggable
           defaultClassName={item ? 'draggable' : 'empty-slot'}
+          scale={dragScale}
           onStop={(e, data) => {
             if (wasDragged && item) {
               //@ts-ignore

package/src/mocks/equipmentSet.mocks.ts

@@ -1,6 +1,7 @@
 import {
   IEquipmentSet,
   IItem,
+  ItemRarities,
   // IItem,
   ItemSlotType,
   ItemSubType,
@@ -55,7 +56,8 @@ export const items: IEquipmentSetItems = {
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     isTwoHanded: false,
-    hasUseWith: false
+    hasUseWith: false,
+    rarity: ItemRarities.Common
   },
   head: {
     _id: '1',
@@ -87,7 +89,8 @@ export const items: IEquipmentSetItems = {
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     isTwoHanded: false,
-    hasUseWith: false
+    hasUseWith: false,
+    rarity: ItemRarities.Common
   },
   armor: {
     _id: '2',
@@ -120,7 +123,8 @@ export const items: IEquipmentSetItems = {
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     isTwoHanded: false,
-    hasUseWith: false
+    hasUseWith: false,
+    rarity: ItemRarities.Common
   },
   legs: {
     _id: '3',
@@ -153,7 +157,8 @@ export const items: IEquipmentSetItems = {
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     isTwoHanded: false,
-    hasUseWith: false
+    hasUseWith: false,
+    rarity: ItemRarities.Common
   },
   boot: {
     _id: '4',
@@ -185,7 +190,8 @@ export const items: IEquipmentSetItems = {
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     isTwoHanded: false,
-    hasUseWith: false
+    hasUseWith: false,
+    rarity: ItemRarities.Common
   },
   neck: {
     _id: '5',
@@ -218,7 +224,8 @@ export const items: IEquipmentSetItems = {
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     isTwoHanded: false,
-    hasUseWith: false
+    hasUseWith: false,
+    rarity: ItemRarities.Common
   },
   ring: {
     _id: '6',
@@ -251,7 +258,8 @@ export const items: IEquipmentSetItems = {
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     isTwoHanded: false,
-    hasUseWith: false
+    hasUseWith: false,
+    rarity: ItemRarities.Common
   },
   accessory: {
     _id: '392acek4j7c8e80d2fs60404',
@@ -286,6 +294,7 @@ export const items: IEquipmentSetItems = {
     fullDescription: 'You see a stone. It is used with slingshot',
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
+    rarity: ItemRarities.Common
   },
   inventory: {
     _id: '8',
@@ -329,7 +338,8 @@ export const items: IEquipmentSetItems = {
       isEmpty: true,
     },
     isTwoHanded: false,
-    hasUseWith: false
+    hasUseWith: false,
+    rarity: ItemRarities.Common
   },
   rightHand: {
     _id: '629acef1c7c8e8002ff60736',
@@ -363,7 +373,8 @@ export const items: IEquipmentSetItems = {
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     isTwoHanded: false,
-    hasUseWith: false
+    hasUseWith: false,
+    rarity: ItemRarities.Common
   },
 };
 

package/src/mocks/itemContainer.mocks.ts

@@ -1,7 +1,6 @@
 import {
   IItem,
-  IItemContainer,
-  ItemSlotType,
+  IItemContainer, ItemRarities, ItemSlotType,
   ItemSubType,
   ItemType
 } from '@rpg-engine/shared';
@@ -40,6 +39,7 @@ export const items: IItem[] = [
     isStackable: false,
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
+    rarity: ItemRarities.Common
   },
   {
     _id: '629acef1c7c8e8002ff73564',
@@ -72,6 +72,7 @@ export const items: IItem[] = [
     isStackable: false,
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
+    rarity: ItemRarities.Common
   },
   {
     _id: '629acef1c7c8e8002ff60723',
@@ -105,6 +106,7 @@ export const items: IItem[] = [
     fullDescription: 'Recover your life',
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
+    rarity: ItemRarities.Common
   },
   {
     _id: '629acek4j7c8e8002ff60034',
@@ -138,6 +140,7 @@ export const items: IItem[] = [
     fullDescription: 'Recover your mana',
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
+    rarity: ItemRarities.Common
   },
   {
     _id: '629acek4j7c8e8002fg60034',
@@ -171,6 +174,7 @@ export const items: IItem[] = [
     fullDescription: 'Key to open things',
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
+    rarity: ItemRarities.Common
   },
   {
     _id: '392acek4j7c8e8002ff60403',
@@ -204,6 +208,7 @@ export const items: IItem[] = [
     fullDescription: 'Somes shard, some crafts.',
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
+    rarity: ItemRarities.Common
   },
   {
     _id: '392acek4j7c8e8002ff60404',
@@ -240,6 +245,7 @@ export const items: IItem[] = [
       'You see a bag. It has made using leather and it has 10 total slots.',
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
+    rarity: ItemRarities.Common
   },
   {
     _id: '392acek4j7c8e80d2fs60404',
@@ -274,6 +280,7 @@ export const items: IItem[] = [
     fullDescription: 'You see a stone. It is used with slingshot',
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
+    rarity: ItemRarities.Common
   },
   {
     _id: '392acek4j7c8e80d2fs60404',
@@ -308,6 +315,7 @@ export const items: IItem[] = [
     fullDescription: 'You see a stone. It is used with slingshot',
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
+    rarity: ItemRarities.Common
   },
   {
     _id: '392acek4j7c8e80d2fs60404',
@@ -342,6 +350,7 @@ export const items: IItem[] = [
     fullDescription: 'You see a stone. It is used with slingshot',
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
+    rarity: ItemRarities.Common
   },
   {
     _id: '392acek4j7c8e80d2fs60404',
@@ -376,6 +385,7 @@ export const items: IItem[] = [
     fullDescription: 'You see a stone. It is used with slingshot',
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
+    rarity: ItemRarities.Common
   },
   {
     _id: '392acek4j7c8e80d2fs60404',
@@ -410,6 +420,7 @@ export const items: IItem[] = [
     fullDescription: 'You see a stone. It is used with slingshot',
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
+    rarity: ItemRarities.Common
   },
   {
     _id: '392acek4j7c8e80d2fs60404',
@@ -444,6 +455,7 @@ export const items: IItem[] = [
     fullDescription: 'You see a stone. It is used with slingshot',
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
+    rarity: ItemRarities.Common
   },
   {
     _id: '392acek4j7c8e80d2fs60404',
@@ -478,6 +490,7 @@ export const items: IItem[] = [
     fullDescription: 'You see a stone. It is used with slingshot',
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
+    rarity: ItemRarities.Common
   },
   {
     _id: '392acek4j7casd0d2fs60404',
@@ -512,6 +525,7 @@ export const items: IItem[] = [
     fullDescription: 'You see a stone. It is used with slingshot',
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
+    rarity: ItemRarities.Common
   }
 ];
 

package/src/mocks/skills.mocks.ts

@@ -1,4 +1,4 @@
-import { SkillType } from '@rpg-engine/shared';
+import { ISkill, SkillType } from '@rpg-engine/shared';
 
 export const skillMock = {
   _id: '62aebda8785a9f0089a4f757',
@@ -110,6 +110,12 @@ export const skillMock = {
     skillPoints: 2,
     skillPointsToNextLevel: 80,
   },
+  blacksmithing: {
+    type: SkillType.Crafting,
+    level: 1,
+    skillPoints: 2,
+    skillPointsToNextLevel: 80,
+  },
   level: 2,
   xpGainRate: 100,
   experience: 31,
@@ -119,4 +125,4 @@ export const skillMock = {
   createdAt: '2022-06-19T06:09:44.661Z',
   updatedAt: '2022-06-19T06:09:44.661Z',
   __v: 0,
-};
+} as ISkill;

package/src/stories/Chat.stories.tsx

@@ -174,7 +174,9 @@ const Template: Story<IChatMessage> = args => (
       onSendChatMessage={msg => console.log(msg)}
       chatMessages={chatMessagesMock}
       opacity={0.5}
-      height={'200px'}
+      styles={{
+        height: '200px',
+      }}
       onCloseButton={() => console.log('closing chat...')}
       sendMessage={true}
       {...args}