@rpg-engine/long-bow 0.1.52 → 0.1.56

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

@@ -1 +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 { ErrorBoundary } from 'react-error-boundary';\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\ninterface IEmitter {\n  _id: string;\n  name: string;\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  const onRenderMessageLines = (\n    emitter: IEmitter,\n    createdAt: string | undefined,\n    message: string\n  ) => {\n    return `${dayjs(createdAt || new Date()).format('HH:mm')} ${\n      emitter?.name ? `${emitter.name}: ` : 'Unknown: '\n    } ${message}`;\n  };\n\n  const onRenderChatMessages = (chatMessages: IChatMessage[]) => {\n    return chatMessages?.length ? (\n      chatMessages?.map(({ _id, createdAt, emitter, message }, index) => (\n        <MessageText key={`${_id}_${index}`}>\n          {onRenderMessageLines(emitter, createdAt, message)}\n        </MessageText>\n      ))\n    ) : (\n      <MessageText>No messages available.</MessageText>\n    );\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        <ErrorBoundary fallback={<p>Oops! Your chat has crashed.</p>}>\n          {onCloseButton && (\n            <CloseButton onClick={onCloseButton} onTouchStart={onCloseButton}>\n              X\n            </CloseButton>\n          )}\n          <RPGUIContainer\n            type={RPGUIContainerTypes.FramedGrey}\n            width={'100%'}\n            height={'80%'}\n            className=\"chat-body dark-background\"\n          >\n            {onRenderChatMessages(chatMessages)}\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=\"chat-input dark-background\"\n                type=\"text\"\n                autoComplete=\"off\"\n              />\n            </Column>\n            <Column justifyContent=\"flex-end\">\n              <Button\n                buttonType={ButtonTypes.RPGUIButton}\n                id=\"chat-send-button\"\n              >\n                Send\n              </Button>\n            </Column>\n          </Form>\n        </ErrorBoundary>\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","ErrorBoundary","fallback","onTouchStart","index","_id","emitter","createdAt","dayjs","Date","format","name","onRenderMessageLines","onRenderChatMessages","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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"}
+{"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/DraggableContainer.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/imgExp.png","../src/components/SimpleProgressBar.tsx","../src/components/SkillProgressBar.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<IButtonProps &\n  React.DetailedHTMLProps<\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    HTMLButtonElement\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 { ErrorBoundary } from 'react-error-boundary';\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\ninterface IEmitter {\n  _id: string;\n  name: string;\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  const onRenderMessageLines = (\n    emitter: IEmitter,\n    createdAt: string | undefined,\n    message: string\n  ) => {\n    return `${dayjs(createdAt || new Date()).format('HH:mm')} ${\n      emitter?.name ? `${emitter.name}: ` : 'Unknown: '\n    } ${message}`;\n  };\n\n  const onRenderChatMessages = (chatMessages: IChatMessage[]) => {\n    return chatMessages?.length ? (\n      chatMessages?.map(({ _id, createdAt, emitter, message }, index) => (\n        <MessageText key={`${_id}_${index}`}>\n          {onRenderMessageLines(emitter, createdAt, message)}\n        </MessageText>\n      ))\n    ) : (\n      <MessageText>No messages available.</MessageText>\n    );\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        <ErrorBoundary fallback={<p>Oops! Your chat has crashed.</p>}>\n          {onCloseButton && (\n            <CloseButton onClick={onCloseButton} onTouchStart={onCloseButton}>\n              X\n            </CloseButton>\n          )}\n          <RPGUIContainer\n            type={RPGUIContainerTypes.FramedGrey}\n            width={'100%'}\n            height={'80%'}\n            className=\"chat-body dark-background\"\n          >\n            {onRenderChatMessages(chatMessages)}\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=\"chat-input dark-background\"\n                type=\"text\"\n                autoComplete=\"off\"\n              />\n            </Column>\n            <Column justifyContent=\"flex-end\">\n              <Button\n                buttonType={ButtonTypes.RPGUIButton}\n                id=\"chat-send-button\"\n              >\n                Send\n              </Button>\n            </Column>\n          </Form>\n        </ErrorBoundary>\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 Draggable from 'react-draggable';\nimport styled from 'styled-components';\n\nexport interface IDraggableContainerProps {\n  children: React.ReactNode;\n  width?: string;\n  height?: string;\n  className?: string;\n  title: string;\n  imgSrc?: string;\n  imgWidth?: string;\n  onCloseButton: () => void;\n}\n\nexport const DraggableContainer: React.FC<IDraggableContainerProps> = ({\n  children,\n  width = '50%',\n  height,\n  className,\n  onCloseButton,\n  title,\n  imgSrc,\n  imgWidth = '20px',\n}) => {\n  return (\n    <Draggable>\n      <Container\n        width={width}\n        height={height || 'auto'}\n        className={`rpgui-container framed-grey ${className} rpgui-draggable`}\n      >\n        <Title>\n          {imgSrc ? (\n            <Icon src={imgSrc} width={imgWidth} />\n          ) : (\n            <Icon width={imgWidth} />\n          )}\n          {title}\n        </Title>\n        {onCloseButton && (\n          <CloseButton onClick={onCloseButton} onTouchStart={onCloseButton}>\n            X\n          </CloseButton>\n        )}\n\n        {children}\n      </Container>\n    </Draggable>\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\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 Title = styled.div`\n  position: absolute;\n  top: 3px;\n  right: 50%;\n  color: white;\n  z-index: 22;\n  font-size: 10px;\n`;\n\ninterface ICustomIconProps {\n  width: string;\n}\n\nconst Icon = styled.img`\n  color: white;\n  z-index: 22;\n  font-size: 10px;\n  width: ${(props: ICustomIconProps) => props.width};\n  margin-right: 0.5rem;\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] = useState<boolean>(\n    false\n  );\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 [\n    currentAnswer,\n    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","const img = require('./imgExp.png'); export default img;","import React from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n  value: number;\n  height?: string;\n  bgColor?: string;\n}\n\nexport const SimpleProgressBar: React.FC<IProps> = ({\n  value,\n\n  bgColor = 'red',\n}) => {\n  return (\n    <Container>\n      <ProgressBarContainer>\n        <BackgroundBar>\n          <Progress value={value} bgColor={bgColor} />\n        </BackgroundBar>\n      </ProgressBarContainer>\n    </Container>\n  );\n};\n\nconst Container = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n`;\n\nconst BackgroundBar = styled.span`\n  background-color: rgba(0, 0, 0, 0.075);\n`;\n\ninterface IProgressProps {\n  value: number;\n  bgColor: string;\n}\n\nconst Progress = styled.span`\n  background-color: ${(props: IProgressProps) => props.bgColor};\n  width: ${(props: IProgressProps) => props.value}%;\n`;\n\nconst ProgressBarContainer = styled.div`\n  border-radius: 60px;\n  border: 1px solid #282424;\n  overflow: hidden;\n  width: 100%;\n  span {\n    display: block;\n    height: 100%;\n  }\n\n  height: 8px;\n`;\n","import React from 'react';\nimport styled from 'styled-components';\nimport imgSrcTemplate from './imgExp.png';\nimport { SimpleProgressBar } from './SimpleProgressBar';\n\nexport interface ISkillProgressBarProps {\n  value: number;\n\n  height: string;\n  bgColor: string;\n  titleName: string;\n\n  logoSrc?: string;\n}\n\nexport const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({\n  value,\n  bgColor,\n  titleName,\n\n  logoSrc = imgSrcTemplate,\n}) => {\n  return (\n    <>\n      <ProgressTitle>\n        <TitleName>{titleName}</TitleName>\n        <ValueDisplay>{value}</ValueDisplay>\n      </ProgressTitle>\n      <ProgressBody>\n        <ProgressIconContainer>\n          <Icon src={logoSrc} />\n        </ProgressIconContainer>\n\n        <SimpleProgressBar value={value} bgColor={bgColor} />\n      </ProgressBody>\n    </>\n  );\n};\n\nconst TitleName = styled.span`\n  margin-left: 5px;\n`;\n\nconst ValueDisplay = styled.span``;\n\nconst ProgressIconContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nconst ProgressBody = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst ProgressTitle = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  span {\n    font-size: 0.6rem;\n  }\n`;\n\nconst Icon = styled.img`\n  margin-right: 10px;\n  height: 30px;\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] = useState<\n    IChecklistSelectedValues\n  >(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","Title","Icon","img","_RPGUI","RPGUI","y","x","fontSize","ListElement","li","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","SimpleProgressBar","bgColor","ProgressBarContainer","BackgroundBar","Progress","value","TitleName","ValueDisplay","ProgressIconContainer","ProgressBody","ProgressTitle","maxLines","chatMessages","onSendChatMessage","onCloseButton","message","setMessage","scrollChatToBottom","scrollingElement","querySelector","scrollTop","scrollHeight","FramedGrey","ErrorBoundary","fallback","onTouchStart","index","_id","emitter","createdAt","dayjs","Date","format","name","onRenderMessageLines","onRenderChatMessages","onSubmit","preventDefault","onChange","target","autoComplete","RPGUIButton","items","selectedValues","forEach","item","label","generateSelectedValuesList","setSelectedValues","element","checked","title","imgSrc","imgWidth","Draggable","src","options","dropdownId","uuidv4","selectedValue","setSelectedValue","getElementById","dropdownValue","get_value","option","handleClick","onSelected","overflow","params","imagePath","isQuestionDialog","showGoNextIndicator","setShowGoNextIndicator","FramedGold","TextAndThumbnail","aliceDefaultThumbnail","TextOnly","pressSpaceGif","max","displayText","calculatePercentageValue","left","valueMin","valueMax","sliderId","wasMouseDownFirst","setWasMouseDownFirst","onHandleMouseUp","rpguiSlider","Number","onMouseUp","onMouseDown","Slider","GoldSlider","min","logoSrc","imgSrcTemplate","titleName"],"mappings":"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"}

package/dist/long-bow.esm.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import dayjs from 'dayjs';
 import { ErrorBoundary } from 'react-error-boundary';
+import Draggable from 'react-draggable';
 import { v4 } from 'uuid';
 import 'rpgui/rpgui.min.css';
 import 'rpgui/rpgui.min.js';
@@ -61,51 +62,6 @@ var ButtonContainer = /*#__PURE__*/styled.button.withConfig({
   componentId: "sc-obzd3o-0"
 })(["height:45px;font-size:11.5px;"]);
 
-var CheckButton = function CheckButton(_ref) {
-  var items = _ref.items,
-      onChange = _ref.onChange;
-
-  var generateSelectedValuesList = function generateSelectedValuesList() {
-    var selectedValues = {};
-    items.forEach(function (item) {
-      selectedValues[item.label] = false;
-    });
-    return selectedValues;
-  };
-
-  var _useState = useState(generateSelectedValuesList()),
-      selectedValues = _useState[0],
-      setSelectedValues = _useState[1];
-
-  var handleClick = function handleClick(label) {
-    var _extends2;
-
-    setSelectedValues(_extends({}, selectedValues, (_extends2 = {}, _extends2[label] = !selectedValues[label], _extends2)));
-  };
-
-  useEffect(function () {
-    if (selectedValues) {
-      onChange(selectedValues);
-    }
-  }, [selectedValues]);
-  return React.createElement("div", {
-    id: "elemento-checkbox"
-  }, items == null ? void 0 : items.map(function (element, index) {
-    return React.createElement("div", {
-      key: element.label + "_" + index
-    }, React.createElement("input", {
-      className: "rpgui-checkbox",
-      type: "checkbox",
-      checked: selectedValues[element.label],
-      onChange: function onChange() {}
-    }), React.createElement("label", {
-      onClick: function onClick() {
-        return handleClick(element.label);
-      }
-    }, element.label), React.createElement("br", null));
-  }));
-};
-
 var colors = {
   darkGrey: '#3e3e3e'
 };
@@ -281,6 +237,100 @@ var MessageText = /*#__PURE__*/styled.p.withConfig({
   componentId: "sc-1bk05n6-5"
 })(["display:block !important;width:100%;font-size:0.7rem !important;overflow-y:auto;margin:0;"]);
 
+var CheckButton = function CheckButton(_ref) {
+  var items = _ref.items,
+      onChange = _ref.onChange;
+
+  var generateSelectedValuesList = function generateSelectedValuesList() {
+    var selectedValues = {};
+    items.forEach(function (item) {
+      selectedValues[item.label] = false;
+    });
+    return selectedValues;
+  };
+
+  var _useState = useState(generateSelectedValuesList()),
+      selectedValues = _useState[0],
+      setSelectedValues = _useState[1];
+
+  var handleClick = function handleClick(label) {
+    var _extends2;
+
+    setSelectedValues(_extends({}, selectedValues, (_extends2 = {}, _extends2[label] = !selectedValues[label], _extends2)));
+  };
+
+  useEffect(function () {
+    if (selectedValues) {
+      onChange(selectedValues);
+    }
+  }, [selectedValues]);
+  return React.createElement("div", {
+    id: "elemento-checkbox"
+  }, items == null ? void 0 : items.map(function (element, index) {
+    return React.createElement("div", {
+      key: element.label + "_" + index
+    }, React.createElement("input", {
+      className: "rpgui-checkbox",
+      type: "checkbox",
+      checked: selectedValues[element.label],
+      onChange: function onChange() {}
+    }), React.createElement("label", {
+      onClick: function onClick() {
+        return handleClick(element.label);
+      }
+    }, element.label), React.createElement("br", null));
+  }));
+};
+
+var DraggableContainer = function DraggableContainer(_ref) {
+  var children = _ref.children,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? '50%' : _ref$width,
+      height = _ref.height,
+      className = _ref.className,
+      onCloseButton = _ref.onCloseButton,
+      title = _ref.title,
+      imgSrc = _ref.imgSrc,
+      _ref$imgWidth = _ref.imgWidth,
+      imgWidth = _ref$imgWidth === void 0 ? '20px' : _ref$imgWidth;
+  return React.createElement(Draggable, null, React.createElement(Container$2, {
+    width: width,
+    height: height || 'auto',
+    className: "rpgui-container framed-grey " + className + " rpgui-draggable"
+  }, React.createElement(Title, null, imgSrc ? React.createElement(Icon, {
+    src: imgSrc,
+    width: imgWidth
+  }) : React.createElement(Icon, {
+    width: imgWidth
+  }), title), onCloseButton && React.createElement(CloseButton$1, {
+    onClick: onCloseButton,
+    onTouchStart: onCloseButton
+  }, "X"), children));
+};
+var Container$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DraggableContainer__Container",
+  componentId: "sc-184mpyl-0"
+})(["height:", ";width:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;"], function (props) {
+  return props.height;
+}, function (_ref2) {
+  var width = _ref2.width;
+  return width;
+});
+var CloseButton$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DraggableContainer__CloseButton",
+  componentId: "sc-184mpyl-1"
+})(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:10px;"]);
+var Title = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DraggableContainer__Title",
+  componentId: "sc-184mpyl-2"
+})(["position:absolute;top:3px;right:50%;color:white;z-index:22;font-size:10px;"]);
+var Icon = /*#__PURE__*/styled.img.withConfig({
+  displayName: "DraggableContainer__Icon",
+  componentId: "sc-184mpyl-3"
+})(["color:white;z-index:22;font-size:10px;width:", ";margin-right:0.5rem;"], function (props) {
+  return props.width;
+});
+
 var _RPGUI = RPGUI;
 var RPGUIRoot = function RPGUIRoot(_ref) {
   var children = _ref.children;
@@ -335,7 +385,7 @@ var ListMenu = function ListMenu(_ref) {
       y = _ref.y,
       _ref$fontSize = _ref.fontSize,
       fontSize = _ref$fontSize === void 0 ? 0.8 : _ref$fontSize;
-  return React.createElement(Container$2, {
+  return React.createElement(Container$3, {
     x: x,
     y: y,
     fontSize: fontSize
@@ -353,7 +403,7 @@ var ListMenu = function ListMenu(_ref) {
     }, params.text);
   })));
 };
-var Container$2 = /*#__PURE__*/styled.div.withConfig({
+var Container$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ListMenu__Container",
   componentId: "sc-i9097t-0"
 })(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;position:absolute;top:", "px;left:", "px;li{font-size:", "em;}"], function (props) {
@@ -449,13 +499,13 @@ var NPCDialogText = function NPCDialogText(_ref) {
       return document.removeEventListener('keydown', onHandleSpacePress);
     };
   }, [chunkIndex]);
-  return React.createElement(Container$3, null, React.createElement(DynamicText, {
+  return React.createElement(Container$4, null, React.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: onEndStep,
     onStart: onStartStep
   }));
 };
-var Container$3 = /*#__PURE__*/styled.div.withConfig({
+var Container$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialogText__Container",
   componentId: "sc-1cxkdh9-0"
 })([""]);
@@ -627,7 +677,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     });
   };
 
-  return React.createElement(Container$4, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
+  return React.createElement(Container$5, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
       return setCanShowAnswers(false);
@@ -637,7 +687,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     }
   })), canShowAnswers && React.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
 };
-var Container$4 = /*#__PURE__*/styled.div.withConfig({
+var Container$5 = /*#__PURE__*/styled.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;"]);
@@ -703,7 +753,7 @@ var NPCDialog = function NPCDialog(_ref) {
     }
   })), type === NPCDialogType.TextAndThumbnail && React.createElement(ThumbnailContainer, null, React.createElement(NPCThumbnail, {
     src: imagePath || img
-  }))) : React.createElement(React.Fragment, null, React.createElement(Container$5, null, React.createElement(TextContainer$1, {
+  }))) : React.createElement(React.Fragment, null, React.createElement(Container$6, null, React.createElement(TextContainer$1, {
     flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
   }, React.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -725,7 +775,7 @@ var NPCDialog = function NPCDialog(_ref) {
     src: img$1
   })));
 };
-var Container$5 = /*#__PURE__*/styled.div.withConfig({
+var Container$6 = /*#__PURE__*/styled.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;"]);
@@ -772,7 +822,7 @@ var ProgressBar = function ProgressBar(_ref) {
     return value * 100 / max;
   };
 
-  return React.createElement(Container$6, {
+  return React.createElement(Container$7, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
@@ -801,7 +851,7 @@ var TextOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$6 = /*#__PURE__*/styled.div.withConfig({
+var Container$7 = /*#__PURE__*/styled.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 (props) {
@@ -903,6 +953,76 @@ var Input$1 = /*#__PURE__*/styled.input.withConfig({
   componentId: "sc-v8mte9-0"
 })(["opacity:0;"]);
 
+const img$2 = require('./imgExp.png');
+
+var SimpleProgressBar = function SimpleProgressBar(_ref) {
+  var value = _ref.value,
+      _ref$bgColor = _ref.bgColor,
+      bgColor = _ref$bgColor === void 0 ? 'red' : _ref$bgColor;
+  return React.createElement(Container$8, null, React.createElement(ProgressBarContainer, null, React.createElement(BackgroundBar, null, React.createElement(Progress, {
+    value: value,
+    bgColor: bgColor
+  }))));
+};
+var Container$8 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SimpleProgressBar__Container",
+  componentId: "sc-mbeil3-0"
+})(["display:flex;justify-content:center;align-items:center;width:100%;"]);
+var BackgroundBar = /*#__PURE__*/styled.span.withConfig({
+  displayName: "SimpleProgressBar__BackgroundBar",
+  componentId: "sc-mbeil3-1"
+})(["background-color:rgba(0,0,0,0.075);"]);
+var Progress = /*#__PURE__*/styled.span.withConfig({
+  displayName: "SimpleProgressBar__Progress",
+  componentId: "sc-mbeil3-2"
+})(["background-color:", ";width:", "%;"], function (props) {
+  return props.bgColor;
+}, function (props) {
+  return props.value;
+});
+var ProgressBarContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SimpleProgressBar__ProgressBarContainer",
+  componentId: "sc-mbeil3-3"
+})(["border-radius:60px;border:1px solid #282424;overflow:hidden;width:100%;span{display:block;height:100%;}height:8px;"]);
+
+var SkillProgressBar = function SkillProgressBar(_ref) {
+  var value = _ref.value,
+      bgColor = _ref.bgColor,
+      titleName = _ref.titleName,
+      _ref$logoSrc = _ref.logoSrc,
+      logoSrc = _ref$logoSrc === void 0 ? img$2 : _ref$logoSrc;
+  return React.createElement(React.Fragment, null, React.createElement(ProgressTitle, null, React.createElement(TitleName, null, titleName), React.createElement(ValueDisplay, null, value)), React.createElement(ProgressBody, null, React.createElement(ProgressIconContainer, null, React.createElement(Icon$1, {
+    src: logoSrc
+  })), React.createElement(SimpleProgressBar, {
+    value: value,
+    bgColor: bgColor
+  })));
+};
+var TitleName = /*#__PURE__*/styled.span.withConfig({
+  displayName: "SkillProgressBar__TitleName",
+  componentId: "sc-5vuroc-0"
+})(["margin-left:5px;"]);
+var ValueDisplay = /*#__PURE__*/styled.span.withConfig({
+  displayName: "SkillProgressBar__ValueDisplay",
+  componentId: "sc-5vuroc-1"
+})([""]);
+var ProgressIconContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SkillProgressBar__ProgressIconContainer",
+  componentId: "sc-5vuroc-2"
+})(["display:flex;justify-content:center;align-items:center;"]);
+var ProgressBody = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SkillProgressBar__ProgressBody",
+  componentId: "sc-5vuroc-3"
+})(["display:flex;flex-direction:row;"]);
+var ProgressTitle = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SkillProgressBar__ProgressTitle",
+  componentId: "sc-5vuroc-4"
+})(["width:100%;display:flex;flex-direction:row;justify-content:space-between;span{font-size:0.6rem;}"]);
+var Icon$1 = /*#__PURE__*/styled.img.withConfig({
+  displayName: "SkillProgressBar__Icon",
+  componentId: "sc-5vuroc-5"
+})(["margin-right:10px;height:30px;"]);
+
 var TextArea = function TextArea(_ref) {
   var props = _extends({}, _ref);
 
@@ -914,16 +1034,16 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
       maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
       children = _ref.children;
-  return React.createElement(Container$7, {
+  return React.createElement(Container$9, {
     maxLines: maxLines
   }, children);
 };
-var Container$7 = /*#__PURE__*/styled.div.withConfig({
+var Container$9 = /*#__PURE__*/styled.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 (props) {
   return props.maxLines;
 });
 
-export { Button, ButtonTypes, Chat, CheckButton, Dropdown, DynamicText, Input, InputRadio, ListMenu, NPCDialog, NPCDialogType, ProgressBar, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, TextArea, Truncate, _RPGUI, useEventListener };
+export { Button, ButtonTypes, Chat, CheckButton, DraggableContainer, Dropdown, DynamicText, Input, InputRadio, ListMenu, NPCDialog, NPCDialogType, ProgressBar, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SkillProgressBar, TextArea, Truncate, _RPGUI, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map