@rpg-engine/long-bow 0.1.20 → 0.1.23

package/dist/NPCDialog/NPCDialog.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 export declare enum NPCDialogType {
     TextOnly = "TextOnly",
-    TextAndThumbnail = "TextAndThumbnail"
+    TextAndThumbnail = "TextAndThumbnail",
+    QuestionAndText = "QuestionAndText"
 }
 export interface INPCDialogProps {
     text: string;

package/dist/long-bow.cjs.development.js

@@ -97,11 +97,12 @@ var NPCDialogText = function NPCDialogText(_ref) {
 
   var onHandleSpacePress = function onHandleSpacePress(event) {
     if (event.code === 'Space') {
-      console.log('space pressed!');
       var hasNextChunk = (textChunks == null ? void 0 : textChunks[chunkIndex + 1]) || false;
 
       if (hasNextChunk) {
-        setChunkIndex(chunkIndex + 1);
+        setChunkIndex(function (prev) {
+          return prev + 1;
+        });
       } else {
         // if there's no more text chunks, close the dialog
         onClose();
@@ -129,6 +130,7 @@ var Container$1 = /*#__PURE__*/styled.div.withConfig({
 (function (NPCDialogType) {
   NPCDialogType["TextOnly"] = "TextOnly";
   NPCDialogType["TextAndThumbnail"] = "TextAndThumbnail";
+  NPCDialogType["QuestionAndText"] = "QuestionAndText";
 })(exports.NPCDialogType || (exports.NPCDialogType = {}));
 
 var NPCDialog = function NPCDialog(_ref) {
@@ -137,19 +139,15 @@ var NPCDialog = function NPCDialog(_ref) {
       _onClose = _ref.onClose,
       imagePath = _ref.imagePath;
 
-  var _useState = React.useState(true),
-      isOpen = _useState[0],
-      setIsOpen = _useState[1];
+  var _useState = React.useState(false),
+      showGoNextIndicator = _useState[0],
+      setShowGoNextIndicator = _useState[1];
 
-  var _useState2 = React.useState(false),
-      showGoNextIndicator = _useState2[0],
-      setShowGoNextIndicator = _useState2[1];
-
-  return isOpen ? React__default.createElement(RPGUI, null, React__default.createElement(RPGUIContainer, {
+  return React__default.createElement(RPGUI, null, React__default.createElement(RPGUIContainer, {
     type: "framed-golden"
   }, React__default.createElement(Container$2, null, React__default.createElement(TextContainer$1, {
     flex: type === exports.NPCDialogType.TextAndThumbnail ? '70%' : '100%'
-  }, React__default.createElement(NPCDialogText, {
+  }, type === exports.NPCDialogType.QuestionAndText ? React__default.createElement("p", null, "QUESTIONS AQUI!") : React__default.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
       return setShowGoNextIndicator(false);
     },
@@ -160,8 +158,6 @@ var NPCDialog = function NPCDialog(_ref) {
     onClose: function onClose() {
       if (_onClose) {
         _onClose();
-
-        setIsOpen(false);
       }
     }
   })), type === exports.NPCDialogType.TextAndThumbnail && React__default.createElement(ThumbnailContainer, null, React__default.createElement(NPCThumbnail, {
@@ -169,7 +165,7 @@ var NPCDialog = function NPCDialog(_ref) {
   }))), showGoNextIndicator && React__default.createElement(PressSpaceIndicator, {
     right: type === exports.NPCDialogType.TextOnly ? '1rem' : '10.5rem',
     src: img$1
-  }))) : null;
+  })));
 };
 var Container$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialog__Container",

package/dist/long-bow.cjs.development.js.map

@@ -1 +1 @@
-{"version":3,"file":"long-bow.cjs.development.js","sources":["../src/RPGUI/RPGUI.tsx","../src/RPGUI/RPGUIContainer.tsx","../src/NPCDialog/img/npcDialog/npcThumbnails/alice.png","../src/NPCDialog/img/space.gif","../src/libs/StringHelpers.ts","../src/typography/DynamicText.tsx","../src/NPCDialog/NPCDialogText.tsx","../src/NPCDialog/NPCDialog.tsx"],"sourcesContent":["import React from 'react';\nimport 'rpgui/rpgui.css';\nimport 'rpgui/rpgui.js';\n\ninterface IProps {\n  children: React.ReactNode;\n}\n\nexport const RPGUI: React.FC<IProps> = ({ children }) => {\n  return <div className=\"rpgui-content\">{children}</div>;\n};\n","import React from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n  type: 'framed' | 'framed-golden' | 'framed-golden-2' | 'framed-grey';\n  children: React.ReactNode;\n  width?: string;\n}\n\nexport const RPGUIContainer: React.FC<IProps> = ({\n  children,\n  type,\n  width = '50%',\n}) => {\n  return (\n    <Container width={width} className={`rpgui-container ${type}`}>\n      {children}\n    </Container>\n  );\n};\n\ninterface IContainerProps {\n  width: string;\n}\n\nconst Container = styled.div<IContainerProps>`\n  max-width: ${({ width }) => width};\n`;\n","const img = require('./alice.png'); export default img;","const img = require('./space.gif'); export default img;","export const chunkString = (str: string, length: number) => {\n  return str.match(new RegExp('.{1,' + length + '}', 'g'));\n};\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n  text: string;\n  onFinish?: () => void;\n  onStart?: () => void;\n}\n\nexport const DynamicText: React.FC<IProps> = ({ text, onFinish, onStart }) => {\n  const [textState, setTextState] = useState<string>('');\n\n  useEffect(() => {\n    let i = 0;\n    const interval = setInterval(() => {\n      // on every interval, show one more character\n\n      if (i === 0) {\n        if (onStart) {\n          onStart();\n        }\n      }\n\n      if (i < text.length) {\n        setTextState(text.substring(0, i + 1));\n        i++;\n      } else {\n        clearInterval(interval);\n        if (onFinish) {\n          onFinish();\n        }\n      }\n    }, 50);\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, [text]);\n\n  return <TextContainer>{textState}</TextContainer>;\n};\n\nconst TextContainer = styled.p`\n  font-size: 0.7rem !important;\n  color: white;\n  text-shadow: 1px 1px 0px #000000;\n  letter-spacing: 1.2px;\n`;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { chunkString } from '../libs/StringHelpers';\nimport { DynamicText } from '../typography/DynamicText';\n\ninterface IProps {\n  text: string;\n  onClose: () => void;\n  onEndStep: () => void;\n  onStartStep: () => void;\n}\n\nexport const NPCDialogText: React.FC<IProps> = ({\n  text,\n  onClose,\n  onEndStep,\n  onStartStep,\n}) => {\n  const textChunks = chunkString(text, 85);\n\n  const [chunkIndex, setChunkIndex] = useState<number>(0);\n\n  const onHandleSpacePress = (event: KeyboardEvent) => {\n    if (event.code === 'Space') {\n      console.log('space pressed!');\n\n      const hasNextChunk = textChunks?.[chunkIndex + 1] || false;\n\n      if (hasNextChunk) {\n        setChunkIndex(chunkIndex + 1);\n      } else {\n        // if there's no more text chunks, close the dialog\n        onClose();\n      }\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('keydown', onHandleSpacePress);\n\n    return () => document.removeEventListener('keydown', onHandleSpacePress);\n  }, [chunkIndex]);\n\n  return (\n    <Container>\n      <DynamicText\n        text={textChunks?.[chunkIndex] || ''}\n        onFinish={onEndStep}\n        onStart={onStartStep}\n      />\n    </Container>\n  );\n};\n\nconst Container = styled.div``;\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { RPGUI } from '../RPGUI/RPGUI';\nimport { RPGUIContainer } from '../RPGUI/RPGUIContainer';\nimport aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';\nimport pressSpaceGif from './img/space.gif';\nimport { NPCDialogText } from './NPCDialogText';\nexport enum NPCDialogType {\n  TextOnly = 'TextOnly',\n  TextAndThumbnail = 'TextAndThumbnail',\n}\n\nexport interface INPCDialogProps {\n  text: string;\n  type: NPCDialogType;\n  imagePath?: string;\n  onClose?: () => void;\n}\n\nexport const NPCDialog: React.FC<INPCDialogProps> = ({\n  text,\n  type,\n  onClose,\n  imagePath,\n}) => {\n  const [isOpen, setIsOpen] = useState<boolean>(true);\n  const [showGoNextIndicator, setShowGoNextIndicator] =\n    useState<boolean>(false);\n\n  return isOpen ? (\n    <RPGUI>\n      <RPGUIContainer type=\"framed-golden\">\n        <Container>\n          <TextContainer\n            flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}\n          >\n            <NPCDialogText\n              onStartStep={() => setShowGoNextIndicator(false)}\n              onEndStep={() => setShowGoNextIndicator(true)}\n              text={text}\n              onClose={() => {\n                if (onClose) {\n                  onClose();\n                  setIsOpen(false);\n                }\n              }}\n            />\n          </TextContainer>\n          {type === NPCDialogType.TextAndThumbnail && (\n            <ThumbnailContainer>\n              <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />\n            </ThumbnailContainer>\n          )}\n        </Container>\n        {showGoNextIndicator && (\n          <PressSpaceIndicator\n            right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}\n            src={pressSpaceGif}\n          />\n        )}\n      </RPGUIContainer>\n    </RPGUI>\n  ) : null;\n};\n\nconst Container = styled.div`\n  display: flex;\n  width: 100%;\n  height: 125px;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: flex-start;\n  position: relative;\n`;\n\ninterface ITextContainerProps {\n  flex: string;\n}\n\nconst TextContainer = styled.div<ITextContainerProps>`\n  flex: ${({ flex }) => flex} 0 0;\n  width: 355px;\n`;\n\nconst ThumbnailContainer = styled.div`\n  flex: 30% 0 0;\n  display: flex;\n  justify-content: flex-end;\n`;\n\nconst NPCThumbnail = styled.img`\n  image-rendering: pixelated;\n  height: 128px;\n  width: 128px;\n`;\n\ninterface IPressSpaceIndicatorProps {\n  right: string;\n}\n\nconst PressSpaceIndicator = styled.img<IPressSpaceIndicatorProps>`\n  position: absolute;\n  right: ${({ right }) => right};\n  bottom: 1rem;\n  height: 20.7px;\n  image-rendering: -webkit-optimize-contrast;\n`;\n"],"names":["RPGUI","children","React","className","RPGUIContainer","type","width","Container","styled","div","img","chunkString","str","length","match","RegExp","DynamicText","text","onFinish","onStart","useState","textState","setTextState","useEffect","i","interval","setInterval","substring","clearInterval","TextContainer","p","NPCDialogText","onClose","onEndStep","onStartStep","textChunks","chunkIndex","setChunkIndex","onHandleSpacePress","event","code","console","log","hasNextChunk","document","addEventListener","removeEventListener","NPCDialogType","NPCDialog","imagePath","isOpen","setIsOpen","showGoNextIndicator","setShowGoNextIndicator","flex","TextAndThumbnail","ThumbnailContainer","NPCThumbnail","src","aliceDefaultThumbnail","PressSpaceIndicator","right","TextOnly","pressSpaceGif"],"mappings":"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"}
+{"version":3,"file":"long-bow.cjs.development.js","sources":["../src/RPGUI/RPGUI.tsx","../src/RPGUI/RPGUIContainer.tsx","../src/NPCDialog/img/npcDialog/npcThumbnails/alice.png","../src/NPCDialog/img/space.gif","../src/libs/StringHelpers.ts","../src/typography/DynamicText.tsx","../src/NPCDialog/NPCDialogText.tsx","../src/NPCDialog/NPCDialog.tsx"],"sourcesContent":["import React from 'react';\nimport 'rpgui/rpgui.css';\nimport 'rpgui/rpgui.js';\n\ninterface IProps {\n  children: React.ReactNode;\n}\n\nexport const RPGUI: React.FC<IProps> = ({ children }) => {\n  return <div className=\"rpgui-content\">{children}</div>;\n};\n","import React from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n  type: 'framed' | 'framed-golden' | 'framed-golden-2' | 'framed-grey';\n  children: React.ReactNode;\n  width?: string;\n}\n\nexport const RPGUIContainer: React.FC<IProps> = ({\n  children,\n  type,\n  width = '50%',\n}) => {\n  return (\n    <Container width={width} className={`rpgui-container ${type}`}>\n      {children}\n    </Container>\n  );\n};\n\ninterface IContainerProps {\n  width: string;\n}\n\nconst Container = styled.div<IContainerProps>`\n  max-width: ${({ width }) => width};\n`;\n","const img = require('./alice.png'); export default img;","const img = require('./space.gif'); export default img;","export const chunkString = (str: string, length: number) => {\n  return str.match(new RegExp('.{1,' + length + '}', 'g'));\n};\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n  text: string;\n  onFinish?: () => void;\n  onStart?: () => void;\n}\n\nexport const DynamicText: React.FC<IProps> = ({ text, onFinish, onStart }) => {\n  const [textState, setTextState] = useState<string>('');\n\n  useEffect(() => {\n    let i = 0;\n    const interval = setInterval(() => {\n      // on every interval, show one more character\n\n      if (i === 0) {\n        if (onStart) {\n          onStart();\n        }\n      }\n\n      if (i < text.length) {\n        setTextState(text.substring(0, i + 1));\n        i++;\n      } else {\n        clearInterval(interval);\n        if (onFinish) {\n          onFinish();\n        }\n      }\n    }, 50);\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, [text]);\n\n  return <TextContainer>{textState}</TextContainer>;\n};\n\nconst TextContainer = styled.p`\n  font-size: 0.7rem !important;\n  color: white;\n  text-shadow: 1px 1px 0px #000000;\n  letter-spacing: 1.2px;\n`;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { chunkString } from '../libs/StringHelpers';\nimport { DynamicText } from '../typography/DynamicText';\n\ninterface IProps {\n  text: string;\n  onClose: () => void;\n  onEndStep: () => void;\n  onStartStep: () => void;\n}\n\nexport const NPCDialogText: React.FC<IProps> = ({\n  text,\n  onClose,\n  onEndStep,\n  onStartStep,\n}) => {\n  const textChunks = chunkString(text, 85);\n\n  const [chunkIndex, setChunkIndex] = useState<number>(0);\n\n  const onHandleSpacePress = (event: KeyboardEvent) => {\n    if (event.code === 'Space') {\n      const hasNextChunk = textChunks?.[chunkIndex + 1] || false;\n\n      if (hasNextChunk) {\n        setChunkIndex((prev) => prev + 1);\n      } else {\n        // if there's no more text chunks, close the dialog\n        onClose();\n      }\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('keydown', onHandleSpacePress);\n\n    return () => document.removeEventListener('keydown', onHandleSpacePress);\n  }, [chunkIndex]);\n\n  return (\n    <Container>\n      <DynamicText\n        text={textChunks?.[chunkIndex] || ''}\n        onFinish={onEndStep}\n        onStart={onStartStep}\n      />\n    </Container>\n  );\n};\n\nconst Container = styled.div``;\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { RPGUI } from '../RPGUI/RPGUI';\nimport { RPGUIContainer } from '../RPGUI/RPGUIContainer';\nimport aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';\nimport pressSpaceGif from './img/space.gif';\nimport { NPCDialogText } from './NPCDialogText';\n\nexport enum NPCDialogType {\n  TextOnly = 'TextOnly',\n  TextAndThumbnail = 'TextAndThumbnail',\n  QuestionAndText = 'QuestionAndText',\n}\n\nexport interface INPCDialogProps {\n  text: string;\n  type: NPCDialogType;\n  imagePath?: string;\n  onClose?: () => void;\n}\n\nexport const NPCDialog: React.FC<INPCDialogProps> = ({\n  text,\n  type,\n  onClose,\n  imagePath,\n}) => {\n  const [showGoNextIndicator, setShowGoNextIndicator] =\n    useState<boolean>(false);\n\n  return (\n    <RPGUI>\n      <RPGUIContainer type=\"framed-golden\">\n        <Container>\n          <TextContainer\n            flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}\n          >\n            {type === NPCDialogType.QuestionAndText ? (\n              <p>QUESTIONS AQUI!</p>\n            ) : (\n              <NPCDialogText\n                onStartStep={() => setShowGoNextIndicator(false)}\n                onEndStep={() => setShowGoNextIndicator(true)}\n                text={text}\n                onClose={() => {\n                  if (onClose) {\n                    onClose();\n                  }\n                }}\n              />\n            )}\n          </TextContainer>\n          {type === NPCDialogType.TextAndThumbnail && (\n            <ThumbnailContainer>\n              <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />\n            </ThumbnailContainer>\n          )}\n        </Container>\n        {showGoNextIndicator && (\n          <PressSpaceIndicator\n            right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}\n            src={pressSpaceGif}\n          />\n        )}\n      </RPGUIContainer>\n    </RPGUI>\n  );\n};\n\nconst Container = styled.div`\n  display: flex;\n  width: 100%;\n  height: 125px;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: flex-start;\n  position: relative;\n`;\n\ninterface ITextContainerProps {\n  flex: string;\n}\n\nconst TextContainer = styled.div<ITextContainerProps>`\n  flex: ${({ flex }) => flex} 0 0;\n  width: 355px;\n`;\n\nconst ThumbnailContainer = styled.div`\n  flex: 30% 0 0;\n  display: flex;\n  justify-content: flex-end;\n`;\n\nconst NPCThumbnail = styled.img`\n  image-rendering: pixelated;\n  height: 128px;\n  width: 128px;\n`;\n\ninterface IPressSpaceIndicatorProps {\n  right: string;\n}\n\nconst PressSpaceIndicator = styled.img<IPressSpaceIndicatorProps>`\n  position: absolute;\n  right: ${({ right }) => right};\n  bottom: 1rem;\n  height: 20.7px;\n  image-rendering: -webkit-optimize-contrast;\n`;\n"],"names":["RPGUI","children","React","className","RPGUIContainer","type","width","Container","styled","div","img","chunkString","str","length","match","RegExp","DynamicText","text","onFinish","onStart","useState","textState","setTextState","useEffect","i","interval","setInterval","substring","clearInterval","TextContainer","p","NPCDialogText","onClose","onEndStep","onStartStep","textChunks","chunkIndex","setChunkIndex","onHandleSpacePress","event","code","hasNextChunk","prev","document","addEventListener","removeEventListener","NPCDialogType","NPCDialog","imagePath","showGoNextIndicator","setShowGoNextIndicator","flex","TextAndThumbnail","QuestionAndText","ThumbnailContainer","NPCThumbnail","src","aliceDefaultThumbnail","PressSpaceIndicator","right","TextOnly","pressSpaceGif"],"mappings":"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"}

package/dist/long-bow.cjs.production.min.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),i=e(require("styled-components"));require("rpgui/rpgui.css"),require("rpgui/rpgui.js");var o=function(e){return n.createElement("div",{className:"rpgui-content"},e.children)},r=function(e){var t=e.width;return n.createElement(a,{width:void 0===t?"50%":t,className:"rpgui-container "+e.type},e.children)},a=i.div.withConfig({displayName:"RPGUIContainer__Container",componentId:"sc-3xvrxc-0"})(["max-width:",";"],(function(e){return e.width}));const l=require("./alice.png"),c=require("./space.gif");var s,u=function(e){var i=e.text,o=e.onFinish,r=e.onStart,a=t.useState(""),l=a[0],c=a[1];return t.useEffect((function(){var e=0,t=setInterval((function(){0===e&&r&&r(),e<i.length?(c(i.substring(0,e+1)),e++):(clearInterval(t),o&&o())}),50);return function(){clearInterval(t)}}),[i]),n.createElement(p,null,l)},p=i.p.withConfig({displayName:"DynamicText__TextContainer",componentId:"sc-acj2q5-0"})(["font-size:0.7rem !important;color:white;text-shadow:1px 1px 0px #000000;letter-spacing:1.2px;"]),m=function(e){var i=e.onClose,o=e.onEndStep,r=e.onStartStep,a=e.text.match(new RegExp(".{1,85}","g")),l=t.useState(0),c=l[0],s=l[1],p=function(e){"Space"===e.code&&(console.log("space pressed!"),(null==a?void 0:a[c+1])?s(c+1):i())};return t.useEffect((function(){return document.addEventListener("keydown",p),function(){return document.removeEventListener("keydown",p)}}),[c]),n.createElement(d,null,n.createElement(u,{text:(null==a?void 0:a[c])||"",onFinish:o,onStart:r}))},d=i.div.withConfig({displayName:"NPCDialogText__Container",componentId:"sc-ahseq0-0"})([""]);(s=exports.NPCDialogType||(exports.NPCDialogType={})).TextOnly="TextOnly",s.TextAndThumbnail="TextAndThumbnail";var x=i.div.withConfig({displayName:"NPCDialog__Container",componentId:"sc-omm2zk-0"})(["display:flex;width:100%;height:125px;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]),g=i.div.withConfig({displayName:"NPCDialog__TextContainer",componentId:"sc-omm2zk-1"})(["flex:"," 0 0;width:355px;"],(function(e){return e.flex})),f=i.div.withConfig({displayName:"NPCDialog__ThumbnailContainer",componentId:"sc-omm2zk-2"})(["flex:30% 0 0;display:flex;justify-content:flex-end;"]),h=i.img.withConfig({displayName:"NPCDialog__NPCThumbnail",componentId:"sc-omm2zk-3"})(["image-rendering:pixelated;height:128px;width:128px;"]),C=i.img.withConfig({displayName:"NPCDialog__PressSpaceIndicator",componentId:"sc-omm2zk-4"})(["position:absolute;right:",";bottom:1rem;height:20.7px;image-rendering:-webkit-optimize-contrast;"],(function(e){return e.right}));exports.DynamicText=u,exports.NPCDialog=function(e){var i=e.text,a=e.type,s=e.onClose,u=e.imagePath,p=t.useState(!0),d=p[0],y=p[1],v=t.useState(!1),N=v[0],T=v[1];return d?n.createElement(o,null,n.createElement(r,{type:"framed-golden"},n.createElement(x,null,n.createElement(g,{flex:a===exports.NPCDialogType.TextAndThumbnail?"70%":"100%"},n.createElement(m,{onStartStep:function(){return T(!1)},onEndStep:function(){return T(!0)},text:i,onClose:function(){s&&(s(),y(!1))}})),a===exports.NPCDialogType.TextAndThumbnail&&n.createElement(f,null,n.createElement(h,{src:u||l}))),N&&n.createElement(C,{right:a===exports.NPCDialogType.TextOnly?"1rem":"10.5rem",src:c}))):null},exports.RPGUI=o,exports.RPGUIContainer=r;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),n=e(t),i=e(require("styled-components"));require("rpgui/rpgui.css"),require("rpgui/rpgui.js");var o=function(e){return n.createElement("div",{className:"rpgui-content"},e.children)},r=function(e){var t=e.width;return n.createElement(a,{width:void 0===t?"50%":t,className:"rpgui-container "+e.type},e.children)},a=i.div.withConfig({displayName:"RPGUIContainer__Container",componentId:"sc-3xvrxc-0"})(["max-width:",";"],(function(e){return e.width}));const l=require("./alice.png"),c=require("./space.gif");var u,s=function(e){var i=e.text,o=e.onFinish,r=e.onStart,a=t.useState(""),l=a[0],c=a[1];return t.useEffect((function(){var e=0,t=setInterval((function(){0===e&&r&&r(),e<i.length?(c(i.substring(0,e+1)),e++):(clearInterval(t),o&&o())}),50);return function(){clearInterval(t)}}),[i]),n.createElement(p,null,l)},p=i.p.withConfig({displayName:"DynamicText__TextContainer",componentId:"sc-acj2q5-0"})(["font-size:0.7rem !important;color:white;text-shadow:1px 1px 0px #000000;letter-spacing:1.2px;"]),m=function(e){var i=e.onClose,o=e.onEndStep,r=e.onStartStep,a=e.text.match(new RegExp(".{1,85}","g")),l=t.useState(0),c=l[0],u=l[1],p=function(e){"Space"===e.code&&((null==a?void 0:a[c+1])?u((function(e){return e+1})):i())};return t.useEffect((function(){return document.addEventListener("keydown",p),function(){return document.removeEventListener("keydown",p)}}),[c]),n.createElement(d,null,n.createElement(s,{text:(null==a?void 0:a[c])||"",onFinish:o,onStart:r}))},d=i.div.withConfig({displayName:"NPCDialogText__Container",componentId:"sc-ahseq0-0"})([""]);(u=exports.NPCDialogType||(exports.NPCDialogType={})).TextOnly="TextOnly",u.TextAndThumbnail="TextAndThumbnail",u.QuestionAndText="QuestionAndText";var x=i.div.withConfig({displayName:"NPCDialog__Container",componentId:"sc-omm2zk-0"})(["display:flex;width:100%;height:125px;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]),g=i.div.withConfig({displayName:"NPCDialog__TextContainer",componentId:"sc-omm2zk-1"})(["flex:"," 0 0;width:355px;"],(function(e){return e.flex})),f=i.div.withConfig({displayName:"NPCDialog__ThumbnailContainer",componentId:"sc-omm2zk-2"})(["flex:30% 0 0;display:flex;justify-content:flex-end;"]),h=i.img.withConfig({displayName:"NPCDialog__NPCThumbnail",componentId:"sc-omm2zk-3"})(["image-rendering:pixelated;height:128px;width:128px;"]),C=i.img.withConfig({displayName:"NPCDialog__PressSpaceIndicator",componentId:"sc-omm2zk-4"})(["position:absolute;right:",";bottom:1rem;height:20.7px;image-rendering:-webkit-optimize-contrast;"],(function(e){return e.right}));exports.DynamicText=s,exports.NPCDialog=function(e){var i=e.text,a=e.type,u=e.onClose,s=e.imagePath,p=t.useState(!1),d=p[0],y=p[1];return n.createElement(o,null,n.createElement(r,{type:"framed-golden"},n.createElement(x,null,n.createElement(g,{flex:a===exports.NPCDialogType.TextAndThumbnail?"70%":"100%"},a===exports.NPCDialogType.QuestionAndText?n.createElement("p",null,"QUESTIONS AQUI!"):n.createElement(m,{onStartStep:function(){return y(!1)},onEndStep:function(){return y(!0)},text:i,onClose:function(){u&&u()}})),a===exports.NPCDialogType.TextAndThumbnail&&n.createElement(f,null,n.createElement(h,{src:s||l}))),d&&n.createElement(C,{right:a===exports.NPCDialogType.TextOnly?"1rem":"10.5rem",src:c})))},exports.RPGUI=o,exports.RPGUIContainer=r;
 //# sourceMappingURL=long-bow.cjs.production.min.js.map

package/dist/long-bow.cjs.production.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"long-bow.cjs.production.min.js","sources":["../src/RPGUI/RPGUI.tsx","../src/RPGUI/RPGUIContainer.tsx","../src/NPCDialog/img/npcDialog/npcThumbnails/alice.png","../src/NPCDialog/img/space.gif","../src/libs/StringHelpers.ts","../src/NPCDialog/NPCDialog.tsx","../src/typography/DynamicText.tsx","../src/NPCDialog/NPCDialogText.tsx"],"sourcesContent":["import React from 'react';\nimport 'rpgui/rpgui.css';\nimport 'rpgui/rpgui.js';\n\ninterface IProps {\n  children: React.ReactNode;\n}\n\nexport const RPGUI: React.FC<IProps> = ({ children }) => {\n  return <div className=\"rpgui-content\">{children}</div>;\n};\n","import React from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n  type: 'framed' | 'framed-golden' | 'framed-golden-2' | 'framed-grey';\n  children: React.ReactNode;\n  width?: string;\n}\n\nexport const RPGUIContainer: React.FC<IProps> = ({\n  children,\n  type,\n  width = '50%',\n}) => {\n  return (\n    <Container width={width} className={`rpgui-container ${type}`}>\n      {children}\n    </Container>\n  );\n};\n\ninterface IContainerProps {\n  width: string;\n}\n\nconst Container = styled.div<IContainerProps>`\n  max-width: ${({ width }) => width};\n`;\n","const img = require('./alice.png'); export default img;","const img = require('./space.gif'); export default img;","export const chunkString = (str: string, length: number) => {\n  return str.match(new RegExp('.{1,' + length + '}', 'g'));\n};\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { RPGUI } from '../RPGUI/RPGUI';\nimport { RPGUIContainer } from '../RPGUI/RPGUIContainer';\nimport aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';\nimport pressSpaceGif from './img/space.gif';\nimport { NPCDialogText } from './NPCDialogText';\nexport enum NPCDialogType {\n  TextOnly = 'TextOnly',\n  TextAndThumbnail = 'TextAndThumbnail',\n}\n\nexport interface INPCDialogProps {\n  text: string;\n  type: NPCDialogType;\n  imagePath?: string;\n  onClose?: () => void;\n}\n\nexport const NPCDialog: React.FC<INPCDialogProps> = ({\n  text,\n  type,\n  onClose,\n  imagePath,\n}) => {\n  const [isOpen, setIsOpen] = useState<boolean>(true);\n  const [showGoNextIndicator, setShowGoNextIndicator] =\n    useState<boolean>(false);\n\n  return isOpen ? (\n    <RPGUI>\n      <RPGUIContainer type=\"framed-golden\">\n        <Container>\n          <TextContainer\n            flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}\n          >\n            <NPCDialogText\n              onStartStep={() => setShowGoNextIndicator(false)}\n              onEndStep={() => setShowGoNextIndicator(true)}\n              text={text}\n              onClose={() => {\n                if (onClose) {\n                  onClose();\n                  setIsOpen(false);\n                }\n              }}\n            />\n          </TextContainer>\n          {type === NPCDialogType.TextAndThumbnail && (\n            <ThumbnailContainer>\n              <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />\n            </ThumbnailContainer>\n          )}\n        </Container>\n        {showGoNextIndicator && (\n          <PressSpaceIndicator\n            right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}\n            src={pressSpaceGif}\n          />\n        )}\n      </RPGUIContainer>\n    </RPGUI>\n  ) : null;\n};\n\nconst Container = styled.div`\n  display: flex;\n  width: 100%;\n  height: 125px;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: flex-start;\n  position: relative;\n`;\n\ninterface ITextContainerProps {\n  flex: string;\n}\n\nconst TextContainer = styled.div<ITextContainerProps>`\n  flex: ${({ flex }) => flex} 0 0;\n  width: 355px;\n`;\n\nconst ThumbnailContainer = styled.div`\n  flex: 30% 0 0;\n  display: flex;\n  justify-content: flex-end;\n`;\n\nconst NPCThumbnail = styled.img`\n  image-rendering: pixelated;\n  height: 128px;\n  width: 128px;\n`;\n\ninterface IPressSpaceIndicatorProps {\n  right: string;\n}\n\nconst PressSpaceIndicator = styled.img<IPressSpaceIndicatorProps>`\n  position: absolute;\n  right: ${({ right }) => right};\n  bottom: 1rem;\n  height: 20.7px;\n  image-rendering: -webkit-optimize-contrast;\n`;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n  text: string;\n  onFinish?: () => void;\n  onStart?: () => void;\n}\n\nexport const DynamicText: React.FC<IProps> = ({ text, onFinish, onStart }) => {\n  const [textState, setTextState] = useState<string>('');\n\n  useEffect(() => {\n    let i = 0;\n    const interval = setInterval(() => {\n      // on every interval, show one more character\n\n      if (i === 0) {\n        if (onStart) {\n          onStart();\n        }\n      }\n\n      if (i < text.length) {\n        setTextState(text.substring(0, i + 1));\n        i++;\n      } else {\n        clearInterval(interval);\n        if (onFinish) {\n          onFinish();\n        }\n      }\n    }, 50);\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, [text]);\n\n  return <TextContainer>{textState}</TextContainer>;\n};\n\nconst TextContainer = styled.p`\n  font-size: 0.7rem !important;\n  color: white;\n  text-shadow: 1px 1px 0px #000000;\n  letter-spacing: 1.2px;\n`;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { chunkString } from '../libs/StringHelpers';\nimport { DynamicText } from '../typography/DynamicText';\n\ninterface IProps {\n  text: string;\n  onClose: () => void;\n  onEndStep: () => void;\n  onStartStep: () => void;\n}\n\nexport const NPCDialogText: React.FC<IProps> = ({\n  text,\n  onClose,\n  onEndStep,\n  onStartStep,\n}) => {\n  const textChunks = chunkString(text, 85);\n\n  const [chunkIndex, setChunkIndex] = useState<number>(0);\n\n  const onHandleSpacePress = (event: KeyboardEvent) => {\n    if (event.code === 'Space') {\n      console.log('space pressed!');\n\n      const hasNextChunk = textChunks?.[chunkIndex + 1] || false;\n\n      if (hasNextChunk) {\n        setChunkIndex(chunkIndex + 1);\n      } else {\n        // if there's no more text chunks, close the dialog\n        onClose();\n      }\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('keydown', onHandleSpacePress);\n\n    return () => document.removeEventListener('keydown', onHandleSpacePress);\n  }, [chunkIndex]);\n\n  return (\n    <Container>\n      <DynamicText\n        text={textChunks?.[chunkIndex] || ''}\n        onFinish={onEndStep}\n        onStart={onStartStep}\n      />\n    </Container>\n  );\n};\n\nconst Container = styled.div``;\n"],"names":["RPGUI","React","className","children","RPGUIContainer","width","Container","type","styled","div","img","require","NPCDialogType","DynamicText","text","onFinish","onStart","useState","textState","setTextState","useEffect","i","interval","setInterval","length","substring","clearInterval","TextContainer","p","NPCDialogText","onClose","onEndStep","onStartStep","textChunks","match","RegExp","chunkIndex","setChunkIndex","onHandleSpacePress","event","code","console","log","document","addEventListener","removeEventListener","flex","ThumbnailContainer","NPCThumbnail","PressSpaceIndicator","right","imagePath","isOpen","setIsOpen","showGoNextIndicator","setShowGoNextIndicator","TextAndThumbnail","src","aliceDefaultThumbnail","TextOnly","pressSpaceGif"],"mappings":"mQAQaA,EAA0B,mBAC9BC,uBAAKC,UAAU,mBADkBC,WCC7BC,EAAmC,oBAG9CC,aAGEJ,gBAACK,GAAUD,iBAHL,QAGmBH,+BAJ3BK,QADAJ,WAeIG,EAAYE,EAAOC,mFAAPD,qBACH,qBAAGH,SC1BlB,MAAMK,EAAMC,QAAQ,eCAdD,EAAMC,QAAQ,eCAb,ICOKC,ECECC,EAAgC,gBAAGC,IAAAA,KAAMC,IAAAA,SAAUC,IAAAA,UAC5BC,WAAiB,IAA5CC,OAAWC,cAElBC,aAAU,eACJC,EAAI,EACFC,EAAWC,aAAY,WAGjB,IAANF,GACEL,GACFA,IAIAK,EAAIP,EAAKU,QACXL,EAAaL,EAAKW,UAAU,EAAGJ,EAAI,IACnCA,MAEAK,cAAcJ,GACVP,GACFA,OAGH,WAEI,WACLW,cAAcJ,MAEf,CAACR,IAEGb,gBAAC0B,OAAeT,IAGnBS,EAAgBnB,EAAOoB,kFAAPpB,oGC9BTqB,EAAkC,gBAE7CC,IAAAA,QACAC,IAAAA,UACAC,IAAAA,YAEMC,IALNnB,KHZWoB,MAAM,IAAIC,OAAO,UAAuB,QGmBflB,WAAiB,GAA9CmB,OAAYC,OAEbC,EAAqB,SAACC,GACP,UAAfA,EAAMC,OACRC,QAAQC,IAAI,yBAEST,SAAAA,EAAaG,EAAa,IAG7CC,EAAcD,EAAa,GAG3BN,aAKNV,aAAU,kBACRuB,SAASC,iBAAiB,UAAWN,GAE9B,kBAAMK,SAASE,oBAAoB,UAAWP,MACpD,CAACF,IAGFnC,gBAACK,OACCL,gBAACY,GACCC,YAAMmB,SAAAA,EAAaG,KAAe,GAClCrB,SAAUgB,EACVf,QAASgB,MAMX1B,EAAYE,EAAOC,kFAAPD,QF/CNI,EAAAA,wBAAAA,+CAEVA,0CAwDIN,EAAYE,EAAOC,8EAAPD,kIAcZmB,EAAgBnB,EAAOC,kFAAPD,gCACZ,qBAAGsC,QAIPC,EAAqBvC,EAAOC,uFAAPD,0DAMrBwC,EAAexC,EAAOE,iFAAPF,0DAUfyC,EAAsBzC,EAAOE,wFAAPF,uGAEjB,qBAAG0C,iDAnFsC,gBAClDpC,IAAAA,KACAP,IAAAA,KACAuB,IAAAA,QACAqB,IAAAA,YAE4BlC,YAAkB,GAAvCmC,OAAQC,SAEbpC,YAAkB,GADbqC,OAAqBC,cAGrBH,EACLnD,gBAACD,OACCC,gBAACG,GAAeG,KAAK,iBACnBN,gBAACK,OACCL,gBAAC0B,GACCmB,KAAMvC,IAASK,sBAAc4C,iBAAmB,MAAQ,QAExDvD,gBAAC4B,GACCG,YAAa,kBAAMuB,GAAuB,IAC1CxB,UAAW,kBAAMwB,GAAuB,IACxCzC,KAAMA,EACNgB,QAAS,WACHA,IACFA,IACAuB,GAAU,QAKjB9C,IAASK,sBAAc4C,kBACtBvD,gBAAC8C,OACC9C,gBAAC+C,GAAaS,IAAKN,GAAaO,MAIrCJ,GACCrD,gBAACgD,GACCC,MAAO3C,IAASK,sBAAc+C,SAAW,OAAS,UAClDF,IAAKG,MAKX"}
+{"version":3,"file":"long-bow.cjs.production.min.js","sources":["../src/RPGUI/RPGUI.tsx","../src/RPGUI/RPGUIContainer.tsx","../src/NPCDialog/img/npcDialog/npcThumbnails/alice.png","../src/NPCDialog/img/space.gif","../src/libs/StringHelpers.ts","../src/NPCDialog/NPCDialog.tsx","../src/typography/DynamicText.tsx","../src/NPCDialog/NPCDialogText.tsx"],"sourcesContent":["import React from 'react';\nimport 'rpgui/rpgui.css';\nimport 'rpgui/rpgui.js';\n\ninterface IProps {\n  children: React.ReactNode;\n}\n\nexport const RPGUI: React.FC<IProps> = ({ children }) => {\n  return <div className=\"rpgui-content\">{children}</div>;\n};\n","import React from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n  type: 'framed' | 'framed-golden' | 'framed-golden-2' | 'framed-grey';\n  children: React.ReactNode;\n  width?: string;\n}\n\nexport const RPGUIContainer: React.FC<IProps> = ({\n  children,\n  type,\n  width = '50%',\n}) => {\n  return (\n    <Container width={width} className={`rpgui-container ${type}`}>\n      {children}\n    </Container>\n  );\n};\n\ninterface IContainerProps {\n  width: string;\n}\n\nconst Container = styled.div<IContainerProps>`\n  max-width: ${({ width }) => width};\n`;\n","const img = require('./alice.png'); export default img;","const img = require('./space.gif'); export default img;","export const chunkString = (str: string, length: number) => {\n  return str.match(new RegExp('.{1,' + length + '}', 'g'));\n};\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { RPGUI } from '../RPGUI/RPGUI';\nimport { RPGUIContainer } from '../RPGUI/RPGUIContainer';\nimport aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';\nimport pressSpaceGif from './img/space.gif';\nimport { NPCDialogText } from './NPCDialogText';\n\nexport enum NPCDialogType {\n  TextOnly = 'TextOnly',\n  TextAndThumbnail = 'TextAndThumbnail',\n  QuestionAndText = 'QuestionAndText',\n}\n\nexport interface INPCDialogProps {\n  text: string;\n  type: NPCDialogType;\n  imagePath?: string;\n  onClose?: () => void;\n}\n\nexport const NPCDialog: React.FC<INPCDialogProps> = ({\n  text,\n  type,\n  onClose,\n  imagePath,\n}) => {\n  const [showGoNextIndicator, setShowGoNextIndicator] =\n    useState<boolean>(false);\n\n  return (\n    <RPGUI>\n      <RPGUIContainer type=\"framed-golden\">\n        <Container>\n          <TextContainer\n            flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}\n          >\n            {type === NPCDialogType.QuestionAndText ? (\n              <p>QUESTIONS AQUI!</p>\n            ) : (\n              <NPCDialogText\n                onStartStep={() => setShowGoNextIndicator(false)}\n                onEndStep={() => setShowGoNextIndicator(true)}\n                text={text}\n                onClose={() => {\n                  if (onClose) {\n                    onClose();\n                  }\n                }}\n              />\n            )}\n          </TextContainer>\n          {type === NPCDialogType.TextAndThumbnail && (\n            <ThumbnailContainer>\n              <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />\n            </ThumbnailContainer>\n          )}\n        </Container>\n        {showGoNextIndicator && (\n          <PressSpaceIndicator\n            right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}\n            src={pressSpaceGif}\n          />\n        )}\n      </RPGUIContainer>\n    </RPGUI>\n  );\n};\n\nconst Container = styled.div`\n  display: flex;\n  width: 100%;\n  height: 125px;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: flex-start;\n  position: relative;\n`;\n\ninterface ITextContainerProps {\n  flex: string;\n}\n\nconst TextContainer = styled.div<ITextContainerProps>`\n  flex: ${({ flex }) => flex} 0 0;\n  width: 355px;\n`;\n\nconst ThumbnailContainer = styled.div`\n  flex: 30% 0 0;\n  display: flex;\n  justify-content: flex-end;\n`;\n\nconst NPCThumbnail = styled.img`\n  image-rendering: pixelated;\n  height: 128px;\n  width: 128px;\n`;\n\ninterface IPressSpaceIndicatorProps {\n  right: string;\n}\n\nconst PressSpaceIndicator = styled.img<IPressSpaceIndicatorProps>`\n  position: absolute;\n  right: ${({ right }) => right};\n  bottom: 1rem;\n  height: 20.7px;\n  image-rendering: -webkit-optimize-contrast;\n`;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n  text: string;\n  onFinish?: () => void;\n  onStart?: () => void;\n}\n\nexport const DynamicText: React.FC<IProps> = ({ text, onFinish, onStart }) => {\n  const [textState, setTextState] = useState<string>('');\n\n  useEffect(() => {\n    let i = 0;\n    const interval = setInterval(() => {\n      // on every interval, show one more character\n\n      if (i === 0) {\n        if (onStart) {\n          onStart();\n        }\n      }\n\n      if (i < text.length) {\n        setTextState(text.substring(0, i + 1));\n        i++;\n      } else {\n        clearInterval(interval);\n        if (onFinish) {\n          onFinish();\n        }\n      }\n    }, 50);\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, [text]);\n\n  return <TextContainer>{textState}</TextContainer>;\n};\n\nconst TextContainer = styled.p`\n  font-size: 0.7rem !important;\n  color: white;\n  text-shadow: 1px 1px 0px #000000;\n  letter-spacing: 1.2px;\n`;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { chunkString } from '../libs/StringHelpers';\nimport { DynamicText } from '../typography/DynamicText';\n\ninterface IProps {\n  text: string;\n  onClose: () => void;\n  onEndStep: () => void;\n  onStartStep: () => void;\n}\n\nexport const NPCDialogText: React.FC<IProps> = ({\n  text,\n  onClose,\n  onEndStep,\n  onStartStep,\n}) => {\n  const textChunks = chunkString(text, 85);\n\n  const [chunkIndex, setChunkIndex] = useState<number>(0);\n\n  const onHandleSpacePress = (event: KeyboardEvent) => {\n    if (event.code === 'Space') {\n      const hasNextChunk = textChunks?.[chunkIndex + 1] || false;\n\n      if (hasNextChunk) {\n        setChunkIndex((prev) => prev + 1);\n      } else {\n        // if there's no more text chunks, close the dialog\n        onClose();\n      }\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('keydown', onHandleSpacePress);\n\n    return () => document.removeEventListener('keydown', onHandleSpacePress);\n  }, [chunkIndex]);\n\n  return (\n    <Container>\n      <DynamicText\n        text={textChunks?.[chunkIndex] || ''}\n        onFinish={onEndStep}\n        onStart={onStartStep}\n      />\n    </Container>\n  );\n};\n\nconst Container = styled.div``;\n"],"names":["RPGUI","React","className","children","RPGUIContainer","width","Container","type","styled","div","img","require","NPCDialogType","DynamicText","text","onFinish","onStart","useState","textState","setTextState","useEffect","i","interval","setInterval","length","substring","clearInterval","TextContainer","p","NPCDialogText","onClose","onEndStep","onStartStep","textChunks","match","RegExp","chunkIndex","setChunkIndex","onHandleSpacePress","event","code","prev","document","addEventListener","removeEventListener","flex","ThumbnailContainer","NPCThumbnail","PressSpaceIndicator","right","imagePath","showGoNextIndicator","setShowGoNextIndicator","TextAndThumbnail","QuestionAndText","src","aliceDefaultThumbnail","TextOnly","pressSpaceGif"],"mappings":"mQAQaA,EAA0B,mBAC9BC,uBAAKC,UAAU,mBADkBC,WCC7BC,EAAmC,oBAG9CC,aAGEJ,gBAACK,GAAUD,iBAHL,QAGmBH,+BAJ3BK,QADAJ,WAeIG,EAAYE,EAAOC,mFAAPD,qBACH,qBAAGH,SC1BlB,MAAMK,EAAMC,QAAQ,eCAdD,EAAMC,QAAQ,eCAb,ICQKC,ECCCC,EAAgC,gBAAGC,IAAAA,KAAMC,IAAAA,SAAUC,IAAAA,UAC5BC,WAAiB,IAA5CC,OAAWC,cAElBC,aAAU,eACJC,EAAI,EACFC,EAAWC,aAAY,WAGjB,IAANF,GACEL,GACFA,IAIAK,EAAIP,EAAKU,QACXL,EAAaL,EAAKW,UAAU,EAAGJ,EAAI,IACnCA,MAEAK,cAAcJ,GACVP,GACFA,OAGH,WAEI,WACLW,cAAcJ,MAEf,CAACR,IAEGb,gBAAC0B,OAAeT,IAGnBS,EAAgBnB,EAAOoB,kFAAPpB,oGC9BTqB,EAAkC,gBAE7CC,IAAAA,QACAC,IAAAA,UACAC,IAAAA,YAEMC,IALNnB,KHZWoB,MAAM,IAAIC,OAAO,UAAuB,QGmBflB,WAAiB,GAA9CmB,OAAYC,OAEbC,EAAqB,SAACC,GACP,UAAfA,EAAMC,cACaP,SAAAA,EAAaG,EAAa,IAG7CC,GAAc,SAACI,UAASA,EAAO,KAG/BX,aAKNV,aAAU,kBACRsB,SAASC,iBAAiB,UAAWL,GAE9B,kBAAMI,SAASE,oBAAoB,UAAWN,MACpD,CAACF,IAGFnC,gBAACK,OACCL,gBAACY,GACCC,YAAMmB,SAAAA,EAAaG,KAAe,GAClCrB,SAAUgB,EACVf,QAASgB,MAMX1B,EAAYE,EAAOC,kFAAPD,QF5CNI,EAAAA,wBAAAA,+CAEVA,sCACAA,wCA0DIN,EAAYE,EAAOC,8EAAPD,kIAcZmB,EAAgBnB,EAAOC,kFAAPD,gCACZ,qBAAGqC,QAIPC,EAAqBtC,EAAOC,uFAAPD,0DAMrBuC,EAAevC,EAAOE,iFAAPF,0DAUfwC,EAAsBxC,EAAOE,wFAAPF,uGAEjB,qBAAGyC,iDArFsC,gBAClDnC,IAAAA,KACAP,IAAAA,KACAuB,IAAAA,QACAoB,IAAAA,YAGEjC,YAAkB,GADbkC,OAAqBC,cAI1BnD,gBAACD,OACCC,gBAACG,GAAeG,KAAK,iBACnBN,gBAACK,OACCL,gBAAC0B,GACCkB,KAAMtC,IAASK,sBAAcyC,iBAAmB,MAAQ,QAEvD9C,IAASK,sBAAc0C,gBACtBrD,4CAEAA,gBAAC4B,GACCG,YAAa,kBAAMoB,GAAuB,IAC1CrB,UAAW,kBAAMqB,GAAuB,IACxCtC,KAAMA,EACNgB,QAAS,WACHA,GACFA,QAMTvB,IAASK,sBAAcyC,kBACtBpD,gBAAC6C,OACC7C,gBAAC8C,GAAaQ,IAAKL,GAAaM,MAIrCL,GACClD,gBAAC+C,GACCC,MAAO1C,IAASK,sBAAc6C,SAAW,OAAS,UAClDF,IAAKG"}

package/dist/long-bow.esm.js

@@ -90,11 +90,12 @@ var NPCDialogText = function NPCDialogText(_ref) {
 
   var onHandleSpacePress = function onHandleSpacePress(event) {
     if (event.code === 'Space') {
-      console.log('space pressed!');
       var hasNextChunk = (textChunks == null ? void 0 : textChunks[chunkIndex + 1]) || false;
 
       if (hasNextChunk) {
-        setChunkIndex(chunkIndex + 1);
+        setChunkIndex(function (prev) {
+          return prev + 1;
+        });
       } else {
         // if there's no more text chunks, close the dialog
         onClose();
@@ -124,6 +125,7 @@ var NPCDialogType;
 (function (NPCDialogType) {
   NPCDialogType["TextOnly"] = "TextOnly";
   NPCDialogType["TextAndThumbnail"] = "TextAndThumbnail";
+  NPCDialogType["QuestionAndText"] = "QuestionAndText";
 })(NPCDialogType || (NPCDialogType = {}));
 
 var NPCDialog = function NPCDialog(_ref) {
@@ -132,19 +134,15 @@ var NPCDialog = function NPCDialog(_ref) {
       _onClose = _ref.onClose,
       imagePath = _ref.imagePath;
 
-  var _useState = useState(true),
-      isOpen = _useState[0],
-      setIsOpen = _useState[1];
+  var _useState = useState(false),
+      showGoNextIndicator = _useState[0],
+      setShowGoNextIndicator = _useState[1];
 
-  var _useState2 = useState(false),
-      showGoNextIndicator = _useState2[0],
-      setShowGoNextIndicator = _useState2[1];
-
-  return isOpen ? React.createElement(RPGUI, null, React.createElement(RPGUIContainer, {
+  return React.createElement(RPGUI, null, React.createElement(RPGUIContainer, {
     type: "framed-golden"
   }, React.createElement(Container$2, null, React.createElement(TextContainer$1, {
     flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
-  }, React.createElement(NPCDialogText, {
+  }, type === NPCDialogType.QuestionAndText ? React.createElement("p", null, "QUESTIONS AQUI!") : React.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
       return setShowGoNextIndicator(false);
     },
@@ -155,8 +153,6 @@ var NPCDialog = function NPCDialog(_ref) {
     onClose: function onClose() {
       if (_onClose) {
         _onClose();
-
-        setIsOpen(false);
       }
     }
   })), type === NPCDialogType.TextAndThumbnail && React.createElement(ThumbnailContainer, null, React.createElement(NPCThumbnail, {
@@ -164,7 +160,7 @@ var NPCDialog = function NPCDialog(_ref) {
   }))), showGoNextIndicator && React.createElement(PressSpaceIndicator, {
     right: type === NPCDialogType.TextOnly ? '1rem' : '10.5rem',
     src: img$1
-  }))) : null;
+  })));
 };
 var Container$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialog__Container",

package/dist/long-bow.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"long-bow.esm.js","sources":["../src/RPGUI/RPGUI.tsx","../src/RPGUI/RPGUIContainer.tsx","../src/NPCDialog/img/npcDialog/npcThumbnails/alice.png","../src/NPCDialog/img/space.gif","../src/libs/StringHelpers.ts","../src/typography/DynamicText.tsx","../src/NPCDialog/NPCDialogText.tsx","../src/NPCDialog/NPCDialog.tsx"],"sourcesContent":["import React from 'react';\nimport 'rpgui/rpgui.css';\nimport 'rpgui/rpgui.js';\n\ninterface IProps {\n  children: React.ReactNode;\n}\n\nexport const RPGUI: React.FC<IProps> = ({ children }) => {\n  return <div className=\"rpgui-content\">{children}</div>;\n};\n","import React from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n  type: 'framed' | 'framed-golden' | 'framed-golden-2' | 'framed-grey';\n  children: React.ReactNode;\n  width?: string;\n}\n\nexport const RPGUIContainer: React.FC<IProps> = ({\n  children,\n  type,\n  width = '50%',\n}) => {\n  return (\n    <Container width={width} className={`rpgui-container ${type}`}>\n      {children}\n    </Container>\n  );\n};\n\ninterface IContainerProps {\n  width: string;\n}\n\nconst Container = styled.div<IContainerProps>`\n  max-width: ${({ width }) => width};\n`;\n","const img = require('./alice.png'); export default img;","const img = require('./space.gif'); export default img;","export const chunkString = (str: string, length: number) => {\n  return str.match(new RegExp('.{1,' + length + '}', 'g'));\n};\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n  text: string;\n  onFinish?: () => void;\n  onStart?: () => void;\n}\n\nexport const DynamicText: React.FC<IProps> = ({ text, onFinish, onStart }) => {\n  const [textState, setTextState] = useState<string>('');\n\n  useEffect(() => {\n    let i = 0;\n    const interval = setInterval(() => {\n      // on every interval, show one more character\n\n      if (i === 0) {\n        if (onStart) {\n          onStart();\n        }\n      }\n\n      if (i < text.length) {\n        setTextState(text.substring(0, i + 1));\n        i++;\n      } else {\n        clearInterval(interval);\n        if (onFinish) {\n          onFinish();\n        }\n      }\n    }, 50);\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, [text]);\n\n  return <TextContainer>{textState}</TextContainer>;\n};\n\nconst TextContainer = styled.p`\n  font-size: 0.7rem !important;\n  color: white;\n  text-shadow: 1px 1px 0px #000000;\n  letter-spacing: 1.2px;\n`;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { chunkString } from '../libs/StringHelpers';\nimport { DynamicText } from '../typography/DynamicText';\n\ninterface IProps {\n  text: string;\n  onClose: () => void;\n  onEndStep: () => void;\n  onStartStep: () => void;\n}\n\nexport const NPCDialogText: React.FC<IProps> = ({\n  text,\n  onClose,\n  onEndStep,\n  onStartStep,\n}) => {\n  const textChunks = chunkString(text, 85);\n\n  const [chunkIndex, setChunkIndex] = useState<number>(0);\n\n  const onHandleSpacePress = (event: KeyboardEvent) => {\n    if (event.code === 'Space') {\n      console.log('space pressed!');\n\n      const hasNextChunk = textChunks?.[chunkIndex + 1] || false;\n\n      if (hasNextChunk) {\n        setChunkIndex(chunkIndex + 1);\n      } else {\n        // if there's no more text chunks, close the dialog\n        onClose();\n      }\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('keydown', onHandleSpacePress);\n\n    return () => document.removeEventListener('keydown', onHandleSpacePress);\n  }, [chunkIndex]);\n\n  return (\n    <Container>\n      <DynamicText\n        text={textChunks?.[chunkIndex] || ''}\n        onFinish={onEndStep}\n        onStart={onStartStep}\n      />\n    </Container>\n  );\n};\n\nconst Container = styled.div``;\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { RPGUI } from '../RPGUI/RPGUI';\nimport { RPGUIContainer } from '../RPGUI/RPGUIContainer';\nimport aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';\nimport pressSpaceGif from './img/space.gif';\nimport { NPCDialogText } from './NPCDialogText';\nexport enum NPCDialogType {\n  TextOnly = 'TextOnly',\n  TextAndThumbnail = 'TextAndThumbnail',\n}\n\nexport interface INPCDialogProps {\n  text: string;\n  type: NPCDialogType;\n  imagePath?: string;\n  onClose?: () => void;\n}\n\nexport const NPCDialog: React.FC<INPCDialogProps> = ({\n  text,\n  type,\n  onClose,\n  imagePath,\n}) => {\n  const [isOpen, setIsOpen] = useState<boolean>(true);\n  const [showGoNextIndicator, setShowGoNextIndicator] =\n    useState<boolean>(false);\n\n  return isOpen ? (\n    <RPGUI>\n      <RPGUIContainer type=\"framed-golden\">\n        <Container>\n          <TextContainer\n            flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}\n          >\n            <NPCDialogText\n              onStartStep={() => setShowGoNextIndicator(false)}\n              onEndStep={() => setShowGoNextIndicator(true)}\n              text={text}\n              onClose={() => {\n                if (onClose) {\n                  onClose();\n                  setIsOpen(false);\n                }\n              }}\n            />\n          </TextContainer>\n          {type === NPCDialogType.TextAndThumbnail && (\n            <ThumbnailContainer>\n              <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />\n            </ThumbnailContainer>\n          )}\n        </Container>\n        {showGoNextIndicator && (\n          <PressSpaceIndicator\n            right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}\n            src={pressSpaceGif}\n          />\n        )}\n      </RPGUIContainer>\n    </RPGUI>\n  ) : null;\n};\n\nconst Container = styled.div`\n  display: flex;\n  width: 100%;\n  height: 125px;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: flex-start;\n  position: relative;\n`;\n\ninterface ITextContainerProps {\n  flex: string;\n}\n\nconst TextContainer = styled.div<ITextContainerProps>`\n  flex: ${({ flex }) => flex} 0 0;\n  width: 355px;\n`;\n\nconst ThumbnailContainer = styled.div`\n  flex: 30% 0 0;\n  display: flex;\n  justify-content: flex-end;\n`;\n\nconst NPCThumbnail = styled.img`\n  image-rendering: pixelated;\n  height: 128px;\n  width: 128px;\n`;\n\ninterface IPressSpaceIndicatorProps {\n  right: string;\n}\n\nconst PressSpaceIndicator = styled.img<IPressSpaceIndicatorProps>`\n  position: absolute;\n  right: ${({ right }) => right};\n  bottom: 1rem;\n  height: 20.7px;\n  image-rendering: -webkit-optimize-contrast;\n`;\n"],"names":["RPGUI","children","React","className","RPGUIContainer","type","width","Container","styled","div","img","chunkString","str","length","match","RegExp","DynamicText","text","onFinish","onStart","useState","textState","setTextState","useEffect","i","interval","setInterval","substring","clearInterval","TextContainer","p","NPCDialogText","onClose","onEndStep","onStartStep","textChunks","chunkIndex","setChunkIndex","onHandleSpacePress","event","code","console","log","hasNextChunk","document","addEventListener","removeEventListener","NPCDialogType","NPCDialog","imagePath","isOpen","setIsOpen","showGoNextIndicator","setShowGoNextIndicator","flex","TextAndThumbnail","ThumbnailContainer","NPCThumbnail","src","aliceDefaultThumbnail","PressSpaceIndicator","right","TextOnly","pressSpaceGif"],"mappings":"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"}
+{"version":3,"file":"long-bow.esm.js","sources":["../src/RPGUI/RPGUI.tsx","../src/RPGUI/RPGUIContainer.tsx","../src/NPCDialog/img/npcDialog/npcThumbnails/alice.png","../src/NPCDialog/img/space.gif","../src/libs/StringHelpers.ts","../src/typography/DynamicText.tsx","../src/NPCDialog/NPCDialogText.tsx","../src/NPCDialog/NPCDialog.tsx"],"sourcesContent":["import React from 'react';\nimport 'rpgui/rpgui.css';\nimport 'rpgui/rpgui.js';\n\ninterface IProps {\n  children: React.ReactNode;\n}\n\nexport const RPGUI: React.FC<IProps> = ({ children }) => {\n  return <div className=\"rpgui-content\">{children}</div>;\n};\n","import React from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n  type: 'framed' | 'framed-golden' | 'framed-golden-2' | 'framed-grey';\n  children: React.ReactNode;\n  width?: string;\n}\n\nexport const RPGUIContainer: React.FC<IProps> = ({\n  children,\n  type,\n  width = '50%',\n}) => {\n  return (\n    <Container width={width} className={`rpgui-container ${type}`}>\n      {children}\n    </Container>\n  );\n};\n\ninterface IContainerProps {\n  width: string;\n}\n\nconst Container = styled.div<IContainerProps>`\n  max-width: ${({ width }) => width};\n`;\n","const img = require('./alice.png'); export default img;","const img = require('./space.gif'); export default img;","export const chunkString = (str: string, length: number) => {\n  return str.match(new RegExp('.{1,' + length + '}', 'g'));\n};\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n  text: string;\n  onFinish?: () => void;\n  onStart?: () => void;\n}\n\nexport const DynamicText: React.FC<IProps> = ({ text, onFinish, onStart }) => {\n  const [textState, setTextState] = useState<string>('');\n\n  useEffect(() => {\n    let i = 0;\n    const interval = setInterval(() => {\n      // on every interval, show one more character\n\n      if (i === 0) {\n        if (onStart) {\n          onStart();\n        }\n      }\n\n      if (i < text.length) {\n        setTextState(text.substring(0, i + 1));\n        i++;\n      } else {\n        clearInterval(interval);\n        if (onFinish) {\n          onFinish();\n        }\n      }\n    }, 50);\n\n    return () => {\n      clearInterval(interval);\n    };\n  }, [text]);\n\n  return <TextContainer>{textState}</TextContainer>;\n};\n\nconst TextContainer = styled.p`\n  font-size: 0.7rem !important;\n  color: white;\n  text-shadow: 1px 1px 0px #000000;\n  letter-spacing: 1.2px;\n`;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { chunkString } from '../libs/StringHelpers';\nimport { DynamicText } from '../typography/DynamicText';\n\ninterface IProps {\n  text: string;\n  onClose: () => void;\n  onEndStep: () => void;\n  onStartStep: () => void;\n}\n\nexport const NPCDialogText: React.FC<IProps> = ({\n  text,\n  onClose,\n  onEndStep,\n  onStartStep,\n}) => {\n  const textChunks = chunkString(text, 85);\n\n  const [chunkIndex, setChunkIndex] = useState<number>(0);\n\n  const onHandleSpacePress = (event: KeyboardEvent) => {\n    if (event.code === 'Space') {\n      const hasNextChunk = textChunks?.[chunkIndex + 1] || false;\n\n      if (hasNextChunk) {\n        setChunkIndex((prev) => prev + 1);\n      } else {\n        // if there's no more text chunks, close the dialog\n        onClose();\n      }\n    }\n  };\n\n  useEffect(() => {\n    document.addEventListener('keydown', onHandleSpacePress);\n\n    return () => document.removeEventListener('keydown', onHandleSpacePress);\n  }, [chunkIndex]);\n\n  return (\n    <Container>\n      <DynamicText\n        text={textChunks?.[chunkIndex] || ''}\n        onFinish={onEndStep}\n        onStart={onStartStep}\n      />\n    </Container>\n  );\n};\n\nconst Container = styled.div``;\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { RPGUI } from '../RPGUI/RPGUI';\nimport { RPGUIContainer } from '../RPGUI/RPGUIContainer';\nimport aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';\nimport pressSpaceGif from './img/space.gif';\nimport { NPCDialogText } from './NPCDialogText';\n\nexport enum NPCDialogType {\n  TextOnly = 'TextOnly',\n  TextAndThumbnail = 'TextAndThumbnail',\n  QuestionAndText = 'QuestionAndText',\n}\n\nexport interface INPCDialogProps {\n  text: string;\n  type: NPCDialogType;\n  imagePath?: string;\n  onClose?: () => void;\n}\n\nexport const NPCDialog: React.FC<INPCDialogProps> = ({\n  text,\n  type,\n  onClose,\n  imagePath,\n}) => {\n  const [showGoNextIndicator, setShowGoNextIndicator] =\n    useState<boolean>(false);\n\n  return (\n    <RPGUI>\n      <RPGUIContainer type=\"framed-golden\">\n        <Container>\n          <TextContainer\n            flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}\n          >\n            {type === NPCDialogType.QuestionAndText ? (\n              <p>QUESTIONS AQUI!</p>\n            ) : (\n              <NPCDialogText\n                onStartStep={() => setShowGoNextIndicator(false)}\n                onEndStep={() => setShowGoNextIndicator(true)}\n                text={text}\n                onClose={() => {\n                  if (onClose) {\n                    onClose();\n                  }\n                }}\n              />\n            )}\n          </TextContainer>\n          {type === NPCDialogType.TextAndThumbnail && (\n            <ThumbnailContainer>\n              <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />\n            </ThumbnailContainer>\n          )}\n        </Container>\n        {showGoNextIndicator && (\n          <PressSpaceIndicator\n            right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}\n            src={pressSpaceGif}\n          />\n        )}\n      </RPGUIContainer>\n    </RPGUI>\n  );\n};\n\nconst Container = styled.div`\n  display: flex;\n  width: 100%;\n  height: 125px;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: flex-start;\n  position: relative;\n`;\n\ninterface ITextContainerProps {\n  flex: string;\n}\n\nconst TextContainer = styled.div<ITextContainerProps>`\n  flex: ${({ flex }) => flex} 0 0;\n  width: 355px;\n`;\n\nconst ThumbnailContainer = styled.div`\n  flex: 30% 0 0;\n  display: flex;\n  justify-content: flex-end;\n`;\n\nconst NPCThumbnail = styled.img`\n  image-rendering: pixelated;\n  height: 128px;\n  width: 128px;\n`;\n\ninterface IPressSpaceIndicatorProps {\n  right: string;\n}\n\nconst PressSpaceIndicator = styled.img<IPressSpaceIndicatorProps>`\n  position: absolute;\n  right: ${({ right }) => right};\n  bottom: 1rem;\n  height: 20.7px;\n  image-rendering: -webkit-optimize-contrast;\n`;\n"],"names":["RPGUI","children","React","className","RPGUIContainer","type","width","Container","styled","div","img","chunkString","str","length","match","RegExp","DynamicText","text","onFinish","onStart","useState","textState","setTextState","useEffect","i","interval","setInterval","substring","clearInterval","TextContainer","p","NPCDialogText","onClose","onEndStep","onStartStep","textChunks","chunkIndex","setChunkIndex","onHandleSpacePress","event","code","hasNextChunk","prev","document","addEventListener","removeEventListener","NPCDialogType","NPCDialog","imagePath","showGoNextIndicator","setShowGoNextIndicator","flex","TextAndThumbnail","QuestionAndText","ThumbnailContainer","NPCThumbnail","src","aliceDefaultThumbnail","PressSpaceIndicator","right","TextOnly","pressSpaceGif"],"mappings":"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"}

package/package.json

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

package/src/NPCDialog/NPCDialog.tsx

@@ -5,9 +5,11 @@ import { RPGUIContainer } from '../RPGUI/RPGUIContainer';
 import aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';
 import pressSpaceGif from './img/space.gif';
 import { NPCDialogText } from './NPCDialogText';
+
 export enum NPCDialogType {
   TextOnly = 'TextOnly',
   TextAndThumbnail = 'TextAndThumbnail',
+  QuestionAndText = 'QuestionAndText',
 }
 
 export interface INPCDialogProps {
@@ -23,28 +25,30 @@ export const NPCDialog: React.FC<INPCDialogProps> = ({
   onClose,
   imagePath,
 }) => {
-  const [isOpen, setIsOpen] = useState<boolean>(true);
   const [showGoNextIndicator, setShowGoNextIndicator] =
     useState<boolean>(false);
 
-  return isOpen ? (
+  return (
     <RPGUI>
       <RPGUIContainer type="framed-golden">
         <Container>
           <TextContainer
             flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}
           >
-            <NPCDialogText
-              onStartStep={() => setShowGoNextIndicator(false)}
-              onEndStep={() => setShowGoNextIndicator(true)}
-              text={text}
-              onClose={() => {
-                if (onClose) {
-                  onClose();
-                  setIsOpen(false);
-                }
-              }}
-            />
+            {type === NPCDialogType.QuestionAndText ? (
+              <p>QUESTIONS AQUI!</p>
+            ) : (
+              <NPCDialogText
+                onStartStep={() => setShowGoNextIndicator(false)}
+                onEndStep={() => setShowGoNextIndicator(true)}
+                text={text}
+                onClose={() => {
+                  if (onClose) {
+                    onClose();
+                  }
+                }}
+              />
+            )}
           </TextContainer>
           {type === NPCDialogType.TextAndThumbnail && (
             <ThumbnailContainer>
@@ -60,7 +64,7 @@ export const NPCDialog: React.FC<INPCDialogProps> = ({
         )}
       </RPGUIContainer>
     </RPGUI>
-  ) : null;
+  );
 };
 
 const Container = styled.div`

package/src/NPCDialog/NPCDialogText.tsx

@@ -22,12 +22,10 @@ export const NPCDialogText: React.FC<IProps> = ({
 
   const onHandleSpacePress = (event: KeyboardEvent) => {
     if (event.code === 'Space') {
-      console.log('space pressed!');
-
       const hasNextChunk = textChunks?.[chunkIndex + 1] || false;
 
       if (hasNextChunk) {
-        setChunkIndex(chunkIndex + 1);
+        setChunkIndex((prev) => prev + 1);
       } else {
         // if there's no more text chunks, close the dialog
         onClose();