@rpg-engine/long-bow 0.3.49 → 0.3.51

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;
+  }
+`;

package/src/components/SkillsContainer.tsx

@@ -1,191 +1,200 @@
-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;
-}
-
-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',
-      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',
-  cooking: 'Cooking',
-  alchemy: 'Alchemy',
-};
-
-export const SkillsContainer: React.FC<ISkillContainerProps> = ({
-  onCloseButton,
-  skill,
-  atlasIMG,
-  atlasJSON,
-}) => {
-  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)) {
-      //@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}
-        />
-      );
-    }
-
-    return output;
-  };
-
-  return (
-    <SkillsDraggableContainer title="Skills">
-      {onCloseButton && (
-        <CloseButton onClick={onCloseButton} onTouchStart={onCloseButton}>
-          X
-        </CloseButton>
-      )}
-      <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')}
-    </SkillsDraggableContainer>
-  );
-};
-
-const SkillsDraggableContainer = styled(DraggableContainer)`
-  border: 1px solid black;
-  width: 400px;
-  height: 90%;
-  overflow-y: scroll;
-  .DraggableContainer__TitleContainer-sc-184mpyl-2 {
-    width: auto;
-    height: auto;
-  }
-`;
-
-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 } 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;
+}
+
+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',
+      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',
+  cooking: 'Cooking',
+  alchemy: 'Alchemy',
+};
+
+export const SkillsContainer: React.FC<ISkillContainerProps> = ({
+  onCloseButton,
+  skill,
+  atlasIMG,
+  atlasJSON,
+}) => {
+  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)) {
+      //@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}
+        />
+      );
+    }
+
+    return output;
+  };
+
+  return (
+    <SkillsDraggableContainer title="Skills" cancelDrag="#skillsDiv">
+      {onCloseButton && (
+        <CloseButton onClick={onCloseButton} onTouchStart={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;
+  width: 400px;
+  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;
+`;