@rpg-engine/long-bow 0.1.10 → 0.1.14

package/dist/NPCDialog/NPCDialog.d.ts

@@ -6,7 +6,7 @@ export declare enum NPCDialogType {
 export interface INPCDialogProps {
     text: string;
     type: NPCDialogType;
-    npcKey: string;
+    imagePath?: string;
     onClose?: () => void;
 }
 export declare const NPCDialog: React.FC<INPCDialogProps>;

package/dist/hooks/useEventListener.d.ts

@@ -1 +1 @@
-export declare function useEventListener(eventName: string, handler: (e: any) => void, element?: Window & typeof globalThis): void;
+export declare const useEventListener: (type: any, handler: any, el?: Window & typeof globalThis) => void;

package/dist/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,3 @@
+import { useLayoutEffect } from 'react';
+declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+export default useIsomorphicLayoutEffect;

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

@@ -35,41 +35,31 @@ var Container = /*#__PURE__*/styled.div.withConfig({
   return width;
 });
 
-function useEventListener(eventName, handler, element) {
-  if (element === void 0) {
-    element = window;
-  }
+const img = require('./alice.png');
 
-  // Create a ref that stores handler
-  var savedHandler = React.useRef(); // Update ref.current value if handler changes.
-  // This allows our effect below to always get latest handler ...
-  // ... without us needing to pass it in effect deps array ...
-  // ... and potentially cause effect to re-run every render.
+const img$1 = require('./space.gif');
 
-  React.useEffect(function () {
-    //@ts-ignore
+var useEventListener = function useEventListener(type, handler, el) {
+  if (el === void 0) {
+    el = window;
+  }
+
+  var savedHandler = React__default.useRef();
+  React__default.useEffect(function () {
     savedHandler.current = handler;
   }, [handler]);
-  React.useEffect(function () {
-    // Make sure element supports addEventListener
-    // On
-    var isSupported = element && element.addEventListener;
-    if (!isSupported) return; // Create event listener that calls handler function stored in ref
+  React__default.useEffect(function () {
     //@ts-ignore
+    var listener = function listener(e) {
+      return savedHandler.current(e);
+    };
 
-    var eventListener = function eventListener(event) {
-      return savedHandler.current(event);
-    }; // Add event listener
-
-
-    element.addEventListener(eventName, eventListener); // Remove event listener on cleanup
-
+    el.addEventListener(type, listener);
     return function () {
-      element.removeEventListener(eventName, eventListener);
+      el.removeEventListener(type, listener);
     };
-  }, [eventName, element] // Re-run if eventName or element changes
-  );
-}
+  }, [type, el]);
+};
 
 var chunkString = function chunkString(str, length) {
   return str.match(new RegExp('.{1,' + length + '}', 'g'));
@@ -127,20 +117,20 @@ var NPCDialogText = function NPCDialogText(_ref) {
       chunkIndex = _useState[0],
       setChunkIndex = _useState[1];
 
-  useEventListener('keydown', function (event) {
+  var onHandleSpacePress = function onHandleSpacePress(event) {
     if (event.code === 'Space') {
       if (textChunks != null && textChunks[chunkIndex + 1]) {
-        setChunkIndex(function (prev) {
-          return prev + 1;
-        });
+        setChunkIndex(chunkIndex + 1);
       } else {
         // if there's no more text chunks, close the dialog
         onClose();
       }
     }
-  });
+  };
+
+  useEventListener('keydown', onHandleSpacePress);
   return React__default.createElement(Container$1, null, React__default.createElement(DynamicText, {
-    text: textChunks == null ? void 0 : textChunks[chunkIndex],
+    text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: onEndStep,
     onStart: onStartStep
   }));
@@ -158,8 +148,8 @@ var Container$1 = /*#__PURE__*/styled.div.withConfig({
 var NPCDialog = function NPCDialog(_ref) {
   var text = _ref.text,
       type = _ref.type,
-      npcKey = _ref.npcKey,
-      _onClose = _ref.onClose;
+      _onClose = _ref.onClose,
+      imagePath = _ref.imagePath;
 
   var _useState = React.useState(true),
       isOpen = _useState[0],
@@ -189,10 +179,10 @@ var NPCDialog = function NPCDialog(_ref) {
       }
     }
   })), type === exports.NPCDialogType.TextAndThumbnail && React__default.createElement(ThumbnailContainer, null, React__default.createElement(NPCThumbnail, {
-    src: "/npcDialog/npcThumbnails/" + npcKey + ".png"
+    src: imagePath || img
   }))), showGoNextIndicator && React__default.createElement(PressSpaceIndicator, {
     right: type === exports.NPCDialogType.TextOnly ? '1rem' : '10.5rem',
-    src: "/space.gif"
+    src: img$1
   }))) : null;
 };
 var Container$2 = /*#__PURE__*/styled.div.withConfig({

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/hooks/useEventListener.ts","../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","import { useEffect, useRef } from 'react';\n\nexport function useEventListener(\n  eventName: string,\n  handler: (e: any) => void,\n  element = window\n) {\n  // Create a ref that stores handler\n  const savedHandler = useRef();\n  // Update ref.current value if handler changes.\n  // This allows our effect below to always get latest handler ...\n  // ... without us needing to pass it in effect deps array ...\n  // ... and potentially cause effect to re-run every render.\n  useEffect(() => {\n    //@ts-ignore\n    savedHandler.current = handler;\n  }, [handler]);\n  useEffect(\n    () => {\n      // Make sure element supports addEventListener\n      // On\n      const isSupported = element && element.addEventListener;\n      if (!isSupported) return;\n      // Create event listener that calls handler function stored in ref\n      //@ts-ignore\n      const eventListener = (event: any) => savedHandler.current(event);\n      // Add event listener\n      element.addEventListener(eventName, eventListener);\n      // Remove event listener on cleanup\n      return () => {\n        element.removeEventListener(eventName, eventListener);\n      };\n    },\n    [eventName, element] // Re-run if eventName or element changes\n  );\n}\n","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, { useState } from 'react';\nimport styled from 'styled-components';\nimport { useEventListener } from '../hooks/useEventListener';\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  useEventListener('keydown', (event: KeyboardEvent) => {\n    if (event.code === 'Space') {\n      if (textChunks?.[chunkIndex + 1]) {\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  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 { NPCDialogText } from './NPCDialogText';\n\nexport enum NPCDialogType {\n  TextOnly = 'TextOnly',\n  TextAndThumbnail = 'TextAndThumbnail',\n}\n\nexport interface INPCDialogProps {\n  text: string;\n  type: NPCDialogType;\n  npcKey: string;\n  onClose?: () => void;\n}\n\nexport const NPCDialog: React.FC<INPCDialogProps> = ({\n  text,\n  type,\n  npcKey,\n  onClose,\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={`/npcDialog/npcThumbnails/${npcKey}.png`} />\n            </ThumbnailContainer>\n          )}\n        </Container>\n        {showGoNextIndicator && (\n          <PressSpaceIndicator\n            right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}\n            src=\"/space.gif\"\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","useEventListener","eventName","handler","element","window","savedHandler","useRef","useEffect","current","isSupported","addEventListener","eventListener","event","removeEventListener","chunkString","str","length","match","RegExp","DynamicText","text","onFinish","onStart","useState","textState","setTextState","i","interval","setInterval","substring","clearInterval","TextContainer","p","NPCDialogText","onClose","onEndStep","onStartStep","textChunks","chunkIndex","setChunkIndex","code","prev","NPCDialogType","NPCDialog","npcKey","isOpen","setIsOpen","showGoNextIndicator","setShowGoNextIndicator","flex","TextAndThumbnail","ThumbnailContainer","NPCThumbnail","src","PressSpaceIndicator","right","TextOnly","img"],"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/hooks/useEventListener.ts","../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;","import React from 'react';\n\n//@ts-ignore\nexport const useEventListener = (type, handler, el = window) => {\n  const savedHandler = React.useRef();\n\n  React.useEffect(() => {\n    savedHandler.current = handler;\n  }, [handler]);\n\n  React.useEffect(() => {\n    //@ts-ignore\n    const listener = (e) => savedHandler.current(e);\n\n    el.addEventListener(type, listener);\n\n    return () => {\n      el.removeEventListener(type, listener);\n    };\n  }, [type, el]);\n};\n","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, { useState } from 'react';\nimport styled from 'styled-components';\nimport { useEventListener } from '../hooks/useEventListener';\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      if (textChunks?.[chunkIndex + 1]) {\n        setChunkIndex(chunkIndex + 1);\n      } else {\n        // if there's no more text chunks, close the dialog\n        onClose();\n      }\n    }\n  };\n\n  useEventListener('keydown', onHandleSpacePress);\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","useEventListener","handler","el","window","savedHandler","useRef","useEffect","current","listener","e","addEventListener","removeEventListener","chunkString","str","length","match","RegExp","DynamicText","text","onFinish","onStart","useState","textState","setTextState","i","interval","setInterval","substring","clearInterval","TextContainer","p","NPCDialogText","onClose","onEndStep","onStartStep","textChunks","chunkIndex","setChunkIndex","onHandleSpacePress","event","code","NPCDialogType","NPCDialog","imagePath","isOpen","setIsOpen","showGoNextIndicator","setShowGoNextIndicator","flex","TextAndThumbnail","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 r,o=function(e){return n.createElement("div",{className:"rpgui-content"},e.children)},a=function(e){var t=e.width;return n.createElement(l,{width:void 0===t?"50%":t,className:"rpgui-container "+e.type},e.children)},l=i.div.withConfig({displayName:"RPGUIContainer__Container",componentId:"sc-3xvrxc-0"})(["max-width:",";"],(function(e){return e.width})),c=function(e){var i=e.text,r=e.onFinish,o=e.onStart,a=t.useState(""),l=a[0],c=a[1];return t.useEffect((function(){var e=0,t=setInterval((function(){0===e&&o&&o(),e<i.length?(c(i.substring(0,e+1)),e++):(clearInterval(t),r&&r())}),50);return function(){clearInterval(t)}}),[i]),n.createElement(u,null,l)},u=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;"]),s=function(e){var i=e.onClose,r=e.onEndStep,o=e.onStartStep,a=e.text.match(new RegExp(".{1,85}","g")),l=t.useState(0),u=l[0],s=l[1];return function(e,n,i){void 0===i&&(i=window);var r=t.useRef();t.useEffect((function(){r.current=n}),[n]),t.useEffect((function(){if(i&&i.addEventListener){var e=function(e){return r.current(e)};return i.addEventListener("keydown",e),function(){i.removeEventListener("keydown",e)}}}),["keydown",i])}(0,(function(e){"Space"===e.code&&(null!=a&&a[u+1]?s((function(e){return e+1})):i())})),n.createElement(p,null,n.createElement(c,{text:null==a?void 0:a[u],onFinish:r,onStart:o}))},p=i.div.withConfig({displayName:"NPCDialogText__Container",componentId:"sc-ahseq0-0"})([""]);(r=exports.NPCDialogType||(exports.NPCDialogType={})).TextOnly="TextOnly",r.TextAndThumbnail="TextAndThumbnail";var m=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;"]),d=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;"]),x=i.img.withConfig({displayName:"NPCDialog__NPCThumbnail",componentId:"sc-omm2zk-3"})(["image-rendering:pixelated;height:128px;width:128px;"]),g=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=c,exports.NPCDialog=function(e){var i=e.text,r=e.type,l=e.npcKey,c=e.onClose,u=t.useState(!0),p=u[0],h=u[1],y=t.useState(!1),C=y[0],v=y[1];return p?n.createElement(o,null,n.createElement(a,{type:"framed-golden"},n.createElement(m,null,n.createElement(d,{flex:r===exports.NPCDialogType.TextAndThumbnail?"70%":"100%"},n.createElement(s,{onStartStep:function(){return v(!1)},onEndStep:function(){return v(!0)},text:i,onClose:function(){c&&(c(),h(!1))}})),r===exports.NPCDialogType.TextAndThumbnail&&n.createElement(f,null,n.createElement(x,{src:"/npcDialog/npcThumbnails/"+l+".png"}))),C&&n.createElement(g,{right:r===exports.NPCDialogType.TextOnly?"1rem":"10.5rem",src:"/space.gif"}))):null},exports.RPGUI=o,exports.RPGUIContainer=a;
+"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 r=function(e){return n.createElement("div",{className:"rpgui-content"},e.children)},o=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,r=e.onFinish,o=e.onStart,a=t.useState(""),l=a[0],c=a[1];return t.useEffect((function(){var e=0,t=setInterval((function(){0===e&&o&&o(),e<i.length?(c(i.substring(0,e+1)),e++):(clearInterval(t),r&&r())}),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,r=e.onEndStep,o=e.onStartStep,a=e.text.match(new RegExp(".{1,85}","g")),l=t.useState(0),c=l[0],u=l[1];return function(e,t,i){void 0===i&&(i=window);var r=n.useRef();n.useEffect((function(){r.current=t}),[t]),n.useEffect((function(){var e=function(e){return r.current(e)};return i.addEventListener("keydown",e),function(){i.removeEventListener("keydown",e)}}),["keydown",i])}(0,(function(e){"Space"===e.code&&(null!=a&&a[c+1]?u(c+1):i())})),n.createElement(d,null,n.createElement(s,{text:(null==a?void 0:a[c])||"",onFinish:r,onStart:o}))},d=i.div.withConfig({displayName:"NPCDialogText__Container",componentId:"sc-ahseq0-0"})([""]);(u=exports.NPCDialogType||(exports.NPCDialogType={})).TextOnly="TextOnly",u.TextAndThumbnail="TextAndThumbnail";var f=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;"]),x=i.div.withConfig({displayName:"NPCDialog__TextContainer",componentId:"sc-omm2zk-1"})(["flex:"," 0 0;width:355px;"],(function(e){return e.flex})),g=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(!0),d=p[0],y=p[1],v=t.useState(!1),w=v[0],N=v[1];return d?n.createElement(r,null,n.createElement(o,{type:"framed-golden"},n.createElement(f,null,n.createElement(x,{flex:a===exports.NPCDialogType.TextAndThumbnail?"70%":"100%"},n.createElement(m,{onStartStep:function(){return N(!1)},onEndStep:function(){return N(!0)},text:i,onClose:function(){u&&(u(),y(!1))}})),a===exports.NPCDialogType.TextAndThumbnail&&n.createElement(g,null,n.createElement(h,{src:s||l}))),w&&n.createElement(C,{right:a===exports.NPCDialogType.TextOnly?"1rem":"10.5rem",src:c}))):null},exports.RPGUI=r,exports.RPGUIContainer=o;
 //# 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/NPCDialog/NPCDialog.tsx","../src/RPGUI/RPGUI.tsx","../src/RPGUI/RPGUIContainer.tsx","../src/typography/DynamicText.tsx","../src/NPCDialog/NPCDialogText.tsx","../src/libs/StringHelpers.ts","../src/hooks/useEventListener.ts"],"sourcesContent":["import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { RPGUI } from '../RPGUI/RPGUI';\nimport { RPGUIContainer } from '../RPGUI/RPGUIContainer';\nimport { NPCDialogText } from './NPCDialogText';\n\nexport enum NPCDialogType {\n  TextOnly = 'TextOnly',\n  TextAndThumbnail = 'TextAndThumbnail',\n}\n\nexport interface INPCDialogProps {\n  text: string;\n  type: NPCDialogType;\n  npcKey: string;\n  onClose?: () => void;\n}\n\nexport const NPCDialog: React.FC<INPCDialogProps> = ({\n  text,\n  type,\n  npcKey,\n  onClose,\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={`/npcDialog/npcThumbnails/${npcKey}.png`} />\n            </ThumbnailContainer>\n          )}\n        </Container>\n        {showGoNextIndicator && (\n          <PressSpaceIndicator\n            right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}\n            src=\"/space.gif\"\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 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","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, { useState } from 'react';\nimport styled from 'styled-components';\nimport { useEventListener } from '../hooks/useEventListener';\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  useEventListener('keydown', (event: KeyboardEvent) => {\n    if (event.code === 'Space') {\n      if (textChunks?.[chunkIndex + 1]) {\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  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","export const chunkString = (str: string, length: number) => {\n  return str.match(new RegExp('.{1,' + length + '}', 'g'));\n};\n","import { useEffect, useRef } from 'react';\n\nexport function useEventListener(\n  eventName: string,\n  handler: (e: any) => void,\n  element = window\n) {\n  // Create a ref that stores handler\n  const savedHandler = useRef();\n  // Update ref.current value if handler changes.\n  // This allows our effect below to always get latest handler ...\n  // ... without us needing to pass it in effect deps array ...\n  // ... and potentially cause effect to re-run every render.\n  useEffect(() => {\n    //@ts-ignore\n    savedHandler.current = handler;\n  }, [handler]);\n  useEffect(\n    () => {\n      // Make sure element supports addEventListener\n      // On\n      const isSupported = element && element.addEventListener;\n      if (!isSupported) return;\n      // Create event listener that calls handler function stored in ref\n      //@ts-ignore\n      const eventListener = (event: any) => savedHandler.current(event);\n      // Add event listener\n      element.addEventListener(eventName, eventListener);\n      // Remove event listener on cleanup\n      return () => {\n        element.removeEventListener(eventName, eventListener);\n      };\n    },\n    [eventName, element] // Re-run if eventName or element changes\n  );\n}\n"],"names":["NPCDialogType","RPGUI","React","className","children","RPGUIContainer","width","Container","type","styled","div","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","eventName","handler","element","window","savedHandler","useRef","current","addEventListener","eventListener","event","removeEventListener","useEventListener","code","prev","flex","ThumbnailContainer","NPCThumbnail","img","PressSpaceIndicator","right","npcKey","isOpen","setIsOpen","showGoNextIndicator","setShowGoNextIndicator","TextAndThumbnail","src","TextOnly"],"mappings":"mQAMYA,ECECC,EAA0B,mBAC9BC,uBAAKC,UAAU,mBADkBC,WCC7BC,EAAmC,oBAG9CC,aAGEJ,gBAACK,GAAUD,iBAHL,QAGmBH,+BAJ3BK,QADAJ,WAeIG,EAAYE,EAAOC,mFAAPD,qBACH,qBAAGH,SCjBLK,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,IAEGV,gBAACuB,OAAeT,IAGnBS,EAAgBhB,EAAOiB,kFAAPjB,oGC7BTkB,EAAkC,gBAE7CC,IAAAA,QACAC,IAAAA,UACAC,IAAAA,YAEMC,IALNnB,KCbWoB,MAAM,IAAIC,OAAO,UAAuB,QDoBflB,WAAiB,GAA9CmB,OAAYC,uBElBnBC,EACAC,EACAC,YAAAA,IAAAA,EAAUC,YAGJC,EAAeC,WAKrBvB,aAAU,WAERsB,EAAaE,QAAUL,IACtB,CAACA,IACJnB,aACE,cAGsBoB,GAAWA,EAAQK,sBAIjCC,EAAgB,SAACC,UAAeL,EAAaE,QAAQG,WAE3DP,EAAQK,iBFJK,UEIuBC,GAE7B,WACLN,EAAQQ,oBFPG,UEO4BF,OAG3C,CFVe,UEUHN,IFVdS,CAAiB,GAAW,SAACF,GACR,UAAfA,EAAMG,aACJjB,GAAAA,EAAaG,EAAa,GAC5BC,GAAc,SAACc,UAASA,EAAO,KAG/BrB,QAMJ1B,gBAACK,OACCL,gBAACS,GACCC,WAAMmB,SAAAA,EAAaG,GACnBrB,SAAUgB,EACVf,QAASgB,MAMXvB,EAAYE,EAAOC,kFAAPD,QJvCNT,EAAAA,wBAAAA,+CAEVA,0CAwDIO,EAAYE,EAAOC,8EAAPD,kIAcZgB,EAAgBhB,EAAOC,kFAAPD,gCACZ,qBAAGyC,QAIPC,EAAqB1C,EAAOC,uFAAPD,0DAMrB2C,EAAe3C,EAAO4C,iFAAP5C,0DAUf6C,EAAsB7C,EAAO4C,wFAAP5C,uGAEjB,qBAAG8C,iDAnFsC,gBAClD3C,IAAAA,KACAJ,IAAAA,KACAgD,IAAAA,OACA5B,IAAAA,UAE4Bb,YAAkB,GAAvC0C,OAAQC,SAEb3C,YAAkB,GADb4C,OAAqBC,cAGrBH,EACLvD,gBAACD,OACCC,gBAACG,GAAeG,KAAK,iBACnBN,gBAACK,OACCL,gBAACuB,GACCyB,KAAM1C,IAASR,sBAAc6D,iBAAmB,MAAQ,QAExD3D,gBAACyB,GACCG,YAAa,kBAAM8B,GAAuB,IAC1C/B,UAAW,kBAAM+B,GAAuB,IACxChD,KAAMA,EACNgB,QAAS,WACHA,IACFA,IACA8B,GAAU,QAKjBlD,IAASR,sBAAc6D,kBACtB3D,gBAACiD,OACCjD,gBAACkD,GAAaU,gCAAiCN,aAIpDG,GACCzD,gBAACoD,GACCC,MAAO/C,IAASR,sBAAc+D,SAAW,OAAS,UAClDD,IAAI,iBAKV"}
+{"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/hooks/useEventListener.ts","../src/NPCDialog/NPCDialog.tsx","../src/typography/DynamicText.tsx","../src/NPCDialog/NPCDialogText.tsx","../src/libs/StringHelpers.ts"],"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;","import React from 'react';\n\n//@ts-ignore\nexport const useEventListener = (type, handler, el = window) => {\n  const savedHandler = React.useRef();\n\n  React.useEffect(() => {\n    savedHandler.current = handler;\n  }, [handler]);\n\n  React.useEffect(() => {\n    //@ts-ignore\n    const listener = (e) => savedHandler.current(e);\n\n    el.addEventListener(type, listener);\n\n    return () => {\n      el.removeEventListener(type, listener);\n    };\n  }, [type, el]);\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, { useState } from 'react';\nimport styled from 'styled-components';\nimport { useEventListener } from '../hooks/useEventListener';\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      if (textChunks?.[chunkIndex + 1]) {\n        setChunkIndex(chunkIndex + 1);\n      } else {\n        // if there's no more text chunks, close the dialog\n        onClose();\n      }\n    }\n  };\n\n  useEventListener('keydown', onHandleSpacePress);\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","export const chunkString = (str: string, length: number) => {\n  return str.match(new RegExp('.{1,' + length + '}', 'g'));\n};\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","handler","el","window","savedHandler","useRef","current","listener","e","addEventListener","removeEventListener","useEventListener","event","code","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,eCGb,ICIKC,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,oGC7BTqB,EAAkC,gBAE7CC,IAAAA,QACAC,IAAAA,UACAC,IAAAA,YAEMC,IALNnB,KCbWoB,MAAM,IAAIC,OAAO,UAAuB,QDoBflB,WAAiB,GAA9CmB,OAAYC,cHlBW,SAAC9B,EAAM+B,EAASC,YAAAA,IAAAA,EAAKC,YAC7CC,EAAexC,EAAMyC,SAE3BzC,EAAMmB,WAAU,WACdqB,EAAaE,QAAUL,IACtB,CAACA,IAEJrC,EAAMmB,WAAU,eAERwB,EAAW,SAACC,UAAMJ,EAAaE,QAAQE,WAE7CN,EAAGO,iBGoBY,UHpBWF,GAEnB,WACLL,EAAGQ,oBGiBU,UHjBgBH,MAE9B,CGec,UHfPL,IGeVS,CAAiB,GAXU,SAACC,GACP,UAAfA,EAAMC,aACJjB,GAAAA,EAAaG,EAAa,GAC5BC,EAAcD,EAAa,GAG3BN,QAQJ7B,gBAACK,OACCL,gBAACY,GACCC,YAAMmB,SAAAA,EAAaG,KAAe,GAClCrB,SAAUgB,EACVf,QAASgB,MAMX1B,EAAYE,EAAOC,kFAAPD,QFxCNI,EAAAA,wBAAAA,+CAEVA,0CAwDIN,EAAYE,EAAOC,8EAAPD,kIAcZmB,EAAgBnB,EAAOC,kFAAPD,gCACZ,qBAAG2C,QAIPC,EAAqB5C,EAAOC,uFAAPD,0DAMrB6C,EAAe7C,EAAOE,iFAAPF,0DAUf8C,EAAsB9C,EAAOE,wFAAPF,uGAEjB,qBAAG+C,iDAnFsC,gBAClDzC,IAAAA,KACAP,IAAAA,KACAuB,IAAAA,QACA0B,IAAAA,YAE4BvC,YAAkB,GAAvCwC,OAAQC,SAEbzC,YAAkB,GADb0C,OAAqBC,cAGrBH,EACLxD,gBAACD,OACCC,gBAACG,GAAeG,KAAK,iBACnBN,gBAACK,OACCL,gBAAC0B,GACCwB,KAAM5C,IAASK,sBAAciD,iBAAmB,MAAQ,QAExD5D,gBAAC4B,GACCG,YAAa,kBAAM4B,GAAuB,IAC1C7B,UAAW,kBAAM6B,GAAuB,IACxC9C,KAAMA,EACNgB,QAAS,WACHA,IACFA,IACA4B,GAAU,QAKjBnD,IAASK,sBAAciD,kBACtB5D,gBAACmD,OACCnD,gBAACoD,GAAaS,IAAKN,GAAaO,MAIrCJ,GACC1D,gBAACqD,GACCC,MAAOhD,IAASK,sBAAcoD,SAAW,OAAS,UAClDF,IAAKG,MAKX"}

package/dist/long-bow.esm.js

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import 'rpgui/rpgui.css';
 import 'rpgui/rpgui.js';
@@ -28,41 +28,31 @@ var Container = /*#__PURE__*/styled.div.withConfig({
   return width;
 });
 
-function useEventListener(eventName, handler, element) {
-  if (element === void 0) {
-    element = window;
-  }
+const img = require('./alice.png');
 
-  // Create a ref that stores handler
-  var savedHandler = useRef(); // Update ref.current value if handler changes.
-  // This allows our effect below to always get latest handler ...
-  // ... without us needing to pass it in effect deps array ...
-  // ... and potentially cause effect to re-run every render.
+const img$1 = require('./space.gif');
 
-  useEffect(function () {
-    //@ts-ignore
+var useEventListener = function useEventListener(type, handler, el) {
+  if (el === void 0) {
+    el = window;
+  }
+
+  var savedHandler = React.useRef();
+  React.useEffect(function () {
     savedHandler.current = handler;
   }, [handler]);
-  useEffect(function () {
-    // Make sure element supports addEventListener
-    // On
-    var isSupported = element && element.addEventListener;
-    if (!isSupported) return; // Create event listener that calls handler function stored in ref
+  React.useEffect(function () {
     //@ts-ignore
+    var listener = function listener(e) {
+      return savedHandler.current(e);
+    };
 
-    var eventListener = function eventListener(event) {
-      return savedHandler.current(event);
-    }; // Add event listener
-
-
-    element.addEventListener(eventName, eventListener); // Remove event listener on cleanup
-
+    el.addEventListener(type, listener);
     return function () {
-      element.removeEventListener(eventName, eventListener);
+      el.removeEventListener(type, listener);
     };
-  }, [eventName, element] // Re-run if eventName or element changes
-  );
-}
+  }, [type, el]);
+};
 
 var chunkString = function chunkString(str, length) {
   return str.match(new RegExp('.{1,' + length + '}', 'g'));
@@ -120,20 +110,20 @@ var NPCDialogText = function NPCDialogText(_ref) {
       chunkIndex = _useState[0],
       setChunkIndex = _useState[1];
 
-  useEventListener('keydown', function (event) {
+  var onHandleSpacePress = function onHandleSpacePress(event) {
     if (event.code === 'Space') {
       if (textChunks != null && textChunks[chunkIndex + 1]) {
-        setChunkIndex(function (prev) {
-          return prev + 1;
-        });
+        setChunkIndex(chunkIndex + 1);
       } else {
         // if there's no more text chunks, close the dialog
         onClose();
       }
     }
-  });
+  };
+
+  useEventListener('keydown', onHandleSpacePress);
   return React.createElement(Container$1, null, React.createElement(DynamicText, {
-    text: textChunks == null ? void 0 : textChunks[chunkIndex],
+    text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: onEndStep,
     onStart: onStartStep
   }));
@@ -153,8 +143,8 @@ var NPCDialogType;
 var NPCDialog = function NPCDialog(_ref) {
   var text = _ref.text,
       type = _ref.type,
-      npcKey = _ref.npcKey,
-      _onClose = _ref.onClose;
+      _onClose = _ref.onClose,
+      imagePath = _ref.imagePath;
 
   var _useState = useState(true),
       isOpen = _useState[0],
@@ -184,10 +174,10 @@ var NPCDialog = function NPCDialog(_ref) {
       }
     }
   })), type === NPCDialogType.TextAndThumbnail && React.createElement(ThumbnailContainer, null, React.createElement(NPCThumbnail, {
-    src: "/npcDialog/npcThumbnails/" + npcKey + ".png"
+    src: imagePath || img
   }))), showGoNextIndicator && React.createElement(PressSpaceIndicator, {
     right: type === NPCDialogType.TextOnly ? '1rem' : '10.5rem',
-    src: "/space.gif"
+    src: img$1
   }))) : null;
 };
 var Container$2 = /*#__PURE__*/styled.div.withConfig({

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/hooks/useEventListener.ts","../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","import { useEffect, useRef } from 'react';\n\nexport function useEventListener(\n  eventName: string,\n  handler: (e: any) => void,\n  element = window\n) {\n  // Create a ref that stores handler\n  const savedHandler = useRef();\n  // Update ref.current value if handler changes.\n  // This allows our effect below to always get latest handler ...\n  // ... without us needing to pass it in effect deps array ...\n  // ... and potentially cause effect to re-run every render.\n  useEffect(() => {\n    //@ts-ignore\n    savedHandler.current = handler;\n  }, [handler]);\n  useEffect(\n    () => {\n      // Make sure element supports addEventListener\n      // On\n      const isSupported = element && element.addEventListener;\n      if (!isSupported) return;\n      // Create event listener that calls handler function stored in ref\n      //@ts-ignore\n      const eventListener = (event: any) => savedHandler.current(event);\n      // Add event listener\n      element.addEventListener(eventName, eventListener);\n      // Remove event listener on cleanup\n      return () => {\n        element.removeEventListener(eventName, eventListener);\n      };\n    },\n    [eventName, element] // Re-run if eventName or element changes\n  );\n}\n","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, { useState } from 'react';\nimport styled from 'styled-components';\nimport { useEventListener } from '../hooks/useEventListener';\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  useEventListener('keydown', (event: KeyboardEvent) => {\n    if (event.code === 'Space') {\n      if (textChunks?.[chunkIndex + 1]) {\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  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 { NPCDialogText } from './NPCDialogText';\n\nexport enum NPCDialogType {\n  TextOnly = 'TextOnly',\n  TextAndThumbnail = 'TextAndThumbnail',\n}\n\nexport interface INPCDialogProps {\n  text: string;\n  type: NPCDialogType;\n  npcKey: string;\n  onClose?: () => void;\n}\n\nexport const NPCDialog: React.FC<INPCDialogProps> = ({\n  text,\n  type,\n  npcKey,\n  onClose,\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={`/npcDialog/npcThumbnails/${npcKey}.png`} />\n            </ThumbnailContainer>\n          )}\n        </Container>\n        {showGoNextIndicator && (\n          <PressSpaceIndicator\n            right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}\n            src=\"/space.gif\"\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","useEventListener","eventName","handler","element","window","savedHandler","useRef","useEffect","current","isSupported","addEventListener","eventListener","event","removeEventListener","chunkString","str","length","match","RegExp","DynamicText","text","onFinish","onStart","useState","textState","setTextState","i","interval","setInterval","substring","clearInterval","TextContainer","p","NPCDialogText","onClose","onEndStep","onStartStep","textChunks","chunkIndex","setChunkIndex","code","prev","NPCDialogType","NPCDialog","npcKey","isOpen","setIsOpen","showGoNextIndicator","setShowGoNextIndicator","flex","TextAndThumbnail","ThumbnailContainer","NPCThumbnail","src","PressSpaceIndicator","right","TextOnly","img"],"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/hooks/useEventListener.ts","../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;","import React from 'react';\n\n//@ts-ignore\nexport const useEventListener = (type, handler, el = window) => {\n  const savedHandler = React.useRef();\n\n  React.useEffect(() => {\n    savedHandler.current = handler;\n  }, [handler]);\n\n  React.useEffect(() => {\n    //@ts-ignore\n    const listener = (e) => savedHandler.current(e);\n\n    el.addEventListener(type, listener);\n\n    return () => {\n      el.removeEventListener(type, listener);\n    };\n  }, [type, el]);\n};\n","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, { useState } from 'react';\nimport styled from 'styled-components';\nimport { useEventListener } from '../hooks/useEventListener';\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      if (textChunks?.[chunkIndex + 1]) {\n        setChunkIndex(chunkIndex + 1);\n      } else {\n        // if there's no more text chunks, close the dialog\n        onClose();\n      }\n    }\n  };\n\n  useEventListener('keydown', onHandleSpacePress);\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","useEventListener","handler","el","window","savedHandler","useRef","useEffect","current","listener","e","addEventListener","removeEventListener","chunkString","str","length","match","RegExp","DynamicText","text","onFinish","onStart","useState","textState","setTextState","i","interval","setInterval","substring","clearInterval","TextContainer","p","NPCDialogText","onClose","onEndStep","onStartStep","textChunks","chunkIndex","setChunkIndex","onHandleSpacePress","event","code","NPCDialogType","NPCDialog","imagePath","isOpen","setIsOpen","showGoNextIndicator","setShowGoNextIndicator","flex","TextAndThumbnail","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.10",
+  "version": "0.1.14",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -19,6 +19,7 @@
     "node": ">=10"
   },
   "scripts": {
+    "dev": "start-storybook -p 6006",
     "start": "tsdx watch",
     "build": "tsdx build",
     "test": "tsdx test --passWithNoTests",
@@ -27,7 +28,8 @@
     "size": "size-limit",
     "analyze": "size-limit --why",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "configure": "./environment/download-credentials.sh"
   },
   "peerDependencies": {
     "react": ">=16"
@@ -79,6 +81,8 @@
     "typescript": "^4.6.2"
   },
   "dependencies": {
+    "@rollup/plugin-image": "^2.1.1",
+    "rollup-plugin-image-files": "^1.4.2",
     "rpgui": "^1.0.3"
   }
 }

package/src/NPCDialog/NPCDialog.tsx

@@ -2,8 +2,9 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import { RPGUI } from '../RPGUI/RPGUI';
 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',
@@ -12,15 +13,15 @@ export enum NPCDialogType {
 export interface INPCDialogProps {
   text: string;
   type: NPCDialogType;
-  npcKey: string;
+  imagePath?: string;
   onClose?: () => void;
 }
 
 export const NPCDialog: React.FC<INPCDialogProps> = ({
   text,
   type,
-  npcKey,
   onClose,
+  imagePath,
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(true);
   const [showGoNextIndicator, setShowGoNextIndicator] =
@@ -47,14 +48,14 @@ export const NPCDialog: React.FC<INPCDialogProps> = ({
           </TextContainer>
           {type === NPCDialogType.TextAndThumbnail && (
             <ThumbnailContainer>
-              <NPCThumbnail src={`/npcDialog/npcThumbnails/${npcKey}.png`} />
+              <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />
             </ThumbnailContainer>
           )}
         </Container>
         {showGoNextIndicator && (
           <PressSpaceIndicator
             right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}
-            src="/space.gif"
+            src={pressSpaceGif}
           />
         )}
       </RPGUIContainer>

package/src/NPCDialog/NPCDialogText.tsx

@@ -21,21 +21,23 @@ export const NPCDialogText: React.FC<IProps> = ({
 
   const [chunkIndex, setChunkIndex] = useState<number>(0);
 
-  useEventListener('keydown', (event: KeyboardEvent) => {
+  const onHandleSpacePress = (event: KeyboardEvent) => {
     if (event.code === 'Space') {
       if (textChunks?.[chunkIndex + 1]) {
-        setChunkIndex((prev) => prev + 1);
+        setChunkIndex(chunkIndex + 1);
       } else {
         // if there's no more text chunks, close the dialog
         onClose();
       }
     }
-  });
+  };
+
+  useEventListener('keydown', onHandleSpacePress);
 
   return (
     <Container>
       <DynamicText
-        text={textChunks?.[chunkIndex]!}
+        text={textChunks?.[chunkIndex] || ''}
         onFinish={onEndStep}
         onStart={onStartStep}
       />

package/src/hooks/useEventListener.ts

@@ -1,36 +1,21 @@
-import { useEffect, useRef } from 'react';
+import React from 'react';
 
-export function useEventListener(
-  eventName: string,
-  handler: (e: any) => void,
-  element = window
-) {
-  // Create a ref that stores handler
-  const savedHandler = useRef();
-  // Update ref.current value if handler changes.
-  // This allows our effect below to always get latest handler ...
-  // ... without us needing to pass it in effect deps array ...
-  // ... and potentially cause effect to re-run every render.
-  useEffect(() => {
-    //@ts-ignore
+//@ts-ignore
+export const useEventListener = (type, handler, el = window) => {
+  const savedHandler = React.useRef();
+
+  React.useEffect(() => {
     savedHandler.current = handler;
   }, [handler]);
-  useEffect(
-    () => {
-      // Make sure element supports addEventListener
-      // On
-      const isSupported = element && element.addEventListener;
-      if (!isSupported) return;
-      // Create event listener that calls handler function stored in ref
-      //@ts-ignore
-      const eventListener = (event: any) => savedHandler.current(event);
-      // Add event listener
-      element.addEventListener(eventName, eventListener);
-      // Remove event listener on cleanup
-      return () => {
-        element.removeEventListener(eventName, eventListener);
-      };
-    },
-    [eventName, element] // Re-run if eventName or element changes
-  );
-}
+
+  React.useEffect(() => {
+    //@ts-ignore
+    const listener = (e) => savedHandler.current(e);
+
+    el.addEventListener(type, listener);
+
+    return () => {
+      el.removeEventListener(type, listener);
+    };
+  }, [type, el]);
+};

package/src/hooks/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,6 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export default useIsomorphicLayoutEffect;

package/src/types/index.d.ts

@@ -1 +1,2 @@
 declare module '*.gif';
+declare module '*.png';