@rpg-engine/long-bow 0.3.49 → 0.3.51

package/src/components/Multitab/TabsContainer.tsx

@@ -1,97 +1,97 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { DraggableContainer } from '../DraggableContainer';
-import { RPGUIContainerTypes } from '../RPGUIContainer';
-import { Tab } from './Tab';
-
-interface ITab {
-  label: string;
-  id: string;
-}
-
-export enum MultitabType {
-  Brown = 'brown',
-  Gray = 'gray',
-}
-
-export interface ITabsContainer {
-  children: React.ReactNode;
-  onCloseButton?: () => void;
-  tabs: ITab[];
-  type: MultitabType;
-}
-
-export const TabsContainer: React.FC<ITabsContainer> = ({
-  children,
-  onCloseButton,
-  tabs,
-  type = MultitabType.Brown,
-}) => {
-  const [selectedTab, setSelectedTab] = useState(tabs[0].id); //by default the first one
-
-  const onRenderTabs = () =>
-    tabs.map((tab, index) => (
-      <Tab
-        type={type}
-        active={selectedTab === tab.id}
-        label={tab.label}
-        key={`${tab.label}_${index}`}
-        onClick={() => setSelectedTab(tab.id)}
-      />
-    ));
-
-  const onGetContainerType = () => {
-    switch (type) {
-      case 'brown':
-        return RPGUIContainerTypes.FramedGold;
-      case 'gray':
-        return RPGUIContainerTypes.Framed;
-      default:
-        return RPGUIContainerTypes.Framed;
-    }
-  };
-
-  return (
-    <DraggableContainer
-      onCloseButton={onCloseButton}
-      type={onGetContainerType()}
-    >
-      {onRenderTabs()}
-      <BodyContainer selectedTab={selectedTab} className={type}>
-        {children}
-      </BodyContainer>
-    </DraggableContainer>
-  );
-};
-
-interface IBodyContainer {
-  selectedTab: string;
-}
-
-const BodyContainer = styled.div<IBodyContainer>`
-  display: flex; 
-  width: 100%;
-  height: 100%;
-  justify-content: space-between;
-
-  /* hide everything that is not data-tab-id selectedTab */
-  & > *:not([data-tab-id=${props => props.selectedTab}]) {
-    display: none;
-  }
-
-  &.brown {
-  border: 0.25rem solid #996D55;
-  background-color: #BF886A;
-  }
-  
-
-  &.gray {
-    border: 0.25rem solid rgba(0, 0, 0, 0.25);
-    background-color: #4E4A4E;
-  }
- 
-
-  border-radius: 5px; 
-  padding: 0.5rem; 
-   
-`;
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { DraggableContainer } from '../DraggableContainer';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { Tab } from './Tab';
+
+interface ITab {
+  label: string;
+  id: string;
+}
+
+export enum MultitabType {
+  Brown = 'brown',
+  Gray = 'gray',
+}
+
+export interface ITabsContainer {
+  children: React.ReactNode;
+  onCloseButton?: () => void;
+  tabs: ITab[];
+  type: MultitabType;
+}
+
+export const TabsContainer: React.FC<ITabsContainer> = ({
+  children,
+  onCloseButton,
+  tabs,
+  type = MultitabType.Brown,
+}) => {
+  const [selectedTab, setSelectedTab] = useState(tabs[0].id); //by default the first one
+
+  const onRenderTabs = () =>
+    tabs.map((tab, index) => (
+      <Tab
+        type={type}
+        active={selectedTab === tab.id}
+        label={tab.label}
+        key={`${tab.label}_${index}`}
+        onClick={() => setSelectedTab(tab.id)}
+      />
+    ));
+
+  const onGetContainerType = () => {
+    switch (type) {
+      case 'brown':
+        return RPGUIContainerTypes.FramedGold;
+      case 'gray':
+        return RPGUIContainerTypes.Framed;
+      default:
+        return RPGUIContainerTypes.Framed;
+    }
+  };
+
+  return (
+    <DraggableContainer
+      onCloseButton={onCloseButton}
+      type={onGetContainerType()}
+    >
+      {onRenderTabs()}
+      <BodyContainer selectedTab={selectedTab} className={type}>
+        {children}
+      </BodyContainer>
+    </DraggableContainer>
+  );
+};
+
+interface IBodyContainer {
+  selectedTab: string;
+}
+
+const BodyContainer = styled.div<IBodyContainer>`
+  display: flex; 
+  width: 100%;
+  height: 100%;
+  justify-content: space-between;
+
+  /* hide everything that is not data-tab-id selectedTab */
+  & > *:not([data-tab-id=${props => props.selectedTab}]) {
+    display: none;
+  }
+
+  &.brown {
+  border: 0.25rem solid #996D55;
+  background-color: #BF886A;
+  }
+  
+
+  &.gray {
+    border: 0.25rem solid rgba(0, 0, 0, 0.25);
+    background-color: #4E4A4E;
+  }
+ 
+
+  border-radius: 5px; 
+  padding: 0.5rem; 
+   
+`;

package/src/components/NPCDialog/NPCDialog.tsx

@@ -1,121 +1,121 @@
-import React from 'react';
-import styled from 'styled-components';
-import { RPGUIContainer, RPGUIContainerTypes } from '../RPGUIContainer';
-import { NPCDialogText } from './NPCDialogText';
-import {
-  IQuestionDialog,
-  IQuestionDialogAnswer,
-  QuestionDialog,
-} from './QuestionDialog/QuestionDialog';
-import aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';
-
-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,
-}) => {
-  return (
-    <RPGUIContainer
-      type={RPGUIContainerTypes.FramedGold}
-      width={isQuestionDialog ? '600px' : '80%'}
-      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
-                type={type}
-                text={text || 'No text provided.'}
-                onClose={() => {
-                  if (onClose) {
-                    onClose();
-                  }
-                }}
-              />
-            </TextContainer>
-            {type === NPCDialogType.TextAndThumbnail && (
-              <ThumbnailContainer>
-                <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />
-              </ThumbnailContainer>
-            )}
-          </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;
-`;
+import React from 'react';
+import styled from 'styled-components';
+import { RPGUIContainer, RPGUIContainerTypes } from '../RPGUIContainer';
+import { NPCDialogText } from './NPCDialogText';
+import {
+  IQuestionDialog,
+  IQuestionDialogAnswer,
+  QuestionDialog,
+} from './QuestionDialog/QuestionDialog';
+import aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';
+
+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,
+}) => {
+  return (
+    <RPGUIContainer
+      type={RPGUIContainerTypes.FramedGold}
+      width={isQuestionDialog ? '600px' : '80%'}
+      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
+                type={type}
+                text={text || 'No text provided.'}
+                onClose={() => {
+                  if (onClose) {
+                    onClose();
+                  }
+                }}
+              />
+            </TextContainer>
+            {type === NPCDialogType.TextAndThumbnail && (
+              <ThumbnailContainer>
+                <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />
+              </ThumbnailContainer>
+            )}
+          </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;
+`;

package/src/components/NPCDialog/NPCDialogText.tsx

@@ -1,113 +1,113 @@
-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;
-  type?: NPCDialogType;
-}
-
-export const NPCDialogText: React.FC<IProps> = ({
-  text,
-  onClose,
-  onEndStep,
-  onStartStep,
-  type,
-}) => {
-  const windowSize = useRef([window.innerWidth, window.innerHeight]);
-  function maxCharacters(width: number) {
-    // Set the font size to 16 pixels
-    var fontSize = 11.2;
-
-    // Calculate the number of characters that can fit in one line
-    var charactersPerLine = Math.floor(width / 2 / fontSize);
-
-    // Calculate the number of lines that can fit in the div
-    var linesPerDiv = Math.floor(180 / fontSize);
-
-    // Calculate the maximum number of characters that can fit in the div
-    var maxCharacters = charactersPerLine * linesPerDiv;
-
-    // Return the maximum number of characters
-    return Math.round(maxCharacters / 5);
-  }
-
-  const textChunks = chunkString(text, maxCharacters(windowSize.current[0]));
-
-  const [chunkIndex, setChunkIndex] = useState<number>(0);
-  const onHandleSpacePress = (event: KeyboardEvent) => {
-    if (event.code === 'Space') {
-      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();
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('keydown', onHandleSpacePress);
-
-    return () => document.removeEventListener('keydown', onHandleSpacePress);
-  }, [chunkIndex]);
-
-  const [showGoNextIndicator, setShowGoNextIndicator] = useState<boolean>(
-    false
-  );
-
-  return (
-    <Container>
-      <DynamicText
-        text={textChunks?.[chunkIndex] || ''}
-        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;
-`;
+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;
+  type?: NPCDialogType;
+}
+
+export const NPCDialogText: React.FC<IProps> = ({
+  text,
+  onClose,
+  onEndStep,
+  onStartStep,
+  type,
+}) => {
+  const windowSize = useRef([window.innerWidth, window.innerHeight]);
+  function maxCharacters(width: number) {
+    // Set the font size to 16 pixels
+    var fontSize = 11.2;
+
+    // Calculate the number of characters that can fit in one line
+    var charactersPerLine = Math.floor(width / 2 / fontSize);
+
+    // Calculate the number of lines that can fit in the div
+    var linesPerDiv = Math.floor(180 / fontSize);
+
+    // Calculate the maximum number of characters that can fit in the div
+    var maxCharacters = charactersPerLine * linesPerDiv;
+
+    // Return the maximum number of characters
+    return Math.round(maxCharacters / 5);
+  }
+
+  const textChunks = chunkString(text, maxCharacters(windowSize.current[0]));
+
+  const [chunkIndex, setChunkIndex] = useState<number>(0);
+  const onHandleSpacePress = (event: KeyboardEvent) => {
+    if (event.code === 'Space') {
+      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();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', onHandleSpacePress);
+
+    return () => document.removeEventListener('keydown', onHandleSpacePress);
+  }, [chunkIndex]);
+
+  const [showGoNextIndicator, setShowGoNextIndicator] = useState<boolean>(
+    false
+  );
+
+  return (
+    <Container>
+      <DynamicText
+        text={textChunks?.[chunkIndex] || ''}
+        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;
+`;