@rpg-engine/long-bow 0.1.52 → 0.1.56

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';