@rpg-engine/long-bow 0.1.21 → 0.1.24

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){if("Space"===e.code){console.log("space pressed!");var t=(null==a?void 0:a[c+1])||!1;console.log(a),console.log(c),console.log(t),t?s((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(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 g=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})),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(g,null,n.createElement(x,{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 n=require("react"),t=e(n),i=e(require("styled-components"));require("rpgui/rpgui.min.css"),require("rpgui/rpgui.min.js");var r=require("uuid"),o=RPGUI,a=function(e){return t.createElement("div",{className:"rpgui-content"},e.children)},l=i.div.withConfig({displayName:"ListMenu__Container",componentId:"sc-i9097t-0"})(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;"]),u=function(e,n,i){void 0===i&&(i=window);var r=t.useRef();t.useEffect((function(){r.current=n}),[n]),t.useEffect((function(){var n=function(e){return r.current(e)};return i.addEventListener(e,n),function(){i.removeEventListener(e,n)}}),[e,i])},s=function(e){var n=e.width;return t.createElement(c,{width:void 0===n?"50%":n,height:e.height||"auto",className:"rpgui-container "+e.type},e.children)},c=i.div.withConfig({displayName:"RPGUIContainer__Container",componentId:"sc-3xvrxc-0"})(["height:",";width:",";display:flex;flex-wrap:wrap;"],(function(e){return e.height}),(function(e){return e.width}));const d=require("./alice.png"),p=require("./space.gif");var m,f=function(e){var i=e.text,r=e.onFinish,o=e.onStart,a=n.useState(""),l=a[0],u=a[1];return n.useEffect((function(){var e=0,n=setInterval((function(){0===e&&o&&o(),e<i.length?(u(i.substring(0,e+1)),e++):(clearInterval(n),r&&r())}),50);return function(){clearInterval(n)}}),[i]),t.createElement(g,null,l)},g=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;word-break:normal;"]),x=function(e){var i=e.onClose,r=e.onEndStep,o=e.onStartStep,a=e.text.match(new RegExp(".{1,85}","g")),l=n.useState(0),u=l[0],s=l[1],c=function(e){"Space"===e.code&&((null==a?void 0:a[u+1])?s((function(e){return e+1})):i())};return n.useEffect((function(){return document.addEventListener("keydown",c),function(){return document.removeEventListener("keydown",c)}}),[u]),t.createElement(h,null,t.createElement(f,{text:(null==a?void 0:a[u])||"",onFinish:r,onStart:o}))},h=i.div.withConfig({displayName:"NPCDialogText__Container",componentId:"sc-ahseq0-0"})([""]),w=function(e){var i=e.questions,r=e.answers,o=e.onClose,a=n.useState(i[0]),l=a[0],s=a[1],c=n.useState(!1),d=c[0],p=c[1],m=function(){if(!l.answerIds||0===l.answerIds.length)return null;var e=l.answerIds[0];return r.find((function(n){return n.id===e}))},g=n.useState(m()),x=g[0],h=g[1];n.useEffect((function(){h(m())}),[l]);var w=function(e){return e.map((function(e){return r.find((function(n){return n.id===e}))}))};return u("keydown",(function(e){switch(e.key){case"ArrowDown":var n=w(l.answerIds).findIndex((function(e){return(null==e?void 0:e.id)===x.id+1})),t=l.answerIds[n],r=w(l.answerIds).find((function(e){return(null==e?void 0:e.id)===t}));h(r||m());break;case"ArrowUp":var a=w(l.answerIds).findIndex((function(e){return(null==e?void 0:e.id)===x.id-1})),u=l.answerIds&&l.answerIds[a],c=w(l.answerIds).find((function(e){return(null==e?void 0:e.id)===u}));h(c||w(l.answerIds).pop());break;case"Enter":if(p(!1),null==x||!x.nextQuestionId)return void o();s(i.find((function(e){return e.id===x.nextQuestionId})))}})),t.createElement(v,null,t.createElement(y,null,t.createElement(f,{text:l.text,onStart:function(){return p(!1)},onFinish:function(){return p(!0)}})),d&&t.createElement(C,null,function(){var e=l.answerIds;if(!e)return null;var n=w(e);return n?n.map((function(e){var n=(null==x?void 0:x.id)===(null==e?void 0:e.id),r=n?"yellow":"white";return e?t.createElement(N,{key:"answer_"+e.id},t.createElement(I,{color:r},n?"X":null),t.createElement(E,{key:e.id,onClick:function(){return function(e){p(!1),e.nextQuestionId?s(i.find((function(n){return n.id===e.nextQuestionId}))):o()}(e)},color:r},e.text)):null})):null}()))},v=i.div.withConfig({displayName:"QuestionDialog__Container",componentId:"sc-15nvgq5-0"})(["display:flex;word-break:break-all;box-sizing:border-box;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;"]),y=i.div.withConfig({displayName:"QuestionDialog__QuestionContainer",componentId:"sc-15nvgq5-1"})(["flex:100%;width:100%;"]),C=i.div.withConfig({displayName:"QuestionDialog__AnswersContainer",componentId:"sc-15nvgq5-2"})(["flex:100%;"]),E=i.p.withConfig({displayName:"QuestionDialog__Answer",componentId:"sc-15nvgq5-3"})(["flex:auto;color:"," !important;font-size:0.65rem !important;background:inherit;border:none;"],(function(e){return e.color})),I=i.span.withConfig({displayName:"QuestionDialog__AnswerSelectedIcon",componentId:"sc-15nvgq5-4"})(["flex:5% 0 0;color:"," !important;"],(function(e){return e.color})),N=i.div.withConfig({displayName:"QuestionDialog__AnswerRow",componentId:"sc-15nvgq5-5"})(["display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-bottom:0.5rem;height:22px;p{line-height:unset;margin-top:0;margin-bottom:0rem;}"]);(m=exports.NPCDialogType||(exports.NPCDialogType={})).TextOnly="TextOnly",m.TextAndThumbnail="TextAndThumbnail";var _,T=i.div.withConfig({displayName:"NPCDialog__Container",componentId:"sc-omm2zk-0"})(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]),S=i.div.withConfig({displayName:"NPCDialog__TextContainer",componentId:"sc-omm2zk-1"})(["flex:"," 0 0;width:355px;"],(function(e){return e.flex})),b=i.div.withConfig({displayName:"NPCDialog__ThumbnailContainer",componentId:"sc-omm2zk-2"})(["flex:30% 0 0;display:flex;justify-content:flex-end;"]),D=i.img.withConfig({displayName:"NPCDialog__NPCThumbnail",componentId:"sc-omm2zk-3"})(["image-rendering:pixelated;height:128px;width:128px;"]),P=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.SliderType||(exports.SliderType={})).Slider="rpgui-slider",_.GoldSlider="rpgui-slider golden";var k=i.input.withConfig({displayName:"RPGUISlider__Input",componentId:"sc-1sjghaz-0"})(["opacity:0;"]);exports.DynamicText=f,exports.ListMenu=function(e){var n=e.options,i=e.onSelected;return t.createElement(a,null,t.createElement(l,null,t.createElement("p",null,e.title,": "),t.createElement("ul",{className:"rpgui-list-imp",style:{overflow:"hidden"}},n.map((function(e){return t.createElement("li",{key:e.text,onClick:function(){i(e.id)}},e.text)})))))},exports.NPCDialog=function(e){var i=e.text,r=e.type,o=e.onClose,l=e.imagePath,u=e.isQuestionDialog,c=void 0!==u&&u,m=e.questions,f=e.answers,g=n.useState(!1),h=g[0],v=g[1];return t.createElement(a,null,t.createElement(s,{type:"framed-golden",width:c?"600px":"50%",height:"180px"},c&&m&&f?t.createElement(t.Fragment,null,t.createElement(S,{flex:r===exports.NPCDialogType.TextAndThumbnail?"70%":"100%"},t.createElement(w,{questions:m,answers:f,onClose:function(){o&&o()}})),r===exports.NPCDialogType.TextAndThumbnail&&t.createElement(b,null,t.createElement(D,{src:l||d}))):t.createElement(t.Fragment,null,t.createElement(T,null,t.createElement(S,{flex:r===exports.NPCDialogType.TextAndThumbnail?"70%":"100%"},t.createElement(x,{onStartStep:function(){return v(!1)},onEndStep:function(){return v(!0)},text:i||"No text provided.",onClose:function(){o&&o()}})),r===exports.NPCDialogType.TextAndThumbnail&&t.createElement(b,null,t.createElement(D,{src:l||d}))),h&&t.createElement(P,{right:r===exports.NPCDialogType.TextOnly?"1rem":"10.5rem",src:p}))))},exports.QuestionDialog=w,exports.RPGUIContainer=s,exports.RPGUIRoot=a,exports.RPGUISlider=function(e){var i=e.type,l=e.valueMin,s=e.valueMax,c=e.width,d=e.onChange,p=r.v4(),m=n.useState(!1),f=m[0],g=m[1];u("mouseup",(function(){f&&x(),g(!1)}));var x=function(){var e=document.getElementById("rpgui-slider-"+p),n=o.get_value(e);d(Number(n))};return t.createElement(a,null,t.createElement("div",{onMouseUp:x,onMouseDown:function(){return g(!0)}},t.createElement(k,{className:i===exports.SliderType.Slider?exports.SliderType.Slider:exports.SliderType.GoldSlider,type:"range",style:{width:c},min:l,max:s,id:"rpgui-slider-"+p})))},exports._RPGUI=o,exports.useEventListener=u;
 //# 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      console.log(textChunks);\n      console.log(chunkIndex);\n      console.log(hasNextChunk);\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","console","log","hasNextChunk","prev","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,MACP,UAAfA,EAAMC,KAAkB,CAC1BC,QAAQC,IAAI,sBAENC,SAAeV,SAAAA,EAAaG,EAAa,MAAM,EACrDK,QAAQC,IAAIT,GACZQ,QAAQC,IAAIN,GACZK,QAAQC,IAAIC,GAERA,EACFN,GAAc,SAACO,UAASA,EAAO,KAG/Bd,aAKNV,aAAU,kBACRyB,SAASC,iBAAiB,UAAWR,GAE9B,kBAAMO,SAASE,oBAAoB,UAAWT,MACpD,CAACF,IAGFnC,gBAACK,OACCL,gBAACY,GACCC,YAAMmB,SAAAA,EAAaG,KAAe,GAClCrB,SAAUgB,EACVf,QAASgB,MAMX1B,EAAYE,EAAOC,kFAAPD,QFlDNI,EAAAA,wBAAAA,+CAEVA,0CAwDIN,EAAYE,EAAOC,8EAAPD,kIAcZmB,EAAgBnB,EAAOC,kFAAPD,gCACZ,qBAAGwC,QAIPC,EAAqBzC,EAAOC,uFAAPD,0DAMrB0C,EAAe1C,EAAOE,iFAAPF,0DAUf2C,EAAsB3C,EAAOE,wFAAPF,uGAEjB,qBAAG4C,iDAnFsC,gBAClDtC,IAAAA,KACAP,IAAAA,KACAuB,IAAAA,QACAuB,IAAAA,YAE4BpC,YAAkB,GAAvCqC,OAAQC,SAEbtC,YAAkB,GADbuC,OAAqBC,cAGrBH,EACLrD,gBAACD,OACCC,gBAACG,GAAeG,KAAK,iBACnBN,gBAACK,OACCL,gBAAC0B,GACCqB,KAAMzC,IAASK,sBAAc8C,iBAAmB,MAAQ,QAExDzD,gBAAC4B,GACCG,YAAa,kBAAMyB,GAAuB,IAC1C1B,UAAW,kBAAM0B,GAAuB,IACxC3C,KAAMA,EACNgB,QAAS,WACHA,IACFA,IACAyB,GAAU,QAKjBhD,IAASK,sBAAc8C,kBACtBzD,gBAACgD,OACChD,gBAACiD,GAAaS,IAAKN,GAAaO,MAIrCJ,GACCvD,gBAACkD,GACCC,MAAO7C,IAASK,sBAAciD,SAAW,OAAS,UAClDF,IAAKG,MAKX"}
+{"version":3,"file":"long-bow.cjs.production.min.js","sources":["../src/RPGUI/RPGUIRoot.tsx","../src/components/ListMenu.tsx","../src/hooks/useEventListener.ts","../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","../src/NPCDialog/QuestionDialog/QuestionDialog.tsx","../src/RPGUI/RPGUISlider.tsx"],"sourcesContent":["import React from 'react';\nimport 'rpgui/rpgui.min.css';\nimport 'rpgui/rpgui.min.js';\n\ninterface IProps {\n  children: React.ReactNode;\n}\n\n//@ts-ignore\nexport const _RPGUI = RPGUI;\n\nexport const RPGUIRoot: React.FC<IProps> = ({ children }) => {\n  return <div className=\"rpgui-content\">{children}</div>;\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport { RPGUIRoot } from '../RPGUI/RPGUIRoot';\n\nexport interface IListMenuProps {\n  title: string;\n  options: [\n    {\n      id: string;\n      text: string;\n    }\n  ];\n  onSelected: (selectedOptionId: string) => void;\n}\n\nexport const ListMenu: React.FC<IListMenuProps> = ({\n  title,\n  options,\n  onSelected,\n}) => {\n  return (\n    <RPGUIRoot>\n      <Container>\n        <p>{title}: </p>\n        <ul className=\"rpgui-list-imp\" style={{ overflow: 'hidden' }}>\n          {options.map((params) => (\n            <li\n              key={params.text}\n              onClick={() => {\n                onSelected(params.id);\n              }}\n            >\n              {params.text}\n            </li>\n          ))}\n        </ul>\n      </Container>\n    </RPGUIRoot>\n  );\n};\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  justify-content: start;\n  align-items: flex-start;\n`;\n","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 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  height?: string;\n}\n\nexport const RPGUIContainer: React.FC<IProps> = ({\n  children,\n  type,\n  width = '50%',\n  height,\n}) => {\n  return (\n    <Container\n      width={width}\n      height={height || 'auto'}\n      className={`rpgui-container ${type}`}\n    >\n      {children}\n    </Container>\n  );\n};\n\ninterface IContainerProps {\n  width: string;\n  height: string;\n}\n\nconst Container = styled.div<IContainerProps>`\n  height: ${(props) => props.height};\n  width: ${({ width }) => width};\n  display: flex;\n  flex-wrap: wrap;\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 { IQuestionDialog, IQuestionDialogAnswer } from '..';\nimport { RPGUIContainer } from '../RPGUI/RPGUIContainer';\nimport { RPGUIRoot } from '../RPGUI/RPGUIRoot';\nimport aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';\nimport pressSpaceGif from './img/space.gif';\nimport { NPCDialogText } from './NPCDialogText';\nimport { QuestionDialog } from './QuestionDialog/QuestionDialog';\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  isQuestionDialog: boolean;\n  answers?: IQuestionDialogAnswer[];\n  questions?: IQuestionDialog[];\n}\n\nexport const NPCDialog: React.FC<INPCDialogProps> = ({\n  text,\n  type,\n  onClose,\n  imagePath,\n  isQuestionDialog = false,\n  questions,\n  answers,\n}) => {\n  const [showGoNextIndicator, setShowGoNextIndicator] =\n    useState<boolean>(false);\n\n  return (\n    <RPGUIRoot>\n      <RPGUIContainer\n        type=\"framed-golden\"\n        width={isQuestionDialog ? '600px' : '50%'}\n        height={'180px'}\n      >\n        {isQuestionDialog && questions && answers ? (\n          <>\n            <TextContainer\n              flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}\n            >\n              <QuestionDialog\n                questions={questions}\n                answers={answers}\n                onClose={() => {\n                  if (onClose) {\n                    onClose();\n                  }\n                }}\n              />\n            </TextContainer>\n            {type === NPCDialogType.TextAndThumbnail && (\n              <ThumbnailContainer>\n                <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />\n              </ThumbnailContainer>\n            )}\n          </>\n        ) : (\n          <>\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 || 'No text provided.'}\n                  onClose={() => {\n                    if (onClose) {\n                      onClose();\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          </>\n        )}\n      </RPGUIContainer>\n    </RPGUIRoot>\n  );\n};\n\nconst Container = styled.div`\n  display: flex;\n  width: 100%;\n  height: 100%;\n\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  word-break: normal;\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, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { DynamicText } from '../../typography/DynamicText';\n\nexport interface IQuestionDialogAnswer {\n  id: number;\n  text: string;\n  nextQuestionId?: number;\n}\n\nexport interface IQuestionDialog {\n  id: number;\n  text: string;\n  answerIds?: number[];\n}\n\nexport interface IProps {\n  questions: IQuestionDialog[];\n  answers: IQuestionDialogAnswer[];\n  onClose: () => void;\n}\n\nexport const QuestionDialog: React.FC<IProps> = ({\n  questions,\n  answers,\n  onClose,\n}) => {\n  const [currentQuestion, setCurrentQuestion] = useState(questions[0]);\n\n  const [canShowAnswers, setCanShowAnswers] = useState<boolean>(false);\n\n  const onGetFirstAnswer = () => {\n    if (!currentQuestion.answerIds || currentQuestion.answerIds.length === 0) {\n      return null;\n    }\n\n    const firstAnswerId = currentQuestion.answerIds![0];\n\n    return answers.find((answer) => answer.id === firstAnswerId);\n  };\n\n  const [currentAnswer, setCurrentAnswer] =\n    useState<IQuestionDialogAnswer | null>(onGetFirstAnswer()!);\n\n  useEffect(() => {\n    setCurrentAnswer(onGetFirstAnswer()!);\n  }, [currentQuestion]);\n\n  const onGetAnswers = (answerIds: number[]) => {\n    return answerIds.map((answerId: number) =>\n      answers.find((answer) => answer.id === answerId)\n    );\n  };\n\n  const onKeyPress = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case 'ArrowDown':\n        // select next answer, if any.\n        // if no next answer, select first answer\n        // const nextAnswer = onGetAnswers(currentQuestion.answerIds!).find(\n        //   (answer) => answer?.id === currentAnswer!.id + 1\n        // );\n\n        const nextAnswerIndex = onGetAnswers(\n          currentQuestion.answerIds!\n        ).findIndex((answer) => answer?.id === currentAnswer!.id + 1);\n\n        const nextAnswerID = currentQuestion.answerIds![nextAnswerIndex];\n\n        // console.log(nextAnswerIndex);\n\n        const nextAnswer = onGetAnswers(currentQuestion.answerIds!).find(\n          (answer) => answer?.id === nextAnswerID\n        );\n\n        setCurrentAnswer(nextAnswer || onGetFirstAnswer()!);\n\n        break;\n      case 'ArrowUp':\n        // select previous answer, if any.\n        // if no previous answer, select last answer\n\n        const previousAnswerIndex = onGetAnswers(\n          currentQuestion.answerIds!\n        ).findIndex((answer) => answer?.id === currentAnswer!.id - 1);\n\n        const previousAnswerID =\n          currentQuestion.answerIds &&\n          currentQuestion.answerIds[previousAnswerIndex];\n\n        const previousAnswer = onGetAnswers(currentQuestion.answerIds!).find(\n          (answer) => answer?.id === previousAnswerID\n        );\n\n        if (previousAnswer) {\n          setCurrentAnswer(previousAnswer);\n        } else {\n          setCurrentAnswer(onGetAnswers(currentQuestion.answerIds!).pop()!);\n        }\n\n        break;\n      case 'Enter':\n        setCanShowAnswers(false);\n\n        if (!currentAnswer?.nextQuestionId) {\n          onClose();\n          return;\n        } else {\n          setCurrentQuestion(\n            questions.find(\n              (question) => question.id === currentAnswer!.nextQuestionId\n            )!\n          );\n        }\n\n        break;\n    }\n  };\n  useEventListener('keydown', onKeyPress);\n\n  const onAnswerClick = (answer: IQuestionDialogAnswer) => {\n    setCanShowAnswers(false);\n    if (answer.nextQuestionId) {\n      // if there is a next question, go to it\n      setCurrentQuestion(\n        questions.find((question) => question.id === answer.nextQuestionId)!\n      );\n    } else {\n      // else, finish dialog!\n      onClose();\n    }\n  };\n\n  const onRenderCurrentAnswers = () => {\n    const answerIds = currentQuestion.answerIds;\n    if (!answerIds) {\n      return null;\n    }\n\n    const answers = onGetAnswers(answerIds);\n\n    if (!answers) {\n      return null;\n    }\n\n    return answers.map((answer) => {\n      const isSelected = currentAnswer?.id === answer?.id;\n      const selectedColor = isSelected ? 'yellow' : 'white';\n\n      if (answer) {\n        return (\n          <AnswerRow key={`answer_${answer.id}`}>\n            <AnswerSelectedIcon color={selectedColor}>\n              {isSelected ? 'X' : null}\n            </AnswerSelectedIcon>\n\n            <Answer\n              key={answer.id}\n              onClick={() => onAnswerClick(answer)}\n              color={selectedColor}\n            >\n              {answer.text}\n            </Answer>\n          </AnswerRow>\n        );\n      }\n\n      return null;\n    });\n  };\n\n  return (\n    <Container>\n      <QuestionContainer>\n        <DynamicText\n          text={currentQuestion.text}\n          onStart={() => setCanShowAnswers(false)}\n          onFinish={() => setCanShowAnswers(true)}\n        />\n      </QuestionContainer>\n\n      {canShowAnswers && (\n        <AnswersContainer>{onRenderCurrentAnswers()}</AnswersContainer>\n      )}\n    </Container>\n  );\n};\n\nconst Container = styled.div`\n  display: flex;\n\n  word-break: break-all;\n\n  box-sizing: border-box;\n  justify-content: flex-start;\n  align-items: flex-start;\n  flex-wrap: wrap;\n`;\n\nconst QuestionContainer = styled.div`\n  flex: 100%;\n  width: 100%;\n`;\n\nconst AnswersContainer = styled.div`\n  flex: 100%;\n`;\n\ninterface IAnswerProps {\n  color: string;\n}\n\nconst Answer = styled.p<IAnswerProps>`\n  flex: auto;\n  color: ${(props) => props.color} !important;\n  font-size: 0.65rem !important;\n  background: inherit;\n  border: none;\n`;\n\nconst AnswerSelectedIcon = styled.span<IAnswerProps>`\n  flex: 5% 0 0;\n  color: ${(props) => props.color} !important;\n`;\n\nconst AnswerRow = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  margin-bottom: 0.5rem;\n  height: 22px;\n\n  p {\n    line-height: unset;\n    margin-top: 0;\n    margin-bottom: 0rem;\n  }\n`;\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport { useEventListener } from '../hooks/useEventListener';\nimport { RPGUIRoot, _RPGUI } from './RPGUIRoot';\n\nexport enum SliderType {\n  Slider = 'rpgui-slider',\n  GoldSlider = 'rpgui-slider golden',\n}\n\nexport interface ISliderProps {\n  type: SliderType;\n  valueMin: number;\n  valueMax: number;\n  width: string;\n\n  onChange: (value: number) => void;\n}\n\nexport const RPGUISlider: React.FC<ISliderProps> = ({\n  type,\n  valueMin,\n  valueMax,\n  width,\n  onChange,\n}) => {\n  const sliderId = uuidv4();\n\n  const [wasMouseDownFirst, setWasMouseDownFirst] = useState<boolean>(false);\n\n  useEventListener('mouseup', () => {\n    if (wasMouseDownFirst) {\n      onHandleMouseUp();\n    }\n    setWasMouseDownFirst(false);\n  });\n\n  const onHandleMouseUp = () => {\n    const rpguiSlider = document.getElementById(`rpgui-slider-${sliderId}`);\n    const value = _RPGUI.get_value(rpguiSlider);\n\n    onChange(Number(value));\n  };\n\n  return (\n    <RPGUIRoot>\n      <div\n        onMouseUp={onHandleMouseUp}\n        onMouseDown={() => setWasMouseDownFirst(true)}\n      >\n        <Input\n          className={\n            type === SliderType.Slider\n              ? SliderType.Slider\n              : SliderType.GoldSlider\n          }\n          type=\"range\"\n          style={{ width: width }}\n          min={valueMin}\n          max={valueMax}\n          id={`rpgui-slider-${sliderId}`}\n        />\n      </div>\n    </RPGUIRoot>\n  );\n};\n\nconst Input = styled.input`\n  opacity: 0;\n`;\n"],"names":["_RPGUI","RPGUI","RPGUIRoot","React","className","children","Container","styled","div","useEventListener","type","handler","el","window","savedHandler","useRef","useEffect","current","listener","e","addEventListener","removeEventListener","RPGUIContainer","width","height","props","img","require","NPCDialogType","DynamicText","text","onFinish","onStart","useState","textState","setTextState","i","interval","setInterval","length","substring","clearInterval","TextContainer","p","NPCDialogText","onClose","onEndStep","onStartStep","textChunks","match","RegExp","chunkIndex","setChunkIndex","onHandleSpacePress","event","code","prev","document","QuestionDialog","questions","answers","currentQuestion","setCurrentQuestion","canShowAnswers","setCanShowAnswers","onGetFirstAnswer","answerIds","firstAnswerId","find","answer","id","currentAnswer","setCurrentAnswer","onGetAnswers","map","answerId","key","nextAnswerIndex","findIndex","nextAnswerID","nextAnswer","previousAnswerIndex","previousAnswerID","previousAnswer","pop","nextQuestionId","question","QuestionContainer","AnswersContainer","isSelected","selectedColor","AnswerRow","AnswerSelectedIcon","color","Answer","onClick","onAnswerClick","onRenderCurrentAnswers","span","SliderType","flex","ThumbnailContainer","NPCThumbnail","PressSpaceIndicator","right","Input","input","options","onSelected","title","style","overflow","params","imagePath","isQuestionDialog","showGoNextIndicator","setShowGoNextIndicator","TextAndThumbnail","src","aliceDefaultThumbnail","TextOnly","pressSpaceGif","valueMin","valueMax","onChange","sliderId","uuidv4","wasMouseDownFirst","setWasMouseDownFirst","onHandleMouseUp","rpguiSlider","getElementById","value","get_value","Number","onMouseUp","onMouseDown","Slider","GoldSlider","min","max"],"mappings":"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"}

package/dist/long-bow.esm.js

@@ -1,29 +1,80 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
-import 'rpgui/rpgui.css';
-import 'rpgui/rpgui.js';
+import 'rpgui/rpgui.min.css';
+import 'rpgui/rpgui.min.js';
+import { v4 } from 'uuid';
 
-var RPGUI = function RPGUI(_ref) {
+var _RPGUI = RPGUI;
+var RPGUIRoot = function RPGUIRoot(_ref) {
   var children = _ref.children;
   return React.createElement("div", {
     className: "rpgui-content"
   }, children);
 };
 
+var ListMenu = function ListMenu(_ref) {
+  var title = _ref.title,
+      options = _ref.options,
+      onSelected = _ref.onSelected;
+  return React.createElement(RPGUIRoot, null, React.createElement(Container, null, React.createElement("p", null, title, ": "), React.createElement("ul", {
+    className: "rpgui-list-imp",
+    style: {
+      overflow: 'hidden'
+    }
+  }, options.map(function (params) {
+    return React.createElement("li", {
+      key: params.text,
+      onClick: function onClick() {
+        onSelected(params.id);
+      }
+    }, params.text);
+  }))));
+};
+var Container = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ListMenu__Container",
+  componentId: "sc-i9097t-0"
+})(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;"]);
+
+var useEventListener = function useEventListener(type, handler, el) {
+  if (el === void 0) {
+    el = window;
+  }
+
+  var savedHandler = React.useRef();
+  React.useEffect(function () {
+    savedHandler.current = handler;
+  }, [handler]);
+  React.useEffect(function () {
+    //@ts-ignore
+    var listener = function listener(e) {
+      return savedHandler.current(e);
+    };
+
+    el.addEventListener(type, listener);
+    return function () {
+      el.removeEventListener(type, listener);
+    };
+  }, [type, el]);
+};
+
 var RPGUIContainer = function RPGUIContainer(_ref) {
   var children = _ref.children,
       type = _ref.type,
       _ref$width = _ref.width,
-      width = _ref$width === void 0 ? '50%' : _ref$width;
-  return React.createElement(Container, {
+      width = _ref$width === void 0 ? '50%' : _ref$width,
+      height = _ref.height;
+  return React.createElement(Container$1, {
     width: width,
+    height: height || 'auto',
     className: "rpgui-container " + type
   }, children);
 };
-var Container = /*#__PURE__*/styled.div.withConfig({
+var Container$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "RPGUIContainer__Container",
   componentId: "sc-3xvrxc-0"
-})(["max-width:", ";"], function (_ref2) {
+})(["height:", ";width:", ";display:flex;flex-wrap:wrap;"], function (props) {
+  return props.height;
+}, function (_ref2) {
   var width = _ref2.width;
   return width;
 });
@@ -75,7 +126,7 @@ var DynamicText = function DynamicText(_ref) {
 var TextContainer = /*#__PURE__*/styled.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;"]);
+})(["font-size:0.7rem !important;color:white;text-shadow:1px 1px 0px #000000;letter-spacing:1.2px;word-break:normal;"]);
 
 var NPCDialogText = function NPCDialogText(_ref) {
   var text = _ref.text,
@@ -90,11 +141,7 @@ 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;
-      console.log(textChunks);
-      console.log(chunkIndex);
-      console.log(hasNextChunk);
 
       if (hasNextChunk) {
         setChunkIndex(function (prev) {
@@ -113,17 +160,201 @@ var NPCDialogText = function NPCDialogText(_ref) {
       return document.removeEventListener('keydown', onHandleSpacePress);
     };
   }, [chunkIndex]);
-  return React.createElement(Container$1, null, React.createElement(DynamicText, {
+  return React.createElement(Container$2, null, React.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: onEndStep,
     onStart: onStartStep
   }));
 };
-var Container$1 = /*#__PURE__*/styled.div.withConfig({
+var Container$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialogText__Container",
   componentId: "sc-ahseq0-0"
 })([""]);
 
+var QuestionDialog = function QuestionDialog(_ref) {
+  var questions = _ref.questions,
+      answers = _ref.answers,
+      onClose = _ref.onClose;
+
+  var _useState = useState(questions[0]),
+      currentQuestion = _useState[0],
+      setCurrentQuestion = _useState[1];
+
+  var _useState2 = useState(false),
+      canShowAnswers = _useState2[0],
+      setCanShowAnswers = _useState2[1];
+
+  var onGetFirstAnswer = function onGetFirstAnswer() {
+    if (!currentQuestion.answerIds || currentQuestion.answerIds.length === 0) {
+      return null;
+    }
+
+    var firstAnswerId = currentQuestion.answerIds[0];
+    return answers.find(function (answer) {
+      return answer.id === firstAnswerId;
+    });
+  };
+
+  var _useState3 = useState(onGetFirstAnswer()),
+      currentAnswer = _useState3[0],
+      setCurrentAnswer = _useState3[1];
+
+  useEffect(function () {
+    setCurrentAnswer(onGetFirstAnswer());
+  }, [currentQuestion]);
+
+  var onGetAnswers = function onGetAnswers(answerIds) {
+    return answerIds.map(function (answerId) {
+      return answers.find(function (answer) {
+        return answer.id === answerId;
+      });
+    });
+  };
+
+  var onKeyPress = function onKeyPress(e) {
+    switch (e.key) {
+      case 'ArrowDown':
+        // select next answer, if any.
+        // if no next answer, select first answer
+        // const nextAnswer = onGetAnswers(currentQuestion.answerIds!).find(
+        //   (answer) => answer?.id === currentAnswer!.id + 1
+        // );
+        var nextAnswerIndex = onGetAnswers(currentQuestion.answerIds).findIndex(function (answer) {
+          return (answer == null ? void 0 : answer.id) === currentAnswer.id + 1;
+        });
+        var nextAnswerID = currentQuestion.answerIds[nextAnswerIndex]; // console.log(nextAnswerIndex);
+
+        var nextAnswer = onGetAnswers(currentQuestion.answerIds).find(function (answer) {
+          return (answer == null ? void 0 : answer.id) === nextAnswerID;
+        });
+        setCurrentAnswer(nextAnswer || onGetFirstAnswer());
+        break;
+
+      case 'ArrowUp':
+        // select previous answer, if any.
+        // if no previous answer, select last answer
+        var previousAnswerIndex = onGetAnswers(currentQuestion.answerIds).findIndex(function (answer) {
+          return (answer == null ? void 0 : answer.id) === currentAnswer.id - 1;
+        });
+        var previousAnswerID = currentQuestion.answerIds && currentQuestion.answerIds[previousAnswerIndex];
+        var previousAnswer = onGetAnswers(currentQuestion.answerIds).find(function (answer) {
+          return (answer == null ? void 0 : answer.id) === previousAnswerID;
+        });
+
+        if (previousAnswer) {
+          setCurrentAnswer(previousAnswer);
+        } else {
+          setCurrentAnswer(onGetAnswers(currentQuestion.answerIds).pop());
+        }
+
+        break;
+
+      case 'Enter':
+        setCanShowAnswers(false);
+
+        if (!(currentAnswer != null && currentAnswer.nextQuestionId)) {
+          onClose();
+          return;
+        } else {
+          setCurrentQuestion(questions.find(function (question) {
+            return question.id === currentAnswer.nextQuestionId;
+          }));
+        }
+
+        break;
+    }
+  };
+
+  useEventListener('keydown', onKeyPress);
+
+  var onAnswerClick = function onAnswerClick(answer) {
+    setCanShowAnswers(false);
+
+    if (answer.nextQuestionId) {
+      // if there is a next question, go to it
+      setCurrentQuestion(questions.find(function (question) {
+        return question.id === answer.nextQuestionId;
+      }));
+    } else {
+      // else, finish dialog!
+      onClose();
+    }
+  };
+
+  var onRenderCurrentAnswers = function onRenderCurrentAnswers() {
+    var answerIds = currentQuestion.answerIds;
+
+    if (!answerIds) {
+      return null;
+    }
+
+    var answers = onGetAnswers(answerIds);
+
+    if (!answers) {
+      return null;
+    }
+
+    return answers.map(function (answer) {
+      var isSelected = (currentAnswer == null ? void 0 : currentAnswer.id) === (answer == null ? void 0 : answer.id);
+      var selectedColor = isSelected ? 'yellow' : 'white';
+
+      if (answer) {
+        return React.createElement(AnswerRow, {
+          key: "answer_" + answer.id
+        }, React.createElement(AnswerSelectedIcon, {
+          color: selectedColor
+        }, isSelected ? 'X' : null), React.createElement(Answer, {
+          key: answer.id,
+          onClick: function onClick() {
+            return onAnswerClick(answer);
+          },
+          color: selectedColor
+        }, answer.text));
+      }
+
+      return null;
+    });
+  };
+
+  return React.createElement(Container$3, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
+    text: currentQuestion.text,
+    onStart: function onStart() {
+      return setCanShowAnswers(false);
+    },
+    onFinish: function onFinish() {
+      return setCanShowAnswers(true);
+    }
+  })), canShowAnswers && React.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
+};
+var Container$3 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestionDialog__Container",
+  componentId: "sc-15nvgq5-0"
+})(["display:flex;word-break:break-all;box-sizing:border-box;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;"]);
+var QuestionContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestionDialog__QuestionContainer",
+  componentId: "sc-15nvgq5-1"
+})(["flex:100%;width:100%;"]);
+var AnswersContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestionDialog__AnswersContainer",
+  componentId: "sc-15nvgq5-2"
+})(["flex:100%;"]);
+var Answer = /*#__PURE__*/styled.p.withConfig({
+  displayName: "QuestionDialog__Answer",
+  componentId: "sc-15nvgq5-3"
+})(["flex:auto;color:", " !important;font-size:0.65rem !important;background:inherit;border:none;"], function (props) {
+  return props.color;
+});
+var AnswerSelectedIcon = /*#__PURE__*/styled.span.withConfig({
+  displayName: "QuestionDialog__AnswerSelectedIcon",
+  componentId: "sc-15nvgq5-4"
+})(["flex:5% 0 0;color:", " !important;"], function (props) {
+  return props.color;
+});
+var AnswerRow = /*#__PURE__*/styled.div.withConfig({
+  displayName: "QuestionDialog__AnswerRow",
+  componentId: "sc-15nvgq5-5"
+})(["display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-bottom:0.5rem;height:22px;p{line-height:unset;margin-top:0;margin-bottom:0rem;}"]);
+
 var NPCDialogType;
 
 (function (NPCDialogType) {
@@ -135,19 +366,33 @@ var NPCDialog = function NPCDialog(_ref) {
   var text = _ref.text,
       type = _ref.type,
       _onClose = _ref.onClose,
-      imagePath = _ref.imagePath;
-
-  var _useState = useState(true),
-      isOpen = _useState[0],
-      setIsOpen = _useState[1];
+      imagePath = _ref.imagePath,
+      _ref$isQuestionDialog = _ref.isQuestionDialog,
+      isQuestionDialog = _ref$isQuestionDialog === void 0 ? false : _ref$isQuestionDialog,
+      questions = _ref.questions,
+      answers = _ref.answers;
 
-  var _useState2 = useState(false),
-      showGoNextIndicator = _useState2[0],
-      setShowGoNextIndicator = _useState2[1];
+  var _useState = useState(false),
+      showGoNextIndicator = _useState[0],
+      setShowGoNextIndicator = _useState[1];
 
-  return isOpen ? React.createElement(RPGUI, null, React.createElement(RPGUIContainer, {
-    type: "framed-golden"
-  }, React.createElement(Container$2, null, React.createElement(TextContainer$1, {
+  return React.createElement(RPGUIRoot, null, React.createElement(RPGUIContainer, {
+    type: "framed-golden",
+    width: isQuestionDialog ? '600px' : '50%',
+    height: '180px'
+  }, isQuestionDialog && questions && answers ? React.createElement(React.Fragment, null, React.createElement(TextContainer$1, {
+    flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
+  }, React.createElement(QuestionDialog, {
+    questions: questions,
+    answers: answers,
+    onClose: function onClose() {
+      if (_onClose) {
+        _onClose();
+      }
+    }
+  })), type === NPCDialogType.TextAndThumbnail && React.createElement(ThumbnailContainer, null, React.createElement(NPCThumbnail, {
+    src: imagePath || img
+  }))) : React.createElement(React.Fragment, null, React.createElement(Container$4, null, React.createElement(TextContainer$1, {
     flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
   }, React.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -156,12 +401,10 @@ var NPCDialog = function NPCDialog(_ref) {
     onEndStep: function onEndStep() {
       return setShowGoNextIndicator(true);
     },
-    text: text,
+    text: text || 'No text provided.',
     onClose: function onClose() {
       if (_onClose) {
         _onClose();
-
-        setIsOpen(false);
       }
     }
   })), type === NPCDialogType.TextAndThumbnail && React.createElement(ThumbnailContainer, null, React.createElement(NPCThumbnail, {
@@ -169,12 +412,12 @@ 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({
+var Container$4 = /*#__PURE__*/styled.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;"]);
+})(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
 var TextContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialog__TextContainer",
   componentId: "sc-omm2zk-1"
@@ -198,5 +441,61 @@ var PressSpaceIndicator = /*#__PURE__*/styled.img.withConfig({
   return right;
 });
 
-export { DynamicText, NPCDialog, NPCDialogType, RPGUI, RPGUIContainer };
+var SliderType;
+
+(function (SliderType) {
+  SliderType["Slider"] = "rpgui-slider";
+  SliderType["GoldSlider"] = "rpgui-slider golden";
+})(SliderType || (SliderType = {}));
+
+var RPGUISlider = function RPGUISlider(_ref) {
+  var type = _ref.type,
+      valueMin = _ref.valueMin,
+      valueMax = _ref.valueMax,
+      width = _ref.width,
+      onChange = _ref.onChange;
+  var sliderId = v4();
+
+  var _useState = useState(false),
+      wasMouseDownFirst = _useState[0],
+      setWasMouseDownFirst = _useState[1];
+
+  useEventListener('mouseup', function () {
+    if (wasMouseDownFirst) {
+      onHandleMouseUp();
+    }
+
+    setWasMouseDownFirst(false);
+  });
+
+  var onHandleMouseUp = function onHandleMouseUp() {
+    var rpguiSlider = document.getElementById("rpgui-slider-" + sliderId);
+
+    var value = _RPGUI.get_value(rpguiSlider);
+
+    onChange(Number(value));
+  };
+
+  return React.createElement(RPGUIRoot, null, React.createElement("div", {
+    onMouseUp: onHandleMouseUp,
+    onMouseDown: function onMouseDown() {
+      return setWasMouseDownFirst(true);
+    }
+  }, React.createElement(Input, {
+    className: type === SliderType.Slider ? SliderType.Slider : SliderType.GoldSlider,
+    type: "range",
+    style: {
+      width: width
+    },
+    min: valueMin,
+    max: valueMax,
+    id: "rpgui-slider-" + sliderId
+  })));
+};
+var Input = /*#__PURE__*/styled.input.withConfig({
+  displayName: "RPGUISlider__Input",
+  componentId: "sc-1sjghaz-0"
+})(["opacity:0;"]);
+
+export { DynamicText, ListMenu, NPCDialog, NPCDialogType, QuestionDialog, RPGUIContainer, RPGUIRoot, RPGUISlider, SliderType, _RPGUI, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map