@rpg-engine/long-bow 0.2.69 → 0.2.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.2.69",
+  "version": "0.2.70",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -86,6 +86,7 @@
     "@rpg-engine/shared": "^0.6.27",
     "dayjs": "^1.11.2",
     "fs-extra": "^10.1.0",
+    "is-mobile": "^3.1.1",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "mobx": "^6.6.0",

package/src/components/Button.tsx

@@ -7,25 +7,38 @@ export enum ButtonTypes {
   RPGUIGoldButton = 'rpgui-button golden',
 }
 
-export interface IButtonProps {
+export interface IButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   disabled?: boolean;
   children: React.ReactNode;
   buttonType: ButtonTypes;
+  onClick?: (e: any) => void;
 }
 
-export const Button: React.FC<IButtonProps &
-  React.DetailedHTMLProps<
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
-  >> = ({ disabled = false, children, buttonType, ...props }) => {
+export const Button = ({
+  disabled = false,
+  children,
+  buttonType,
+  onClick,
+  ...props
+}: IButtonProps) => {
   return (
-    <ButtonContainer className={`${buttonType}`} disabled={disabled} {...props}>
+    <ButtonContainer
+      className={`${buttonType}`}
+      disabled={disabled}
+      {...props}
+      onTouchStart={e => {
+        if (onClick) {
+          onClick(e);
+        }
+      }}
+    >
       <p>{children}</p>
     </ButtonContainer>
   );
 };
 
-const ButtonContainer = styled.button<any>`
+const ButtonContainer = styled.button`
   height: 45px;
   font-size: ${uiFonts.size.small};
 `;

package/src/components/NPCDialog/NPCDialog.tsx

@@ -1,14 +1,13 @@
-import React, { useState } from 'react';
+import React 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';
+import aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';
 
 export enum NPCDialogType {
   TextOnly = 'TextOnly',
@@ -34,10 +33,6 @@ export const NPCDialog: React.FC<INPCDialogProps> = ({
   questions,
   answers,
 }) => {
-  const [showGoNextIndicator, setShowGoNextIndicator] = useState<boolean>(
-    false
-  );
-
   return (
     <RPGUIContainer
       type={RPGUIContainerTypes.FramedGold}
@@ -72,8 +67,7 @@ export const NPCDialog: React.FC<INPCDialogProps> = ({
               flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}
             >
               <NPCDialogText
-                onStartStep={() => setShowGoNextIndicator(false)}
-                onEndStep={() => setShowGoNextIndicator(true)}
+                type={type}
                 text={text || 'No text provided.'}
                 onClose={() => {
                   if (onClose) {
@@ -88,12 +82,6 @@ export const NPCDialog: React.FC<INPCDialogProps> = ({
               </ThumbnailContainer>
             )}
           </Container>
-          {showGoNextIndicator && (
-            <PressSpaceIndicator
-              right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}
-              src={pressSpaceGif}
-            />
-          )}
         </>
       )}
     </RPGUIContainer>
@@ -131,15 +119,3 @@ const NPCThumbnail = styled.img`
   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,13 +1,18 @@
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
+import { NPCDialogType } from '../..';
+import { IS_MOBILE_OR_TABLET } from '../../constants/uiDevices';
 import { chunkString } from '../../libs/StringHelpers';
 import { DynamicText } from '../typography/DynamicText';
+import pressButtonGif from './img/press-button.gif';
+import pressSpaceGif from './img/space.gif';
 
 interface IProps {
   text: string;
   onClose: () => void;
-  onEndStep: () => void;
-  onStartStep: () => void;
+  onEndStep?: () => void;
+  onStartStep?: () => void;
+  type?: NPCDialogType;
 }
 
 export const NPCDialogText: React.FC<IProps> = ({
@@ -15,6 +20,7 @@ export const NPCDialogText: React.FC<IProps> = ({
   onClose,
   onEndStep,
   onStartStep,
+  type,
 }) => {
   const windowSize = useRef([window.innerWidth, window.innerHeight]);
   function maxCharacters(width: number) {
@@ -39,14 +45,18 @@ export const NPCDialogText: React.FC<IProps> = ({
   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();
-      }
+      goToNextStep();
+    }
+  };
+
+  const goToNextStep = () => {
+    const hasNextChunk = textChunks?.[chunkIndex + 1] || false;
+
+    if (hasNextChunk) {
+      setChunkIndex(prev => prev + 1);
+    } else {
+      // if there's no more text chunks, close the dialog
+      onClose();
     }
   };
 
@@ -56,15 +66,48 @@ export const NPCDialogText: React.FC<IProps> = ({
     return () => document.removeEventListener('keydown', onHandleSpacePress);
   }, [chunkIndex]);
 
+  const [showGoNextIndicator, setShowGoNextIndicator] = useState<boolean>(
+    false
+  );
+
   return (
     <Container>
       <DynamicText
         text={textChunks?.[chunkIndex] || ''}
-        onFinish={onEndStep}
-        onStart={onStartStep}
+        onFinish={() => {
+          setShowGoNextIndicator(true);
+
+          onEndStep && onEndStep();
+        }}
+        onStart={() => {
+          setShowGoNextIndicator(false);
+
+          onStartStep && onStartStep();
+        }}
       />
+      {showGoNextIndicator && (
+        <PressSpaceIndicator
+          right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}
+          src={IS_MOBILE_OR_TABLET ? pressButtonGif : pressSpaceGif}
+          onClick={() => {
+            goToNextStep();
+          }}
+        />
+      )}
     </Container>
   );
 };
 
 const Container = styled.div``;
+
+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/constants/uiDevices.ts

@@ -0,0 +1,5 @@
+import isMobile from 'is-mobile';
+
+export const IS_MOBILE_OR_TABLET = isMobile({
+  tablet: true,
+});