@rpg-engine/long-bow 0.1.28 → 0.1.29
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.
- package/dist/components/Button.d.ts +10 -0
- package/dist/{NPCDialog → components/NPCDialog}/NPCDialog.d.ts +2 -2
- package/dist/{NPCDialog → components/NPCDialog}/NPCDialogText.d.ts +0 -0
- package/dist/{NPCDialog → components/NPCDialog}/QuestionDialog/QuestionDialog.d.ts +0 -0
- package/dist/components/RPGUIContainer.d.ts +14 -0
- package/dist/{RPGUI → components}/RPGUIRoot.d.ts +0 -0
- package/dist/{RPGUI/RPGUISlider.d.ts → components/RangeSlider.d.ts} +4 -4
- package/dist/{typography → components/typography}/DynamicText.d.ts +0 -0
- package/dist/index.d.ts +7 -6
- package/dist/long-bow.cjs.development.js +88 -47
- 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 +90 -47
- package/dist/long-bow.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Button.tsx +26 -0
- package/src/components/ListMenu.tsx +1 -1
- package/src/{NPCDialog → components/NPCDialog}/NPCDialog.tsx +10 -6
- package/src/{NPCDialog → components/NPCDialog}/NPCDialogText.tsx +1 -1
- package/src/{NPCDialog → components/NPCDialog}/QuestionDialog/QuestionDialog.tsx +1 -1
- package/src/{NPCDialog → components/NPCDialog}/img/npcDialog/npcThumbnails/alice.png +0 -0
- package/src/{NPCDialog → components/NPCDialog}/img/space.gif +0 -0
- package/src/{RPGUI → components}/RPGUIContainer.tsx +10 -3
- package/src/{RPGUI → components}/RPGUIRoot.tsx +0 -0
- package/src/{RPGUI/RPGUISlider.tsx → components/RangeSlider.tsx} +7 -8
- package/src/{typography → components/typography}/DynamicText.tsx +0 -0
- package/src/index.tsx +7 -6
- package/dist/RPGUI/RPGUIContainer.d.ts +0 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"long-bow.cjs.production.min.js","sources":["../src/RPGUI/RPGUIRoot.tsx","../src/components/ListMenu.tsx","../src/hooks/useEventListener.ts","../src/RPGUI/RPGUIContainer.tsx","../src/NPCDialog/img/npcDialog/npcThumbnails/alice.png","../src/NPCDialog/img/space.gif","../src/libs/StringHelpers.ts","../src/NPCDialog/NPCDialog.tsx","../src/typography/DynamicText.tsx","../src/NPCDialog/NPCDialogText.tsx","../src/NPCDialog/QuestionDialog/QuestionDialog.tsx","../src/RPGUI/RPGUISlider.tsx"],"sourcesContent":["import React from 'react';\nimport 'rpgui/rpgui.min.css';\nimport 'rpgui/rpgui.min.js';\n\ninterface IProps {\n children: React.ReactNode;\n}\n\n//@ts-ignore\nexport const _RPGUI = RPGUI;\n\nexport const RPGUIRoot: React.FC<IProps> = ({ children }) => {\n return <div className=\"rpgui-content\">{children}</div>;\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport { RPGUIRoot } from '../RPGUI/RPGUIRoot';\n\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}\n\nexport const ListMenu: React.FC<IListMenuProps> = ({\n options,\n onSelected,\n x,\n y,\n}) => {\n return (\n <RPGUIRoot>\n <Container x={x} y={y}>\n <ul className=\"rpgui-list-imp\" style={{ overflow: 'hidden' }}>\n {options.map((params) => (\n <ListElement\n key={params.text}\n onClick={() => {\n onSelected(params.id);\n }}\n >\n {params.text}\n </ListElement>\n ))}\n </ul>\n </Container>\n </RPGUIRoot>\n );\n};\n\ninterface IContainerProps {\n x?: number;\n y?: 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\nconst ListElement = styled.li`\n margin-right: 0.5rem;\n`;\n","import React from 'react';\n\n//@ts-ignore\nexport const useEventListener = (type, handler, el = window) => {\n const savedHandler = React.useRef();\n\n React.useEffect(() => {\n savedHandler.current = handler;\n }, [handler]);\n\n React.useEffect(() => {\n //@ts-ignore\n const listener = (e) => savedHandler.current(e);\n\n el.addEventListener(type, listener);\n\n return () => {\n el.removeEventListener(type, listener);\n };\n }, [type, el]);\n};\n","import React from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n type: 'framed' | 'framed-golden' | 'framed-golden-2' | 'framed-grey';\n children: React.ReactNode;\n width?: string;\n height?: string;\n}\n\nexport const RPGUIContainer: React.FC<IProps> = ({\n children,\n type,\n width = '50%',\n height,\n}) => {\n return (\n <Container\n width={width}\n height={height || 'auto'}\n className={`rpgui-container ${type}`}\n >\n {children}\n </Container>\n );\n};\n\ninterface IContainerProps {\n width: string;\n height: string;\n}\n\nconst Container = styled.div<IContainerProps>`\n height: ${(props) => props.height};\n width: ${({ width }) => width};\n display: flex;\n flex-wrap: wrap;\n`;\n","const img = require('./alice.png'); export default img;","const img = require('./space.gif'); export default img;","export const chunkString = (str: string, length: number) => {\n return str.match(new RegExp('.{1,' + length + '}', 'g'));\n};\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { IQuestionDialog, IQuestionDialogAnswer } from '..';\nimport { RPGUIContainer } from '../RPGUI/RPGUIContainer';\nimport { RPGUIRoot } from '../RPGUI/RPGUIRoot';\nimport aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';\nimport pressSpaceGif from './img/space.gif';\nimport { NPCDialogText } from './NPCDialogText';\nimport { QuestionDialog } from './QuestionDialog/QuestionDialog';\nexport enum NPCDialogType {\n TextOnly = 'TextOnly',\n TextAndThumbnail = 'TextAndThumbnail',\n}\n\nexport interface INPCDialogProps {\n text?: string;\n type: NPCDialogType;\n imagePath?: string;\n onClose?: () => void;\n isQuestionDialog: boolean;\n answers?: IQuestionDialogAnswer[];\n questions?: IQuestionDialog[];\n}\n\nexport const NPCDialog: React.FC<INPCDialogProps> = ({\n text,\n type,\n onClose,\n imagePath,\n isQuestionDialog = false,\n questions,\n answers,\n}) => {\n const [showGoNextIndicator, setShowGoNextIndicator] =\n useState<boolean>(false);\n\n return (\n <RPGUIRoot>\n <RPGUIContainer\n type=\"framed-golden\"\n width={isQuestionDialog ? '600px' : '50%'}\n height={'180px'}\n >\n {isQuestionDialog && questions && answers ? (\n <>\n <TextContainer\n flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}\n >\n <QuestionDialog\n questions={questions}\n answers={answers}\n onClose={() => {\n if (onClose) {\n onClose();\n }\n }}\n />\n </TextContainer>\n {type === NPCDialogType.TextAndThumbnail && (\n <ThumbnailContainer>\n <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />\n </ThumbnailContainer>\n )}\n </>\n ) : (\n <>\n <Container>\n <TextContainer\n flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}\n >\n <NPCDialogText\n onStartStep={() => setShowGoNextIndicator(false)}\n onEndStep={() => setShowGoNextIndicator(true)}\n text={text || 'No text provided.'}\n onClose={() => {\n if (onClose) {\n onClose();\n }\n }}\n />\n </TextContainer>\n {type === NPCDialogType.TextAndThumbnail && (\n <ThumbnailContainer>\n <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />\n </ThumbnailContainer>\n )}\n </Container>\n {showGoNextIndicator && (\n <PressSpaceIndicator\n right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}\n src={pressSpaceGif}\n />\n )}\n </>\n )}\n </RPGUIContainer>\n </RPGUIRoot>\n );\n};\n\nconst Container = styled.div`\n display: flex;\n width: 100%;\n height: 100%;\n\n box-sizing: border-box;\n justify-content: center;\n align-items: flex-start;\n position: relative;\n`;\n\ninterface ITextContainerProps {\n flex: string;\n}\n\nconst TextContainer = styled.div<ITextContainerProps>`\n flex: ${({ flex }) => flex} 0 0;\n width: 355px;\n`;\n\nconst ThumbnailContainer = styled.div`\n flex: 30% 0 0;\n display: flex;\n justify-content: flex-end;\n`;\n\nconst NPCThumbnail = styled.img`\n image-rendering: pixelated;\n height: 128px;\n width: 128px;\n`;\n\ninterface IPressSpaceIndicatorProps {\n right: string;\n}\n\nconst PressSpaceIndicator = styled.img<IPressSpaceIndicatorProps>`\n position: absolute;\n right: ${({ right }) => right};\n bottom: 1rem;\n height: 20.7px;\n image-rendering: -webkit-optimize-contrast;\n`;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n text: string;\n onFinish?: () => void;\n onStart?: () => void;\n}\n\nexport const DynamicText: React.FC<IProps> = ({ text, onFinish, onStart }) => {\n const [textState, setTextState] = useState<string>('');\n\n useEffect(() => {\n let i = 0;\n const interval = setInterval(() => {\n // on every interval, show one more character\n\n if (i === 0) {\n if (onStart) {\n onStart();\n }\n }\n\n if (i < text.length) {\n setTextState(text.substring(0, i + 1));\n i++;\n } else {\n clearInterval(interval);\n if (onFinish) {\n onFinish();\n }\n }\n }, 50);\n\n return () => {\n clearInterval(interval);\n };\n }, [text]);\n\n return <TextContainer>{textState}</TextContainer>;\n};\n\nconst TextContainer = styled.p`\n font-size: 0.7rem !important;\n color: white;\n text-shadow: 1px 1px 0px #000000;\n letter-spacing: 1.2px;\n word-break: normal;\n`;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { chunkString } from '../libs/StringHelpers';\nimport { DynamicText } from '../typography/DynamicText';\n\ninterface IProps {\n text: string;\n onClose: () => void;\n onEndStep: () => void;\n onStartStep: () => void;\n}\n\nexport const NPCDialogText: React.FC<IProps> = ({\n text,\n onClose,\n onEndStep,\n onStartStep,\n}) => {\n const textChunks = chunkString(text, 85);\n\n const [chunkIndex, setChunkIndex] = useState<number>(0);\n\n const onHandleSpacePress = (event: KeyboardEvent) => {\n if (event.code === 'Space') {\n const hasNextChunk = textChunks?.[chunkIndex + 1] || false;\n\n if (hasNextChunk) {\n setChunkIndex((prev) => prev + 1);\n } else {\n // if there's no more text chunks, close the dialog\n onClose();\n }\n }\n };\n\n useEffect(() => {\n document.addEventListener('keydown', onHandleSpacePress);\n\n return () => document.removeEventListener('keydown', onHandleSpacePress);\n }, [chunkIndex]);\n\n return (\n <Container>\n <DynamicText\n text={textChunks?.[chunkIndex] || ''}\n onFinish={onEndStep}\n onStart={onStartStep}\n />\n </Container>\n );\n};\n\nconst Container = styled.div``;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { DynamicText } from '../../typography/DynamicText';\n\nexport interface IQuestionDialogAnswer {\n id: number;\n text: string;\n nextQuestionId?: number;\n}\n\nexport interface IQuestionDialog {\n id: number;\n text: string;\n answerIds?: number[];\n}\n\nexport interface IProps {\n questions: IQuestionDialog[];\n answers: IQuestionDialogAnswer[];\n onClose: () => void;\n}\n\nexport const QuestionDialog: React.FC<IProps> = ({\n questions,\n answers,\n onClose,\n}) => {\n const [currentQuestion, setCurrentQuestion] = useState(questions[0]);\n\n const [canShowAnswers, setCanShowAnswers] = useState<boolean>(false);\n\n const onGetFirstAnswer = () => {\n if (!currentQuestion.answerIds || currentQuestion.answerIds.length === 0) {\n return null;\n }\n\n const firstAnswerId = currentQuestion.answerIds![0];\n\n return answers.find((answer) => answer.id === firstAnswerId);\n };\n\n const [currentAnswer, setCurrentAnswer] =\n useState<IQuestionDialogAnswer | null>(onGetFirstAnswer()!);\n\n useEffect(() => {\n setCurrentAnswer(onGetFirstAnswer()!);\n }, [currentQuestion]);\n\n const onGetAnswers = (answerIds: number[]) => {\n return answerIds.map((answerId: number) =>\n answers.find((answer) => answer.id === answerId)\n );\n };\n\n const onKeyPress = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowDown':\n // select next answer, if any.\n // if no next answer, select first answer\n // const nextAnswer = onGetAnswers(currentQuestion.answerIds!).find(\n // (answer) => answer?.id === currentAnswer!.id + 1\n // );\n\n const nextAnswerIndex = onGetAnswers(\n currentQuestion.answerIds!\n ).findIndex((answer) => answer?.id === currentAnswer!.id + 1);\n\n const nextAnswerID = currentQuestion.answerIds![nextAnswerIndex];\n\n // console.log(nextAnswerIndex);\n\n const nextAnswer = onGetAnswers(currentQuestion.answerIds!).find(\n (answer) => answer?.id === nextAnswerID\n );\n\n setCurrentAnswer(nextAnswer || onGetFirstAnswer()!);\n\n break;\n case 'ArrowUp':\n // select previous answer, if any.\n // if no previous answer, select last answer\n\n const previousAnswerIndex = onGetAnswers(\n currentQuestion.answerIds!\n ).findIndex((answer) => answer?.id === currentAnswer!.id - 1);\n\n const previousAnswerID =\n currentQuestion.answerIds &&\n currentQuestion.answerIds[previousAnswerIndex];\n\n const previousAnswer = onGetAnswers(currentQuestion.answerIds!).find(\n (answer) => answer?.id === previousAnswerID\n );\n\n if (previousAnswer) {\n setCurrentAnswer(previousAnswer);\n } else {\n setCurrentAnswer(onGetAnswers(currentQuestion.answerIds!).pop()!);\n }\n\n break;\n case 'Enter':\n setCanShowAnswers(false);\n\n if (!currentAnswer?.nextQuestionId) {\n onClose();\n return;\n } else {\n setCurrentQuestion(\n questions.find(\n (question) => question.id === currentAnswer!.nextQuestionId\n )!\n );\n }\n\n break;\n }\n };\n useEventListener('keydown', onKeyPress);\n\n const onAnswerClick = (answer: IQuestionDialogAnswer) => {\n setCanShowAnswers(false);\n if (answer.nextQuestionId) {\n // if there is a next question, go to it\n setCurrentQuestion(\n questions.find((question) => question.id === answer.nextQuestionId)!\n );\n } else {\n // else, finish dialog!\n onClose();\n }\n };\n\n const onRenderCurrentAnswers = () => {\n const answerIds = currentQuestion.answerIds;\n if (!answerIds) {\n return null;\n }\n\n const answers = onGetAnswers(answerIds);\n\n if (!answers) {\n return null;\n }\n\n return answers.map((answer) => {\n const isSelected = currentAnswer?.id === answer?.id;\n const selectedColor = isSelected ? 'yellow' : 'white';\n\n if (answer) {\n return (\n <AnswerRow key={`answer_${answer.id}`}>\n <AnswerSelectedIcon color={selectedColor}>\n {isSelected ? 'X' : null}\n </AnswerSelectedIcon>\n\n <Answer\n key={answer.id}\n onClick={() => onAnswerClick(answer)}\n color={selectedColor}\n >\n {answer.text}\n </Answer>\n </AnswerRow>\n );\n }\n\n return null;\n });\n };\n\n return (\n <Container>\n <QuestionContainer>\n <DynamicText\n text={currentQuestion.text}\n onStart={() => setCanShowAnswers(false)}\n onFinish={() => setCanShowAnswers(true)}\n />\n </QuestionContainer>\n\n {canShowAnswers && (\n <AnswersContainer>{onRenderCurrentAnswers()}</AnswersContainer>\n )}\n </Container>\n );\n};\n\nconst Container = styled.div`\n display: flex;\n\n word-break: break-all;\n\n box-sizing: border-box;\n justify-content: flex-start;\n align-items: flex-start;\n flex-wrap: wrap;\n`;\n\nconst QuestionContainer = styled.div`\n flex: 100%;\n width: 100%;\n`;\n\nconst AnswersContainer = styled.div`\n flex: 100%;\n`;\n\ninterface IAnswerProps {\n color: string;\n}\n\nconst Answer = styled.p<IAnswerProps>`\n flex: auto;\n color: ${(props) => props.color} !important;\n font-size: 0.65rem !important;\n background: inherit;\n border: none;\n`;\n\nconst AnswerSelectedIcon = styled.span<IAnswerProps>`\n flex: 5% 0 0;\n color: ${(props) => props.color} !important;\n`;\n\nconst AnswerRow = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n margin-bottom: 0.5rem;\n height: 22px;\n\n p {\n line-height: unset;\n margin-top: 0;\n margin-bottom: 0rem;\n }\n`;\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport { useEventListener } from '../hooks/useEventListener';\nimport { RPGUIRoot, _RPGUI } from './RPGUIRoot';\n\nexport enum SliderType {\n Slider = 'rpgui-slider',\n GoldSlider = 'rpgui-slider golden',\n}\n\nexport interface ISliderProps {\n type: SliderType;\n valueMin: number;\n valueMax: number;\n width: string;\n\n onChange: (value: number) => void;\n}\n\nexport const RPGUISlider: React.FC<ISliderProps> = ({\n type,\n valueMin,\n valueMax,\n width,\n onChange,\n}) => {\n const sliderId = uuidv4();\n\n const [wasMouseDownFirst, setWasMouseDownFirst] = useState<boolean>(false);\n\n useEventListener('mouseup', () => {\n if (wasMouseDownFirst) {\n onHandleMouseUp();\n }\n setWasMouseDownFirst(false);\n });\n\n const onHandleMouseUp = () => {\n const rpguiSlider = document.getElementById(`rpgui-slider-${sliderId}`);\n const value = _RPGUI.get_value(rpguiSlider);\n\n onChange(Number(value));\n };\n\n return (\n <RPGUIRoot>\n <div\n onMouseUp={onHandleMouseUp}\n onMouseDown={() => setWasMouseDownFirst(true)}\n >\n <Input\n className={\n type === SliderType.Slider\n ? SliderType.Slider\n : SliderType.GoldSlider\n }\n type=\"range\"\n style={{ width: width }}\n min={valueMin}\n max={valueMax}\n id={`rpgui-slider-${sliderId}`}\n />\n </div>\n </RPGUIRoot>\n );\n};\n\nconst Input = styled.input`\n opacity: 0;\n`;\n"],"names":["_RPGUI","RPGUI","RPGUIRoot","React","className","children","Container","styled","div","props","y","x","ListElement","li","useEventListener","type","handler","el","window","savedHandler","useRef","useEffect","current","listener","e","addEventListener","removeEventListener","RPGUIContainer","width","height","img","require","NPCDialogType","DynamicText","text","onFinish","onStart","useState","textState","setTextState","i","interval","setInterval","length","substring","clearInterval","TextContainer","p","NPCDialogText","onClose","onEndStep","onStartStep","textChunks","match","RegExp","chunkIndex","setChunkIndex","onHandleSpacePress","event","code","prev","document","QuestionDialog","questions","answers","currentQuestion","setCurrentQuestion","canShowAnswers","setCanShowAnswers","onGetFirstAnswer","answerIds","firstAnswerId","find","answer","id","currentAnswer","setCurrentAnswer","onGetAnswers","map","answerId","key","nextAnswerIndex","findIndex","nextAnswerID","nextAnswer","previousAnswerIndex","previousAnswerID","previousAnswer","pop","nextQuestionId","question","QuestionContainer","AnswersContainer","isSelected","selectedColor","AnswerRow","AnswerSelectedIcon","color","Answer","onClick","onAnswerClick","onRenderCurrentAnswers","span","SliderType","flex","ThumbnailContainer","NPCThumbnail","PressSpaceIndicator","right","Input","input","onSelected","style","overflow","options","params","imagePath","isQuestionDialog","showGoNextIndicator","setShowGoNextIndicator","TextAndThumbnail","src","aliceDefaultThumbnail","TextOnly","pressSpaceGif","valueMin","valueMax","onChange","sliderId","uuidv4","wasMouseDownFirst","setWasMouseDownFirst","onHandleMouseUp","rpguiSlider","getElementById","value","get_value","Number","onMouseUp","onMouseDown","Slider","GoldSlider","min","max"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"long-bow.cjs.production.min.js","sources":["../src/components/Button.tsx","../src/components/RPGUIRoot.tsx","../src/components/RPGUIContainer.tsx","../src/components/ListMenu.tsx","../src/components/NPCDialog/img/npcDialog/npcThumbnails/alice.png","../src/components/NPCDialog/img/space.gif","../src/libs/StringHelpers.ts","../src/components/NPCDialog/NPCDialog.tsx","../src/components/typography/DynamicText.tsx","../src/components/NPCDialog/NPCDialogText.tsx","../src/hooks/useEventListener.ts","../src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx","../src/components/RangeSlider.tsx"],"sourcesContent":["import React from 'react';\nimport { RPGUIRoot } from './RPGUIRoot';\n\nexport enum IButtonTypes {\n RPGUIButton = 'rpgui-button',\n RPGUIGoldButton = 'rpgui-button golden',\n}\n\nexport interface IButtonsProps {\n children: React.ReactNode;\n type: IButtonTypes;\n}\n\nexport const Button: React.FC<IButtonsProps> = ({\n children,\n type,\n ...props\n}) => {\n return (\n <RPGUIRoot>\n <button className={type} type=\"button\" {...props}>\n <p>{children}</p>\n </button>\n </RPGUIRoot>\n );\n};\n","import React from 'react';\nimport 'rpgui/rpgui.min.css';\nimport 'rpgui/rpgui.min.js';\n\ninterface IProps {\n children: React.ReactNode;\n}\n\n//@ts-ignore\nexport const _RPGUI = RPGUI;\n\nexport const RPGUIRoot: React.FC<IProps> = ({ children }) => {\n return <div className=\"rpgui-content\">{children}</div>;\n};\n","import React from 'react';\nimport styled from 'styled-components';\n\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}\n\nexport const RPGUIContainer: React.FC<IRPGUIContainerProps> = ({\n children,\n type,\n width = '50%',\n height,\n}) => {\n return (\n <Container\n width={width}\n height={height || 'auto'}\n className={`rpgui-container ${type}`}\n >\n {children}\n </Container>\n );\n};\n\ninterface IContainerProps {\n width: string;\n height: string;\n}\n\nconst Container = styled.div<IContainerProps>`\n height: ${(props) => props.height};\n width: ${({ width }) => width};\n display: flex;\n flex-wrap: wrap;\n image-rendering: pixelated;\n`;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { RPGUIRoot } from './RPGUIRoot';\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}\n\nexport const ListMenu: React.FC<IListMenuProps> = ({\n options,\n onSelected,\n x,\n y,\n}) => {\n return (\n <RPGUIRoot>\n <Container x={x} y={y}>\n <ul className=\"rpgui-list-imp\" style={{ overflow: 'hidden' }}>\n {options.map((params) => (\n <ListElement\n key={params.text}\n onClick={() => {\n onSelected(params.id);\n }}\n >\n {params.text}\n </ListElement>\n ))}\n </ul>\n </Container>\n </RPGUIRoot>\n );\n};\n\ninterface IContainerProps {\n x?: number;\n y?: 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\nconst ListElement = styled.li`\n margin-right: 0.5rem;\n`;\n","const img = require('./alice.png'); export default img;","const img = require('./space.gif'); export default img;","export const chunkString = (str: string, length: number) => {\n return str.match(new RegExp('.{1,' + length + '}', 'g'));\n};\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { RPGUIContainer, RPGUIContainerTypes } from '../RPGUIContainer';\nimport { RPGUIRoot } from '../RPGUIRoot';\nimport aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';\nimport pressSpaceGif from './img/space.gif';\nimport { NPCDialogText } from './NPCDialogText';\nimport {\n IQuestionDialog,\n IQuestionDialogAnswer,\n QuestionDialog,\n} from './QuestionDialog/QuestionDialog';\n\nexport enum NPCDialogType {\n TextOnly = 'TextOnly',\n TextAndThumbnail = 'TextAndThumbnail',\n}\n\nexport interface INPCDialogProps {\n text?: string;\n type: NPCDialogType;\n imagePath?: string;\n onClose?: () => void;\n isQuestionDialog?: boolean;\n answers?: IQuestionDialogAnswer[];\n questions?: IQuestionDialog[];\n}\n\nexport const NPCDialog: React.FC<INPCDialogProps> = ({\n text,\n type,\n onClose,\n imagePath,\n isQuestionDialog = false,\n questions,\n answers,\n}) => {\n const [showGoNextIndicator, setShowGoNextIndicator] =\n useState<boolean>(false);\n\n return (\n <RPGUIRoot>\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 </RPGUIRoot>\n );\n};\n\nconst Container = styled.div`\n display: flex;\n width: 100%;\n height: 100%;\n\n box-sizing: border-box;\n justify-content: center;\n align-items: flex-start;\n position: relative;\n`;\n\ninterface ITextContainerProps {\n flex: string;\n}\n\nconst TextContainer = styled.div<ITextContainerProps>`\n flex: ${({ flex }) => flex} 0 0;\n width: 355px;\n`;\n\nconst ThumbnailContainer = styled.div`\n flex: 30% 0 0;\n display: flex;\n justify-content: flex-end;\n`;\n\nconst NPCThumbnail = styled.img`\n image-rendering: pixelated;\n height: 128px;\n width: 128px;\n`;\n\ninterface IPressSpaceIndicatorProps {\n right: string;\n}\n\nconst PressSpaceIndicator = styled.img<IPressSpaceIndicatorProps>`\n position: absolute;\n right: ${({ right }) => right};\n bottom: 1rem;\n height: 20.7px;\n image-rendering: -webkit-optimize-contrast;\n`;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n text: string;\n onFinish?: () => void;\n onStart?: () => void;\n}\n\nexport const DynamicText: React.FC<IProps> = ({ text, onFinish, onStart }) => {\n const [textState, setTextState] = useState<string>('');\n\n useEffect(() => {\n let i = 0;\n const interval = setInterval(() => {\n // on every interval, show one more character\n\n if (i === 0) {\n if (onStart) {\n onStart();\n }\n }\n\n if (i < text.length) {\n setTextState(text.substring(0, i + 1));\n i++;\n } else {\n clearInterval(interval);\n if (onFinish) {\n onFinish();\n }\n }\n }, 50);\n\n return () => {\n clearInterval(interval);\n };\n }, [text]);\n\n return <TextContainer>{textState}</TextContainer>;\n};\n\nconst TextContainer = styled.p`\n font-size: 0.7rem !important;\n color: white;\n text-shadow: 1px 1px 0px #000000;\n letter-spacing: 1.2px;\n word-break: normal;\n`;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { chunkString } from '../../libs/StringHelpers';\nimport { DynamicText } from '../typography/DynamicText';\n\ninterface IProps {\n text: string;\n onClose: () => void;\n onEndStep: () => void;\n onStartStep: () => void;\n}\n\nexport const NPCDialogText: React.FC<IProps> = ({\n text,\n onClose,\n onEndStep,\n onStartStep,\n}) => {\n const textChunks = chunkString(text, 85);\n\n const [chunkIndex, setChunkIndex] = useState<number>(0);\n\n const onHandleSpacePress = (event: KeyboardEvent) => {\n if (event.code === 'Space') {\n const hasNextChunk = textChunks?.[chunkIndex + 1] || false;\n\n if (hasNextChunk) {\n setChunkIndex((prev) => prev + 1);\n } else {\n // if there's no more text chunks, close the dialog\n onClose();\n }\n }\n };\n\n useEffect(() => {\n document.addEventListener('keydown', onHandleSpacePress);\n\n return () => document.removeEventListener('keydown', onHandleSpacePress);\n }, [chunkIndex]);\n\n return (\n <Container>\n <DynamicText\n text={textChunks?.[chunkIndex] || ''}\n onFinish={onEndStep}\n onStart={onStartStep}\n />\n </Container>\n );\n};\n\nconst Container = styled.div``;\n","import React from 'react';\n\n//@ts-ignore\nexport const useEventListener = (type, handler, el = window) => {\n const savedHandler = React.useRef();\n\n React.useEffect(() => {\n savedHandler.current = handler;\n }, [handler]);\n\n React.useEffect(() => {\n //@ts-ignore\n const listener = (e) => savedHandler.current(e);\n\n el.addEventListener(type, listener);\n\n return () => {\n el.removeEventListener(type, listener);\n };\n }, [type, el]);\n};\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { useEventListener } from '../../../hooks/useEventListener';\nimport { DynamicText } from '../../typography/DynamicText';\n\nexport interface IQuestionDialogAnswer {\n id: number;\n text: string;\n nextQuestionId?: number;\n}\n\nexport interface IQuestionDialog {\n id: number;\n text: string;\n answerIds?: number[];\n}\n\nexport interface IProps {\n questions: IQuestionDialog[];\n answers: IQuestionDialogAnswer[];\n onClose: () => void;\n}\n\nexport const QuestionDialog: React.FC<IProps> = ({\n questions,\n answers,\n onClose,\n}) => {\n const [currentQuestion, setCurrentQuestion] = useState(questions[0]);\n\n const [canShowAnswers, setCanShowAnswers] = useState<boolean>(false);\n\n const onGetFirstAnswer = () => {\n if (!currentQuestion.answerIds || currentQuestion.answerIds.length === 0) {\n return null;\n }\n\n const firstAnswerId = currentQuestion.answerIds![0];\n\n return answers.find((answer) => answer.id === firstAnswerId);\n };\n\n const [currentAnswer, setCurrentAnswer] =\n useState<IQuestionDialogAnswer | null>(onGetFirstAnswer()!);\n\n useEffect(() => {\n setCurrentAnswer(onGetFirstAnswer()!);\n }, [currentQuestion]);\n\n const onGetAnswers = (answerIds: number[]) => {\n return answerIds.map((answerId: number) =>\n answers.find((answer) => answer.id === answerId)\n );\n };\n\n const onKeyPress = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowDown':\n // select next answer, if any.\n // if no next answer, select first answer\n // const nextAnswer = onGetAnswers(currentQuestion.answerIds!).find(\n // (answer) => answer?.id === currentAnswer!.id + 1\n // );\n\n const nextAnswerIndex = onGetAnswers(\n currentQuestion.answerIds!\n ).findIndex((answer) => answer?.id === currentAnswer!.id + 1);\n\n const nextAnswerID = currentQuestion.answerIds![nextAnswerIndex];\n\n // console.log(nextAnswerIndex);\n\n const nextAnswer = onGetAnswers(currentQuestion.answerIds!).find(\n (answer) => answer?.id === nextAnswerID\n );\n\n setCurrentAnswer(nextAnswer || onGetFirstAnswer()!);\n\n break;\n case 'ArrowUp':\n // select previous answer, if any.\n // if no previous answer, select last answer\n\n const previousAnswerIndex = onGetAnswers(\n currentQuestion.answerIds!\n ).findIndex((answer) => answer?.id === currentAnswer!.id - 1);\n\n const previousAnswerID =\n currentQuestion.answerIds &&\n currentQuestion.answerIds[previousAnswerIndex];\n\n const previousAnswer = onGetAnswers(currentQuestion.answerIds!).find(\n (answer) => answer?.id === previousAnswerID\n );\n\n if (previousAnswer) {\n setCurrentAnswer(previousAnswer);\n } else {\n setCurrentAnswer(onGetAnswers(currentQuestion.answerIds!).pop()!);\n }\n\n break;\n case 'Enter':\n setCanShowAnswers(false);\n\n if (!currentAnswer?.nextQuestionId) {\n onClose();\n return;\n } else {\n setCurrentQuestion(\n questions.find(\n (question) => question.id === currentAnswer!.nextQuestionId\n )!\n );\n }\n\n break;\n }\n };\n useEventListener('keydown', onKeyPress);\n\n const onAnswerClick = (answer: IQuestionDialogAnswer) => {\n setCanShowAnswers(false);\n if (answer.nextQuestionId) {\n // if there is a next question, go to it\n setCurrentQuestion(\n questions.find((question) => question.id === answer.nextQuestionId)!\n );\n } else {\n // else, finish dialog!\n onClose();\n }\n };\n\n const onRenderCurrentAnswers = () => {\n const answerIds = currentQuestion.answerIds;\n if (!answerIds) {\n return null;\n }\n\n const answers = onGetAnswers(answerIds);\n\n if (!answers) {\n return null;\n }\n\n return answers.map((answer) => {\n const isSelected = currentAnswer?.id === answer?.id;\n const selectedColor = isSelected ? 'yellow' : 'white';\n\n if (answer) {\n return (\n <AnswerRow key={`answer_${answer.id}`}>\n <AnswerSelectedIcon color={selectedColor}>\n {isSelected ? 'X' : null}\n </AnswerSelectedIcon>\n\n <Answer\n key={answer.id}\n onClick={() => onAnswerClick(answer)}\n color={selectedColor}\n >\n {answer.text}\n </Answer>\n </AnswerRow>\n );\n }\n\n return null;\n });\n };\n\n return (\n <Container>\n <QuestionContainer>\n <DynamicText\n text={currentQuestion.text}\n onStart={() => setCanShowAnswers(false)}\n onFinish={() => setCanShowAnswers(true)}\n />\n </QuestionContainer>\n\n {canShowAnswers && (\n <AnswersContainer>{onRenderCurrentAnswers()}</AnswersContainer>\n )}\n </Container>\n );\n};\n\nconst Container = styled.div`\n display: flex;\n\n word-break: break-all;\n\n box-sizing: border-box;\n justify-content: flex-start;\n align-items: flex-start;\n flex-wrap: wrap;\n`;\n\nconst QuestionContainer = styled.div`\n flex: 100%;\n width: 100%;\n`;\n\nconst AnswersContainer = styled.div`\n flex: 100%;\n`;\n\ninterface IAnswerProps {\n color: string;\n}\n\nconst Answer = styled.p<IAnswerProps>`\n flex: auto;\n color: ${(props) => props.color} !important;\n font-size: 0.65rem !important;\n background: inherit;\n border: none;\n`;\n\nconst AnswerSelectedIcon = styled.span<IAnswerProps>`\n flex: 5% 0 0;\n color: ${(props) => props.color} !important;\n`;\n\nconst AnswerRow = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n margin-bottom: 0.5rem;\n height: 22px;\n\n p {\n line-height: unset;\n margin-top: 0;\n margin-bottom: 0rem;\n }\n`;\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport { useEventListener } from '../hooks/useEventListener';\nimport { RPGUIRoot, _RPGUI } from './RPGUIRoot';\n\nexport enum RangeSliderType {\n Slider = 'rpgui-slider',\n GoldSlider = 'rpgui-slider golden',\n}\n\nexport interface IRangeSliderProps {\n type: RangeSliderType;\n valueMin: number;\n valueMax: number;\n width: string;\n onChange: (value: number) => void;\n}\n\nexport const RangeSlider: React.FC<IRangeSliderProps> = ({\n type,\n valueMin,\n valueMax,\n width,\n onChange,\n}) => {\n const sliderId = uuidv4();\n\n const [wasMouseDownFirst, setWasMouseDownFirst] = useState<boolean>(false);\n\n useEventListener('mouseup', () => {\n if (wasMouseDownFirst) {\n onHandleMouseUp();\n }\n setWasMouseDownFirst(false);\n });\n\n const onHandleMouseUp = () => {\n const rpguiSlider = document.getElementById(`rpgui-slider-${sliderId}`);\n const value = _RPGUI.get_value(rpguiSlider);\n\n onChange(Number(value));\n };\n\n return (\n <RPGUIRoot>\n <div\n onMouseUp={onHandleMouseUp}\n onMouseDown={() => setWasMouseDownFirst(true)}\n >\n <Input\n className={\n type === RangeSliderType.Slider\n ? RangeSliderType.Slider\n : RangeSliderType.GoldSlider\n }\n type=\"range\"\n style={{ width: width }}\n min={valueMin}\n max={valueMax}\n id={`rpgui-slider-${sliderId}`}\n />\n </div>\n </RPGUIRoot>\n );\n};\n\nconst Input = styled.input`\n opacity: 0;\n`;\n"],"names":["IButtonTypes","_RPGUI","RPGUI","RPGUIRoot","React","className","children","RPGUIContainerTypes","Container","styled","div","props","y","x","ListElement","li","RPGUIContainer","width","height","type","img","require","NPCDialogType","DynamicText","text","onFinish","onStart","useState","textState","setTextState","useEffect","i","interval","setInterval","length","substring","clearInterval","TextContainer","p","NPCDialogText","onClose","onEndStep","onStartStep","textChunks","match","RegExp","chunkIndex","setChunkIndex","onHandleSpacePress","event","code","prev","document","addEventListener","removeEventListener","useEventListener","handler","el","window","savedHandler","useRef","current","listener","e","QuestionDialog","questions","answers","currentQuestion","setCurrentQuestion","canShowAnswers","setCanShowAnswers","onGetFirstAnswer","answerIds","firstAnswerId","find","answer","id","currentAnswer","setCurrentAnswer","onGetAnswers","map","answerId","key","nextAnswerIndex","findIndex","nextAnswerID","nextAnswer","previousAnswerIndex","previousAnswerID","previousAnswer","pop","nextQuestionId","question","QuestionContainer","AnswersContainer","isSelected","selectedColor","AnswerRow","AnswerSelectedIcon","color","Answer","onClick","onAnswerClick","onRenderCurrentAnswers","span","RangeSliderType","flex","ThumbnailContainer","NPCThumbnail","PressSpaceIndicator","right","Input","input","onSelected","style","overflow","options","params","imagePath","isQuestionDialog","showGoNextIndicator","setShowGoNextIndicator","FramedGold","TextAndThumbnail","src","aliceDefaultThumbnail","TextOnly","pressSpaceGif","valueMin","valueMax","onChange","sliderId","uuidv4","wasMouseDownFirst","setWasMouseDownFirst","onHandleMouseUp","rpguiSlider","getElementById","value","get_value","Number","onMouseUp","onMouseDown","Slider","GoldSlider","min","max"],"mappings":"yOAGYA,sDCMCC,EAASC,MAETC,EAA8B,mBAClCC,uBAAKC,UAAU,mBADsBC,kCDRlCN,EAAAA,uBAAAA,qDAEVA,4CEFUO,EC4CNC,EAAYC,EAAOC,6EAAPD,yIAOT,SAACE,UAAUA,EAAMC,GAAK,KACrB,SAACD,UAAUA,EAAME,GAAK,KAG1BC,EAAcL,EAAOM,8EAAPN,4BDvDRF,EAAAA,8BAAAA,iDAEVA,6BACAA,gCACAA,+BASWS,EAAiD,oBAG5DC,aAIEb,gBAACI,GACCS,iBALI,QAMJC,SALJA,QAKsB,OAClBb,+BARJc,QADAb,WAqBIE,EAAYC,EAAOC,mFAAPD,kFACN,SAACE,UAAUA,EAAMO,UAClB,qBAAGD,SExCd,MAAMG,EAAMC,QAAQ,eCAdD,EAAMC,QAAQ,eCAb,ICaKC,ECJCC,EAAgC,gBAAGC,IAAAA,KAAMC,IAAAA,SAAUC,IAAAA,UAC5BC,WAAiB,IAA5CC,OAAWC,cAElBC,aAAU,eACJC,EAAI,EACFC,EAAWC,aAAY,WAGjB,IAANF,GACEL,GACFA,IAIAK,EAAIP,EAAKU,QACXL,EAAaL,EAAKW,UAAU,EAAGJ,EAAI,IACnCA,MAEAK,cAAcJ,GACVP,GACFA,OAGH,WAEI,WACLW,cAAcJ,MAEf,CAACR,IAEGpB,gBAACiC,OAAeT,IAGnBS,EAAgB5B,EAAO6B,mFAAP7B,sHC9BT8B,EAAkC,gBAE7CC,IAAAA,QACAC,IAAAA,UACAC,IAAAA,YAEMC,IALNnB,KHZWoB,MAAM,IAAIC,OAAO,UAAuB,QGmBflB,WAAiB,GAA9CmB,OAAYC,OAEbC,EAAqB,SAACC,GACP,UAAfA,EAAMC,cACaP,SAAAA,EAAaG,EAAa,IAG7CC,GAAc,SAACI,UAASA,EAAO,KAG/BX,aAKNV,aAAU,kBACRsB,SAASC,iBAAiB,UAAWL,GAE9B,kBAAMI,SAASE,oBAAoB,UAAWN,MACpD,CAACF,IAGF1C,gBAACI,OACCJ,gBAACmB,GACCC,YAAMmB,SAAAA,EAAaG,KAAe,GAClCrB,SAAUgB,EACVf,QAASgB,MAMXlC,EAAYC,EAAOC,mFAAPD,OCjDL8C,EAAmB,SAACpC,EAAMqC,EAASC,YAAAA,IAAAA,EAAKC,YAC7CC,EAAevD,EAAMwD,SAE3BxD,EAAM0B,WAAU,WACd6B,EAAaE,QAAUL,IACtB,CAACA,IAEJpD,EAAM0B,WAAU,eAERgC,EAAW,SAACC,UAAMJ,EAAaE,QAAQE,WAE7CN,EAAGJ,iBAAiBlC,EAAM2C,GAEnB,WACLL,EAAGH,oBAAoBnC,EAAM2C,MAE9B,CAAC3C,EAAMsC,KCICO,EAAmC,gBAC9CC,IAAAA,UACAC,IAAAA,QACA1B,IAAAA,UAE8Cb,WAASsC,EAAU,IAA1DE,OAAiBC,SAEoBzC,YAAkB,GAAvD0C,OAAgBC,OAEjBC,EAAmB,eAClBJ,EAAgBK,WAAkD,IAArCL,EAAgBK,UAAUtC,cACnD,SAGHuC,EAAgBN,EAAgBK,UAAW,UAE1CN,EAAQQ,MAAK,SAACC,UAAWA,EAAOC,KAAOH,QAI9C9C,WAAuC4C,KADlCM,OAAeC,OAGtBhD,aAAU,WACRgD,EAAiBP,OAChB,CAACJ,QAEEY,EAAe,SAACP,UACbA,EAAUQ,KAAI,SAACC,UACpBf,EAAQQ,MAAK,SAACC,UAAWA,EAAOC,KAAOK,gBAoE3C1B,EAAiB,WAhEE,SAACQ,UACVA,EAAEmB,SACH,gBAOGC,EAAkBJ,EACtBZ,EAAgBK,WAChBY,WAAU,SAACT,gBAAWA,SAAAA,EAAQC,MAAOC,EAAeD,GAAK,KAErDS,EAAelB,EAAgBK,UAAWW,GAI1CG,EAAaP,EAAaZ,EAAgBK,WAAYE,MAC1D,SAACC,gBAAWA,SAAAA,EAAQC,MAAOS,KAG7BP,EAAiBQ,GAAcf,eAG5B,cAIGgB,EAAsBR,EAC1BZ,EAAgBK,WAChBY,WAAU,SAACT,gBAAWA,SAAAA,EAAQC,MAAOC,EAAeD,GAAK,KAErDY,EACJrB,EAAgBK,WAChBL,EAAgBK,UAAUe,GAEtBE,EAAiBV,EAAaZ,EAAgBK,WAAYE,MAC9D,SAACC,gBAAWA,SAAAA,EAAQC,MAAOY,KAI3BV,EADEW,GAGeV,EAAaZ,EAAgBK,WAAYkB,iBAIzD,WACHpB,GAAkB,SAEbO,IAAAA,EAAec,2BAClBnD,IAGA4B,EACEH,EAAUS,MACR,SAACkB,UAAaA,EAAShB,KAAOC,EAAec,uBA8DvDvF,gBAACI,OACCJ,gBAACyF,OACCzF,gBAACmB,GACCC,KAAM2C,EAAgB3C,KACtBE,QAAS,kBAAM4C,GAAkB,IACjC7C,SAAU,kBAAM6C,GAAkB,OAIrCD,GACCjE,gBAAC0F,OAjDwB,eACvBtB,EAAYL,EAAgBK,cAC7BA,SACI,SAGHN,EAAUa,EAAaP,UAExBN,EAIEA,EAAQc,KAAI,SAACL,OACZoB,SAAalB,SAAAA,EAAeD,aAAOD,SAAAA,EAAQC,IAC3CoB,EAAgBD,EAAa,SAAW,eAE1CpB,EAEAvE,gBAAC6F,GAAUf,cAAeP,EAAOC,IAC/BxE,gBAAC8F,GAAmBC,MAAOH,GACxBD,EAAa,IAAM,MAGtB3F,gBAACgG,GACClB,IAAKP,EAAOC,GACZyB,QAAS,kBAtCC,SAAC1B,GACrBL,GAAkB,GACdK,EAAOgB,eAETvB,EACEH,EAAUS,MAAK,SAACkB,UAAaA,EAAShB,KAAOD,EAAOgB,mBAItDnD,IA6BuB8D,CAAc3B,IAC7BwB,MAAOH,GAENrB,EAAOnD,OAMT,QAzBA,KAwCc+E,MAMrB/F,EAAYC,EAAOC,mFAAPD,gIAWZoF,EAAoBpF,EAAOC,2FAAPD,4BAKpBqF,EAAmBrF,EAAOC,0FAAPD,iBAQnB2F,EAAS3F,EAAO6B,8EAAP7B,kGAEJ,SAACE,UAAUA,EAAMwF,SAMtBD,EAAqBzF,EAAO+F,6FAAP/F,wCAEhB,SAACE,UAAUA,EAAMwF,SAGtBF,EAAYxF,EAAOC,mFAAPD,oKJrNNa,EAAAA,wBAAAA,+CAEVA,0CKTUmF,ELkGNjG,EAAYC,EAAOC,+EAAPD,iIAeZ4B,EAAgB5B,EAAOC,mFAAPD,gCACZ,qBAAGiG,QAIPC,EAAqBlG,EAAOC,wFAAPD,0DAMrBmG,EAAenG,EAAOW,kFAAPX,0DAUfoG,EAAsBpG,EAAOW,yFAAPX,uGAEjB,qBAAGqG,UKxIFL,EAAAA,0BAAAA,mDAEVA,uCA2DIM,EAAQtG,EAAOuG,8EAAPvG,gCZtDiC,gBAC7CH,IAAAA,SACAa,IAAAA,KACGR,iJAGDP,gBAACD,OACCC,wCAAQC,UAAWc,EAAMA,KAAK,UAAaR,GACzCP,yBAAIE,6CGLsC,gBAEhD2G,IAAAA,kBAKE7G,gBAACD,OACCC,gBAACI,GAAUK,IALfA,EAKqBD,IAJrBA,GAKMR,sBAAIC,UAAU,iBAAiB6G,MAAO,CAAEC,SAAU,aARxDC,QASiBpC,KAAI,SAACqC,UACZjH,gBAACU,GACCoE,IAAKmC,EAAO7F,KACZ6E,QAAS,WACPY,EAAWI,EAAOzC,MAGnByC,EAAO7F,+BIL8B,gBAClDA,IAAAA,KACAL,IAAAA,KACAqB,IAAAA,QACA8E,IAAAA,cACAC,iBAAAA,gBACAtD,IAAAA,UACAC,IAAAA,UAGEvC,YAAkB,GADb6F,OAAqBC,cAI1BrH,gBAACD,OACCC,gBAACY,GACCG,KAAMZ,4BAAoBmH,WAC1BzG,MAAOsG,EAAmB,QAAU,MACpCrG,OAAQ,SAEPqG,GAAoBtD,GAAaC,EAChC9D,gCACEA,gBAACiC,GACCqE,KAAMvF,IAASG,sBAAcqG,iBAAmB,MAAQ,QAExDvH,gBAAC4D,GACCC,UAAWA,EACXC,QAASA,EACT1B,QAAS,WACHA,GACFA,QAKPrB,IAASG,sBAAcqG,kBACtBvH,gBAACuG,OACCvG,gBAACwG,GAAagB,IAAKN,GAAaO,MAKtCzH,gCACEA,gBAACI,OACCJ,gBAACiC,GACCqE,KAAMvF,IAASG,sBAAcqG,iBAAmB,MAAQ,QAExDvH,gBAACmC,GACCG,YAAa,kBAAM+E,GAAuB,IAC1ChF,UAAW,kBAAMgF,GAAuB,IACxCjG,KAAMA,GAAQ,oBACdgB,QAAS,WACHA,GACFA,QAKPrB,IAASG,sBAAcqG,kBACtBvH,gBAACuG,OACCvG,gBAACwG,GAAagB,IAAKN,GAAaO,MAIrCL,GACCpH,gBAACyG,GACCC,MAAO3F,IAASG,sBAAcwG,SAAW,OAAS,UAClDF,IAAKG,kGK3EmC,gBACtD5G,IAAAA,KACA6G,IAAAA,SACAC,IAAAA,SACAhH,IAAAA,MACAiH,IAAAA,SAEMC,EAAWC,SAEiCzG,YAAkB,GAA7D0G,OAAmBC,OAE1B/E,EAAiB,WAAW,WACtB8E,GACFE,IAEFD,GAAqB,UAGjBC,EAAkB,eAChBC,EAAcpF,SAASqF,+BAA+BN,GACtDO,EAAQzI,EAAO0I,UAAUH,GAE/BN,EAASU,OAAOF,YAIhBtI,gBAACD,OACCC,uBACEyI,UAAWN,EACXO,YAAa,kBAAMR,GAAqB,KAExClI,gBAAC2G,GACC1G,UACEc,IAASsF,wBAAgBsC,OACrBtC,wBAAgBsC,OAChBtC,wBAAgBuC,WAEtB7H,KAAK,QACL+F,MAAO,CAAEjG,MAAOA,GAChBgI,IAAKjB,EACLkB,IAAKjB,EACLrD,mBAAoBuD"}
|
package/dist/long-bow.esm.js
CHANGED
|
@@ -1,9 +1,24 @@
|
|
|
1
1
|
import React, { useState, useEffect } from 'react';
|
|
2
|
-
import styled from 'styled-components';
|
|
3
2
|
import 'rpgui/rpgui.min.css';
|
|
4
3
|
import 'rpgui/rpgui.min.js';
|
|
4
|
+
import styled from 'styled-components';
|
|
5
5
|
import { v4 } from 'uuid';
|
|
6
6
|
|
|
7
|
+
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
8
|
+
if (source == null) return {};
|
|
9
|
+
var target = {};
|
|
10
|
+
var sourceKeys = Object.keys(source);
|
|
11
|
+
var key, i;
|
|
12
|
+
|
|
13
|
+
for (i = 0; i < sourceKeys.length; i++) {
|
|
14
|
+
key = sourceKeys[i];
|
|
15
|
+
if (excluded.indexOf(key) >= 0) continue;
|
|
16
|
+
target[key] = source[key];
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
return target;
|
|
20
|
+
}
|
|
21
|
+
|
|
7
22
|
var _RPGUI = RPGUI;
|
|
8
23
|
var RPGUIRoot = function RPGUIRoot(_ref) {
|
|
9
24
|
var children = _ref.children;
|
|
@@ -12,6 +27,25 @@ var RPGUIRoot = function RPGUIRoot(_ref) {
|
|
|
12
27
|
}, children);
|
|
13
28
|
};
|
|
14
29
|
|
|
30
|
+
var _excluded = ["children", "type"];
|
|
31
|
+
var IButtonTypes;
|
|
32
|
+
|
|
33
|
+
(function (IButtonTypes) {
|
|
34
|
+
IButtonTypes["RPGUIButton"] = "rpgui-button";
|
|
35
|
+
IButtonTypes["RPGUIGoldButton"] = "rpgui-button golden";
|
|
36
|
+
})(IButtonTypes || (IButtonTypes = {}));
|
|
37
|
+
|
|
38
|
+
var Button = function Button(_ref) {
|
|
39
|
+
var children = _ref.children,
|
|
40
|
+
type = _ref.type,
|
|
41
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
42
|
+
|
|
43
|
+
return React.createElement(RPGUIRoot, null, React.createElement("button", Object.assign({
|
|
44
|
+
className: type,
|
|
45
|
+
type: "button"
|
|
46
|
+
}, props), React.createElement("p", null, children)));
|
|
47
|
+
};
|
|
48
|
+
|
|
15
49
|
var ListMenu = function ListMenu(_ref) {
|
|
16
50
|
var options = _ref.options,
|
|
17
51
|
onSelected = _ref.onSelected,
|
|
@@ -47,27 +81,14 @@ var ListElement = /*#__PURE__*/styled.li.withConfig({
|
|
|
47
81
|
componentId: "sc-i9097t-1"
|
|
48
82
|
})(["margin-right:0.5rem;"]);
|
|
49
83
|
|
|
50
|
-
var
|
|
51
|
-
if (el === void 0) {
|
|
52
|
-
el = window;
|
|
53
|
-
}
|
|
84
|
+
var RPGUIContainerTypes;
|
|
54
85
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
var listener = function listener(e) {
|
|
62
|
-
return savedHandler.current(e);
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
el.addEventListener(type, listener);
|
|
66
|
-
return function () {
|
|
67
|
-
el.removeEventListener(type, listener);
|
|
68
|
-
};
|
|
69
|
-
}, [type, el]);
|
|
70
|
-
};
|
|
86
|
+
(function (RPGUIContainerTypes) {
|
|
87
|
+
RPGUIContainerTypes["Framed"] = "framed";
|
|
88
|
+
RPGUIContainerTypes["FramedGold"] = "framed-golden";
|
|
89
|
+
RPGUIContainerTypes["FramedGold2"] = "framed-golden-2";
|
|
90
|
+
RPGUIContainerTypes["FramedGrey"] = "framed-grey";
|
|
91
|
+
})(RPGUIContainerTypes || (RPGUIContainerTypes = {}));
|
|
71
92
|
|
|
72
93
|
var RPGUIContainer = function RPGUIContainer(_ref) {
|
|
73
94
|
var children = _ref.children,
|
|
@@ -83,8 +104,8 @@ var RPGUIContainer = function RPGUIContainer(_ref) {
|
|
|
83
104
|
};
|
|
84
105
|
var Container$1 = /*#__PURE__*/styled.div.withConfig({
|
|
85
106
|
displayName: "RPGUIContainer__Container",
|
|
86
|
-
componentId: "sc-
|
|
87
|
-
})(["height:", ";width:", ";display:flex;flex-wrap:wrap;"], function (props) {
|
|
107
|
+
componentId: "sc-a8l4p8-0"
|
|
108
|
+
})(["height:", ";width:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;"], function (props) {
|
|
88
109
|
return props.height;
|
|
89
110
|
}, function (_ref2) {
|
|
90
111
|
var width = _ref2.width;
|
|
@@ -137,7 +158,7 @@ var DynamicText = function DynamicText(_ref) {
|
|
|
137
158
|
};
|
|
138
159
|
var TextContainer = /*#__PURE__*/styled.p.withConfig({
|
|
139
160
|
displayName: "DynamicText__TextContainer",
|
|
140
|
-
componentId: "sc-
|
|
161
|
+
componentId: "sc-1ggl9nd-0"
|
|
141
162
|
})(["font-size:0.7rem !important;color:white;text-shadow:1px 1px 0px #000000;letter-spacing:1.2px;word-break:normal;"]);
|
|
142
163
|
|
|
143
164
|
var NPCDialogText = function NPCDialogText(_ref) {
|
|
@@ -180,9 +201,31 @@ var NPCDialogText = function NPCDialogText(_ref) {
|
|
|
180
201
|
};
|
|
181
202
|
var Container$2 = /*#__PURE__*/styled.div.withConfig({
|
|
182
203
|
displayName: "NPCDialogText__Container",
|
|
183
|
-
componentId: "sc-
|
|
204
|
+
componentId: "sc-1cxkdh9-0"
|
|
184
205
|
})([""]);
|
|
185
206
|
|
|
207
|
+
var useEventListener = function useEventListener(type, handler, el) {
|
|
208
|
+
if (el === void 0) {
|
|
209
|
+
el = window;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
var savedHandler = React.useRef();
|
|
213
|
+
React.useEffect(function () {
|
|
214
|
+
savedHandler.current = handler;
|
|
215
|
+
}, [handler]);
|
|
216
|
+
React.useEffect(function () {
|
|
217
|
+
//@ts-ignore
|
|
218
|
+
var listener = function listener(e) {
|
|
219
|
+
return savedHandler.current(e);
|
|
220
|
+
};
|
|
221
|
+
|
|
222
|
+
el.addEventListener(type, listener);
|
|
223
|
+
return function () {
|
|
224
|
+
el.removeEventListener(type, listener);
|
|
225
|
+
};
|
|
226
|
+
}, [type, el]);
|
|
227
|
+
};
|
|
228
|
+
|
|
186
229
|
var QuestionDialog = function QuestionDialog(_ref) {
|
|
187
230
|
var questions = _ref.questions,
|
|
188
231
|
answers = _ref.answers,
|
|
@@ -340,31 +383,31 @@ var QuestionDialog = function QuestionDialog(_ref) {
|
|
|
340
383
|
};
|
|
341
384
|
var Container$3 = /*#__PURE__*/styled.div.withConfig({
|
|
342
385
|
displayName: "QuestionDialog__Container",
|
|
343
|
-
componentId: "sc-
|
|
386
|
+
componentId: "sc-bxc5u0-0"
|
|
344
387
|
})(["display:flex;word-break:break-all;box-sizing:border-box;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;"]);
|
|
345
388
|
var QuestionContainer = /*#__PURE__*/styled.div.withConfig({
|
|
346
389
|
displayName: "QuestionDialog__QuestionContainer",
|
|
347
|
-
componentId: "sc-
|
|
390
|
+
componentId: "sc-bxc5u0-1"
|
|
348
391
|
})(["flex:100%;width:100%;"]);
|
|
349
392
|
var AnswersContainer = /*#__PURE__*/styled.div.withConfig({
|
|
350
393
|
displayName: "QuestionDialog__AnswersContainer",
|
|
351
|
-
componentId: "sc-
|
|
394
|
+
componentId: "sc-bxc5u0-2"
|
|
352
395
|
})(["flex:100%;"]);
|
|
353
396
|
var Answer = /*#__PURE__*/styled.p.withConfig({
|
|
354
397
|
displayName: "QuestionDialog__Answer",
|
|
355
|
-
componentId: "sc-
|
|
398
|
+
componentId: "sc-bxc5u0-3"
|
|
356
399
|
})(["flex:auto;color:", " !important;font-size:0.65rem !important;background:inherit;border:none;"], function (props) {
|
|
357
400
|
return props.color;
|
|
358
401
|
});
|
|
359
402
|
var AnswerSelectedIcon = /*#__PURE__*/styled.span.withConfig({
|
|
360
403
|
displayName: "QuestionDialog__AnswerSelectedIcon",
|
|
361
|
-
componentId: "sc-
|
|
404
|
+
componentId: "sc-bxc5u0-4"
|
|
362
405
|
})(["flex:5% 0 0;color:", " !important;"], function (props) {
|
|
363
406
|
return props.color;
|
|
364
407
|
});
|
|
365
408
|
var AnswerRow = /*#__PURE__*/styled.div.withConfig({
|
|
366
409
|
displayName: "QuestionDialog__AnswerRow",
|
|
367
|
-
componentId: "sc-
|
|
410
|
+
componentId: "sc-bxc5u0-5"
|
|
368
411
|
})(["display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-bottom:0.5rem;height:22px;p{line-height:unset;margin-top:0;margin-bottom:0rem;}"]);
|
|
369
412
|
|
|
370
413
|
var NPCDialogType;
|
|
@@ -389,7 +432,7 @@ var NPCDialog = function NPCDialog(_ref) {
|
|
|
389
432
|
setShowGoNextIndicator = _useState[1];
|
|
390
433
|
|
|
391
434
|
return React.createElement(RPGUIRoot, null, React.createElement(RPGUIContainer, {
|
|
392
|
-
type:
|
|
435
|
+
type: RPGUIContainerTypes.FramedGold,
|
|
393
436
|
width: isQuestionDialog ? '600px' : '50%',
|
|
394
437
|
height: '180px'
|
|
395
438
|
}, isQuestionDialog && questions && answers ? React.createElement(React.Fragment, null, React.createElement(TextContainer$1, {
|
|
@@ -428,39 +471,39 @@ var NPCDialog = function NPCDialog(_ref) {
|
|
|
428
471
|
};
|
|
429
472
|
var Container$4 = /*#__PURE__*/styled.div.withConfig({
|
|
430
473
|
displayName: "NPCDialog__Container",
|
|
431
|
-
componentId: "sc-
|
|
474
|
+
componentId: "sc-1b4aw74-0"
|
|
432
475
|
})(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
|
|
433
476
|
var TextContainer$1 = /*#__PURE__*/styled.div.withConfig({
|
|
434
477
|
displayName: "NPCDialog__TextContainer",
|
|
435
|
-
componentId: "sc-
|
|
478
|
+
componentId: "sc-1b4aw74-1"
|
|
436
479
|
})(["flex:", " 0 0;width:355px;"], function (_ref2) {
|
|
437
480
|
var flex = _ref2.flex;
|
|
438
481
|
return flex;
|
|
439
482
|
});
|
|
440
483
|
var ThumbnailContainer = /*#__PURE__*/styled.div.withConfig({
|
|
441
484
|
displayName: "NPCDialog__ThumbnailContainer",
|
|
442
|
-
componentId: "sc-
|
|
485
|
+
componentId: "sc-1b4aw74-2"
|
|
443
486
|
})(["flex:30% 0 0;display:flex;justify-content:flex-end;"]);
|
|
444
487
|
var NPCThumbnail = /*#__PURE__*/styled.img.withConfig({
|
|
445
488
|
displayName: "NPCDialog__NPCThumbnail",
|
|
446
|
-
componentId: "sc-
|
|
489
|
+
componentId: "sc-1b4aw74-3"
|
|
447
490
|
})(["image-rendering:pixelated;height:128px;width:128px;"]);
|
|
448
491
|
var PressSpaceIndicator = /*#__PURE__*/styled.img.withConfig({
|
|
449
492
|
displayName: "NPCDialog__PressSpaceIndicator",
|
|
450
|
-
componentId: "sc-
|
|
493
|
+
componentId: "sc-1b4aw74-4"
|
|
451
494
|
})(["position:absolute;right:", ";bottom:1rem;height:20.7px;image-rendering:-webkit-optimize-contrast;"], function (_ref3) {
|
|
452
495
|
var right = _ref3.right;
|
|
453
496
|
return right;
|
|
454
497
|
});
|
|
455
498
|
|
|
456
|
-
var
|
|
499
|
+
var RangeSliderType;
|
|
457
500
|
|
|
458
|
-
(function (
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
})(
|
|
501
|
+
(function (RangeSliderType) {
|
|
502
|
+
RangeSliderType["Slider"] = "rpgui-slider";
|
|
503
|
+
RangeSliderType["GoldSlider"] = "rpgui-slider golden";
|
|
504
|
+
})(RangeSliderType || (RangeSliderType = {}));
|
|
462
505
|
|
|
463
|
-
var
|
|
506
|
+
var RangeSlider = function RangeSlider(_ref) {
|
|
464
507
|
var type = _ref.type,
|
|
465
508
|
valueMin = _ref.valueMin,
|
|
466
509
|
valueMax = _ref.valueMax,
|
|
@@ -494,7 +537,7 @@ var RPGUISlider = function RPGUISlider(_ref) {
|
|
|
494
537
|
return setWasMouseDownFirst(true);
|
|
495
538
|
}
|
|
496
539
|
}, React.createElement(Input, {
|
|
497
|
-
className: type ===
|
|
540
|
+
className: type === RangeSliderType.Slider ? RangeSliderType.Slider : RangeSliderType.GoldSlider,
|
|
498
541
|
type: "range",
|
|
499
542
|
style: {
|
|
500
543
|
width: width
|
|
@@ -505,9 +548,9 @@ var RPGUISlider = function RPGUISlider(_ref) {
|
|
|
505
548
|
})));
|
|
506
549
|
};
|
|
507
550
|
var Input = /*#__PURE__*/styled.input.withConfig({
|
|
508
|
-
displayName: "
|
|
509
|
-
componentId: "sc-
|
|
551
|
+
displayName: "RangeSlider__Input",
|
|
552
|
+
componentId: "sc-v8mte9-0"
|
|
510
553
|
})(["opacity:0;"]);
|
|
511
554
|
|
|
512
|
-
export { DynamicText, ListMenu, NPCDialog, NPCDialogType, QuestionDialog, RPGUIContainer, RPGUIRoot,
|
|
555
|
+
export { Button, DynamicText, IButtonTypes, ListMenu, NPCDialog, NPCDialogType, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, _RPGUI, useEventListener };
|
|
513
556
|
//# sourceMappingURL=long-bow.esm.js.map
|
package/dist/long-bow.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"long-bow.esm.js","sources":["../src/RPGUI/RPGUIRoot.tsx","../src/components/ListMenu.tsx","../src/hooks/useEventListener.ts","../src/RPGUI/RPGUIContainer.tsx","../src/NPCDialog/img/npcDialog/npcThumbnails/alice.png","../src/NPCDialog/img/space.gif","../src/libs/StringHelpers.ts","../src/typography/DynamicText.tsx","../src/NPCDialog/NPCDialogText.tsx","../src/NPCDialog/QuestionDialog/QuestionDialog.tsx","../src/NPCDialog/NPCDialog.tsx","../src/RPGUI/RPGUISlider.tsx"],"sourcesContent":["import React from 'react';\nimport 'rpgui/rpgui.min.css';\nimport 'rpgui/rpgui.min.js';\n\ninterface IProps {\n children: React.ReactNode;\n}\n\n//@ts-ignore\nexport const _RPGUI = RPGUI;\n\nexport const RPGUIRoot: React.FC<IProps> = ({ children }) => {\n return <div className=\"rpgui-content\">{children}</div>;\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport { RPGUIRoot } from '../RPGUI/RPGUIRoot';\n\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}\n\nexport const ListMenu: React.FC<IListMenuProps> = ({\n options,\n onSelected,\n x,\n y,\n}) => {\n return (\n <RPGUIRoot>\n <Container x={x} y={y}>\n <ul className=\"rpgui-list-imp\" style={{ overflow: 'hidden' }}>\n {options.map((params) => (\n <ListElement\n key={params.text}\n onClick={() => {\n onSelected(params.id);\n }}\n >\n {params.text}\n </ListElement>\n ))}\n </ul>\n </Container>\n </RPGUIRoot>\n );\n};\n\ninterface IContainerProps {\n x?: number;\n y?: 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\nconst ListElement = styled.li`\n margin-right: 0.5rem;\n`;\n","import React from 'react';\n\n//@ts-ignore\nexport const useEventListener = (type, handler, el = window) => {\n const savedHandler = React.useRef();\n\n React.useEffect(() => {\n savedHandler.current = handler;\n }, [handler]);\n\n React.useEffect(() => {\n //@ts-ignore\n const listener = (e) => savedHandler.current(e);\n\n el.addEventListener(type, listener);\n\n return () => {\n el.removeEventListener(type, listener);\n };\n }, [type, el]);\n};\n","import React from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n type: 'framed' | 'framed-golden' | 'framed-golden-2' | 'framed-grey';\n children: React.ReactNode;\n width?: string;\n height?: string;\n}\n\nexport const RPGUIContainer: React.FC<IProps> = ({\n children,\n type,\n width = '50%',\n height,\n}) => {\n return (\n <Container\n width={width}\n height={height || 'auto'}\n className={`rpgui-container ${type}`}\n >\n {children}\n </Container>\n );\n};\n\ninterface IContainerProps {\n width: string;\n height: string;\n}\n\nconst Container = styled.div<IContainerProps>`\n height: ${(props) => props.height};\n width: ${({ width }) => width};\n display: flex;\n flex-wrap: wrap;\n`;\n","const img = require('./alice.png'); export default img;","const img = require('./space.gif'); export default img;","export const chunkString = (str: string, length: number) => {\n return str.match(new RegExp('.{1,' + length + '}', 'g'));\n};\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n text: string;\n onFinish?: () => void;\n onStart?: () => void;\n}\n\nexport const DynamicText: React.FC<IProps> = ({ text, onFinish, onStart }) => {\n const [textState, setTextState] = useState<string>('');\n\n useEffect(() => {\n let i = 0;\n const interval = setInterval(() => {\n // on every interval, show one more character\n\n if (i === 0) {\n if (onStart) {\n onStart();\n }\n }\n\n if (i < text.length) {\n setTextState(text.substring(0, i + 1));\n i++;\n } else {\n clearInterval(interval);\n if (onFinish) {\n onFinish();\n }\n }\n }, 50);\n\n return () => {\n clearInterval(interval);\n };\n }, [text]);\n\n return <TextContainer>{textState}</TextContainer>;\n};\n\nconst TextContainer = styled.p`\n font-size: 0.7rem !important;\n color: white;\n text-shadow: 1px 1px 0px #000000;\n letter-spacing: 1.2px;\n word-break: normal;\n`;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { chunkString } from '../libs/StringHelpers';\nimport { DynamicText } from '../typography/DynamicText';\n\ninterface IProps {\n text: string;\n onClose: () => void;\n onEndStep: () => void;\n onStartStep: () => void;\n}\n\nexport const NPCDialogText: React.FC<IProps> = ({\n text,\n onClose,\n onEndStep,\n onStartStep,\n}) => {\n const textChunks = chunkString(text, 85);\n\n const [chunkIndex, setChunkIndex] = useState<number>(0);\n\n const onHandleSpacePress = (event: KeyboardEvent) => {\n if (event.code === 'Space') {\n const hasNextChunk = textChunks?.[chunkIndex + 1] || false;\n\n if (hasNextChunk) {\n setChunkIndex((prev) => prev + 1);\n } else {\n // if there's no more text chunks, close the dialog\n onClose();\n }\n }\n };\n\n useEffect(() => {\n document.addEventListener('keydown', onHandleSpacePress);\n\n return () => document.removeEventListener('keydown', onHandleSpacePress);\n }, [chunkIndex]);\n\n return (\n <Container>\n <DynamicText\n text={textChunks?.[chunkIndex] || ''}\n onFinish={onEndStep}\n onStart={onStartStep}\n />\n </Container>\n );\n};\n\nconst Container = styled.div``;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { DynamicText } from '../../typography/DynamicText';\n\nexport interface IQuestionDialogAnswer {\n id: number;\n text: string;\n nextQuestionId?: number;\n}\n\nexport interface IQuestionDialog {\n id: number;\n text: string;\n answerIds?: number[];\n}\n\nexport interface IProps {\n questions: IQuestionDialog[];\n answers: IQuestionDialogAnswer[];\n onClose: () => void;\n}\n\nexport const QuestionDialog: React.FC<IProps> = ({\n questions,\n answers,\n onClose,\n}) => {\n const [currentQuestion, setCurrentQuestion] = useState(questions[0]);\n\n const [canShowAnswers, setCanShowAnswers] = useState<boolean>(false);\n\n const onGetFirstAnswer = () => {\n if (!currentQuestion.answerIds || currentQuestion.answerIds.length === 0) {\n return null;\n }\n\n const firstAnswerId = currentQuestion.answerIds![0];\n\n return answers.find((answer) => answer.id === firstAnswerId);\n };\n\n const [currentAnswer, setCurrentAnswer] =\n useState<IQuestionDialogAnswer | null>(onGetFirstAnswer()!);\n\n useEffect(() => {\n setCurrentAnswer(onGetFirstAnswer()!);\n }, [currentQuestion]);\n\n const onGetAnswers = (answerIds: number[]) => {\n return answerIds.map((answerId: number) =>\n answers.find((answer) => answer.id === answerId)\n );\n };\n\n const onKeyPress = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowDown':\n // select next answer, if any.\n // if no next answer, select first answer\n // const nextAnswer = onGetAnswers(currentQuestion.answerIds!).find(\n // (answer) => answer?.id === currentAnswer!.id + 1\n // );\n\n const nextAnswerIndex = onGetAnswers(\n currentQuestion.answerIds!\n ).findIndex((answer) => answer?.id === currentAnswer!.id + 1);\n\n const nextAnswerID = currentQuestion.answerIds![nextAnswerIndex];\n\n // console.log(nextAnswerIndex);\n\n const nextAnswer = onGetAnswers(currentQuestion.answerIds!).find(\n (answer) => answer?.id === nextAnswerID\n );\n\n setCurrentAnswer(nextAnswer || onGetFirstAnswer()!);\n\n break;\n case 'ArrowUp':\n // select previous answer, if any.\n // if no previous answer, select last answer\n\n const previousAnswerIndex = onGetAnswers(\n currentQuestion.answerIds!\n ).findIndex((answer) => answer?.id === currentAnswer!.id - 1);\n\n const previousAnswerID =\n currentQuestion.answerIds &&\n currentQuestion.answerIds[previousAnswerIndex];\n\n const previousAnswer = onGetAnswers(currentQuestion.answerIds!).find(\n (answer) => answer?.id === previousAnswerID\n );\n\n if (previousAnswer) {\n setCurrentAnswer(previousAnswer);\n } else {\n setCurrentAnswer(onGetAnswers(currentQuestion.answerIds!).pop()!);\n }\n\n break;\n case 'Enter':\n setCanShowAnswers(false);\n\n if (!currentAnswer?.nextQuestionId) {\n onClose();\n return;\n } else {\n setCurrentQuestion(\n questions.find(\n (question) => question.id === currentAnswer!.nextQuestionId\n )!\n );\n }\n\n break;\n }\n };\n useEventListener('keydown', onKeyPress);\n\n const onAnswerClick = (answer: IQuestionDialogAnswer) => {\n setCanShowAnswers(false);\n if (answer.nextQuestionId) {\n // if there is a next question, go to it\n setCurrentQuestion(\n questions.find((question) => question.id === answer.nextQuestionId)!\n );\n } else {\n // else, finish dialog!\n onClose();\n }\n };\n\n const onRenderCurrentAnswers = () => {\n const answerIds = currentQuestion.answerIds;\n if (!answerIds) {\n return null;\n }\n\n const answers = onGetAnswers(answerIds);\n\n if (!answers) {\n return null;\n }\n\n return answers.map((answer) => {\n const isSelected = currentAnswer?.id === answer?.id;\n const selectedColor = isSelected ? 'yellow' : 'white';\n\n if (answer) {\n return (\n <AnswerRow key={`answer_${answer.id}`}>\n <AnswerSelectedIcon color={selectedColor}>\n {isSelected ? 'X' : null}\n </AnswerSelectedIcon>\n\n <Answer\n key={answer.id}\n onClick={() => onAnswerClick(answer)}\n color={selectedColor}\n >\n {answer.text}\n </Answer>\n </AnswerRow>\n );\n }\n\n return null;\n });\n };\n\n return (\n <Container>\n <QuestionContainer>\n <DynamicText\n text={currentQuestion.text}\n onStart={() => setCanShowAnswers(false)}\n onFinish={() => setCanShowAnswers(true)}\n />\n </QuestionContainer>\n\n {canShowAnswers && (\n <AnswersContainer>{onRenderCurrentAnswers()}</AnswersContainer>\n )}\n </Container>\n );\n};\n\nconst Container = styled.div`\n display: flex;\n\n word-break: break-all;\n\n box-sizing: border-box;\n justify-content: flex-start;\n align-items: flex-start;\n flex-wrap: wrap;\n`;\n\nconst QuestionContainer = styled.div`\n flex: 100%;\n width: 100%;\n`;\n\nconst AnswersContainer = styled.div`\n flex: 100%;\n`;\n\ninterface IAnswerProps {\n color: string;\n}\n\nconst Answer = styled.p<IAnswerProps>`\n flex: auto;\n color: ${(props) => props.color} !important;\n font-size: 0.65rem !important;\n background: inherit;\n border: none;\n`;\n\nconst AnswerSelectedIcon = styled.span<IAnswerProps>`\n flex: 5% 0 0;\n color: ${(props) => props.color} !important;\n`;\n\nconst AnswerRow = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n margin-bottom: 0.5rem;\n height: 22px;\n\n p {\n line-height: unset;\n margin-top: 0;\n margin-bottom: 0rem;\n }\n`;\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { IQuestionDialog, IQuestionDialogAnswer } from '..';\nimport { RPGUIContainer } from '../RPGUI/RPGUIContainer';\nimport { RPGUIRoot } from '../RPGUI/RPGUIRoot';\nimport aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';\nimport pressSpaceGif from './img/space.gif';\nimport { NPCDialogText } from './NPCDialogText';\nimport { QuestionDialog } from './QuestionDialog/QuestionDialog';\nexport enum NPCDialogType {\n TextOnly = 'TextOnly',\n TextAndThumbnail = 'TextAndThumbnail',\n}\n\nexport interface INPCDialogProps {\n text?: string;\n type: NPCDialogType;\n imagePath?: string;\n onClose?: () => void;\n isQuestionDialog: boolean;\n answers?: IQuestionDialogAnswer[];\n questions?: IQuestionDialog[];\n}\n\nexport const NPCDialog: React.FC<INPCDialogProps> = ({\n text,\n type,\n onClose,\n imagePath,\n isQuestionDialog = false,\n questions,\n answers,\n}) => {\n const [showGoNextIndicator, setShowGoNextIndicator] =\n useState<boolean>(false);\n\n return (\n <RPGUIRoot>\n <RPGUIContainer\n type=\"framed-golden\"\n width={isQuestionDialog ? '600px' : '50%'}\n height={'180px'}\n >\n {isQuestionDialog && questions && answers ? (\n <>\n <TextContainer\n flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}\n >\n <QuestionDialog\n questions={questions}\n answers={answers}\n onClose={() => {\n if (onClose) {\n onClose();\n }\n }}\n />\n </TextContainer>\n {type === NPCDialogType.TextAndThumbnail && (\n <ThumbnailContainer>\n <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />\n </ThumbnailContainer>\n )}\n </>\n ) : (\n <>\n <Container>\n <TextContainer\n flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}\n >\n <NPCDialogText\n onStartStep={() => setShowGoNextIndicator(false)}\n onEndStep={() => setShowGoNextIndicator(true)}\n text={text || 'No text provided.'}\n onClose={() => {\n if (onClose) {\n onClose();\n }\n }}\n />\n </TextContainer>\n {type === NPCDialogType.TextAndThumbnail && (\n <ThumbnailContainer>\n <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />\n </ThumbnailContainer>\n )}\n </Container>\n {showGoNextIndicator && (\n <PressSpaceIndicator\n right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}\n src={pressSpaceGif}\n />\n )}\n </>\n )}\n </RPGUIContainer>\n </RPGUIRoot>\n );\n};\n\nconst Container = styled.div`\n display: flex;\n width: 100%;\n height: 100%;\n\n box-sizing: border-box;\n justify-content: center;\n align-items: flex-start;\n position: relative;\n`;\n\ninterface ITextContainerProps {\n flex: string;\n}\n\nconst TextContainer = styled.div<ITextContainerProps>`\n flex: ${({ flex }) => flex} 0 0;\n width: 355px;\n`;\n\nconst ThumbnailContainer = styled.div`\n flex: 30% 0 0;\n display: flex;\n justify-content: flex-end;\n`;\n\nconst NPCThumbnail = styled.img`\n image-rendering: pixelated;\n height: 128px;\n width: 128px;\n`;\n\ninterface IPressSpaceIndicatorProps {\n right: string;\n}\n\nconst PressSpaceIndicator = styled.img<IPressSpaceIndicatorProps>`\n position: absolute;\n right: ${({ right }) => right};\n bottom: 1rem;\n height: 20.7px;\n image-rendering: -webkit-optimize-contrast;\n`;\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport { useEventListener } from '../hooks/useEventListener';\nimport { RPGUIRoot, _RPGUI } from './RPGUIRoot';\n\nexport enum SliderType {\n Slider = 'rpgui-slider',\n GoldSlider = 'rpgui-slider golden',\n}\n\nexport interface ISliderProps {\n type: SliderType;\n valueMin: number;\n valueMax: number;\n width: string;\n\n onChange: (value: number) => void;\n}\n\nexport const RPGUISlider: React.FC<ISliderProps> = ({\n type,\n valueMin,\n valueMax,\n width,\n onChange,\n}) => {\n const sliderId = uuidv4();\n\n const [wasMouseDownFirst, setWasMouseDownFirst] = useState<boolean>(false);\n\n useEventListener('mouseup', () => {\n if (wasMouseDownFirst) {\n onHandleMouseUp();\n }\n setWasMouseDownFirst(false);\n });\n\n const onHandleMouseUp = () => {\n const rpguiSlider = document.getElementById(`rpgui-slider-${sliderId}`);\n const value = _RPGUI.get_value(rpguiSlider);\n\n onChange(Number(value));\n };\n\n return (\n <RPGUIRoot>\n <div\n onMouseUp={onHandleMouseUp}\n onMouseDown={() => setWasMouseDownFirst(true)}\n >\n <Input\n className={\n type === SliderType.Slider\n ? SliderType.Slider\n : SliderType.GoldSlider\n }\n type=\"range\"\n style={{ width: width }}\n min={valueMin}\n max={valueMax}\n id={`rpgui-slider-${sliderId}`}\n />\n </div>\n </RPGUIRoot>\n );\n};\n\nconst Input = styled.input`\n opacity: 0;\n`;\n"],"names":["_RPGUI","RPGUI","RPGUIRoot","children","React","className","ListMenu","options","onSelected","x","y","Container","style","overflow","map","params","ListElement","key","text","onClick","id","styled","div","props","li","useEventListener","type","handler","el","window","savedHandler","useRef","useEffect","current","listener","e","addEventListener","removeEventListener","RPGUIContainer","width","height","img","chunkString","str","length","match","RegExp","DynamicText","onFinish","onStart","useState","textState","setTextState","i","interval","setInterval","substring","clearInterval","TextContainer","p","NPCDialogText","onClose","onEndStep","onStartStep","textChunks","chunkIndex","setChunkIndex","onHandleSpacePress","event","code","hasNextChunk","prev","document","QuestionDialog","questions","answers","currentQuestion","setCurrentQuestion","canShowAnswers","setCanShowAnswers","onGetFirstAnswer","answerIds","firstAnswerId","find","answer","currentAnswer","setCurrentAnswer","onGetAnswers","answerId","onKeyPress","nextAnswerIndex","findIndex","nextAnswerID","nextAnswer","previousAnswerIndex","previousAnswerID","previousAnswer","pop","nextQuestionId","question","onAnswerClick","onRenderCurrentAnswers","isSelected","selectedColor","AnswerRow","AnswerSelectedIcon","color","Answer","QuestionContainer","AnswersContainer","span","NPCDialogType","NPCDialog","imagePath","isQuestionDialog","showGoNextIndicator","setShowGoNextIndicator","flex","TextAndThumbnail","ThumbnailContainer","NPCThumbnail","src","aliceDefaultThumbnail","PressSpaceIndicator","right","TextOnly","pressSpaceGif","SliderType","RPGUISlider","valueMin","valueMax","onChange","sliderId","uuidv4","wasMouseDownFirst","setWasMouseDownFirst","onHandleMouseUp","rpguiSlider","getElementById","value","get_value","Number","onMouseUp","onMouseDown","Input","Slider","GoldSlider","min","max","input"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"long-bow.esm.js","sources":["../src/components/RPGUIRoot.tsx","../src/components/Button.tsx","../src/components/ListMenu.tsx","../src/components/RPGUIContainer.tsx","../src/components/NPCDialog/img/npcDialog/npcThumbnails/alice.png","../src/components/NPCDialog/img/space.gif","../src/libs/StringHelpers.ts","../src/components/typography/DynamicText.tsx","../src/components/NPCDialog/NPCDialogText.tsx","../src/hooks/useEventListener.ts","../src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx","../src/components/NPCDialog/NPCDialog.tsx","../src/components/RangeSlider.tsx"],"sourcesContent":["import React from 'react';\nimport 'rpgui/rpgui.min.css';\nimport 'rpgui/rpgui.min.js';\n\ninterface IProps {\n children: React.ReactNode;\n}\n\n//@ts-ignore\nexport const _RPGUI = RPGUI;\n\nexport const RPGUIRoot: React.FC<IProps> = ({ children }) => {\n return <div className=\"rpgui-content\">{children}</div>;\n};\n","import React from 'react';\nimport { RPGUIRoot } from './RPGUIRoot';\n\nexport enum IButtonTypes {\n RPGUIButton = 'rpgui-button',\n RPGUIGoldButton = 'rpgui-button golden',\n}\n\nexport interface IButtonsProps {\n children: React.ReactNode;\n type: IButtonTypes;\n}\n\nexport const Button: React.FC<IButtonsProps> = ({\n children,\n type,\n ...props\n}) => {\n return (\n <RPGUIRoot>\n <button className={type} type=\"button\" {...props}>\n <p>{children}</p>\n </button>\n </RPGUIRoot>\n );\n};\n","import React from 'react';\nimport styled from 'styled-components';\nimport { RPGUIRoot } from './RPGUIRoot';\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}\n\nexport const ListMenu: React.FC<IListMenuProps> = ({\n options,\n onSelected,\n x,\n y,\n}) => {\n return (\n <RPGUIRoot>\n <Container x={x} y={y}>\n <ul className=\"rpgui-list-imp\" style={{ overflow: 'hidden' }}>\n {options.map((params) => (\n <ListElement\n key={params.text}\n onClick={() => {\n onSelected(params.id);\n }}\n >\n {params.text}\n </ListElement>\n ))}\n </ul>\n </Container>\n </RPGUIRoot>\n );\n};\n\ninterface IContainerProps {\n x?: number;\n y?: 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\nconst ListElement = styled.li`\n margin-right: 0.5rem;\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}\n\nexport const RPGUIContainer: React.FC<IRPGUIContainerProps> = ({\n children,\n type,\n width = '50%',\n height,\n}) => {\n return (\n <Container\n width={width}\n height={height || 'auto'}\n className={`rpgui-container ${type}`}\n >\n {children}\n </Container>\n );\n};\n\ninterface IContainerProps {\n width: string;\n height: string;\n}\n\nconst Container = styled.div<IContainerProps>`\n height: ${(props) => props.height};\n width: ${({ width }) => width};\n display: flex;\n flex-wrap: wrap;\n image-rendering: pixelated;\n`;\n","const img = require('./alice.png'); export default img;","const img = require('./space.gif'); export default img;","export const chunkString = (str: string, length: number) => {\n return str.match(new RegExp('.{1,' + length + '}', 'g'));\n};\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\n\ninterface IProps {\n text: string;\n onFinish?: () => void;\n onStart?: () => void;\n}\n\nexport const DynamicText: React.FC<IProps> = ({ text, onFinish, onStart }) => {\n const [textState, setTextState] = useState<string>('');\n\n useEffect(() => {\n let i = 0;\n const interval = setInterval(() => {\n // on every interval, show one more character\n\n if (i === 0) {\n if (onStart) {\n onStart();\n }\n }\n\n if (i < text.length) {\n setTextState(text.substring(0, i + 1));\n i++;\n } else {\n clearInterval(interval);\n if (onFinish) {\n onFinish();\n }\n }\n }, 50);\n\n return () => {\n clearInterval(interval);\n };\n }, [text]);\n\n return <TextContainer>{textState}</TextContainer>;\n};\n\nconst TextContainer = styled.p`\n font-size: 0.7rem !important;\n color: white;\n text-shadow: 1px 1px 0px #000000;\n letter-spacing: 1.2px;\n word-break: normal;\n`;\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { chunkString } from '../../libs/StringHelpers';\nimport { DynamicText } from '../typography/DynamicText';\n\ninterface IProps {\n text: string;\n onClose: () => void;\n onEndStep: () => void;\n onStartStep: () => void;\n}\n\nexport const NPCDialogText: React.FC<IProps> = ({\n text,\n onClose,\n onEndStep,\n onStartStep,\n}) => {\n const textChunks = chunkString(text, 85);\n\n const [chunkIndex, setChunkIndex] = useState<number>(0);\n\n const onHandleSpacePress = (event: KeyboardEvent) => {\n if (event.code === 'Space') {\n const hasNextChunk = textChunks?.[chunkIndex + 1] || false;\n\n if (hasNextChunk) {\n setChunkIndex((prev) => prev + 1);\n } else {\n // if there's no more text chunks, close the dialog\n onClose();\n }\n }\n };\n\n useEffect(() => {\n document.addEventListener('keydown', onHandleSpacePress);\n\n return () => document.removeEventListener('keydown', onHandleSpacePress);\n }, [chunkIndex]);\n\n return (\n <Container>\n <DynamicText\n text={textChunks?.[chunkIndex] || ''}\n onFinish={onEndStep}\n onStart={onStartStep}\n />\n </Container>\n );\n};\n\nconst Container = styled.div``;\n","import React from 'react';\n\n//@ts-ignore\nexport const useEventListener = (type, handler, el = window) => {\n const savedHandler = React.useRef();\n\n React.useEffect(() => {\n savedHandler.current = handler;\n }, [handler]);\n\n React.useEffect(() => {\n //@ts-ignore\n const listener = (e) => savedHandler.current(e);\n\n el.addEventListener(type, listener);\n\n return () => {\n el.removeEventListener(type, listener);\n };\n }, [type, el]);\n};\n","import React, { useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { useEventListener } from '../../../hooks/useEventListener';\nimport { DynamicText } from '../../typography/DynamicText';\n\nexport interface IQuestionDialogAnswer {\n id: number;\n text: string;\n nextQuestionId?: number;\n}\n\nexport interface IQuestionDialog {\n id: number;\n text: string;\n answerIds?: number[];\n}\n\nexport interface IProps {\n questions: IQuestionDialog[];\n answers: IQuestionDialogAnswer[];\n onClose: () => void;\n}\n\nexport const QuestionDialog: React.FC<IProps> = ({\n questions,\n answers,\n onClose,\n}) => {\n const [currentQuestion, setCurrentQuestion] = useState(questions[0]);\n\n const [canShowAnswers, setCanShowAnswers] = useState<boolean>(false);\n\n const onGetFirstAnswer = () => {\n if (!currentQuestion.answerIds || currentQuestion.answerIds.length === 0) {\n return null;\n }\n\n const firstAnswerId = currentQuestion.answerIds![0];\n\n return answers.find((answer) => answer.id === firstAnswerId);\n };\n\n const [currentAnswer, setCurrentAnswer] =\n useState<IQuestionDialogAnswer | null>(onGetFirstAnswer()!);\n\n useEffect(() => {\n setCurrentAnswer(onGetFirstAnswer()!);\n }, [currentQuestion]);\n\n const onGetAnswers = (answerIds: number[]) => {\n return answerIds.map((answerId: number) =>\n answers.find((answer) => answer.id === answerId)\n );\n };\n\n const onKeyPress = (e: KeyboardEvent) => {\n switch (e.key) {\n case 'ArrowDown':\n // select next answer, if any.\n // if no next answer, select first answer\n // const nextAnswer = onGetAnswers(currentQuestion.answerIds!).find(\n // (answer) => answer?.id === currentAnswer!.id + 1\n // );\n\n const nextAnswerIndex = onGetAnswers(\n currentQuestion.answerIds!\n ).findIndex((answer) => answer?.id === currentAnswer!.id + 1);\n\n const nextAnswerID = currentQuestion.answerIds![nextAnswerIndex];\n\n // console.log(nextAnswerIndex);\n\n const nextAnswer = onGetAnswers(currentQuestion.answerIds!).find(\n (answer) => answer?.id === nextAnswerID\n );\n\n setCurrentAnswer(nextAnswer || onGetFirstAnswer()!);\n\n break;\n case 'ArrowUp':\n // select previous answer, if any.\n // if no previous answer, select last answer\n\n const previousAnswerIndex = onGetAnswers(\n currentQuestion.answerIds!\n ).findIndex((answer) => answer?.id === currentAnswer!.id - 1);\n\n const previousAnswerID =\n currentQuestion.answerIds &&\n currentQuestion.answerIds[previousAnswerIndex];\n\n const previousAnswer = onGetAnswers(currentQuestion.answerIds!).find(\n (answer) => answer?.id === previousAnswerID\n );\n\n if (previousAnswer) {\n setCurrentAnswer(previousAnswer);\n } else {\n setCurrentAnswer(onGetAnswers(currentQuestion.answerIds!).pop()!);\n }\n\n break;\n case 'Enter':\n setCanShowAnswers(false);\n\n if (!currentAnswer?.nextQuestionId) {\n onClose();\n return;\n } else {\n setCurrentQuestion(\n questions.find(\n (question) => question.id === currentAnswer!.nextQuestionId\n )!\n );\n }\n\n break;\n }\n };\n useEventListener('keydown', onKeyPress);\n\n const onAnswerClick = (answer: IQuestionDialogAnswer) => {\n setCanShowAnswers(false);\n if (answer.nextQuestionId) {\n // if there is a next question, go to it\n setCurrentQuestion(\n questions.find((question) => question.id === answer.nextQuestionId)!\n );\n } else {\n // else, finish dialog!\n onClose();\n }\n };\n\n const onRenderCurrentAnswers = () => {\n const answerIds = currentQuestion.answerIds;\n if (!answerIds) {\n return null;\n }\n\n const answers = onGetAnswers(answerIds);\n\n if (!answers) {\n return null;\n }\n\n return answers.map((answer) => {\n const isSelected = currentAnswer?.id === answer?.id;\n const selectedColor = isSelected ? 'yellow' : 'white';\n\n if (answer) {\n return (\n <AnswerRow key={`answer_${answer.id}`}>\n <AnswerSelectedIcon color={selectedColor}>\n {isSelected ? 'X' : null}\n </AnswerSelectedIcon>\n\n <Answer\n key={answer.id}\n onClick={() => onAnswerClick(answer)}\n color={selectedColor}\n >\n {answer.text}\n </Answer>\n </AnswerRow>\n );\n }\n\n return null;\n });\n };\n\n return (\n <Container>\n <QuestionContainer>\n <DynamicText\n text={currentQuestion.text}\n onStart={() => setCanShowAnswers(false)}\n onFinish={() => setCanShowAnswers(true)}\n />\n </QuestionContainer>\n\n {canShowAnswers && (\n <AnswersContainer>{onRenderCurrentAnswers()}</AnswersContainer>\n )}\n </Container>\n );\n};\n\nconst Container = styled.div`\n display: flex;\n\n word-break: break-all;\n\n box-sizing: border-box;\n justify-content: flex-start;\n align-items: flex-start;\n flex-wrap: wrap;\n`;\n\nconst QuestionContainer = styled.div`\n flex: 100%;\n width: 100%;\n`;\n\nconst AnswersContainer = styled.div`\n flex: 100%;\n`;\n\ninterface IAnswerProps {\n color: string;\n}\n\nconst Answer = styled.p<IAnswerProps>`\n flex: auto;\n color: ${(props) => props.color} !important;\n font-size: 0.65rem !important;\n background: inherit;\n border: none;\n`;\n\nconst AnswerSelectedIcon = styled.span<IAnswerProps>`\n flex: 5% 0 0;\n color: ${(props) => props.color} !important;\n`;\n\nconst AnswerRow = styled.div`\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n margin-bottom: 0.5rem;\n height: 22px;\n\n p {\n line-height: unset;\n margin-top: 0;\n margin-bottom: 0rem;\n }\n`;\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { RPGUIContainer, RPGUIContainerTypes } from '../RPGUIContainer';\nimport { RPGUIRoot } from '../RPGUIRoot';\nimport aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';\nimport pressSpaceGif from './img/space.gif';\nimport { NPCDialogText } from './NPCDialogText';\nimport {\n IQuestionDialog,\n IQuestionDialogAnswer,\n QuestionDialog,\n} from './QuestionDialog/QuestionDialog';\n\nexport enum NPCDialogType {\n TextOnly = 'TextOnly',\n TextAndThumbnail = 'TextAndThumbnail',\n}\n\nexport interface INPCDialogProps {\n text?: string;\n type: NPCDialogType;\n imagePath?: string;\n onClose?: () => void;\n isQuestionDialog?: boolean;\n answers?: IQuestionDialogAnswer[];\n questions?: IQuestionDialog[];\n}\n\nexport const NPCDialog: React.FC<INPCDialogProps> = ({\n text,\n type,\n onClose,\n imagePath,\n isQuestionDialog = false,\n questions,\n answers,\n}) => {\n const [showGoNextIndicator, setShowGoNextIndicator] =\n useState<boolean>(false);\n\n return (\n <RPGUIRoot>\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 </RPGUIRoot>\n );\n};\n\nconst Container = styled.div`\n display: flex;\n width: 100%;\n height: 100%;\n\n box-sizing: border-box;\n justify-content: center;\n align-items: flex-start;\n position: relative;\n`;\n\ninterface ITextContainerProps {\n flex: string;\n}\n\nconst TextContainer = styled.div<ITextContainerProps>`\n flex: ${({ flex }) => flex} 0 0;\n width: 355px;\n`;\n\nconst ThumbnailContainer = styled.div`\n flex: 30% 0 0;\n display: flex;\n justify-content: flex-end;\n`;\n\nconst NPCThumbnail = styled.img`\n image-rendering: pixelated;\n height: 128px;\n width: 128px;\n`;\n\ninterface IPressSpaceIndicatorProps {\n right: string;\n}\n\nconst PressSpaceIndicator = styled.img<IPressSpaceIndicatorProps>`\n position: absolute;\n right: ${({ right }) => right};\n bottom: 1rem;\n height: 20.7px;\n image-rendering: -webkit-optimize-contrast;\n`;\n","import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { v4 as uuidv4 } from 'uuid';\nimport { useEventListener } from '../hooks/useEventListener';\nimport { RPGUIRoot, _RPGUI } from './RPGUIRoot';\n\nexport enum RangeSliderType {\n Slider = 'rpgui-slider',\n GoldSlider = 'rpgui-slider golden',\n}\n\nexport interface IRangeSliderProps {\n type: RangeSliderType;\n valueMin: number;\n valueMax: number;\n width: string;\n onChange: (value: number) => void;\n}\n\nexport const RangeSlider: React.FC<IRangeSliderProps> = ({\n type,\n valueMin,\n valueMax,\n width,\n onChange,\n}) => {\n const sliderId = uuidv4();\n\n const [wasMouseDownFirst, setWasMouseDownFirst] = useState<boolean>(false);\n\n useEventListener('mouseup', () => {\n if (wasMouseDownFirst) {\n onHandleMouseUp();\n }\n setWasMouseDownFirst(false);\n });\n\n const onHandleMouseUp = () => {\n const rpguiSlider = document.getElementById(`rpgui-slider-${sliderId}`);\n const value = _RPGUI.get_value(rpguiSlider);\n\n onChange(Number(value));\n };\n\n return (\n <RPGUIRoot>\n <div\n onMouseUp={onHandleMouseUp}\n onMouseDown={() => setWasMouseDownFirst(true)}\n >\n <Input\n className={\n type === RangeSliderType.Slider\n ? RangeSliderType.Slider\n : RangeSliderType.GoldSlider\n }\n type=\"range\"\n style={{ width: width }}\n min={valueMin}\n max={valueMax}\n id={`rpgui-slider-${sliderId}`}\n />\n </div>\n </RPGUIRoot>\n );\n};\n\nconst Input = styled.input`\n opacity: 0;\n`;\n"],"names":["_RPGUI","RPGUI","RPGUIRoot","children","React","className","IButtonTypes","Button","type","props","ListMenu","options","onSelected","x","y","Container","style","overflow","map","params","ListElement","key","text","onClick","id","styled","div","li","RPGUIContainerTypes","RPGUIContainer","width","height","img","chunkString","str","length","match","RegExp","DynamicText","onFinish","onStart","useState","textState","setTextState","useEffect","i","interval","setInterval","substring","clearInterval","TextContainer","p","NPCDialogText","onClose","onEndStep","onStartStep","textChunks","chunkIndex","setChunkIndex","onHandleSpacePress","event","code","hasNextChunk","prev","document","addEventListener","removeEventListener","useEventListener","handler","el","window","savedHandler","useRef","current","listener","e","QuestionDialog","questions","answers","currentQuestion","setCurrentQuestion","canShowAnswers","setCanShowAnswers","onGetFirstAnswer","answerIds","firstAnswerId","find","answer","currentAnswer","setCurrentAnswer","onGetAnswers","answerId","onKeyPress","nextAnswerIndex","findIndex","nextAnswerID","nextAnswer","previousAnswerIndex","previousAnswerID","previousAnswer","pop","nextQuestionId","question","onAnswerClick","onRenderCurrentAnswers","isSelected","selectedColor","AnswerRow","AnswerSelectedIcon","color","Answer","QuestionContainer","AnswersContainer","span","NPCDialogType","NPCDialog","imagePath","isQuestionDialog","showGoNextIndicator","setShowGoNextIndicator","FramedGold","flex","TextAndThumbnail","ThumbnailContainer","NPCThumbnail","src","aliceDefaultThumbnail","PressSpaceIndicator","right","TextOnly","pressSpaceGif","RangeSliderType","RangeSlider","valueMin","valueMax","onChange","sliderId","uuidv4","wasMouseDownFirst","setWasMouseDownFirst","onHandleMouseUp","rpguiSlider","getElementById","value","get_value","Number","onMouseUp","onMouseDown","Input","Slider","GoldSlider","min","max","input"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { RPGUIRoot } from './RPGUIRoot';
|
|
3
|
+
|
|
4
|
+
export enum IButtonTypes {
|
|
5
|
+
RPGUIButton = 'rpgui-button',
|
|
6
|
+
RPGUIGoldButton = 'rpgui-button golden',
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export interface IButtonsProps {
|
|
10
|
+
children: React.ReactNode;
|
|
11
|
+
type: IButtonTypes;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export const Button: React.FC<IButtonsProps> = ({
|
|
15
|
+
children,
|
|
16
|
+
type,
|
|
17
|
+
...props
|
|
18
|
+
}) => {
|
|
19
|
+
return (
|
|
20
|
+
<RPGUIRoot>
|
|
21
|
+
<button className={type} type="button" {...props}>
|
|
22
|
+
<p>{children}</p>
|
|
23
|
+
</button>
|
|
24
|
+
</RPGUIRoot>
|
|
25
|
+
);
|
|
26
|
+
};
|