@rpg-engine/long-bow 0.3.50 → 0.3.52

package/src/components/SimpleProgressBar.tsx

@@ -1,62 +1,62 @@
-import React from 'react';
-import styled from 'styled-components';
-
-export interface ISimpleProgressBarProps {
-  value: number;
-  bgColor?: string;
-  margin?: number;
-}
-
-export const SimpleProgressBar: React.FC<ISimpleProgressBarProps> = ({
-  value,
-  bgColor = 'red',
-  margin = 20,
-}) => {
-  return (
-    <Container className="simple-progress-bar">
-      <ProgressBarContainer margin={margin}>
-        <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 ISimpleProgressBarThemeProps {
-  value: number;
-  bgColor: string;
-}
-
-const Progress = styled.span`
-  background-color: ${(props: ISimpleProgressBarThemeProps) => props.bgColor};
-  width: ${(props: ISimpleProgressBarThemeProps) => props.value}%;
-`;
-
-interface ISimpleProgressBarTheme2Props {
-  margin: number;
-}
-
-const ProgressBarContainer = styled.div`
-  border-radius: 60px;
-  border: 1px solid #282424;
-  overflow: hidden;
-  width: 100%;
-  span {
-    display: block;
-    height: 100%;
-  }
-  height: 8px;
-  margin-left: ${(props: ISimpleProgressBarTheme2Props) => props.margin}px;
-`;
+import React from 'react';
+import styled from 'styled-components';
+
+export interface ISimpleProgressBarProps {
+  value: number;
+  bgColor?: string;
+  margin?: number;
+}
+
+export const SimpleProgressBar: React.FC<ISimpleProgressBarProps> = ({
+  value,
+  bgColor = 'red',
+  margin = 20,
+}) => {
+  return (
+    <Container className="simple-progress-bar">
+      <ProgressBarContainer margin={margin}>
+        <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 ISimpleProgressBarThemeProps {
+  value: number;
+  bgColor: string;
+}
+
+const Progress = styled.span`
+  background-color: ${(props: ISimpleProgressBarThemeProps) => props.bgColor};
+  width: ${(props: ISimpleProgressBarThemeProps) => props.value}%;
+`;
+
+interface ISimpleProgressBarTheme2Props {
+  margin: number;
+}
+
+const ProgressBarContainer = styled.div`
+  border-radius: 60px;
+  border: 1px solid #282424;
+  overflow: hidden;
+  width: 100%;
+  span {
+    display: block;
+    height: 100%;
+  }
+  height: 8px;
+  margin-left: ${(props: ISimpleProgressBarTheme2Props) => props.margin}px;
+`;

package/src/components/SkillProgressBar.tsx

@@ -1,133 +1,133 @@
-import { getSPForLevel } from '@rpg-engine/shared';
-import React from 'react';
-import styled from 'styled-components';
-import { ErrorBoundary } from './Item/Inventory/ErrorBoundary';
-import { SpriteFromAtlas } from './shared/SpriteFromAtlas';
-import { SimpleProgressBar } from './SimpleProgressBar';
-
-export interface ISkillProgressBarProps {
-  skillName: string;
-  bgColor: string;
-  level: number;
-  skillPoints: number;
-  skillPointsToNextLevel?: number;
-  texturePath: string;
-  showSkillPoints?: boolean;
-  atlasJSON: any;
-  atlasIMG: any;
-}
-
-export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
-  bgColor,
-  skillName,
-  level,
-  skillPoints,
-  skillPointsToNextLevel,
-  texturePath,
-  showSkillPoints = true,
-  atlasIMG,
-  atlasJSON,
-}) => {
-  if (!skillPointsToNextLevel) {
-    skillPointsToNextLevel = getSPForLevel(level + 1);
-  }
-
-  const nextLevelSPWillbe = skillPoints + skillPointsToNextLevel;
-
-  const ratio = (skillPoints / nextLevelSPWillbe) * 100;
-
-  return (
-    <>
-      <ProgressTitle>
-        <TitleName>{skillName}</TitleName>
-        <ValueDisplay>lv {level}</ValueDisplay>
-      </ProgressTitle>
-      <ProgressBody>
-        <ProgressIconContainer>
-          {atlasIMG && atlasJSON ? (
-            <SpriteContainer>
-              <ErrorBoundary>
-                <SpriteFromAtlas
-                  atlasIMG={atlasIMG}
-                  atlasJSON={atlasJSON}
-                  spriteKey={texturePath}
-                  imgScale={1}
-                  grayScale
-                  opacity={0.5}
-                />
-              </ErrorBoundary>
-            </SpriteContainer>
-          ) : (
-            <></>
-          )}
-        </ProgressIconContainer>
-
-        <ProgressBarContainer>
-          <SimpleProgressBar value={ratio} bgColor={bgColor} />
-        </ProgressBarContainer>
-      </ProgressBody>
-      {showSkillPoints && (
-        <SkillDisplayContainer>
-          <SkillPointsDisplay>
-            {skillPoints}/{nextLevelSPWillbe}
-          </SkillPointsDisplay>
-        </SkillDisplayContainer>
-      )}
-    </>
-  );
-};
-
-const ProgressBarContainer = styled.div`
-  position: relative;
-  top: 8px;
-  width: 100%;
-  height: auto;
-`;
-
-const SpriteContainer = styled.div`
-  position: relative;
-  top: -3px;
-  left: 0;
-`;
-
-const SkillDisplayContainer = styled.div`
-  margin: 0 auto;
-
-  p {
-    margin: 0;
-  }
-`;
-
-const SkillPointsDisplay = styled.p`
-  font-size: 0.6rem !important;
-  font-weight: bold;
-  text-align: center;
-`;
-
-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;
-  width: 100%;
-`;
-
-const ProgressTitle = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  span {
-    font-size: 0.6rem;
-  }
-`;
+import { getSPForLevel } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { ErrorBoundary } from './Item/Inventory/ErrorBoundary';
+import { SpriteFromAtlas } from './shared/SpriteFromAtlas';
+import { SimpleProgressBar } from './SimpleProgressBar';
+
+export interface ISkillProgressBarProps {
+  skillName: string;
+  bgColor: string;
+  level: number;
+  skillPoints: number;
+  skillPointsToNextLevel?: number;
+  texturePath: string;
+  showSkillPoints?: boolean;
+  atlasJSON: any;
+  atlasIMG: any;
+}
+
+export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
+  bgColor,
+  skillName,
+  level,
+  skillPoints,
+  skillPointsToNextLevel,
+  texturePath,
+  showSkillPoints = true,
+  atlasIMG,
+  atlasJSON,
+}) => {
+  if (!skillPointsToNextLevel) {
+    skillPointsToNextLevel = getSPForLevel(level + 1);
+  }
+
+  const nextLevelSPWillbe = skillPoints + skillPointsToNextLevel;
+
+  const ratio = (skillPoints / nextLevelSPWillbe) * 100;
+
+  return (
+    <>
+      <ProgressTitle>
+        <TitleName>{skillName}</TitleName>
+        <ValueDisplay>lv {level}</ValueDisplay>
+      </ProgressTitle>
+      <ProgressBody>
+        <ProgressIconContainer>
+          {atlasIMG && atlasJSON ? (
+            <SpriteContainer>
+              <ErrorBoundary>
+                <SpriteFromAtlas
+                  atlasIMG={atlasIMG}
+                  atlasJSON={atlasJSON}
+                  spriteKey={texturePath}
+                  imgScale={1}
+                  grayScale
+                  opacity={0.5}
+                />
+              </ErrorBoundary>
+            </SpriteContainer>
+          ) : (
+            <></>
+          )}
+        </ProgressIconContainer>
+
+        <ProgressBarContainer>
+          <SimpleProgressBar value={ratio} bgColor={bgColor} />
+        </ProgressBarContainer>
+      </ProgressBody>
+      {showSkillPoints && (
+        <SkillDisplayContainer>
+          <SkillPointsDisplay>
+            {skillPoints}/{nextLevelSPWillbe}
+          </SkillPointsDisplay>
+        </SkillDisplayContainer>
+      )}
+    </>
+  );
+};
+
+const ProgressBarContainer = styled.div`
+  position: relative;
+  top: 8px;
+  width: 100%;
+  height: auto;
+`;
+
+const SpriteContainer = styled.div`
+  position: relative;
+  top: -3px;
+  left: 0;
+`;
+
+const SkillDisplayContainer = styled.div`
+  margin: 0 auto;
+
+  p {
+    margin: 0;
+  }
+`;
+
+const SkillPointsDisplay = styled.p`
+  font-size: 0.6rem !important;
+  font-weight: bold;
+  text-align: center;
+`;
+
+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;
+  width: 100%;
+`;
+
+const ProgressTitle = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  span {
+    font-size: 0.6rem;
+  }
+`;