@rpg-engine/long-bow 0.8.200 → 0.8.202

package/package.json

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

package/src/components/NPCDialog/NPCDialog.tsx

@@ -18,6 +18,7 @@ export interface INPCDialogProps {
   text?: string;
   type: NPCDialogType;
   imagePath?: string;
+  isTranslated?: boolean;
   onClose?: () => void;
   isQuestionDialog?: boolean;
   answers?: IQuestionDialogAnswer[];
@@ -29,6 +30,7 @@ export const NPCDialog: React.FC<INPCDialogProps> = ({
   type,
   onClose,
   imagePath,
+  isTranslated = false,
   isQuestionDialog = false,
   questions,
   answers,
@@ -70,6 +72,7 @@ export const NPCDialog: React.FC<INPCDialogProps> = ({
               <NPCDialogText
                 type={type}
                 text={text || 'No text provided.'}
+                isTranslated={isTranslated}
                 onClose={() => {
                   if (onClose) {
                     onClose();

package/src/components/NPCDialog/NPCDialogText.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
-import { NPCDialogType } from '../..';
+import type { NPCDialogType } from './NPCDialog';
 import { IS_MOBILE_OR_TABLET } from '../../constants/uiDevices';
 import { chunkString } from '../../libs/StringHelpers';
 import { DynamicText } from '../typography/DynamicText';
@@ -13,6 +13,7 @@ interface IProps {
   onEndStep?: () => void;
   onStartStep?: () => void;
   type?: NPCDialogType;
+  isTranslated?: boolean;
 }
 
 export const NPCDialogText: React.FC<IProps> = ({
@@ -21,6 +22,7 @@ export const NPCDialogText: React.FC<IProps> = ({
   onEndStep,
   onStartStep,
   type,
+  isTranslated = false,
 }) => {
   const windowSize = useRef([window.innerWidth, window.innerHeight]);
   function maxCharacters(width: number) {
@@ -43,6 +45,11 @@ export const NPCDialogText: React.FC<IProps> = ({
   const textChunks = chunkString(text, maxCharacters(windowSize.current[0]));
 
   const [chunkIndex, setChunkIndex] = useState<number>(0);
+
+  useEffect(() => {
+    setChunkIndex(0);
+  }, [text]);
+
   const onHandleSpacePress = (event: KeyboardEvent) => {
     if (event.code === 'Space') {
       goToNextStep();
@@ -70,24 +77,37 @@ export const NPCDialogText: React.FC<IProps> = ({
     false
   );
 
+  useEffect(() => {
+    setShowGoNextIndicator(isTranslated);
+
+    if (isTranslated) {
+      onStartStep && onStartStep();
+      onEndStep && onEndStep();
+    }
+  }, [chunkIndex, isTranslated, onEndStep, onStartStep, text]);
+
   return (
     <Container>
-      <DynamicText
-        text={textChunks?.[chunkIndex] || ''}
-        onFinish={() => {
-          setShowGoNextIndicator(true);
-
-          onEndStep && onEndStep();
-        }}
-        onStart={() => {
-          setShowGoNextIndicator(false);
-
-          onStartStep && onStartStep();
-        }}
-      />
+      {isTranslated ? (
+        <TextContainer>{textChunks?.[chunkIndex] || ''}</TextContainer>
+      ) : (
+        <DynamicText
+          text={textChunks?.[chunkIndex] || ''}
+          onFinish={() => {
+            setShowGoNextIndicator(true);
+
+            onEndStep && onEndStep();
+          }}
+          onStart={() => {
+            setShowGoNextIndicator(false);
+
+            onStartStep && onStartStep();
+          }}
+        />
+      )}
       {showGoNextIndicator && (
         <PressSpaceIndicator
-          right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}
+          right={type === 'TextOnly' ? '1rem' : '10.5rem'}
           src={IS_MOBILE_OR_TABLET ? pressButtonGif : pressSpaceGif}
           onPointerDown={() => {
             goToNextStep();
@@ -100,6 +120,14 @@ export const NPCDialogText: React.FC<IProps> = ({
 
 const Container = styled.div``;
 
+const TextContainer = styled.p`
+  font-size: 0.7rem !important;
+  color: white;
+  text-shadow: 1px 1px 0px #000000;
+  letter-spacing: 1.2px;
+  word-break: normal;
+`;
+
 interface IPressSpaceIndicatorProps {
   right: string;
 }

package/src/components/NPCDialog/__test__/NPCDialogText.spec.tsx

@@ -0,0 +1,68 @@
+/**
+ * @jest-environment jsdom
+ */
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import { NPCDialogText } from '../NPCDialogText';
+
+jest.mock('../img/press-button.gif', () => 'press-button.gif');
+jest.mock('../img/space.gif', () => 'space.gif');
+
+describe('NPCDialogText', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+    jest.useRealTimers();
+    jest.clearAllMocks();
+  });
+
+  it('renders the full translated text immediately and skips the typewriter delay', () => {
+    act(() => {
+      ReactDOM.render(
+        <NPCDialogText
+          text="Translated NPC dialog"
+          type={'TextOnly'}
+          isTranslated
+          onClose={jest.fn()}
+        />,
+        container
+      );
+    });
+
+    expect(container.textContent).toContain('Translated NPC dialog');
+    expect(container.querySelectorAll('img')).toHaveLength(1);
+  });
+
+  it('keeps the typewriter effect for untranslated text until the animation finishes', () => {
+    act(() => {
+      ReactDOM.render(
+        <NPCDialogText
+          text="Hi"
+          type={'TextOnly'}
+          onClose={jest.fn()}
+        />,
+        container
+      );
+    });
+
+    expect(container.textContent).toBe('');
+    expect(container.querySelectorAll('img')).toHaveLength(0);
+
+    act(() => {
+      jest.advanceTimersByTime(100);
+    });
+
+    expect(container.textContent).toContain('Hi');
+    expect(container.querySelectorAll('img')).toHaveLength(1);
+  });
+});