@rpg-engine/long-bow 0.2.15 → 0.2.16

package/dist/stories/HistoryDialog.stories.d.ts

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

package/dist/stories/NPCMultiDialog.stories.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "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.4.42",
+    "@rpg-engine/shared": "^0.4.46",
     "dayjs": "^1.11.2",
     "fs-extra": "^10.1.0",
     "lodash": "^4.17.21",

package/src/components/HistoryDialog.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import styled from 'styled-components';
+import { NPCDialog, NPCDialogType } from './NPCDialog/NPCDialog';
+import { NPCMultiDialog, NPCMultiDialogType } from './NPCDialog/NPCMultiDialog';
+import {
+  IQuestionDialog,
+  IQuestionDialogAnswer,
+  QuestionDialog,
+} from './NPCDialog/QuestionDialog/QuestionDialog';
+
+export interface IHistoryDialogProps {
+  backgroundImgPath: string;
+  fullCoverBackground: boolean;
+  questions?: IQuestionDialog[];
+  answers?: IQuestionDialogAnswer[];
+  text?: string;
+  imagePath?: string;
+  textAndTypeArray?: NPCMultiDialogType[];
+  onClose: () => void;
+}
+
+export const HistoryDialog: React.FC<IHistoryDialogProps> = ({
+  backgroundImgPath,
+  fullCoverBackground,
+  questions,
+  answers,
+  text,
+  imagePath,
+  textAndTypeArray,
+  onClose,
+}) => {
+  return (
+    <BackgroundContainer
+      imgPath={backgroundImgPath}
+      fullImg={fullCoverBackground}
+    >
+      <DialogContainer>
+        {textAndTypeArray ? (
+          <NPCMultiDialog
+            textAndTypeArray={textAndTypeArray}
+            onClose={onClose}
+          />
+        ) : questions && answers ? (
+          <QuestionDialog
+            questions={questions}
+            answers={answers}
+            onClose={onClose}
+          />
+        ) : text && imagePath ? (
+          <NPCDialog
+            text={text}
+            imagePath={imagePath}
+            onClose={onClose}
+            type={NPCDialogType.TextAndThumbnail}
+          />
+        ) : (
+          <NPCDialog
+            text={text}
+            onClose={onClose}
+            type={NPCDialogType.TextOnly}
+          />
+        )}
+      </DialogContainer>
+    </BackgroundContainer>
+  );
+};
+
+interface IImgContainerProps {
+  imgPath: string;
+  fullImg: boolean;
+}
+
+const BackgroundContainer = styled.div<IImgContainerProps>`
+  width: 100%;
+  height: 100%;
+  background-image: url(${props => props.imgPath});
+  background-size: ${props => (props.imgPath ? 'cover' : 'auto')};
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+`;
+
+const DialogContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  padding-top: 200px;
+`;

package/src/components/NPCDialog/NPCMultiDialog.tsx

@@ -0,0 +1,159 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { RPGUIContainer, RPGUIContainerTypes } from '../RPGUIContainer';
+import aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';
+import pressSpaceGif from './img/space.gif';
+import { NPCDialogText } from './NPCDialogText';
+
+export enum ImgSide {
+  right = 'right',
+  left = 'left',
+}
+
+export interface NPCMultiDialogType {
+  text: string;
+  imagePath?: string;
+  imageSide: ImgSide;
+}
+
+export interface INPCMultiDialogProps {
+  onClose: () => void;
+  textAndTypeArray: NPCMultiDialogType[];
+}
+
+export const NPCMultiDialog: React.FC<INPCMultiDialogProps> = ({
+  onClose,
+  textAndTypeArray,
+}) => {
+  const [showGoNextIndicator, setShowGoNextIndicator] = useState<boolean>(
+    false
+  );
+  const [slide, setSlide] = useState<number>(0);
+
+  const onHandleSpacePress = (event: KeyboardEvent) => {
+    if (event.code === 'Space') {
+      if (slide < textAndTypeArray?.length - 1) {
+        setSlide(prev => prev + 1);
+      } else {
+        // if there's no more text chunks, close the dialog
+        onClose();
+      }
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', onHandleSpacePress);
+
+    return () => document.removeEventListener('keydown', onHandleSpacePress);
+  }, [slide]);
+
+  return (
+    <RPGUIContainer
+      type={RPGUIContainerTypes.FramedGold}
+      width={'50%'}
+      height={'180px'}
+    >
+      <>
+        <Container>
+          {textAndTypeArray[slide]?.imageSide === 'right' && (
+            <>
+              <TextContainer flex={'70%'}>
+                <NPCDialogText
+                  onStartStep={() => setShowGoNextIndicator(false)}
+                  onEndStep={() => setShowGoNextIndicator(true)}
+                  text={textAndTypeArray[slide].text || 'No text provided.'}
+                  onClose={() => {
+                    if (onClose) {
+                      onClose();
+                    }
+                  }}
+                />
+              </TextContainer>
+              <ThumbnailContainer>
+                <NPCThumbnail
+                  src={
+                    textAndTypeArray[slide].imagePath || aliceDefaultThumbnail
+                  }
+                />
+              </ThumbnailContainer>
+              {showGoNextIndicator && (
+                <PressSpaceIndicator right={'10.5rem'} src={pressSpaceGif} />
+              )}
+            </>
+          )}
+          {textAndTypeArray[slide].imageSide === 'left' && (
+            <>
+              <ThumbnailContainer>
+                <NPCThumbnail
+                  src={
+                    textAndTypeArray[slide].imagePath || aliceDefaultThumbnail
+                  }
+                />
+              </ThumbnailContainer>
+              <TextContainer flex={'70%'}>
+                <NPCDialogText
+                  onStartStep={() => setShowGoNextIndicator(false)}
+                  onEndStep={() => setShowGoNextIndicator(true)}
+                  text={textAndTypeArray[slide].text || 'No text provided.'}
+                  onClose={() => {
+                    if (onClose) {
+                      onClose();
+                    }
+                  }}
+                />
+              </TextContainer>
+              {showGoNextIndicator && (
+                <PressSpaceIndicator right={'1rem'} src={pressSpaceGif} />
+              )}
+            </>
+          )}
+        </Container>
+        )
+      </>
+    </RPGUIContainer>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: flex-start;
+  position: relative;
+`;
+
+interface ITextContainerProps {
+  flex: string;
+}
+
+const TextContainer = styled.div<ITextContainerProps>`
+  flex: ${({ flex }) => flex} 0 0;
+  width: 355px;
+`;
+
+const ThumbnailContainer = styled.div`
+  flex: 30% 0 0;
+  display: flex;
+  justify-content: flex-end;
+`;
+
+const NPCThumbnail = styled.img`
+  image-rendering: pixelated;
+  height: 128px;
+  width: 128px;
+`;
+
+interface IPressSpaceIndicatorProps {
+  right: string;
+}
+
+const PressSpaceIndicator = styled.img<IPressSpaceIndicatorProps>`
+  position: absolute;
+  right: ${({ right }) => right};
+  bottom: 1rem;
+  height: 20.7px;
+  image-rendering: -webkit-optimize-contrast;
+`;

package/src/components/QuestList.tsx

@@ -1,31 +1,21 @@
-import React, { useLayoutEffect, useState } from 'react';
+import { IQuest } from '@rpg-engine/shared';
+import React from 'react';
 import styled from 'styled-components';
 import { DraggableContainer } from './DraggableContainer';
-import { ProgressBar } from './ProgressBar';
 import { RPGUIContainerTypes } from './RPGUIContainer';
 
 export interface IQuestListProps {
-  title: string;
-  description: string;
-  quests: { title: string; description: string; completed: boolean }[];
+  quests: IQuest[];
+  onClose: () => void;
 }
 
-export const QuestList: React.FC<IQuestListProps> = ({ quests }) => {
-  const [completedQuestsPercentage, setCompletedQuestsPercentage] = useState(0);
-
-  useLayoutEffect(() => {
-    const totalQuests = quests.length;
-    const completedQuests = quests.filter(({ completed }) => completed).length;
-
-    const percentage = Math.floor((completedQuests / totalQuests) * 100);
-
-    setCompletedQuestsPercentage(percentage);
-  }, []);
-
+export const QuestList: React.FC<IQuestListProps> = ({ quests, onClose }) => {
   return (
     <QuestDraggableContainer
       type={RPGUIContainerTypes.Framed}
-      onCloseButton={() => {}}
+      onCloseButton={() => {
+        if (onClose) onClose();
+      }}
       width="520px"
     >
       <div style={{ width: '100%' }}>
@@ -33,20 +23,16 @@ export const QuestList: React.FC<IQuestListProps> = ({ quests }) => {
         <hr className="golden" />
 
         <QuestListContainer>
-          {quests.map(({ title, description, completed }, i) => (
+          {quests.map((quest, i) => (
             <div className="quest-item" key={i}>
-              <span className={`quest-number ${completed ? 'completed' : ''}`}>
-                {i + 1}
-              </span>
+              <span className="quest-number">{i + 1}</span>
               <div className="quest-detail">
-                <p className="quest-detail__title">{title}</p>
-                <p className="quest-detail__description">{description}</p>
+                <p className="quest-detail__title">{quest.title}</p>
+                <p className="quest-detail__description">{quest.description}</p>
               </div>
             </div>
           ))}
         </QuestListContainer>
-
-        <ProgressBar max={100} value={completedQuestsPercentage} color="blue" />
       </div>
     </QuestDraggableContainer>
   );

package/src/index.tsx

@@ -24,4 +24,6 @@ export * from './components/SkillsContainer';
 export * from './components/TextArea';
 export * from './components/Truncate';
 export * from './components/typography/DynamicText';
+export * from './components/NPCDialog/NPCMultiDialog';
+export * from './components/HistoryDialog';
 export { useEventListener } from './hooks/useEventListener';

package/src/mocks/itemContainer.mocks.ts

@@ -43,7 +43,7 @@ export const items: IItem[] = [
   {
     _id: '629acef1c7c8e8002ff73564',
     type: ItemType.Weapon,
-    subType: ItemSubType.Bow,
+    subType: ItemSubType.Axe,
     textureAtlas: 'items',
     allowedEquipSlotType: [ItemSlotType.LeftHand, ItemSlotType.RightHand],
     maxStackSize: 1,

package/src/stories/HistoryDialog.stories.tsx

@@ -0,0 +1,59 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../components/RPGUIRoot';
+import aliceDefaultThumbnail from '../components/NPCDialog/img/npcDialog/npcThumbnails/alice.png';
+import ImgBackground from '../components/NPCDialog/img/background.png';
+import {
+  HistoryDialog,
+  IHistoryDialogProps,
+} from '../components/HistoryDialog';
+import {
+  ImgSide,
+  NPCMultiDialogType,
+} from '../components/NPCDialog/NPCMultiDialog';
+
+const meta: Meta = {
+  title: 'NPC History Dialog',
+  component: HistoryDialog,
+  argTypes: {
+    text: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+export default meta;
+
+const Template: Story<IHistoryDialogProps> = args => (
+  <RPGUIRoot>
+    <HistoryDialog {...args} />
+  </RPGUIRoot>
+);
+
+export const HistoryDialogStore = Template.bind({});
+
+const textAndTypeArray: NPCMultiDialogType[] = [
+  {
+    text: 'I have lived here all my life',
+    imagePath: aliceDefaultThumbnail,
+    imageSide: ImgSide.right,
+  },
+  {
+    text: 'I have lived here all my life',
+    imagePath: aliceDefaultThumbnail,
+    imageSide: ImgSide.left,
+  },
+  {
+    text: 'I have lived here all my life',
+    imagePath: aliceDefaultThumbnail,
+    imageSide: ImgSide.right,
+  },
+];
+
+HistoryDialogStore.args = {
+  textAndTypeArray,
+  fullCoverBackground: true,
+  backgroundImgPath: ImgBackground,
+};

package/src/stories/NPCMultiDialog.stories.tsx

@@ -0,0 +1,71 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../../src/components/RPGUIRoot';
+import aliceDefaultThumbnail from '../components/NPCDialog/img/npcDialog/npcThumbnails/alice.png';
+import {
+  ImgSide,
+  INPCMultiDialogProps,
+  NPCMultiDialog,
+  NPCMultiDialogType,
+} from '../components/NPCDialog/NPCMultiDialog';
+
+const meta: Meta = {
+  title: 'NPC MultiDialog',
+  component: NPCMultiDialog,
+  argTypes: {
+    text: {
+      control: {
+        type: 'text',
+      },
+    },
+    // ImgSide: {
+    //   control: {
+    //     type: 'select',
+    //     label: {
+    //       [ImgSide.right]: 'right',
+    //       [ImgSide.left]: 'left',
+    //     },
+    //   },
+    // },
+    imagePath: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+export default meta;
+
+const Template: Story<INPCMultiDialogProps> = args => (
+  <RPGUIRoot>
+    <NPCMultiDialog {...args} />
+  </RPGUIRoot>
+);
+
+export const NPCMultiDialogStore = Template.bind({});
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+
+const textAndTypeArray: NPCMultiDialogType[] = [
+  {
+    text: 'I have lived here all my life',
+    imagePath: aliceDefaultThumbnail,
+    imageSide: ImgSide.right,
+  },
+  {
+    text: 'I have lived here all my life',
+    imagePath: aliceDefaultThumbnail,
+    imageSide: ImgSide.left,
+  },
+  {
+    text: 'I have lived here all my life',
+    imagePath: aliceDefaultThumbnail,
+    imageSide: ImgSide.right,
+  },
+];
+
+NPCMultiDialogStore.args = {
+  textAndTypeArray,
+};

package/src/stories/QuestList.stories.tsx

@@ -1,3 +1,4 @@
+import { QuestStatus, QuestType } from '@rpg-engine/shared';
 import { Story } from '@storybook/react';
 import React from 'react';
 import { IQuestListProps, QuestList } from '../components/QuestList';
@@ -16,39 +17,66 @@ const Template: Story<IQuestListProps> = args => (
 
 export const Default = Template.bind({});
 
+const IQuestMock = [
+  {
+    _id: '6317996c77f2420047a20b55',
+    rewards: [
+      {
+        id: '6317996c77f2420047a20b53',
+        itemKeys: ['6317996c77f2420047a20b53'],
+        spellKeys: ['6317996c77f2420047a20b53'],
+        qty: 1,
+      },
+    ],
+    objectives: [
+      {
+        id: '6317996c77f2420047a20b53',
+        type: QuestType.Kill,
+        status: QuestStatus.Pending,
+        killCount: 10,
+        killCountTarget: 30,
+        creatureKeys: ['6317996c77f2420047a20b53'],
+      },
+    ],
+    npcId: '6317996b77f2420047a20825',
+    title: 'Deliver message to the trader1',
+    key: 'interaction-trader',
+    description:
+      "Need to send a message to my brother, the trader, about my father's health. I cannot do it because it is too dangerous out there. Please, help me by delivering this message to him.",
+    createdAt: '2022-09-06T19:03:08.285+0000',
+    updatedAt: '2022-09-06T19:03:08.304+0000',
+  },
+  {
+    _id: '6317996c77f2420047a20b55',
+    rewards: [
+      {
+        id: '6317996c77f2420047a20b53',
+        itemKeys: ['6317996c77f2420047a20b53'],
+        spellKeys: ['6317996c77f2420047a20b53'],
+        qty: 1,
+      },
+    ],
+    objectives: [
+      {
+        id: '6317996c77f2420047a20b53',
+        type: QuestType.Kill,
+        status: QuestStatus.Pending,
+        killCount: 10,
+        killCountTarget: 30,
+        creatureKeys: ['6317996c77f2420047a20b53'],
+      },
+    ],
+    npcId: '6317996b77f2420047a20825',
+    title: 'Deliver message to the trader2',
+    key: 'interaction-trader',
+    description:
+      "Need to send a message to my brother, the trader, about my father's health. I cannot do it because it is too dangerous out there. Please, help me by delivering this message to him.",
+    createdAt: '2022-09-06T19:03:08.285+0000',
+    updatedAt: '2022-09-06T19:03:08.304+0000',
+  },
+];
+
 Default.args = {
-  title: 'War of shadows',
-  description: 'The shadow of war missin completed',
-  quests: [
-    {
-      title: 'Shrine of the storm: Whispers below',
-      description: 'Defeat Lord Stormsong',
-      completed: true,
-    },
-    {
-      title: 'Shrine of the storm: Whispers below',
-      description: 'Defeat Lord Stormsong',
-      completed: false,
-    },
-    {
-      title: 'Shrine of the storm: Whispers below',
-      description: 'Defeat Lord Stormsong',
-      completed: false,
-    },
-    {
-      title: 'Shrine of the storm: Whispers below',
-      description: 'Defeat Lord Stormsong',
-      completed: false,
-    },
-    {
-      title: 'Shrine of the storm: Whispers below',
-      description: 'Defeat Lord Stormsong',
-      completed: false,
-    },
-    {
-      title: 'Shrine of the storm: Whispers below',
-      description: 'Defeat Lord Stormsong',
-      completed: false,
-    },
-  ],
+  quests: IQuestMock,
+  onClose: () => console.log('closing'),
 };