@rpg-engine/long-bow 0.1.92 → 0.1.96

package/src/components/NPCDialog/NPCDialog.tsx

@@ -1,145 +1,145 @@
-import React, { 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';
-import {
-  IQuestionDialog,
-  IQuestionDialogAnswer,
-  QuestionDialog,
-} from './QuestionDialog/QuestionDialog';
-
-export enum NPCDialogType {
-  TextOnly = 'TextOnly',
-  TextAndThumbnail = 'TextAndThumbnail',
-}
-
-export interface INPCDialogProps {
-  text?: string;
-  type: NPCDialogType;
-  imagePath?: string;
-  onClose?: () => void;
-  isQuestionDialog?: boolean;
-  answers?: IQuestionDialogAnswer[];
-  questions?: IQuestionDialog[];
-}
-
-export const NPCDialog: React.FC<INPCDialogProps> = ({
-  text,
-  type,
-  onClose,
-  imagePath,
-  isQuestionDialog = false,
-  questions,
-  answers,
-}) => {
-  const [showGoNextIndicator, setShowGoNextIndicator] = useState<boolean>(
-    false
-  );
-
-  return (
-    <RPGUIContainer
-      type={RPGUIContainerTypes.FramedGold}
-      width={isQuestionDialog ? '600px' : '50%'}
-      height={'180px'}
-    >
-      {isQuestionDialog && questions && answers ? (
-        <>
-          <TextContainer
-            flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}
-          >
-            <QuestionDialog
-              questions={questions}
-              answers={answers}
-              onClose={() => {
-                if (onClose) {
-                  onClose();
-                }
-              }}
-            />
-          </TextContainer>
-          {type === NPCDialogType.TextAndThumbnail && (
-            <ThumbnailContainer>
-              <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />
-            </ThumbnailContainer>
-          )}
-        </>
-      ) : (
-        <>
-          <Container>
-            <TextContainer
-              flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}
-            >
-              <NPCDialogText
-                onStartStep={() => setShowGoNextIndicator(false)}
-                onEndStep={() => setShowGoNextIndicator(true)}
-                text={text || 'No text provided.'}
-                onClose={() => {
-                  if (onClose) {
-                    onClose();
-                  }
-                }}
-              />
-            </TextContainer>
-            {type === NPCDialogType.TextAndThumbnail && (
-              <ThumbnailContainer>
-                <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />
-              </ThumbnailContainer>
-            )}
-          </Container>
-          {showGoNextIndicator && (
-            <PressSpaceIndicator
-              right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}
-              src={pressSpaceGif}
-            />
-          )}
-        </>
-      )}
-    </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;
-`;
+import React, { 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';
+import {
+  IQuestionDialog,
+  IQuestionDialogAnswer,
+  QuestionDialog,
+} from './QuestionDialog/QuestionDialog';
+
+export enum NPCDialogType {
+  TextOnly = 'TextOnly',
+  TextAndThumbnail = 'TextAndThumbnail',
+}
+
+export interface INPCDialogProps {
+  text?: string;
+  type: NPCDialogType;
+  imagePath?: string;
+  onClose?: () => void;
+  isQuestionDialog?: boolean;
+  answers?: IQuestionDialogAnswer[];
+  questions?: IQuestionDialog[];
+}
+
+export const NPCDialog: React.FC<INPCDialogProps> = ({
+  text,
+  type,
+  onClose,
+  imagePath,
+  isQuestionDialog = false,
+  questions,
+  answers,
+}) => {
+  const [showGoNextIndicator, setShowGoNextIndicator] = useState<boolean>(
+    false
+  );
+
+  return (
+    <RPGUIContainer
+      type={RPGUIContainerTypes.FramedGold}
+      width={isQuestionDialog ? '600px' : '50%'}
+      height={'180px'}
+    >
+      {isQuestionDialog && questions && answers ? (
+        <>
+          <TextContainer
+            flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}
+          >
+            <QuestionDialog
+              questions={questions}
+              answers={answers}
+              onClose={() => {
+                if (onClose) {
+                  onClose();
+                }
+              }}
+            />
+          </TextContainer>
+          {type === NPCDialogType.TextAndThumbnail && (
+            <ThumbnailContainer>
+              <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />
+            </ThumbnailContainer>
+          )}
+        </>
+      ) : (
+        <>
+          <Container>
+            <TextContainer
+              flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}
+            >
+              <NPCDialogText
+                onStartStep={() => setShowGoNextIndicator(false)}
+                onEndStep={() => setShowGoNextIndicator(true)}
+                text={text || 'No text provided.'}
+                onClose={() => {
+                  if (onClose) {
+                    onClose();
+                  }
+                }}
+              />
+            </TextContainer>
+            {type === NPCDialogType.TextAndThumbnail && (
+              <ThumbnailContainer>
+                <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />
+              </ThumbnailContainer>
+            )}
+          </Container>
+          {showGoNextIndicator && (
+            <PressSpaceIndicator
+              right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}
+              src={pressSpaceGif}
+            />
+          )}
+        </>
+      )}
+    </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/NPCDialog/NPCDialogText.tsx

@@ -1,53 +1,53 @@
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { chunkString } from '../../libs/StringHelpers';
-import { DynamicText } from '../typography/DynamicText';
-
-interface IProps {
-  text: string;
-  onClose: () => void;
-  onEndStep: () => void;
-  onStartStep: () => void;
-}
-
-export const NPCDialogText: React.FC<IProps> = ({
-  text,
-  onClose,
-  onEndStep,
-  onStartStep,
-}) => {
-  const textChunks = chunkString(text, 85);
-
-  const [chunkIndex, setChunkIndex] = useState<number>(0);
-
-  const onHandleSpacePress = (event: KeyboardEvent) => {
-    if (event.code === 'Space') {
-      const hasNextChunk = textChunks?.[chunkIndex + 1] || false;
-
-      if (hasNextChunk) {
-        setChunkIndex(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);
-  }, [chunkIndex]);
-
-  return (
-    <Container>
-      <DynamicText
-        text={textChunks?.[chunkIndex] || ''}
-        onFinish={onEndStep}
-        onStart={onStartStep}
-      />
-    </Container>
-  );
-};
-
-const Container = styled.div``;
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { chunkString } from '../../libs/StringHelpers';
+import { DynamicText } from '../typography/DynamicText';
+
+interface IProps {
+  text: string;
+  onClose: () => void;
+  onEndStep: () => void;
+  onStartStep: () => void;
+}
+
+export const NPCDialogText: React.FC<IProps> = ({
+  text,
+  onClose,
+  onEndStep,
+  onStartStep,
+}) => {
+  const textChunks = chunkString(text, 85);
+
+  const [chunkIndex, setChunkIndex] = useState<number>(0);
+
+  const onHandleSpacePress = (event: KeyboardEvent) => {
+    if (event.code === 'Space') {
+      const hasNextChunk = textChunks?.[chunkIndex + 1] || false;
+
+      if (hasNextChunk) {
+        setChunkIndex(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);
+  }, [chunkIndex]);
+
+  return (
+    <Container>
+      <DynamicText
+        text={textChunks?.[chunkIndex] || ''}
+        onFinish={onEndStep}
+        onStart={onStartStep}
+      />
+    </Container>
+  );
+};
+
+const Container = styled.div``;