@rpg-engine/long-bow 0.1.76 → 0.1.79

package/src/components/SkillsContainer.tsx

@@ -1,235 +1,235 @@
-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 } 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;
+  }
+`;

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