@rpg-engine/long-bow 0.4.82 → 0.4.83

package/src/components/SkillProgressBar.tsx

@@ -1,206 +1,198 @@
-import { getSPForLevel } from '@rpg-engine/shared';
-import React from 'react';
-import styled from 'styled-components';
-import { uiColors } from '../constants/uiColors';
-import { ErrorBoundary } from './Item/Inventory/ErrorBoundary';
-import { SimpleProgressBar } from './SimpleProgressBar';
-import { SpriteFromAtlas } from './shared/SpriteFromAtlas';
-
-export interface ISkillProgressBarProps {
-  skillName: string;
-  bgColor: string;
-  level: number;
-  skillPoints: number;
-  skillPointsToNextLevel?: number;
-  texturePath: string;
-  showSkillPoints?: boolean;
-  atlasJSON: any;
-  atlasIMG: any;
-  buffAndDebuff?: number;
-}
-
-export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
-  bgColor,
-  skillName,
-  level,
-  skillPoints,
-  skillPointsToNextLevel,
-  texturePath,
-  showSkillPoints = true,
-  atlasIMG,
-  atlasJSON,
-  buffAndDebuff,
-}) => {
-  if (!skillPointsToNextLevel) {
-    skillPointsToNextLevel = getSPForLevel(level + 1);
-  }
-
-  const SPLevelActual = getSPForLevel(level + 1);
-  const SPLevelBefore = getSPForLevel(level);
-  const SPcalc = SPLevelActual - SPLevelBefore;
-
-  const ratio = () => {
-    if (level === 1) {
-      return (skillPoints / SPLevelActual) * 100;
-    }
-    return ((skillPoints - SPLevelBefore) / SPcalc) * 100;
-  };
-  //const ratio = ((skillPoints - SPLevelBefore) / SPcalc) * 100;
-
-  const skillsBuffsCalc = () => {
-    if (buffAndDebuff) {
-      return 1 + buffAndDebuff / 100;
-    }
-    return;
-  };
-
-  return (
-    <>
-      <ProgressTitle>
-        {buffAndDebuff !== undefined && (
-          <>
-            {buffAndDebuff > 0 ? (
-              <BuffAndDebuffContainer>
-                <TitleNameContainer>
-                  <TitleNameBuff>{skillName}</TitleNameBuff>
-                  <TitleNameBuff>
-                    lv {level} ({skillsBuffsCalc()})
-                  </TitleNameBuff>
-                </TitleNameContainer>
-                <TitleNameBuffContainer>
-                  <TitleNameBuff>(+{buffAndDebuff}%)</TitleNameBuff>
-                </TitleNameBuffContainer>
-              </BuffAndDebuffContainer>
-            ) : buffAndDebuff < 0 ? (
-              <>
-                <TitleNameContainer>
-                  <TitleNameDebuff>{skillName}</TitleNameDebuff>
-                  <TitleNameDebuff>
-                    lv {level} ({skillsBuffsCalc()})
-                  </TitleNameDebuff>
-                </TitleNameContainer>
-                <div>
-                  <TitleNameDebuff>({buffAndDebuff}%)</TitleNameDebuff>
-                </div>
-              </>
-            ) : (
-              <TitleName>{skillName}</TitleName>
-            )}
-          </>
-        )}
-        {!buffAndDebuff && (
-          <TitleNameContainer>
-            <TitleName>{skillName}</TitleName>
-            <ValueDisplay>lv {level}</ValueDisplay>
-          </TitleNameContainer>
-        )}
-      </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}/{getSPForLevel(level + 1)}
-          </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 TitleNameBuff = styled.span`
-  margin-left: 5px;
-  color: ${uiColors.lightGreen} !important;
-`;
-
-const TitleNameDebuff = styled.span`
-  margin-left: 5px;
-  color: ${uiColors.red} !important;
-`;
-
-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: column;
-  justify-content: space-between;
-  span {
-    font-size: 0.6rem;
-  }
-`;
-
-const BuffAndDebuffContainer = styled.div``;
-
-const TitleNameBuffContainer = styled.div``;
-
-const TitleNameContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
+import { getSPForLevel } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../constants/uiColors';
+import { ErrorBoundary } from './Item/Inventory/ErrorBoundary';
+import { SimpleProgressBar } from './SimpleProgressBar';
+import { SpriteFromAtlas } from './shared/SpriteFromAtlas';
+
+export interface ISkillProgressBarProps {
+  skillName: string;
+  bgColor: string;
+  level: number;
+  skillPoints: number;
+  skillPointsToNextLevel?: number;
+  texturePath: string;
+  showSkillPoints?: boolean;
+  atlasJSON: any;
+  atlasIMG: any;
+  buffAndDebuff?: number;
+}
+
+export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
+  bgColor,
+  skillName,
+  level,
+  skillPoints,
+  skillPointsToNextLevel,
+  texturePath,
+  showSkillPoints = true,
+  atlasIMG,
+  atlasJSON,
+  buffAndDebuff,
+}) => {
+  if (!skillPointsToNextLevel) {
+    skillPointsToNextLevel = getSPForLevel(level + 1);
+  }
+
+  const nextLevelSPWillbe = skillPoints + skillPointsToNextLevel;
+
+  const ratio = (skillPoints / nextLevelSPWillbe) * 100;
+
+  const skillsBuffsCalc = () => {
+    if (buffAndDebuff) {
+      return 1 + buffAndDebuff / 100;
+    }
+    return;
+  };
+
+  return (
+    <>
+      <ProgressTitle>
+        {buffAndDebuff !== undefined && (
+          <>
+            {buffAndDebuff > 0 ? (
+              <BuffAndDebuffContainer>
+                <TitleNameContainer>
+                  <TitleNameBuff>{skillName}</TitleNameBuff>
+                  <TitleNameBuff>
+                    lv {level} ({skillsBuffsCalc()})
+                  </TitleNameBuff>
+                </TitleNameContainer>
+                <TitleNameBuffContainer>
+                  <TitleNameBuff>(+{buffAndDebuff}%)</TitleNameBuff>
+                </TitleNameBuffContainer>
+              </BuffAndDebuffContainer>
+            ) : buffAndDebuff < 0 ? (
+              <>
+                <TitleNameContainer>
+                  <TitleNameDebuff>{skillName}</TitleNameDebuff>
+                  <TitleNameDebuff>
+                    lv {level} ({skillsBuffsCalc()})
+                  </TitleNameDebuff>
+                </TitleNameContainer>
+                <div>
+                  <TitleNameDebuff>({buffAndDebuff}%)</TitleNameDebuff>
+                </div>
+              </>
+            ) : (
+              <TitleName>{skillName}</TitleName>
+            )}
+          </>
+        )}
+        {!buffAndDebuff && (
+          <TitleNameContainer>
+            <TitleName>{skillName}</TitleName>
+            <ValueDisplay>lv {level}</ValueDisplay>
+          </TitleNameContainer>
+        )}
+      </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 TitleNameBuff = styled.span`
+  margin-left: 5px;
+  color: ${uiColors.lightGreen} !important;
+`;
+
+const TitleNameDebuff = styled.span`
+  margin-left: 5px;
+  color: ${uiColors.red} !important;
+`;
+
+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: column;
+  justify-content: space-between;
+  span {
+    font-size: 0.6rem;
+  }
+`;
+
+const BuffAndDebuffContainer = styled.div``;
+
+const TitleNameBuffContainer = styled.div``;
+
+const TitleNameContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;