@rpg-engine/long-bow 0.2.21 → 0.2.23

package/package.json

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

package/src/components/HistoryDialog.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { NPCDialog, NPCDialogType } from './NPCDialog/NPCDialog';
 import { NPCMultiDialog, NPCMultiDialogType } from './NPCDialog/NPCMultiDialog';
@@ -9,7 +9,7 @@ import {
 } from './NPCDialog/QuestionDialog/QuestionDialog';
 
 export interface IHistoryDialogProps {
-  backgroundImgPath: string;
+  backgroundImgPath: string[];
   fullCoverBackground: boolean;
   questions?: IQuestionDialog[];
   answers?: IQuestionDialogAnswer[];
@@ -29,9 +29,26 @@ export const HistoryDialog: React.FC<IHistoryDialogProps> = ({
   textAndTypeArray,
   onClose,
 }) => {
+  const [img, setImage] = useState<number>(0);
+  const onHandleSpacePress = (event: KeyboardEvent) => {
+    if (event.code === 'Space') {
+      if (img < backgroundImgPath?.length - 1) {
+        setImage(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);
+  }, [backgroundImgPath]);
   return (
     <BackgroundContainer
-      imgPath={backgroundImgPath}
+      imgPath={backgroundImgPath[img]}
       fullImg={fullCoverBackground}
     >
       <DialogContainer>

package/src/components/QuestList.tsx

@@ -5,7 +5,7 @@ import { DraggableContainer } from './DraggableContainer';
 import { RPGUIContainerTypes } from './RPGUIContainer';
 
 export interface IQuestListProps {
-  quests: IQuest[];
+  quests?: IQuest[];
   onClose: () => void;
 }
 
@@ -23,15 +23,23 @@ export const QuestList: React.FC<IQuestListProps> = ({ quests, onClose }) => {
         <hr className="golden" />
 
         <QuestListContainer>
-          {quests.map((quest, i) => (
-            <div className="quest-item" key={i}>
-              <span className="quest-number">{i + 1}</span>
-              <div className="quest-detail">
-                <p className="quest-detail__title">{quest.title}</p>
-                <p className="quest-detail__description">{quest.description}</p>
+          {quests ? (
+            quests.map((quest, i) => (
+              <div className="quest-item" key={i}>
+                <span className="quest-number">{i + 1}</span>
+                <div className="quest-detail">
+                  <p className="quest-detail__title">{quest.title}</p>
+                  <p className="quest-detail__description">
+                    {quest.description}
+                  </p>
+                </div>
               </div>
-            </div>
-          ))}
+            ))
+          ) : (
+            <NoQuestContainer>
+              <p>There are no ongoing quests</p>
+            </NoQuestContainer>
+          )}
         </QuestListContainer>
       </div>
     </QuestDraggableContainer>
@@ -107,4 +115,14 @@ const QuestListContainer = styled.div`
   .quest-detail__description {
     margin-top: 5px;
   }
+  .Noquest-detail__description {
+    margin-top: 5px;
+    margin: auto;
+  }
+`;
+const NoQuestContainer = styled.div`
+  text-align: center;
+  p {
+    margin-top: 5px;
+  }
 `;

package/src/stories/HistoryDialog.stories.tsx

@@ -2,7 +2,9 @@ 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 ImgBackground01 from '../components/NPCDialog/img/background01.png';
+import ImgBackground02 from '../components/NPCDialog/img/background02.png';
+import ImgBackground03 from '../components/NPCDialog/img/background03.png';
 import {
   HistoryDialog,
   IHistoryDialogProps,
@@ -55,5 +57,5 @@ const textAndTypeArray: NPCMultiDialogType[] = [
 HistoryDialogStore.args = {
   textAndTypeArray,
   fullCoverBackground: true,
-  backgroundImgPath: ImgBackground,
+  backgroundImgPath: [ImgBackground01, ImgBackground02, ImgBackground03],
 };