@rpg-engine/long-bow 0.1.92 → 0.1.96

package/src/components/SkillProgressBar.tsx

@@ -1,123 +1,123 @@
-import { getSPForLevel } from '@rpg-engine/shared';
-import React from 'react';
-import styled from 'styled-components';
-import atlasJSON from '../mocks/atlas/items/items.json';
-import atlasIMG from '../mocks/atlas/items/items.png';
-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;
-}
-
-export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
-  bgColor,
-  skillName,
-  level,
-  skillPoints,
-  texturePath,
-  showSkillPoints = true,
-}) => {
-  const spForNextLevel = getSPForLevel(level + 1);
-
-  const ratio = (skillPoints / spForNextLevel) * 100;
-
-  return (
-    <>
-      <ProgressTitle>
-        <TitleName>{skillName}</TitleName>
-        <ValueDisplay>lv {level}</ValueDisplay>
-      </ProgressTitle>
-      <ProgressBody>
-        <ProgressIconContainer>
-          {atlasIMG && atlasJSON ? (
-            <SpriteContainer>
-              <SpriteFromAtlas
-                atlasIMG={atlasIMG}
-                atlasJSON={atlasJSON}
-                spriteKey={texturePath}
-                imgScale={1}
-                grayScale
-                opacity={0.5}
-              />
-            </SpriteContainer>
-          ) : (
-            <></>
-          )}
-        </ProgressIconContainer>
-
-        <ProgressBarContainer>
-          <SimpleProgressBar value={ratio} bgColor={bgColor} />
-        </ProgressBarContainer>
-      </ProgressBody>
-      {showSkillPoints && (
-        <SkillDisplayContainer>
-          <SkillPointsDisplay>
-            {skillPoints}/{spForNextLevel}
-          </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 atlasJSON from '../mocks/atlas/items/items.json';
+import atlasIMG from '../mocks/atlas/items/items.png';
+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;
+}
+
+export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
+  bgColor,
+  skillName,
+  level,
+  skillPoints,
+  texturePath,
+  showSkillPoints = true,
+}) => {
+  const spForNextLevel = getSPForLevel(level + 1);
+
+  const ratio = (skillPoints / spForNextLevel) * 100;
+
+  return (
+    <>
+      <ProgressTitle>
+        <TitleName>{skillName}</TitleName>
+        <ValueDisplay>lv {level}</ValueDisplay>
+      </ProgressTitle>
+      <ProgressBody>
+        <ProgressIconContainer>
+          {atlasIMG && atlasJSON ? (
+            <SpriteContainer>
+              <SpriteFromAtlas
+                atlasIMG={atlasIMG}
+                atlasJSON={atlasJSON}
+                spriteKey={texturePath}
+                imgScale={1}
+                grayScale
+                opacity={0.5}
+              />
+            </SpriteContainer>
+          ) : (
+            <></>
+          )}
+        </ProgressIconContainer>
+
+        <ProgressBarContainer>
+          <SimpleProgressBar value={ratio} bgColor={bgColor} />
+        </ProgressBarContainer>
+      </ProgressBody>
+      {showSkillPoints && (
+        <SkillDisplayContainer>
+          <SkillPointsDisplay>
+            {skillPoints}/{spForNextLevel}
+          </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,196 +1,196 @@
-import { ISkill, ISkillDetails } from '@rpg-engine/shared';
-import _ from 'lodash';
-import React from 'react';
-import styled from 'styled-components';
-import { colors } from '../constants/uiColors';
-import { DraggableContainer } from './DraggableContainer';
-import { SkillProgressBar } from './SkillProgressBar';
-
-export interface ISkillContainerProps {
-  skill: ISkill;
-  onCloseButton: () => void;
-}
-
-const skillProps = {
-  attributes: {
-    color: colors.cardinal,
-    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: colors.purple,
-    values: {
-      first: 'gloves/leather-gloves.png',
-      club: 'maces/club.png',
-      sword: 'swords/double-edged-sword.png',
-      axe: 'axes/double-axe.png',
-      distance: 'bows/horse-bow.png',
-      shielding: 'shields/studded-shield.png',
-      dagger: 'daggers/dagger.png',
-    },
-  },
-  crafting: {
-    color: colors.blue,
-    values: {
-      fishing: 'foods/fish.png',
-      mining: 'crafting-resources/iron-ingot.png',
-      lumberjacking: 'crafting-resources/greater-wood-log.png',
-      cooking: 'foods/chickens-meat.png',
-      alchemy: 'potions/greater-mana-potion.png',
-    },
-  },
-};
-
-export const SkillsContainer: React.FC<ISkillContainerProps> = ({
-  onCloseButton,
-  skill,
-}) => {
-  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={_.capitalize(key)}
-          bgColor={skillCategoryColor}
-          level={skillDetails.level || 0}
-          skillPoints={Math.round(skillDetails.skillPoints) || 0}
-          skillPointsToNextLevel={
-            Math.round(skillDetails.skillPointsToNextLevel) || 0
-          }
-          texturePath={value}
-        />
-      );
-    }
-
-    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={colors.navyBlue}
-          level={Math.round(skill.level) || 0}
-          skillPoints={Math.round(skill.experience) || 0}
-          skillPointsToNextLevel={Math.round(skill.xpToNextLevel) || 0}
-          texturePath={'swords/broad-sword.png'}
-        />
-
-        <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')}
-
-      {/* <SkillSplitDiv>
-        <p>Magic Skills</p>
-        <hr className="golden" />
-      </SkillSplitDiv>
-      <SkillProgressBar
-        skillName={'Ice'}
-        bgColor={'red'}
-        level={skill?.ice?.level || 0}
-        skillPoints={skill?.ice?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.ice?.skillPointsToNextLevel || 0}
-        texturePath={'spell-icons/freeze.png'}
-      />
-      <SkillProgressBar
-        skillName={'Earth'}
-        bgColor={'red'}
-        level={skill?.earth?.level || 0}
-        skillPoints={skill?.earth?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.earth?.skillPointsToNextLevel || 0}
-        texturePath={'spell-icons/earth-barrier.png'}
-      />
-      <SkillProgressBar
-        skillName={'Air'}
-        bgColor={'red'}
-        level={skill?.air?.level || 0}
-        skillPoints={skill?.air?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.air?.skillPointsToNextLevel || 0}
-        texturePath={'spell-icons/poison-tornado.png'}
-      />
-      <SkillProgressBar
-        skillName={'Water'}
-        bgColor={'red'}
-        level={skill?.water?.level || 0}
-        skillPoints={skill?.water?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.water?.skillPointsToNextLevel || 0}
-        texturePath={'spell-icons/tsunami.png'}
-      /> */}
-    </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: 0.7rem;
-`;
+import { ISkill, ISkillDetails } from '@rpg-engine/shared';
+import _ from 'lodash';
+import React from 'react';
+import styled from 'styled-components';
+import { colors } from '../constants/uiColors';
+import { DraggableContainer } from './DraggableContainer';
+import { SkillProgressBar } from './SkillProgressBar';
+
+export interface ISkillContainerProps {
+  skill: ISkill;
+  onCloseButton: () => void;
+}
+
+const skillProps = {
+  attributes: {
+    color: colors.cardinal,
+    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: colors.purple,
+    values: {
+      first: 'gloves/leather-gloves.png',
+      club: 'maces/club.png',
+      sword: 'swords/double-edged-sword.png',
+      axe: 'axes/double-axe.png',
+      distance: 'bows/horse-bow.png',
+      shielding: 'shields/studded-shield.png',
+      dagger: 'daggers/dagger.png',
+    },
+  },
+  crafting: {
+    color: colors.blue,
+    values: {
+      fishing: 'foods/fish.png',
+      mining: 'crafting-resources/iron-ingot.png',
+      lumberjacking: 'crafting-resources/greater-wood-log.png',
+      cooking: 'foods/chickens-meat.png',
+      alchemy: 'potions/greater-mana-potion.png',
+    },
+  },
+};
+
+export const SkillsContainer: React.FC<ISkillContainerProps> = ({
+  onCloseButton,
+  skill,
+}) => {
+  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={_.capitalize(key)}
+          bgColor={skillCategoryColor}
+          level={skillDetails.level || 0}
+          skillPoints={Math.round(skillDetails.skillPoints) || 0}
+          skillPointsToNextLevel={
+            Math.round(skillDetails.skillPointsToNextLevel) || 0
+          }
+          texturePath={value}
+        />
+      );
+    }
+
+    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={colors.navyBlue}
+          level={Math.round(skill.level) || 0}
+          skillPoints={Math.round(skill.experience) || 0}
+          skillPointsToNextLevel={Math.round(skill.xpToNextLevel) || 0}
+          texturePath={'swords/broad-sword.png'}
+        />
+
+        <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')}
+
+      {/* <SkillSplitDiv>
+        <p>Magic Skills</p>
+        <hr className="golden" />
+      </SkillSplitDiv>
+      <SkillProgressBar
+        skillName={'Ice'}
+        bgColor={'red'}
+        level={skill?.ice?.level || 0}
+        skillPoints={skill?.ice?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.ice?.skillPointsToNextLevel || 0}
+        texturePath={'spell-icons/freeze.png'}
+      />
+      <SkillProgressBar
+        skillName={'Earth'}
+        bgColor={'red'}
+        level={skill?.earth?.level || 0}
+        skillPoints={skill?.earth?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.earth?.skillPointsToNextLevel || 0}
+        texturePath={'spell-icons/earth-barrier.png'}
+      />
+      <SkillProgressBar
+        skillName={'Air'}
+        bgColor={'red'}
+        level={skill?.air?.level || 0}
+        skillPoints={skill?.air?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.air?.skillPointsToNextLevel || 0}
+        texturePath={'spell-icons/poison-tornado.png'}
+      />
+      <SkillProgressBar
+        skillName={'Water'}
+        bgColor={'red'}
+        level={skill?.water?.level || 0}
+        skillPoints={skill?.water?.skillPoints || 0}
+        skillPointsToNextLevel={skill?.water?.skillPointsToNextLevel || 0}
+        texturePath={'spell-icons/tsunami.png'}
+      /> */}
+    </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: 0.7rem;
+`;

package/src/components/TextArea.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-
-export interface ITextArea
-  extends React.DetailedHTMLProps<
-    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-    HTMLTextAreaElement
-  > {}
-
-export const TextArea: React.FC<ITextArea> = ({ ...props }) => {
-  return <textarea {...props} />;
-};
+import React from 'react';
+
+export interface ITextArea
+  extends React.DetailedHTMLProps<
+    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    HTMLTextAreaElement
+  > {}
+
+export const TextArea: React.FC<ITextArea> = ({ ...props }) => {
+  return <textarea {...props} />;
+};