@rpg-engine/long-bow 0.1.792 → 0.2.1

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/Item/Inventory/ItemSlot.tsx","../src/components/shared/Column.tsx","../src/components/Chat/Chat.tsx","../src/constants/uiColors.ts","../src/components/DraggableContainer.tsx","../src/hooks/useOutsideAlerter.ts","../src/components/RPGUIRoot.tsx","../src/components/Item/Cards/ItemCard.tsx","../src/components/shared/SpriteFromAtlas.tsx","../src/components/Item/Inventory/itemContainerHelper.ts","../src/components/ListMenu.tsx","../src/components/NPCDialog/NPCDialog.tsx","../src/components/store/UI.store.ts","../src/components/Equipment/EquipmentSet.tsx","../src/components/Abstractions/SlotsContainer.tsx","../src/components/Item/Inventory/ItemContainer.tsx","../src/components/typography/DynamicText.tsx","../src/components/NPCDialog/NPCDialogText.tsx","../src/libs/StringHelpers.ts","../src/hooks/useEventListener.ts","../src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx","../src/components/RangeSlider.tsx","../src/components/ProgressBar.tsx","../src/components/shared/SpriteIcon.tsx","../src/components/SimpleProgressBar.tsx","../src/components/SkillProgressBar.tsx","../src/components/SkillsContainer.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';\r\nimport styled from 'styled-components';\r\n\r\nexport enum ButtonTypes {\r\n  RPGUIButton = 'rpgui-button',\r\n  RPGUIGoldButton = 'rpgui-button golden',\r\n}\r\n\r\nexport interface IButtonProps {\r\n  children: React.ReactNode;\r\n  buttonType: ButtonTypes;\r\n}\r\n\r\nexport const Button: React.FC<IButtonProps &\r\n  React.DetailedHTMLProps<\r\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\r\n    HTMLButtonElement\r\n  >> = ({ children, buttonType, ...props }) => {\r\n  return (\r\n    <ButtonContainer className={`${buttonType}`} {...props}>\r\n      <p>{children}</p>\r\n    </ButtonContainer>\r\n  );\r\n};\r\n\r\nconst ButtonContainer = styled.button<any>`\r\n  height: 45px;\r\n  font-size: 11.5px;\r\n`;\r\n","import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nexport enum RPGUIContainerTypes {\r\n  Framed = 'framed',\r\n  FramedGold = 'framed-golden',\r\n  FramedGold2 = 'framed-golden-2',\r\n  FramedGrey = 'framed-grey',\r\n}\r\nexport interface IRPGUIContainerProps {\r\n  type: RPGUIContainerTypes;\r\n  children: React.ReactNode;\r\n  width?: string;\r\n  height?: string;\r\n  className?: string;\r\n}\r\n\r\nexport const RPGUIContainer: React.FC<IRPGUIContainerProps> = ({\r\n  children,\r\n  type,\r\n  width = '50%',\r\n  height,\r\n  className,\r\n}) => {\r\n  return (\r\n    <Container\r\n      width={width}\r\n      height={height || 'auto'}\r\n      className={`rpgui-container ${type} ${className}`}\r\n    >\r\n      {children}\r\n    </Container>\r\n  );\r\n};\r\n\r\ninterface IContainerProps {\r\n  width: string;\r\n  height: string;\r\n}\r\n\r\nconst Container = styled.div<IContainerProps>`\r\n  height: ${props => props.height};\r\n  width: ${({ width }) => width};\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  image-rendering: pixelated;\r\n`;\r\n","import React from 'react';\r\n\r\nexport interface IInputProps\r\n  extends React.DetailedHTMLProps<\r\n    React.InputHTMLAttributes<HTMLInputElement>,\r\n    HTMLInputElement\r\n  > {}\r\n\r\nexport const Input: React.FC<IInputProps> = ({ ...props }) => {\r\n  return <input {...props} />;\r\n};\r\n","import { IItem, IItemContainer, ItemSlotType } from '@rpg-engine/shared';\r\nimport React from 'react';\r\nimport styled from 'styled-components';\r\nimport atlasJSON from '../../../mocks/atlas/items/items.json';\r\nimport atlasIMG from '../../../mocks/atlas/items/items.png';\r\nimport { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';\r\n\r\nexport enum SlotContainerType {\r\n  INVENTORY = 'Inventory',\r\n  EQUIPMENT_SET = 'EquipmentSet',\r\n}\r\n\r\nconst EquipmentSlotSpriteByType: any = {\r\n  Neck: 'accessories/corruption-necklace.png',\r\n  LeftHand: 'swords/broad-sword.png',\r\n  Ring: 'rings/iron-ring.png',\r\n  Head: 'helmets/viking-helmet.png',\r\n  Torso: 'armors/iron-armor.png',\r\n  Legs: 'legs/studded-legs.png',\r\n  Feet: 'boots/iron-boots.png',\r\n  Inventory: 'containers/bag.png',\r\n  RightHand: 'shields/plate-shield.png',\r\n  Accessory: 'gloves/plate-gloves.png',\r\n};\r\n\r\ninterface IProps {\r\n  slotIndex: number;\r\n  item: IItem | null;\r\n  itemContainer?: IItemContainer | null;\r\n  slotContainerType: SlotContainerType | null;\r\n  slotSpriteMask?: ItemSlotType | null;\r\n  onMouseOver: (\r\n    event: any,\r\n    slotIndex: number,\r\n    item: IItem | null,\r\n    x: number,\r\n    y: number\r\n  ) => void;\r\n  onMouseOut: () => void;\r\n  onClick: (\r\n    item: IItem,\r\n    posX: number,\r\n    posY: number,\r\n    slotContainerType: SlotContainerType | null\r\n  ) => void;\r\n  onCancelContextMenu: () => void;\r\n}\r\n\r\nexport const ItemSlot: React.FC<IProps> = ({\r\n  slotIndex,\r\n  item,\r\n  slotContainerType,\r\n  slotSpriteMask,\r\n  onMouseOver,\r\n  onMouseOut,\r\n  onClick,\r\n  onCancelContextMenu,\r\n}) => {\r\n  const getLeftPositionValue = (quantity: number) => {\r\n    if (quantity > 0 && quantity < 10) return '2.5rem';\r\n    else if (quantity > 9 && quantity < 100) return '2.0rem';\r\n    else if (quantity > 99) return '1rem';\r\n    return '2.5rem';\r\n  };\r\n\r\n  const renderItem = (itemToRender: IItem | null) => {\r\n    const element = [];\r\n    if (itemToRender?.texturePath) {\r\n      element.push(\r\n        <SpriteFromAtlas\r\n          atlasIMG={atlasIMG}\r\n          atlasJSON={atlasJSON}\r\n          spriteKey={itemToRender.texturePath}\r\n          imgScale={3}\r\n        />\r\n      );\r\n    }\r\n    if (itemToRender?.isStackable && itemToRender?.stackQty) {\r\n      element.push(\r\n        <ItemQty left={getLeftPositionValue(itemToRender.stackQty)}>\r\n          {' '}\r\n          {itemToRender.stackQty}{' '}\r\n        </ItemQty>\r\n      );\r\n    }\r\n    return element;\r\n  };\r\n\r\n  const renderEquipment = (itemToRender: IItem | null) => {\r\n    if (\r\n      itemToRender?.texturePath &&\r\n      itemToRender.allowedEquipSlotType?.includes(slotSpriteMask!)\r\n    ) {\r\n      return (\r\n        <SpriteFromAtlas\r\n          atlasIMG={atlasIMG}\r\n          atlasJSON={atlasJSON}\r\n          spriteKey={itemToRender.texturePath}\r\n          imgScale={3}\r\n        />\r\n      );\r\n    } else {\r\n      return (\r\n        <SpriteFromAtlas\r\n          atlasIMG={atlasIMG}\r\n          atlasJSON={atlasJSON}\r\n          spriteKey={EquipmentSlotSpriteByType[slotSpriteMask!]}\r\n          imgScale={3}\r\n          grayScale={true}\r\n          opacity={0.4}\r\n        />\r\n      );\r\n    }\r\n  };\r\n\r\n  const onRenderSlot = (itemToRender: IItem | null) => {\r\n    if (slotContainerType === SlotContainerType.EQUIPMENT_SET)\r\n      return renderEquipment(itemToRender);\r\n    return renderItem(itemToRender);\r\n  };\r\n\r\n  return (\r\n    <Container\r\n      className=\"rpgui-icon empty-slot\"\r\n      onMouseOver={event =>\r\n        onMouseOver(event, slotIndex, item, event.clientX, event.clientY)\r\n      }\r\n      onMouseOut={() => onMouseOut()}\r\n      onClick={e => {\r\n        if (item) {\r\n          onClick(item, e.clientX, e.clientY, slotContainerType);\r\n        } else {\r\n          onCancelContextMenu();\r\n        }\r\n      }}\r\n    >\r\n      {onRenderSlot(item)}\r\n    </Container>\r\n  );\r\n};\r\n\r\nconst Container = styled.div`\r\n  margin: 0.1rem;\r\n  .sprite-from-atlas-img {\r\n    position: relative;\r\n    top: 1.5rem;\r\n    left: 1.5rem;\r\n  }\r\n`;\r\n\r\ninterface IItemQtyProps {\r\n  left: string;\r\n}\r\nconst ItemQty = styled.span<IItemQtyProps>`\r\n  position: relative;\r\n  top: 1.5rem;\r\n  left: ${props => props.left};\r\n`;\r\n","import styled from 'styled-components';\r\n\r\ninterface IColumn {\r\n  flex?: number;\r\n  alignItems?: string;\r\n  justifyContent?: string;\r\n  flexWrap?: string;\r\n}\r\n\r\nexport const Column = styled.div<IColumn>`\r\n  flex: ${props => props.flex || 'auto'};\r\n  display: flex;\r\n  flex-wrap: ${props => props.flexWrap || 'nowrap'};\r\n  align-items: ${props => props.alignItems || 'flex-start'};\r\n  justify-content: ${props => props.justifyContent || 'flex-start'};\r\n`;\r\n","import { IChatMessage } from '@rpg-engine/shared';\r\nimport dayjs from 'dayjs';\r\nimport React, { useEffect, useState } from 'react';\r\nimport { ErrorBoundary } from 'react-error-boundary';\r\nimport styled from 'styled-components';\r\nimport { colors } from '../../constants/uiColors';\r\nimport { Button, ButtonTypes } from '../Button';\r\nimport { Input } from '../Input';\r\nimport { RPGUIContainer, RPGUIContainerTypes } from '../RPGUIContainer';\r\nimport { Column } from '../shared/Column';\r\n\r\ninterface IEmitter {\r\n  _id: string;\r\n  name: string;\r\n}\r\nexport interface IChatProps {\r\n  chatMessages: IChatMessage[];\r\n  onSendChatMessage: (message: string) => void;\r\n  onCloseButton: () => void;\r\n  opacity?: number;\r\n  width?: string;\r\n  height?: string;\r\n}\r\n\r\nexport const Chat: React.FC<IChatProps> = ({\r\n  chatMessages,\r\n  onSendChatMessage,\r\n  opacity = 1,\r\n  width = '100%',\r\n  height = '250px',\r\n  onCloseButton,\r\n}) => {\r\n  const [message, setMessage] = useState('');\r\n\r\n  useEffect(() => {\r\n    scrollChatToBottom();\r\n  }, []);\r\n\r\n  useEffect(() => {\r\n    scrollChatToBottom();\r\n  }, [chatMessages]);\r\n\r\n  const scrollChatToBottom = () => {\r\n    const scrollingElement = document.querySelector('.chat-body');\r\n    if (scrollingElement) {\r\n      scrollingElement.scrollTop = scrollingElement.scrollHeight;\r\n    }\r\n  };\r\n\r\n  const handleSubmit = (event: React.SyntheticEvent<HTMLFormElement>) => {\r\n    event.preventDefault();\r\n    onSendChatMessage(message);\r\n    setMessage('');\r\n  };\r\n  const getInputValue = (value: string) => {\r\n    setMessage(value);\r\n  };\r\n\r\n  const onRenderMessageLines = (\r\n    emitter: IEmitter,\r\n    createdAt: string | undefined,\r\n    message: string\r\n  ) => {\r\n    return `${dayjs(createdAt || new Date()).format('HH:mm')} ${\r\n      emitter?.name ? `${emitter.name}: ` : 'Unknown: '\r\n    } ${message}`;\r\n  };\r\n\r\n  const onRenderChatMessages = (chatMessages: IChatMessage[]) => {\r\n    return chatMessages?.length ? (\r\n      chatMessages?.map(({ _id, createdAt, emitter, message }, index) => (\r\n        <MessageText key={`${_id}_${index}`}>\r\n          {onRenderMessageLines(emitter, createdAt, message)}\r\n        </MessageText>\r\n      ))\r\n    ) : (\r\n      <MessageText>No messages available.</MessageText>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <Container>\r\n      <CustomContainer\r\n        type={RPGUIContainerTypes.FramedGrey}\r\n        width={width}\r\n        height={height}\r\n        className=\"chat-container\"\r\n        opacity={opacity}\r\n      >\r\n        <ErrorBoundary fallback={<p>Oops! Your chat has crashed.</p>}>\r\n          {onCloseButton && (\r\n            <CloseButton onClick={onCloseButton} onTouchStart={onCloseButton}>\r\n              X\r\n            </CloseButton>\r\n          )}\r\n          <RPGUIContainer\r\n            type={RPGUIContainerTypes.FramedGrey}\r\n            width={'100%'}\r\n            height={'80%'}\r\n            className=\"chat-body dark-background\"\r\n          >\r\n            {onRenderChatMessages(chatMessages)}\r\n          </RPGUIContainer>\r\n\r\n          <Form onSubmit={handleSubmit}>\r\n            <Column flex={70}>\r\n              <CustomInput\r\n                value={message}\r\n                id=\"inputMessage\"\r\n                onChange={e => getInputValue(e.target.value)}\r\n                height={20}\r\n                className=\"chat-input dark-background\"\r\n                type=\"text\"\r\n                autoComplete=\"off\"\r\n              />\r\n            </Column>\r\n            <Column justifyContent=\"flex-end\">\r\n              <Button\r\n                buttonType={ButtonTypes.RPGUIButton}\r\n                id=\"chat-send-button\"\r\n              >\r\n                Send\r\n              </Button>\r\n            </Column>\r\n          </Form>\r\n        </ErrorBoundary>\r\n      </CustomContainer>\r\n    </Container>\r\n  );\r\n};\r\n\r\nconst Container = styled.div`\r\n  position: relative;\r\n`;\r\n\r\nconst CloseButton = styled.div`\r\n  position: absolute;\r\n  top: 2px;\r\n  right: 0px;\r\n  color: white;\r\n  z-index: 22;\r\n  font-size: 0.7rem;\r\n`;\r\n\r\nconst CustomInput = styled(Input)`\r\n  height: 30px;\r\n  width: 100%;\r\n\r\n  .rpgui-content .input {\r\n    min-height: 39px;\r\n  }\r\n`;\r\n\r\ninterface ICustomContainerProps {\r\n  opacity: number;\r\n}\r\n\r\nconst CustomContainer = styled(RPGUIContainer)`\r\n  display: block;\r\n\r\n  opacity: ${(props: ICustomContainerProps) => props.opacity};\r\n\r\n  &:hover {\r\n    opacity: 1;\r\n  }\r\n\r\n  .dark-background {\r\n    background-color: ${colors.darkGrey} !important;\r\n  }\r\n\r\n  .chat-body {\r\n    &.rpgui-container.framed-grey {\r\n      background: unset;\r\n    }\r\n    max-height: 170px;\r\n    overflow-y: auto;\r\n  }\r\n`;\r\n\r\nconst Form = styled.form`\r\n  display: flex;\r\n  width: 100%;\r\n  justify-content: center;\r\n  align-items: center;\r\n`;\r\n\r\nconst MessageText = styled.p`\r\n  display: block !important;\r\n  width: 100%;\r\n  font-size: 0.7rem !important;\r\n  overflow-y: auto;\r\n  margin: 0;\r\n`;\r\n","export const colors = {\r\n  darkGrey: '#3e3e3e',\r\n  darkYellow: '#FFC857',\r\n  orange: '#E9724C',\r\n  cardinal: '#C5283D',\r\n  raisinBlack: '#191923',\r\n  navyBlue: '#0E79B2',\r\n  purple: '#8C3D8C',\r\n  blue: '#3772FF',\r\n};\r\n","import React, { useEffect, useRef } from 'react';\r\nimport Draggable, { DraggableData } from 'react-draggable';\r\nimport styled from 'styled-components';\r\nimport { useOutsideClick } from '../hooks/useOutsideAlerter';\r\nimport { IPosition } from '../types/eventTypes';\r\nimport { RPGUIContainerTypes } from './RPGUIContainer';\r\n\r\nexport interface IDraggableContainerProps {\r\n  children: React.ReactNode;\r\n  width?: string;\r\n  height?: string;\r\n  className?: string;\r\n  type?: RPGUIContainerTypes;\r\n  title?: string;\r\n  imgSrc?: string;\r\n  imgWidth?: string;\r\n  onCloseButton?: () => void;\r\n  cancelDrag?: string;\r\n  onPositionChange?: (position: IPosition) => void;\r\n  onOutsideClick?: () => void;\r\n}\r\n\r\nexport const DraggableContainer: React.FC<IDraggableContainerProps> = ({\r\n  children,\r\n  width = '50%',\r\n  height,\r\n  className,\r\n  type = RPGUIContainerTypes.FramedGold,\r\n  onCloseButton,\r\n  title,\r\n  imgSrc,\r\n  imgWidth = '20px',\r\n  cancelDrag,\r\n  onPositionChange,\r\n  onOutsideClick,\r\n}) => {\r\n  const draggableRef = useRef(null);\r\n\r\n  useOutsideClick(draggableRef, 'item-container');\r\n\r\n  useEffect(() => {\r\n    document.addEventListener('clickOutside', event => {\r\n      const e = event as CustomEvent;\r\n\r\n      if (e.detail.id === 'item-container') {\r\n        if (onOutsideClick) {\r\n          onOutsideClick();\r\n        }\r\n      }\r\n    });\r\n\r\n    return () => {\r\n      document.removeEventListener('clickOutside', _e => {});\r\n    };\r\n  }, []);\r\n\r\n  return (\r\n    <Draggable\r\n      cancel={`.container-close,${cancelDrag}`}\r\n      onDrag={(_e, data: DraggableData) => {\r\n        if (onPositionChange) {\r\n          onPositionChange({\r\n            x: data.x,\r\n            y: data.y,\r\n          });\r\n        }\r\n      }}\r\n    >\r\n      <Container\r\n        ref={draggableRef}\r\n        width={width}\r\n        height={height || 'auto'}\r\n        className={`rpgui-container ${type} ${className}`}\r\n      >\r\n        {title && (\r\n          <TitleContainer className=\"drag-handler\">\r\n            <Title>\r\n              {imgSrc && <Icon src={imgSrc} width={imgWidth} />}\r\n              {title}\r\n            </Title>\r\n          </TitleContainer>\r\n        )}\r\n        {onCloseButton && (\r\n          <CloseButton\r\n            className=\"container-close\"\r\n            onClick={onCloseButton}\r\n            onTouchStart={onCloseButton}\r\n          >\r\n            X\r\n          </CloseButton>\r\n        )}\r\n\r\n        {children}\r\n      </Container>\r\n    </Draggable>\r\n  );\r\n};\r\n\r\ninterface IContainerProps {\r\n  width: string;\r\n  height: string;\r\n}\r\n\r\nconst Container = styled.div<IContainerProps>`\r\n  height: ${props => props.height};\r\n  width: ${({ width }) => width};\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  image-rendering: pixelated;\r\n\r\n  &.rpgui-container {\r\n    padding-top: 1.5rem;\r\n  }\r\n`;\r\n\r\nconst CloseButton = styled.div`\r\n  position: absolute;\r\n  top: 3px;\r\n  right: 0px;\r\n  color: white;\r\n  z-index: 22;\r\n  font-size: 0.8rem;\r\n`;\r\n\r\nconst TitleContainer = styled.div`\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n`;\r\n\r\nconst Title = styled.h1`\r\n  color: white;\r\n  z-index: 22;\r\n  font-size: 0.6rem;\r\n`;\r\n\r\ninterface ICustomIconProps {\r\n  width: string;\r\n}\r\n\r\nconst Icon = styled.img`\r\n  color: white;\r\n  z-index: 22;\r\n  font-size: 10px;\r\n  width: ${(props: ICustomIconProps) => props.width};\r\n  margin-right: 0.5rem;\r\n`;\r\n","import { useEffect } from 'react';\r\n\r\nexport function useOutsideClick(ref: any, id: string) {\r\n  useEffect(() => {\r\n    /**\r\n     * Alert if clicked on outside of element\r\n     */\r\n    function handleClickOutside(event: any) {\r\n      if (ref.current && !ref.current.contains(event.target)) {\r\n        const event = new CustomEvent('clickOutside', {\r\n          detail: {\r\n            id,\r\n          },\r\n        });\r\n        document.dispatchEvent(event);\r\n      }\r\n    }\r\n    // Bind the event listener\r\n    document.addEventListener('mousedown', handleClickOutside);\r\n    return () => {\r\n      // Unbind the event listener on clean up\r\n      document.removeEventListener('mousedown', handleClickOutside);\r\n    };\r\n  }, [ref]);\r\n}\r\n","import React from 'react';\r\nimport 'rpgui/rpgui.min.css';\r\nimport 'rpgui/rpgui.min.js';\r\n\r\ninterface IProps {\r\n  children: React.ReactNode;\r\n}\r\n\r\n//@ts-ignore\r\nexport const _RPGUI = RPGUI;\r\n\r\nexport const RPGUIRoot: React.FC<IProps> = ({ children }) => {\r\n  return <div className=\"rpgui-content\">{children}</div>;\r\n};\r\n","import { IItem } from '@rpg-engine/shared';\r\nimport React from 'react';\r\nimport styled from 'styled-components';\r\n\r\ninterface IProps {\r\n  item: IItem | null;\r\n  x: number;\r\n  y: number;\r\n}\r\n\r\nexport const ItemCard: React.FC<IProps> = ({ item, x, y }) => {\r\n  return (\r\n    <Container x={x} y={y}>\r\n      {item?.name}\r\n    </Container>\r\n  );\r\n};\r\n\r\ninterface IContainerProps {\r\n  x?: number;\r\n  y?: number;\r\n  fontSize?: number;\r\n}\r\nconst Container = styled.div<IContainerProps>`\r\n  position: absolute;\r\n  top: ${props => props.y || 0}px;\r\n  left: ${props => props.x || 0}px;\r\n  font-size: 0.5rem;\r\n  color: white;\r\n  background-color: black;\r\n  border-radius: 5px;\r\n  padding: 0.5rem;\r\n  min-width: 20px;\r\n\r\n  opacity: 0.5;\r\n`;\r\n","import { GRID_HEIGHT, GRID_WIDTH } from '@rpg-engine/shared';\r\nimport React from 'react';\r\nimport styled from 'styled-components';\r\n\r\ninterface IProps {\r\n  atlasJSON: any;\r\n  atlasIMG: any;\r\n  spriteKey: string;\r\n  width?: number;\r\n  height?: number;\r\n  grayScale?: boolean;\r\n  opacity?: number;\r\n  onClick?: () => void;\r\n  containerStyle?: any;\r\n  imgStyle?: any;\r\n  imgScale?: number;\r\n}\r\n\r\nexport const SpriteFromAtlas: React.FC<IProps> = ({\r\n  atlasJSON,\r\n  atlasIMG,\r\n  spriteKey,\r\n  width = GRID_WIDTH,\r\n  height = GRID_HEIGHT,\r\n  imgScale = 2,\r\n  imgStyle,\r\n  onClick,\r\n  containerStyle,\r\n  grayScale = false,\r\n  opacity = 1,\r\n}) => {\r\n  //! If an item is not showing, remember that you MUST run yarn atlas:copy everytime you add a new item to the atlas (it will sync our public folder atlas with src/atlas).\r\n  //!Due to React's limitations, we cannot import it from the public folder directly!\r\n\r\n  const spriteData = atlasJSON.frames[spriteKey];\r\n\r\n  return (\r\n    <Container\r\n      width={width}\r\n      height={height}\r\n      hasHover={grayScale}\r\n      onClick={onClick}\r\n      style={containerStyle}\r\n    >\r\n      <ImgSprite\r\n        className=\"sprite-from-atlas-img\"\r\n        atlasIMG={atlasIMG}\r\n        frame={spriteData.frame}\r\n        scale={imgScale}\r\n        grayScale={grayScale}\r\n        opacity={opacity}\r\n        style={imgStyle}\r\n      />\r\n    </Container>\r\n  );\r\n};\r\n\r\ninterface IImgSpriteProps {\r\n  atlasIMG: any;\r\n  frame: {\r\n    x: number;\r\n    y: number;\r\n    w: number;\r\n    h: number;\r\n  };\r\n  scale: number;\r\n  grayScale: boolean;\r\n  opacity: number;\r\n}\r\n\r\ninterface IContainerProps {\r\n  width: number;\r\n  height: number;\r\n  hasHover: boolean;\r\n}\r\n\r\nconst Container = styled.div`\r\n  width: ${(props: IContainerProps) => props.width}px;\r\n  height: ${(props: IContainerProps) => props.height}px;\r\n  ${(props: IContainerProps) =>\r\n    !props.hasHover\r\n      ? `&:hover {\r\n    filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(180deg);\r\n  }`\r\n      : ``}\r\n`;\r\n\r\nconst ImgSprite = styled.div<IImgSpriteProps>`\r\n  width: ${props => props.frame.w}px;\r\n  height: ${props => props.frame.h}px;\r\n  background-image: url(${props => props.atlasIMG});\r\n  background-position: -${props => props.frame.x}px -${props => props.frame.y}px;\r\n  transform: scale(${props => props.scale});\r\n  position: relative;\r\n  top: 8px;\r\n  left: 8px;\r\n  filter: ${props => (props.grayScale ? 'grayscale(100%)' : 'none')};\r\n  opacity: ${props => props.opacity};\r\n`;\r\n","import {\r\n  ActionsByItemType,\r\n  ItemSocketEventsDisplayLabels,\r\n  ItemType,\r\n} from '@rpg-engine/shared';\r\n\r\nexport interface IContextMenuItem {\r\n  id: string;\r\n  text: string;\r\n}\r\n\r\nexport enum ContainerType {\r\n  INVENTORY = 'Inventory',\r\n  EQUIPMENT_SET = 'EquipmentSet',\r\n}\r\n\r\n// TODO: Refactor this file\r\nconst generateContextList = (actionsByTypeList: any) => {\r\n  const contextMenu: IContextMenuItem[] = actionsByTypeList.map(\r\n    (action: string) => {\r\n      return { id: action, text: ItemSocketEventsDisplayLabels[action] };\r\n    }\r\n  );\r\n  return contextMenu;\r\n};\r\n\r\nexport const handleContextMenuList = (itemType: ItemType) => {\r\n  let contextActionMenu: IContextMenuItem[] = [];\r\n\r\n  switch (itemType) {\r\n    case ItemType.Weapon:\r\n    case ItemType.Armor:\r\n    case ItemType.Accessory:\r\n    case ItemType.Jewelry:\r\n    case ItemType.Tool:\r\n      contextActionMenu = generateContextList(ActionsByItemType.Equipment);\r\n      break;\r\n    case ItemType.Consumable:\r\n      contextActionMenu = generateContextList(ActionsByItemType.Consumable);\r\n      break;\r\n    case ItemType.CraftMaterial:\r\n      contextActionMenu = generateContextList(ActionsByItemType.CraftMaterial);\r\n      break;\r\n    case ItemType.Other:\r\n    case ItemType.Information:\r\n    case ItemType.Quest:\r\n    case ItemType.Container:\r\n      contextActionMenu = generateContextList(ActionsByItemType.Other);\r\n      break;\r\n    default:\r\n      contextActionMenu = generateContextList(ActionsByItemType.Other);\r\n      break;\r\n  }\r\n  return contextActionMenu;\r\n};\r\n\r\nexport const handleEquipmentContextMenuList = (itemType: ItemType) => {\r\n  let contextActionMenu: IContextMenuItem[] = [];\r\n  switch (itemType) {\r\n    case ItemType.Weapon:\r\n    case ItemType.Armor:\r\n    case ItemType.Accessory:\r\n    case ItemType.Jewelry:\r\n    case ItemType.Tool:\r\n      contextActionMenu = generateContextList(\r\n        ActionsByItemType.EquipmenSetItems\r\n      );\r\n      break;\r\n    case ItemType.Container:\r\n      contextActionMenu = generateContextList(\r\n        ActionsByItemType.EquipmenSetContainer\r\n      );\r\n      break;\r\n    default:\r\n      contextActionMenu = generateContextList(\r\n        ActionsByItemType.EquipmenSetItems\r\n      );\r\n      break;\r\n  }\r\n  return contextActionMenu;\r\n};\r\n","import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\ninterface IListMenuOption {\r\n  id: string;\r\n  text: string;\r\n}\r\n\r\nexport interface IListMenuProps {\r\n  x: number;\r\n  y: number;\r\n  options: IListMenuOption[];\r\n  onSelected: (selectedOptionId: string) => void;\r\n  fontSize?: number;\r\n}\r\n\r\nexport const ListMenu: React.FC<IListMenuProps> = ({\r\n  options,\r\n  onSelected,\r\n  x,\r\n  y,\r\n  fontSize = 0.8,\r\n}) => {\r\n  return (\r\n    <Container x={x} y={y} fontSize={fontSize}>\r\n      <ul className=\"rpgui-list-imp\" style={{ overflow: 'hidden' }}>\r\n        {options.map((params, index) => (\r\n          <ListElement\r\n            key={params?.id || index}\r\n            onClick={() => {\r\n              onSelected(params?.id);\r\n            }}\r\n          >\r\n            {params?.text || 'No text'}\r\n          </ListElement>\r\n        ))}\r\n      </ul>\r\n    </Container>\r\n  );\r\n};\r\n\r\ninterface IContainerProps {\r\n  x?: number;\r\n  y?: number;\r\n  fontSize?: number;\r\n}\r\n\r\nconst Container = styled.div<IContainerProps>`\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n  justify-content: start;\r\n  align-items: flex-start;\r\n  position: absolute;\r\n  top: ${props => props.y || 0}px;\r\n  left: ${props => props.x || 0}px;\r\n\r\n  li {\r\n    font-size: ${props => props.fontSize}em;\r\n  }\r\n`;\r\n\r\nconst ListElement = styled.li`\r\n  margin-right: 0.5rem;\r\n`;\r\n","import React, { useState } from 'react';\r\nimport styled from 'styled-components';\r\nimport { RPGUIContainer, RPGUIContainerTypes } from '../RPGUIContainer';\r\nimport aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';\r\nimport pressSpaceGif from './img/space.gif';\r\nimport { NPCDialogText } from './NPCDialogText';\r\nimport {\r\n  IQuestionDialog,\r\n  IQuestionDialogAnswer,\r\n  QuestionDialog,\r\n} from './QuestionDialog/QuestionDialog';\r\n\r\nexport enum NPCDialogType {\r\n  TextOnly = 'TextOnly',\r\n  TextAndThumbnail = 'TextAndThumbnail',\r\n}\r\n\r\nexport interface INPCDialogProps {\r\n  text?: string;\r\n  type: NPCDialogType;\r\n  imagePath?: string;\r\n  onClose?: () => void;\r\n  isQuestionDialog?: boolean;\r\n  answers?: IQuestionDialogAnswer[];\r\n  questions?: IQuestionDialog[];\r\n}\r\n\r\nexport const NPCDialog: React.FC<INPCDialogProps> = ({\r\n  text,\r\n  type,\r\n  onClose,\r\n  imagePath,\r\n  isQuestionDialog = false,\r\n  questions,\r\n  answers,\r\n}) => {\r\n  const [showGoNextIndicator, setShowGoNextIndicator] = useState<boolean>(\r\n    false\r\n  );\r\n\r\n  return (\r\n    <RPGUIContainer\r\n      type={RPGUIContainerTypes.FramedGold}\r\n      width={isQuestionDialog ? '600px' : '50%'}\r\n      height={'180px'}\r\n    >\r\n      {isQuestionDialog && questions && answers ? (\r\n        <>\r\n          <TextContainer\r\n            flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}\r\n          >\r\n            <QuestionDialog\r\n              questions={questions}\r\n              answers={answers}\r\n              onClose={() => {\r\n                if (onClose) {\r\n                  onClose();\r\n                }\r\n              }}\r\n            />\r\n          </TextContainer>\r\n          {type === NPCDialogType.TextAndThumbnail && (\r\n            <ThumbnailContainer>\r\n              <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />\r\n            </ThumbnailContainer>\r\n          )}\r\n        </>\r\n      ) : (\r\n        <>\r\n          <Container>\r\n            <TextContainer\r\n              flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}\r\n            >\r\n              <NPCDialogText\r\n                onStartStep={() => setShowGoNextIndicator(false)}\r\n                onEndStep={() => setShowGoNextIndicator(true)}\r\n                text={text || 'No text provided.'}\r\n                onClose={() => {\r\n                  if (onClose) {\r\n                    onClose();\r\n                  }\r\n                }}\r\n              />\r\n            </TextContainer>\r\n            {type === NPCDialogType.TextAndThumbnail && (\r\n              <ThumbnailContainer>\r\n                <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />\r\n              </ThumbnailContainer>\r\n            )}\r\n          </Container>\r\n          {showGoNextIndicator && (\r\n            <PressSpaceIndicator\r\n              right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}\r\n              src={pressSpaceGif}\r\n            />\r\n          )}\r\n        </>\r\n      )}\r\n    </RPGUIContainer>\r\n  );\r\n};\r\n\r\nconst Container = styled.div`\r\n  display: flex;\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  box-sizing: border-box;\r\n  justify-content: center;\r\n  align-items: flex-start;\r\n  position: relative;\r\n`;\r\n\r\ninterface ITextContainerProps {\r\n  flex: string;\r\n}\r\n\r\nconst TextContainer = styled.div<ITextContainerProps>`\r\n  flex: ${({ flex }) => flex} 0 0;\r\n  width: 355px;\r\n`;\r\n\r\nconst ThumbnailContainer = styled.div`\r\n  flex: 30% 0 0;\r\n  display: flex;\r\n  justify-content: flex-end;\r\n`;\r\n\r\nconst NPCThumbnail = styled.img`\r\n  image-rendering: pixelated;\r\n  height: 128px;\r\n  width: 128px;\r\n`;\r\n\r\ninterface IPressSpaceIndicatorProps {\r\n  right: string;\r\n}\r\n\r\nconst PressSpaceIndicator = styled.img<IPressSpaceIndicatorProps>`\r\n  position: absolute;\r\n  right: ${({ right }) => right};\r\n  bottom: 1rem;\r\n  height: 20.7px;\r\n  image-rendering: -webkit-optimize-contrast;\r\n`;\r\n","import {\r\n  IItem,\r\n  IPayloadProps,\r\n  ItemSocketEvents,\r\n  ItemSocketEventsDisplayLabels,\r\n  ItemType,\r\n} from '@rpg-engine/shared';\r\nimport { makeAutoObservable, toJS } from 'mobx';\r\nimport { IPosition } from '../../types/eventTypes';\r\nimport {\r\n  handleContextMenuList,\r\n  handleEquipmentContextMenuList,\r\n  IContextMenuItem,\r\n} from '../Item/Inventory/itemContainerHelper';\r\nimport { SlotContainerType } from '../Item/Inventory/ItemSlot';\r\n\r\ninterface IContextMenu {\r\n  visible: boolean;\r\n  posX: number;\r\n  posY: number;\r\n  slotItem: IItem | null;\r\n  slotIndex?: number | null;\r\n  contextActions: IContextMenuItem[];\r\n}\r\n\r\ninterface IHoverDetail {\r\n  visible: boolean;\r\n  posX: number;\r\n  posY: number;\r\n  item: IItem | null;\r\n}\r\n\r\ninterface ISetContextMenu extends Omit<IContextMenu, 'contextActions'> {}\r\n\r\nconst initialState = {\r\n  visible: false,\r\n  posX: 0,\r\n  posY: 0,\r\n  contextActions: [],\r\n  slotItem: null,\r\n};\r\n\r\nconst initialHoverState = {\r\n  visible: false,\r\n  posX: 0,\r\n  posY: 0,\r\n  item: null,\r\n};\r\n\r\nconst initialPosition = {\r\n  x: 0,\r\n  y: 0\r\n}\r\nclass UIStore {\r\n  public contextMenu: IContextMenu | null = initialState;\r\n  public onHoverDetail: IHoverDetail | null = initialHoverState;\r\n\r\n  public draggablePosition: IPosition  = initialPosition;\r\n\r\n\r\n  constructor() {\r\n    makeAutoObservable(this);\r\n  }\r\n\r\n  public setContextMenu(contextMenu: ISetContextMenu, itemType: ItemType) {\r\n    const contextActions = handleContextMenuList(itemType);\r\n\r\n    this.contextMenu = {\r\n      ...contextMenu,\r\n      contextActions,\r\n    };\r\n\r\n    console.log(toJS(this.contextMenu));\r\n  }\r\n\r\n  public setEquipContextMenu(\r\n    contextMenu: ISetContextMenu,\r\n    itemType: ItemType,\r\n    isItemContainer: boolean | undefined\r\n  ) {\r\n    const contextActions = handleEquipmentContextMenuList(itemType);\r\n    if (isItemContainer)\r\n      contextActions.push({\r\n        id: ItemSocketEvents.ContainerOpen,\r\n        text: ItemSocketEventsDisplayLabels[ItemSocketEvents.ContainerOpen],\r\n      });\r\n    this.contextMenu = {\r\n      ...contextMenu,\r\n      contextActions,\r\n    };\r\n\r\n    console.log(toJS(this.contextMenu));\r\n  }\r\n\r\n  public clearContextMenu() {\r\n    this.contextMenu = initialState;\r\n  }\r\n\r\n  public setItemHoverDetail(hoverDetail: IHoverDetail) {\r\n    if (hoverDetail?.item === null) this.clearItemHoverDetail();\r\n\r\n    this.onHoverDetail = {\r\n      ...hoverDetail,\r\n    };\r\n  }\r\n\r\n  public clearItemHoverDetail() {\r\n    this.onHoverDetail = initialHoverState;\r\n  }\r\n\r\n  public handleOnItemClick = (\r\n    item: IItem,\r\n    posX: number,\r\n    posY: number,\r\n    slotContainerType: SlotContainerType | null\r\n  ): void => {\r\n    if (\r\n      !item ||\r\n      JSON.stringify(this.contextMenu?.slotItem) === JSON.stringify(item)\r\n    ) {\r\n      this.clearContextMenu();\r\n      this.clearItemHoverDetail();\r\n      return;\r\n    }\r\n    switch (slotContainerType) {\r\n      case SlotContainerType.EQUIPMENT_SET:\r\n        this.setEquipContextMenu(\r\n          {\r\n            visible: true,\r\n            posX,\r\n            posY,\r\n            slotItem: item,\r\n          },\r\n          item.type,\r\n          item.isItemContainer\r\n        );\r\n        break;\r\n      case SlotContainerType.INVENTORY:\r\n        this.setContextMenu(\r\n          {\r\n            visible: true,\r\n            posX,\r\n            posY,\r\n            slotItem: item,\r\n          },\r\n          item.type\r\n        );\r\n        break;\r\n      default:\r\n        this.setContextMenu(\r\n          {\r\n            visible: true,\r\n            posX,\r\n            posY,\r\n            slotItem: item,\r\n          },\r\n          item.type\r\n        );\r\n    }\r\n\r\n    this.clearItemHoverDetail();\r\n  };\r\n\r\n  public handleOnMouseHover = (\r\n    event: any,\r\n    slotIndex: number,\r\n    item: IItem | null,\r\n    posX: number,\r\n    posY: number,\r\n    onMouseOver: any\r\n  ): void => {\r\n    if (item) {\r\n      this.setItemHoverDetail({\r\n        visible: true,\r\n        posX,\r\n        posY,\r\n        item: item,\r\n      });\r\n    }\r\n    if (onMouseOver) {\r\n      onMouseOver(event, slotIndex, item);\r\n    }\r\n  };\r\n\r\n  public onSelected(\r\n    selectedActionId: ItemSocketEvents | string,\r\n    onActionSelected: any\r\n  ) {\r\n    let payloadData: IPayloadProps = {\r\n      actionType: selectedActionId,\r\n      item: this.contextMenu?.slotItem!,\r\n    };\r\n    if (onActionSelected) {\r\n      onActionSelected(payloadData);\r\n    }\r\n    this.clearContextMenu!();\r\n  }\r\n\r\npublic setDraggablePosition(currentPosition: IPosition){\r\n  this.draggablePosition = { ...currentPosition }\r\n}\r\n\r\n}\r\n\r\nexport const uiStore = new UIStore();\r\n","import {\r\n  IEquipementSet,\r\n  IItem,\r\n  IItemContainer,\r\n  ItemSlotType,\r\n  ItemSocketEvents,\r\n} from '@rpg-engine/shared';\r\nimport { observer } from 'mobx-react';\r\nimport React, { useState } from 'react';\r\nimport styled from 'styled-components';\r\nimport { IPosition } from '../../types/eventTypes';\r\nimport { DraggableContainer } from '../DraggableContainer';\r\nimport { ItemCard } from '../Item/Cards/ItemCard';\r\nimport { ItemSlot, SlotContainerType } from '../Item/Inventory/ItemSlot';\r\nimport { ListMenu } from '../ListMenu';\r\nimport { RPGUIContainerTypes } from '../RPGUIContainer';\r\nimport { uiStore } from '../store/UI.store';\r\n\r\nexport interface IEquipmentSetProps {\r\n  equipmentSet: IEquipementSet;\r\n  onClose?: () => void;\r\n  onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;\r\n  onActionSelected?: (payload: any) => void;\r\n  initialPosition?: { x: number; y: number };\r\n}\r\n\r\nexport const EquipmentSet: React.FC<IEquipmentSetProps> = observer(\r\n  ({\r\n    equipmentSet,\r\n    onClose,\r\n    onMouseOver,\r\n    onActionSelected,\r\n    initialPosition = { x: 0, y: 0 },\r\n  }) => {\r\n    const {\r\n      neck,\r\n      leftHand,\r\n      ring,\r\n      head,\r\n      armor,\r\n      legs,\r\n      boot,\r\n      inventory,\r\n      rightHand,\r\n      accessory,\r\n    } = equipmentSet;\r\n\r\n    const equipmentData = [\r\n      neck,\r\n      leftHand,\r\n      ring,\r\n      head,\r\n      armor,\r\n      legs,\r\n      boot,\r\n      inventory,\r\n      rightHand,\r\n      accessory,\r\n    ];\r\n\r\n    const equipmentMaskSlots = [\r\n      ItemSlotType.Neck,\r\n      ItemSlotType.LeftHand,\r\n      ItemSlotType.Ring,\r\n      ItemSlotType.Head,\r\n      ItemSlotType.Torso,\r\n      ItemSlotType.Legs,\r\n      ItemSlotType.Feet,\r\n      ItemSlotType.Inventory,\r\n      ItemSlotType.RightHand,\r\n      ItemSlotType.Accessory,\r\n    ];\r\n    // we use this draggable position to offset the menu position, after the container is dragged (otherwise, it bugs!)\r\n    // uiStore.setDraggablePosition(initialPosition)\r\n    const [draggablePosition, setDraggablePosition] = useState<IPosition>(\r\n      initialPosition\r\n    );\r\n\r\n    const handleOnMouseHover = (\r\n      event: any,\r\n      slotIndex: number,\r\n      item: IItem | null,\r\n      x: number,\r\n      y: number\r\n    ) => {\r\n      uiStore.handleOnMouseHover(event, slotIndex, item, x, y, onMouseOver);\r\n    };\r\n\r\n    const onSelected = (selectedActionId: ItemSocketEvents | string): void => {\r\n      uiStore.onSelected(selectedActionId, onActionSelected);\r\n    };\r\n\r\n    const onRenderEquipmentSlotRange = (start: number, end: number) => {\r\n      const equipmentRange = equipmentData.slice(start, end);\r\n      const slotMaksRange = equipmentMaskSlots.slice(start, end);\r\n\r\n      return equipmentRange.map((data, i) => {\r\n        const item = data as IItem;\r\n        const itemContainer =\r\n          (item && (item.itemContainer as IItemContainer)) ?? null;\r\n        return (\r\n          <ItemSlot\r\n            key={i}\r\n            slotIndex={i}\r\n            item={item}\r\n            itemContainer={itemContainer}\r\n            slotContainerType={SlotContainerType.EQUIPMENT_SET}\r\n            slotSpriteMask={slotMaksRange[i]}\r\n            onMouseOver={handleOnMouseHover}\r\n            onMouseOut={() => {\r\n              uiStore.clearItemHoverDetail();\r\n            }}\r\n            onClick={uiStore.handleOnItemClick}\r\n            onCancelContextMenu={() => {\r\n              uiStore.clearContextMenu();\r\n            }}\r\n          />\r\n        );\r\n      });\r\n    };\r\n\r\n    return (\r\n      <DraggableContainer\r\n        title={'Equipments'}\r\n        type={RPGUIContainerTypes.Framed}\r\n        onCloseButton={() => {\r\n          if (onClose) onClose();\r\n        }}\r\n        width=\"330px\"\r\n        cancelDrag=\".equipment-container-body\"\r\n        onPositionChange={({ x, y }) => {\r\n          setDraggablePosition({ x, y });\r\n          // uiStore.setDraggablePosition({ x, y });\r\n        }}\r\n        onOutsideClick={() => {\r\n          uiStore.clearContextMenu();\r\n          uiStore.clearItemHoverDetail();\r\n        }}\r\n      >\r\n        <EquipmentSetContainer className=\"equipment-container-body\">\r\n          <EquipmentColumn>{onRenderEquipmentSlotRange(0, 3)}</EquipmentColumn>\r\n          <EquipmentColumn>{onRenderEquipmentSlotRange(3, 7)}</EquipmentColumn>\r\n          <EquipmentColumn>{onRenderEquipmentSlotRange(7, 10)}</EquipmentColumn>\r\n        </EquipmentSetContainer>\r\n\r\n        {uiStore.contextMenu?.visible ? (\r\n          <ListMenu\r\n            x={uiStore.contextMenu.posX - draggablePosition.x}\r\n            y={uiStore.contextMenu.posY - draggablePosition.y}\r\n            options={uiStore.contextMenu.contextActions}\r\n            onSelected={onSelected}\r\n          />\r\n        ) : null}\r\n\r\n        {uiStore.onHoverDetail?.visible ? (\r\n          <ItemCard\r\n            item={uiStore.onHoverDetail.item}\r\n            x={uiStore.onHoverDetail.posX}\r\n            y={uiStore.onHoverDetail.posY}\r\n          />\r\n        ) : null}\r\n      </DraggableContainer>\r\n    );\r\n  }\r\n);\r\n\r\nconst EquipmentSetContainer = styled.div`\r\n  width: inherit;\r\n  display: flex;\r\n  justify-content: center;\r\n  flex-wrap: wrap;\r\n  flex-direction: row;\r\n`;\r\n\r\nconst EquipmentColumn = styled.div`\r\n  display: flex;\r\n  justify-content: center;\r\n  flex-wrap: wrap;\r\n  flex-direction: column;\r\n`;\r\n","import React from 'react';\r\nimport { IPosition } from '../../types/eventTypes';\r\nimport { DraggableContainer } from '../DraggableContainer';\r\nimport { RPGUIContainerTypes } from '../RPGUIContainer';\r\n\r\ninterface IProps {\r\n  children: React.ReactNode;\r\n  title: string;\r\n  onClose?: () => void;\r\n  onPositionChange?: (position: IPosition) => void;\r\n  onOutsideClick?: () => void;\r\n}\r\n\r\nexport const SlotsContainer: React.FC<IProps> = ({\r\n  children,\r\n  title,\r\n  onClose,\r\n  onPositionChange,\r\n  onOutsideClick,\r\n}) => {\r\n  return (\r\n    <DraggableContainer\r\n      title={title}\r\n      type={RPGUIContainerTypes.Framed}\r\n      onCloseButton={() => {\r\n        if (onClose) {\r\n          onClose();\r\n        }\r\n      }}\r\n      width=\"330px\"\r\n      cancelDrag=\".item-container-body\"\r\n      onPositionChange={({ x, y }) => {\r\n        if (onPositionChange) {\r\n          onPositionChange({ x, y });\r\n        }\r\n      }}\r\n      onOutsideClick={onOutsideClick}\r\n    >\r\n      {children}\r\n    </DraggableContainer>\r\n  );\r\n};\r\n","import { IItem, IItemContainer, ItemSocketEvents } from '@rpg-engine/shared';\r\nimport { observer } from 'mobx-react';\r\nimport React, { useState } from 'react';\r\nimport styled from 'styled-components';\r\nimport { IPosition } from '../../../types/eventTypes';\r\nimport { SlotsContainer } from '../../Abstractions/SlotsContainer';\r\nimport { ListMenu } from '../../ListMenu';\r\nimport { uiStore } from '../../store/UI.store';\r\nimport { ItemCard } from '../Cards/ItemCard';\r\nimport { ItemSlot, SlotContainerType } from './ItemSlot';\r\n\r\nexport interface IItemContainerProps {\r\n  itemContainer: IItemContainer;\r\n  onClose?: () => void;\r\n  onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;\r\n  onActionSelected?: (payload: any) => void;\r\n  initialPosition?: { x: number; y: number };\r\n}\r\n\r\nexport const ItemContainer: React.FC<IItemContainerProps> = observer(\r\n  ({\r\n    itemContainer,\r\n    onClose,\r\n    onMouseOver,\r\n    onActionSelected,\r\n    initialPosition = { x: 0, y: 0 },\r\n  }) => {\r\n    // we use this draggable position to offset the menu position, after the container is dragged (otherwise, it bugs!)\r\n    const [draggablePosition, setDraggablePosition] = useState<IPosition>(\r\n      initialPosition\r\n    );\r\n\r\n    const handleOnMouseHover = (\r\n      event: any,\r\n      slotIndex: number,\r\n      item: IItem | null,\r\n      x: number,\r\n      y: number\r\n    ) => {\r\n      uiStore.handleOnMouseHover(event, slotIndex, item, x, y, onMouseOver);\r\n    };\r\n\r\n    const onSelected = (selectedActionId: ItemSocketEvents | string): void => {\r\n      uiStore.onSelected(selectedActionId, onActionSelected);\r\n    };\r\n\r\n    const onRenderSlots = () => {\r\n      const slots = [];\r\n\r\n      for (let i = 0; i < itemContainer.slotQty; i++) {\r\n        slots.push(\r\n          <ItemSlot\r\n            key={i}\r\n            slotIndex={i}\r\n            item={itemContainer.slots?.[i] || null}\r\n            slotContainerType={SlotContainerType.INVENTORY}\r\n            onMouseOver={handleOnMouseHover}\r\n            onClick={uiStore.handleOnItemClick}\r\n            onMouseOut={() => {\r\n              uiStore.clearItemHoverDetail();\r\n            }}\r\n            onCancelContextMenu={() => {\r\n              uiStore.clearContextMenu();\r\n            }}\r\n          />\r\n        );\r\n      }\r\n      return slots;\r\n    };\r\n\r\n    return (\r\n      <SlotsContainer\r\n        title={itemContainer.name || 'Container'}\r\n        onPositionChange={({ x, y }) => {\r\n          setDraggablePosition({ x, y });\r\n        }}\r\n        onOutsideClick={() => {\r\n          uiStore.clearContextMenu();\r\n          uiStore.clearItemHoverDetail();\r\n        }}\r\n        onClose={onClose}\r\n      >\r\n        <ItemsContainer className=\"item-container-body\">\r\n          {onRenderSlots()}\r\n        </ItemsContainer>\r\n\r\n        {uiStore.contextMenu?.visible ? (\r\n          <ListMenu\r\n            x={uiStore.contextMenu.posX - draggablePosition.x}\r\n            y={uiStore.contextMenu.posY - draggablePosition.y}\r\n            options={uiStore.contextMenu.contextActions}\r\n            onSelected={onSelected}\r\n          />\r\n        ) : null}\r\n\r\n        {uiStore.onHoverDetail?.visible ? (\r\n          <ItemCard\r\n            item={uiStore.onHoverDetail.item}\r\n            x={uiStore.onHoverDetail.posX - draggablePosition.x}\r\n            y={uiStore.onHoverDetail.posY - draggablePosition.y}\r\n          />\r\n        ) : null}\r\n      </SlotsContainer>\r\n    );\r\n  }\r\n);\r\n\r\nconst ItemsContainer = styled.div`\r\n  max-width: 280px;\r\n  display: flex;\r\n  justify-content: center;\r\n  flex-wrap: wrap;\r\n`;\r\n","import React, { useEffect, useState } from 'react';\r\nimport styled from 'styled-components';\r\n\r\ninterface IProps {\r\n  text: string;\r\n  onFinish?: () => void;\r\n  onStart?: () => void;\r\n}\r\n\r\nexport const DynamicText: React.FC<IProps> = ({ text, onFinish, onStart }) => {\r\n  const [textState, setTextState] = useState<string>('');\r\n\r\n  useEffect(() => {\r\n    let i = 0;\r\n    const interval = setInterval(() => {\r\n      // on every interval, show one more character\r\n\r\n      if (i === 0) {\r\n        if (onStart) {\r\n          onStart();\r\n        }\r\n      }\r\n\r\n      if (i < text.length) {\r\n        setTextState(text.substring(0, i + 1));\r\n        i++;\r\n      } else {\r\n        clearInterval(interval);\r\n        if (onFinish) {\r\n          onFinish();\r\n        }\r\n      }\r\n    }, 50);\r\n\r\n    return () => {\r\n      clearInterval(interval);\r\n    };\r\n  }, [text]);\r\n\r\n  return <TextContainer>{textState}</TextContainer>;\r\n};\r\n\r\nconst TextContainer = styled.p`\r\n  font-size: 0.7rem !important;\r\n  color: white;\r\n  text-shadow: 1px 1px 0px #000000;\r\n  letter-spacing: 1.2px;\r\n  word-break: normal;\r\n`;\r\n","import React, { useEffect, useState } from 'react';\r\nimport styled from 'styled-components';\r\nimport { chunkString } from '../../libs/StringHelpers';\r\nimport { DynamicText } from '../typography/DynamicText';\r\n\r\ninterface IProps {\r\n  text: string;\r\n  onClose: () => void;\r\n  onEndStep: () => void;\r\n  onStartStep: () => void;\r\n}\r\n\r\nexport const NPCDialogText: React.FC<IProps> = ({\r\n  text,\r\n  onClose,\r\n  onEndStep,\r\n  onStartStep,\r\n}) => {\r\n  const textChunks = chunkString(text, 85);\r\n\r\n  const [chunkIndex, setChunkIndex] = useState<number>(0);\r\n\r\n  const onHandleSpacePress = (event: KeyboardEvent) => {\r\n    if (event.code === 'Space') {\r\n      const hasNextChunk = textChunks?.[chunkIndex + 1] || false;\r\n\r\n      if (hasNextChunk) {\r\n        setChunkIndex(prev => prev + 1);\r\n      } else {\r\n        // if there's no more text chunks, close the dialog\r\n        onClose();\r\n      }\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    document.addEventListener('keydown', onHandleSpacePress);\r\n\r\n    return () => document.removeEventListener('keydown', onHandleSpacePress);\r\n  }, [chunkIndex]);\r\n\r\n  return (\r\n    <Container>\r\n      <DynamicText\r\n        text={textChunks?.[chunkIndex] || ''}\r\n        onFinish={onEndStep}\r\n        onStart={onStartStep}\r\n      />\r\n    </Container>\r\n  );\r\n};\r\n\r\nconst Container = styled.div``;\r\n","export const chunkString = (str: string, length: number) => {\r\n  return str.match(new RegExp('.{1,' + length + '}', 'g'));\r\n};\r\n","import React from 'react';\r\n\r\n//@ts-ignore\r\nexport const useEventListener = (type, handler, el = window) => {\r\n  const savedHandler = React.useRef();\r\n\r\n  React.useEffect(() => {\r\n    savedHandler.current = handler;\r\n  }, [handler]);\r\n\r\n  React.useEffect(() => {\r\n    //@ts-ignore\r\n    const listener = e => savedHandler.current(e);\r\n\r\n    el.addEventListener(type, listener);\r\n\r\n    return () => {\r\n      el.removeEventListener(type, listener);\r\n    };\r\n  }, [type, el]);\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport styled from 'styled-components';\r\nimport { useEventListener } from '../../../hooks/useEventListener';\r\nimport { DynamicText } from '../../typography/DynamicText';\r\n\r\nexport interface IQuestionDialogAnswer {\r\n  id: number;\r\n  text: string;\r\n  nextQuestionId?: number;\r\n}\r\n\r\nexport interface IQuestionDialog {\r\n  id: number;\r\n  text: string;\r\n  answerIds?: number[];\r\n}\r\n\r\nexport interface IProps {\r\n  questions: IQuestionDialog[];\r\n  answers: IQuestionDialogAnswer[];\r\n  onClose: () => void;\r\n}\r\n\r\nexport const QuestionDialog: React.FC<IProps> = ({\r\n  questions,\r\n  answers,\r\n  onClose,\r\n}) => {\r\n  const [currentQuestion, setCurrentQuestion] = useState(questions[0]);\r\n\r\n  const [canShowAnswers, setCanShowAnswers] = useState<boolean>(false);\r\n\r\n  const onGetFirstAnswer = () => {\r\n    if (!currentQuestion.answerIds || currentQuestion.answerIds.length === 0) {\r\n      return null;\r\n    }\r\n\r\n    const firstAnswerId = currentQuestion.answerIds![0];\r\n\r\n    return answers.find(answer => answer.id === firstAnswerId);\r\n  };\r\n\r\n  const [\r\n    currentAnswer,\r\n    setCurrentAnswer,\r\n  ] = useState<IQuestionDialogAnswer | null>(onGetFirstAnswer()!);\r\n\r\n  useEffect(() => {\r\n    setCurrentAnswer(onGetFirstAnswer()!);\r\n  }, [currentQuestion]);\r\n\r\n  const onGetAnswers = (answerIds: number[]) => {\r\n    return answerIds.map((answerId: number) =>\r\n      answers.find(answer => answer.id === answerId)\r\n    );\r\n  };\r\n\r\n  const onKeyPress = (e: KeyboardEvent) => {\r\n    switch (e.key) {\r\n      case 'ArrowDown':\r\n        // select next answer, if any.\r\n        // if no next answer, select first answer\r\n        // const nextAnswer = onGetAnswers(currentQuestion.answerIds!).find(\r\n        //   (answer) => answer?.id === currentAnswer!.id + 1\r\n        // );\r\n\r\n        const nextAnswerIndex = onGetAnswers(\r\n          currentQuestion.answerIds!\r\n        ).findIndex(answer => answer?.id === currentAnswer!.id + 1);\r\n\r\n        const nextAnswerID = currentQuestion.answerIds![nextAnswerIndex];\r\n\r\n        // console.log(nextAnswerIndex);\r\n\r\n        const nextAnswer = onGetAnswers(currentQuestion.answerIds!).find(\r\n          answer => answer?.id === nextAnswerID\r\n        );\r\n\r\n        setCurrentAnswer(nextAnswer || onGetFirstAnswer()!);\r\n\r\n        break;\r\n      case 'ArrowUp':\r\n        // select previous answer, if any.\r\n        // if no previous answer, select last answer\r\n\r\n        const previousAnswerIndex = onGetAnswers(\r\n          currentQuestion.answerIds!\r\n        ).findIndex(answer => answer?.id === currentAnswer!.id - 1);\r\n\r\n        const previousAnswerID =\r\n          currentQuestion.answerIds &&\r\n          currentQuestion.answerIds[previousAnswerIndex];\r\n\r\n        const previousAnswer = onGetAnswers(currentQuestion.answerIds!).find(\r\n          answer => answer?.id === previousAnswerID\r\n        );\r\n\r\n        if (previousAnswer) {\r\n          setCurrentAnswer(previousAnswer);\r\n        } else {\r\n          setCurrentAnswer(onGetAnswers(currentQuestion.answerIds!).pop()!);\r\n        }\r\n\r\n        break;\r\n      case 'Enter':\r\n        setCanShowAnswers(false);\r\n\r\n        if (!currentAnswer?.nextQuestionId) {\r\n          onClose();\r\n          return;\r\n        } else {\r\n          setCurrentQuestion(\r\n            questions.find(\r\n              question => question.id === currentAnswer!.nextQuestionId\r\n            )!\r\n          );\r\n        }\r\n\r\n        break;\r\n    }\r\n  };\r\n  useEventListener('keydown', onKeyPress);\r\n\r\n  const onAnswerClick = (answer: IQuestionDialogAnswer) => {\r\n    setCanShowAnswers(false);\r\n    if (answer.nextQuestionId) {\r\n      // if there is a next question, go to it\r\n      setCurrentQuestion(\r\n        questions.find(question => question.id === answer.nextQuestionId)!\r\n      );\r\n    } else {\r\n      // else, finish dialog!\r\n      onClose();\r\n    }\r\n  };\r\n\r\n  const onRenderCurrentAnswers = () => {\r\n    const answerIds = currentQuestion.answerIds;\r\n    if (!answerIds) {\r\n      return null;\r\n    }\r\n\r\n    const answers = onGetAnswers(answerIds);\r\n\r\n    if (!answers) {\r\n      return null;\r\n    }\r\n\r\n    return answers.map(answer => {\r\n      const isSelected = currentAnswer?.id === answer?.id;\r\n      const selectedColor = isSelected ? 'yellow' : 'white';\r\n\r\n      if (answer) {\r\n        return (\r\n          <AnswerRow key={`answer_${answer.id}`}>\r\n            <AnswerSelectedIcon color={selectedColor}>\r\n              {isSelected ? 'X' : null}\r\n            </AnswerSelectedIcon>\r\n\r\n            <Answer\r\n              key={answer.id}\r\n              onClick={() => onAnswerClick(answer)}\r\n              color={selectedColor}\r\n            >\r\n              {answer.text}\r\n            </Answer>\r\n          </AnswerRow>\r\n        );\r\n      }\r\n\r\n      return null;\r\n    });\r\n  };\r\n\r\n  return (\r\n    <Container>\r\n      <QuestionContainer>\r\n        <DynamicText\r\n          text={currentQuestion.text}\r\n          onStart={() => setCanShowAnswers(false)}\r\n          onFinish={() => setCanShowAnswers(true)}\r\n        />\r\n      </QuestionContainer>\r\n\r\n      {canShowAnswers && (\r\n        <AnswersContainer>{onRenderCurrentAnswers()}</AnswersContainer>\r\n      )}\r\n    </Container>\r\n  );\r\n};\r\n\r\nconst Container = styled.div`\r\n  display: flex;\r\n\r\n  word-break: break-all;\r\n\r\n  box-sizing: border-box;\r\n  justify-content: flex-start;\r\n  align-items: flex-start;\r\n  flex-wrap: wrap;\r\n`;\r\n\r\nconst QuestionContainer = styled.div`\r\n  flex: 100%;\r\n  width: 100%;\r\n`;\r\n\r\nconst AnswersContainer = styled.div`\r\n  flex: 100%;\r\n`;\r\n\r\ninterface IAnswerProps {\r\n  color: string;\r\n}\r\n\r\nconst Answer = styled.p<IAnswerProps>`\r\n  flex: auto;\r\n  color: ${props => props.color} !important;\r\n  font-size: 0.65rem !important;\r\n  background: inherit;\r\n  border: none;\r\n`;\r\n\r\nconst AnswerSelectedIcon = styled.span<IAnswerProps>`\r\n  flex: 5% 0 0;\r\n  color: ${props => props.color} !important;\r\n`;\r\n\r\nconst AnswerRow = styled.div`\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: center;\r\n  align-items: center;\r\n  margin-bottom: 0.5rem;\r\n  height: 22px;\r\n\r\n  p {\r\n    line-height: unset;\r\n    margin-top: 0;\r\n    margin-bottom: 0rem;\r\n  }\r\n`;\r\n","import React, { useState } from 'react';\r\nimport styled from 'styled-components';\r\nimport { v4 as uuidv4 } from 'uuid';\r\nimport { useEventListener } from '../hooks/useEventListener';\r\nimport { _RPGUI } from './RPGUIRoot';\r\n\r\nexport enum RangeSliderType {\r\n  Slider = 'rpgui-slider',\r\n  GoldSlider = 'rpgui-slider golden',\r\n}\r\n\r\nexport interface IRangeSliderProps {\r\n  type: RangeSliderType;\r\n  valueMin: number;\r\n  valueMax: number;\r\n  width: string;\r\n  onChange: (value: number) => void;\r\n}\r\n\r\nexport const RangeSlider: React.FC<IRangeSliderProps> = ({\r\n  type,\r\n  valueMin,\r\n  valueMax,\r\n  width,\r\n  onChange,\r\n}) => {\r\n  const sliderId = uuidv4();\r\n\r\n  const [wasMouseDownFirst, setWasMouseDownFirst] = useState<boolean>(false);\r\n\r\n  useEventListener('mouseup', () => {\r\n    if (wasMouseDownFirst) {\r\n      onHandleMouseUp();\r\n    }\r\n    setWasMouseDownFirst(false);\r\n  });\r\n\r\n  const onHandleMouseUp = () => {\r\n    const rpguiSlider = document.getElementById(`rpgui-slider-${sliderId}`);\r\n    const value = _RPGUI.get_value(rpguiSlider);\r\n\r\n    onChange(Number(value));\r\n  };\r\n\r\n  return (\r\n    <div\r\n      onMouseUp={onHandleMouseUp}\r\n      onMouseDown={() => setWasMouseDownFirst(true)}\r\n    >\r\n      <Input\r\n        className={\r\n          type === RangeSliderType.Slider\r\n            ? RangeSliderType.Slider\r\n            : RangeSliderType.GoldSlider\r\n        }\r\n        type=\"range\"\r\n        style={{ width: width }}\r\n        min={valueMin}\r\n        max={valueMax}\r\n        id={`rpgui-slider-${sliderId}`}\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nconst Input = styled.input`\r\n  opacity: 0;\r\n`;\r\n","import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nexport interface IBarProps {\r\n  max: number;\r\n  value: number;\r\n  color: 'red' | 'blue' | 'green';\r\n  style?: Record<string, any>;\r\n  displayText?: boolean;\r\n  percentageWidth?: number;\r\n  minWidth?: number;\r\n}\r\n\r\nexport const ProgressBar: React.FC<IBarProps> = ({\r\n  max,\r\n  value,\r\n  color,\r\n  displayText = true,\r\n  percentageWidth = 40,\r\n  minWidth = 100,\r\n  style,\r\n}) => {\r\n  const calculatePercentageValue = function(max: number, value: number) {\r\n    if (value > max) {\r\n      value = max;\r\n    }\r\n    return (value * 100) / max;\r\n  };\r\n\r\n  return (\r\n    <Container\r\n      className=\"rpgui-progress\"\r\n      data-value={calculatePercentageValue(max, value) / 100}\r\n      data-rpguitype=\"progress\"\r\n      percentageWidth={percentageWidth}\r\n      minWidth={minWidth}\r\n      style={style}\r\n    >\r\n      {displayText && (\r\n        <TextOverlay>\r\n          <ProgressBarText>\r\n            {value}/{max}\r\n          </ProgressBarText>\r\n        </TextOverlay>\r\n      )}\r\n      <div className=\" rpgui-progress-track\">\r\n        <div\r\n          className={`rpgui-progress-fill ${color} `}\r\n          style={{\r\n            left: '0px',\r\n            width: calculatePercentageValue(max, value) + '%',\r\n          }}\r\n        ></div>\r\n      </div>\r\n      <div className=\" rpgui-progress-left-edge\"></div>\r\n      <div className=\" rpgui-progress-right-edge\"></div>\r\n    </Container>\r\n  );\r\n};\r\n\r\nconst ProgressBarText = styled.span`\r\n  font-size: 1rem;\r\n  color: white;\r\n  text-align: center;\r\n  z-index: 1;\r\n  position: absolute;\r\n  left: 50%;\r\n  transform: translateX(-50%);\r\n  top: 12px;\r\n`;\r\n\r\nconst TextOverlay = styled.div`\r\n  width: 100%;\r\n  position: relative;\r\n`;\r\n\r\ninterface IContainerProps {\r\n  percentageWidth?: number;\r\n  minWidth?: number;\r\n  style?: Record<string, any>;\r\n}\r\n\r\nconst Container = styled.div<IContainerProps>`\r\n  display: flex;\r\n  flex-direction: column;\r\n  min-width: ${props => props.minWidth}px;\r\n  width: ${props => props.percentageWidth}%;\r\n  justify-content: start;\r\n  align-items: flex-start;\r\n  ${props => props.style}\r\n`;\r\n","import React from 'react';\r\nimport styled from 'styled-components';\r\nimport iconsAtlasJSON from '../../mocks/atlas/icons/icons.json';\r\nimport iconsAtlasIMG from '../../mocks/atlas/icons/icons.png';\r\nimport { SpriteFromAtlas } from './SpriteFromAtlas';\r\n\r\ninterface IProps {\r\n  onClick?: () => void;\r\n  spriteKey: string;\r\n  baseSpriteKey?: string;\r\n  imgStyle?: any;\r\n}\r\n\r\nexport const SpriteIcon: React.FC<IProps> = ({\r\n  onClick,\r\n  spriteKey,\r\n  baseSpriteKey,\r\n  imgStyle,\r\n}) => {\r\n  return (\r\n    <Container>\r\n      {baseSpriteKey && (\r\n        <Slot>\r\n          <SpriteFromAtlas\r\n            onClick={onClick}\r\n            atlasJSON={iconsAtlasJSON}\r\n            atlasIMG={iconsAtlasIMG}\r\n            spriteKey={baseSpriteKey}\r\n            width={32}\r\n            height={32}\r\n            containerStyle={{\r\n              zIndex: -1,\r\n            }}\r\n          />\r\n        </Slot>\r\n      )}\r\n      <Slot>\r\n        <SpriteFromAtlas\r\n          onClick={onClick}\r\n          atlasJSON={iconsAtlasJSON}\r\n          atlasIMG={iconsAtlasIMG}\r\n          spriteKey={spriteKey}\r\n          width={28}\r\n          height={28}\r\n          containerStyle={{\r\n            zIndex: 0,\r\n          }}\r\n          imgScale={baseSpriteKey ? 1.5 : 2}\r\n          imgStyle={imgStyle}\r\n        />\r\n      </Slot>\r\n    </Container>\r\n  );\r\n};\r\n\r\nconst Container = styled.div`\r\n  position: relative;\r\n  width: 32px;\r\n  height: 32px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n`;\r\n\r\nconst Slot = styled.div`\r\n  position: absolute;\r\n`;\r\n","import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nexport interface ISimpleProgressBarProps {\r\n  value: number;\r\n  bgColor?: string;\r\n  margin?: number;\r\n}\r\n\r\nexport const SimpleProgressBar: React.FC<ISimpleProgressBarProps> = ({\r\n  value,\r\n  bgColor = 'red',\r\n  margin = 20,\r\n}) => {\r\n  return (\r\n    <Container className=\"simple-progress-bar\">\r\n      <ProgressBarContainer margin={margin}>\r\n        <BackgroundBar>\r\n          <Progress value={value} bgColor={bgColor} />\r\n        </BackgroundBar>\r\n      </ProgressBarContainer>\r\n    </Container>\r\n  );\r\n};\r\n\r\nconst Container = styled.div`\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 100%;\r\n`;\r\n\r\nconst BackgroundBar = styled.span`\r\n  background-color: rgba(0, 0, 0, 0.075);\r\n`;\r\n\r\ninterface ISimpleProgressBarThemeProps {\r\n  value: number;\r\n  bgColor: string;\r\n}\r\n\r\nconst Progress = styled.span`\r\n  background-color: ${(props: ISimpleProgressBarThemeProps) => props.bgColor};\r\n  width: ${(props: ISimpleProgressBarThemeProps) => props.value}%;\r\n`;\r\n\r\ninterface ISimpleProgressBarTheme2Props {\r\n  margin: number;\r\n}\r\n\r\nconst ProgressBarContainer = styled.div`\r\n  border-radius: 60px;\r\n  border: 1px solid #282424;\r\n  overflow: hidden;\r\n  width: 100%;\r\n  span {\r\n    display: block;\r\n    height: 100%;\r\n  }\r\n  height: 8px;\r\n  margin-left: ${(props: ISimpleProgressBarTheme2Props) => props.margin}px;\r\n`;\r\n","import { getSPForLevel } from '@rpg-engine/shared';\r\nimport React from 'react';\r\nimport styled from 'styled-components';\r\nimport atlasJSON from '../mocks/atlas/items/items.json';\r\nimport atlasIMG from '../mocks/atlas/items/items.png';\r\nimport { SpriteFromAtlas } from './shared/SpriteFromAtlas';\r\nimport { SimpleProgressBar } from './SimpleProgressBar';\r\n\r\nexport interface ISkillProgressBarProps {\r\n  skillName: string;\r\n  bgColor: string;\r\n  level: number;\r\n  skillPoints: number;\r\n  skillPointsToNextLevel?: number;\r\n  texturePath: string;\r\n  showSkillPoints?: boolean;\r\n}\r\n\r\nexport const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({\r\n  bgColor,\r\n  skillName,\r\n  level,\r\n  skillPoints,\r\n  texturePath,\r\n  showSkillPoints = true,\r\n}) => {\r\n  const spForNextLevel = getSPForLevel(level + 1);\r\n\r\n  const ratio = (skillPoints / spForNextLevel) * 100;\r\n\r\n  return (\r\n    <>\r\n      <ProgressTitle>\r\n        <TitleName>{skillName}</TitleName>\r\n        <ValueDisplay>lv {level}</ValueDisplay>\r\n      </ProgressTitle>\r\n      <ProgressBody>\r\n        <ProgressIconContainer>\r\n          {atlasIMG && atlasJSON ? (\r\n            <SpriteContainer>\r\n              <SpriteFromAtlas\r\n                atlasIMG={atlasIMG}\r\n                atlasJSON={atlasJSON}\r\n                spriteKey={texturePath}\r\n                imgScale={1}\r\n                grayScale\r\n                opacity={0.5}\r\n              />\r\n            </SpriteContainer>\r\n          ) : (\r\n            <></>\r\n          )}\r\n        </ProgressIconContainer>\r\n\r\n        <ProgressBarContainer>\r\n          <SimpleProgressBar value={ratio} bgColor={bgColor} />\r\n        </ProgressBarContainer>\r\n      </ProgressBody>\r\n      {showSkillPoints && (\r\n        <SkillDisplayContainer>\r\n          <SkillPointsDisplay>\r\n            {skillPoints}/{spForNextLevel}\r\n          </SkillPointsDisplay>\r\n        </SkillDisplayContainer>\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nconst ProgressBarContainer = styled.div`\r\n  position: relative;\r\n  top: 8px;\r\n  width: 100%;\r\n  height: auto;\r\n`;\r\n\r\nconst SpriteContainer = styled.div`\r\n  position: relative;\r\n  top: -3px;\r\n  left: 0;\r\n`;\r\n\r\nconst SkillDisplayContainer = styled.div`\r\n  margin: 5px auto;\r\n\r\n  p {\r\n    margin: 0;\r\n  }\r\n`;\r\n\r\nconst SkillPointsDisplay = styled.p`\r\n  font-size: 0.6rem !important;\r\n  font-weight: bold;\r\n  text-align: center;\r\n`;\r\n\r\nconst TitleName = styled.span`\r\n  margin-left: 5px;\r\n`;\r\n\r\nconst ValueDisplay = styled.span``;\r\n\r\nconst ProgressIconContainer = styled.div`\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n`;\r\n\r\nconst ProgressBody = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: 100%;\r\n`;\r\n\r\nconst ProgressTitle = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: space-between;\r\n  span {\r\n    font-size: 0.6rem;\r\n  }\r\n  margin-top: 10px;\r\n`;\r\n","import { ISkill } from '@rpg-engine/shared';\r\nimport React from 'react';\r\nimport styled from 'styled-components';\r\nimport { colors } from '../constants/uiColors';\r\nimport { DraggableContainer } from './DraggableContainer';\r\nimport { SkillProgressBar } from './SkillProgressBar';\r\n\r\nexport interface ISkillContainerProps {\r\n  skill: ISkill;\r\n  onCloseButton: () => void;\r\n}\r\n\r\nexport const SkillsContainer: React.FC<ISkillContainerProps> = ({\r\n  onCloseButton,\r\n  skill,\r\n}) => {\r\n  return (\r\n    <SkillsDraggableContainer title=\"Skills\" onCloseButton={onCloseButton}>\r\n      <SkillSplitDiv>\r\n        <p>Combat Skills</p>\r\n        <hr className=\"golden\" />\r\n      </SkillSplitDiv>\r\n      <SkillProgressBar\r\n        skillName={'First'}\r\n        bgColor={colors.cardinal}\r\n        level={skill?.first?.level || 0}\r\n        skillPoints={skill?.first?.skillPoints || 0}\r\n        skillPointsToNextLevel={skill?.first?.skillPointsToNextLevel || 0}\r\n        texturePath={'gloves/leather-gloves.png'}\r\n      />\r\n      <SkillProgressBar\r\n        skillName={'Club'}\r\n        bgColor={colors.cardinal}\r\n        level={skill?.club?.level || 0}\r\n        skillPoints={skill?.club?.skillPoints || 0}\r\n        skillPointsToNextLevel={skill?.club?.skillPointsToNextLevel || 0}\r\n        texturePath={'maces/club.png'}\r\n      />\r\n      <SkillProgressBar\r\n        skillName={'Sword'}\r\n        bgColor={colors.cardinal}\r\n        level={skill?.sword?.level || 0}\r\n        skillPoints={skill?.sword?.skillPoints || 0}\r\n        skillPointsToNextLevel={skill?.sword?.skillPointsToNextLevel || 0}\r\n        texturePath={'swords/double-edged-sword.png'}\r\n      />\r\n      <SkillProgressBar\r\n        skillName={'Axe'}\r\n        bgColor={colors.cardinal}\r\n        level={skill?.axe?.level || 0}\r\n        skillPoints={skill?.axe?.skillPoints || 0}\r\n        skillPointsToNextLevel={skill?.axe?.skillPointsToNextLevel || 0}\r\n        texturePath={'axes/double-axe.png'}\r\n      />\r\n      <SkillProgressBar\r\n        skillName={'Distance'}\r\n        bgColor={colors.cardinal}\r\n        level={skill?.distance?.level || 0}\r\n        skillPoints={skill?.distance?.skillPoints || 0}\r\n        skillPointsToNextLevel={skill?.distance?.skillPointsToNextLevel || 0}\r\n        texturePath={'bows/horse-bow.png'}\r\n      />\r\n      <SkillProgressBar\r\n        skillName={'Shielding'}\r\n        bgColor={colors.cardinal}\r\n        level={skill?.shielding?.level || 0}\r\n        skillPoints={skill?.shielding?.skillPoints || 0}\r\n        skillPointsToNextLevel={skill?.shielding?.skillPointsToNextLevel || 0}\r\n        texturePath={'shields/studded-shield.png'}\r\n      />\r\n      <SkillSplitDiv>\r\n        <p>Crafting Skills</p>\r\n        <hr className=\"golden\" />\r\n      </SkillSplitDiv>\r\n      <SkillProgressBar\r\n        skillName={'Fishing'}\r\n        bgColor={colors.blue}\r\n        level={skill?.fishing?.level || 0}\r\n        skillPoints={skill?.fishing?.skillPoints || 0}\r\n        skillPointsToNextLevel={skill?.fishing?.skillPointsToNextLevel || 0}\r\n        texturePath={'foods/fish.png'}\r\n      />\r\n      <SkillProgressBar\r\n        skillName={'Mining'}\r\n        bgColor={colors.blue}\r\n        level={skill?.mining?.level || 0}\r\n        skillPoints={skill?.mining?.skillPoints || 0}\r\n        skillPointsToNextLevel={skill?.mining?.skillPointsToNextLevel || 0}\r\n        texturePath={'crafting-resources/iron-ingot.png'}\r\n      />\r\n      <SkillProgressBar\r\n        skillName={'Lumberjacking'}\r\n        bgColor={colors.blue}\r\n        level={skill?.lumberjacking?.level || 0}\r\n        skillPoints={skill?.lumberjacking?.skillPoints || 0}\r\n        skillPointsToNextLevel={\r\n          skill?.lumberjacking?.skillPointsToNextLevel || 0\r\n        }\r\n        texturePath={'crafting-resources/greater-wood-log.png'}\r\n      />\r\n      <SkillProgressBar\r\n        skillName={'Cooking'}\r\n        bgColor={colors.blue}\r\n        level={skill?.cooking?.level || 0}\r\n        skillPoints={skill?.cooking?.skillPoints || 0}\r\n        skillPointsToNextLevel={skill?.cooking?.skillPointsToNextLevel || 0}\r\n        texturePath={'foods/chickens-meat.png'}\r\n      />\r\n      <SkillProgressBar\r\n        skillName={'Alchemy'}\r\n        bgColor={colors.blue}\r\n        level={skill?.alchemy?.level || 0}\r\n        skillPoints={skill?.alchemy?.skillPoints || 0}\r\n        skillPointsToNextLevel={skill?.alchemy?.skillPointsToNextLevel || 0}\r\n        texturePath={'potions/greater-mana-potion.png'}\r\n      />\r\n\r\n      <SkillSplitDiv>\r\n        <p>Basic Attributes</p>\r\n        <hr className=\"golden\" />\r\n      </SkillSplitDiv>\r\n      <SkillProgressBar\r\n        skillName={'Stamina'}\r\n        bgColor={colors.darkYellow}\r\n        level={skill?.stamina?.level || 0}\r\n        skillPoints={skill?.stamina?.skillPoints || 0}\r\n        skillPointsToNextLevel={skill?.stamina?.skillPointsToNextLevel || 0}\r\n        texturePath={'spell-icons/regenerate.png'}\r\n      />\r\n      <SkillProgressBar\r\n        skillName={'Magic'}\r\n        bgColor={colors.purple}\r\n        level={skill?.magic?.level || 0}\r\n        skillPoints={skill?.magic?.skillPoints || 0}\r\n        skillPointsToNextLevel={skill?.magic?.skillPointsToNextLevel || 0}\r\n        texturePath={'spell-icons/fireball.png'}\r\n      />\r\n      <SkillProgressBar\r\n        skillName={'Magic Resistance'}\r\n        bgColor={colors.navyBlue}\r\n        level={skill?.magicResistance?.level || 0}\r\n        skillPoints={skill?.magicResistance?.skillPoints || 0}\r\n        skillPointsToNextLevel={\r\n          skill?.magicResistance?.skillPointsToNextLevel || 0\r\n        }\r\n        texturePath={'spell-icons/freeze.png'}\r\n      />\r\n      <SkillProgressBar\r\n        skillName={'Strength'}\r\n        bgColor={colors.cardinal}\r\n        level={skill?.strength?.level || 0}\r\n        skillPoints={skill?.strength?.skillPoints || 0}\r\n        skillPointsToNextLevel={skill?.strength?.skillPointsToNextLevel || 0}\r\n        texturePath={'spell-icons/enchanted-blow.png'}\r\n      />\r\n      <SkillProgressBar\r\n        skillName={'Resistance'}\r\n        bgColor={colors.raisinBlack}\r\n        level={skill?.resistance?.level || 0}\r\n        skillPoints={skill?.resistance?.skillPoints || 0}\r\n        skillPointsToNextLevel={skill?.resistance?.skillPointsToNextLevel || 0}\r\n        texturePath={'spell-icons/magic-shield.png'}\r\n      />\r\n      <SkillProgressBar\r\n        skillName={'Dexterity'}\r\n        bgColor={colors.blue}\r\n        level={skill?.dexterity?.level || 0}\r\n        skillPoints={skill?.dexterity?.skillPoints || 0}\r\n        skillPointsToNextLevel={skill?.dexterity?.skillPointsToNextLevel || 0}\r\n        texturePath={'spell-icons/haste.png'}\r\n      />\r\n\r\n      {/* <SkillSplitDiv>\r\n        <p>Magic Skills</p>\r\n        <hr className=\"golden\" />\r\n      </SkillSplitDiv>\r\n      <SkillProgressBar\r\n        skillName={'Ice'}\r\n        bgColor={'red'}\r\n        level={skill?.ice?.level || 0}\r\n        skillPoints={skill?.ice?.skillPoints || 0}\r\n        skillPointsToNextLevel={skill?.ice?.skillPointsToNextLevel || 0}\r\n        texturePath={'spell-icons/freeze.png'}\r\n      />\r\n      <SkillProgressBar\r\n        skillName={'Earth'}\r\n        bgColor={'red'}\r\n        level={skill?.earth?.level || 0}\r\n        skillPoints={skill?.earth?.skillPoints || 0}\r\n        skillPointsToNextLevel={skill?.earth?.skillPointsToNextLevel || 0}\r\n        texturePath={'spell-icons/earth-barrier.png'}\r\n      />\r\n      <SkillProgressBar\r\n        skillName={'Air'}\r\n        bgColor={'red'}\r\n        level={skill?.air?.level || 0}\r\n        skillPoints={skill?.air?.skillPoints || 0}\r\n        skillPointsToNextLevel={skill?.air?.skillPointsToNextLevel || 0}\r\n        texturePath={'spell-icons/poison-tornado.png'}\r\n      />\r\n      <SkillProgressBar\r\n        skillName={'Water'}\r\n        bgColor={'red'}\r\n        level={skill?.water?.level || 0}\r\n        skillPoints={skill?.water?.skillPoints || 0}\r\n        skillPointsToNextLevel={skill?.water?.skillPointsToNextLevel || 0}\r\n        texturePath={'spell-icons/tsunami.png'}\r\n      /> */}\r\n    </SkillsDraggableContainer>\r\n  );\r\n};\r\n\r\nconst SkillsDraggableContainer = styled(DraggableContainer)`\r\n  border: 1px solid black;\r\n  width: 400px;\r\n  height: 800px;\r\n  overflow-y: scroll;\r\n  .DraggableContainer__TitleContainer-sc-184mpyl-2 {\r\n    width: auto;\r\n    height: auto;\r\n  }\r\n`;\r\n\r\nconst SkillSplitDiv = styled.div`\r\n  width: 100%;\r\n  font-size: 11px;\r\n  margin-top: 10px;\r\n  hr {\r\n    margin: 0px;\r\n    padding: 0px;\r\n  }\r\n  p {\r\n    margin-bottom: 0px;\r\n  }\r\n`;\r\n","/* eslint-disable react/require-default-props */\r\nimport React from 'react';\r\nimport styled from 'styled-components';\r\n\r\ninterface IProps {\r\n  maxLines?: number;\r\n  children: React.ReactNode;\r\n}\r\n\r\nexport const Truncate: React.FC<IProps> = ({ maxLines = 1, children }) => {\r\n  return <Container maxLines={maxLines}>{children}</Container>;\r\n};\r\n\r\ninterface IContainerProps {\r\n  maxLines: number;\r\n}\r\n\r\nconst Container = styled.div<IContainerProps>`\r\n  display: -webkit-box;\r\n  max-width: 100%;\r\n  max-height: 100%;\r\n  -webkit-line-clamp: ${props => props.maxLines};\r\n  -webkit-box-orient: vertical;\r\n  overflow: hidden;\r\n`;\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nexport interface ICheckItems {\r\n  label: string;\r\n  value: string;\r\n}\r\n\r\nexport interface ICheckProps {\r\n  items: ICheckItems[];\r\n  onChange: (selectedValues: IChecklistSelectedValues) => void;\r\n}\r\n\r\ninterface IChecklistSelectedValues {\r\n  [label: string]: boolean;\r\n}\r\n\r\nexport const CheckButton: React.FC<ICheckProps> = ({ items, onChange }) => {\r\n  const generateSelectedValuesList = () => {\r\n    const selectedValues: IChecklistSelectedValues = {};\r\n\r\n    items.forEach(item => {\r\n      selectedValues[item.label] = false;\r\n    });\r\n\r\n    return selectedValues;\r\n  };\r\n\r\n  const [selectedValues, setSelectedValues] = useState<\r\n    IChecklistSelectedValues\r\n  >(generateSelectedValuesList());\r\n\r\n  const handleClick = (label: string) => {\r\n    setSelectedValues({\r\n      ...selectedValues,\r\n      [label]: !selectedValues[label],\r\n    });\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (selectedValues) {\r\n      onChange(selectedValues);\r\n    }\r\n  }, [selectedValues]);\r\n\r\n  return (\r\n    <div id=\"elemento-checkbox\">\r\n      {items?.map((element, index) => {\r\n        return (\r\n          <div key={`${element.label}_${index}`}>\r\n            <input\r\n              className=\"rpgui-checkbox\"\r\n              type=\"checkbox\"\r\n              checked={selectedValues[element.label]}\r\n              onChange={() => {}}\r\n            />\r\n            <label onClick={() => handleClick(element.label)}>\r\n              {element.label}\r\n            </label>\r\n            <br />\r\n          </div>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport { v4 as uuidv4 } from 'uuid';\r\nimport { _RPGUI } from './RPGUIRoot';\r\n\r\nexport interface IOptionsProps {\r\n  id: number;\r\n  value: string;\r\n  option: string;\r\n}\r\n\r\nexport interface IDropdownProps {\r\n  options: IOptionsProps[];\r\n  width?: string;\r\n  onChange: (value: string) => void;\r\n}\r\n\r\nexport const Dropdown: React.FC<IDropdownProps> = ({\r\n  options,\r\n  width,\r\n  onChange,\r\n}) => {\r\n  const dropdownId = uuidv4();\r\n\r\n  const [selectedValue, setSelectedValue] = useState<string>('');\r\n\r\n  useEffect(() => {\r\n    const element = document.getElementById(`rpgui-dropdown-${dropdownId}`);\r\n    const dropdownValue = _RPGUI.get_value(element);\r\n    setSelectedValue(dropdownValue);\r\n\r\n    element?.addEventListener('change', (event: any) => {\r\n      setSelectedValue(event?.target.value);\r\n    });\r\n  }, []);\r\n\r\n  useEffect(() => {\r\n    if (selectedValue) {\r\n      onChange(selectedValue);\r\n    }\r\n  }, [selectedValue]);\r\n\r\n  return (\r\n    <select\r\n      id={`rpgui-dropdown-${dropdownId}`}\r\n      style={{ width: width }}\r\n      className=\"rpgui-dropdown\"\r\n    >\r\n      {options.map(option => {\r\n        return (\r\n          <option key={option.id} value={option.value}>\r\n            {option.option}\r\n          </option>\r\n        );\r\n      })}\r\n    </select>\r\n  );\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nexport interface IRadioItems {\r\n  label: string;\r\n  value: string;\r\n}\r\n\r\nexport interface IRadioProps {\r\n  name: string;\r\n  items: IRadioItems[];\r\n  onChange: (value: string) => void;\r\n}\r\n\r\nexport const InputRadio: React.FC<IRadioProps> = ({\r\n  name,\r\n  items,\r\n  onChange,\r\n}) => {\r\n  const [selectedValue, setSelectedValue] = useState<string>();\r\n  const handleClick = () => {\r\n    let element = document.querySelector(\r\n      `input[name=${name}]:checked`\r\n    ) as HTMLInputElement;\r\n    const elementValue = element.value;\r\n    setSelectedValue(elementValue);\r\n  };\r\n\r\n  useEffect(() => {\r\n    if (selectedValue) {\r\n      onChange(selectedValue);\r\n    }\r\n  }, [selectedValue]);\r\n\r\n  return (\r\n    <div id=\"elemento-radio\">\r\n      {items.map(element => {\r\n        return (\r\n          <>\r\n            <input\r\n              key={element.value}\r\n              className=\"rpgui-radio\"\r\n              value={element.value}\r\n              name={name}\r\n              type=\"radio\"\r\n            />\r\n            <label onClick={handleClick}>{element.label}</label>\r\n            <br />\r\n          </>\r\n        );\r\n      })}\r\n    </div>\r\n  );\r\n};\r\n","import React from 'react';\r\n\r\nexport interface ITextArea\r\n  extends React.DetailedHTMLProps<\r\n    React.TextareaHTMLAttributes<HTMLTextAreaElement>,\r\n    HTMLTextAreaElement\r\n  > {}\r\n\r\nexport const TextArea: React.FC<ITextArea> = ({ ...props }) => {\r\n  return <textarea {...props} />;\r\n};\r\n"],"names":["ButtonTypes","RPGUIContainerTypes","Button","children","buttonType","props","React","ButtonContainer","className","styled","button","displayName","componentId","Input","SlotContainerType","RPGUIContainer","width","Container","height","type","div","Column","flex","flexWrap","alignItems","justifyContent","CloseButton","CustomInput","CustomContainer","opacity","Form","form","MessageText","p","DraggableContainer","ref","FramedGold","onCloseButton","title","imgSrc","imgWidth","cancelDrag","onPositionChange","onOutsideClick","draggableRef","useRef","useEffect","handleClickOutside","event","current","contains","target","CustomEvent","detail","id","document","dispatchEvent","addEventListener","removeEventListener","_e","Draggable","cancel","onDrag","data","x","y","TitleContainer","Title","Icon","src","onClick","onTouchStart","h1","img","_RPGUI","RPGUI","ItemCard","item","name","SpriteFromAtlas","imgScale","grayScale","GRID_WIDTH","GRID_HEIGHT","hasHover","style","containerStyle","ImgSprite","atlasIMG","frame","atlasJSON","frames","spriteKey","scale","imgStyle","w","h","ContainerType","EquipmentSlotSpriteByType","Neck","LeftHand","Ring","Head","Torso","Legs","Feet","Inventory","RightHand","Accessory","ItemSlot","itemToRender","slotIndex","slotContainerType","slotSpriteMask","onMouseOver","onMouseOut","onCancelContextMenu","clientX","clientY","e","EQUIPMENT_SET","texturePath","allowedEquipSlotType","_itemToRender$allowed","includes","renderEquipment","quantity","element","push","isStackable","stackQty","ItemQty","left","renderItem","span","ListMenu","onSelected","fontSize","overflow","options","map","params","index","ListElement","key","text","li","NPCDialogType","generateContextList","actionsByTypeList","action","ItemSocketEventsDisplayLabels","initialState","visible","posX","posY","contextActions","slotItem","initialHoverState","initialPosition","uiStore","contextMenu","onHoverDetail","draggablePosition","handleOnItemClick","JSON","stringify","_this","_this$contextMenu","clearContextMenu","clearItemHoverDetail","setEquipContextMenu","isItemContainer","INVENTORY","setContextMenu","handleOnMouseHover","setItemHoverDetail","makeAutoObservable","this","itemType","contextActionMenu","ItemType","Weapon","Armor","Jewelry","Tool","ActionsByItemType","Equipment","Consumable","CraftMaterial","Other","Information","Quest","handleContextMenuList","console","log","toJS","EquipmenSetItems","EquipmenSetContainer","handleEquipmentContextMenuList","ItemSocketEvents","ContainerOpen","hoverDetail","selectedActionId","onActionSelected","payloadData","actionType","_this$contextMenu2","setDraggablePosition","currentPosition","EquipmentSet","observer","equipmentSet","onClose","equipmentData","neck","leftHand","ring","head","armor","legs","boot","inventory","rightHand","accessory","equipmentMaskSlots","ItemSlotType","useState","onRenderEquipmentSlotRange","start","end","equipmentRange","slice","slotMaksRange","i","itemContainer","Framed","EquipmentSetContainer","EquipmentColumn","SlotsContainer","ItemContainer","ItemsContainer","slots","slotQty","onRenderSlots","DynamicText","onFinish","onStart","textState","setTextState","interval","setInterval","length","substring","clearInterval","TextContainer","NPCDialogText","onEndStep","onStartStep","textChunks","match","RegExp","chunkIndex","setChunkIndex","onHandleSpacePress","code","prev","useEventListener","handler","el","window","savedHandler","listener","QuestionDialog","questions","answers","currentQuestion","setCurrentQuestion","canShowAnswers","setCanShowAnswers","onGetFirstAnswer","answerIds","firstAnswerId","find","answer","currentAnswer","setCurrentAnswer","onGetAnswers","answerId","nextAnswerIndex","findIndex","nextAnswerID","nextAnswer","previousAnswerIndex","previousAnswerID","previousAnswer","pop","nextQuestionId","question","QuestionContainer","AnswersContainer","isSelected","selectedColor","AnswerRow","AnswerSelectedIcon","color","Answer","onAnswerClick","onRenderCurrentAnswers","RangeSliderType","ThumbnailContainer","NPCThumbnail","PressSpaceIndicator","right","ProgressBarText","TextOverlay","minWidth","percentageWidth","input","Slot","SimpleProgressBar","bgColor","margin","ProgressBarContainer","BackgroundBar","Progress","value","SkillProgressBar","skillName","level","skillPoints","showSkillPoints","spForNextLevel","getSPForLevel","ratio","ProgressTitle","TitleName","ValueDisplay","ProgressBody","ProgressIconContainer","SpriteContainer","SkillDisplayContainer","SkillPointsDisplay","SkillsDraggableContainer","SkillSplitDiv","maxLines","chatMessages","onSendChatMessage","message","setMessage","scrollChatToBottom","scrollingElement","querySelector","scrollTop","scrollHeight","FramedGrey","ErrorBoundary","fallback","_id","emitter","createdAt","dayjs","Date","format","onRenderMessageLines","onRenderChatMessages","onSubmit","preventDefault","onChange","autoComplete","RPGUIButton","items","selectedValues","forEach","label","generateSelectedValuesList","setSelectedValues","checked","dropdownId","uuidv4","selectedValue","setSelectedValue","getElementById","dropdownValue","get_value","option","handleClick","imagePath","isQuestionDialog","showGoNextIndicator","setShowGoNextIndicator","TextAndThumbnail","aliceDefaultThumbnail","TextOnly","max","displayText","calculatePercentageValue","valueMin","valueMax","sliderId","wasMouseDownFirst","setWasMouseDownFirst","onHandleMouseUp","rpguiSlider","Number","onMouseUp","onMouseDown","Slider","GoldSlider","min","skill","first","skillPointsToNextLevel","club","sword","axe","distance","shielding","fishing","mining","lumberjacking","cooking","alchemy","stamina","magic","magicResistance","strength","resistance","dexterity","baseSpriteKey","iconsAtlasJSON","iconsAtlasIMG","zIndex"],"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/hooks/useOutsideAlerter.ts","../src/components/NPCDialog/NPCDialog.tsx","../src/components/DraggableContainer.tsx","../src/components/RPGUIRoot.tsx","../src/components/RelativeListMenu.tsx","../src/components/shared/SpriteFromAtlas.tsx","../src/components/Item/Cards/ItemTooltip.tsx","../src/components/Item/Inventory/itemContainerHelper.ts","../src/components/Item/Inventory/ItemSlot.tsx","../src/components/Equipment/EquipmentSet.tsx","../src/components/Abstractions/SlotsContainer.tsx","../src/components/Item/Inventory/ItemContainer.tsx","../src/components/ListMenu.tsx","../src/components/typography/DynamicText.tsx","../src/components/NPCDialog/NPCDialogText.tsx","../src/libs/StringHelpers.ts","../src/hooks/useEventListener.ts","../src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx","../src/components/RangeSlider.tsx","../src/components/ProgressBar.tsx","../src/components/PropertySelect/PropertySelect.tsx","../src/components/SimpleProgressBar.tsx","../src/components/SkillProgressBar.tsx","../src/components/SkillsContainer.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  disabled?: boolean;\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  >> = ({ disabled = false, children, buttonType, ...props }) => {\n  return (\n    <ButtonContainer className={`${buttonType}`} disabled={disabled} {...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: 2px;\n  right: 0px;\n  color: white;\n  z-index: 22;\n  font-size: 0.7rem;\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  darkYellow: '#FFC857',\n  orange: '#E9724C',\n  cardinal: '#C5283D',\n  raisinBlack: '#191923',\n  navyBlue: '#0E79B2',\n  purple: '#8C3D8C',\n  blue: '#3772FF',\n};\n","import { useEffect } from 'react';\n\nexport function useOutsideClick(ref: any, id: string) {\n  useEffect(() => {\n    /**\n     * Alert if clicked on outside of element\n     */\n    function handleClickOutside(event: any) {\n      if (ref.current && !ref.current.contains(event.target)) {\n        const event = new CustomEvent('clickOutside', {\n          detail: {\n            id,\n          },\n        });\n        document.dispatchEvent(event);\n      }\n    }\n    // Bind the event listener\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      // Unbind the event listener on clean up\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, [ref]);\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, useRef } from 'react';\nimport Draggable, { DraggableData } from 'react-draggable';\nimport styled from 'styled-components';\nimport { useOutsideClick } from '../hooks/useOutsideAlerter';\nimport { IPosition } from '../types/eventTypes';\nimport { RPGUIContainerTypes } from './RPGUIContainer';\n\nexport interface IDraggableContainerProps {\n  children: React.ReactNode;\n  width?: string;\n  height?: string;\n  className?: string;\n  type?: RPGUIContainerTypes;\n  title?: string;\n  imgSrc?: string;\n  imgWidth?: string;\n  onCloseButton?: () => void;\n  cancelDrag?: string;\n  onPositionChange?: (position: IPosition) => void;\n  onOutsideClick?: () => void;\n}\n\nexport const DraggableContainer: React.FC<IDraggableContainerProps> = ({\n  children,\n  width = '50%',\n  height,\n  className,\n  type = RPGUIContainerTypes.FramedGold,\n  onCloseButton,\n  title,\n  imgSrc,\n  imgWidth = '20px',\n  cancelDrag,\n  onPositionChange,\n  onOutsideClick,\n}) => {\n  const draggableRef = useRef(null);\n\n  useOutsideClick(draggableRef, 'item-container');\n\n  useEffect(() => {\n    document.addEventListener('clickOutside', event => {\n      const e = event as CustomEvent;\n\n      if (e.detail.id === 'item-container') {\n        if (onOutsideClick) {\n          onOutsideClick();\n        }\n      }\n    });\n\n    return () => {\n      document.removeEventListener('clickOutside', _e => {});\n    };\n  }, []);\n\n  return (\n    <Draggable\n      cancel={`.container-close,${cancelDrag}`}\n      onDrag={(_e, data: DraggableData) => {\n        if (onPositionChange) {\n          onPositionChange({\n            x: data.x,\n            y: data.y,\n          });\n        }\n      }}\n    >\n      <Container\n        ref={draggableRef}\n        width={width}\n        height={height || 'auto'}\n        className={`rpgui-container ${type} ${className}`}\n      >\n        {title && (\n          <TitleContainer className=\"drag-handler\">\n            <Title>\n              {imgSrc && <Icon src={imgSrc} width={imgWidth} />}\n              {title}\n            </Title>\n          </TitleContainer>\n        )}\n        {onCloseButton && (\n          <CloseButton\n            className=\"container-close\"\n            onClick={onCloseButton}\n            onTouchStart={onCloseButton}\n          >\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  &.rpgui-container {\n    padding-top: 1.5rem;\n  }\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: 0.8rem;\n`;\n\nconst TitleContainer = styled.div`\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  align-items: center;\n`;\n\nconst Title = styled.h1`\n  color: white;\n  z-index: 22;\n  font-size: 0.6rem;\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, { useEffect, useRef } from 'react';\nimport styled from 'styled-components';\nimport { useOutsideClick } from '../hooks/useOutsideAlerter';\n\ninterface IListMenuOption {\n  id: string;\n  text: string;\n}\n\nexport interface IRelativeMenuProps {\n  options: IListMenuOption[];\n  onSelected: (selectedOptionId: string) => void;\n  fontSize?: number;\n  onOutsideClick?: () => void;\n}\n\nexport const RelativeListMenu: React.FC<IRelativeMenuProps> = ({\n  options,\n  onSelected,\n  onOutsideClick,\n  fontSize = 0.8,\n}) => {\n  const ref = useRef(null);\n\n  useOutsideClick(ref, 'relative-context-menu');\n\n  useEffect(() => {\n    document.addEventListener('clickOutside', event => {\n      const e = event as CustomEvent;\n\n      if (e.detail.id === 'relative-context-menu') {\n        if (onOutsideClick) {\n          onOutsideClick();\n        }\n      }\n    });\n\n    return () => {\n      document.removeEventListener('clickOutside', _e => {});\n    };\n  }, []);\n\n  return (\n    <Container fontSize={fontSize} ref={ref}>\n      <ul className=\"rpgui-list-imp\" style={{ overflow: 'hidden' }}>\n        {options.map((params, index) => (\n          <ListElement\n            key={params?.id || index}\n            onClick={() => {\n              onSelected(params?.id);\n            }}\n          >\n            {params?.text || 'No text'}\n          </ListElement>\n        ))}\n      </ul>\n    </Container>\n  );\n};\n\ninterface IContainerProps {\n  fontSize?: number;\n}\n\nconst Container = styled.div<IContainerProps>`\n  position: absolute;\n  top: 1rem;\n  left: 4rem;\n\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  justify-content: start;\n  align-items: flex-start;\n\n  li {\n    font-size: ${props => props.fontSize}em;\n  }\n`;\n\nconst ListElement = styled.li`\n  margin-right: 0.5rem;\n`;\n","import { GRID_HEIGHT, GRID_WIDTH } from '@rpg-engine/shared';\nimport React from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n  atlasJSON: any;\n  atlasIMG: any;\n  spriteKey: string;\n  width?: number;\n  height?: number;\n  grayScale?: boolean;\n  opacity?: number;\n  onClick?: () => void;\n  containerStyle?: any;\n  imgStyle?: any;\n  imgScale?: number;\n}\n\nexport const SpriteFromAtlas: React.FC<IProps> = ({\n  atlasJSON,\n  atlasIMG,\n  spriteKey,\n  width = GRID_WIDTH,\n  height = GRID_HEIGHT,\n  imgScale = 2,\n  imgStyle,\n  onClick,\n  containerStyle,\n  grayScale = false,\n  opacity = 1,\n}) => {\n  //! If an item is not showing, remember that you MUST run yarn atlas:copy everytime you add a new item to the atlas (it will sync our public folder atlas with src/atlas).\n  //!Due to React's limitations, we cannot import it from the public folder directly!\n\n  const spriteData = atlasJSON.frames[spriteKey];\n\n  return (\n    <Container\n      width={width}\n      height={height}\n      hasHover={grayScale}\n      onClick={onClick}\n      style={containerStyle}\n    >\n      <ImgSprite\n        className=\"sprite-from-atlas-img\"\n        atlasIMG={atlasIMG}\n        frame={spriteData.frame}\n        scale={imgScale}\n        grayScale={grayScale}\n        opacity={opacity}\n        style={imgStyle}\n      />\n    </Container>\n  );\n};\n\ninterface IImgSpriteProps {\n  atlasIMG: any;\n  frame: {\n    x: number;\n    y: number;\n    w: number;\n    h: number;\n  };\n  scale: number;\n  grayScale: boolean;\n  opacity: number;\n}\n\ninterface IContainerProps {\n  width: number;\n  height: number;\n  hasHover: boolean;\n}\n\nconst Container = styled.div`\n  width: ${(props: IContainerProps) => props.width}px;\n  height: ${(props: IContainerProps) => props.height}px;\n  ${(props: IContainerProps) =>\n    !props.hasHover\n      ? `&:hover {\n    filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(180deg);\n  }`\n      : ``}\n`;\n\nconst ImgSprite = styled.div<IImgSpriteProps>`\n  width: ${props => props.frame.w}px;\n  height: ${props => props.frame.h}px;\n  background-image: url(${props => props.atlasIMG});\n  background-position: -${props => props.frame.x}px -${props => props.frame.y}px;\n  transform: scale(${props => props.scale});\n  position: relative;\n  top: 8px;\n  left: 8px;\n  filter: ${props => (props.grayScale ? 'grayscale(100%)' : 'none')};\n  opacity: ${props => props.opacity};\n`;\n","import React from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n  label: string;\n}\n\nexport const ItemTooltip: React.FC<IProps> = ({ label }) => {\n  return (\n    <Container>\n      <div>{label}</div>\n    </Container>\n  );\n};\n\nconst Container = styled.div`\n  z-index: 2;\n  position: absolute;\n  top: 1rem;\n  left: 4rem;\n\n  font-size: 0.5rem;\n  color: white;\n  background-color: black;\n  border-radius: 5px;\n  padding: 0.5rem;\n  min-width: 20px;\n  width: 100%;\n  text-align: center;\n\n  opacity: 0.75;\n`;\n","import {\n  ActionsForEquipmentSet,\n  ActionsForInventory,\n  ActionsForLoot,\n  ActionsForMapContainer,\n  ItemContainerType,\n  ItemSocketEventsDisplayLabels,\n  ItemType,\n} from '@rpg-engine/shared';\n\nexport interface IContextMenuItem {\n  id: string;\n  text: string;\n}\n\nconst generateContextMenuListOptions = (actionsByTypeList: any) => {\n  const contextMenu: IContextMenuItem[] = actionsByTypeList.map(\n    (action: string) => {\n      return { id: action, text: ItemSocketEventsDisplayLabels[action] };\n    }\n  );\n  return contextMenu;\n};\n\nexport const generateContextMenu = (\n  itemType: ItemType,\n  itemContainerType: ItemContainerType | null\n) => {\n  let contextActionMenu: IContextMenuItem[] = [];\n\n  if (itemContainerType === ItemContainerType.Inventory) {\n    switch (itemType) {\n      case ItemType.Weapon:\n      case ItemType.Armor:\n      case ItemType.Accessory:\n      case ItemType.Jewelry:\n      case ItemType.Container:\n        contextActionMenu = generateContextMenuListOptions(\n          ActionsForInventory.Equipment\n        );\n        break;\n      case ItemType.Consumable:\n        contextActionMenu = generateContextMenuListOptions(\n          ActionsForInventory.Consumable\n        );\n        break;\n      case ItemType.CraftMaterial:\n        contextActionMenu = generateContextMenuListOptions(\n          ActionsForInventory.CraftMaterial\n        );\n        break;\n      case ItemType.Tool:\n        contextActionMenu = generateContextMenuListOptions(\n          ActionsForInventory.Tool\n        );\n        break;\n\n      default:\n        contextActionMenu = generateContextMenuListOptions(\n          ActionsForInventory.Other\n        );\n        break;\n    }\n  }\n  if (itemContainerType === ItemContainerType.Equipment) {\n    switch (itemType) {\n      case ItemType.Container:\n        contextActionMenu = generateContextMenuListOptions(\n          ActionsForEquipmentSet.Container\n        );\n\n        break;\n      default:\n        contextActionMenu = generateContextMenuListOptions(\n          ActionsForEquipmentSet.Equipment\n        );\n    }\n  }\n  if (itemContainerType === ItemContainerType.Loot) {\n    switch (itemType) {\n      case ItemType.Weapon:\n      case ItemType.Armor:\n      case ItemType.Accessory:\n      case ItemType.Jewelry:\n        contextActionMenu = generateContextMenuListOptions(\n          ActionsForLoot.Equipment\n        );\n        break;\n      case ItemType.Consumable:\n        contextActionMenu = generateContextMenuListOptions(\n          ActionsForLoot.Consumable\n        );\n        break;\n      case ItemType.CraftMaterial:\n        contextActionMenu = generateContextMenuListOptions(\n          ActionsForLoot.CraftMaterial\n        );\n        break;\n      case ItemType.Tool:\n        contextActionMenu = generateContextMenuListOptions(ActionsForLoot.Tool);\n        break;\n      default:\n        contextActionMenu = generateContextMenuListOptions(\n          ActionsForLoot.Other\n        );\n        break;\n    }\n  }\n  if (itemContainerType === ItemContainerType.MapContainer) {\n    switch (itemType) {\n      case ItemType.Weapon:\n      case ItemType.Armor:\n      case ItemType.Accessory:\n      case ItemType.Jewelry:\n        contextActionMenu = generateContextMenuListOptions(\n          ActionsForMapContainer.Equipment\n        );\n        break;\n      case ItemType.Consumable:\n        contextActionMenu = generateContextMenuListOptions(\n          ActionsForMapContainer.Consumable\n        );\n        break;\n      case ItemType.CraftMaterial:\n        contextActionMenu = generateContextMenuListOptions(\n          ActionsForMapContainer.CraftMaterial\n        );\n        break;\n      case ItemType.Tool:\n        contextActionMenu = generateContextMenuListOptions(\n          ActionsForMapContainer.Tool\n        );\n        break;\n      default:\n        contextActionMenu = generateContextMenuListOptions(\n          ActionsForMapContainer.Other\n        );\n        break;\n    }\n  }\n  return contextActionMenu;\n};\n","import {\n  IItem,\n  IItemContainer,\n  ItemContainerType,\n  ItemSlotType,\n  ItemType,\n} from '@rpg-engine/shared';\n\nimport { observer } from 'mobx-react-lite';\nimport React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport atlasJSON from '../../../mocks/atlas/items/items.json';\nimport atlasIMG from '../../../mocks/atlas/items/items.png';\nimport { RelativeListMenu } from '../../RelativeListMenu';\nimport { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';\nimport { ItemTooltip } from '../Cards/ItemTooltip';\nimport { generateContextMenu, IContextMenuItem } from './itemContainerHelper';\n\nconst EquipmentSlotSpriteByType: any = {\n  Neck: 'accessories/corruption-necklace.png',\n  LeftHand: 'swords/broad-sword.png',\n  Ring: 'rings/iron-ring.png',\n  Head: 'helmets/viking-helmet.png',\n  Torso: 'armors/iron-armor.png',\n  Legs: 'legs/studded-legs.png',\n  Feet: 'boots/iron-boots.png',\n  Inventory: 'containers/bag.png',\n  RightHand: 'shields/plate-shield.png',\n  Accessory: 'gloves/plate-gloves.png',\n};\n\ninterface IProps {\n  slotIndex: number;\n  item: IItem | null;\n  itemContainer?: IItemContainer | null;\n  itemContainerType: ItemContainerType | null;\n  slotSpriteMask?: ItemSlotType | null;\n  onSelected: (selectedOption: string, item: IItem) => void;\n  onMouseOver: (\n    event: any,\n    slotIndex: number,\n    item: IItem | null,\n    x: number,\n    y: number\n  ) => void;\n  onMouseOut?: () => void;\n  onClick: (\n    ItemType: ItemType,\n    itemContainerType: ItemContainerType | null,\n    item: IItem\n  ) => void;\n}\n\nexport const ItemSlot: React.FC<IProps> = observer(\n  ({\n    slotIndex,\n    item,\n    itemContainerType: containerType,\n    slotSpriteMask,\n    onMouseOver,\n    onMouseOut,\n    onClick,\n    onSelected,\n  }) => {\n    const [isTooltipVisible, setTooltipVisible] = useState(false);\n\n    const [isContextMenuVisible, setIsContextMenuVisible] = useState(false);\n\n    const [contextActions, setContextActions] = useState<IContextMenuItem[]>(\n      []\n    );\n\n    useEffect(() => {\n      if (item) {\n        setContextActions(generateContextMenu(item.type, containerType));\n      }\n    }, [item]);\n\n    const getLeftPositionValue = (quantity: number) => {\n      if (quantity > 0 && quantity < 10) return '2.5rem';\n      else if (quantity > 9 && quantity < 100) return '2.0rem';\n      else if (quantity > 99) return '1rem';\n      return '2.5rem';\n    };\n\n    const renderItem = (itemToRender: IItem | null) => {\n      const element = [];\n      if (itemToRender?.texturePath) {\n        element.push(\n          <SpriteFromAtlas\n            key={itemToRender._id}\n            atlasIMG={atlasIMG}\n            atlasJSON={atlasJSON}\n            spriteKey={itemToRender.texturePath}\n            imgScale={3}\n          />\n        );\n      }\n      if (itemToRender?.isStackable && itemToRender?.stackQty) {\n        element.push(\n          <ItemQty\n            left={getLeftPositionValue(itemToRender.stackQty)}\n            key={`qty-${itemToRender._id}`}\n          >\n            {' '}\n            {itemToRender.stackQty}{' '}\n          </ItemQty>\n        );\n      }\n      return element;\n    };\n\n    const renderEquipment = (itemToRender: IItem | null) => {\n      if (\n        itemToRender?.texturePath &&\n        itemToRender.allowedEquipSlotType?.includes(slotSpriteMask!)\n      ) {\n        return (\n          <SpriteFromAtlas\n            key={itemToRender._id}\n            atlasIMG={atlasIMG}\n            atlasJSON={atlasJSON}\n            spriteKey={itemToRender.texturePath}\n            imgScale={3}\n          />\n        );\n      } else {\n        return (\n          <SpriteFromAtlas\n            atlasIMG={atlasIMG}\n            atlasJSON={atlasJSON}\n            spriteKey={EquipmentSlotSpriteByType[slotSpriteMask!]}\n            imgScale={3}\n            grayScale={true}\n            opacity={0.4}\n          />\n        );\n      }\n    };\n\n    const onRenderSlot = (itemToRender: IItem | null) => {\n      switch (containerType) {\n        case ItemContainerType.Equipment:\n          return renderEquipment(itemToRender);\n        case ItemContainerType.Inventory:\n          return renderItem(itemToRender);\n        default:\n          return renderItem(itemToRender);\n      }\n    };\n\n    return (\n      <Container\n        className=\"rpgui-icon empty-slot\"\n        onMouseOver={event =>\n          onMouseOver(event, slotIndex, item, event.clientX, event.clientY)\n        }\n        onMouseOut={() => {\n          if (onMouseOut) onMouseOut();\n        }}\n        onMouseEnter={() => setTooltipVisible(true)}\n        onMouseLeave={() => setTooltipVisible(false)}\n        onClick={() => {\n          setTooltipVisible(false);\n\n          if (item) {\n            setIsContextMenuVisible(!isContextMenuVisible);\n            onClick(item.type, containerType, item);\n          }\n        }}\n      >\n        {isContextMenuVisible && contextActions && (\n          <RelativeListMenu\n            options={contextActions}\n            onSelected={(optionId: string) => {\n              setIsContextMenuVisible(false);\n              if (item) {\n                onSelected(optionId, item);\n              }\n            }}\n            onOutsideClick={() => {\n              setIsContextMenuVisible(false);\n            }}\n          />\n        )}\n\n        {isTooltipVisible && item && <ItemTooltip label={item.name} />}\n\n        {onRenderSlot(item)}\n      </Container>\n    );\n  }\n);\n\nconst Container = styled.div`\n  margin: 0.1rem;\n  .sprite-from-atlas-img {\n    position: relative;\n    top: 1.5rem;\n    left: 1.5rem;\n  }\n  position: relative;\n`;\n\ninterface IItemQtyProps {\n  left: string;\n}\nconst ItemQty = styled.span<IItemQtyProps>`\n  position: relative;\n  top: 1.5rem;\n  left: ${props => props.left};\n`;\n","import {\n  IEquipmentSet,\n  IItem,\n  IItemContainer,\n  ItemContainerType,\n  ItemSlotType,\n  ItemType,\n} from '@rpg-engine/shared';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { DraggableContainer } from '../DraggableContainer';\nimport { ItemSlot } from '../Item/Inventory/ItemSlot';\nimport { RPGUIContainerTypes } from '../RPGUIContainer';\n\nexport interface IEquipmentSetProps {\n  equipmentSet: IEquipmentSet;\n  onClose?: () => void;\n  onItemClick?: (\n    ItemType: ItemType,\n    item: IItem,\n    itemContainerType: ItemContainerType | null\n  ) => void;\n  onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;\n  onSelected?: (optionId: string) => void;\n  initialPosition?: { x: number; y: number };\n  type: ItemContainerType | null;\n}\n\nexport const EquipmentSet: React.FC<IEquipmentSetProps> = ({\n  equipmentSet,\n  onClose,\n  onMouseOver,\n  onSelected,\n  onItemClick,\n}) => {\n  const {\n    neck,\n    leftHand,\n    ring,\n    head,\n    armor,\n    legs,\n    boot,\n    inventory,\n    rightHand,\n    accessory,\n  } = equipmentSet;\n\n  const equipmentData = [\n    neck,\n    leftHand,\n    ring,\n    head,\n    armor,\n    legs,\n    boot,\n    inventory,\n    rightHand,\n    accessory,\n  ];\n\n  const equipmentMaskSlots = [\n    ItemSlotType.Neck,\n    ItemSlotType.LeftHand,\n    ItemSlotType.Ring,\n    ItemSlotType.Head,\n    ItemSlotType.Torso,\n    ItemSlotType.Legs,\n    ItemSlotType.Feet,\n    ItemSlotType.Inventory,\n    ItemSlotType.RightHand,\n    ItemSlotType.Accessory,\n  ];\n\n  const onRenderEquipmentSlotRange = (start: number, end: number) => {\n    const equipmentRange = equipmentData.slice(start, end);\n    const slotMaksRange = equipmentMaskSlots.slice(start, end);\n\n    return equipmentRange.map((data, i) => {\n      const item = data as IItem;\n      const itemContainer =\n        (item && (item.itemContainer as IItemContainer)) ?? null;\n\n      return (\n        <ItemSlot\n          key={i}\n          slotIndex={i}\n          item={item}\n          itemContainer={itemContainer}\n          itemContainerType={ItemContainerType.Equipment}\n          slotSpriteMask={slotMaksRange[i]}\n          onMouseOver={(event, slotIndex, item) => {\n            if (onMouseOver) onMouseOver(event, slotIndex, item);\n          }}\n          onClick={(itemType, ContainerType) => {\n            if (onItemClick) onItemClick(itemType, item, ContainerType);\n          }}\n          onSelected={(optionId: string) => {\n            if (onSelected) onSelected(optionId);\n          }}\n        />\n      );\n    });\n  };\n\n  return (\n    <DraggableContainer\n      title={'Equipments'}\n      type={RPGUIContainerTypes.Framed}\n      onCloseButton={() => {\n        if (onClose) onClose();\n      }}\n      width=\"330px\"\n      cancelDrag=\".equipment-container-body\"\n    >\n      <EquipmentSetContainer className=\"equipment-container-body\">\n        <EquipmentColumn>{onRenderEquipmentSlotRange(0, 3)}</EquipmentColumn>\n        <EquipmentColumn>{onRenderEquipmentSlotRange(3, 7)}</EquipmentColumn>\n        <EquipmentColumn>{onRenderEquipmentSlotRange(7, 10)}</EquipmentColumn>\n      </EquipmentSetContainer>\n    </DraggableContainer>\n  );\n};\n\nconst EquipmentSetContainer = styled.div`\n  width: inherit;\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n  flex-direction: row;\n`;\n\nconst EquipmentColumn = styled.div`\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n  flex-direction: column;\n`;\n","import React from 'react';\nimport { IPosition } from '../../types/eventTypes';\nimport { DraggableContainer } from '../DraggableContainer';\nimport { RPGUIContainerTypes } from '../RPGUIContainer';\n\ninterface IProps {\n  children: React.ReactNode;\n  title: string;\n  onClose?: () => void;\n  onPositionChange?: (position: IPosition) => void;\n  onOutsideClick?: () => void;\n}\n\nexport const SlotsContainer: React.FC<IProps> = ({\n  children,\n  title,\n  onClose,\n  onPositionChange,\n  onOutsideClick,\n}) => {\n  return (\n    <DraggableContainer\n      title={title}\n      type={RPGUIContainerTypes.Framed}\n      onCloseButton={() => {\n        if (onClose) {\n          onClose();\n        }\n      }}\n      width=\"330px\"\n      cancelDrag=\".item-container-body\"\n      onPositionChange={({ x, y }) => {\n        if (onPositionChange) {\n          onPositionChange({ x, y });\n        }\n      }}\n      onOutsideClick={onOutsideClick}\n    >\n      {children}\n    </DraggableContainer>\n  );\n};\n","import { IItem, IItemContainer, ItemContainerType } from '@rpg-engine/shared';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { SlotsContainer } from '../../Abstractions/SlotsContainer';\n\nimport { ItemSlot } from './ItemSlot';\n\nexport interface IItemContainerProps {\n  itemContainer: IItemContainer;\n  onClose?: () => void;\n  onItemClick?: (\n    item: IItem,\n    ItemType: IItem['type'],\n    itemContainerType: ItemContainerType | null\n  ) => void;\n  onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;\n  onSelected?: (optionId: string, item: IItem) => void;\n  type: ItemContainerType;\n}\n\nexport const ItemContainer: React.FC<IItemContainerProps> = ({\n  itemContainer,\n  onClose,\n  onMouseOver,\n  onSelected,\n  onItemClick,\n  type,\n}) => {\n  const onRenderSlots = () => {\n    const slots = [];\n\n    for (let i = 0; i < itemContainer.slotQty; i++) {\n      slots.push(\n        <ItemSlot\n          key={i}\n          slotIndex={i}\n          item={itemContainer.slots?.[i] || null}\n          itemContainerType={type}\n          onMouseOver={(event, slotIndex, item) => {\n            if (onMouseOver) onMouseOver(event, slotIndex, item);\n          }}\n          onClick={(ItemType, ContainerType, item) => {\n            if (onItemClick) onItemClick(item, ItemType, ContainerType);\n          }}\n          onSelected={(optionId: string, item: IItem) => {\n            if (onSelected) onSelected(optionId, item);\n          }}\n        />\n      );\n    }\n    return slots;\n  };\n\n  return (\n    <SlotsContainer title={itemContainer.name || 'Container'} onClose={onClose}>\n      <ItemsContainer className=\"item-container-body\">\n        {onRenderSlots()}\n      </ItemsContainer>\n    </SlotsContainer>\n  );\n};\n\nconst ItemsContainer = styled.div`\n  max-width: 280px;\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\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, index) => (\n          <ListElement\n            key={params?.id || index}\n            onClick={() => {\n              onSelected(params?.id);\n            }}\n          >\n            {params?.text || 'No 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","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","export const chunkString = (str: string, length: number) => {\n  return str.match(new RegExp('.{1,' + length + '}', 'g'));\n};\n","import React from 'react';\n\n//@ts-ignore\nexport const useEventListener = (type, handler, el = window) => {\n  const savedHandler = React.useRef();\n\n  React.useEffect(() => {\n    savedHandler.current = handler;\n  }, [handler]);\n\n  React.useEffect(() => {\n    //@ts-ignore\n    const listener = e => savedHandler.current(e);\n\n    el.addEventListener(type, listener);\n\n    return () => {\n      el.removeEventListener(type, listener);\n    };\n  }, [type, el]);\n};\n","import React, { 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        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  word-break: break-all;\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  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","import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport LeftArrowClickIcon from './img/ui-arrows/arrow01-left-clicked.png';\nimport LeftArrowIcon from './img/ui-arrows/arrow01-left.png';\nimport RightArrowClickIcon from './img/ui-arrows/arrow01-right-clicked.png';\nimport RightArrowIcon from './img/ui-arrows/arrow01-right.png';\n\nexport interface IPropertySelectProps {\n  availableProperties: Array<IPropertiesProps>;\n  selectedProperty: object;\n  children?: React.ReactNode;\n}\n\nexport interface IPropertiesProps {\n  id: string;\n  name: string;\n}\n\nexport const PropertySelect: React.FC<IPropertySelectProps> = ({\n  availableProperties,\n}) => {\n  const [currentIndex, setCurrentIndex] = useState(0);\n  const propertiesLength = availableProperties.length - 1;\n\n  const onLeftClick = () => {\n    if (currentIndex === 0) setCurrentIndex(propertiesLength);\n    else setCurrentIndex(index => index - 1);\n  };\n  const onRightClick = () => {\n    if (currentIndex === propertiesLength) setCurrentIndex(0);\n    else setCurrentIndex(index => index + 1);\n  };\n  return (\n    <Container>\n      <TextOverlay>\n        <Item>{availableProperties[currentIndex].name}</Item>\n      </TextOverlay>\n      <div className=\"rpgui-progress-track\"></div>\n      <LeftArrow onClick={onLeftClick}></LeftArrow>\n      <RightArrow onClick={onRightClick}></RightArrow>\n    </Container>\n  );\n};\n\nconst Item = 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  position: relative;\n  display: flex;\n  flex-direction: column;\n  justify-content: start;\n  align-items: flex-start;\n  min-width: 100px;\n  width: 40%;\n`;\n\nconst LeftArrow = styled.div`\n  background-image: url(${LeftArrowIcon});\n  background-size: 100% 100%;\n  left: 0;\n  position: absolute;\n  width: 40px;\n  height: 42px;\n  :active {\n    background-image: url(${LeftArrowClickIcon});\n  }\n`;\n\nconst RightArrow = styled.div`\n  background-image: url(${RightArrowIcon});\n  right: 0;\n  position: absolute;\n  width: 40px;\n  background-size: 100% 100%;\n  height: 42px;\n  :active {\n    background-image: url(${RightArrowClickIcon});\n  }\n`;\n\nexport default PropertySelect;\n","import React from 'react';\nimport styled from 'styled-components';\n\nexport interface ISimpleProgressBarProps {\n  value: number;\n  bgColor?: string;\n  margin?: number;\n}\n\nexport const SimpleProgressBar: React.FC<ISimpleProgressBarProps> = ({\n  value,\n  bgColor = 'red',\n  margin = 20,\n}) => {\n  return (\n    <Container className=\"simple-progress-bar\">\n      <ProgressBarContainer margin={margin}>\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 ISimpleProgressBarThemeProps {\n  value: number;\n  bgColor: string;\n}\n\nconst Progress = styled.span`\n  background-color: ${(props: ISimpleProgressBarThemeProps) => props.bgColor};\n  width: ${(props: ISimpleProgressBarThemeProps) => props.value}%;\n`;\n\ninterface ISimpleProgressBarTheme2Props {\n  margin: number;\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  height: 8px;\n  margin-left: ${(props: ISimpleProgressBarTheme2Props) => props.margin}px;\n`;\n","import { getSPForLevel } from '@rpg-engine/shared';\nimport React from 'react';\nimport styled from 'styled-components';\nimport atlasJSON from '../mocks/atlas/items/items.json';\nimport atlasIMG from '../mocks/atlas/items/items.png';\nimport { SpriteFromAtlas } from './shared/SpriteFromAtlas';\nimport { SimpleProgressBar } from './SimpleProgressBar';\n\nexport interface ISkillProgressBarProps {\n  skillName: string;\n  bgColor: string;\n  level: number;\n  skillPoints: number;\n  skillPointsToNextLevel?: number;\n  texturePath: string;\n  showSkillPoints?: boolean;\n}\n\nexport const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({\n  bgColor,\n  skillName,\n  level,\n  skillPoints,\n  texturePath,\n  showSkillPoints = true,\n}) => {\n  const spForNextLevel = getSPForLevel(level + 1);\n\n  const ratio = (skillPoints / spForNextLevel) * 100;\n\n  return (\n    <>\n      <ProgressTitle>\n        <TitleName>{skillName}</TitleName>\n        <ValueDisplay>lv {level}</ValueDisplay>\n      </ProgressTitle>\n      <ProgressBody>\n        <ProgressIconContainer>\n          {atlasIMG && atlasJSON ? (\n            <SpriteContainer>\n              <SpriteFromAtlas\n                atlasIMG={atlasIMG}\n                atlasJSON={atlasJSON}\n                spriteKey={texturePath}\n                imgScale={1}\n                grayScale\n                opacity={0.5}\n              />\n            </SpriteContainer>\n          ) : (\n            <></>\n          )}\n        </ProgressIconContainer>\n\n        <ProgressBarContainer>\n          <SimpleProgressBar value={ratio} bgColor={bgColor} />\n        </ProgressBarContainer>\n      </ProgressBody>\n      {showSkillPoints && (\n        <SkillDisplayContainer>\n          <SkillPointsDisplay>\n            {skillPoints}/{spForNextLevel}\n          </SkillPointsDisplay>\n        </SkillDisplayContainer>\n      )}\n    </>\n  );\n};\n\nconst ProgressBarContainer = styled.div`\n  position: relative;\n  top: 8px;\n  width: 100%;\n  height: auto;\n`;\n\nconst SpriteContainer = styled.div`\n  position: relative;\n  top: -3px;\n  left: 0;\n`;\n\nconst SkillDisplayContainer = styled.div`\n  margin: 0 auto;\n\n  p {\n    margin: 0;\n  }\n`;\n\nconst SkillPointsDisplay = styled.p`\n  font-size: 0.6rem !important;\n  font-weight: bold;\n  text-align: center;\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  width: 100%;\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","import { ISkill, ISkillDetails } from '@rpg-engine/shared';\nimport _ from 'lodash';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { colors } from '../constants/uiColors';\nimport { DraggableContainer } from './DraggableContainer';\nimport { SkillProgressBar } from './SkillProgressBar';\n\nexport interface ISkillContainerProps {\n  skill: ISkill;\n  onCloseButton: () => void;\n}\n\nconst skillProps = {\n  attributes: {\n    color: colors.cardinal,\n    values: {\n      stamina: 'spell-icons/regenerate.png',\n      magic: 'spell-icons/fireball.png',\n      magicResistance: 'spell-icons/freeze.png',\n      strength: 'spell-icons/enchanted-blow.png',\n      resistance: 'spell-icons/magic-shield.png',\n      dexterity: 'spell-icons/haste.png',\n    },\n  },\n  combat: {\n    color: colors.purple,\n    values: {\n      first: 'gloves/leather-gloves.png',\n      club: 'maces/club.png',\n      sword: 'swords/double-edged-sword.png',\n      axe: 'axes/double-axe.png',\n      distance: 'bows/horse-bow.png',\n      shielding: 'shields/studded-shield.png',\n      dagger: 'daggers/dagger.png',\n    },\n  },\n  crafting: {\n    color: colors.blue,\n    values: {\n      fishing: 'foods/fish.png',\n      mining: 'crafting-resources/iron-ingot.png',\n      lumberjacking: 'crafting-resources/greater-wood-log.png',\n      cooking: 'foods/chickens-meat.png',\n      alchemy: 'potions/greater-mana-potion.png',\n    },\n  },\n};\n\nexport const SkillsContainer: React.FC<ISkillContainerProps> = ({\n  onCloseButton,\n  skill,\n}) => {\n  const onRenderSkillCategory = (\n    category: 'attributes' | 'combat' | 'crafting'\n  ) => {\n    const skillCategory = skillProps[category];\n\n    const skillCategoryColor = skillCategory.color;\n\n    const output = [];\n\n    for (const [key, value] of Object.entries(skillCategory.values)) {\n      //@ts-ignore\n      const skillDetails = (skill[key] as unknown) as ISkillDetails;\n\n      output.push(\n        <SkillProgressBar\n          key={key}\n          skillName={_.capitalize(key)}\n          bgColor={skillCategoryColor}\n          level={skillDetails.level || 0}\n          skillPoints={Math.round(skillDetails.skillPoints) || 0}\n          skillPointsToNextLevel={\n            Math.round(skillDetails.skillPointsToNextLevel) || 0\n          }\n          texturePath={value}\n        />\n      );\n    }\n\n    return output;\n  };\n\n  return (\n    <SkillsDraggableContainer title=\"Skills\">\n      {onCloseButton && (\n        <CloseButton onClick={onCloseButton} onTouchStart={onCloseButton}>\n          X\n        </CloseButton>\n      )}\n      <SkillSplitDiv>\n        <p>General</p>\n        <hr className=\"golden\" />\n\n        <SkillProgressBar\n          skillName={'Level'}\n          bgColor={colors.navyBlue}\n          level={Math.round(skill.level) || 0}\n          skillPoints={Math.round(skill.experience) || 0}\n          skillPointsToNextLevel={Math.round(skill.xpToNextLevel) || 0}\n          texturePath={'swords/broad-sword.png'}\n        />\n\n        <p>Combat Skills</p>\n        <hr className=\"golden\" />\n      </SkillSplitDiv>\n\n      {onRenderSkillCategory('combat')}\n\n      <SkillSplitDiv>\n        <p>Crafting Skills</p>\n        <hr className=\"golden\" />\n      </SkillSplitDiv>\n\n      {onRenderSkillCategory('crafting')}\n\n      <SkillSplitDiv>\n        <p>Basic Attributes</p>\n        <hr className=\"golden\" />\n      </SkillSplitDiv>\n\n      {onRenderSkillCategory('attributes')}\n\n      {/* <SkillSplitDiv>\n        <p>Magic Skills</p>\n        <hr className=\"golden\" />\n      </SkillSplitDiv>\n      <SkillProgressBar\n        skillName={'Ice'}\n        bgColor={'red'}\n        level={skill?.ice?.level || 0}\n        skillPoints={skill?.ice?.skillPoints || 0}\n        skillPointsToNextLevel={skill?.ice?.skillPointsToNextLevel || 0}\n        texturePath={'spell-icons/freeze.png'}\n      />\n      <SkillProgressBar\n        skillName={'Earth'}\n        bgColor={'red'}\n        level={skill?.earth?.level || 0}\n        skillPoints={skill?.earth?.skillPoints || 0}\n        skillPointsToNextLevel={skill?.earth?.skillPointsToNextLevel || 0}\n        texturePath={'spell-icons/earth-barrier.png'}\n      />\n      <SkillProgressBar\n        skillName={'Air'}\n        bgColor={'red'}\n        level={skill?.air?.level || 0}\n        skillPoints={skill?.air?.skillPoints || 0}\n        skillPointsToNextLevel={skill?.air?.skillPointsToNextLevel || 0}\n        texturePath={'spell-icons/poison-tornado.png'}\n      />\n      <SkillProgressBar\n        skillName={'Water'}\n        bgColor={'red'}\n        level={skill?.water?.level || 0}\n        skillPoints={skill?.water?.skillPoints || 0}\n        skillPointsToNextLevel={skill?.water?.skillPointsToNextLevel || 0}\n        texturePath={'spell-icons/tsunami.png'}\n      /> */}\n    </SkillsDraggableContainer>\n  );\n};\n\nconst SkillsDraggableContainer = styled(DraggableContainer)`\n  border: 1px solid black;\n  width: 400px;\n  height: 90%;\n  overflow-y: scroll;\n  .DraggableContainer__TitleContainer-sc-184mpyl-2 {\n    width: auto;\n    height: auto;\n  }\n`;\n\nconst SkillSplitDiv = styled.div`\n  width: 100%;\n  font-size: 11px;\n  hr {\n    margin: 0;\n    margin-bottom: 1rem;\n    padding: 0px;\n  }\n  p {\n    margin-bottom: 0px;\n  }\n`;\n\nconst CloseButton = styled.div`\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  color: white;\n  z-index: 22;\n  font-size: 0.7rem;\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","disabled","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","useOutsideClick","ref","id","useEffect","handleClickOutside","event","current","contains","target","CustomEvent","detail","document","dispatchEvent","addEventListener","removeEventListener","NPCDialogType","DraggableContainer","FramedGold","onCloseButton","title","imgSrc","imgWidth","cancelDrag","onPositionChange","onOutsideClick","draggableRef","useRef","_e","Draggable","cancel","onDrag","data","x","y","TitleContainer","Title","Icon","src","onClick","onTouchStart","h1","img","_RPGUI","RPGUI","RelativeListMenu","options","onSelected","fontSize","style","overflow","map","params","index","ListElement","key","text","li","SpriteFromAtlas","imgScale","grayScale","GRID_WIDTH","GRID_HEIGHT","hasHover","containerStyle","ImgSprite","atlasIMG","frame","atlasJSON","frames","spriteKey","scale","imgStyle","w","h","ItemTooltip","label","generateContextMenuListOptions","actionsByTypeList","action","ItemSocketEventsDisplayLabels","EquipmentSlotSpriteByType","Neck","LeftHand","Ring","Head","Torso","Legs","Feet","Inventory","RightHand","Accessory","ItemSlot","observer","slotIndex","item","containerType","itemContainerType","slotSpriteMask","onMouseOver","onMouseOut","useState","isTooltipVisible","setTooltipVisible","isContextMenuVisible","setIsContextMenuVisible","contextActions","setContextActions","itemType","contextActionMenu","ItemContainerType","ItemType","Weapon","Armor","Jewelry","ActionsForInventory","Equipment","Consumable","CraftMaterial","Tool","Other","ActionsForEquipmentSet","Loot","ActionsForLoot","MapContainer","ActionsForMapContainer","generateContextMenu","clientX","clientY","onMouseEnter","onMouseLeave","optionId","name","itemToRender","texturePath","allowedEquipSlotType","_itemToRender$allowed","includes","_id","renderEquipment","quantity","element","push","isStackable","stackQty","ItemQty","left","renderItem","onRenderSlot","span","EquipmentSetContainer","EquipmentColumn","SlotsContainer","onClose","Framed","ItemsContainer","DynamicText","onFinish","onStart","textState","setTextState","i","interval","setInterval","length","substring","clearInterval","TextContainer","NPCDialogText","onEndStep","onStartStep","textChunks","match","RegExp","chunkIndex","setChunkIndex","onHandleSpacePress","code","prev","useEventListener","handler","el","window","savedHandler","listener","e","QuestionDialog","questions","answers","currentQuestion","setCurrentQuestion","canShowAnswers","setCanShowAnswers","onGetFirstAnswer","answerIds","firstAnswerId","find","answer","currentAnswer","setCurrentAnswer","onGetAnswers","answerId","nextAnswerIndex","findIndex","nextAnswerID","nextAnswer","previousAnswerIndex","previousAnswerID","previousAnswer","pop","nextQuestionId","question","QuestionContainer","AnswersContainer","isSelected","selectedColor","AnswerRow","AnswerSelectedIcon","color","Answer","onAnswerClick","onRenderCurrentAnswers","RangeSliderType","ThumbnailContainer","NPCThumbnail","PressSpaceIndicator","right","ProgressBarText","TextOverlay","minWidth","percentageWidth","Item","LeftArrow","RightArrow","input","SimpleProgressBar","bgColor","margin","ProgressBarContainer","BackgroundBar","Progress","value","SkillProgressBar","skillName","level","skillPoints","showSkillPoints","spForNextLevel","getSPForLevel","ratio","ProgressTitle","TitleName","ValueDisplay","ProgressBody","ProgressIconContainer","SpriteContainer","SkillDisplayContainer","SkillPointsDisplay","skillProps","attributes","values","stamina","magic","magicResistance","strength","resistance","dexterity","combat","first","club","sword","axe","distance","shielding","dagger","crafting","fishing","mining","lumberjacking","cooking","alchemy","SkillsDraggableContainer","SkillSplitDiv","maxLines","chatMessages","onSendChatMessage","message","setMessage","scrollChatToBottom","scrollingElement","querySelector","scrollTop","scrollHeight","FramedGrey","ErrorBoundary","fallback","emitter","createdAt","dayjs","Date","format","onRenderMessageLines","onRenderChatMessages","onSubmit","preventDefault","onChange","autoComplete","RPGUIButton","items","selectedValues","forEach","generateSelectedValuesList","setSelectedValues","checked","dropdownId","uuidv4","selectedValue","setSelectedValue","getElementById","dropdownValue","get_value","option","equipmentSet","onItemClick","equipmentData","neck","leftHand","ring","head","armor","legs","boot","inventory","rightHand","accessory","equipmentMaskSlots","ItemSlotType","onRenderEquipmentSlotRange","start","end","equipmentRange","slice","slotMaksRange","itemContainer","ContainerType","handleClick","slots","slotQty","onRenderSlots","imagePath","isQuestionDialog","showGoNextIndicator","setShowGoNextIndicator","TextAndThumbnail","aliceDefaultThumbnail","TextOnly","max","displayText","calculatePercentageValue","availableProperties","currentIndex","setCurrentIndex","propertiesLength","valueMin","valueMax","sliderId","wasMouseDownFirst","setWasMouseDownFirst","onHandleMouseUp","rpguiSlider","Number","onMouseUp","onMouseDown","Slider","GoldSlider","min","skill","onRenderSkillCategory","category","skillCategory","skillCategoryColor","output","Object","entries","skillDetails","_","capitalize","Math","round","skillPointsToNextLevel","experience","xpToNextLevel"],"mappings":"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"}