@rpg-engine/long-bow 0.3.41 → 0.3.43

package/dist/stories/CaracterStatus.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ICharacterStatusProps } from '../components/CaracterStatus/CaracterStatus';
+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.41",
+  "version": "0.3.43",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/CaracterStatus/CaracterStatus.tsx

@@ -0,0 +1,86 @@
+import React 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,
+}) => {
+  return (
+    <StatusContainer>
+      <ImgContainer
+        style={{
+          background: `url(${Character})`,
+          backgroundPositionX: 'center',
+        }}
+      />
+      <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>
+    </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;
+`;

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/TradingMenu/TradingItemRow.tsx

@@ -44,8 +44,7 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
     }
   };
   const onRightOutClick = () => {
-    if (selectedQty + 10 < (traderItem.qty ?? 999)) {
-      console.log(traderItem);
+    if (selectedQty + 10 <= (traderItem.qty ?? 999)) {
       const newQuantity = selectedQty + 10;
       onQuantityChange(traderItem, newQuantity);
     }

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/stories/CaracterStatus.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import {
+  CharacterStatus,
+  ICharacterStatusProps,
+} from '../components/CaracterStatus/CaracterStatus';
+import { RPGUIRoot } from '../components/RPGUIRoot';
+
+const meta: Meta = {
+  title: 'Caracter 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',
+};