@rpg-engine/long-bow 0.1.26 → 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/components/ListMenu.d.ts +6 -4
- 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 +94 -49
- 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 +95 -48
- 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 +13 -9
- 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\nexport interface IListMenuProps {\n x: number;\n y: number;\n options: [\n {\n id: string;\n text: string;\n }\n ];\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 <li\n key={params.text}\n onClick={() => {\n onSelected(params.id);\n }}\n >\n {params.text}\n </li>\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","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","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":"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"}
|
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,
|
|
@@ -26,7 +60,7 @@ var ListMenu = function ListMenu(_ref) {
|
|
|
26
60
|
overflow: 'hidden'
|
|
27
61
|
}
|
|
28
62
|
}, options.map(function (params) {
|
|
29
|
-
return React.createElement(
|
|
63
|
+
return React.createElement(ListElement, {
|
|
30
64
|
key: params.text,
|
|
31
65
|
onClick: function onClick() {
|
|
32
66
|
onSelected(params.id);
|
|
@@ -42,28 +76,19 @@ var Container = /*#__PURE__*/styled.div.withConfig({
|
|
|
42
76
|
}, function (props) {
|
|
43
77
|
return props.x || 0;
|
|
44
78
|
});
|
|
79
|
+
var ListElement = /*#__PURE__*/styled.li.withConfig({
|
|
80
|
+
displayName: "ListMenu__ListElement",
|
|
81
|
+
componentId: "sc-i9097t-1"
|
|
82
|
+
})(["margin-right:0.5rem;"]);
|
|
45
83
|
|
|
46
|
-
var
|
|
47
|
-
if (el === void 0) {
|
|
48
|
-
el = window;
|
|
49
|
-
}
|
|
84
|
+
var RPGUIContainerTypes;
|
|
50
85
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
var listener = function listener(e) {
|
|
58
|
-
return savedHandler.current(e);
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
el.addEventListener(type, listener);
|
|
62
|
-
return function () {
|
|
63
|
-
el.removeEventListener(type, listener);
|
|
64
|
-
};
|
|
65
|
-
}, [type, el]);
|
|
66
|
-
};
|
|
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 = {}));
|
|
67
92
|
|
|
68
93
|
var RPGUIContainer = function RPGUIContainer(_ref) {
|
|
69
94
|
var children = _ref.children,
|
|
@@ -79,8 +104,8 @@ var RPGUIContainer = function RPGUIContainer(_ref) {
|
|
|
79
104
|
};
|
|
80
105
|
var Container$1 = /*#__PURE__*/styled.div.withConfig({
|
|
81
106
|
displayName: "RPGUIContainer__Container",
|
|
82
|
-
componentId: "sc-
|
|
83
|
-
})(["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) {
|
|
84
109
|
return props.height;
|
|
85
110
|
}, function (_ref2) {
|
|
86
111
|
var width = _ref2.width;
|
|
@@ -133,7 +158,7 @@ var DynamicText = function DynamicText(_ref) {
|
|
|
133
158
|
};
|
|
134
159
|
var TextContainer = /*#__PURE__*/styled.p.withConfig({
|
|
135
160
|
displayName: "DynamicText__TextContainer",
|
|
136
|
-
componentId: "sc-
|
|
161
|
+
componentId: "sc-1ggl9nd-0"
|
|
137
162
|
})(["font-size:0.7rem !important;color:white;text-shadow:1px 1px 0px #000000;letter-spacing:1.2px;word-break:normal;"]);
|
|
138
163
|
|
|
139
164
|
var NPCDialogText = function NPCDialogText(_ref) {
|
|
@@ -176,9 +201,31 @@ var NPCDialogText = function NPCDialogText(_ref) {
|
|
|
176
201
|
};
|
|
177
202
|
var Container$2 = /*#__PURE__*/styled.div.withConfig({
|
|
178
203
|
displayName: "NPCDialogText__Container",
|
|
179
|
-
componentId: "sc-
|
|
204
|
+
componentId: "sc-1cxkdh9-0"
|
|
180
205
|
})([""]);
|
|
181
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
|
+
|
|
182
229
|
var QuestionDialog = function QuestionDialog(_ref) {
|
|
183
230
|
var questions = _ref.questions,
|
|
184
231
|
answers = _ref.answers,
|
|
@@ -336,31 +383,31 @@ var QuestionDialog = function QuestionDialog(_ref) {
|
|
|
336
383
|
};
|
|
337
384
|
var Container$3 = /*#__PURE__*/styled.div.withConfig({
|
|
338
385
|
displayName: "QuestionDialog__Container",
|
|
339
|
-
componentId: "sc-
|
|
386
|
+
componentId: "sc-bxc5u0-0"
|
|
340
387
|
})(["display:flex;word-break:break-all;box-sizing:border-box;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;"]);
|
|
341
388
|
var QuestionContainer = /*#__PURE__*/styled.div.withConfig({
|
|
342
389
|
displayName: "QuestionDialog__QuestionContainer",
|
|
343
|
-
componentId: "sc-
|
|
390
|
+
componentId: "sc-bxc5u0-1"
|
|
344
391
|
})(["flex:100%;width:100%;"]);
|
|
345
392
|
var AnswersContainer = /*#__PURE__*/styled.div.withConfig({
|
|
346
393
|
displayName: "QuestionDialog__AnswersContainer",
|
|
347
|
-
componentId: "sc-
|
|
394
|
+
componentId: "sc-bxc5u0-2"
|
|
348
395
|
})(["flex:100%;"]);
|
|
349
396
|
var Answer = /*#__PURE__*/styled.p.withConfig({
|
|
350
397
|
displayName: "QuestionDialog__Answer",
|
|
351
|
-
componentId: "sc-
|
|
398
|
+
componentId: "sc-bxc5u0-3"
|
|
352
399
|
})(["flex:auto;color:", " !important;font-size:0.65rem !important;background:inherit;border:none;"], function (props) {
|
|
353
400
|
return props.color;
|
|
354
401
|
});
|
|
355
402
|
var AnswerSelectedIcon = /*#__PURE__*/styled.span.withConfig({
|
|
356
403
|
displayName: "QuestionDialog__AnswerSelectedIcon",
|
|
357
|
-
componentId: "sc-
|
|
404
|
+
componentId: "sc-bxc5u0-4"
|
|
358
405
|
})(["flex:5% 0 0;color:", " !important;"], function (props) {
|
|
359
406
|
return props.color;
|
|
360
407
|
});
|
|
361
408
|
var AnswerRow = /*#__PURE__*/styled.div.withConfig({
|
|
362
409
|
displayName: "QuestionDialog__AnswerRow",
|
|
363
|
-
componentId: "sc-
|
|
410
|
+
componentId: "sc-bxc5u0-5"
|
|
364
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;}"]);
|
|
365
412
|
|
|
366
413
|
var NPCDialogType;
|
|
@@ -385,7 +432,7 @@ var NPCDialog = function NPCDialog(_ref) {
|
|
|
385
432
|
setShowGoNextIndicator = _useState[1];
|
|
386
433
|
|
|
387
434
|
return React.createElement(RPGUIRoot, null, React.createElement(RPGUIContainer, {
|
|
388
|
-
type:
|
|
435
|
+
type: RPGUIContainerTypes.FramedGold,
|
|
389
436
|
width: isQuestionDialog ? '600px' : '50%',
|
|
390
437
|
height: '180px'
|
|
391
438
|
}, isQuestionDialog && questions && answers ? React.createElement(React.Fragment, null, React.createElement(TextContainer$1, {
|
|
@@ -424,39 +471,39 @@ var NPCDialog = function NPCDialog(_ref) {
|
|
|
424
471
|
};
|
|
425
472
|
var Container$4 = /*#__PURE__*/styled.div.withConfig({
|
|
426
473
|
displayName: "NPCDialog__Container",
|
|
427
|
-
componentId: "sc-
|
|
474
|
+
componentId: "sc-1b4aw74-0"
|
|
428
475
|
})(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
|
|
429
476
|
var TextContainer$1 = /*#__PURE__*/styled.div.withConfig({
|
|
430
477
|
displayName: "NPCDialog__TextContainer",
|
|
431
|
-
componentId: "sc-
|
|
478
|
+
componentId: "sc-1b4aw74-1"
|
|
432
479
|
})(["flex:", " 0 0;width:355px;"], function (_ref2) {
|
|
433
480
|
var flex = _ref2.flex;
|
|
434
481
|
return flex;
|
|
435
482
|
});
|
|
436
483
|
var ThumbnailContainer = /*#__PURE__*/styled.div.withConfig({
|
|
437
484
|
displayName: "NPCDialog__ThumbnailContainer",
|
|
438
|
-
componentId: "sc-
|
|
485
|
+
componentId: "sc-1b4aw74-2"
|
|
439
486
|
})(["flex:30% 0 0;display:flex;justify-content:flex-end;"]);
|
|
440
487
|
var NPCThumbnail = /*#__PURE__*/styled.img.withConfig({
|
|
441
488
|
displayName: "NPCDialog__NPCThumbnail",
|
|
442
|
-
componentId: "sc-
|
|
489
|
+
componentId: "sc-1b4aw74-3"
|
|
443
490
|
})(["image-rendering:pixelated;height:128px;width:128px;"]);
|
|
444
491
|
var PressSpaceIndicator = /*#__PURE__*/styled.img.withConfig({
|
|
445
492
|
displayName: "NPCDialog__PressSpaceIndicator",
|
|
446
|
-
componentId: "sc-
|
|
493
|
+
componentId: "sc-1b4aw74-4"
|
|
447
494
|
})(["position:absolute;right:", ";bottom:1rem;height:20.7px;image-rendering:-webkit-optimize-contrast;"], function (_ref3) {
|
|
448
495
|
var right = _ref3.right;
|
|
449
496
|
return right;
|
|
450
497
|
});
|
|
451
498
|
|
|
452
|
-
var
|
|
499
|
+
var RangeSliderType;
|
|
453
500
|
|
|
454
|
-
(function (
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
})(
|
|
501
|
+
(function (RangeSliderType) {
|
|
502
|
+
RangeSliderType["Slider"] = "rpgui-slider";
|
|
503
|
+
RangeSliderType["GoldSlider"] = "rpgui-slider golden";
|
|
504
|
+
})(RangeSliderType || (RangeSliderType = {}));
|
|
458
505
|
|
|
459
|
-
var
|
|
506
|
+
var RangeSlider = function RangeSlider(_ref) {
|
|
460
507
|
var type = _ref.type,
|
|
461
508
|
valueMin = _ref.valueMin,
|
|
462
509
|
valueMax = _ref.valueMax,
|
|
@@ -490,7 +537,7 @@ var RPGUISlider = function RPGUISlider(_ref) {
|
|
|
490
537
|
return setWasMouseDownFirst(true);
|
|
491
538
|
}
|
|
492
539
|
}, React.createElement(Input, {
|
|
493
|
-
className: type ===
|
|
540
|
+
className: type === RangeSliderType.Slider ? RangeSliderType.Slider : RangeSliderType.GoldSlider,
|
|
494
541
|
type: "range",
|
|
495
542
|
style: {
|
|
496
543
|
width: width
|
|
@@ -501,9 +548,9 @@ var RPGUISlider = function RPGUISlider(_ref) {
|
|
|
501
548
|
})));
|
|
502
549
|
};
|
|
503
550
|
var Input = /*#__PURE__*/styled.input.withConfig({
|
|
504
|
-
displayName: "
|
|
505
|
-
componentId: "sc-
|
|
551
|
+
displayName: "RangeSlider__Input",
|
|
552
|
+
componentId: "sc-v8mte9-0"
|
|
506
553
|
})(["opacity:0;"]);
|
|
507
554
|
|
|
508
|
-
export { DynamicText, ListMenu, NPCDialog, NPCDialogType, QuestionDialog, RPGUIContainer, RPGUIRoot,
|
|
555
|
+
export { Button, DynamicText, IButtonTypes, ListMenu, NPCDialog, NPCDialogType, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, _RPGUI, useEventListener };
|
|
509
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\nexport interface IListMenuProps {\n x: number;\n y: number;\n options: [\n {\n id: string;\n text: string;\n }\n ];\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 <li\n key={params.text}\n onClick={() => {\n onSelected(params.id);\n }}\n >\n {params.text}\n </li>\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","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","key","text","onClick","id","styled","div","props","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
|
+
};
|