@rpg-engine/long-bow 0.4.7 → 0.4.8

package/src/components/NPCDialog/NPCMultiDialog.tsx

@@ -1,159 +1,159 @@
-import React, { useEffect, 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';
-
-export enum ImgSide {
-  right = 'right',
-  left = 'left',
-}
-
-export interface NPCMultiDialogType {
-  text: string;
-  imagePath?: string;
-  imageSide: ImgSide;
-}
-
-export interface INPCMultiDialogProps {
-  onClose: () => void;
-  textAndTypeArray: NPCMultiDialogType[];
-}
-
-export const NPCMultiDialog: React.FC<INPCMultiDialogProps> = ({
-  onClose,
-  textAndTypeArray,
-}) => {
-  const [showGoNextIndicator, setShowGoNextIndicator] = useState<boolean>(
-    false
-  );
-  const [slide, setSlide] = useState<number>(0);
-
-  const onHandleSpacePress = (event: KeyboardEvent) => {
-    if (event.code === 'Space') {
-      if (slide < textAndTypeArray?.length - 1) {
-        setSlide(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);
-  }, [slide]);
-
-  return (
-    <RPGUIContainer
-      type={RPGUIContainerTypes.FramedGold}
-      width={'50%'}
-      height={'180px'}
-    >
-      <>
-        <Container>
-          {textAndTypeArray[slide]?.imageSide === 'right' && (
-            <>
-              <TextContainer flex={'70%'}>
-                <NPCDialogText
-                  onStartStep={() => setShowGoNextIndicator(false)}
-                  onEndStep={() => setShowGoNextIndicator(true)}
-                  text={textAndTypeArray[slide].text || 'No text provided.'}
-                  onClose={() => {
-                    if (onClose) {
-                      onClose();
-                    }
-                  }}
-                />
-              </TextContainer>
-              <ThumbnailContainer>
-                <NPCThumbnail
-                  src={
-                    textAndTypeArray[slide].imagePath || aliceDefaultThumbnail
-                  }
-                />
-              </ThumbnailContainer>
-              {showGoNextIndicator && (
-                <PressSpaceIndicator right={'10.5rem'} src={pressSpaceGif} />
-              )}
-            </>
-          )}
-          {textAndTypeArray[slide].imageSide === 'left' && (
-            <>
-              <ThumbnailContainer>
-                <NPCThumbnail
-                  src={
-                    textAndTypeArray[slide].imagePath || aliceDefaultThumbnail
-                  }
-                />
-              </ThumbnailContainer>
-              <TextContainer flex={'70%'}>
-                <NPCDialogText
-                  onStartStep={() => setShowGoNextIndicator(false)}
-                  onEndStep={() => setShowGoNextIndicator(true)}
-                  text={textAndTypeArray[slide].text || 'No text provided.'}
-                  onClose={() => {
-                    if (onClose) {
-                      onClose();
-                    }
-                  }}
-                />
-              </TextContainer>
-              {showGoNextIndicator && (
-                <PressSpaceIndicator right={'1rem'} src={pressSpaceGif} />
-              )}
-            </>
-          )}
-        </Container>
-        )
-      </>
-    </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, { useEffect, 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';
+
+export enum ImgSide {
+  right = 'right',
+  left = 'left',
+}
+
+export interface NPCMultiDialogType {
+  text: string;
+  imagePath?: string;
+  imageSide: ImgSide;
+}
+
+export interface INPCMultiDialogProps {
+  onClose: () => void;
+  textAndTypeArray: NPCMultiDialogType[];
+}
+
+export const NPCMultiDialog: React.FC<INPCMultiDialogProps> = ({
+  onClose,
+  textAndTypeArray,
+}) => {
+  const [showGoNextIndicator, setShowGoNextIndicator] = useState<boolean>(
+    false
+  );
+  const [slide, setSlide] = useState<number>(0);
+
+  const onHandleSpacePress = (event: KeyboardEvent) => {
+    if (event.code === 'Space') {
+      if (slide < textAndTypeArray?.length - 1) {
+        setSlide(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);
+  }, [slide]);
+
+  return (
+    <RPGUIContainer
+      type={RPGUIContainerTypes.FramedGold}
+      width={'50%'}
+      height={'180px'}
+    >
+      <>
+        <Container>
+          {textAndTypeArray[slide]?.imageSide === 'right' && (
+            <>
+              <TextContainer flex={'70%'}>
+                <NPCDialogText
+                  onStartStep={() => setShowGoNextIndicator(false)}
+                  onEndStep={() => setShowGoNextIndicator(true)}
+                  text={textAndTypeArray[slide].text || 'No text provided.'}
+                  onClose={() => {
+                    if (onClose) {
+                      onClose();
+                    }
+                  }}
+                />
+              </TextContainer>
+              <ThumbnailContainer>
+                <NPCThumbnail
+                  src={
+                    textAndTypeArray[slide].imagePath || aliceDefaultThumbnail
+                  }
+                />
+              </ThumbnailContainer>
+              {showGoNextIndicator && (
+                <PressSpaceIndicator right={'10.5rem'} src={pressSpaceGif} />
+              )}
+            </>
+          )}
+          {textAndTypeArray[slide].imageSide === 'left' && (
+            <>
+              <ThumbnailContainer>
+                <NPCThumbnail
+                  src={
+                    textAndTypeArray[slide].imagePath || aliceDefaultThumbnail
+                  }
+                />
+              </ThumbnailContainer>
+              <TextContainer flex={'70%'}>
+                <NPCDialogText
+                  onStartStep={() => setShowGoNextIndicator(false)}
+                  onEndStep={() => setShowGoNextIndicator(true)}
+                  text={textAndTypeArray[slide].text || 'No text provided.'}
+                  onClose={() => {
+                    if (onClose) {
+                      onClose();
+                    }
+                  }}
+                />
+              </TextContainer>
+              {showGoNextIndicator && (
+                <PressSpaceIndicator right={'1rem'} src={pressSpaceGif} />
+              )}
+            </>
+          )}
+        </Container>
+        )
+      </>
+    </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;
+`;