@rpg-engine/long-bow 0.3.46 → 0.3.48

package/dist/stories/CharacterStatus.stories.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.3.46",
+  "version": "0.3.48",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,11 +83,10 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.6.80",
+    "@rpg-engine/shared": "^0.6.82",
     "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",

package/src/components/CharacterStatus/CharacterStatus.tsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { ProgressBar } from '../ProgressBar';
+import Character from './Character.png';
+
+export interface ICharacterStatusProps {
+  healthValue: number;
+  healthMaxValue: number;
+  manaValue: number;
+  manaMaxValue: number;
+  charName: string;
+}
+
+export const CharacterStatus: React.FC<ICharacterStatusProps> = ({
+  healthValue,
+  healthMaxValue,
+  manaValue,
+  manaMaxValue,
+  charName,
+}) => {
+  const [buff] = useState<Boolean>(false);
+  return (
+    <StatusContainer>
+      <ImgContainer
+        style={{
+          background: `url(${Character})`,
+          backgroundPositionX: 'center',
+        }}
+      />
+      <StatusFlexContainer>
+        <div>
+          <CharNameContainer>{charName}</CharNameContainer>
+          <ProgressContainer>
+            <StyledProgressBar
+              max={healthMaxValue}
+              value={healthValue}
+              color={'red'}
+              minWidth={200}
+            />
+            <StyledProgressBar
+              max={manaMaxValue}
+              value={manaValue}
+              color={'blue'}
+              minWidth={200}
+            />
+          </ProgressContainer>
+        </div>
+        {buff && (
+          <BuffCircleContainer>
+            <BuffCircle />
+            <BuffCircle />
+            <BuffCircle />
+            <BuffCircle />
+            <BuffCircle />
+            <BuffCircle />
+            <BuffCircle />
+            <BuffCircle />
+            <BuffCircle />
+            <BuffCircle />
+          </BuffCircleContainer>
+        )}
+      </StatusFlexContainer>
+    </StatusContainer>
+  );
+};
+
+const CharNameContainer = styled.div`
+  color: black;
+  margin: auto;
+  display: flex;
+  justify-content: space-around;
+  background-color: rgba(117, 113, 97, 0.3);
+  align-items: center;
+  height: 30px;
+  border-radius: 10px;
+`;
+
+const StatusContainer = styled.div`
+  display: flex;
+  scale: 0.7;
+`;
+
+const ProgressContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+const StyledProgressBar = styled(ProgressBar)`
+  .rpgui-progress-left-edge,
+  .rpgui-progress-right-edge {
+    width: 20px;
+  }
+`;
+
+const ImgContainer = styled.div`
+  width: 4.3rem;
+  height: 4.3rem;
+  border: 2px solid ${uiColors.darkGray};
+  border-radius: 50%;
+  border-radius: 50%;
+  margin-right: 8px;
+`;
+
+const BuffCircle = styled.div`
+  width: 2rem;
+  height: 2rem;
+  background-color: ${uiColors.lightGray};
+  border: 2px solid ${uiColors.darkGray};
+  border-radius: 50%;
+`;
+
+const StatusFlexContainer = styled.div``;
+
+const BuffCircleContainer = styled.div`
+  display: flex;
+  div {
+    margin: 2px;
+  }
+`;

package/src/components/Chat/Chat.tsx

@@ -115,6 +115,7 @@ export const Chat: React.FC<IChatProps> = ({
               onFocus={onFocus}
               onBlur={onBlur}
               onTouchStart={onFocus}
+              autoFocus
             />
           </Column>
           <Column justifyContent="flex-end">

package/src/components/CraftBook/CraftBook.tsx

@@ -111,28 +111,33 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
               />
             </SpriteAtlasWrapper>
             <div>
-              <input
-                className="rpgui-radio"
-                type="radio"
-                value={option.name}
-                name="test"
-                disabled={!option.canCraft}
-                checked={craftItem === option.key}
-                onChange={() => handleClick(option.key)}
-              />
-              <label
-                onClick={() => {
-                  handleClick(option.key);
-                }}
-                onTouchStart={() => {
-                  setIsShown({ show: true, index: index });
-                }}
-                style={{ display: 'flex', alignItems: 'center' }}
-                onMouseEnter={() => setIsShown({ show: true, index: index })}
-                onMouseLeave={() => setIsShown({ show: false, index: index })}
+              <div
+                onClick={() => handleClick(option.key)}
+                onTouchStart={() => handleClick(option.key)}
               >
-                {modifyString(option.name)}
-              </label>
+                <input
+                  className="rpgui-radio"
+                  type="radio"
+                  value={option.name}
+                  name="test"
+                  disabled={!option.canCraft}
+                  checked={craftItem === option.key}
+                  onChange={() => handleClick(option.key)}
+                />
+                <label
+                  onClick={() => {
+                    handleClick(option.key);
+                  }}
+                  onTouchStart={() => {
+                    setIsShown({ show: true, index: index });
+                  }}
+                  style={{ display: 'flex', alignItems: 'center' }}
+                  onMouseEnter={() => setIsShown({ show: true, index: index })}
+                  onMouseLeave={() => setIsShown({ show: false, index: index })}
+                >
+                  {modifyString(option.name)}
+                </label>
+              </div>
 
               {isShown &&
                 isShown.index === index &&

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

@@ -245,6 +245,7 @@ export const ItemSlot: React.FC<IProps> = observer(
     const resetItem = () => {
       setTooltipVisible(false);
       setWasDragged(false);
+      setIsFocused(false);
     };
 
     const onSuccesfulDrag = (quantity?: number) => {
@@ -253,7 +254,6 @@ export const ItemSlot: React.FC<IProps> = observer(
       if (quantity === -1) setDragPosition({ x: 0, y: 0 });
       else if (item) {
         onDragEnd(quantity);
-        resetItem();
       }
     };
 
@@ -324,7 +324,6 @@ export const ItemSlot: React.FC<IProps> = observer(
                   else onSuccesfulDrag(item.stackQty);
                 } else {
                   resetItem();
-                  setIsFocused(false);
                   setDragPosition({ x: 0, y: 0 });
                 }
               }, 100);

package/src/components/SkillsContainer.tsx

@@ -1,5 +1,4 @@
 import { ISkill, ISkillDetails } from '@rpg-engine/shared';
-import _ from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../constants/uiColors';
@@ -49,6 +48,31 @@ const skillProps = {
   },
 };
 
+interface SkillMap {
+  [key: string]: string;
+}
+
+const skillNameMap: SkillMap = {
+  stamina: 'Stamina',
+  magic: 'Magic',
+  magicResistance: 'Magic Resistance',
+  strength: 'Strength',
+  resistance: 'Resistance',
+  dexterity: 'Dexterity',
+  first: 'Fist',
+  club: 'Club',
+  sword: 'Sword',
+  axe: 'Axe',
+  distance: 'Distance',
+  shielding: 'Shieldeing',
+  dagger: 'Dagger',
+  fishing: 'Fishing',
+  mining: 'Mining',
+  lumberjacking: 'Lumberjacking',
+  cooking: 'Cooking',
+  alchemy: 'Alchemy',
+}
+
 export const SkillsContainer: React.FC<ISkillContainerProps> = ({
   onCloseButton,
   skill,
@@ -71,7 +95,7 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
       output.push(
         <SkillProgressBar
           key={key}
-          skillName={_.capitalize(key)}
+          skillName={skillNameMap[key]}
           bgColor={skillCategoryColor}
           level={skillDetails.level || 0}
           skillPoints={Math.round(skillDetails.skillPoints) || 0}

package/src/components/TradingMenu/items.mock.ts

@@ -19,6 +19,7 @@ export const itemMock: ITradeResponseItem[] = [
     name: 'Silver Short Sword Premium',
     price: 100,
     key: SwordsBlueprint.IceSword,
+    qty: 12
   },
   {
     texturePath: "swords/corruption-sword.png",

package/src/constants/uiDevices.ts

@@ -1,5 +1,3 @@
-import isMobile from 'is-mobile';
+import { isMobileOrTablet } from '@rpg-engine/shared';
 
-export const IS_MOBILE_OR_TABLET = isMobile({
-  tablet: true,
-});
+export const IS_MOBILE_OR_TABLET = isMobileOrTablet();

package/src/stories/CharacterStatus.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import {
+  CharacterStatus,
+  ICharacterStatusProps,
+} from '../components/CharacterStatus/CharacterStatus';
+import { RPGUIRoot } from '../components/RPGUIRoot';
+
+const meta: Meta = {
+  title: 'Character Status',
+  component: CharacterStatus,
+};
+
+export default meta;
+
+const Template: Story<ICharacterStatusProps> = args => (
+  <RPGUIRoot>
+    <CharacterStatus {...args} />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  healthValue: 30,
+  healthMaxValue: 100,
+  manaValue: 30,
+  manaMaxValue: 100,
+  charName: 'Char Name',
+};