@rpg-engine/long-bow 0.1.42 → 0.1.47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/Chat/Chat.d.ts +4 -0
  2. package/dist/index.d.ts +1 -0
  3. package/dist/long-bow.cjs.development.js +175 -48
  4. package/dist/long-bow.cjs.development.js.map +1 -1
  5. package/dist/long-bow.cjs.production.min.js +1 -1
  6. package/dist/long-bow.cjs.production.min.js.map +1 -1
  7. package/dist/long-bow.esm.js +177 -51
  8. package/dist/long-bow.esm.js.map +1 -1
  9. package/package.json +1 -1
  10. package/src/components/Chat/Chat.tsx +41 -5
  11. package/src/index.tsx +1 -0
package/dist/long-bow.cjs.production.min.js CHANGED
@@ -1,2 +1,2 @@
1
- "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),r=e(require("styled-components")),i=require("uuid");function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}require("rpgui/rpgui.min.css"),require("rpgui/rpgui.min.js");var a,l=["children","buttonType"];(a=exports.ButtonTypes||(exports.ButtonTypes={})).RPGUIButton="rpgui-button",a.RPGUIGoldButton="rpgui-button golden";var u,s=r.button.withConfig({displayName:"Button__ButtonContainer",componentId:"sc-obzd3o-0"})(["height:45px;font-size:11.5px;"]),c=RPGUI,d=r.div.withConfig({displayName:"ListMenu__Container",componentId:"sc-i9097t-0"})(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;position:absolute;top:","px;left:","px;li{font-size:","em;}"],(function(e){return e.y||0}),(function(e){return e.x||0}),(function(e){return e.fontSize})),p=r.li.withConfig({displayName:"ListMenu__ListElement",componentId:"sc-i9097t-1"})(["margin-right:0.5rem;"]);(u=exports.RPGUIContainerTypes||(exports.RPGUIContainerTypes={})).Framed="framed",u.FramedGold="framed-golden",u.FramedGold2="framed-golden-2",u.FramedGrey="framed-grey";var m=function(e){var t=e.width;return n.createElement(f,{width:void 0===t?"50%":t,height:e.height||"auto",className:"rpgui-container "+e.type+" "+e.className},e.children)},f=r.div.withConfig({displayName:"RPGUIContainer__Container",componentId:"sc-a8l4p8-0"})(["height:",";width:",";display:flex;flex-wrap:wrap;image-rendering:pixelated;"],(function(e){return e.height}),(function(e){return e.width}));const g=require("./alice.png"),x=require("./space.gif");var h,v=function(e){var r=e.text,i=e.onFinish,o=e.onStart,a=t.useState(""),l=a[0],u=a[1];return t.useEffect((function(){var e=0,t=setInterval((function(){0===e&&o&&o(),e<r.length?(u(r.substring(0,e+1)),e++):(clearInterval(t),i&&i())}),50);return function(){clearInterval(t)}}),[r]),n.createElement(y,null,l)},y=r.p.withConfig({displayName:"DynamicText__TextContainer",componentId:"sc-1ggl9nd-0"})(["font-size:0.7rem !important;color:white;text-shadow:1px 1px 0px #000000;letter-spacing:1.2px;word-break:normal;"]),w=function(e){var r=e.onClose,i=e.onEndStep,o=e.onStartStep,a=e.text.match(new RegExp(".{1,85}","g")),l=t.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})):r())};return t.useEffect((function(){return document.addEventListener("keydown",c),function(){return document.removeEventListener("keydown",c)}}),[u]),n.createElement(E,null,n.createElement(v,{text:(null==a?void 0:a[u])||"",onFinish:i,onStart:o}))},E=r.div.withConfig({displayName:"NPCDialogText__Container",componentId:"sc-1cxkdh9-0"})([""]),b=function(e,t,r){void 0===r&&(r=window);var i=n.useRef();n.useEffect((function(){i.current=t}),[t]),n.useEffect((function(){var t=function(e){return i.current(e)};return r.addEventListener(e,t),function(){r.removeEventListener(e,t)}}),[e,r])},C=function(e){var r=e.questions,i=e.answers,o=e.onClose,a=t.useState(r[0]),l=a[0],u=a[1],s=t.useState(!1),c=s[0],d=s[1],p=function(){if(!l.answerIds||0===l.answerIds.length)return null;var e=l.answerIds[0];return i.find((function(t){return t.id===e}))},m=t.useState(p()),f=m[0],g=m[1];t.useEffect((function(){g(p())}),[l]);var x=function(e){return e.map((function(e){return i.find((function(t){return t.id===e}))}))};return b("keydown",(function(e){switch(e.key){case"ArrowDown":var t=x(l.answerIds).findIndex((function(e){return(null==e?void 0:e.id)===f.id+1})),n=l.answerIds[t],i=x(l.answerIds).find((function(e){return(null==e?void 0:e.id)===n}));g(i||p());break;case"ArrowUp":var a=x(l.answerIds).findIndex((function(e){return(null==e?void 0:e.id)===f.id-1})),s=l.answerIds&&l.answerIds[a],c=x(l.answerIds).find((function(e){return(null==e?void 0:e.id)===s}));g(c||x(l.answerIds).pop());break;case"Enter":if(d(!1),null==f||!f.nextQuestionId)return void o();u(r.find((function(e){return e.id===f.nextQuestionId})))}})),n.createElement(I,null,n.createElement(N,null,n.createElement(v,{text:l.text,onStart:function(){return d(!1)},onFinish:function(){return d(!0)}})),c&&n.createElement(_,null,function(){var e=l.answerIds;if(!e)return null;var t=x(e);return t?t.map((function(e){var t=(null==f?void 0:f.id)===(null==e?void 0:e.id),i=t?"yellow":"white";return e?n.createElement(P,{key:"answer_"+e.id},n.createElement(S,{color:i},t?"X":null),n.createElement(T,{key:e.id,onClick:function(){return function(e){d(!1),e.nextQuestionId?u(r.find((function(t){return t.id===e.nextQuestionId}))):o()}(e)},color:i},e.text)):null})):null}()))},I=r.div.withConfig({displayName:"QuestionDialog__Container",componentId:"sc-bxc5u0-0"})(["display:flex;word-break:break-all;box-sizing:border-box;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;"]),N=r.div.withConfig({displayName:"QuestionDialog__QuestionContainer",componentId:"sc-bxc5u0-1"})(["flex:100%;width:100%;"]),_=r.div.withConfig({displayName:"QuestionDialog__AnswersContainer",componentId:"sc-bxc5u0-2"})(["flex:100%;"]),T=r.p.withConfig({displayName:"QuestionDialog__Answer",componentId:"sc-bxc5u0-3"})(["flex:auto;color:"," !important;font-size:0.65rem !important;background:inherit;border:none;"],(function(e){return e.color})),S=r.span.withConfig({displayName:"QuestionDialog__AnswerSelectedIcon",componentId:"sc-bxc5u0-4"})(["flex:5% 0 0;color:"," !important;"],(function(e){return e.color})),P=r.div.withConfig({displayName:"QuestionDialog__AnswerRow",componentId:"sc-bxc5u0-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;}"]);(h=exports.NPCDialogType||(exports.NPCDialogType={})).TextOnly="TextOnly",h.TextAndThumbnail="TextAndThumbnail";var k,D=r.div.withConfig({displayName:"NPCDialog__Container",componentId:"sc-1b4aw74-0"})(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]),R=r.div.withConfig({displayName:"NPCDialog__TextContainer",componentId:"sc-1b4aw74-1"})(["flex:"," 0 0;width:355px;"],(function(e){return e.flex})),G=r.div.withConfig({displayName:"NPCDialog__ThumbnailContainer",componentId:"sc-1b4aw74-2"})(["flex:30% 0 0;display:flex;justify-content:flex-end;"]),z=r.img.withConfig({displayName:"NPCDialog__NPCThumbnail",componentId:"sc-1b4aw74-3"})(["image-rendering:pixelated;height:128px;width:128px;"]),j=r.img.withConfig({displayName:"NPCDialog__PressSpaceIndicator",componentId:"sc-1b4aw74-4"})(["position:absolute;right:",";bottom:1rem;height:20.7px;image-rendering:-webkit-optimize-contrast;"],(function(e){return e.right})),q=r.span.withConfig({displayName:"ProgressBar__ProgressBarText",componentId:"sc-qa6fzh-0"})(["font-size:1rem;color:white;text-align:center;z-index:1;position:absolute;left:50%;transform:translateX(-50%);top:12px;"]),B=r.div.withConfig({displayName:"ProgressBar__TextOverlay",componentId:"sc-qa6fzh-1"})(["width:100%;position:relative;"]),A=r.div.withConfig({displayName:"ProgressBar__Container",componentId:"sc-qa6fzh-2"})(["display:flex;flex-direction:column;min-width:","px;width:","%;justify-content:start;align-items:flex-start;",""],(function(e){return e.minWidth}),(function(e){return e.percentageWidth}),(function(e){return e.style}));(k=exports.RangeSliderType||(exports.RangeSliderType={})).Slider="rpgui-slider",k.GoldSlider="rpgui-slider golden";var L=r.input.withConfig({displayName:"RangeSlider__Input",componentId:"sc-v8mte9-0"})(["opacity:0;"]),O=r.div.withConfig({displayName:"Truncate__Container",componentId:"sc-6x00qb-0"})(["display:-webkit-box;max-width:100%;max-height:100%;-webkit-line-clamp:",";-webkit-box-orient:vertical;overflow:hidden;"],(function(e){return e.maxLines}));exports.Button=function(e){var t=e.children,r=e.buttonType,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(i[n]=e[n]);return i}(e,l);return n.createElement(s,Object.assign({className:""+r},i),n.createElement("p",null,t))},exports.CheckButton=function(e){var r=e.items,i=e.onChange,a=t.useState(function(){var e={};return r.forEach((function(t){e[t.label]=!1})),e}()),l=a[0],u=a[1];return t.useEffect((function(){l&&i(l)}),[l]),n.createElement("div",{id:"elemento-checkbox"},null==r?void 0:r.map((function(e,t){return n.createElement("div",{key:e.label+"_"+t},n.createElement("input",{className:"rpgui-checkbox",type:"checkbox",checked:l[e.label],onChange:function(){}}),n.createElement("label",{onClick:function(){var t,n;u(o({},l,((n={})[t=e.label]=!l[t],n)))}},e.label),n.createElement("br",null))})))},exports.Dropdown=function(e){var r=e.options,o=e.width,a=e.onChange,l=i.v4(),u=t.useState(""),s=u[0],d=u[1];return t.useEffect((function(){var e=document.getElementById("rpgui-dropdown-"+l),t=c.get_value(e);d(t),null==e||e.addEventListener("change",(function(e){d(null==e?void 0:e.target.value)}))}),[]),t.useEffect((function(){s&&a(s)}),[s]),n.createElement("select",{id:"rpgui-dropdown-"+l,style:{width:o},className:"rpgui-dropdown"},r.map((function(e){return n.createElement("option",{key:e.id,value:e.value},e.option)})))},exports.DynamicText=v,exports.Input=function(e){var t=o({},e);return n.createElement("input",Object.assign({},t))},exports.InputRadio=function(e){var r=e.name,i=e.items,o=e.onChange,a=t.useState(),l=a[0],u=a[1],s=function(){var e=document.querySelector("input[name="+r+"]:checked");u(e.value)};return t.useEffect((function(){l&&o(l)}),[l]),n.createElement("div",{id:"elemento-radio"},i.map((function(e){return n.createElement(n.Fragment,null,n.createElement("input",{key:e.value,className:"rpgui-radio",value:e.value,name:r,type:"radio"}),n.createElement("label",{onClick:s},e.label),n.createElement("br",null))})))},exports.ListMenu=function(e){var t=e.onSelected,r=e.fontSize;return n.createElement(d,{x:e.x,y:e.y,fontSize:void 0===r?.8:r},n.createElement("ul",{className:"rpgui-list-imp",style:{overflow:"hidden"}},e.options.map((function(e){return n.createElement(p,{key:e.text,onClick:function(){t(e.id)}},e.text)}))))},exports.NPCDialog=function(e){var r=e.text,i=e.type,o=e.onClose,a=e.imagePath,l=e.isQuestionDialog,u=void 0!==l&&l,s=e.questions,c=e.answers,d=t.useState(!1),p=d[0],f=d[1];return n.createElement(m,{type:exports.RPGUIContainerTypes.FramedGold,width:u?"600px":"50%",height:"180px"},u&&s&&c?n.createElement(n.Fragment,null,n.createElement(R,{flex:i===exports.NPCDialogType.TextAndThumbnail?"70%":"100%"},n.createElement(C,{questions:s,answers:c,onClose:function(){o&&o()}})),i===exports.NPCDialogType.TextAndThumbnail&&n.createElement(G,null,n.createElement(z,{src:a||g}))):n.createElement(n.Fragment,null,n.createElement(D,null,n.createElement(R,{flex:i===exports.NPCDialogType.TextAndThumbnail?"70%":"100%"},n.createElement(w,{onStartStep:function(){return f(!1)},onEndStep:function(){return f(!0)},text:r||"No text provided.",onClose:function(){o&&o()}})),i===exports.NPCDialogType.TextAndThumbnail&&n.createElement(G,null,n.createElement(z,{src:a||g}))),p&&n.createElement(j,{right:i===exports.NPCDialogType.TextOnly?"1rem":"10.5rem",src:x})))},exports.ProgressBar=function(e){var t=e.max,r=e.value,i=e.color,o=e.displayText,a=void 0===o||o,l=e.percentageWidth,u=void 0===l?40:l,s=e.minWidth,c=void 0===s?100:s,d=e.style,p=function(e,t){return t>e&&(t=e),100*t/e};return n.createElement(A,{className:"rpgui-progress","data-value":p(t,r)/100,"data-rpguitype":"progress",percentageWidth:u,minWidth:c,style:d},a&&n.createElement(B,null,n.createElement(q,null,r,"/",t)),n.createElement("div",{className:" rpgui-progress-track"},n.createElement("div",{className:"rpgui-progress-fill "+i+" ",style:{left:"0px",width:p(t,r)+"%"}})),n.createElement("div",{className:" rpgui-progress-left-edge"}),n.createElement("div",{className:" rpgui-progress-right-edge"}))},exports.QuestionDialog=C,exports.RPGUIContainer=m,exports.RPGUIRoot=function(e){return n.createElement("div",{className:"rpgui-content"},e.children)},exports.RangeSlider=function(e){var r=e.type,o=e.valueMin,a=e.valueMax,l=e.width,u=e.onChange,s=i.v4(),d=t.useState(!1),p=d[0],m=d[1];b("mouseup",(function(){p&&f(),m(!1)}));var f=function(){var e=document.getElementById("rpgui-slider-"+s),t=c.get_value(e);u(Number(t))};return n.createElement("div",{onMouseUp:f,onMouseDown:function(){return m(!0)}},n.createElement(L,{className:r===exports.RangeSliderType.Slider?exports.RangeSliderType.Slider:exports.RangeSliderType.GoldSlider,type:"range",style:{width:l},min:o,max:a,id:"rpgui-slider-"+s}))},exports.TextArea=function(e){var t=o({},e);return n.createElement("textarea",Object.assign({},t))},exports.Truncate=function(e){var t=e.maxLines;return n.createElement(O,{maxLines:void 0===t?1:t},e.children)},exports._RPGUI=c,exports.useEventListener=b;
1
+ "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")),r=e(require("dayjs")),o=require("uuid");function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}require("rpgui/rpgui.min.css"),require("rpgui/rpgui.min.js");var l,s=["children","buttonType"];(l=exports.ButtonTypes||(exports.ButtonTypes={})).RPGUIButton="rpgui-button",l.RPGUIGoldButton="rpgui-button golden";var u,c=function(e){var t=e.children,i=e.buttonType,r=function(e,t){if(null==e)return{};var n,i,r={},o=Object.keys(e);for(i=0;i<o.length;i++)t.indexOf(n=o[i])>=0||(r[n]=e[n]);return r}(e,s);return n.createElement(d,Object.assign({className:""+i},r),n.createElement("p",null,t))},d=i.button.withConfig({displayName:"Button__ButtonContainer",componentId:"sc-obzd3o-0"})(["height:45px;font-size:11.5px;"]),p=function(e){var t=a({},e);return n.createElement("input",Object.assign({},t))};(u=exports.RPGUIContainerTypes||(exports.RPGUIContainerTypes={})).Framed="framed",u.FramedGold="framed-golden",u.FramedGold2="framed-golden-2",u.FramedGrey="framed-grey";var m=function(e){var t=e.width;return n.createElement(f,{width:void 0===t?"50%":t,height:e.height||"auto",className:"rpgui-container "+e.type+" "+e.className},e.children)},f=i.div.withConfig({displayName:"RPGUIContainer__Container",componentId:"sc-a8l4p8-0"})(["height:",";width:",";display:flex;flex-wrap:wrap;image-rendering:pixelated;"],(function(e){return e.height}),(function(e){return e.width})),g=i.div.withConfig({displayName:"Column",componentId:"sc-1pesqff-0"})(["flex:",";display:flex;flex-wrap:",";align-items:",";justify-content:",";"],(function(e){return e.flex||"auto"}),(function(e){return e.flexWrap||"nowrap"}),(function(e){return e.alignItems||"flex-start"}),(function(e){return e.justifyContent||"flex-start"})),x=i.div.withConfig({displayName:"Chat__Container",componentId:"sc-1bk05n6-0"})(["position:relative;"]),h=i.div.withConfig({displayName:"Chat__CloseButton",componentId:"sc-1bk05n6-1"})(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:10px;"]),y=i(p).withConfig({displayName:"Chat__CustomInput",componentId:"sc-1bk05n6-2"})(["height:30px;width:100%;.rpgui-content .input{min-height:39px;}"]),v=i(m).withConfig({displayName:"Chat__CustomContainer",componentId:"sc-1bk05n6-3"})(["display:block;opacity:",";&:hover{opacity:1;}.dark-background{background-color:"," !important;}.chat-body{&.rpgui-container.framed-grey{background:unset;}max-height:170px;overflow-y:auto;}"],(function(e){return e.opacity}),"#3e3e3e"),w=i.form.withConfig({displayName:"Chat__Form",componentId:"sc-1bk05n6-4"})(["display:flex;width:100%;justify-content:center;align-items:center;"]),C=i.p.withConfig({displayName:"Chat__MessageText",componentId:"sc-1bk05n6-5"})(["display:block !important;width:100%;font-size:0.7rem !important;overflow-y:auto;margin:0;"]),b=RPGUI,E=i.div.withConfig({displayName:"ListMenu__Container",componentId:"sc-i9097t-0"})(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;position:absolute;top:","px;left:","px;li{font-size:","em;}"],(function(e){return e.y||0}),(function(e){return e.x||0}),(function(e){return e.fontSize})),I=i.li.withConfig({displayName:"ListMenu__ListElement",componentId:"sc-i9097t-1"})(["margin-right:0.5rem;"]);const _=require("./alice.png"),N=require("./space.gif");var T,k=function(e){var i=e.text,r=e.onFinish,o=e.onStart,a=t.useState(""),l=a[0],s=a[1];return t.useEffect((function(){var e=0,t=setInterval((function(){0===e&&o&&o(),e<i.length?(s(i.substring(0,e+1)),e++):(clearInterval(t),r&&r())}),50);return function(){clearInterval(t)}}),[i]),n.createElement(S,null,l)},S=i.p.withConfig({displayName:"DynamicText__TextContainer",componentId:"sc-1ggl9nd-0"})(["font-size:0.7rem !important;color:white;text-shadow:1px 1px 0px #000000;letter-spacing:1.2px;word-break:normal;"]),P=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),s=l[0],u=l[1],c=function(e){"Space"===e.code&&((null==a?void 0:a[s+1])?u((function(e){return e+1})):i())};return t.useEffect((function(){return document.addEventListener("keydown",c),function(){return document.removeEventListener("keydown",c)}}),[s]),n.createElement(D,null,n.createElement(k,{text:(null==a?void 0:a[s])||"",onFinish:r,onStart:o}))},D=i.div.withConfig({displayName:"NPCDialogText__Container",componentId:"sc-1cxkdh9-0"})([""]),R=function(e,t,i){void 0===i&&(i=window);var r=n.useRef();n.useEffect((function(){r.current=t}),[t]),n.useEffect((function(){var t=function(e){return r.current(e)};return i.addEventListener(e,t),function(){i.removeEventListener(e,t)}}),[e,i])},G=function(e){var i=e.questions,r=e.answers,o=e.onClose,a=t.useState(i[0]),l=a[0],s=a[1],u=t.useState(!1),c=u[0],d=u[1],p=function(){if(!l.answerIds||0===l.answerIds.length)return null;var e=l.answerIds[0];return r.find((function(t){return t.id===e}))},m=t.useState(p()),f=m[0],g=m[1];t.useEffect((function(){g(p())}),[l]);var x=function(e){return e.map((function(e){return r.find((function(t){return t.id===e}))}))};return R("keydown",(function(e){switch(e.key){case"ArrowDown":var t=x(l.answerIds).findIndex((function(e){return(null==e?void 0:e.id)===f.id+1})),n=l.answerIds[t],r=x(l.answerIds).find((function(e){return(null==e?void 0:e.id)===n}));g(r||p());break;case"ArrowUp":var a=x(l.answerIds).findIndex((function(e){return(null==e?void 0:e.id)===f.id-1})),u=l.answerIds&&l.answerIds[a],c=x(l.answerIds).find((function(e){return(null==e?void 0:e.id)===u}));g(c||x(l.answerIds).pop());break;case"Enter":if(d(!1),null==f||!f.nextQuestionId)return void o();s(i.find((function(e){return e.id===f.nextQuestionId})))}})),n.createElement(j,null,n.createElement(z,null,n.createElement(k,{text:l.text,onStart:function(){return d(!1)},onFinish:function(){return d(!0)}})),c&&n.createElement(B,null,function(){var e=l.answerIds;if(!e)return null;var t=x(e);return t?t.map((function(e){var t=(null==f?void 0:f.id)===(null==e?void 0:e.id),r=t?"yellow":"white";return e?n.createElement(A,{key:"answer_"+e.id},n.createElement(U,{color:r},t?"X":null),n.createElement(q,{key:e.id,onClick:function(){return function(e){d(!1),e.nextQuestionId?s(i.find((function(t){return t.id===e.nextQuestionId}))):o()}(e)},color:r},e.text)):null})):null}()))},j=i.div.withConfig({displayName:"QuestionDialog__Container",componentId:"sc-bxc5u0-0"})(["display:flex;word-break:break-all;box-sizing:border-box;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;"]),z=i.div.withConfig({displayName:"QuestionDialog__QuestionContainer",componentId:"sc-bxc5u0-1"})(["flex:100%;width:100%;"]),B=i.div.withConfig({displayName:"QuestionDialog__AnswersContainer",componentId:"sc-bxc5u0-2"})(["flex:100%;"]),q=i.p.withConfig({displayName:"QuestionDialog__Answer",componentId:"sc-bxc5u0-3"})(["flex:auto;color:"," !important;font-size:0.65rem !important;background:inherit;border:none;"],(function(e){return e.color})),U=i.span.withConfig({displayName:"QuestionDialog__AnswerSelectedIcon",componentId:"sc-bxc5u0-4"})(["flex:5% 0 0;color:"," !important;"],(function(e){return e.color})),A=i.div.withConfig({displayName:"QuestionDialog__AnswerRow",componentId:"sc-bxc5u0-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;}"]);(T=exports.NPCDialogType||(exports.NPCDialogType={})).TextOnly="TextOnly",T.TextAndThumbnail="TextAndThumbnail";var F,L=i.div.withConfig({displayName:"NPCDialog__Container",componentId:"sc-1b4aw74-0"})(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]),O=i.div.withConfig({displayName:"NPCDialog__TextContainer",componentId:"sc-1b4aw74-1"})(["flex:"," 0 0;width:355px;"],(function(e){return e.flex})),Q=i.div.withConfig({displayName:"NPCDialog__ThumbnailContainer",componentId:"sc-1b4aw74-2"})(["flex:30% 0 0;display:flex;justify-content:flex-end;"]),M=i.img.withConfig({displayName:"NPCDialog__NPCThumbnail",componentId:"sc-1b4aw74-3"})(["image-rendering:pixelated;height:128px;width:128px;"]),W=i.img.withConfig({displayName:"NPCDialog__PressSpaceIndicator",componentId:"sc-1b4aw74-4"})(["position:absolute;right:",";bottom:1rem;height:20.7px;image-rendering:-webkit-optimize-contrast;"],(function(e){return e.right})),H=i.span.withConfig({displayName:"ProgressBar__ProgressBarText",componentId:"sc-qa6fzh-0"})(["font-size:1rem;color:white;text-align:center;z-index:1;position:absolute;left:50%;transform:translateX(-50%);top:12px;"]),X=i.div.withConfig({displayName:"ProgressBar__TextOverlay",componentId:"sc-qa6fzh-1"})(["width:100%;position:relative;"]),J=i.div.withConfig({displayName:"ProgressBar__Container",componentId:"sc-qa6fzh-2"})(["display:flex;flex-direction:column;min-width:","px;width:","%;justify-content:start;align-items:flex-start;",""],(function(e){return e.minWidth}),(function(e){return e.percentageWidth}),(function(e){return e.style}));(F=exports.RangeSliderType||(exports.RangeSliderType={})).Slider="rpgui-slider",F.GoldSlider="rpgui-slider golden";var K=i.input.withConfig({displayName:"RangeSlider__Input",componentId:"sc-v8mte9-0"})(["opacity:0;"]),V=i.div.withConfig({displayName:"Truncate__Container",componentId:"sc-6x00qb-0"})(["display:-webkit-box;max-width:100%;max-height:100%;-webkit-line-clamp:",";-webkit-box-orient:vertical;overflow:hidden;"],(function(e){return e.maxLines}));exports.Button=c,exports.Chat=function(e){var i=e.chatMessages,o=e.onSendChatMessage,a=e.opacity,l=void 0===a?1:a,s=e.width,u=void 0===s?"100%":s,d=e.height,p=void 0===d?"250px":d,f=e.onCloseButton,b=t.useState(""),E=b[0],I=b[1];t.useEffect((function(){_()}),[]),t.useEffect((function(){_()}),[i]);var _=function(){var e=document.querySelector(".chat-body");e&&(e.scrollTop=e.scrollHeight)};return n.createElement(x,null,n.createElement(v,{type:exports.RPGUIContainerTypes.FramedGrey,width:u,height:p,className:"chat-container",opacity:l},f&&n.createElement(h,{onClick:f},"X"),n.createElement(m,{type:exports.RPGUIContainerTypes.FramedGrey,width:"100%",height:"80%",className:"chat-body dark-background"},i.length?i.map((function(e,t){var i=e.emitter,o=e.message;return n.createElement(C,{key:e._id+"_"+t},r(e.createdAt).format("HH:mm")+" "+i.name+": "+o)})):n.createElement(C,null,"No messages available.")),n.createElement(w,{onSubmit:function(e){e.preventDefault(),o(E),I("")}},n.createElement(g,{flex:70},n.createElement(y,{value:E,id:"inputMessage",onChange:function(e){I(e.target.value)},height:20,className:"dark-background",type:"text",autoComplete:"off"})),n.createElement(g,{justifyContent:"flex-end"},n.createElement(c,{buttonType:exports.ButtonTypes.RPGUIButton},"Send")))))},exports.CheckButton=function(e){var i=e.items,r=e.onChange,o=t.useState(function(){var e={};return i.forEach((function(t){e[t.label]=!1})),e}()),l=o[0],s=o[1];return t.useEffect((function(){l&&r(l)}),[l]),n.createElement("div",{id:"elemento-checkbox"},null==i?void 0:i.map((function(e,t){return n.createElement("div",{key:e.label+"_"+t},n.createElement("input",{className:"rpgui-checkbox",type:"checkbox",checked:l[e.label],onChange:function(){}}),n.createElement("label",{onClick:function(){var t,n;s(a({},l,((n={})[t=e.label]=!l[t],n)))}},e.label),n.createElement("br",null))})))},exports.Dropdown=function(e){var i=e.options,r=e.width,a=e.onChange,l=o.v4(),s=t.useState(""),u=s[0],c=s[1];return t.useEffect((function(){var e=document.getElementById("rpgui-dropdown-"+l),t=b.get_value(e);c(t),null==e||e.addEventListener("change",(function(e){c(null==e?void 0:e.target.value)}))}),[]),t.useEffect((function(){u&&a(u)}),[u]),n.createElement("select",{id:"rpgui-dropdown-"+l,style:{width:r},className:"rpgui-dropdown"},i.map((function(e){return n.createElement("option",{key:e.id,value:e.value},e.option)})))},exports.DynamicText=k,exports.Input=p,exports.InputRadio=function(e){var i=e.name,r=e.items,o=e.onChange,a=t.useState(),l=a[0],s=a[1],u=function(){var e=document.querySelector("input[name="+i+"]:checked");s(e.value)};return t.useEffect((function(){l&&o(l)}),[l]),n.createElement("div",{id:"elemento-radio"},r.map((function(e){return n.createElement(n.Fragment,null,n.createElement("input",{key:e.value,className:"rpgui-radio",value:e.value,name:i,type:"radio"}),n.createElement("label",{onClick:u},e.label),n.createElement("br",null))})))},exports.ListMenu=function(e){var t=e.onSelected,i=e.fontSize;return n.createElement(E,{x:e.x,y:e.y,fontSize:void 0===i?.8:i},n.createElement("ul",{className:"rpgui-list-imp",style:{overflow:"hidden"}},e.options.map((function(e){return n.createElement(I,{key:e.text,onClick:function(){t(e.id)}},e.text)}))))},exports.NPCDialog=function(e){var i=e.text,r=e.type,o=e.onClose,a=e.imagePath,l=e.isQuestionDialog,s=void 0!==l&&l,u=e.questions,c=e.answers,d=t.useState(!1),p=d[0],f=d[1];return n.createElement(m,{type:exports.RPGUIContainerTypes.FramedGold,width:s?"600px":"50%",height:"180px"},s&&u&&c?n.createElement(n.Fragment,null,n.createElement(O,{flex:r===exports.NPCDialogType.TextAndThumbnail?"70%":"100%"},n.createElement(G,{questions:u,answers:c,onClose:function(){o&&o()}})),r===exports.NPCDialogType.TextAndThumbnail&&n.createElement(Q,null,n.createElement(M,{src:a||_}))):n.createElement(n.Fragment,null,n.createElement(L,null,n.createElement(O,{flex:r===exports.NPCDialogType.TextAndThumbnail?"70%":"100%"},n.createElement(P,{onStartStep:function(){return f(!1)},onEndStep:function(){return f(!0)},text:i||"No text provided.",onClose:function(){o&&o()}})),r===exports.NPCDialogType.TextAndThumbnail&&n.createElement(Q,null,n.createElement(M,{src:a||_}))),p&&n.createElement(W,{right:r===exports.NPCDialogType.TextOnly?"1rem":"10.5rem",src:N})))},exports.ProgressBar=function(e){var t=e.max,i=e.value,r=e.color,o=e.displayText,a=void 0===o||o,l=e.percentageWidth,s=void 0===l?40:l,u=e.minWidth,c=void 0===u?100:u,d=e.style,p=function(e,t){return t>e&&(t=e),100*t/e};return n.createElement(J,{className:"rpgui-progress","data-value":p(t,i)/100,"data-rpguitype":"progress",percentageWidth:s,minWidth:c,style:d},a&&n.createElement(X,null,n.createElement(H,null,i,"/",t)),n.createElement("div",{className:" rpgui-progress-track"},n.createElement("div",{className:"rpgui-progress-fill "+r+" ",style:{left:"0px",width:p(t,i)+"%"}})),n.createElement("div",{className:" rpgui-progress-left-edge"}),n.createElement("div",{className:" rpgui-progress-right-edge"}))},exports.QuestionDialog=G,exports.RPGUIContainer=m,exports.RPGUIRoot=function(e){return n.createElement("div",{className:"rpgui-content"},e.children)},exports.RangeSlider=function(e){var i=e.type,r=e.valueMin,a=e.valueMax,l=e.width,s=e.onChange,u=o.v4(),c=t.useState(!1),d=c[0],p=c[1];R("mouseup",(function(){d&&m(),p(!1)}));var m=function(){var e=document.getElementById("rpgui-slider-"+u),t=b.get_value(e);s(Number(t))};return n.createElement("div",{onMouseUp:m,onMouseDown:function(){return p(!0)}},n.createElement(K,{className:i===exports.RangeSliderType.Slider?exports.RangeSliderType.Slider:exports.RangeSliderType.GoldSlider,type:"range",style:{width:l},min:r,max:a,id:"rpgui-slider-"+u}))},exports.TextArea=function(e){var t=a({},e);return n.createElement("textarea",Object.assign({},t))},exports.Truncate=function(e){var t=e.maxLines;return n.createElement(V,{maxLines:void 0===t?1:t},e.children)},exports._RPGUI=b,exports.useEventListener=R;
2
2
  //# sourceMappingURL=long-bow.cjs.production.min.js.map
package/dist/long-bow.cjs.production.min.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"long-bow.cjs.production.min.js","sources":["../src/components/Button.tsx","../src/components/RPGUIContainer.tsx","../src/components/RPGUIRoot.tsx","../src/components/ListMenu.tsx","../src/components/NPCDialog/img/npcDialog/npcThumbnails/alice.png","../src/components/NPCDialog/img/space.gif","../src/libs/StringHelpers.ts","../src/components/NPCDialog/NPCDialog.tsx","../src/components/typography/DynamicText.tsx","../src/components/NPCDialog/NPCDialogText.tsx","../src/hooks/useEventListener.ts","../src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx","../src/components/RangeSlider.tsx","../src/components/ProgressBar.tsx","../src/components/Truncate.tsx","../src/components/CheckButton.tsx","../src/components/Dropdown.tsx","../src/components/Input.tsx","../src/components/RadioButton.tsx","../src/components/TextArea.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\n\nexport enum ButtonTypes {\n RPGUIButton = 'rpgui-button',\n RPGUIGoldButton = 'rpgui-button golden',\n}\n\nexport interface IButtonProps {\n children: React.ReactNode;\n buttonType: ButtonTypes;\n}\n\nexport const Button: React.FC<\n IButtonProps &\n React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >\n> = ({ children, buttonType, ...props }) => {\n return (\n <ButtonContainer className={`${buttonType}`} {...props}>\n <p>{children}</p>\n </ButtonContainer>\n );\n};\n\nconst ButtonContainer = styled.button<any>`\n height: 45px;\n font-size: 11.5px;\n`;\n","import React from 'react';\nimport styled from 'styled-components';\n\nexport enum RPGUIContainerTypes {\n Framed = 'framed',\n FramedGold = 'framed-golden',\n FramedGold2 = 'framed-golden-2',\n FramedGrey = 'framed-grey',\n}\nexport interface IRPGUIContainerProps {\n type: RPGUIContainerTypes;\n children: React.ReactNode;\n width?: string;\n height?: string;\n className?: string;\n}\n\nexport const RPGUIContainer: React.FC<IRPGUIContainerProps> = ({\n children,\n type,\n width = '50%',\n height,\n className,\n}) => {\n return (\n <Container\n width={width}\n height={height || 'auto'}\n className={`rpgui-container ${type} ${className}`}\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 image-rendering: pixelated;\n`;\n","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';\n\ninterface IListMenuOption {\n id: string;\n text: string;\n}\n\nexport interface IListMenuProps {\n x: number;\n y: number;\n options: IListMenuOption[];\n onSelected: (selectedOptionId: string) => void;\n fontSize?: number;\n}\n\nexport const ListMenu: React.FC<IListMenuProps> = ({\n options,\n onSelected,\n x,\n y,\n fontSize = 0.8,\n}) => {\n return (\n <Container x={x} y={y} fontSize={fontSize}>\n <ul className=\"rpgui-list-imp\" style={{ overflow: 'hidden' }}>\n {options.map((params) => (\n <ListElement\n key={params.text}\n onClick={() => {\n onSelected(params.id);\n }}\n >\n {params.text}\n </ListElement>\n ))}\n </ul>\n </Container>\n );\n};\n\ninterface IContainerProps {\n x?: number;\n y?: number;\n fontSize?: number;\n}\n\nconst Container = styled.div<IContainerProps>`\n display: flex;\n flex-direction: column;\n width: 100%;\n justify-content: start;\n align-items: flex-start;\n position: absolute;\n top: ${(props) => props.y || 0}px;\n left: ${(props) => props.x || 0}px;\n\n li {\n font-size: ${(props) => props.fontSize}em;\n }\n`;\n\nconst ListElement = styled.li`\n margin-right: 0.5rem;\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 { RPGUIContainer, RPGUIContainerTypes } from '../RPGUIContainer';\nimport aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';\nimport pressSpaceGif from './img/space.gif';\nimport { NPCDialogText } from './NPCDialogText';\nimport {\n IQuestionDialog,\n IQuestionDialogAnswer,\n QuestionDialog,\n} from './QuestionDialog/QuestionDialog';\n\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 <RPGUIContainer\n type={RPGUIContainerTypes.FramedGold}\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 );\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 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, { 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 { _RPGUI } from './RPGUIRoot';\n\nexport enum RangeSliderType {\n Slider = 'rpgui-slider',\n GoldSlider = 'rpgui-slider golden',\n}\n\nexport interface IRangeSliderProps {\n type: RangeSliderType;\n valueMin: number;\n valueMax: number;\n width: string;\n onChange: (value: number) => void;\n}\n\nexport const RangeSlider: React.FC<IRangeSliderProps> = ({\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 <div\n onMouseUp={onHandleMouseUp}\n onMouseDown={() => setWasMouseDownFirst(true)}\n >\n <Input\n className={\n type === RangeSliderType.Slider\n ? RangeSliderType.Slider\n : RangeSliderType.GoldSlider\n }\n type=\"range\"\n style={{ width: width }}\n min={valueMin}\n max={valueMax}\n id={`rpgui-slider-${sliderId}`}\n />\n </div>\n );\n};\n\nconst Input = styled.input`\n opacity: 0;\n`;\n","import React from 'react';\nimport styled from 'styled-components';\n\nexport interface IBarProps {\n max: number;\n value: number;\n color: 'red' | 'blue' | 'green';\n style?: Record<string, any>;\n displayText?: boolean;\n percentageWidth?: number;\n minWidth?: number;\n}\n\nexport const ProgressBar: React.FC<IBarProps> = ({\n max,\n value,\n color,\n displayText = true,\n percentageWidth = 40,\n minWidth = 100,\n style,\n}) => {\n const calculatePercentageValue = function (max: number, value: number) {\n if (value > max) {\n value = max;\n }\n return (value * 100) / max;\n };\n\n return (\n <Container\n className=\"rpgui-progress\"\n data-value={calculatePercentageValue(max, value) / 100}\n data-rpguitype=\"progress\"\n percentageWidth={percentageWidth}\n minWidth={minWidth}\n style={style}\n >\n {displayText && (\n <TextOverlay>\n <ProgressBarText>\n {value}/{max}\n </ProgressBarText>\n </TextOverlay>\n )}\n <div className=\" rpgui-progress-track\">\n <div\n className={`rpgui-progress-fill ${color} `}\n style={{\n left: '0px',\n width: calculatePercentageValue(max, value) + '%',\n }}\n ></div>\n </div>\n <div className=\" rpgui-progress-left-edge\"></div>\n <div className=\" rpgui-progress-right-edge\"></div>\n </Container>\n );\n};\n\nconst ProgressBarText = styled.span`\n font-size: 1rem;\n color: white;\n text-align: center;\n z-index: 1;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n top: 12px;\n`;\n\nconst TextOverlay = styled.div`\n width: 100%;\n position: relative;\n`;\n\ninterface IContainerProps {\n percentageWidth?: number;\n minWidth?: number;\n style?: Record<string, any>;\n}\n\nconst Container = styled.div<IContainerProps>`\n display: flex;\n flex-direction: column;\n min-width: ${(props) => props.minWidth}px;\n width: ${(props) => props.percentageWidth}%;\n justify-content: start;\n align-items: flex-start;\n ${(props) => props.style}\n`;\n","/* eslint-disable react/require-default-props */\nimport React from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n maxLines?: number;\n children: React.ReactNode;\n}\n\nexport const Truncate: React.FC<IProps> = ({ maxLines = 1, children }) => {\n return <Container maxLines={maxLines}>{children}</Container>;\n};\n\ninterface IContainerProps {\n maxLines: number;\n}\n\nconst Container = styled.div<IContainerProps>`\n display: -webkit-box;\n max-width: 100%;\n max-height: 100%;\n -webkit-line-clamp: ${(props) => props.maxLines};\n -webkit-box-orient: vertical;\n overflow: hidden;\n`;\n","import React, { useEffect, useState } from 'react';\n\nexport interface ICheckItems {\n label: string;\n value: string;\n}\n\nexport interface ICheckProps {\n items: ICheckItems[];\n onChange: (selectedValues: IChecklistSelectedValues) => void;\n}\n\ninterface IChecklistSelectedValues {\n [label: string]: boolean;\n}\n\nexport const CheckButton: React.FC<ICheckProps> = ({ items, onChange }) => {\n const generateSelectedValuesList = () => {\n const selectedValues: IChecklistSelectedValues = {};\n\n items.forEach((item) => {\n selectedValues[item.label] = false;\n });\n\n return selectedValues;\n };\n\n const [selectedValues, setSelectedValues] =\n useState<IChecklistSelectedValues>(generateSelectedValuesList());\n\n const handleClick = (label: string) => {\n setSelectedValues({\n ...selectedValues,\n [label]: !selectedValues[label],\n });\n };\n\n useEffect(() => {\n if (selectedValues) {\n onChange(selectedValues);\n }\n }, [selectedValues]);\n\n return (\n <div id=\"elemento-checkbox\">\n {items?.map((element, index) => {\n return (\n <div key={`${element.label}_${index}`}>\n <input\n className=\"rpgui-checkbox\"\n type=\"checkbox\"\n checked={selectedValues[element.label]}\n onChange={() => {}}\n />\n <label onClick={() => handleClick(element.label)}>\n {element.label}\n </label>\n <br />\n </div>\n );\n })}\n </div>\n );\n};\n","import React, { useEffect, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { _RPGUI } from './RPGUIRoot';\n\nexport interface IOptionsProps {\n id: number;\n value: string;\n option: string;\n}\n\nexport interface IDropdownProps {\n options: IOptionsProps[];\n width?: string;\n onChange: (value: string) => void;\n}\n\nexport const Dropdown: React.FC<IDropdownProps> = ({\n options,\n width,\n onChange,\n}) => {\n const dropdownId = uuidv4();\n\n const [selectedValue, setSelectedValue] = useState<string>('');\n\n useEffect(() => {\n const element = document.getElementById(`rpgui-dropdown-${dropdownId}`);\n const dropdownValue = _RPGUI.get_value(element);\n setSelectedValue(dropdownValue);\n\n element?.addEventListener('change', (event: any) => {\n setSelectedValue(event?.target.value);\n });\n }, []);\n\n useEffect(() => {\n if (selectedValue) {\n onChange(selectedValue);\n }\n }, [selectedValue]);\n\n return (\n <select\n id={`rpgui-dropdown-${dropdownId}`}\n style={{ width: width }}\n className=\"rpgui-dropdown\"\n >\n {options.map((option) => {\n return (\n <option key={option.id} value={option.value}>\n {option.option}\n </option>\n );\n })}\n </select>\n );\n};\n","import React from 'react';\n\nexport interface IInputProps\n extends React.DetailedHTMLProps<\n React.InputHTMLAttributes<HTMLInputElement>,\n HTMLInputElement\n > {}\n\nexport const Input: React.FC<IInputProps> = ({ ...props }) => {\n return <input {...props} />;\n};\n","import React, { useEffect, useState } from 'react';\n\nexport interface IRadioItems {\n label: string;\n value: string;\n}\n\nexport interface IRadioProps {\n name: string;\n items: IRadioItems[];\n onChange: (value: string) => void;\n}\n\nexport const InputRadio: React.FC<IRadioProps> = ({\n name,\n items,\n onChange,\n}) => {\n const [selectedValue, setSelectedValue] = useState<string>();\n const handleClick = () => {\n let element = document.querySelector(\n `input[name=${name}]:checked`\n ) as HTMLInputElement;\n const elementValue = element.value;\n setSelectedValue(elementValue);\n };\n\n useEffect(() => {\n if (selectedValue) {\n onChange(selectedValue);\n }\n }, [selectedValue]);\n\n return (\n <div id=\"elemento-radio\">\n {items.map((element) => {\n return (\n <>\n <input\n key={element.value}\n className=\"rpgui-radio\"\n value={element.value}\n name={name}\n type=\"radio\"\n />\n <label onClick={handleClick}>{element.label}</label>\n <br />\n </>\n );\n })}\n </div>\n );\n};\n","import React from 'react';\n\nexport interface ITextArea\n extends React.DetailedHTMLProps<\n React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n HTMLTextAreaElement\n > {}\n\nexport const TextArea: React.FC<ITextArea> = ({ ...props }) => {\n return <textarea {...props} />;\n};\n"],"names":["ButtonTypes","RPGUIContainerTypes","ButtonContainer","styled","button","displayName","componentId","_RPGUI","RPGUI","Container","div","props","y","x","fontSize","ListElement","li","RPGUIContainer","width","React","height","className","type","children","img","require","NPCDialogType","DynamicText","text","onFinish","onStart","useState","textState","setTextState","useEffect","i","interval","setInterval","length","substring","clearInterval","TextContainer","p","NPCDialogText","onClose","onEndStep","onStartStep","textChunks","match","RegExp","chunkIndex","setChunkIndex","onHandleSpacePress","event","code","prev","document","addEventListener","removeEventListener","useEventListener","handler","el","window","savedHandler","useRef","current","listener","e","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","RangeSliderType","flex","ThumbnailContainer","NPCThumbnail","PressSpaceIndicator","right","ProgressBarText","TextOverlay","minWidth","percentageWidth","style","Input","input","maxLines","buttonType","items","onChange","selectedValues","forEach","item","label","generateSelectedValuesList","setSelectedValues","element","index","checked","options","dropdownId","uuidv4","selectedValue","setSelectedValue","getElementById","dropdownValue","get_value","target","value","option","name","handleClick","querySelector","onSelected","overflow","params","imagePath","isQuestionDialog","showGoNextIndicator","setShowGoNextIndicator","FramedGold","TextAndThumbnail","src","aliceDefaultThumbnail","TextOnly","pressSpaceGif","max","displayText","calculatePercentageValue","left","valueMin","valueMax","sliderId","wasMouseDownFirst","setWasMouseDownFirst","onHandleMouseUp","rpguiSlider","Number","onMouseUp","onMouseDown","Slider","GoldSlider","min"],"mappings":"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"}
1
+ {"version":3,"file":"long-bow.cjs.production.min.js","sources":["../src/components/Button.tsx","../src/components/RPGUIContainer.tsx","../src/components/Input.tsx","../src/components/shared/Column.tsx","../src/components/Chat/Chat.tsx","../src/constants/uiColors.ts","../src/components/RPGUIRoot.tsx","../src/components/ListMenu.tsx","../src/components/NPCDialog/img/npcDialog/npcThumbnails/alice.png","../src/components/NPCDialog/img/space.gif","../src/libs/StringHelpers.ts","../src/components/NPCDialog/NPCDialog.tsx","../src/components/typography/DynamicText.tsx","../src/components/NPCDialog/NPCDialogText.tsx","../src/hooks/useEventListener.ts","../src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx","../src/components/RangeSlider.tsx","../src/components/ProgressBar.tsx","../src/components/Truncate.tsx","../src/components/CheckButton.tsx","../src/components/Dropdown.tsx","../src/components/RadioButton.tsx","../src/components/TextArea.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\n\nexport enum ButtonTypes {\n RPGUIButton = 'rpgui-button',\n RPGUIGoldButton = 'rpgui-button golden',\n}\n\nexport interface IButtonProps {\n children: React.ReactNode;\n buttonType: ButtonTypes;\n}\n\nexport const Button: React.FC<\n IButtonProps &\n React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >\n> = ({ children, buttonType, ...props }) => {\n return (\n <ButtonContainer className={`${buttonType}`} {...props}>\n <p>{children}</p>\n </ButtonContainer>\n );\n};\n\nconst ButtonContainer = styled.button<any>`\n height: 45px;\n font-size: 11.5px;\n`;\n","import React from 'react';\nimport styled from 'styled-components';\n\nexport enum RPGUIContainerTypes {\n Framed = 'framed',\n FramedGold = 'framed-golden',\n FramedGold2 = 'framed-golden-2',\n FramedGrey = 'framed-grey',\n}\nexport interface IRPGUIContainerProps {\n type: RPGUIContainerTypes;\n children: React.ReactNode;\n width?: string;\n height?: string;\n className?: string;\n}\n\nexport const RPGUIContainer: React.FC<IRPGUIContainerProps> = ({\n children,\n type,\n width = '50%',\n height,\n className,\n}) => {\n return (\n <Container\n width={width}\n height={height || 'auto'}\n className={`rpgui-container ${type} ${className}`}\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 image-rendering: pixelated;\n`;\n","import React from 'react';\n\nexport interface IInputProps\n extends React.DetailedHTMLProps<\n React.InputHTMLAttributes<HTMLInputElement>,\n HTMLInputElement\n > {}\n\nexport const Input: React.FC<IInputProps> = ({ ...props }) => {\n return <input {...props} />;\n};\n","import styled from 'styled-components';\n\ninterface IColumn {\n flex?: number;\n alignItems?: string;\n justifyContent?: string;\n flexWrap?: string;\n}\n\nexport const Column = styled.div<IColumn>`\n flex: ${(props) => props.flex || 'auto'};\n display: flex;\n flex-wrap: ${(props) => props.flexWrap || 'nowrap'};\n align-items: ${(props) => props.alignItems || 'flex-start'};\n justify-content: ${(props) => props.justifyContent || 'flex-start'};\n`;\n","import { IChatMessage } from '@rpg-engine/shared';\nimport dayjs from 'dayjs';\nimport React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { colors } from '../../constants/uiColors';\nimport { Button, ButtonTypes } from '../Button';\nimport { Input } from '../Input';\nimport { RPGUIContainer, RPGUIContainerTypes } from '../RPGUIContainer';\nimport { Column } from '../shared/Column';\n\nexport interface IChatProps {\n chatMessages: IChatMessage[];\n onSendChatMessage: (message: string) => void;\n onCloseButton: () => void;\n opacity?: number;\n width?: string;\n height?: string;\n}\n\nexport const Chat: React.FC<IChatProps> = ({\n chatMessages,\n onSendChatMessage,\n opacity = 1,\n width = '100%',\n height = '250px',\n onCloseButton,\n}) => {\n const [message, setMessage] = useState('');\n\n useEffect(() => {\n scrollChatToBottom();\n }, []);\n\n useEffect(() => {\n scrollChatToBottom();\n }, [chatMessages]);\n\n const scrollChatToBottom = () => {\n const scrollingElement = document.querySelector('.chat-body');\n if (scrollingElement) {\n scrollingElement.scrollTop = scrollingElement.scrollHeight;\n }\n };\n\n const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {\n event.preventDefault();\n onSendChatMessage(message);\n setMessage('');\n };\n const getInputValue = (value: string) => {\n setMessage(value);\n };\n\n return (\n <Container>\n <CustomContainer\n type={RPGUIContainerTypes.FramedGrey}\n width={width}\n height={height}\n className=\"chat-container\"\n opacity={opacity}\n >\n {onCloseButton && <CloseButton onClick={onCloseButton}>X</CloseButton>}\n <RPGUIContainer\n type={RPGUIContainerTypes.FramedGrey}\n width={'100%'}\n height={'80%'}\n className=\"chat-body dark-background\"\n >\n {chatMessages.length ? (\n chatMessages.map(({ _id, createdAt, emitter, message }, index) => (\n <MessageText key={`${_id}_${index}`}>{`${dayjs(createdAt).format(\n 'HH:mm'\n )} ${emitter.name}: ${message}`}</MessageText>\n ))\n ) : (\n <MessageText>No messages available.</MessageText>\n )}\n </RPGUIContainer>\n\n <Form onSubmit={handleSubmit}>\n <Column flex={70}>\n <CustomInput\n value={message}\n id=\"inputMessage\"\n onChange={(e) => getInputValue(e.target.value)}\n height={20}\n className=\"dark-background\"\n type=\"text\"\n autoComplete=\"off\"\n />\n </Column>\n <Column justifyContent=\"flex-end\">\n <Button buttonType={ButtonTypes.RPGUIButton}>Send</Button>\n </Column>\n </Form>\n </CustomContainer>\n </Container>\n );\n};\n\nconst Container = styled.div`\n position: relative;\n`;\n\nconst CloseButton = styled.div`\n position: absolute;\n top: 3px;\n right: 0px;\n color: white;\n z-index: 22;\n font-size: 10px;\n`;\n\nconst CustomInput = styled(Input)`\n height: 30px;\n width: 100%;\n\n .rpgui-content .input {\n min-height: 39px;\n }\n`;\n\ninterface ICustomContainerProps {\n opacity: number;\n}\n\nconst CustomContainer = styled(RPGUIContainer)`\n display: block;\n\n opacity: ${(props: ICustomContainerProps) => props.opacity};\n\n &:hover {\n opacity: 1;\n }\n\n .dark-background {\n background-color: ${colors.darkGrey} !important;\n }\n\n .chat-body {\n &.rpgui-container.framed-grey {\n background: unset;\n }\n max-height: 170px;\n overflow-y: auto;\n }\n`;\n\nconst Form = styled.form`\n display: flex;\n width: 100%;\n justify-content: center;\n align-items: center;\n`;\n\nconst MessageText = styled.p`\n display: block !important;\n width: 100%;\n font-size: 0.7rem !important;\n overflow-y: auto;\n margin: 0;\n`;\n","export const colors = {\n darkGrey: '#3e3e3e',\n};\n","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';\n\ninterface IListMenuOption {\n id: string;\n text: string;\n}\n\nexport interface IListMenuProps {\n x: number;\n y: number;\n options: IListMenuOption[];\n onSelected: (selectedOptionId: string) => void;\n fontSize?: number;\n}\n\nexport const ListMenu: React.FC<IListMenuProps> = ({\n options,\n onSelected,\n x,\n y,\n fontSize = 0.8,\n}) => {\n return (\n <Container x={x} y={y} fontSize={fontSize}>\n <ul className=\"rpgui-list-imp\" style={{ overflow: 'hidden' }}>\n {options.map((params) => (\n <ListElement\n key={params.text}\n onClick={() => {\n onSelected(params.id);\n }}\n >\n {params.text}\n </ListElement>\n ))}\n </ul>\n </Container>\n );\n};\n\ninterface IContainerProps {\n x?: number;\n y?: number;\n fontSize?: number;\n}\n\nconst Container = styled.div<IContainerProps>`\n display: flex;\n flex-direction: column;\n width: 100%;\n justify-content: start;\n align-items: flex-start;\n position: absolute;\n top: ${(props) => props.y || 0}px;\n left: ${(props) => props.x || 0}px;\n\n li {\n font-size: ${(props) => props.fontSize}em;\n }\n`;\n\nconst ListElement = styled.li`\n margin-right: 0.5rem;\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 { RPGUIContainer, RPGUIContainerTypes } from '../RPGUIContainer';\nimport aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';\nimport pressSpaceGif from './img/space.gif';\nimport { NPCDialogText } from './NPCDialogText';\nimport {\n IQuestionDialog,\n IQuestionDialogAnswer,\n QuestionDialog,\n} from './QuestionDialog/QuestionDialog';\n\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 <RPGUIContainer\n type={RPGUIContainerTypes.FramedGold}\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 );\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 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, { 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 { _RPGUI } from './RPGUIRoot';\n\nexport enum RangeSliderType {\n Slider = 'rpgui-slider',\n GoldSlider = 'rpgui-slider golden',\n}\n\nexport interface IRangeSliderProps {\n type: RangeSliderType;\n valueMin: number;\n valueMax: number;\n width: string;\n onChange: (value: number) => void;\n}\n\nexport const RangeSlider: React.FC<IRangeSliderProps> = ({\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 <div\n onMouseUp={onHandleMouseUp}\n onMouseDown={() => setWasMouseDownFirst(true)}\n >\n <Input\n className={\n type === RangeSliderType.Slider\n ? RangeSliderType.Slider\n : RangeSliderType.GoldSlider\n }\n type=\"range\"\n style={{ width: width }}\n min={valueMin}\n max={valueMax}\n id={`rpgui-slider-${sliderId}`}\n />\n </div>\n );\n};\n\nconst Input = styled.input`\n opacity: 0;\n`;\n","import React from 'react';\nimport styled from 'styled-components';\n\nexport interface IBarProps {\n max: number;\n value: number;\n color: 'red' | 'blue' | 'green';\n style?: Record<string, any>;\n displayText?: boolean;\n percentageWidth?: number;\n minWidth?: number;\n}\n\nexport const ProgressBar: React.FC<IBarProps> = ({\n max,\n value,\n color,\n displayText = true,\n percentageWidth = 40,\n minWidth = 100,\n style,\n}) => {\n const calculatePercentageValue = function (max: number, value: number) {\n if (value > max) {\n value = max;\n }\n return (value * 100) / max;\n };\n\n return (\n <Container\n className=\"rpgui-progress\"\n data-value={calculatePercentageValue(max, value) / 100}\n data-rpguitype=\"progress\"\n percentageWidth={percentageWidth}\n minWidth={minWidth}\n style={style}\n >\n {displayText && (\n <TextOverlay>\n <ProgressBarText>\n {value}/{max}\n </ProgressBarText>\n </TextOverlay>\n )}\n <div className=\" rpgui-progress-track\">\n <div\n className={`rpgui-progress-fill ${color} `}\n style={{\n left: '0px',\n width: calculatePercentageValue(max, value) + '%',\n }}\n ></div>\n </div>\n <div className=\" rpgui-progress-left-edge\"></div>\n <div className=\" rpgui-progress-right-edge\"></div>\n </Container>\n );\n};\n\nconst ProgressBarText = styled.span`\n font-size: 1rem;\n color: white;\n text-align: center;\n z-index: 1;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n top: 12px;\n`;\n\nconst TextOverlay = styled.div`\n width: 100%;\n position: relative;\n`;\n\ninterface IContainerProps {\n percentageWidth?: number;\n minWidth?: number;\n style?: Record<string, any>;\n}\n\nconst Container = styled.div<IContainerProps>`\n display: flex;\n flex-direction: column;\n min-width: ${(props) => props.minWidth}px;\n width: ${(props) => props.percentageWidth}%;\n justify-content: start;\n align-items: flex-start;\n ${(props) => props.style}\n`;\n","/* eslint-disable react/require-default-props */\nimport React from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n maxLines?: number;\n children: React.ReactNode;\n}\n\nexport const Truncate: React.FC<IProps> = ({ maxLines = 1, children }) => {\n return <Container maxLines={maxLines}>{children}</Container>;\n};\n\ninterface IContainerProps {\n maxLines: number;\n}\n\nconst Container = styled.div<IContainerProps>`\n display: -webkit-box;\n max-width: 100%;\n max-height: 100%;\n -webkit-line-clamp: ${(props) => props.maxLines};\n -webkit-box-orient: vertical;\n overflow: hidden;\n`;\n","import React, { useEffect, useState } from 'react';\n\nexport interface ICheckItems {\n label: string;\n value: string;\n}\n\nexport interface ICheckProps {\n items: ICheckItems[];\n onChange: (selectedValues: IChecklistSelectedValues) => void;\n}\n\ninterface IChecklistSelectedValues {\n [label: string]: boolean;\n}\n\nexport const CheckButton: React.FC<ICheckProps> = ({ items, onChange }) => {\n const generateSelectedValuesList = () => {\n const selectedValues: IChecklistSelectedValues = {};\n\n items.forEach((item) => {\n selectedValues[item.label] = false;\n });\n\n return selectedValues;\n };\n\n const [selectedValues, setSelectedValues] =\n useState<IChecklistSelectedValues>(generateSelectedValuesList());\n\n const handleClick = (label: string) => {\n setSelectedValues({\n ...selectedValues,\n [label]: !selectedValues[label],\n });\n };\n\n useEffect(() => {\n if (selectedValues) {\n onChange(selectedValues);\n }\n }, [selectedValues]);\n\n return (\n <div id=\"elemento-checkbox\">\n {items?.map((element, index) => {\n return (\n <div key={`${element.label}_${index}`}>\n <input\n className=\"rpgui-checkbox\"\n type=\"checkbox\"\n checked={selectedValues[element.label]}\n onChange={() => {}}\n />\n <label onClick={() => handleClick(element.label)}>\n {element.label}\n </label>\n <br />\n </div>\n );\n })}\n </div>\n );\n};\n","import React, { useEffect, useState } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\nimport { _RPGUI } from './RPGUIRoot';\n\nexport interface IOptionsProps {\n id: number;\n value: string;\n option: string;\n}\n\nexport interface IDropdownProps {\n options: IOptionsProps[];\n width?: string;\n onChange: (value: string) => void;\n}\n\nexport const Dropdown: React.FC<IDropdownProps> = ({\n options,\n width,\n onChange,\n}) => {\n const dropdownId = uuidv4();\n\n const [selectedValue, setSelectedValue] = useState<string>('');\n\n useEffect(() => {\n const element = document.getElementById(`rpgui-dropdown-${dropdownId}`);\n const dropdownValue = _RPGUI.get_value(element);\n setSelectedValue(dropdownValue);\n\n element?.addEventListener('change', (event: any) => {\n setSelectedValue(event?.target.value);\n });\n }, []);\n\n useEffect(() => {\n if (selectedValue) {\n onChange(selectedValue);\n }\n }, [selectedValue]);\n\n return (\n <select\n id={`rpgui-dropdown-${dropdownId}`}\n style={{ width: width }}\n className=\"rpgui-dropdown\"\n >\n {options.map((option) => {\n return (\n <option key={option.id} value={option.value}>\n {option.option}\n </option>\n );\n })}\n </select>\n );\n};\n","import React, { useEffect, useState } from 'react';\n\nexport interface IRadioItems {\n label: string;\n value: string;\n}\n\nexport interface IRadioProps {\n name: string;\n items: IRadioItems[];\n onChange: (value: string) => void;\n}\n\nexport const InputRadio: React.FC<IRadioProps> = ({\n name,\n items,\n onChange,\n}) => {\n const [selectedValue, setSelectedValue] = useState<string>();\n const handleClick = () => {\n let element = document.querySelector(\n `input[name=${name}]:checked`\n ) as HTMLInputElement;\n const elementValue = element.value;\n setSelectedValue(elementValue);\n };\n\n useEffect(() => {\n if (selectedValue) {\n onChange(selectedValue);\n }\n }, [selectedValue]);\n\n return (\n <div id=\"elemento-radio\">\n {items.map((element) => {\n return (\n <>\n <input\n key={element.value}\n className=\"rpgui-radio\"\n value={element.value}\n name={name}\n type=\"radio\"\n />\n <label onClick={handleClick}>{element.label}</label>\n <br />\n </>\n );\n })}\n </div>\n );\n};\n","import React from 'react';\n\nexport interface ITextArea\n extends React.DetailedHTMLProps<\n React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n HTMLTextAreaElement\n > {}\n\nexport const TextArea: React.FC<ITextArea> = ({ ...props }) => {\n return <textarea {...props} />;\n};\n"],"names":["ButtonTypes","RPGUIContainerTypes","Button","children","buttonType","props","React","ButtonContainer","className","styled","button","displayName","componentId","Input","RPGUIContainer","width","Container","height","type","div","Column","flex","flexWrap","alignItems","justifyContent","CloseButton","CustomInput","CustomContainer","opacity","Form","form","MessageText","p","_RPGUI","RPGUI","y","x","fontSize","ListElement","li","img","require","NPCDialogType","DynamicText","text","onFinish","onStart","useState","textState","setTextState","useEffect","i","interval","setInterval","length","substring","clearInterval","TextContainer","NPCDialogText","onClose","onEndStep","onStartStep","textChunks","match","RegExp","chunkIndex","setChunkIndex","onHandleSpacePress","event","code","prev","document","addEventListener","removeEventListener","useEventListener","handler","el","window","savedHandler","useRef","current","listener","e","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","RangeSliderType","ThumbnailContainer","NPCThumbnail","PressSpaceIndicator","right","ProgressBarText","TextOverlay","minWidth","percentageWidth","style","input","maxLines","chatMessages","onSendChatMessage","onCloseButton","message","setMessage","scrollChatToBottom","scrollingElement","querySelector","scrollTop","scrollHeight","FramedGrey","index","emitter","_id","dayjs","createdAt","format","name","onSubmit","preventDefault","value","onChange","target","autoComplete","RPGUIButton","items","selectedValues","forEach","item","label","generateSelectedValuesList","setSelectedValues","element","checked","options","dropdownId","uuidv4","selectedValue","setSelectedValue","getElementById","dropdownValue","get_value","option","handleClick","onSelected","overflow","params","imagePath","isQuestionDialog","showGoNextIndicator","setShowGoNextIndicator","FramedGold","TextAndThumbnail","src","aliceDefaultThumbnail","TextOnly","pressSpaceGif","max","displayText","calculatePercentageValue","left","valueMin","valueMax","sliderId","wasMouseDownFirst","setWasMouseDownFirst","onHandleMouseUp","rpguiSlider","Number","onMouseUp","onMouseDown","Slider","GoldSlider","min"],"mappings":"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"}
package/dist/long-bow.esm.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React, { useState, useEffect } from 'react';
2
2
  import styled from 'styled-components';
3
+ import dayjs from 'dayjs';
3
4
  import { v4 } from 'uuid';
4
5
  import 'rpgui/rpgui.min.css';
5
6
  import 'rpgui/rpgui.min.js';
@@ -104,6 +105,169 @@ var CheckButton = function CheckButton(_ref) {
104
105
  }));
105
106
  };
106
107
 
108
+ var colors = {
109
+ darkGrey: '#3e3e3e'
110
+ };
111
+
112
+ var Input = function Input(_ref) {
113
+ var props = _extends({}, _ref);
114
+
115
+ return React.createElement("input", Object.assign({}, props));
116
+ };
117
+
118
+ var RPGUIContainerTypes;
119
+
120
+ (function (RPGUIContainerTypes) {
121
+ RPGUIContainerTypes["Framed"] = "framed";
122
+ RPGUIContainerTypes["FramedGold"] = "framed-golden";
123
+ RPGUIContainerTypes["FramedGold2"] = "framed-golden-2";
124
+ RPGUIContainerTypes["FramedGrey"] = "framed-grey";
125
+ })(RPGUIContainerTypes || (RPGUIContainerTypes = {}));
126
+
127
+ var RPGUIContainer = function RPGUIContainer(_ref) {
128
+ var children = _ref.children,
129
+ type = _ref.type,
130
+ _ref$width = _ref.width,
131
+ width = _ref$width === void 0 ? '50%' : _ref$width,
132
+ height = _ref.height,
133
+ className = _ref.className;
134
+ return React.createElement(Container, {
135
+ width: width,
136
+ height: height || 'auto',
137
+ className: "rpgui-container " + type + " " + className
138
+ }, children);
139
+ };
140
+ var Container = /*#__PURE__*/styled.div.withConfig({
141
+ displayName: "RPGUIContainer__Container",
142
+ componentId: "sc-a8l4p8-0"
143
+ })(["height:", ";width:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;"], function (props) {
144
+ return props.height;
145
+ }, function (_ref2) {
146
+ var width = _ref2.width;
147
+ return width;
148
+ });
149
+
150
+ var Column = /*#__PURE__*/styled.div.withConfig({
151
+ displayName: "Column",
152
+ componentId: "sc-1pesqff-0"
153
+ })(["flex:", ";display:flex;flex-wrap:", ";align-items:", ";justify-content:", ";"], function (props) {
154
+ return props.flex || 'auto';
155
+ }, function (props) {
156
+ return props.flexWrap || 'nowrap';
157
+ }, function (props) {
158
+ return props.alignItems || 'flex-start';
159
+ }, function (props) {
160
+ return props.justifyContent || 'flex-start';
161
+ });
162
+
163
+ var Chat = function Chat(_ref) {
164
+ var chatMessages = _ref.chatMessages,
165
+ onSendChatMessage = _ref.onSendChatMessage,
166
+ _ref$opacity = _ref.opacity,
167
+ opacity = _ref$opacity === void 0 ? 1 : _ref$opacity,
168
+ _ref$width = _ref.width,
169
+ width = _ref$width === void 0 ? '100%' : _ref$width,
170
+ _ref$height = _ref.height,
171
+ height = _ref$height === void 0 ? '250px' : _ref$height,
172
+ onCloseButton = _ref.onCloseButton;
173
+
174
+ var _useState = useState(''),
175
+ message = _useState[0],
176
+ setMessage = _useState[1];
177
+
178
+ useEffect(function () {
179
+ scrollChatToBottom();
180
+ }, []);
181
+ useEffect(function () {
182
+ scrollChatToBottom();
183
+ }, [chatMessages]);
184
+
185
+ var scrollChatToBottom = function scrollChatToBottom() {
186
+ var scrollingElement = document.querySelector('.chat-body');
187
+
188
+ if (scrollingElement) {
189
+ scrollingElement.scrollTop = scrollingElement.scrollHeight;
190
+ }
191
+ };
192
+
193
+ var handleSubmit = function handleSubmit(event) {
194
+ event.preventDefault();
195
+ onSendChatMessage(message);
196
+ setMessage('');
197
+ };
198
+
199
+ var getInputValue = function getInputValue(value) {
200
+ setMessage(value);
201
+ };
202
+
203
+ return React.createElement(Container$1, null, React.createElement(CustomContainer, {
204
+ type: RPGUIContainerTypes.FramedGrey,
205
+ width: width,
206
+ height: height,
207
+ className: "chat-container",
208
+ opacity: opacity
209
+ }, onCloseButton && React.createElement(CloseButton, {
210
+ onClick: onCloseButton
211
+ }, "X"), React.createElement(RPGUIContainer, {
212
+ type: RPGUIContainerTypes.FramedGrey,
213
+ width: '100%',
214
+ height: '80%',
215
+ className: "chat-body dark-background"
216
+ }, chatMessages.length ? chatMessages.map(function (_ref2, index) {
217
+ var _id = _ref2._id,
218
+ createdAt = _ref2.createdAt,
219
+ emitter = _ref2.emitter,
220
+ message = _ref2.message;
221
+ return React.createElement(MessageText, {
222
+ key: _id + "_" + index
223
+ }, dayjs(createdAt).format('HH:mm') + " " + emitter.name + ": " + message);
224
+ }) : React.createElement(MessageText, null, "No messages available.")), React.createElement(Form, {
225
+ onSubmit: handleSubmit
226
+ }, React.createElement(Column, {
227
+ flex: 70
228
+ }, React.createElement(CustomInput, {
229
+ value: message,
230
+ id: "inputMessage",
231
+ onChange: function onChange(e) {
232
+ return getInputValue(e.target.value);
233
+ },
234
+ height: 20,
235
+ className: "dark-background",
236
+ type: "text",
237
+ autoComplete: "off"
238
+ })), React.createElement(Column, {
239
+ justifyContent: "flex-end"
240
+ }, React.createElement(Button, {
241
+ buttonType: ButtonTypes.RPGUIButton
242
+ }, "Send")))));
243
+ };
244
+ var Container$1 = /*#__PURE__*/styled.div.withConfig({
245
+ displayName: "Chat__Container",
246
+ componentId: "sc-1bk05n6-0"
247
+ })(["position:relative;"]);
248
+ var CloseButton = /*#__PURE__*/styled.div.withConfig({
249
+ displayName: "Chat__CloseButton",
250
+ componentId: "sc-1bk05n6-1"
251
+ })(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:10px;"]);
252
+ var CustomInput = /*#__PURE__*/styled(Input).withConfig({
253
+ displayName: "Chat__CustomInput",
254
+ componentId: "sc-1bk05n6-2"
255
+ })(["height:30px;width:100%;.rpgui-content .input{min-height:39px;}"]);
256
+ var CustomContainer = /*#__PURE__*/styled(RPGUIContainer).withConfig({
257
+ displayName: "Chat__CustomContainer",
258
+ componentId: "sc-1bk05n6-3"
259
+ })(["display:block;opacity:", ";&:hover{opacity:1;}.dark-background{background-color:", " !important;}.chat-body{&.rpgui-container.framed-grey{background:unset;}max-height:170px;overflow-y:auto;}"], function (props) {
260
+ return props.opacity;
261
+ }, colors.darkGrey);
262
+ var Form = /*#__PURE__*/styled.form.withConfig({
263
+ displayName: "Chat__Form",
264
+ componentId: "sc-1bk05n6-4"
265
+ })(["display:flex;width:100%;justify-content:center;align-items:center;"]);
266
+ var MessageText = /*#__PURE__*/styled.p.withConfig({
267
+ displayName: "Chat__MessageText",
268
+ componentId: "sc-1bk05n6-5"
269
+ })(["display:block !important;width:100%;font-size:0.7rem !important;overflow-y:auto;margin:0;"]);
270
+
107
271
  var _RPGUI = RPGUI;
108
272
  var RPGUIRoot = function RPGUIRoot(_ref) {
109
273
  var children = _ref.children;
@@ -151,12 +315,6 @@ var Dropdown = function Dropdown(_ref) {
151
315
  }));
152
316
  };
153
317
 
154
- var Input = function Input(_ref) {
155
- var props = _extends({}, _ref);
156
-
157
- return React.createElement("input", Object.assign({}, props));
158
- };
159
-
160
318
  var ListMenu = function ListMenu(_ref) {
161
319
  var options = _ref.options,
162
320
  onSelected = _ref.onSelected,
@@ -164,7 +322,7 @@ var ListMenu = function ListMenu(_ref) {
164
322
  y = _ref.y,
165
323
  _ref$fontSize = _ref.fontSize,
166
324
  fontSize = _ref$fontSize === void 0 ? 0.8 : _ref$fontSize;
167
- return React.createElement(Container, {
325
+ return React.createElement(Container$2, {
168
326
  x: x,
169
327
  y: y,
170
328
  fontSize: fontSize
@@ -182,7 +340,7 @@ var ListMenu = function ListMenu(_ref) {
182
340
  }, params.text);
183
341
  })));
184
342
  };
185
- var Container = /*#__PURE__*/styled.div.withConfig({
343
+ var Container$2 = /*#__PURE__*/styled.div.withConfig({
186
344
  displayName: "ListMenu__Container",
187
345
  componentId: "sc-i9097t-0"
188
346
  })(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;position:absolute;top:", "px;left:", "px;li{font-size:", "em;}"], function (props) {
@@ -197,38 +355,6 @@ var ListElement = /*#__PURE__*/styled.li.withConfig({
197
355
  componentId: "sc-i9097t-1"
198
356
  })(["margin-right:0.5rem;"]);
199
357
 
200
- var RPGUIContainerTypes;
201
-
202
- (function (RPGUIContainerTypes) {
203
- RPGUIContainerTypes["Framed"] = "framed";
204
- RPGUIContainerTypes["FramedGold"] = "framed-golden";
205
- RPGUIContainerTypes["FramedGold2"] = "framed-golden-2";
206
- RPGUIContainerTypes["FramedGrey"] = "framed-grey";
207
- })(RPGUIContainerTypes || (RPGUIContainerTypes = {}));
208
-
209
- var RPGUIContainer = function RPGUIContainer(_ref) {
210
- var children = _ref.children,
211
- type = _ref.type,
212
- _ref$width = _ref.width,
213
- width = _ref$width === void 0 ? '50%' : _ref$width,
214
- height = _ref.height,
215
- className = _ref.className;
216
- return React.createElement(Container$1, {
217
- width: width,
218
- height: height || 'auto',
219
- className: "rpgui-container " + type + " " + className
220
- }, children);
221
- };
222
- var Container$1 = /*#__PURE__*/styled.div.withConfig({
223
- displayName: "RPGUIContainer__Container",
224
- componentId: "sc-a8l4p8-0"
225
- })(["height:", ";width:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;"], function (props) {
226
- return props.height;
227
- }, function (_ref2) {
228
- var width = _ref2.width;
229
- return width;
230
- });
231
-
232
358
  const img = require('./alice.png');
233
359
 
234
360
  const img$1 = require('./space.gif');
@@ -310,13 +436,13 @@ var NPCDialogText = function NPCDialogText(_ref) {
310
436
  return document.removeEventListener('keydown', onHandleSpacePress);
311
437
  };
312
438
  }, [chunkIndex]);
313
- return React.createElement(Container$2, null, React.createElement(DynamicText, {
439
+ return React.createElement(Container$3, null, React.createElement(DynamicText, {
314
440
  text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
315
441
  onFinish: onEndStep,
316
442
  onStart: onStartStep
317
443
  }));
318
444
  };
319
- var Container$2 = /*#__PURE__*/styled.div.withConfig({
445
+ var Container$3 = /*#__PURE__*/styled.div.withConfig({
320
446
  displayName: "NPCDialogText__Container",
321
447
  componentId: "sc-1cxkdh9-0"
322
448
  })([""]);
@@ -488,7 +614,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
488
614
  });
489
615
  };
490
616
 
491
- return React.createElement(Container$3, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
617
+ return React.createElement(Container$4, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
492
618
  text: currentQuestion.text,
493
619
  onStart: function onStart() {
494
620
  return setCanShowAnswers(false);
@@ -498,7 +624,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
498
624
  }
499
625
  })), canShowAnswers && React.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
500
626
  };
501
- var Container$3 = /*#__PURE__*/styled.div.withConfig({
627
+ var Container$4 = /*#__PURE__*/styled.div.withConfig({
502
628
  displayName: "QuestionDialog__Container",
503
629
  componentId: "sc-bxc5u0-0"
504
630
  })(["display:flex;word-break:break-all;box-sizing:border-box;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;"]);
@@ -564,7 +690,7 @@ var NPCDialog = function NPCDialog(_ref) {
564
690
  }
565
691
  })), type === NPCDialogType.TextAndThumbnail && React.createElement(ThumbnailContainer, null, React.createElement(NPCThumbnail, {
566
692
  src: imagePath || img
567
- }))) : React.createElement(React.Fragment, null, React.createElement(Container$4, null, React.createElement(TextContainer$1, {
693
+ }))) : React.createElement(React.Fragment, null, React.createElement(Container$5, null, React.createElement(TextContainer$1, {
568
694
  flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
569
695
  }, React.createElement(NPCDialogText, {
570
696
  onStartStep: function onStartStep() {
@@ -586,7 +712,7 @@ var NPCDialog = function NPCDialog(_ref) {
586
712
  src: img$1
587
713
  })));
588
714
  };
589
- var Container$4 = /*#__PURE__*/styled.div.withConfig({
715
+ var Container$5 = /*#__PURE__*/styled.div.withConfig({
590
716
  displayName: "NPCDialog__Container",
591
717
  componentId: "sc-1b4aw74-0"
592
718
  })(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
@@ -633,7 +759,7 @@ var ProgressBar = function ProgressBar(_ref) {
633
759
  return value * 100 / max;
634
760
  };
635
761
 
636
- return React.createElement(Container$5, {
762
+ return React.createElement(Container$6, {
637
763
  className: "rpgui-progress",
638
764
  "data-value": calculatePercentageValue(max, value) / 100,
639
765
  "data-rpguitype": "progress",
@@ -662,7 +788,7 @@ var TextOverlay = /*#__PURE__*/styled.div.withConfig({
662
788
  displayName: "ProgressBar__TextOverlay",
663
789
  componentId: "sc-qa6fzh-1"
664
790
  })(["width:100%;position:relative;"]);
665
- var Container$5 = /*#__PURE__*/styled.div.withConfig({
791
+ var Container$6 = /*#__PURE__*/styled.div.withConfig({
666
792
  displayName: "ProgressBar__Container",
667
793
  componentId: "sc-qa6fzh-2"
668
794
  })(["display:flex;flex-direction:column;min-width:", "px;width:", "%;justify-content:start;align-items:flex-start;", ""], function (props) {
@@ -775,16 +901,16 @@ var Truncate = function Truncate(_ref) {
775
901
  var _ref$maxLines = _ref.maxLines,
776
902
  maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
777
903
  children = _ref.children;
778
- return React.createElement(Container$6, {
904
+ return React.createElement(Container$7, {
779
905
  maxLines: maxLines
780
906
  }, children);
781
907
  };
782
- var Container$6 = /*#__PURE__*/styled.div.withConfig({
908
+ var Container$7 = /*#__PURE__*/styled.div.withConfig({
783
909
  displayName: "Truncate__Container",
784
910
  componentId: "sc-6x00qb-0"
785
911
  })(["display:-webkit-box;max-width:100%;max-height:100%;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;"], function (props) {
786
912
  return props.maxLines;
787
913
  });
788
914
 
789
- export { Button, ButtonTypes, CheckButton, Dropdown, DynamicText, Input, InputRadio, ListMenu, NPCDialog, NPCDialogType, ProgressBar, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, TextArea, Truncate, _RPGUI, useEventListener };
915
+ export { Button, ButtonTypes, Chat, CheckButton, Dropdown, DynamicText, Input, InputRadio, ListMenu, NPCDialog, NPCDialogType, ProgressBar, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, TextArea, Truncate, _RPGUI, useEventListener };
790
916
  //# sourceMappingURL=long-bow.esm.js.map