@rpg-engine/long-bow 0.1.794 → 0.2.2

package/src/components/SkillsContainer.tsx

@@ -1,235 +1,196 @@
-import { ISkill } from '@rpg-engine/shared';
-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;
-}
-
-export const SkillsContainer: React.FC<ISkillContainerProps> = ({
-  onCloseButton,
-  skill,
-}) => {
-  return (
-    <SkillsDraggableContainer title="Skills" onCloseButton={onCloseButton}>
-      <SkillSplitDiv>
-        <p>Combat Skills</p>
-        <hr className="golden" />
-      </SkillSplitDiv>
-      <SkillProgressBar
-        skillName={'First'}
-        bgColor={colors.cardinal}
-        level={skill?.first?.level || 0}
-        skillPoints={skill?.first?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.first?.skillPointsToNextLevel || 0}
-        texturePath={'gloves/leather-gloves.png'}
-      />
-      <SkillProgressBar
-        skillName={'Club'}
-        bgColor={colors.cardinal}
-        level={skill?.club?.level || 0}
-        skillPoints={skill?.club?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.club?.skillPointsToNextLevel || 0}
-        texturePath={'maces/club.png'}
-      />
-      <SkillProgressBar
-        skillName={'Sword'}
-        bgColor={colors.cardinal}
-        level={skill?.sword?.level || 0}
-        skillPoints={skill?.sword?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.sword?.skillPointsToNextLevel || 0}
-        texturePath={'swords/double-edged-sword.png'}
-      />
-      <SkillProgressBar
-        skillName={'Axe'}
-        bgColor={colors.cardinal}
-        level={skill?.axe?.level || 0}
-        skillPoints={skill?.axe?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.axe?.skillPointsToNextLevel || 0}
-        texturePath={'axes/double-axe.png'}
-      />
-      <SkillProgressBar
-        skillName={'Distance'}
-        bgColor={colors.cardinal}
-        level={skill?.distance?.level || 0}
-        skillPoints={skill?.distance?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.distance?.skillPointsToNextLevel || 0}
-        texturePath={'bows/horse-bow.png'}
-      />
-      <SkillProgressBar
-        skillName={'Shielding'}
-        bgColor={colors.cardinal}
-        level={skill?.shielding?.level || 0}
-        skillPoints={skill?.shielding?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.shielding?.skillPointsToNextLevel || 0}
-        texturePath={'shields/studded-shield.png'}
-      />
-      <SkillSplitDiv>
-        <p>Crafting Skills</p>
-        <hr className="golden" />
-      </SkillSplitDiv>
-      <SkillProgressBar
-        skillName={'Fishing'}
-        bgColor={colors.blue}
-        level={skill?.fishing?.level || 0}
-        skillPoints={skill?.fishing?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.fishing?.skillPointsToNextLevel || 0}
-        texturePath={'foods/fish.png'}
-      />
-      <SkillProgressBar
-        skillName={'Mining'}
-        bgColor={colors.blue}
-        level={skill?.mining?.level || 0}
-        skillPoints={skill?.mining?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.mining?.skillPointsToNextLevel || 0}
-        texturePath={'crafting-resources/iron-ingot.png'}
-      />
-      <SkillProgressBar
-        skillName={'Lumberjacking'}
-        bgColor={colors.blue}
-        level={skill?.lumberjacking?.level || 0}
-        skillPoints={skill?.lumberjacking?.skillPoints || 0}
-        skillPointsToNextLevel={
-          skill?.lumberjacking?.skillPointsToNextLevel || 0
-        }
-        texturePath={'crafting-resources/greater-wood-log.png'}
-      />
-      <SkillProgressBar
-        skillName={'Cooking'}
-        bgColor={colors.blue}
-        level={skill?.cooking?.level || 0}
-        skillPoints={skill?.cooking?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.cooking?.skillPointsToNextLevel || 0}
-        texturePath={'foods/chickens-meat.png'}
-      />
-      <SkillProgressBar
-        skillName={'Alchemy'}
-        bgColor={colors.blue}
-        level={skill?.alchemy?.level || 0}
-        skillPoints={skill?.alchemy?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.alchemy?.skillPointsToNextLevel || 0}
-        texturePath={'potions/greater-mana-potion.png'}
-      />
-
-      <SkillSplitDiv>
-        <p>Basic Attributes</p>
-        <hr className="golden" />
-      </SkillSplitDiv>
-      <SkillProgressBar
-        skillName={'Stamina'}
-        bgColor={colors.darkYellow}
-        level={skill?.stamina?.level || 0}
-        skillPoints={skill?.stamina?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.stamina?.skillPointsToNextLevel || 0}
-        texturePath={'spell-icons/regenerate.png'}
-      />
-      <SkillProgressBar
-        skillName={'Magic'}
-        bgColor={colors.purple}
-        level={skill?.magic?.level || 0}
-        skillPoints={skill?.magic?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.magic?.skillPointsToNextLevel || 0}
-        texturePath={'spell-icons/fireball.png'}
-      />
-      <SkillProgressBar
-        skillName={'Magic Resistance'}
-        bgColor={colors.navyBlue}
-        level={skill?.magicResistance?.level || 0}
-        skillPoints={skill?.magicResistance?.skillPoints || 0}
-        skillPointsToNextLevel={
-          skill?.magicResistance?.skillPointsToNextLevel || 0
-        }
-        texturePath={'spell-icons/freeze.png'}
-      />
-      <SkillProgressBar
-        skillName={'Strength'}
-        bgColor={colors.cardinal}
-        level={skill?.strength?.level || 0}
-        skillPoints={skill?.strength?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.strength?.skillPointsToNextLevel || 0}
-        texturePath={'spell-icons/enchanted-blow.png'}
-      />
-      <SkillProgressBar
-        skillName={'Resistance'}
-        bgColor={colors.raisinBlack}
-        level={skill?.resistance?.level || 0}
-        skillPoints={skill?.resistance?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.resistance?.skillPointsToNextLevel || 0}
-        texturePath={'spell-icons/magic-shield.png'}
-      />
-      <SkillProgressBar
-        skillName={'Dexterity'}
-        bgColor={colors.blue}
-        level={skill?.dexterity?.level || 0}
-        skillPoints={skill?.dexterity?.skillPoints || 0}
-        skillPointsToNextLevel={skill?.dexterity?.skillPointsToNextLevel || 0}
-        texturePath={'spell-icons/haste.png'}
-      />
-
-      {/* <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: 800px;
-  overflow-y: scroll;
-  .DraggableContainer__TitleContainer-sc-184mpyl-2 {
-    width: auto;
-    height: auto;
-  }
-`;
-
-const SkillSplitDiv = styled.div`
-  width: 100%;
-  font-size: 11px;
-  margin-top: 10px;
-  hr {
-    margin: 0px;
-    padding: 0px;
-  }
-  p {
-    margin-bottom: 0px;
-  }
-`;
+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} />;
+};

package/src/components/Truncate.tsx

@@ -1,25 +1,25 @@
-/* eslint-disable react/require-default-props */
-import React from 'react';
-import styled from 'styled-components';
-
-interface IProps {
-  maxLines?: number;
-  children: React.ReactNode;
-}
-
-export const Truncate: React.FC<IProps> = ({ maxLines = 1, children }) => {
-  return <Container maxLines={maxLines}>{children}</Container>;
-};
-
-interface IContainerProps {
-  maxLines: number;
-}
-
-const Container = styled.div<IContainerProps>`
-  display: -webkit-box;
-  max-width: 100%;
-  max-height: 100%;
-  -webkit-line-clamp: ${props => props.maxLines};
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-`;
+/* eslint-disable react/require-default-props */
+import React from 'react';
+import styled from 'styled-components';
+
+interface IProps {
+  maxLines?: number;
+  children: React.ReactNode;
+}
+
+export const Truncate: React.FC<IProps> = ({ maxLines = 1, children }) => {
+  return <Container maxLines={maxLines}>{children}</Container>;
+};
+
+interface IContainerProps {
+  maxLines: number;
+}
+
+const Container = styled.div<IContainerProps>`
+  display: -webkit-box;
+  max-width: 100%;
+  max-height: 100%;
+  -webkit-line-clamp: ${props => props.maxLines};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;

package/src/components/shared/Column.tsx

@@ -1,16 +1,16 @@
-import styled from 'styled-components';
-
-interface IColumn {
-  flex?: number;
-  alignItems?: string;
-  justifyContent?: string;
-  flexWrap?: string;
-}
-
-export const Column = styled.div<IColumn>`
-  flex: ${props => props.flex || 'auto'};
-  display: flex;
-  flex-wrap: ${props => props.flexWrap || 'nowrap'};
-  align-items: ${props => props.alignItems || 'flex-start'};
-  justify-content: ${props => props.justifyContent || 'flex-start'};
-`;
+import styled from 'styled-components';
+
+interface IColumn {
+  flex?: number;
+  alignItems?: string;
+  justifyContent?: string;
+  flexWrap?: string;
+}
+
+export const Column = styled.div<IColumn>`
+  flex: ${props => props.flex || 'auto'};
+  display: flex;
+  flex-wrap: ${props => props.flexWrap || 'nowrap'};
+  align-items: ${props => props.alignItems || 'flex-start'};
+  justify-content: ${props => props.justifyContent || 'flex-start'};
+`;