@rpg-engine/long-bow 0.4.85 → 0.4.87

package/dist/stories/PartyCreate.stories.d.ts

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

package/dist/stories/PartyDashboard.stories.d.ts

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

package/dist/stories/PartyInvite.stories.d.ts

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

package/dist/stories/PartyManager.stories.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.4.85",
+  "version": "0.4.87",
   "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.8.28",
+    "@rpg-engine/shared": "^0.8.42",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/PartySystem/PartyCreate/PartyCreate.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+import { Button, ButtonTypes } from '../../Button';
+import { DraggableContainer } from '../../DraggableContainer';
+import { Input } from '../../Input';
+import { RPGUIContainerTypes } from '../../RPGUIContainer';
+
+export interface IPartyCreateProps {
+  onClose: () => void;
+  onCreate: () => void;
+}
+
+export const PartyCreate: React.FC<IPartyCreateProps> = ({
+  onClose,
+  onCreate,
+}) => {
+  return (
+    <DraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={() => {
+        if (onClose) onClose();
+      }}
+      width="500px"
+      height="300px"
+      cancelDrag=".partyRows"
+    >
+      <Wrapper>
+        <div style={{ width: '100%' }}>
+          <Title>Create Party</Title>
+          <hr className="golden" />
+        </div>
+      </Wrapper>
+      <h1>Type your party name</h1>
+      <Input placeholder="Type party name" type="text" />
+      <ButtonWrapper>
+        <Button
+          buttonType={ButtonTypes.RPGUIButton}
+          onPointerDown={() => {
+            onCreate();
+          }}
+        >
+          Confirm
+        </Button>
+        <div className="cancel-button">
+          <Button
+            buttonType={ButtonTypes.RPGUIButton}
+            onPointerDown={() => {
+              close();
+            }}
+          >
+            Cancel
+          </Button>
+        </div>
+      </ButtonWrapper>
+    </DraggableContainer>
+  );
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+const Title = styled.h1`
+  font-size: 0.6rem;
+  color: ${uiColors.yellow} !important;
+`;
+
+const ButtonWrapper = styled.div`
+  margin-top: 10px;
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  .cancel-button {
+    filter: grayscale(0.7);
+  }
+`;

package/src/components/PartySystem/PartyCreate/index.ts

@@ -0,0 +1 @@
+export * from './PartyCreate';

package/src/components/PartySystem/PartyDashboard/PartyDashboard.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+import { Button, ButtonTypes } from '../../Button';
+import { DraggableContainer } from '../../DraggableContainer';
+import { RPGUIContainerTypes } from '../../RPGUIContainer';
+import { IPartyRowProps, PartyRow } from './PartyRows';
+
+export interface IPartyDashboardProps {
+  partyRows: IPartyRowProps[];
+}
+
+export const PartyDashboard: React.FC<IPartyDashboardProps> = ({
+  partyRows,
+}) => {
+  return (
+    <DraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={() => {
+        console.log('Close');
+      }}
+      width="800px"
+      height="400px"
+      cancelDrag=".partyRows"
+    >
+      <Wrapper>
+        <div style={{ width: '100%' }}>
+          <Title>Party Dashboard</Title>
+          <Button buttonType={ButtonTypes.RPGUIButton}>Create</Button>
+          <hr className="golden" />
+        </div>
+      </Wrapper>
+      <RowsWrapper className="partyRows">
+        {partyRows.map(partyRows => (
+          <PartyRow
+            key={partyRows.id}
+            charName={partyRows.charName}
+            charClass={partyRows.charClass}
+            charLevel={partyRows.charLevel}
+            playerQty={partyRows.playerQty}
+            id={partyRows.id}
+            isInvited={partyRows.isInvited}
+            partyName={partyRows.partyName}
+          />
+        ))}
+      </RowsWrapper>
+    </DraggableContainer>
+  );
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+const RowsWrapper = styled.div`
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  width: 100%;
+  height: 200px;
+`;
+
+const Title = styled.h1`
+  font-size: 0.6rem;
+  color: ${uiColors.yellow} !important;
+`;

package/src/components/PartySystem/PartyDashboard/PartyRows.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+import { Button, ButtonTypes } from '../../Button';
+
+export interface IPartyRowProps {
+  id: string;
+  charName: string;
+  charClass: string;
+  charLevel: number;
+  playerQty: number;
+  isInvited: boolean;
+  partyName: string;
+}
+
+export const PartyRow: React.FC<IPartyRowProps> = ({
+  charName,
+  charClass,
+  charLevel,
+  playerQty,
+  isInvited,
+  partyName,
+}) => {
+  return (
+    <PartyWrapper>
+      <TextContainer>{partyName}</TextContainer>
+      <TextContainer>{charName}</TextContainer>
+      <TextContainer>{charClass}</TextContainer>
+      <TextContainer>{charLevel}</TextContainer>
+      <TextContainer>{playerQty}/5</TextContainer>
+      {isInvited ? (
+        <>
+          <Button buttonType={ButtonTypes.RPGUIButton}>Accept</Button>
+          <div className="cancel-button">
+            <Button buttonType={ButtonTypes.RPGUIButton}>Decline</Button>
+          </div>
+        </>
+      ) : (
+        <Button buttonType={ButtonTypes.RPGUIButton}>Join</Button>
+      )}
+    </PartyWrapper>
+  );
+};
+
+const PartyWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  .cancel-button {
+    filter: grayscale(0.7);
+  }
+`;
+
+const TextContainer = styled.div`
+  color: ${uiColors.white};
+`;

package/src/components/PartySystem/PartyDashboard/index.ts

@@ -0,0 +1,2 @@
+export * from './PartyDashboard'
+export * from './PartyRows'

package/src/components/PartySystem/PartyInvite/PartyInvite.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+import { DraggableContainer } from '../../DraggableContainer';
+import { RPGUIContainerTypes } from '../../RPGUIContainer';
+import { IPlayersRowProps, PlayersRow } from './PlayersRows';
+
+export interface IPartyInviteProps {
+  playersRows: IPlayersRowProps[];
+}
+
+export const PartyInvite: React.FC<IPartyInviteProps> = ({ playersRows }) => {
+  return (
+    <DraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={() => {
+        console.log('Close');
+      }}
+      width="600px"
+      height="400px"
+      cancelDrag=".playersRows"
+    >
+      <Wrapper>
+        <div style={{ width: '100%' }}>
+          <Title>Invite for Party</Title>
+          <hr className="golden" />
+        </div>
+      </Wrapper>
+      <RowsWrapper className="playersRows">
+        {playersRows.map(playersRows => (
+          <PlayersRow
+            key={playersRows.id}
+            charName={playersRows.charName}
+            charClass={playersRows.charClass}
+            charLevel={playersRows.charLevel}
+            id={playersRows.id}
+            isNotInvited={playersRows.isNotInvited}
+          />
+        ))}
+      </RowsWrapper>
+    </DraggableContainer>
+  );
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+const Title = styled.h1`
+  font-size: 0.6rem;
+  color: ${uiColors.yellow} !important;
+`;
+
+const RowsWrapper = styled.div`
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  width: 100%;
+  height: 200px;
+`;

package/src/components/PartySystem/PartyInvite/PlayersRows.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+import { Button, ButtonTypes } from '../../Button';
+
+export interface IPlayersRowProps {
+  id: string;
+  charName: string;
+  charClass: string;
+  charLevel: number;
+  isNotInvited: boolean;
+}
+
+export const PlayersRow: React.FC<IPlayersRowProps> = ({
+  charName,
+  charClass,
+  charLevel,
+  isNotInvited,
+}) => {
+  return (
+    <PartyWrapper>
+      <TextContainer>{charName}</TextContainer>
+      <TextContainer>{charClass}</TextContainer>
+      <TextContainer>{charLevel}</TextContainer>
+      {isNotInvited ? (
+        <>
+          <Button buttonType={ButtonTypes.RPGUIButton}>Invite</Button>
+        </>
+      ) : (
+        <TextContainer>Invited</TextContainer>
+      )}
+    </PartyWrapper>
+  );
+};
+
+const PartyWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  flex-direction: row;
+  flex: auto;
+`;
+
+const TextContainer = styled.div`
+  color: ${uiColors.white};
+  flex: auto;
+  margin: auto;
+`;

package/src/components/PartySystem/PartyInvite/index.ts

@@ -0,0 +1,2 @@
+export * from './PartyInvite'
+export * from './PlayersRows'

package/src/components/PartySystem/PartyManager/PartyManager.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+import { DraggableContainer } from '../../DraggableContainer';
+import { RPGUIContainerTypes } from '../../RPGUIContainer';
+import { IPartyManagerRowProps, PartyManagerRow } from './PartyManagerRows';
+
+export interface IPartyManagerProps {
+  partyRows: IPartyManagerRowProps[];
+}
+
+export const PartyManager: React.FC<IPartyManagerProps> = ({ partyRows }) => {
+  return (
+    <DraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={() => {
+        console.log('Close');
+      }}
+      width="800px"
+      height="400px"
+      cancelDrag=".partyRows"
+    >
+      <Wrapper>
+        <div style={{ width: '100%' }}>
+          <Title>Party Dashboard</Title>
+          <hr className="golden" />
+        </div>
+      </Wrapper>
+      <RowsWrapper className="partyRows">
+        {partyRows.map(partyRows => (
+          <PartyManagerRow
+            key={partyRows.id}
+            charName={partyRows.charName}
+            charClass={partyRows.charClass}
+            charLevel={partyRows.charLevel}
+            id={partyRows.id}
+          />
+        ))}
+      </RowsWrapper>
+    </DraggableContainer>
+  );
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+
+const RowsWrapper = styled.div`
+  width: 100%;
+`;
+
+const Title = styled.h1`
+  font-size: 0.6rem;
+  color: ${uiColors.yellow} !important;
+`;

package/src/components/PartySystem/PartyManager/PartyManagerRows.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+import { Button, ButtonTypes } from '../../Button';
+
+export interface IPartyManagerRowProps {
+  id: string;
+  charName: string;
+  charClass: string;
+  charLevel: number;
+}
+
+export const PartyManagerRow: React.FC<IPartyManagerRowProps> = ({
+  charName,
+  charClass,
+  charLevel,
+}) => {
+  return (
+    <PartyWrapper>
+      <TextContainer>{charName}</TextContainer>
+      <TextContainer>{charClass}</TextContainer>
+      <TextContainer>{charLevel}</TextContainer>
+      <div className="cancel-button">
+        <Button buttonType={ButtonTypes.RPGUIButton}>Remove</Button>
+      </div>
+      <Button buttonType={ButtonTypes.RPGUIButton}>New Leader</Button>
+    </PartyWrapper>
+  );
+};
+
+const PartyWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  .cancel-button {
+    filter: grayscale(0.7);
+  }
+`;
+
+const TextContainer = styled.div`
+  color: ${uiColors.white};
+`;

package/src/components/PartySystem/PartyManager/index.ts

@@ -0,0 +1,2 @@
+export * from './PartyManager'
+export * from './PartyManagerRows'

package/src/components/PartySystem/index.ts

@@ -0,0 +1,6 @@
+export * from './PartyCreate'
+export * from './PartyDashboard'
+export * from './PartyInvite'
+export * from './PartyManager'
+export * from './mockedConstantes'
+

package/src/components/PartySystem/mockedConstantes/index.ts

@@ -0,0 +1 @@
+export * from './mockedValues';

package/src/components/PartySystem/mockedConstantes/mockedValues.tsx

@@ -0,0 +1,150 @@
+import { v4 as uuidv4 } from 'uuid';
+import { IPartyRowProps } from '../PartyDashboard/PartyRows';
+import { IPlayersRowProps } from '../PartyInvite';
+import { IPartyManagerRowProps } from '../PartyManager';
+
+export const mockedPartyRows: IPartyRowProps[] = [
+  {
+    id: uuidv4(),
+    charName: 'CharNome',
+    charClass: 'CharClass',
+    charLevel: 1,
+    playerQty: 3,
+    isInvited: true,
+    partyName: 'Party',
+  },
+  {
+    id: uuidv4(),
+    charName: 'CharNome',
+    charClass: 'CharClass',
+    charLevel: 1,
+    playerQty: 3,
+    isInvited: true,
+    partyName: 'Party',
+  },
+  {
+    id: uuidv4(),
+    charName: 'CharNome',
+    charClass: 'CharClass',
+    charLevel: 1,
+    playerQty: 3,
+    isInvited: true,
+    partyName: 'Party',
+  },
+  {
+    id: uuidv4(),
+    charName: 'CharNome',
+    charClass: 'CharClass',
+    charLevel: 1,
+    playerQty: 3,
+    isInvited: true,
+    partyName: 'Party',
+  },
+  {
+    id: uuidv4(),
+    charName: 'CharNome',
+    charClass: 'CharClass',
+    charLevel: 1,
+    playerQty: 3,
+    isInvited: true,
+    partyName: 'Party',
+  },
+  {
+    id: uuidv4(),
+    charName: 'CharNome',
+    charClass: 'CharClass',
+    charLevel: 1,
+    playerQty: 3,
+    isInvited: true,
+    partyName: 'Party',
+  },
+  {
+    id: uuidv4(),
+    charName: 'CharNome',
+    charClass: 'CharClass',
+    charLevel: 1,
+    playerQty: 3,
+    isInvited: true,
+    partyName: 'Party',
+  },
+  {
+    id: uuidv4(),
+    charName: 'CharNome',
+    charClass: 'CharClass',
+    charLevel: 1,
+    playerQty: 3,
+    isInvited: true,
+    partyName: 'Party',
+  },
+];
+
+export const mockedPlayersRows: IPlayersRowProps[] = [
+  {
+    id: uuidv4(),
+    charName: 'CharNome',
+    charClass: 'CharClass',
+    charLevel: 1,
+    isNotInvited: true,
+  },
+  {
+    id: uuidv4(),
+    charName: 'CharNome',
+    charClass: 'CharClass',
+    charLevel: 1,
+    isNotInvited: true,
+  },
+  {
+    id: uuidv4(),
+    charName: 'CharNome',
+    charClass: 'CharClass',
+    charLevel: 1,
+    isNotInvited: true,
+  },
+  {
+    id: uuidv4(),
+    charName: 'CharNome',
+    charClass: 'CharClass',
+    charLevel: 1,
+    isNotInvited: true,
+  },
+  {
+    id: uuidv4(),
+    charName: 'CharNome',
+    charClass: 'CharClass',
+    charLevel: 1,
+    isNotInvited: true,
+  },
+];
+
+export const mockedPartyManager: IPartyManagerRowProps[] = [
+  {
+    id: uuidv4(),
+    charName: 'CharNome',
+    charClass: 'CharClass',
+    charLevel: 1,
+  },
+  {
+    id: uuidv4(),
+    charName: 'CharNome',
+    charClass: 'CharClass',
+    charLevel: 1,
+  },
+  {
+    id: uuidv4(),
+    charName: 'CharNome',
+    charClass: 'CharClass',
+    charLevel: 1,
+  },
+  {
+    id: uuidv4(),
+    charName: 'CharNome',
+    charClass: 'CharClass',
+    charLevel: 1,
+  },
+  {
+    id: uuidv4(),
+    charName: 'CharNome',
+    charClass: 'CharClass',
+    charLevel: 1,
+  },
+];

package/src/components/SkillProgressBar.tsx

@@ -37,11 +37,14 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
     skillPointsToNextLevel = getSPForLevel(level + 1);
   }
 
-  const skillsBuffsCalc = () => {
-    if (buffAndDebuff) {
-      return 1 + buffAndDebuff / 100;
+  const skillsBuffsCalc = (level: number, buffAndDebuff: number): string => {
+    const result = level * (buffAndDebuff / 100);
+
+    if (result > 0) {
+      return `+${result.toFixed(2)}`;
+    } else {
+      return `${result.toFixed(2)}`;
     }
-    return;
   };
 
   return (
@@ -54,7 +57,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
                 <TitleNameContainer>
                   <TitleNameBuff>{skillName}</TitleNameBuff>
                   <TitleNameBuff>
-                    lv {level} ({skillsBuffsCalc()})
+                    lv {level} ({skillsBuffsCalc(level, buffAndDebuff)})
                   </TitleNameBuff>
                 </TitleNameContainer>
                 <TitleNameBuffContainer>
@@ -66,7 +69,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
                 <TitleNameContainer>
                   <TitleNameDebuff>{skillName}</TitleNameDebuff>
                   <TitleNameDebuff>
-                    lv {level} ({skillsBuffsCalc()})
+                    lv {level} ({skillsBuffsCalc(level, buffAndDebuff)})
                   </TitleNameDebuff>
                 </TitleNameContainer>
                 <div>

package/src/constants/uiColors.ts

@@ -17,4 +17,5 @@ export const uiColors = {
   brown: '#854C30',
   lightGreen: '#66cd1c',
   brownGreen: '#346524',
+  white: '#fff'
 };