npm - @rpg-engine/long-bow - Versions diffs - 0.2.39 → 0.2.41 - Mend

@rpg-engine/long-bow 0.2.39 → 0.2.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/long-bow.cjs.development.js +5 -3
package/dist/long-bow.cjs.development.js.map +1 -1
package/dist/long-bow.cjs.production.min.js +1 -1
package/dist/long-bow.cjs.production.min.js.map +1 -1
package/dist/long-bow.esm.js +5 -3
package/dist/long-bow.esm.js.map +1 -1
package/package.json +1 -1
package/src/components/RelativeListMenu.tsx +1 -1
package/src/components/TradingMenu/TradingMenu.tsx +2 -2
package/src/stories/ItemTradingComponent.stories.tsx +2 -2

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

	@@ -1 +1 @@
1	- {"version":3,"file":"long-bow.cjs.production.min.js","sources":["../src/components/Button.tsx","../src/components/RPGUIContainer.tsx","../src/components/shared/SpriteFromAtlas.tsx","../src/components/Item/Inventory/ErrorBoundary.tsx","../src/components/Arrow/SelectArrow.tsx","../src/components/shared/Ellipsis.tsx","../src/components/PropertySelect/PropertySelect.tsx","../src/components/Character/CharacterSelection.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/Item/Cards/ItemTooltip.tsx","../src/components/Item/Inventory/itemContainerHelper.ts","../src/components/Item/Inventory/ItemSlot.tsx","../src/components/Equipment/EquipmentSet.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/NPCDialog/NPCMultiDialog.tsx","../src/components/RangeSlider.tsx","../src/components/HistoryDialog.tsx","../src/components/Abstractions/SlotsContainer.tsx","../src/components/Item/Inventory/ItemContainer.tsx","../src/components/ListMenu.tsx","../src/components/ProgressBar.tsx","../src/components/QuestInfo/QuestInfo.tsx","../src/components/QuestList.tsx","../src/components/SimpleProgressBar.tsx","../src/components/SkillProgressBar.tsx","../src/components/SkillsContainer.tsx","../src/components/TradingMenu/TradingItemRow.tsx","../src/components/TradingMenu/TradingMenu.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 { 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, { Component, ErrorInfo, ReactNode } from 'react';\nimport atlasJSON from '../../../mocks/atlas/items/items.json';\nimport atlasIMG from '../../../mocks/atlas/items/items.png';\nimport { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';\n\ninterface Props {\n children?: ReactNode;\n}\n\ninterface State {\n hasError: boolean;\n}\n\nexport class ErrorBoundary extends Component<Props, State> {\n public state: State = {\n hasError: false,\n };\n\n public static getDerivedStateFromError(_: Error): State {\n // Update state so the next render will show the fallback UI.\n return { hasError: true };\n }\n\n public componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n console.error('Uncaught error:', error, errorInfo);\n }\n\n public render() {\n if (this.state.hasError) {\n return (\n <SpriteFromAtlas\n atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\n spriteKey={'others/no-image.png'}\n imgScale={3}\n />\n );\n }\n\n return this.props.children;\n }\n}\n","import React from 'react';\nimport styled from 'styled-components';\nimport LeftArrowClickIcon from './img/arrow01-left-clicked.png';\nimport LeftArrowIcon from './img/arrow01-left.png';\nimport RightArrowClickIcon from './img/arrow01-right-clicked.png';\nimport RightArrowIcon from './img/arrow01-right.png';\n\nexport interface ArrowBarProps extends React.HTMLAttributes<HTMLDivElement> {\n direction: 'right' \| 'left';\n onClick: () => void;\n size?: number;\n}\n\nexport const SelectArrow: React.FC<ArrowBarProps> = ({\n direction = 'left',\n size,\n onClick,\n ...props\n}) => {\n return (\n <>\n {direction === 'left' ? (\n <LeftArrow size={size} onClick={() => onClick()} {...props}></LeftArrow>\n ) : (\n <RightArrow\n size={size}\n onClick={() => onClick()}\n {...props}\n ></RightArrow>\n )}\n </>\n );\n};\n\ninterface IArrowProps {\n size?: number;\n}\n\nconst LeftArrow = styled.span<IArrowProps>`\n background-image: url(${LeftArrowIcon});\n background-size: 100% 100%;\n left: 0;\n position: absolute;\n width: ${props => props.size \|\| 40}px;\n height: ${props => props.size \|\| 42}px;\n :active {\n background-image: url(${LeftArrowClickIcon});\n }\n z-index: 2;\n`;\n\nconst RightArrow = styled.span<IArrowProps>`\n background-image: url(${RightArrowIcon});\n right: 0;\n position: absolute;\n width: ${props => props.size \|\| 40}px;\n height: ${props => props.size \|\| 42}px;\n background-size: 100% 100%;\n :active {\n background-image: url(${RightArrowClickIcon});\n }\n z-index: 2;\n`;\n\nexport default SelectArrow;\n","import React from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n children: React.ReactNode;\n maxLines: 1 \| 2 \| 3;\n maxWidth: number;\n fontSize?: string;\n}\n\nexport const Ellipsis = ({\n children,\n maxLines,\n maxWidth,\n fontSize,\n}: IProps) => {\n return (\n <Container maxWidth={maxWidth} fontSize={fontSize}>\n <p className={`ellipsis-${maxLines}-lines`}>{children}</p>\n </Container>\n );\n};\n\ninterface IContainerProps {\n maxWidth: number;\n fontSize?: string;\n}\n\nconst Container = styled.div<IContainerProps>`\n p {\n font-size: ${props => props.fontSize \|\| '1rem'};\n }\n\n .ellipsis-1-lines {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: ${props => props.maxWidth}px;\n }\n .ellipsis-2-lines {\n display: -webkit-box;\n max-width: ${props => props.maxWidth}px;\n\n height: 25px;\n margin: 0 auto;\n line-height: 1;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .ellipsis-3-lines {\n display: -webkit-box;\n max-width: ${props => props.maxWidth}px;\n\n height: 43px;\n margin: 0 auto;\n line-height: 1;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n`;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport SelectArrow from '../Arrow/SelectArrow';\nimport { Ellipsis } from '../shared/Ellipsis';\n\nexport interface IPropertySelectProps {\n availableProperties: Array<IPropertiesProps>;\n selectedProperty?: IPropertiesProps;\n children?: React.ReactNode;\n onChange: (selectedProperty: IPropertiesProps) => void;\n}\n\nexport interface IPropertiesProps {\n id: string;\n name: string;\n}\n\nexport const PropertySelect: React.FC<IPropertySelectProps> = ({\n availableProperties,\n onChange,\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\n useEffect(() => {\n onChange(availableProperties[currentIndex]);\n }, [currentIndex]);\n\n useEffect(() => {\n setCurrentIndex(0);\n }, [JSON.stringify(availableProperties)]);\n\n const getCurrentSelectionName = () => {\n const item = availableProperties[currentIndex];\n if (item) {\n return item.name;\n }\n return '';\n };\n\n return (\n <Container>\n <TextOverlay>\n <Item>\n <Ellipsis maxLines={1} maxWidth={200}>\n {getCurrentSelectionName()}\n </Ellipsis>\n </Item>\n </TextOverlay>\n <div className=\"rpgui-progress-track\"></div>\n\n <SelectArrow\n direction=\"left\"\n onClick={onLeftClick}\n onTouchStart={onLeftClick}\n ></SelectArrow>\n <SelectArrow\n direction=\"right\"\n onClick={onRightClick}\n onTouchStart={onRightClick}\n ></SelectArrow>\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 top: 12px;\n width: 100%;\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\nexport default PropertySelect;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { SpriteFromAtlas } from '../shared/SpriteFromAtlas';\n\nimport entitiesJSON from '../../mocks/atlas/entities/entities.json';\nimport entitiesIMG from '../../mocks/atlas/entities/entities.png';\nimport { ErrorBoundary } from '../Item/Inventory/ErrorBoundary';\nimport PropertySelect, {\n IPropertiesProps,\n} from '../PropertySelect/PropertySelect';\n\nexport interface ICharacterProps {\n name: string;\n textureKey: string;\n}\n\nexport interface ICharacterSelectionProps {\n availableCharacters: ICharacterProps[];\n onChange: (textureKey: string) => void;\n}\n\nexport const CharacterSelection: React.FC<ICharacterSelectionProps> = ({\n availableCharacters,\n onChange,\n}) => {\n const propertySelectValues = availableCharacters.map(item => {\n return {\n id: item.textureKey,\n name: item.name,\n };\n });\n\n const [selectedValue, setSelectedValue] = useState<IPropertiesProps>();\n const [selectedSpriteKey, setSelectedSpriteKey] = useState('');\n\n const onSelectedValueChange = () => {\n const textureKey = selectedValue ? selectedValue.id : '';\n const spriteKey = textureKey ? textureKey + '/down/standing/0.png' : '';\n\n if (spriteKey === selectedSpriteKey) {\n return;\n }\n\n setSelectedSpriteKey(spriteKey);\n onChange(textureKey);\n };\n\n useEffect(() => {\n onSelectedValueChange();\n }, [selectedValue]);\n\n useEffect(() => {\n setSelectedValue(propertySelectValues[0]);\n }, [availableCharacters]);\n\n return (\n <Container>\n {selectedSpriteKey && (\n <ErrorBoundary>\n <SpriteFromAtlas\n spriteKey={selectedSpriteKey}\n atlasIMG={entitiesIMG}\n atlasJSON={entitiesJSON}\n imgScale={4}\n height={80}\n width={64}\n containerStyle={{\n display: 'flex',\n alignItems: 'center',\n paddingBottom: '15px',\n }}\n imgStyle={{\n left: '22px',\n }}\n />\n </ErrorBoundary>\n )}\n <PropertySelect\n availableProperties={propertySelectValues}\n onChange={value => {\n setSelectedValue(value);\n }}\n />\n </Container>\n );\n};\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n image-rendering: pixelated;\n`;\n\nexport default CharacterSelection;\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 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 contextActionMenu = generateContextMenuListOptions(\n ActionsForInventory.Equipment\n );\n break;\n case ItemType.Container:\n contextActionMenu = generateContextMenuListOptions(\n ActionsForInventory.Container\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 getItemTextureKeyPath,\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 { RelativeListMenu } from '../../RelativeListMenu';\nimport { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';\nimport { ItemTooltip } from '../Cards/ItemTooltip';\nimport { ErrorBoundary } from './ErrorBoundary';\nimport { generateContextMenu, IContextMenuItem } from './itemContainerHelper';\nimport { v4 as uuidv4 } from 'uuid';\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: 'ranged-weapons/arrow.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 atlasJSON: any;\n atlasIMG: any;\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 atlasJSON,\n atlasIMG,\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 getStackInfo = (itemId: string, stackQty: number) => {\n // if (itemToRender?.isStackable && itemToRender?.stackQty) {\n if (stackQty > 1) {\n return (\n <ItemQty left={getLeftPositionValue(stackQty)} key={`qty-${itemId}`}>\n {' '}\n {stackQty}{' '}\n </ItemQty>\n );\n }\n return undefined;\n };\n\n const renderItem = (itemToRender: IItem \| null) => {\n const element = [];\n if (itemToRender?.texturePath) {\n element.push(\n <ErrorBoundary key={itemToRender._id}>\n <SpriteFromAtlas\n key={itemToRender._id}\n atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\n spriteKey={getItemTextureKeyPath(itemToRender, atlasJSON)}\n imgScale={3}\n />\n </ErrorBoundary>\n );\n }\n const stackInfo = getStackInfo(\n itemToRender?._id ?? '',\n itemToRender?.stackQty ?? 0\n );\n if (stackInfo) {\n element.push(stackInfo);\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 const element = [];\n element.push(\n <ErrorBoundary key={itemToRender._id}>\n <SpriteFromAtlas\n key={itemToRender._id}\n atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\n spriteKey={getItemTextureKeyPath(itemToRender, atlasJSON)}\n imgScale={3}\n />\n </ErrorBoundary>\n );\n const stackInfo = getStackInfo(\n itemToRender?._id ?? '',\n itemToRender?.stackQty ?? 0\n );\n if (stackInfo) {\n element.push(stackInfo);\n }\n return element;\n } else {\n return (\n <ErrorBoundary key={uuidv4()}>\n <SpriteFromAtlas\n key={uuidv4()}\n atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\n spriteKey={EquipmentSlotSpriteByType[slotSpriteMask!]}\n imgScale={3}\n grayScale={true}\n opacity={0.4}\n />\n </ErrorBoundary>\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 atlasIMG: any;\n atlasJSON: any;\n}\n\nexport const EquipmentSet: React.FC<IEquipmentSetProps> = ({\n equipmentSet,\n onClose,\n onMouseOver,\n onSelected,\n onItemClick,\n atlasIMG,\n atlasJSON,\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 atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\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, { 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, { useEffect, 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';\n\nexport enum ImgSide {\n right = 'right',\n left = 'left',\n}\n\nexport interface NPCMultiDialogType {\n text: string;\n imagePath?: string;\n imageSide: ImgSide;\n}\n\nexport interface INPCMultiDialogProps {\n onClose: () => void;\n textAndTypeArray: NPCMultiDialogType[];\n}\n\nexport const NPCMultiDialog: React.FC<INPCMultiDialogProps> = ({\n onClose,\n textAndTypeArray,\n}) => {\n const [showGoNextIndicator, setShowGoNextIndicator] = useState<boolean>(\n false\n );\n const [slide, setSlide] = useState<number>(0);\n\n const onHandleSpacePress = (event: KeyboardEvent) => {\n if (event.code === 'Space') {\n if (slide < textAndTypeArray?.length - 1) {\n setSlide(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 }, [slide]);\n\n return (\n <RPGUIContainer\n type={RPGUIContainerTypes.FramedGold}\n width={'50%'}\n height={'180px'}\n >\n <>\n <Container>\n {textAndTypeArray[slide]?.imageSide === 'right' && (\n <>\n <TextContainer flex={'70%'}>\n <NPCDialogText\n onStartStep={() => setShowGoNextIndicator(false)}\n onEndStep={() => setShowGoNextIndicator(true)}\n text={textAndTypeArray[slide].text \|\| 'No text provided.'}\n onClose={() => {\n if (onClose) {\n onClose();\n }\n }}\n />\n </TextContainer>\n <ThumbnailContainer>\n <NPCThumbnail\n src={\n textAndTypeArray[slide].imagePath \|\| aliceDefaultThumbnail\n }\n />\n </ThumbnailContainer>\n {showGoNextIndicator && (\n <PressSpaceIndicator right={'10.5rem'} src={pressSpaceGif} />\n )}\n </>\n )}\n {textAndTypeArray[slide].imageSide === 'left' && (\n <>\n <ThumbnailContainer>\n <NPCThumbnail\n src={\n textAndTypeArray[slide].imagePath \|\| aliceDefaultThumbnail\n }\n />\n </ThumbnailContainer>\n <TextContainer flex={'70%'}>\n <NPCDialogText\n onStartStep={() => setShowGoNextIndicator(false)}\n onEndStep={() => setShowGoNextIndicator(true)}\n text={textAndTypeArray[slide].text \|\| 'No text provided.'}\n onClose={() => {\n if (onClose) {\n onClose();\n }\n }}\n />\n </TextContainer>\n {showGoNextIndicator && (\n <PressSpaceIndicator right={'1rem'} src={pressSpaceGif} />\n )}\n </>\n )}\n </Container>\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 from 'react';\nimport styled from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\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 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 onMouseUp={onHandleMouseUp}>\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, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { NPCDialog, NPCDialogType } from './NPCDialog/NPCDialog';\nimport { NPCMultiDialog, NPCMultiDialogType } from './NPCDialog/NPCMultiDialog';\nimport {\n IQuestionDialog,\n IQuestionDialogAnswer,\n QuestionDialog,\n} from './NPCDialog/QuestionDialog/QuestionDialog';\n\nexport interface IHistoryDialogProps {\n backgroundImgPath: string[];\n fullCoverBackground: boolean;\n questions?: IQuestionDialog[];\n answers?: IQuestionDialogAnswer[];\n text?: string;\n imagePath?: string;\n textAndTypeArray?: NPCMultiDialogType[];\n onClose: () => void;\n}\n\nexport const HistoryDialog: React.FC<IHistoryDialogProps> = ({\n backgroundImgPath,\n fullCoverBackground,\n questions,\n answers,\n text,\n imagePath,\n textAndTypeArray,\n onClose,\n}) => {\n const [img, setImage] = useState<number>(0);\n const onHandleSpacePress = (event: KeyboardEvent) => {\n if (event.code === 'Space') {\n if (img < backgroundImgPath?.length - 1) {\n setImage(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 }, [backgroundImgPath]);\n return (\n <BackgroundContainer\n imgPath={backgroundImgPath[img]}\n fullImg={fullCoverBackground}\n >\n <DialogContainer>\n {textAndTypeArray ? (\n <NPCMultiDialog\n textAndTypeArray={textAndTypeArray}\n onClose={onClose}\n />\n ) : questions && answers ? (\n <QuestionDialog\n questions={questions}\n answers={answers}\n onClose={onClose}\n />\n ) : text && imagePath ? (\n <NPCDialog\n text={text}\n imagePath={imagePath}\n onClose={onClose}\n type={NPCDialogType.TextAndThumbnail}\n />\n ) : (\n <NPCDialog\n text={text}\n onClose={onClose}\n type={NPCDialogType.TextOnly}\n />\n )}\n </DialogContainer>\n </BackgroundContainer>\n );\n};\n\ninterface IImgContainerProps {\n imgPath: string;\n fullImg: boolean;\n}\n\nconst BackgroundContainer = styled.div<IImgContainerProps>`\n width: 100%;\n height: 100%;\n background-image: url(${props => props.imgPath});\n background-size: ${props => (props.imgPath ? 'cover' : 'auto')};\n display: flex;\n justify-content: space-evenly;\n align-items: center;\n`;\n\nconst DialogContainer = styled.div`\n display: flex;\n justify-content: center;\n padding-top: 200px;\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 atlasJSON: any;\n atlasIMG: any;\n}\n\nexport const ItemContainer: React.FC<IItemContainerProps> = ({\n itemContainer,\n onClose,\n onMouseOver,\n onSelected,\n onItemClick,\n type,\n atlasJSON,\n atlasIMG,\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 atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\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 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 { IQuest } from '@rpg-engine/shared';\nimport React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport SelectArrow from '../Arrow/SelectArrow';\nimport { Button, ButtonTypes } from '../Button';\nimport { DraggableContainer } from '../DraggableContainer';\n\nimport { RPGUIContainerTypes } from '../RPGUIContainer';\nimport { Column } from '../shared/Column';\nimport thumbnailDefault from './img/default.png';\n\nexport interface IQuestsButtonProps {\n disabled: boolean;\n title: string;\n onClick: (questId: string, npcId: string) => void;\n}\n\nexport interface IQuestInfoProps {\n onClose?: () => void;\n buttons?: IQuestsButtonProps[];\n quests: IQuest[];\n onChangeQuest: (currentQuestIndex: number, currentQuestId: string) => void;\n}\n\nexport const QuestInfo: React.FC<IQuestInfoProps> = ({\n quests,\n onClose,\n buttons,\n onChangeQuest,\n}) => {\n const [currentIndex, setCurrentIndex] = useState(0);\n const questsLength = quests.length - 1;\n\n useEffect(() => {\n if (onChangeQuest) {\n onChangeQuest(currentIndex, quests[currentIndex]._id);\n }\n }, [currentIndex]);\n\n const onLeftClick = () => {\n if (currentIndex === 0) setCurrentIndex(questsLength);\n else setCurrentIndex(index => index - 1);\n };\n const onRightClick = () => {\n if (currentIndex === questsLength) setCurrentIndex(0);\n else setCurrentIndex(index => index + 1);\n };\n\n return (\n <QuestDraggableContainer\n type={RPGUIContainerTypes.Framed}\n onCloseButton={() => {\n if (onClose) onClose();\n }}\n width=\"730px\"\n cancelDrag=\".equipment-container-body .arrow-selector\"\n >\n {quests.length >= 2 ? (\n <QuestsContainer>\n {currentIndex !== 0 && (\n <SelectArrow\n direction=\"left\"\n onClick={onLeftClick}\n onTouchStart={onLeftClick}\n ></SelectArrow>\n )}\n {currentIndex !== quests.length - 1 && (\n <SelectArrow\n direction=\"right\"\n onClick={onRightClick}\n onTouchStart={onRightClick}\n ></SelectArrow>\n )}\n\n <QuestContainer>\n <TitleContainer className=\"drag-handler\">\n <Title>\n <Thumbnail\n src={quests[currentIndex].thumbnail \|\| thumbnailDefault}\n />\n {quests[currentIndex].title}\n </Title>\n <QuestSplitDiv>\n <hr className=\"golden\" />\n </QuestSplitDiv>\n </TitleContainer>\n <Content>\n <p>{quests[currentIndex].description}</p>\n </Content>\n <QuestColumn className=\"dark-background\" justifyContent=\"flex-end\">\n {buttons &&\n buttons.map((button, index) => (\n <Button\n key={index}\n onClick={() =>\n button.onClick(\n quests[currentIndex]._id,\n quests[currentIndex].npcId\n )\n }\n disabled={button.disabled}\n buttonType={ButtonTypes.RPGUIButton}\n id={`button-${index}`}\n >\n {button.title}\n </Button>\n ))}\n </QuestColumn>\n </QuestContainer>\n </QuestsContainer>\n ) : (\n <QuestsContainer>\n <QuestContainer>\n <TitleContainer className=\"drag-handler\">\n <Title>\n <Thumbnail src={quests[0].thumbnail \|\| thumbnailDefault} />\n {quests[0].title}\n </Title>\n <QuestSplitDiv>\n <hr className=\"golden\" />\n </QuestSplitDiv>\n </TitleContainer>\n <Content>\n <p>{quests[0].description}</p>\n </Content>\n <QuestColumn className=\"dark-background\" justifyContent=\"flex-end\">\n {buttons &&\n buttons.map((button, index) => (\n <Button\n key={index}\n onClick={() =>\n button.onClick(quests[0]._id, quests[0].npcId)\n }\n disabled={button.disabled}\n buttonType={ButtonTypes.RPGUIButton}\n id={`button-${index}`}\n >\n {button.title}\n </Button>\n ))}\n </QuestColumn>\n </QuestContainer>\n </QuestsContainer>\n )}\n </QuestDraggableContainer>\n );\n};\n\nconst QuestDraggableContainer = styled(DraggableContainer)`\n border: 1px solid black;\n width: 600px;\n padding: 0 0 0 0 !important;\n .DraggableContainer__TitleContainer-sc-184mpyl-2 {\n height: auto;\n }\n .container-close {\n position: absolute;\n margin-left: auto;\n top: 20px;\n padding-right: 5px;\n }\n img {\n display: inline-block;\n vertical-align: middle;\n line-height: normal;\n }\n`;\n\nconst QuestContainer = styled.div`\n margin-right: 40px;\n margin-left: 40px;\n`;\n\nconst QuestsContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst Content = styled.div`\n padding: 18px;\n h1 {\n text-align: left;\n margin: 14px 0px;\n }\n`;\n\nconst QuestSplitDiv = styled.div`\n width: 100%;\n font-size: 11px;\n margin-bottom: 10px;\n hr {\n margin: 0px;\n padding: 0px;\n }\n p {\n margin-bottom: 0px;\n }\n`;\n\nconst QuestColumn = styled(Column)`\n background: #4e4a4e;\n padding-top: 5px;\n margin-bottom: 20px;\n display: flex;\n justify-content: space-evenly;\n`;\n\nconst TitleContainer = styled.div`\n background: #4e4a4e;\n width: 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\nconst Thumbnail = styled.img`\n color: white;\n z-index: 22;\n font-size: 10px;\n width: 64px;\n margin-right: 0.5rem;\n`;\n","import { IQuest } from '@rpg-engine/shared';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { DraggableContainer } from './DraggableContainer';\nimport { RPGUIContainerTypes } from './RPGUIContainer';\n\nexport interface IQuestListProps {\n quests?: IQuest[];\n onClose: () => void;\n}\n\nexport const QuestList: React.FC<IQuestListProps> = ({ quests, onClose }) => {\n return (\n <QuestDraggableContainer\n type={RPGUIContainerTypes.Framed}\n onCloseButton={() => {\n if (onClose) onClose();\n }}\n width=\"520px\"\n >\n <div style={{ width: '100%' }}>\n <Title>Quests</Title>\n <hr className=\"golden\" />\n\n <QuestListContainer>\n {quests ? (\n quests.map((quest, i) => (\n <div className=\"quest-item\" key={i}>\n <span className=\"quest-number\">{i + 1}</span>\n <div className=\"quest-detail\">\n <p className=\"quest-detail__title\">{quest.title}</p>\n <p className=\"quest-detail__description\">\n {quest.description}\n </p>\n </div>\n </div>\n ))\n ) : (\n <NoQuestContainer>\n <p>There are no ongoing quests</p>\n </NoQuestContainer>\n )}\n </QuestListContainer>\n </div>\n </QuestDraggableContainer>\n );\n};\n\nconst QuestDraggableContainer = styled(DraggableContainer)`\n .container-close {\n top: 10px;\n right: 10px;\n }\n\n .quest-title {\n text-align: left;\n margin-left: 44px;\n margin-top: 20px;\n color: yellow;\n }\n\n .quest-desc {\n margin-top: 12px;\n margin-left: 44px;\n }\n\n .rpgui-progress {\n min-width: 80%;\n margin: 0 auto;\n }\n`;\n\nconst Title = styled.h1`\n z-index: 22;\n font-size: 0.6rem;\n color: yellow !important;\n`;\n\nconst QuestListContainer = styled.div`\n margin-top: 20px;\n margin-bottom: 40px;\n overflow-y: auto;\n max-height: 400px;\n\n .quest-item {\n display: flex;\n align-items: flex-start;\n margin-bottom: 12px;\n }\n\n .quest-number {\n border-radius: 50%;\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 16px;\n background-color: brown;\n flex-shrink: 0;\n }\n\n .quest-number.completed {\n background-color: yellow;\n }\n\n p {\n margin: 0;\n }\n\n .quest-detail__title {\n color: yellow;\n }\n\n .quest-detail__description {\n margin-top: 5px;\n }\n .Noquest-detail__description {\n margin-top: 5px;\n margin: auto;\n }\n`;\nconst NoQuestContainer = styled.div`\n text-align: center;\n p {\n margin-top: 5px;\n }\n`;\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 { ErrorBoundary } from './Item/Inventory/ErrorBoundary';\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 atlasJSON: any;\n atlasIMG: any;\n}\n\nexport const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({\n bgColor,\n skillName,\n level,\n skillPoints,\n texturePath,\n showSkillPoints = true,\n atlasIMG,\n atlasJSON,\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 <ErrorBoundary>\n <SpriteFromAtlas\n atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\n spriteKey={texturePath}\n imgScale={1}\n grayScale\n opacity={0.5}\n />\n </ErrorBoundary>\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 atlasJSON: any;\n atlasIMG: any;\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: 'ranged-weapons/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 atlasIMG,\n atlasJSON,\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 atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\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 atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\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 </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","import { ITradeResponseItem } from '@rpg-engine/shared';\nimport capitalize from 'lodash/capitalize';\nimport React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { colors } from '../../constants/uiColors';\nimport SelectArrow from '../Arrow/SelectArrow';\nimport { Ellipsis } from '../shared/Ellipsis';\nimport { SpriteFromAtlas } from '../shared/SpriteFromAtlas';\nexport interface ITradeComponentProps {\n traderItem: ITradeResponseItem;\n updateChartTotals: (traderItem: ITradeResponseItem) => void;\n atlasJSON: any;\n atlasIMG: any;\n}\n\nexport const TradingItemRow: React.FC<ITradeComponentProps> = ({\n atlasIMG,\n atlasJSON,\n updateChartTotals,\n traderItem,\n}) => {\n const [itemQuantity, setItemQuantity] = useState(0);\n\n const onLeftClick = () => {\n if (itemQuantity > 0) {\n const newQuantity = itemQuantity - 1;\n setItemQuantity(newQuantity);\n updateChartTotals({\n key: traderItem.key,\n qty: newQuantity,\n price: traderItem.price,\n texturePath: traderItem.texturePath,\n name: traderItem.name,\n });\n }\n };\n const onRightClick = () => {\n if (itemQuantity < 999) {\n const newQuantity = itemQuantity + 1;\n setItemQuantity(newQuantity);\n updateChartTotals({\n key: traderItem.key,\n qty: newQuantity,\n price: traderItem.price,\n texturePath: traderItem.texturePath,\n name: traderItem.name,\n });\n }\n };\n\n return (\n <ItemWrapper>\n <ItemIconContainer>\n <SpriteContainer>\n <SpriteFromAtlas\n atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\n spriteKey={traderItem.texturePath}\n imgScale={2.5}\n />\n </SpriteContainer>\n </ItemIconContainer>\n <ItemNameContainer>\n <NameValue>\n <Ellipsis maxLines={1} maxWidth={250}>\n {capitalize(traderItem.name)}\n </Ellipsis>\n <p>${traderItem.price}</p>\n </NameValue>\n </ItemNameContainer>\n\n <QuantityContainer>\n <SelectArrow\n size={32}\n className=\"arrow-selector\"\n direction=\"left\"\n onClick={onLeftClick}\n onTouchStart={onLeftClick}\n ></SelectArrow>\n <QuantityDisplay>\n <TextOverlay>\n <Item>{itemQuantity}</Item>\n </TextOverlay>\n </QuantityDisplay>\n <SelectArrow\n size={32}\n className=\"arrow-selector\"\n direction=\"right\"\n onClick={onRightClick}\n onTouchStart={onRightClick}\n ></SelectArrow>\n </QuantityContainer>\n </ItemWrapper>\n );\n};\n\nconst ItemWrapper = styled.div`\n width: 100%;\n margin: auto;\n display: flex;\n justify-content: space-between;\n margin-bottom: 1rem;\n\n &:hover {\n background-color: ${colors.darkGrey};\n }\n padding: 0.5rem;\n`;\n\nconst ItemNameContainer = styled.div`\n flex: 60%;\n`;\n\nconst ItemIconContainer = styled.div`\n display: flex;\n justify-content: flex-start;\n align-items: center;\n\n flex: 0 0 58px;\n`;\n\nconst SpriteContainer = styled.div`\n position: relative;\n top: -0.5rem;\n left: 0.5rem;\n`;\n\nconst NameValue = styled.div`\n p {\n font-size: 0.75rem;\n margin: 0;\n }\n`;\n\nconst Item = styled.span`\n font-size: 1rem;\n color: white;\n text-align: center;\n z-index: 1;\n\n width: 100%;\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 QuantityContainer = styled.div<IContainerProps>`\n position: relative;\n display: flex;\n\n min-width: 100px;\n width: 40%;\n justify-content: center;\n align-items: center;\n\n flex: 20%;\n`;\n\nconst QuantityDisplay = styled.div`\n font-size: 0.8rem;\n`;\n","import { ITradeResponseItem, TradeTransactionType } from '@rpg-engine/shared';\nimport React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { Button, ButtonTypes } from '../Button';\nimport { DraggableContainer } from '../DraggableContainer';\nimport { RPGUIContainerTypes } from '../RPGUIContainer';\nimport { TradingItemRow } from './TradingItemRow';\nexport interface ITrandingMenu {\n traderItems: ITradeResponseItem[];\n onClose: () => void;\n onConfirm: () => void;\n type: TradeTransactionType;\n atlasJSON: any;\n atlasIMG: any;\n characterAvailableGold: number;\n}\n\nexport const TradingMenu: React.FC<ITrandingMenu> = ({\n traderItems,\n onClose,\n type,\n atlasJSON,\n atlasIMG,\n characterAvailableGold,\n onConfirm,\n}) => {\n const [sum, setSum] = useState(0);\n let newSumArray = 0;\n const updateChartTotals = (item: ITradeResponseItem) => {\n const itemIndex = traderItems.findIndex(\n itemArray => itemArray.key === item.key\n );\n traderItems[itemIndex] = item;\n\n traderItems.forEach(item => {\n if (item.qty) newSumArray += item.qty * item.price;\n setSum(newSumArray);\n });\n };\n\n const Capitalize = (word: string) => {\n return word[0].toUpperCase() + word.substring(1);\n };\n\n return (\n <DraggableContainer\n type={RPGUIContainerTypes.Framed}\n onCloseButton={() => {\n if (onClose) onClose();\n }}\n width=\"500px\"\n cancelDrag=\".equipment-container-body .arrow-selector\"\n >\n <>\n <div style={{ width: '100%' }}>\n <Title>{Capitalize(type)} Menu</Title>\n <hr className=\"golden\" />\n </div>\n <TradingComponentScrollWrapper>\n {traderItems.map(tradeItem => (\n <ItemWrapper>\n <TradingItemRow\n atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\n updateChartTotals={updateChartTotals}\n traderItem={tradeItem}\n />\n </ItemWrapper>\n ))}\n </TradingComponentScrollWrapper>\n <GoldWrapper>\n <p>Available Gold:</p>\n <p>${characterAvailableGold}</p>\n </GoldWrapper>\n <TotalWrapper>\n <p>Total:</p>\n <p>${sum}</p>\n </TotalWrapper>\n {sum > characterAvailableGold ? (\n <AlertWrapper>\n <p> Sorry, not enough money.</p>\n </AlertWrapper>\n ) : (\n <GoldWrapper>\n <p>Final Gold:</p>\n <p>${characterAvailableGold - sum}</p>\n </GoldWrapper>\n )}\n\n <ButtonWrapper>\n <Button\n buttonType={ButtonTypes.RPGUIButton}\n disabled={sum > characterAvailableGold}\n onClick={() => onConfirm()}\n >\n Confirm\n </Button>\n <Button\n buttonType={ButtonTypes.RPGUIButton}\n onClick={() => onClose()}\n >\n Cancel\n </Button>\n </ButtonWrapper>\n </>\n </DraggableContainer>\n );\n};\n\nconst Title = styled.h1`\n z-index: 22;\n font-size: 0.6rem;\n color: yellow !important;\n`;\n\nconst TradingComponentScrollWrapper = styled.div`\n overflow-y: scroll;\n height: 390px;\n width: 100%;\n margin-top: 1rem;\n`;\n\nconst ItemWrapper = styled.div`\n margin: auto;\n display: flex;\n justify-content: space-between;\n`;\n\nconst TotalWrapper = styled.div`\n margin-top: 1rem;\n display: flex;\n justify-content: space-between;\n height: 20px;\n p {\n color: white !important;\n }\n width: 100%;\n margin-left: 0.8rem;\n`;\n\nconst GoldWrapper = styled.div`\n margin-top: 1rem;\n display: flex;\n justify-content: space-between;\n height: 20px;\n p {\n color: yellow !important;\n }\n width: 100%;\n margin-left: 0.8rem;\n`;\n\nconst AlertWrapper = styled.div`\n margin-top: 1rem;\n display: flex;\n width: 100%;\n justify-content: center;\n height: 20px;\n p {\n color: red !important;\n }\n`;\n\nconst ButtonWrapper = styled.div`\n display: flex;\n justify-content: space-around;\n padding-top: 20px;\n width: 100%;\n margin-top: 1rem;\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","SpriteFromAtlas","_ref$width","width","_ref$height","height","_ref$imgScale","imgScale","_ref$grayScale","grayScale","_ref$opacity","opacity","Container","GRID_WIDTH","GRID_HEIGHT","hasHover","onClick","style","containerStyle","ImgSprite","atlasIMG","frame","atlasJSON","frames","spriteKey","scale","imgStyle","div","w","h","x","y","ErrorBoundary","args","_this","state","hasError","getDerivedStateFromError","_","_proto","componentDidCatch","error","errorInfo","console","render","this","Component","SelectArrow","direction","size","LeftArrow","RightArrow","span","Ellipsis","maxWidth","fontSize","maxLines","PropertySelect","item","availableProperties","onChange","useState","currentIndex","setCurrentIndex","propertiesLength","length","onLeftClick","index","onRightClick","useEffect","JSON","stringify","TextOverlay","Item","name","onTouchStart","Input","RPGUIContainer","type","Column","flex","flexWrap","alignItems","justifyContent","CloseButton","CustomInput","CustomContainer","Form","form","MessageText","p","useOutsideClick","ref","id","handleClickOutside","event","current","contains","target","CustomEvent","detail","document","dispatchEvent","addEventListener","removeEventListener","NPCDialogType","DraggableContainer","_ref$type","FramedGold","onCloseButton","title","imgSrc","_ref$imgWidth","imgWidth","cancelDrag","onPositionChange","onOutsideClick","draggableRef","useRef","_e","Draggable","cancel","onDrag","data","TitleContainer","Title","Icon","src","h1","img","_RPGUI","RPGUI","RelativeListMenu","options","onSelected","_ref$fontSize","overflow","map","params","ListElement","key","text","li","ItemTooltip","label","generateContextMenuListOptions","actionsByTypeList","action","ItemSocketEventsDisplayLabels","EquipmentSlotSpriteByType","Neck","LeftHand","Ring","Head","Torso","Legs","Feet","Inventory","RightHand","Accessory","ItemSlot","observer","slotIndex","containerType","itemContainerType","slotSpriteMask","onMouseOver","onMouseOut","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","getStackInfo","itemId","stackQty","ItemQty","left","quantity","clientX","clientY","onMouseEnter","onMouseLeave","optionId","itemToRender","texturePath","allowedEquipSlotType","_itemToRender$allowed","includes","element","push","_id","getItemTextureKeyPath","stackInfo","uuidv4","renderEquipment","renderItem","onRenderSlot","EquipmentSetContainer","EquipmentColumn","DynamicText","onFinish","onStart","textState","setTextState","i","interval","setInterval","substring","clearInterval","TextContainer","NPCDialogText","onClose","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","ImgSide","NPCDialog","imagePath","_ref$isQuestionDialog","isQuestionDialog","showGoNextIndicator","setShowGoNextIndicator","TextAndThumbnail","ThumbnailContainer","NPCThumbnail","aliceDefaultThumbnail","PressSpaceIndicator","right","TextOnly","pressSpaceGif","RangeSliderType","NPCMultiDialog","textAndTypeArray","slide","setSlide","_textAndTypeArray$sli","imageSide","BackgroundContainer","imgPath","DialogContainer","SlotsContainer","Framed","ItemsContainer","ProgressBarText","minWidth","percentageWidth","QuestDraggableContainer","QuestContainer","QuestsContainer","Content","QuestSplitDiv","QuestColumn","Thumbnail","QuestListContainer","NoQuestContainer","input","SimpleProgressBar","_ref$bgColor","bgColor","_ref$margin","margin","ProgressBarContainer","BackgroundBar","Progress","value","SkillProgressBar","skillName","level","skillPoints","_ref$showSkillPoints","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","TradingItemRow","updateChartTotals","traderItem","itemQuantity","setItemQuantity","newQuantity","qty","price","ItemWrapper","ItemIconContainer","ItemNameContainer","NameValue","capitalize","QuantityContainer","QuantityDisplay","TradingComponentScrollWrapper","TotalWrapper","GoldWrapper","AlertWrapper","ButtonWrapper","availableCharacters","propertySelectValues","textureKey","selectedValue","setSelectedValue","selectedSpriteKey","setSelectedSpriteKey","entitiesJSON","display","paddingBottom","chatMessages","onSendChatMessage","message","setMessage","scrollChatToBottom","scrollingElement","querySelector","scrollTop","scrollHeight","FramedGrey","fallback","emitter","createdAt","dayjs","Date","format","onRenderMessageLines","onRenderChatMessages","onSubmit","preventDefault","autoComplete","RPGUIButton","items","selectedValues","forEach","generateSelectedValuesList","setSelectedValues","checked","dropdownId","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","backgroundImgPath","fullCoverBackground","setImage","fullImg","handleClick","slots","slotQty","_itemContainer$slots","onRenderSlots","max","_ref$displayText","displayText","_ref$percentageWidth","_ref$minWidth","calculatePercentageValue","quests","buttons","onChangeQuest","questsLength","thumbnail","thumbnailDefault","description","npcId","quest","valueMin","valueMax","sliderId","onMouseUp","rpguiSlider","Number","Slider","GoldSlider","min","skill","onRenderSkillCategory","category","skillCategory","skillCategoryColor","output","Object","entries","skillDetails","Math","round","skillPointsToNextLevel","experience","xpToNextLevel","word","traderItems","characterAvailableGold","onConfirm","sum","setSum","newSumArray","itemIndex","itemArray","toUpperCase","tradeItem"],"mappings":"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"}
1	+ {"version":3,"file":"long-bow.cjs.production.min.js","sources":["../src/components/Button.tsx","../src/components/RPGUIContainer.tsx","../src/components/shared/SpriteFromAtlas.tsx","../src/components/Item/Inventory/ErrorBoundary.tsx","../src/components/Arrow/SelectArrow.tsx","../src/components/shared/Ellipsis.tsx","../src/components/PropertySelect/PropertySelect.tsx","../src/components/Character/CharacterSelection.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/Item/Cards/ItemTooltip.tsx","../src/components/Item/Inventory/itemContainerHelper.ts","../src/components/Item/Inventory/ItemSlot.tsx","../src/components/Equipment/EquipmentSet.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/NPCDialog/NPCMultiDialog.tsx","../src/components/RangeSlider.tsx","../src/components/HistoryDialog.tsx","../src/components/Abstractions/SlotsContainer.tsx","../src/components/Item/Inventory/ItemContainer.tsx","../src/components/ListMenu.tsx","../src/components/ProgressBar.tsx","../src/components/QuestInfo/QuestInfo.tsx","../src/components/QuestList.tsx","../src/components/SimpleProgressBar.tsx","../src/components/SkillProgressBar.tsx","../src/components/SkillsContainer.tsx","../src/components/TradingMenu/TradingItemRow.tsx","../src/components/TradingMenu/TradingMenu.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 { 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, { Component, ErrorInfo, ReactNode } from 'react';\nimport atlasJSON from '../../../mocks/atlas/items/items.json';\nimport atlasIMG from '../../../mocks/atlas/items/items.png';\nimport { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';\n\ninterface Props {\n children?: ReactNode;\n}\n\ninterface State {\n hasError: boolean;\n}\n\nexport class ErrorBoundary extends Component<Props, State> {\n public state: State = {\n hasError: false,\n };\n\n public static getDerivedStateFromError(_: Error): State {\n // Update state so the next render will show the fallback UI.\n return { hasError: true };\n }\n\n public componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n console.error('Uncaught error:', error, errorInfo);\n }\n\n public render() {\n if (this.state.hasError) {\n return (\n <SpriteFromAtlas\n atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\n spriteKey={'others/no-image.png'}\n imgScale={3}\n />\n );\n }\n\n return this.props.children;\n }\n}\n","import React from 'react';\nimport styled from 'styled-components';\nimport LeftArrowClickIcon from './img/arrow01-left-clicked.png';\nimport LeftArrowIcon from './img/arrow01-left.png';\nimport RightArrowClickIcon from './img/arrow01-right-clicked.png';\nimport RightArrowIcon from './img/arrow01-right.png';\n\nexport interface ArrowBarProps extends React.HTMLAttributes<HTMLDivElement> {\n direction: 'right' \| 'left';\n onClick: () => void;\n size?: number;\n}\n\nexport const SelectArrow: React.FC<ArrowBarProps> = ({\n direction = 'left',\n size,\n onClick,\n ...props\n}) => {\n return (\n <>\n {direction === 'left' ? (\n <LeftArrow size={size} onClick={() => onClick()} {...props}></LeftArrow>\n ) : (\n <RightArrow\n size={size}\n onClick={() => onClick()}\n {...props}\n ></RightArrow>\n )}\n </>\n );\n};\n\ninterface IArrowProps {\n size?: number;\n}\n\nconst LeftArrow = styled.span<IArrowProps>`\n background-image: url(${LeftArrowIcon});\n background-size: 100% 100%;\n left: 0;\n position: absolute;\n width: ${props => props.size \|\| 40}px;\n height: ${props => props.size \|\| 42}px;\n :active {\n background-image: url(${LeftArrowClickIcon});\n }\n z-index: 2;\n`;\n\nconst RightArrow = styled.span<IArrowProps>`\n background-image: url(${RightArrowIcon});\n right: 0;\n position: absolute;\n width: ${props => props.size \|\| 40}px;\n height: ${props => props.size \|\| 42}px;\n background-size: 100% 100%;\n :active {\n background-image: url(${RightArrowClickIcon});\n }\n z-index: 2;\n`;\n\nexport default SelectArrow;\n","import React from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n children: React.ReactNode;\n maxLines: 1 \| 2 \| 3;\n maxWidth: number;\n fontSize?: string;\n}\n\nexport const Ellipsis = ({\n children,\n maxLines,\n maxWidth,\n fontSize,\n}: IProps) => {\n return (\n <Container maxWidth={maxWidth} fontSize={fontSize}>\n <p className={`ellipsis-${maxLines}-lines`}>{children}</p>\n </Container>\n );\n};\n\ninterface IContainerProps {\n maxWidth: number;\n fontSize?: string;\n}\n\nconst Container = styled.div<IContainerProps>`\n p {\n font-size: ${props => props.fontSize \|\| '1rem'};\n }\n\n .ellipsis-1-lines {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n max-width: ${props => props.maxWidth}px;\n }\n .ellipsis-2-lines {\n display: -webkit-box;\n max-width: ${props => props.maxWidth}px;\n\n height: 25px;\n margin: 0 auto;\n line-height: 1;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n .ellipsis-3-lines {\n display: -webkit-box;\n max-width: ${props => props.maxWidth}px;\n\n height: 43px;\n margin: 0 auto;\n line-height: 1;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n`;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport SelectArrow from '../Arrow/SelectArrow';\nimport { Ellipsis } from '../shared/Ellipsis';\n\nexport interface IPropertySelectProps {\n availableProperties: Array<IPropertiesProps>;\n selectedProperty?: IPropertiesProps;\n children?: React.ReactNode;\n onChange: (selectedProperty: IPropertiesProps) => void;\n}\n\nexport interface IPropertiesProps {\n id: string;\n name: string;\n}\n\nexport const PropertySelect: React.FC<IPropertySelectProps> = ({\n availableProperties,\n onChange,\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\n useEffect(() => {\n onChange(availableProperties[currentIndex]);\n }, [currentIndex]);\n\n useEffect(() => {\n setCurrentIndex(0);\n }, [JSON.stringify(availableProperties)]);\n\n const getCurrentSelectionName = () => {\n const item = availableProperties[currentIndex];\n if (item) {\n return item.name;\n }\n return '';\n };\n\n return (\n <Container>\n <TextOverlay>\n <Item>\n <Ellipsis maxLines={1} maxWidth={200}>\n {getCurrentSelectionName()}\n </Ellipsis>\n </Item>\n </TextOverlay>\n <div className=\"rpgui-progress-track\"></div>\n\n <SelectArrow\n direction=\"left\"\n onClick={onLeftClick}\n onTouchStart={onLeftClick}\n ></SelectArrow>\n <SelectArrow\n direction=\"right\"\n onClick={onRightClick}\n onTouchStart={onRightClick}\n ></SelectArrow>\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 top: 12px;\n width: 100%;\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\nexport default PropertySelect;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { SpriteFromAtlas } from '../shared/SpriteFromAtlas';\n\nimport entitiesJSON from '../../mocks/atlas/entities/entities.json';\nimport entitiesIMG from '../../mocks/atlas/entities/entities.png';\nimport { ErrorBoundary } from '../Item/Inventory/ErrorBoundary';\nimport PropertySelect, {\n IPropertiesProps,\n} from '../PropertySelect/PropertySelect';\n\nexport interface ICharacterProps {\n name: string;\n textureKey: string;\n}\n\nexport interface ICharacterSelectionProps {\n availableCharacters: ICharacterProps[];\n onChange: (textureKey: string) => void;\n}\n\nexport const CharacterSelection: React.FC<ICharacterSelectionProps> = ({\n availableCharacters,\n onChange,\n}) => {\n const propertySelectValues = availableCharacters.map(item => {\n return {\n id: item.textureKey,\n name: item.name,\n };\n });\n\n const [selectedValue, setSelectedValue] = useState<IPropertiesProps>();\n const [selectedSpriteKey, setSelectedSpriteKey] = useState('');\n\n const onSelectedValueChange = () => {\n const textureKey = selectedValue ? selectedValue.id : '';\n const spriteKey = textureKey ? textureKey + '/down/standing/0.png' : '';\n\n if (spriteKey === selectedSpriteKey) {\n return;\n }\n\n setSelectedSpriteKey(spriteKey);\n onChange(textureKey);\n };\n\n useEffect(() => {\n onSelectedValueChange();\n }, [selectedValue]);\n\n useEffect(() => {\n setSelectedValue(propertySelectValues[0]);\n }, [availableCharacters]);\n\n return (\n <Container>\n {selectedSpriteKey && (\n <ErrorBoundary>\n <SpriteFromAtlas\n spriteKey={selectedSpriteKey}\n atlasIMG={entitiesIMG}\n atlasJSON={entitiesJSON}\n imgScale={4}\n height={80}\n width={64}\n containerStyle={{\n display: 'flex',\n alignItems: 'center',\n paddingBottom: '15px',\n }}\n imgStyle={{\n left: '22px',\n }}\n />\n </ErrorBoundary>\n )}\n <PropertySelect\n availableProperties={propertySelectValues}\n onChange={value => {\n setSelectedValue(value);\n }}\n />\n </Container>\n );\n};\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n image-rendering: pixelated;\n`;\n\nexport default CharacterSelection;\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: max-content;\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 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 contextActionMenu = generateContextMenuListOptions(\n ActionsForInventory.Equipment\n );\n break;\n case ItemType.Container:\n contextActionMenu = generateContextMenuListOptions(\n ActionsForInventory.Container\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 getItemTextureKeyPath,\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 { RelativeListMenu } from '../../RelativeListMenu';\nimport { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';\nimport { ItemTooltip } from '../Cards/ItemTooltip';\nimport { ErrorBoundary } from './ErrorBoundary';\nimport { generateContextMenu, IContextMenuItem } from './itemContainerHelper';\nimport { v4 as uuidv4 } from 'uuid';\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: 'ranged-weapons/arrow.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 atlasJSON: any;\n atlasIMG: any;\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 atlasJSON,\n atlasIMG,\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 getStackInfo = (itemId: string, stackQty: number) => {\n // if (itemToRender?.isStackable && itemToRender?.stackQty) {\n if (stackQty > 1) {\n return (\n <ItemQty left={getLeftPositionValue(stackQty)} key={`qty-${itemId}`}>\n {' '}\n {stackQty}{' '}\n </ItemQty>\n );\n }\n return undefined;\n };\n\n const renderItem = (itemToRender: IItem \| null) => {\n const element = [];\n if (itemToRender?.texturePath) {\n element.push(\n <ErrorBoundary key={itemToRender._id}>\n <SpriteFromAtlas\n key={itemToRender._id}\n atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\n spriteKey={getItemTextureKeyPath(itemToRender, atlasJSON)}\n imgScale={3}\n />\n </ErrorBoundary>\n );\n }\n const stackInfo = getStackInfo(\n itemToRender?._id ?? '',\n itemToRender?.stackQty ?? 0\n );\n if (stackInfo) {\n element.push(stackInfo);\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 const element = [];\n element.push(\n <ErrorBoundary key={itemToRender._id}>\n <SpriteFromAtlas\n key={itemToRender._id}\n atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\n spriteKey={getItemTextureKeyPath(itemToRender, atlasJSON)}\n imgScale={3}\n />\n </ErrorBoundary>\n );\n const stackInfo = getStackInfo(\n itemToRender?._id ?? '',\n itemToRender?.stackQty ?? 0\n );\n if (stackInfo) {\n element.push(stackInfo);\n }\n return element;\n } else {\n return (\n <ErrorBoundary key={uuidv4()}>\n <SpriteFromAtlas\n key={uuidv4()}\n atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\n spriteKey={EquipmentSlotSpriteByType[slotSpriteMask!]}\n imgScale={3}\n grayScale={true}\n opacity={0.4}\n />\n </ErrorBoundary>\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 atlasIMG: any;\n atlasJSON: any;\n}\n\nexport const EquipmentSet: React.FC<IEquipmentSetProps> = ({\n equipmentSet,\n onClose,\n onMouseOver,\n onSelected,\n onItemClick,\n atlasIMG,\n atlasJSON,\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 atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\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, { 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, { useEffect, 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';\n\nexport enum ImgSide {\n right = 'right',\n left = 'left',\n}\n\nexport interface NPCMultiDialogType {\n text: string;\n imagePath?: string;\n imageSide: ImgSide;\n}\n\nexport interface INPCMultiDialogProps {\n onClose: () => void;\n textAndTypeArray: NPCMultiDialogType[];\n}\n\nexport const NPCMultiDialog: React.FC<INPCMultiDialogProps> = ({\n onClose,\n textAndTypeArray,\n}) => {\n const [showGoNextIndicator, setShowGoNextIndicator] = useState<boolean>(\n false\n );\n const [slide, setSlide] = useState<number>(0);\n\n const onHandleSpacePress = (event: KeyboardEvent) => {\n if (event.code === 'Space') {\n if (slide < textAndTypeArray?.length - 1) {\n setSlide(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 }, [slide]);\n\n return (\n <RPGUIContainer\n type={RPGUIContainerTypes.FramedGold}\n width={'50%'}\n height={'180px'}\n >\n <>\n <Container>\n {textAndTypeArray[slide]?.imageSide === 'right' && (\n <>\n <TextContainer flex={'70%'}>\n <NPCDialogText\n onStartStep={() => setShowGoNextIndicator(false)}\n onEndStep={() => setShowGoNextIndicator(true)}\n text={textAndTypeArray[slide].text \|\| 'No text provided.'}\n onClose={() => {\n if (onClose) {\n onClose();\n }\n }}\n />\n </TextContainer>\n <ThumbnailContainer>\n <NPCThumbnail\n src={\n textAndTypeArray[slide].imagePath \|\| aliceDefaultThumbnail\n }\n />\n </ThumbnailContainer>\n {showGoNextIndicator && (\n <PressSpaceIndicator right={'10.5rem'} src={pressSpaceGif} />\n )}\n </>\n )}\n {textAndTypeArray[slide].imageSide === 'left' && (\n <>\n <ThumbnailContainer>\n <NPCThumbnail\n src={\n textAndTypeArray[slide].imagePath \|\| aliceDefaultThumbnail\n }\n />\n </ThumbnailContainer>\n <TextContainer flex={'70%'}>\n <NPCDialogText\n onStartStep={() => setShowGoNextIndicator(false)}\n onEndStep={() => setShowGoNextIndicator(true)}\n text={textAndTypeArray[slide].text \|\| 'No text provided.'}\n onClose={() => {\n if (onClose) {\n onClose();\n }\n }}\n />\n </TextContainer>\n {showGoNextIndicator && (\n <PressSpaceIndicator right={'1rem'} src={pressSpaceGif} />\n )}\n </>\n )}\n </Container>\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 from 'react';\nimport styled from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\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 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 onMouseUp={onHandleMouseUp}>\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, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { NPCDialog, NPCDialogType } from './NPCDialog/NPCDialog';\nimport { NPCMultiDialog, NPCMultiDialogType } from './NPCDialog/NPCMultiDialog';\nimport {\n IQuestionDialog,\n IQuestionDialogAnswer,\n QuestionDialog,\n} from './NPCDialog/QuestionDialog/QuestionDialog';\n\nexport interface IHistoryDialogProps {\n backgroundImgPath: string[];\n fullCoverBackground: boolean;\n questions?: IQuestionDialog[];\n answers?: IQuestionDialogAnswer[];\n text?: string;\n imagePath?: string;\n textAndTypeArray?: NPCMultiDialogType[];\n onClose: () => void;\n}\n\nexport const HistoryDialog: React.FC<IHistoryDialogProps> = ({\n backgroundImgPath,\n fullCoverBackground,\n questions,\n answers,\n text,\n imagePath,\n textAndTypeArray,\n onClose,\n}) => {\n const [img, setImage] = useState<number>(0);\n const onHandleSpacePress = (event: KeyboardEvent) => {\n if (event.code === 'Space') {\n if (img < backgroundImgPath?.length - 1) {\n setImage(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 }, [backgroundImgPath]);\n return (\n <BackgroundContainer\n imgPath={backgroundImgPath[img]}\n fullImg={fullCoverBackground}\n >\n <DialogContainer>\n {textAndTypeArray ? (\n <NPCMultiDialog\n textAndTypeArray={textAndTypeArray}\n onClose={onClose}\n />\n ) : questions && answers ? (\n <QuestionDialog\n questions={questions}\n answers={answers}\n onClose={onClose}\n />\n ) : text && imagePath ? (\n <NPCDialog\n text={text}\n imagePath={imagePath}\n onClose={onClose}\n type={NPCDialogType.TextAndThumbnail}\n />\n ) : (\n <NPCDialog\n text={text}\n onClose={onClose}\n type={NPCDialogType.TextOnly}\n />\n )}\n </DialogContainer>\n </BackgroundContainer>\n );\n};\n\ninterface IImgContainerProps {\n imgPath: string;\n fullImg: boolean;\n}\n\nconst BackgroundContainer = styled.div<IImgContainerProps>`\n width: 100%;\n height: 100%;\n background-image: url(${props => props.imgPath});\n background-size: ${props => (props.imgPath ? 'cover' : 'auto')};\n display: flex;\n justify-content: space-evenly;\n align-items: center;\n`;\n\nconst DialogContainer = styled.div`\n display: flex;\n justify-content: center;\n padding-top: 200px;\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 atlasJSON: any;\n atlasIMG: any;\n}\n\nexport const ItemContainer: React.FC<IItemContainerProps> = ({\n itemContainer,\n onClose,\n onMouseOver,\n onSelected,\n onItemClick,\n type,\n atlasJSON,\n atlasIMG,\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 atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\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 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 { IQuest } from '@rpg-engine/shared';\nimport React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport SelectArrow from '../Arrow/SelectArrow';\nimport { Button, ButtonTypes } from '../Button';\nimport { DraggableContainer } from '../DraggableContainer';\n\nimport { RPGUIContainerTypes } from '../RPGUIContainer';\nimport { Column } from '../shared/Column';\nimport thumbnailDefault from './img/default.png';\n\nexport interface IQuestsButtonProps {\n disabled: boolean;\n title: string;\n onClick: (questId: string, npcId: string) => void;\n}\n\nexport interface IQuestInfoProps {\n onClose?: () => void;\n buttons?: IQuestsButtonProps[];\n quests: IQuest[];\n onChangeQuest: (currentQuestIndex: number, currentQuestId: string) => void;\n}\n\nexport const QuestInfo: React.FC<IQuestInfoProps> = ({\n quests,\n onClose,\n buttons,\n onChangeQuest,\n}) => {\n const [currentIndex, setCurrentIndex] = useState(0);\n const questsLength = quests.length - 1;\n\n useEffect(() => {\n if (onChangeQuest) {\n onChangeQuest(currentIndex, quests[currentIndex]._id);\n }\n }, [currentIndex]);\n\n const onLeftClick = () => {\n if (currentIndex === 0) setCurrentIndex(questsLength);\n else setCurrentIndex(index => index - 1);\n };\n const onRightClick = () => {\n if (currentIndex === questsLength) setCurrentIndex(0);\n else setCurrentIndex(index => index + 1);\n };\n\n return (\n <QuestDraggableContainer\n type={RPGUIContainerTypes.Framed}\n onCloseButton={() => {\n if (onClose) onClose();\n }}\n width=\"730px\"\n cancelDrag=\".equipment-container-body .arrow-selector\"\n >\n {quests.length >= 2 ? (\n <QuestsContainer>\n {currentIndex !== 0 && (\n <SelectArrow\n direction=\"left\"\n onClick={onLeftClick}\n onTouchStart={onLeftClick}\n ></SelectArrow>\n )}\n {currentIndex !== quests.length - 1 && (\n <SelectArrow\n direction=\"right\"\n onClick={onRightClick}\n onTouchStart={onRightClick}\n ></SelectArrow>\n )}\n\n <QuestContainer>\n <TitleContainer className=\"drag-handler\">\n <Title>\n <Thumbnail\n src={quests[currentIndex].thumbnail \|\| thumbnailDefault}\n />\n {quests[currentIndex].title}\n </Title>\n <QuestSplitDiv>\n <hr className=\"golden\" />\n </QuestSplitDiv>\n </TitleContainer>\n <Content>\n <p>{quests[currentIndex].description}</p>\n </Content>\n <QuestColumn className=\"dark-background\" justifyContent=\"flex-end\">\n {buttons &&\n buttons.map((button, index) => (\n <Button\n key={index}\n onClick={() =>\n button.onClick(\n quests[currentIndex]._id,\n quests[currentIndex].npcId\n )\n }\n disabled={button.disabled}\n buttonType={ButtonTypes.RPGUIButton}\n id={`button-${index}`}\n >\n {button.title}\n </Button>\n ))}\n </QuestColumn>\n </QuestContainer>\n </QuestsContainer>\n ) : (\n <QuestsContainer>\n <QuestContainer>\n <TitleContainer className=\"drag-handler\">\n <Title>\n <Thumbnail src={quests[0].thumbnail \|\| thumbnailDefault} />\n {quests[0].title}\n </Title>\n <QuestSplitDiv>\n <hr className=\"golden\" />\n </QuestSplitDiv>\n </TitleContainer>\n <Content>\n <p>{quests[0].description}</p>\n </Content>\n <QuestColumn className=\"dark-background\" justifyContent=\"flex-end\">\n {buttons &&\n buttons.map((button, index) => (\n <Button\n key={index}\n onClick={() =>\n button.onClick(quests[0]._id, quests[0].npcId)\n }\n disabled={button.disabled}\n buttonType={ButtonTypes.RPGUIButton}\n id={`button-${index}`}\n >\n {button.title}\n </Button>\n ))}\n </QuestColumn>\n </QuestContainer>\n </QuestsContainer>\n )}\n </QuestDraggableContainer>\n );\n};\n\nconst QuestDraggableContainer = styled(DraggableContainer)`\n border: 1px solid black;\n width: 600px;\n padding: 0 0 0 0 !important;\n .DraggableContainer__TitleContainer-sc-184mpyl-2 {\n height: auto;\n }\n .container-close {\n position: absolute;\n margin-left: auto;\n top: 20px;\n padding-right: 5px;\n }\n img {\n display: inline-block;\n vertical-align: middle;\n line-height: normal;\n }\n`;\n\nconst QuestContainer = styled.div`\n margin-right: 40px;\n margin-left: 40px;\n`;\n\nconst QuestsContainer = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst Content = styled.div`\n padding: 18px;\n h1 {\n text-align: left;\n margin: 14px 0px;\n }\n`;\n\nconst QuestSplitDiv = styled.div`\n width: 100%;\n font-size: 11px;\n margin-bottom: 10px;\n hr {\n margin: 0px;\n padding: 0px;\n }\n p {\n margin-bottom: 0px;\n }\n`;\n\nconst QuestColumn = styled(Column)`\n background: #4e4a4e;\n padding-top: 5px;\n margin-bottom: 20px;\n display: flex;\n justify-content: space-evenly;\n`;\n\nconst TitleContainer = styled.div`\n background: #4e4a4e;\n width: 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\nconst Thumbnail = styled.img`\n color: white;\n z-index: 22;\n font-size: 10px;\n width: 64px;\n margin-right: 0.5rem;\n`;\n","import { IQuest } from '@rpg-engine/shared';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { DraggableContainer } from './DraggableContainer';\nimport { RPGUIContainerTypes } from './RPGUIContainer';\n\nexport interface IQuestListProps {\n quests?: IQuest[];\n onClose: () => void;\n}\n\nexport const QuestList: React.FC<IQuestListProps> = ({ quests, onClose }) => {\n return (\n <QuestDraggableContainer\n type={RPGUIContainerTypes.Framed}\n onCloseButton={() => {\n if (onClose) onClose();\n }}\n width=\"520px\"\n >\n <div style={{ width: '100%' }}>\n <Title>Quests</Title>\n <hr className=\"golden\" />\n\n <QuestListContainer>\n {quests ? (\n quests.map((quest, i) => (\n <div className=\"quest-item\" key={i}>\n <span className=\"quest-number\">{i + 1}</span>\n <div className=\"quest-detail\">\n <p className=\"quest-detail__title\">{quest.title}</p>\n <p className=\"quest-detail__description\">\n {quest.description}\n </p>\n </div>\n </div>\n ))\n ) : (\n <NoQuestContainer>\n <p>There are no ongoing quests</p>\n </NoQuestContainer>\n )}\n </QuestListContainer>\n </div>\n </QuestDraggableContainer>\n );\n};\n\nconst QuestDraggableContainer = styled(DraggableContainer)`\n .container-close {\n top: 10px;\n right: 10px;\n }\n\n .quest-title {\n text-align: left;\n margin-left: 44px;\n margin-top: 20px;\n color: yellow;\n }\n\n .quest-desc {\n margin-top: 12px;\n margin-left: 44px;\n }\n\n .rpgui-progress {\n min-width: 80%;\n margin: 0 auto;\n }\n`;\n\nconst Title = styled.h1`\n z-index: 22;\n font-size: 0.6rem;\n color: yellow !important;\n`;\n\nconst QuestListContainer = styled.div`\n margin-top: 20px;\n margin-bottom: 40px;\n overflow-y: auto;\n max-height: 400px;\n\n .quest-item {\n display: flex;\n align-items: flex-start;\n margin-bottom: 12px;\n }\n\n .quest-number {\n border-radius: 50%;\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 16px;\n background-color: brown;\n flex-shrink: 0;\n }\n\n .quest-number.completed {\n background-color: yellow;\n }\n\n p {\n margin: 0;\n }\n\n .quest-detail__title {\n color: yellow;\n }\n\n .quest-detail__description {\n margin-top: 5px;\n }\n .Noquest-detail__description {\n margin-top: 5px;\n margin: auto;\n }\n`;\nconst NoQuestContainer = styled.div`\n text-align: center;\n p {\n margin-top: 5px;\n }\n`;\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 { ErrorBoundary } from './Item/Inventory/ErrorBoundary';\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 atlasJSON: any;\n atlasIMG: any;\n}\n\nexport const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({\n bgColor,\n skillName,\n level,\n skillPoints,\n texturePath,\n showSkillPoints = true,\n atlasIMG,\n atlasJSON,\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 <ErrorBoundary>\n <SpriteFromAtlas\n atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\n spriteKey={texturePath}\n imgScale={1}\n grayScale\n opacity={0.5}\n />\n </ErrorBoundary>\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 atlasJSON: any;\n atlasIMG: any;\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: 'ranged-weapons/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 atlasIMG,\n atlasJSON,\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 atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\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 atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\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 </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","import { ITradeResponseItem } from '@rpg-engine/shared';\nimport capitalize from 'lodash/capitalize';\nimport React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { colors } from '../../constants/uiColors';\nimport SelectArrow from '../Arrow/SelectArrow';\nimport { Ellipsis } from '../shared/Ellipsis';\nimport { SpriteFromAtlas } from '../shared/SpriteFromAtlas';\nexport interface ITradeComponentProps {\n traderItem: ITradeResponseItem;\n updateChartTotals: (traderItem: ITradeResponseItem) => void;\n atlasJSON: any;\n atlasIMG: any;\n}\n\nexport const TradingItemRow: React.FC<ITradeComponentProps> = ({\n atlasIMG,\n atlasJSON,\n updateChartTotals,\n traderItem,\n}) => {\n const [itemQuantity, setItemQuantity] = useState(0);\n\n const onLeftClick = () => {\n if (itemQuantity > 0) {\n const newQuantity = itemQuantity - 1;\n setItemQuantity(newQuantity);\n updateChartTotals({\n key: traderItem.key,\n qty: newQuantity,\n price: traderItem.price,\n texturePath: traderItem.texturePath,\n name: traderItem.name,\n });\n }\n };\n const onRightClick = () => {\n if (itemQuantity < 999) {\n const newQuantity = itemQuantity + 1;\n setItemQuantity(newQuantity);\n updateChartTotals({\n key: traderItem.key,\n qty: newQuantity,\n price: traderItem.price,\n texturePath: traderItem.texturePath,\n name: traderItem.name,\n });\n }\n };\n\n return (\n <ItemWrapper>\n <ItemIconContainer>\n <SpriteContainer>\n <SpriteFromAtlas\n atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\n spriteKey={traderItem.texturePath}\n imgScale={2.5}\n />\n </SpriteContainer>\n </ItemIconContainer>\n <ItemNameContainer>\n <NameValue>\n <Ellipsis maxLines={1} maxWidth={250}>\n {capitalize(traderItem.name)}\n </Ellipsis>\n <p>${traderItem.price}</p>\n </NameValue>\n </ItemNameContainer>\n\n <QuantityContainer>\n <SelectArrow\n size={32}\n className=\"arrow-selector\"\n direction=\"left\"\n onClick={onLeftClick}\n onTouchStart={onLeftClick}\n ></SelectArrow>\n <QuantityDisplay>\n <TextOverlay>\n <Item>{itemQuantity}</Item>\n </TextOverlay>\n </QuantityDisplay>\n <SelectArrow\n size={32}\n className=\"arrow-selector\"\n direction=\"right\"\n onClick={onRightClick}\n onTouchStart={onRightClick}\n ></SelectArrow>\n </QuantityContainer>\n </ItemWrapper>\n );\n};\n\nconst ItemWrapper = styled.div`\n width: 100%;\n margin: auto;\n display: flex;\n justify-content: space-between;\n margin-bottom: 1rem;\n\n &:hover {\n background-color: ${colors.darkGrey};\n }\n padding: 0.5rem;\n`;\n\nconst ItemNameContainer = styled.div`\n flex: 60%;\n`;\n\nconst ItemIconContainer = styled.div`\n display: flex;\n justify-content: flex-start;\n align-items: center;\n\n flex: 0 0 58px;\n`;\n\nconst SpriteContainer = styled.div`\n position: relative;\n top: -0.5rem;\n left: 0.5rem;\n`;\n\nconst NameValue = styled.div`\n p {\n font-size: 0.75rem;\n margin: 0;\n }\n`;\n\nconst Item = styled.span`\n font-size: 1rem;\n color: white;\n text-align: center;\n z-index: 1;\n\n width: 100%;\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 QuantityContainer = styled.div<IContainerProps>`\n position: relative;\n display: flex;\n\n min-width: 100px;\n width: 40%;\n justify-content: center;\n align-items: center;\n\n flex: 20%;\n`;\n\nconst QuantityDisplay = styled.div`\n font-size: 0.8rem;\n`;\n","import { ITradeResponseItem, TradeTransactionType } from '@rpg-engine/shared';\nimport React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { Button, ButtonTypes } from '../Button';\nimport { DraggableContainer } from '../DraggableContainer';\nimport { RPGUIContainerTypes } from '../RPGUIContainer';\nimport { TradingItemRow } from './TradingItemRow';\nexport interface ITrandingMenu {\n traderItems: ITradeResponseItem[];\n onClose: () => void;\n onConfirm: () => void;\n type: TradeTransactionType;\n atlasJSON: any;\n atlasIMG: any;\n characterAvailableGold: number;\n}\n\nexport const TradingMenu: React.FC<ITrandingMenu> = ({\n traderItems,\n onClose,\n type,\n atlasJSON,\n atlasIMG,\n characterAvailableGold,\n onConfirm,\n}) => {\n const [sum, setSum] = useState(0);\n let newSumArray = 0;\n const updateChartTotals = (item: ITradeResponseItem) => {\n const itemIndex = traderItems.findIndex(\n itemArray => itemArray.key === item.key\n );\n traderItems[itemIndex] = item;\n\n traderItems.forEach(item => {\n if (item.qty) newSumArray += item.qty * item.price;\n setSum(newSumArray);\n });\n };\n\n const Capitalize = (word: string) => {\n return word[0].toUpperCase() + word.substring(1);\n };\n\n return (\n <DraggableContainer\n type={RPGUIContainerTypes.Framed}\n onCloseButton={() => {\n if (onClose) onClose();\n }}\n width=\"500px\"\n cancelDrag=\".equipment-container-body .arrow-selector\"\n >\n <>\n <div style={{ width: '100%' }}>\n <Title>{Capitalize(type)} Menu</Title>\n <hr className=\"golden\" />\n </div>\n <TradingComponentScrollWrapper>\n {traderItems.map((tradeItem, index) => (\n <ItemWrapper key={`${tradeItem.key}_${index}`}>\n <TradingItemRow\n atlasIMG={atlasIMG}\n atlasJSON={atlasJSON}\n updateChartTotals={updateChartTotals}\n traderItem={tradeItem}\n />\n </ItemWrapper>\n ))}\n </TradingComponentScrollWrapper>\n <GoldWrapper>\n <p>Available Gold:</p>\n <p>${characterAvailableGold}</p>\n </GoldWrapper>\n <TotalWrapper>\n <p>Total:</p>\n <p>${sum}</p>\n </TotalWrapper>\n {sum > characterAvailableGold ? (\n <AlertWrapper>\n <p> Sorry, not enough money.</p>\n </AlertWrapper>\n ) : (\n <GoldWrapper>\n <p>Final Gold:</p>\n <p>${characterAvailableGold - sum}</p>\n </GoldWrapper>\n )}\n\n <ButtonWrapper>\n <Button\n buttonType={ButtonTypes.RPGUIButton}\n disabled={sum > characterAvailableGold}\n onClick={() => onConfirm()}\n >\n Confirm\n </Button>\n <Button\n buttonType={ButtonTypes.RPGUIButton}\n onClick={() => onClose()}\n >\n Cancel\n </Button>\n </ButtonWrapper>\n </>\n </DraggableContainer>\n );\n};\n\nconst Title = styled.h1`\n z-index: 22;\n font-size: 0.6rem;\n color: yellow !important;\n`;\n\nconst TradingComponentScrollWrapper = styled.div`\n overflow-y: scroll;\n height: 390px;\n width: 100%;\n margin-top: 1rem;\n`;\n\nconst ItemWrapper = styled.div`\n margin: auto;\n display: flex;\n justify-content: space-between;\n`;\n\nconst TotalWrapper = styled.div`\n margin-top: 1rem;\n display: flex;\n justify-content: space-between;\n height: 20px;\n p {\n color: white !important;\n }\n width: 100%;\n margin-left: 0.8rem;\n`;\n\nconst GoldWrapper = styled.div`\n margin-top: 1rem;\n display: flex;\n justify-content: space-between;\n height: 20px;\n p {\n color: yellow !important;\n }\n width: 100%;\n margin-left: 0.8rem;\n`;\n\nconst AlertWrapper = styled.div`\n margin-top: 1rem;\n display: flex;\n width: 100%;\n justify-content: center;\n height: 20px;\n p {\n color: red !important;\n }\n`;\n\nconst ButtonWrapper = styled.div`\n display: flex;\n justify-content: space-around;\n padding-top: 20px;\n width: 100%;\n margin-top: 1rem;\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","SpriteFromAtlas","_ref$width","width","_ref$height","height","_ref$imgScale","imgScale","_ref$grayScale","grayScale","_ref$opacity","opacity","Container","GRID_WIDTH","GRID_HEIGHT","hasHover","onClick","style","containerStyle","ImgSprite","atlasIMG","frame","atlasJSON","frames","spriteKey","scale","imgStyle","div","w","h","x","y","ErrorBoundary","args","_this","state","hasError","getDerivedStateFromError","_","_proto","componentDidCatch","error","errorInfo","console","render","this","Component","SelectArrow","direction","size","LeftArrow","RightArrow","span","Ellipsis","maxWidth","fontSize","maxLines","PropertySelect","item","availableProperties","onChange","useState","currentIndex","setCurrentIndex","propertiesLength","length","onLeftClick","index","onRightClick","useEffect","JSON","stringify","TextOverlay","Item","name","onTouchStart","Input","RPGUIContainer","type","Column","flex","flexWrap","alignItems","justifyContent","CloseButton","CustomInput","CustomContainer","Form","form","MessageText","p","useOutsideClick","ref","id","handleClickOutside","event","current","contains","target","CustomEvent","detail","document","dispatchEvent","addEventListener","removeEventListener","NPCDialogType","DraggableContainer","_ref$type","FramedGold","onCloseButton","title","imgSrc","_ref$imgWidth","imgWidth","cancelDrag","onPositionChange","onOutsideClick","draggableRef","useRef","_e","Draggable","cancel","onDrag","data","TitleContainer","Title","Icon","src","h1","img","_RPGUI","RPGUI","RelativeListMenu","options","onSelected","_ref$fontSize","overflow","map","params","ListElement","key","text","li","ItemTooltip","label","generateContextMenuListOptions","actionsByTypeList","action","ItemSocketEventsDisplayLabels","EquipmentSlotSpriteByType","Neck","LeftHand","Ring","Head","Torso","Legs","Feet","Inventory","RightHand","Accessory","ItemSlot","observer","slotIndex","containerType","itemContainerType","slotSpriteMask","onMouseOver","onMouseOut","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","getStackInfo","itemId","stackQty","ItemQty","left","quantity","clientX","clientY","onMouseEnter","onMouseLeave","optionId","itemToRender","texturePath","allowedEquipSlotType","_itemToRender$allowed","includes","element","push","_id","getItemTextureKeyPath","stackInfo","uuidv4","renderEquipment","renderItem","onRenderSlot","EquipmentSetContainer","EquipmentColumn","DynamicText","onFinish","onStart","textState","setTextState","i","interval","setInterval","substring","clearInterval","TextContainer","NPCDialogText","onClose","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","ImgSide","NPCDialog","imagePath","_ref$isQuestionDialog","isQuestionDialog","showGoNextIndicator","setShowGoNextIndicator","TextAndThumbnail","ThumbnailContainer","NPCThumbnail","aliceDefaultThumbnail","PressSpaceIndicator","right","TextOnly","pressSpaceGif","RangeSliderType","NPCMultiDialog","textAndTypeArray","slide","setSlide","_textAndTypeArray$sli","imageSide","BackgroundContainer","imgPath","DialogContainer","SlotsContainer","Framed","ItemsContainer","ProgressBarText","minWidth","percentageWidth","QuestDraggableContainer","QuestContainer","QuestsContainer","Content","QuestSplitDiv","QuestColumn","Thumbnail","QuestListContainer","NoQuestContainer","input","SimpleProgressBar","_ref$bgColor","bgColor","_ref$margin","margin","ProgressBarContainer","BackgroundBar","Progress","value","SkillProgressBar","skillName","level","skillPoints","_ref$showSkillPoints","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","TradingItemRow","updateChartTotals","traderItem","itemQuantity","setItemQuantity","newQuantity","qty","price","ItemWrapper","ItemIconContainer","ItemNameContainer","NameValue","capitalize","QuantityContainer","QuantityDisplay","TradingComponentScrollWrapper","TotalWrapper","GoldWrapper","AlertWrapper","ButtonWrapper","availableCharacters","propertySelectValues","textureKey","selectedValue","setSelectedValue","selectedSpriteKey","setSelectedSpriteKey","entitiesJSON","display","paddingBottom","chatMessages","onSendChatMessage","message","setMessage","scrollChatToBottom","scrollingElement","querySelector","scrollTop","scrollHeight","FramedGrey","fallback","emitter","createdAt","dayjs","Date","format","onRenderMessageLines","onRenderChatMessages","onSubmit","preventDefault","autoComplete","RPGUIButton","items","selectedValues","forEach","generateSelectedValuesList","setSelectedValues","checked","dropdownId","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","backgroundImgPath","fullCoverBackground","setImage","fullImg","handleClick","slots","slotQty","_itemContainer$slots","onRenderSlots","max","_ref$displayText","displayText","_ref$percentageWidth","_ref$minWidth","calculatePercentageValue","quests","buttons","onChangeQuest","questsLength","thumbnail","thumbnailDefault","description","npcId","quest","valueMin","valueMax","sliderId","onMouseUp","rpguiSlider","Number","Slider","GoldSlider","min","skill","onRenderSkillCategory","category","skillCategory","skillCategoryColor","output","Object","entries","skillDetails","Math","round","skillPointsToNextLevel","experience","xpToNextLevel","word","traderItems","characterAvailableGold","onConfirm","sum","setSum","newSumArray","itemIndex","itemArray","toUpperCase","tradeItem"],"mappings":"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"}