@rpg-engine/long-bow 0.1.794 → 0.2.0

package/src/components/NPCDialog/QuestionDialog/QuestionDialog.tsx

@@ -1,242 +1,237 @@
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { useEventListener } from '../../../hooks/useEventListener';
-import { DynamicText } from '../../typography/DynamicText';
-
-export interface IQuestionDialogAnswer {
-  id: number;
-  text: string;
-  nextQuestionId?: number;
-}
-
-export interface IQuestionDialog {
-  id: number;
-  text: string;
-  answerIds?: number[];
-}
-
-export interface IProps {
-  questions: IQuestionDialog[];
-  answers: IQuestionDialogAnswer[];
-  onClose: () => void;
-}
-
-export const QuestionDialog: React.FC<IProps> = ({
-  questions,
-  answers,
-  onClose,
-}) => {
-  const [currentQuestion, setCurrentQuestion] = useState(questions[0]);
-
-  const [canShowAnswers, setCanShowAnswers] = useState<boolean>(false);
-
-  const onGetFirstAnswer = () => {
-    if (!currentQuestion.answerIds || currentQuestion.answerIds.length === 0) {
-      return null;
-    }
-
-    const firstAnswerId = currentQuestion.answerIds![0];
-
-    return answers.find(answer => answer.id === firstAnswerId);
-  };
-
-  const [
-    currentAnswer,
-    setCurrentAnswer,
-  ] = useState<IQuestionDialogAnswer | null>(onGetFirstAnswer()!);
-
-  useEffect(() => {
-    setCurrentAnswer(onGetFirstAnswer()!);
-  }, [currentQuestion]);
-
-  const onGetAnswers = (answerIds: number[]) => {
-    return answerIds.map((answerId: number) =>
-      answers.find(answer => answer.id === answerId)
-    );
-  };
-
-  const onKeyPress = (e: KeyboardEvent) => {
-    switch (e.key) {
-      case 'ArrowDown':
-        // select next answer, if any.
-        // if no next answer, select first answer
-        // const nextAnswer = onGetAnswers(currentQuestion.answerIds!).find(
-        //   (answer) => answer?.id === currentAnswer!.id + 1
-        // );
-
-        const nextAnswerIndex = onGetAnswers(
-          currentQuestion.answerIds!
-        ).findIndex(answer => answer?.id === currentAnswer!.id + 1);
-
-        const nextAnswerID = currentQuestion.answerIds![nextAnswerIndex];
-
-        // console.log(nextAnswerIndex);
-
-        const nextAnswer = onGetAnswers(currentQuestion.answerIds!).find(
-          answer => answer?.id === nextAnswerID
-        );
-
-        setCurrentAnswer(nextAnswer || onGetFirstAnswer()!);
-
-        break;
-      case 'ArrowUp':
-        // select previous answer, if any.
-        // if no previous answer, select last answer
-
-        const previousAnswerIndex = onGetAnswers(
-          currentQuestion.answerIds!
-        ).findIndex(answer => answer?.id === currentAnswer!.id - 1);
-
-        const previousAnswerID =
-          currentQuestion.answerIds &&
-          currentQuestion.answerIds[previousAnswerIndex];
-
-        const previousAnswer = onGetAnswers(currentQuestion.answerIds!).find(
-          answer => answer?.id === previousAnswerID
-        );
-
-        if (previousAnswer) {
-          setCurrentAnswer(previousAnswer);
-        } else {
-          setCurrentAnswer(onGetAnswers(currentQuestion.answerIds!).pop()!);
-        }
-
-        break;
-      case 'Enter':
-        setCanShowAnswers(false);
-
-        if (!currentAnswer?.nextQuestionId) {
-          onClose();
-          return;
-        } else {
-          setCurrentQuestion(
-            questions.find(
-              question => question.id === currentAnswer!.nextQuestionId
-            )!
-          );
-        }
-
-        break;
-    }
-  };
-  useEventListener('keydown', onKeyPress);
-
-  const onAnswerClick = (answer: IQuestionDialogAnswer) => {
-    setCanShowAnswers(false);
-    if (answer.nextQuestionId) {
-      // if there is a next question, go to it
-      setCurrentQuestion(
-        questions.find(question => question.id === answer.nextQuestionId)!
-      );
-    } else {
-      // else, finish dialog!
-      onClose();
-    }
-  };
-
-  const onRenderCurrentAnswers = () => {
-    const answerIds = currentQuestion.answerIds;
-    if (!answerIds) {
-      return null;
-    }
-
-    const answers = onGetAnswers(answerIds);
-
-    if (!answers) {
-      return null;
-    }
-
-    return answers.map(answer => {
-      const isSelected = currentAnswer?.id === answer?.id;
-      const selectedColor = isSelected ? 'yellow' : 'white';
-
-      if (answer) {
-        return (
-          <AnswerRow key={`answer_${answer.id}`}>
-            <AnswerSelectedIcon color={selectedColor}>
-              {isSelected ? 'X' : null}
-            </AnswerSelectedIcon>
-
-            <Answer
-              key={answer.id}
-              onClick={() => onAnswerClick(answer)}
-              color={selectedColor}
-            >
-              {answer.text}
-            </Answer>
-          </AnswerRow>
-        );
-      }
-
-      return null;
-    });
-  };
-
-  return (
-    <Container>
-      <QuestionContainer>
-        <DynamicText
-          text={currentQuestion.text}
-          onStart={() => setCanShowAnswers(false)}
-          onFinish={() => setCanShowAnswers(true)}
-        />
-      </QuestionContainer>
-
-      {canShowAnswers && (
-        <AnswersContainer>{onRenderCurrentAnswers()}</AnswersContainer>
-      )}
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  display: flex;
-
-  word-break: break-all;
-
-  box-sizing: border-box;
-  justify-content: flex-start;
-  align-items: flex-start;
-  flex-wrap: wrap;
-`;
-
-const QuestionContainer = styled.div`
-  flex: 100%;
-  width: 100%;
-`;
-
-const AnswersContainer = styled.div`
-  flex: 100%;
-`;
-
-interface IAnswerProps {
-  color: string;
-}
-
-const Answer = styled.p<IAnswerProps>`
-  flex: auto;
-  color: ${props => props.color} !important;
-  font-size: 0.65rem !important;
-  background: inherit;
-  border: none;
-`;
-
-const AnswerSelectedIcon = styled.span<IAnswerProps>`
-  flex: 5% 0 0;
-  color: ${props => props.color} !important;
-`;
-
-const AnswerRow = styled.div`
-  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;
-  }
-`;
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { useEventListener } from '../../../hooks/useEventListener';
+import { DynamicText } from '../../typography/DynamicText';
+
+export interface IQuestionDialogAnswer {
+  id: number;
+  text: string;
+  nextQuestionId?: number;
+}
+
+export interface IQuestionDialog {
+  id: number;
+  text: string;
+  answerIds?: number[];
+}
+
+export interface IProps {
+  questions: IQuestionDialog[];
+  answers: IQuestionDialogAnswer[];
+  onClose: () => void;
+}
+
+export const QuestionDialog: React.FC<IProps> = ({
+  questions,
+  answers,
+  onClose,
+}) => {
+  const [currentQuestion, setCurrentQuestion] = useState(questions[0]);
+
+  const [canShowAnswers, setCanShowAnswers] = useState<boolean>(false);
+
+  const onGetFirstAnswer = () => {
+    if (!currentQuestion.answerIds || currentQuestion.answerIds.length === 0) {
+      return null;
+    }
+
+    const firstAnswerId = currentQuestion.answerIds![0];
+
+    return answers.find(answer => answer.id === firstAnswerId);
+  };
+
+  const [
+    currentAnswer,
+    setCurrentAnswer,
+  ] = useState<IQuestionDialogAnswer | null>(onGetFirstAnswer()!);
+
+  useEffect(() => {
+    setCurrentAnswer(onGetFirstAnswer()!);
+  }, [currentQuestion]);
+
+  const onGetAnswers = (answerIds: number[]) => {
+    return answerIds.map((answerId: number) =>
+      answers.find(answer => answer.id === answerId)
+    );
+  };
+
+  const onKeyPress = (e: KeyboardEvent) => {
+    switch (e.key) {
+      case 'ArrowDown':
+        // select next answer, if any.
+        // if no next answer, select first answer
+        // const nextAnswer = onGetAnswers(currentQuestion.answerIds!).find(
+        //   (answer) => answer?.id === currentAnswer!.id + 1
+        // );
+
+        const nextAnswerIndex = onGetAnswers(
+          currentQuestion.answerIds!
+        ).findIndex(answer => answer?.id === currentAnswer!.id + 1);
+
+        const nextAnswerID = currentQuestion.answerIds![nextAnswerIndex];
+
+        const nextAnswer = onGetAnswers(currentQuestion.answerIds!).find(
+          answer => answer?.id === nextAnswerID
+        );
+
+        setCurrentAnswer(nextAnswer || onGetFirstAnswer()!);
+
+        break;
+      case 'ArrowUp':
+        // select previous answer, if any.
+        // if no previous answer, select last answer
+
+        const previousAnswerIndex = onGetAnswers(
+          currentQuestion.answerIds!
+        ).findIndex(answer => answer?.id === currentAnswer!.id - 1);
+
+        const previousAnswerID =
+          currentQuestion.answerIds &&
+          currentQuestion.answerIds[previousAnswerIndex];
+
+        const previousAnswer = onGetAnswers(currentQuestion.answerIds!).find(
+          answer => answer?.id === previousAnswerID
+        );
+
+        if (previousAnswer) {
+          setCurrentAnswer(previousAnswer);
+        } else {
+          setCurrentAnswer(onGetAnswers(currentQuestion.answerIds!).pop()!);
+        }
+
+        break;
+      case 'Enter':
+        setCanShowAnswers(false);
+
+        if (!currentAnswer?.nextQuestionId) {
+          onClose();
+          return;
+        } else {
+          setCurrentQuestion(
+            questions.find(
+              question => question.id === currentAnswer!.nextQuestionId
+            )!
+          );
+        }
+
+        break;
+    }
+  };
+  useEventListener('keydown', onKeyPress);
+
+  const onAnswerClick = (answer: IQuestionDialogAnswer) => {
+    setCanShowAnswers(false);
+    if (answer.nextQuestionId) {
+      // if there is a next question, go to it
+      setCurrentQuestion(
+        questions.find(question => question.id === answer.nextQuestionId)!
+      );
+    } else {
+      // else, finish dialog!
+      onClose();
+    }
+  };
+
+  const onRenderCurrentAnswers = () => {
+    const answerIds = currentQuestion.answerIds;
+    if (!answerIds) {
+      return null;
+    }
+
+    const answers = onGetAnswers(answerIds);
+
+    if (!answers) {
+      return null;
+    }
+
+    return answers.map(answer => {
+      const isSelected = currentAnswer?.id === answer?.id;
+      const selectedColor = isSelected ? 'yellow' : 'white';
+
+      if (answer) {
+        return (
+          <AnswerRow key={`answer_${answer.id}`}>
+            <AnswerSelectedIcon color={selectedColor}>
+              {isSelected ? 'X' : null}
+            </AnswerSelectedIcon>
+
+            <Answer
+              key={answer.id}
+              onClick={() => onAnswerClick(answer)}
+              color={selectedColor}
+            >
+              {answer.text}
+            </Answer>
+          </AnswerRow>
+        );
+      }
+
+      return null;
+    });
+  };
+
+  return (
+    <Container>
+      <QuestionContainer>
+        <DynamicText
+          text={currentQuestion.text}
+          onStart={() => setCanShowAnswers(false)}
+          onFinish={() => setCanShowAnswers(true)}
+        />
+      </QuestionContainer>
+
+      {canShowAnswers && (
+        <AnswersContainer>{onRenderCurrentAnswers()}</AnswersContainer>
+      )}
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  word-break: break-all;
+  box-sizing: border-box;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: wrap;
+`;
+
+const QuestionContainer = styled.div`
+  flex: 100%;
+  width: 100%;
+`;
+
+const AnswersContainer = styled.div`
+  flex: 100%;
+`;
+
+interface IAnswerProps {
+  color: string;
+}
+
+const Answer = styled.p<IAnswerProps>`
+  flex: auto;
+  color: ${props => props.color} !important;
+  font-size: 0.65rem !important;
+  background: inherit;
+  border: none;
+`;
+
+const AnswerSelectedIcon = styled.span<IAnswerProps>`
+  flex: 5% 0 0;
+  color: ${props => props.color} !important;
+`;
+
+const AnswerRow = styled.div`
+  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;
+  }
+`;

package/src/components/ProgressBar.tsx

@@ -1,91 +1,91 @@
-import React from 'react';
-import styled from 'styled-components';
-
-export interface IBarProps {
-  max: number;
-  value: number;
-  color: 'red' | 'blue' | 'green';
-  style?: Record<string, any>;
-  displayText?: boolean;
-  percentageWidth?: number;
-  minWidth?: number;
-}
-
-export const ProgressBar: React.FC<IBarProps> = ({
-  max,
-  value,
-  color,
-  displayText = true,
-  percentageWidth = 40,
-  minWidth = 100,
-  style,
-}) => {
-  const calculatePercentageValue = function(max: number, value: number) {
-    if (value > max) {
-      value = max;
-    }
-    return (value * 100) / max;
-  };
-
-  return (
-    <Container
-      className="rpgui-progress"
-      data-value={calculatePercentageValue(max, value) / 100}
-      data-rpguitype="progress"
-      percentageWidth={percentageWidth}
-      minWidth={minWidth}
-      style={style}
-    >
-      {displayText && (
-        <TextOverlay>
-          <ProgressBarText>
-            {value}/{max}
-          </ProgressBarText>
-        </TextOverlay>
-      )}
-      <div className=" rpgui-progress-track">
-        <div
-          className={`rpgui-progress-fill ${color} `}
-          style={{
-            left: '0px',
-            width: calculatePercentageValue(max, value) + '%',
-          }}
-        ></div>
-      </div>
-      <div className=" rpgui-progress-left-edge"></div>
-      <div className=" rpgui-progress-right-edge"></div>
-    </Container>
-  );
-};
-
-const ProgressBarText = styled.span`
-  font-size: 1rem;
-  color: white;
-  text-align: center;
-  z-index: 1;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  top: 12px;
-`;
-
-const TextOverlay = styled.div`
-  width: 100%;
-  position: relative;
-`;
-
-interface IContainerProps {
-  percentageWidth?: number;
-  minWidth?: number;
-  style?: Record<string, any>;
-}
-
-const Container = styled.div<IContainerProps>`
-  display: flex;
-  flex-direction: column;
-  min-width: ${props => props.minWidth}px;
-  width: ${props => props.percentageWidth}%;
-  justify-content: start;
-  align-items: flex-start;
-  ${props => props.style}
-`;
+import React from 'react';
+import styled from 'styled-components';
+
+export interface IBarProps {
+  max: number;
+  value: number;
+  color: 'red' | 'blue' | 'green';
+  style?: Record<string, any>;
+  displayText?: boolean;
+  percentageWidth?: number;
+  minWidth?: number;
+}
+
+export const ProgressBar: React.FC<IBarProps> = ({
+  max,
+  value,
+  color,
+  displayText = true,
+  percentageWidth = 40,
+  minWidth = 100,
+  style,
+}) => {
+  const calculatePercentageValue = function(max: number, value: number) {
+    if (value > max) {
+      value = max;
+    }
+    return (value * 100) / max;
+  };
+
+  return (
+    <Container
+      className="rpgui-progress"
+      data-value={calculatePercentageValue(max, value) / 100}
+      data-rpguitype="progress"
+      percentageWidth={percentageWidth}
+      minWidth={minWidth}
+      style={style}
+    >
+      {displayText && (
+        <TextOverlay>
+          <ProgressBarText>
+            {value}/{max}
+          </ProgressBarText>
+        </TextOverlay>
+      )}
+      <div className=" rpgui-progress-track">
+        <div
+          className={`rpgui-progress-fill ${color} `}
+          style={{
+            left: '0px',
+            width: calculatePercentageValue(max, value) + '%',
+          }}
+        ></div>
+      </div>
+      <div className=" rpgui-progress-left-edge"></div>
+      <div className=" rpgui-progress-right-edge"></div>
+    </Container>
+  );
+};
+
+const ProgressBarText = styled.span`
+  font-size: 1rem;
+  color: white;
+  text-align: center;
+  z-index: 1;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 12px;
+`;
+
+const TextOverlay = styled.div`
+  width: 100%;
+  position: relative;
+`;
+
+interface IContainerProps {
+  percentageWidth?: number;
+  minWidth?: number;
+  style?: Record<string, any>;
+}
+
+const Container = styled.div<IContainerProps>`
+  display: flex;
+  flex-direction: column;
+  min-width: ${props => props.minWidth}px;
+  width: ${props => props.percentageWidth}%;
+  justify-content: start;
+  align-items: flex-start;
+  ${props => props.style}
+`;