@rpg-engine/long-bow 0.1.51 → 0.1.55

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

@@ -37,11 +37,13 @@ export const QuestionDialog: React.FC<IProps> = ({
 
     const firstAnswerId = currentQuestion.answerIds![0];
 
-    return answers.find((answer) => answer.id === firstAnswerId);
+    return answers.find(answer => answer.id === firstAnswerId);
   };
 
-  const [currentAnswer, setCurrentAnswer] =
-    useState<IQuestionDialogAnswer | null>(onGetFirstAnswer()!);
+  const [
+    currentAnswer,
+    setCurrentAnswer,
+  ] = useState<IQuestionDialogAnswer | null>(onGetFirstAnswer()!);
 
   useEffect(() => {
     setCurrentAnswer(onGetFirstAnswer()!);
@@ -49,7 +51,7 @@ export const QuestionDialog: React.FC<IProps> = ({
 
   const onGetAnswers = (answerIds: number[]) => {
     return answerIds.map((answerId: number) =>
-      answers.find((answer) => answer.id === answerId)
+      answers.find(answer => answer.id === answerId)
     );
   };
 
@@ -64,14 +66,14 @@ export const QuestionDialog: React.FC<IProps> = ({
 
         const nextAnswerIndex = onGetAnswers(
           currentQuestion.answerIds!
-        ).findIndex((answer) => answer?.id === currentAnswer!.id + 1);
+        ).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
+          answer => answer?.id === nextAnswerID
         );
 
         setCurrentAnswer(nextAnswer || onGetFirstAnswer()!);
@@ -83,14 +85,14 @@ export const QuestionDialog: React.FC<IProps> = ({
 
         const previousAnswerIndex = onGetAnswers(
           currentQuestion.answerIds!
-        ).findIndex((answer) => answer?.id === currentAnswer!.id - 1);
+        ).findIndex(answer => answer?.id === currentAnswer!.id - 1);
 
         const previousAnswerID =
           currentQuestion.answerIds &&
           currentQuestion.answerIds[previousAnswerIndex];
 
         const previousAnswer = onGetAnswers(currentQuestion.answerIds!).find(
-          (answer) => answer?.id === previousAnswerID
+          answer => answer?.id === previousAnswerID
         );
 
         if (previousAnswer) {
@@ -109,7 +111,7 @@ export const QuestionDialog: React.FC<IProps> = ({
         } else {
           setCurrentQuestion(
             questions.find(
-              (question) => question.id === currentAnswer!.nextQuestionId
+              question => question.id === currentAnswer!.nextQuestionId
             )!
           );
         }
@@ -124,7 +126,7 @@ export const QuestionDialog: React.FC<IProps> = ({
     if (answer.nextQuestionId) {
       // if there is a next question, go to it
       setCurrentQuestion(
-        questions.find((question) => question.id === answer.nextQuestionId)!
+        questions.find(question => question.id === answer.nextQuestionId)!
       );
     } else {
       // else, finish dialog!
@@ -144,7 +146,7 @@ export const QuestionDialog: React.FC<IProps> = ({
       return null;
     }
 
-    return answers.map((answer) => {
+    return answers.map(answer => {
       const isSelected = currentAnswer?.id === answer?.id;
       const selectedColor = isSelected ? 'yellow' : 'white';
 
@@ -213,7 +215,7 @@ interface IAnswerProps {
 
 const Answer = styled.p<IAnswerProps>`
   flex: auto;
-  color: ${(props) => props.color} !important;
+  color: ${props => props.color} !important;
   font-size: 0.65rem !important;
   background: inherit;
   border: none;
@@ -221,7 +223,7 @@ const Answer = styled.p<IAnswerProps>`
 
 const AnswerSelectedIcon = styled.span<IAnswerProps>`
   flex: 5% 0 0;
-  color: ${(props) => props.color} !important;
+  color: ${props => props.color} !important;
 `;
 
 const AnswerRow = styled.div`

package/src/components/ProgressBar.tsx

@@ -20,7 +20,7 @@ export const ProgressBar: React.FC<IBarProps> = ({
   minWidth = 100,
   style,
 }) => {
-  const calculatePercentageValue = function (max: number, value: number) {
+  const calculatePercentageValue = function(max: number, value: number) {
     if (value > max) {
       value = max;
     }
@@ -83,9 +83,9 @@ interface IContainerProps {
 const Container = styled.div<IContainerProps>`
   display: flex;
   flex-direction: column;
-  min-width: ${(props) => props.minWidth}px;
-  width: ${(props) => props.percentageWidth}%;
+  min-width: ${props => props.minWidth}px;
+  width: ${props => props.percentageWidth}%;
   justify-content: start;
   align-items: flex-start;
-  ${(props) => props.style}
+  ${props => props.style}
 `;

package/src/components/RPGUIContainer.tsx

@@ -39,7 +39,7 @@ interface IContainerProps {
 }
 
 const Container = styled.div<IContainerProps>`
-  height: ${(props) => props.height};
+  height: ${props => props.height};
   width: ${({ width }) => width};
   display: flex;
   flex-wrap: wrap;

package/src/components/RadioButton.tsx

@@ -33,7 +33,7 @@ export const InputRadio: React.FC<IRadioProps> = ({
 
   return (
     <div id="elemento-radio">
-      {items.map((element) => {
+      {items.map(element => {
         return (
           <>
             <input

package/src/components/SimpleProgressBar.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import styled from 'styled-components';
+
+interface IProps {
+  value: number;
+  height?: string;
+  bgColor?: string;
+}
+
+export const SimpleProgressBar: React.FC<IProps> = ({
+  value,
+
+  bgColor = 'red',
+}) => {
+  return (
+    <Container>
+      <ProgressBarContainer>
+        <BackgroundBar>
+          <Progress value={value} bgColor={bgColor} />
+        </BackgroundBar>
+      </ProgressBarContainer>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+`;
+
+const BackgroundBar = styled.span`
+  background-color: rgba(0, 0, 0, 0.075);
+`;
+
+interface IProgressProps {
+  value: number;
+  bgColor: string;
+}
+
+const Progress = styled.span`
+  background-color: ${(props: IProgressProps) => props.bgColor};
+  width: ${(props: IProgressProps) => props.value}%;
+`;
+
+const ProgressBarContainer = styled.div`
+  border-radius: 60px;
+  border: 1px solid #282424;
+  overflow: hidden;
+  width: 100%;
+  span {
+    display: block;
+    height: 100%;
+  }
+
+  height: 8px;
+`;

package/src/components/SkillProgressBar.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import styled from 'styled-components';
+import imgSrcTemplate from './imgExp.png';
+import { SimpleProgressBar } from './SimpleProgressBar';
+
+export interface ISkillProgressBarProps {
+  value: number;
+
+  height: string;
+  bgColor: string;
+  titleName: string;
+
+  logoSrc?: string;
+}
+
+export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
+  value,
+  bgColor,
+  titleName,
+
+  logoSrc = imgSrcTemplate,
+}) => {
+  return (
+    <>
+      <ProgressTitle>
+        <TitleName>{titleName}</TitleName>
+        <ValueDisplay>{value}</ValueDisplay>
+      </ProgressTitle>
+      <ProgressBody>
+        <ProgressIconContainer>
+          <Icon src={logoSrc} />
+        </ProgressIconContainer>
+
+        <SimpleProgressBar value={value} bgColor={bgColor} />
+      </ProgressBody>
+    </>
+  );
+};
+
+const TitleName = styled.span`
+  margin-left: 5px;
+`;
+
+const ValueDisplay = styled.span``;
+
+const ProgressIconContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const ProgressBody = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+const ProgressTitle = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  span {
+    font-size: 0.6rem;
+  }
+`;
+
+const Icon = styled.img`
+  margin-right: 10px;
+  height: 30px;
+`;

package/src/components/Truncate.tsx

@@ -19,7 +19,7 @@ const Container = styled.div<IContainerProps>`
   display: -webkit-box;
   max-width: 100%;
   max-height: 100%;
-  -webkit-line-clamp: ${(props) => props.maxLines};
+  -webkit-line-clamp: ${props => props.maxLines};
   -webkit-box-orient: vertical;
   overflow: hidden;
 `;

package/src/components/shared/Column.tsx

@@ -8,9 +8,9 @@ interface IColumn {
 }
 
 export const Column = styled.div<IColumn>`
-  flex: ${(props) => props.flex || 'auto'};
+  flex: ${props => props.flex || 'auto'};
   display: flex;
-  flex-wrap: ${(props) => props.flexWrap || 'nowrap'};
-  align-items: ${(props) => props.alignItems || 'flex-start'};
-  justify-content: ${(props) => props.justifyContent || 'flex-start'};
+  flex-wrap: ${props => props.flexWrap || 'nowrap'};
+  align-items: ${props => props.alignItems || 'flex-start'};
+  justify-content: ${props => props.justifyContent || 'flex-start'};
 `;

package/src/hooks/useEventListener.ts

@@ -10,7 +10,7 @@ export const useEventListener = (type, handler, el = window) => {
 
   React.useEffect(() => {
     //@ts-ignore
-    const listener = (e) => savedHandler.current(e);
+    const listener = e => savedHandler.current(e);
 
     el.addEventListener(type, listener);
 

package/src/index.tsx

@@ -1,6 +1,7 @@
 export * from './components/Button';
-export * from './components/CheckButton';
 export * from './components/Chat/Chat';
+export * from './components/CheckButton';
+export * from './components/DraggableContainer';
 export * from './components/Dropdown';
 export * from './components/Input';
 export * from './components/ListMenu';
@@ -11,6 +12,7 @@ export * from './components/RadioButton';
 export * from './components/RangeSlider';
 export * from './components/RPGUIContainer';
 export * from './components/RPGUIRoot';
+export * from './components/SkillProgressBar';
 export * from './components/TextArea';
 export * from './components/Truncate';
 export * from './components/typography/DynamicText';