@rpg-engine/long-bow 0.4.82 → 0.4.84

package/src/components/SkillsContainer.tsx

@@ -1,213 +1,242 @@
-import { ISkill, ISkillDetails } from '@rpg-engine/shared';
-import React from 'react';
-import styled from 'styled-components';
-import { uiColors } from '../constants/uiColors';
-import { DraggableContainer } from './DraggableContainer';
-import { SkillProgressBar } from './SkillProgressBar';
-
-export interface ISkillContainerProps {
-  skill: ISkill;
-  onCloseButton: () => void;
-  atlasJSON: any;
-  atlasIMG: any;
-  scale?: number;
-}
-
-const skillProps = {
-  attributes: {
-    color: uiColors.purple,
-    values: {
-      stamina: 'spell-icons/regenerate.png',
-      magic: 'spell-icons/fireball.png',
-      magicResistance: 'spell-icons/freeze.png',
-      strength: 'spell-icons/enchanted-blow.png',
-      resistance: 'spell-icons/magic-shield.png',
-      dexterity: 'spell-icons/haste.png',
-    },
-  },
-  combat: {
-    color: uiColors.cardinal,
-    values: {
-      first: 'gloves/leather-gloves.png',
-      club: 'maces/club.png',
-      sword: 'swords/double-edged-sword.png',
-      axe: 'axes/double-axe.png',
-      distance: 'ranged-weapons/horse-bow.png',
-      shielding: 'shields/studded-shield.png',
-      dagger: 'daggers/dagger.png',
-    },
-  },
-  crafting: {
-    color: uiColors.blue,
-    values: {
-      fishing: 'foods/fish.png',
-      mining: 'crafting-resources/iron-ingot.png',
-      lumberjacking: 'crafting-resources/greater-wooden-log.png',
-      blacksmithing: 'hammers/hammer.png',
-      cooking: 'foods/chickens-meat.png',
-      alchemy: 'potions/greater-mana-potion.png',
-    },
-  },
-};
-
-interface SkillMap {
-  [key: string]: string;
-}
-
-const skillNameMap: SkillMap = {
-  stamina: 'Stamina',
-  magic: 'Magic',
-  magicResistance: 'Magic Resistance',
-  strength: 'Strength',
-  resistance: 'Resistance',
-  dexterity: 'Dexterity',
-  first: 'Fist',
-  club: 'Club',
-  sword: 'Sword',
-  axe: 'Axe',
-  distance: 'Distance',
-  shielding: 'Shielding',
-  dagger: 'Dagger',
-  fishing: 'Fishing',
-  mining: 'Mining',
-  lumberjacking: 'Lumberjacking',
-  blacksmithing: 'Blacksmithing',
-  cooking: 'Cooking',
-  alchemy: 'Alchemy',
-};
-
-export const SkillsContainer: React.FC<ISkillContainerProps> = ({
-  onCloseButton,
-  skill,
-  atlasIMG,
-  atlasJSON,
-  scale,
-}) => {
-  const onRenderSkillCategory = (
-    category: 'attributes' | 'combat' | 'crafting'
-  ) => {
-    const skillCategory = skillProps[category];
-
-    const skillCategoryColor = skillCategory.color;
-
-    const output = [];
-
-    for (const [key, value] of Object.entries(skillCategory.values)) {
-      if (key === 'stamina') {
-        continue;
-      }
-      //@ts-ignore
-      const skillDetails = (skill[key] as unknown) as ISkillDetails;
-
-      output.push(
-        <SkillProgressBar
-          key={key}
-          skillName={skillNameMap[key]}
-          bgColor={skillCategoryColor}
-          level={skillDetails.level || 0}
-          skillPoints={Math.round(skillDetails.skillPoints) || 0}
-          skillPointsToNextLevel={
-            Math.round(skillDetails.skillPointsToNextLevel) || 0
-          }
-          texturePath={value}
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          buffAndDebuff={skillDetails.buffAndDebuff}
-        />
-      );
-    }
-
-    return output;
-  };
-
-  return (
-    <SkillsDraggableContainer
-      title="Skills"
-      cancelDrag="#skillsDiv"
-      scale={scale}
-      width="100%"
-    >
-      {onCloseButton && (
-        <CloseButton onPointerDown={onCloseButton}>X</CloseButton>
-      )}
-      <SkillsContainerDiv id="skillsDiv">
-        <SkillSplitDiv>
-          <p>General</p>
-          <hr className="golden" />
-
-          <SkillProgressBar
-            skillName={'Level'}
-            bgColor={uiColors.navyBlue}
-            level={Math.round(skill.level) || 0}
-            skillPoints={Math.round(skill.experience) || 0}
-            skillPointsToNextLevel={Math.round(skill.xpToNextLevel) || 0}
-            texturePath={'swords/broad-sword.png'}
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-          />
-
-          <p>Combat Skills</p>
-          <hr className="golden" />
-        </SkillSplitDiv>
-
-        {onRenderSkillCategory('combat')}
-
-        <SkillSplitDiv>
-          <p>Crafting Skills</p>
-          <hr className="golden" />
-        </SkillSplitDiv>
-
-        {onRenderSkillCategory('crafting')}
-
-        <SkillSplitDiv>
-          <p>Basic Attributes</p>
-          <hr className="golden" />
-        </SkillSplitDiv>
-
-        {onRenderSkillCategory('attributes')}
-      </SkillsContainerDiv>
-    </SkillsDraggableContainer>
-  );
-};
-
-const SkillsDraggableContainer = styled(DraggableContainer)`
-  border: 1px solid black;
-
-  max-width: 450px;
-
-  height: 90%;
-  .DraggableContainer__TitleContainer-sc-184mpyl-2 {
-    width: auto;
-    height: auto;
-  }
-`;
-
-const SkillsContainerDiv = styled.div`
-  width: 100%;
-  -webkit-overflow-y: scroll;
-  overflow-y: scroll;
-  height: 90%;
-  padding-right: 10px;
-`;
-
-const SkillSplitDiv = styled.div`
-  width: 100%;
-  font-size: 11px;
-  hr {
-    margin: 0;
-    margin-bottom: 1rem;
-    padding: 0px;
-  }
-  p {
-    margin-bottom: 0px;
-  }
-`;
-
-const CloseButton = styled.div`
-  position: absolute;
-  top: 2px;
-  right: 2px;
-  color: white;
-  z-index: 22;
-  font-size: 1.1rem;
-`;
+import {
+  ISkill,
+  ISkillDetails,
+  getSPForLevel,
+  getXPForLevel,
+} from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../constants/uiColors';
+import { DraggableContainer } from './DraggableContainer';
+import { SkillProgressBar } from './SkillProgressBar';
+
+export interface ISkillContainerProps {
+  skill: ISkill;
+  onCloseButton: () => void;
+  atlasJSON: any;
+  atlasIMG: any;
+  scale?: number;
+}
+
+const skillProps = {
+  attributes: {
+    color: uiColors.purple,
+    values: {
+      stamina: 'spell-icons/regenerate.png',
+      magic: 'spell-icons/fireball.png',
+      magicResistance: 'spell-icons/freeze.png',
+      strength: 'spell-icons/enchanted-blow.png',
+      resistance: 'spell-icons/magic-shield.png',
+      dexterity: 'spell-icons/haste.png',
+    },
+  },
+  combat: {
+    color: uiColors.cardinal,
+    values: {
+      first: 'gloves/leather-gloves.png',
+      club: 'maces/club.png',
+      sword: 'swords/double-edged-sword.png',
+      axe: 'axes/double-axe.png',
+      distance: 'ranged-weapons/horse-bow.png',
+      shielding: 'shields/studded-shield.png',
+      dagger: 'daggers/dagger.png',
+    },
+  },
+  crafting: {
+    color: uiColors.blue,
+    values: {
+      fishing: 'foods/fish.png',
+      mining: 'crafting-resources/iron-ingot.png',
+      lumberjacking: 'crafting-resources/greater-wooden-log.png',
+      blacksmithing: 'hammers/hammer.png',
+      cooking: 'foods/chickens-meat.png',
+      alchemy: 'potions/greater-mana-potion.png',
+    },
+  },
+};
+
+interface SkillMap {
+  [key: string]: string;
+}
+
+const skillNameMap: SkillMap = {
+  stamina: 'Stamina',
+  magic: 'Magic',
+  magicResistance: 'Magic Resistance',
+  strength: 'Strength',
+  resistance: 'Resistance',
+  dexterity: 'Dexterity',
+  first: 'Fist',
+  club: 'Club',
+  sword: 'Sword',
+  axe: 'Axe',
+  distance: 'Distance',
+  shielding: 'Shielding',
+  dagger: 'Dagger',
+  fishing: 'Fishing',
+  mining: 'Mining',
+  lumberjacking: 'Lumberjacking',
+  blacksmithing: 'Blacksmithing',
+  cooking: 'Cooking',
+  alchemy: 'Alchemy',
+};
+
+export const SkillsContainer: React.FC<ISkillContainerProps> = ({
+  onCloseButton,
+  skill,
+  atlasIMG,
+  atlasJSON,
+  scale,
+}) => {
+  const SPRatio = (level: number, skillPoints: number) => {
+    const SPLevelActual = getSPForLevel(level + 1);
+    const SPLevelBefore = getSPForLevel(level);
+    const SPCalc = SPLevelActual - SPLevelBefore;
+    if (level === 1) {
+      return (skillPoints / SPLevelActual) * 100;
+    }
+    return ((skillPoints - SPLevelBefore) / SPCalc) * 100;
+  };
+
+  const XPRatio = (level: number, skillPoints: number) => {
+    const XPLevelActual = getXPForLevel(level + 1);
+    const XPLevelBefore = getXPForLevel(level);
+    const XPCalc = XPLevelActual - XPLevelBefore;
+    if (level === 1) {
+      return (skillPoints / XPLevelActual) * 100;
+    }
+    return ((skillPoints - XPLevelBefore) / XPCalc) * 100;
+  };
+
+  const onRenderSkillCategory = (
+    category: 'attributes' | 'combat' | 'crafting'
+  ) => {
+    const skillCategory = skillProps[category];
+
+    const skillCategoryColor = skillCategory.color;
+
+    const output = [];
+
+    for (const [key, value] of Object.entries(skillCategory.values)) {
+      if (key === 'stamina') {
+        continue;
+      }
+      //@ts-ignore
+      const skillDetails = (skill[key] as unknown) as ISkillDetails;
+
+      output.push(
+        <SkillProgressBar
+          key={key}
+          skillName={skillNameMap[key]}
+          bgColor={skillCategoryColor}
+          level={skillDetails.level || 0}
+          skillPoints={Math.round(skillDetails.skillPoints) || 0}
+          skillPointsToNextLevel={
+            Math.round(getSPForLevel(skillDetails.level + 1)) || 0
+          }
+          texturePath={value}
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          buffAndDebuff={skillDetails.buffAndDebuff}
+          ratio={SPRatio(skillDetails.level, skillDetails.skillPoints)}
+        />
+      );
+    }
+
+    return output;
+  };
+
+  return (
+    <SkillsDraggableContainer
+      title="Skills"
+      cancelDrag="#skillsDiv"
+      scale={scale}
+      width="100%"
+    >
+      {onCloseButton && (
+        <CloseButton onPointerDown={onCloseButton}>X</CloseButton>
+      )}
+      <SkillsContainerDiv id="skillsDiv">
+        <SkillSplitDiv>
+          <p>General</p>
+          <hr className="golden" />
+
+          <SkillProgressBar
+            skillName={'Level'}
+            bgColor={uiColors.navyBlue}
+            level={Math.round(skill.level) || 0}
+            skillPoints={Math.round(skill.experience) || 0}
+            skillPointsToNextLevel={
+              Math.round(getXPForLevel(skill.level + 1)) || 0
+            }
+            texturePath={'swords/broad-sword.png'}
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            ratio={XPRatio(skill.level, skill.experience)}
+          />
+
+          <p>Combat Skills</p>
+          <hr className="golden" />
+        </SkillSplitDiv>
+
+        {onRenderSkillCategory('combat')}
+
+        <SkillSplitDiv>
+          <p>Crafting Skills</p>
+          <hr className="golden" />
+        </SkillSplitDiv>
+
+        {onRenderSkillCategory('crafting')}
+
+        <SkillSplitDiv>
+          <p>Basic Attributes</p>
+          <hr className="golden" />
+        </SkillSplitDiv>
+
+        {onRenderSkillCategory('attributes')}
+      </SkillsContainerDiv>
+    </SkillsDraggableContainer>
+  );
+};
+
+const SkillsDraggableContainer = styled(DraggableContainer)`
+  border: 1px solid black;
+
+  max-width: 450px;
+
+  height: 90%;
+  .DraggableContainer__TitleContainer-sc-184mpyl-2 {
+    width: auto;
+    height: auto;
+  }
+`;
+
+const SkillsContainerDiv = styled.div`
+  width: 100%;
+  -webkit-overflow-y: scroll;
+  overflow-y: scroll;
+  height: 90%;
+  padding-right: 10px;
+`;
+
+const SkillSplitDiv = styled.div`
+  width: 100%;
+  font-size: 11px;
+  hr {
+    margin: 0;
+    margin-bottom: 1rem;
+    padding: 0px;
+  }
+  p {
+    margin-bottom: 0px;
+  }
+`;
+
+const CloseButton = styled.div`
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  color: white;
+  z-index: 22;
+  font-size: 1.1rem;
+`;