@rpg-engine/long-bow 0.2.22 → 0.2.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.2.22",
+  "version": "0.2.23",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

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

@@ -36,7 +36,9 @@ export const QuestList: React.FC<IQuestListProps> = ({ quests, onClose }) => {
               </div>
             ))
           ) : (
-            <div></div>
+            <NoQuestContainer>
+              <p>There are no ongoing quests</p>
+            </NoQuestContainer>
           )}
         </QuestListContainer>
       </div>
@@ -113,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],
 };