@rpg-engine/long-bow 0.4.6 → 0.4.7

package/src/components/Shortcuts/SingleShortcut.ts

@@ -1,82 +1,82 @@
-import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
-
-export const SingleShortcut = styled.button`
-  width: 3rem;
-  height: 3rem;
-  background-color: ${uiColors.lightGray};
-  border: 2px solid ${uiColors.darkGray};
-  border-radius: 50%;
-  text-transform: uppercase;
-  font-size: 0.7rem;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-
-  span {
-    pointer-events: none;
-  }
-
-  .mana {
-    position: absolute;
-    top: -5px;
-    right: 0;
-    font-size: 0.65rem;
-    color: ${uiColors.blue};
-  }
-
-  .qty {
-    position: absolute;
-    top: -5px;
-    right: 0;
-    font-size: 0.65rem;
-  }
-
-  .magicWords {
-    margin-top: 4px;
-  }
-
-  .keyboard {
-    position: absolute;
-    bottom: -5px;
-    left: 0;
-    font-size: 0.65rem;
-    color: ${uiColors.yellow};
-  }
-
-  .onCooldown {
-    color: ${uiColors.gray};
-  }
-
-  .cooldown {
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-    background-color: rgba(0 0 0 / 60%);
-    font-size: 0.7rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: ${uiColors.darkYellow};
-  }
-
-  &:hover,
-  &:focus {
-    background-color: ${uiColors.darkGray};
-  }
-
-  &:active {
-    background-color: ${uiColors.gray};
-    border-color: ${uiColors.yellow};
-  }
-
-  &:disabled {
-    opacity: 0.5;
-  }
-`;
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+
+export const SingleShortcut = styled.button`
+  width: 3rem;
+  height: 3rem;
+  background-color: ${uiColors.lightGray};
+  border: 2px solid ${uiColors.darkGray};
+  border-radius: 50%;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  span {
+    pointer-events: none;
+  }
+
+  .mana {
+    position: absolute;
+    top: -5px;
+    right: 0;
+    font-size: 0.65rem;
+    color: ${uiColors.blue};
+  }
+
+  .qty {
+    position: absolute;
+    top: -5px;
+    right: 0;
+    font-size: 0.65rem;
+  }
+
+  .magicWords {
+    margin-top: 4px;
+  }
+
+  .keyboard {
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    font-size: 0.65rem;
+    color: ${uiColors.yellow};
+  }
+
+  .onCooldown {
+    color: ${uiColors.gray};
+  }
+
+  .cooldown {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background-color: rgba(0 0 0 / 60%);
+    font-size: 0.7rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${uiColors.darkYellow};
+  }
+
+  &:hover,
+  &:focus {
+    background-color: ${uiColors.darkGray};
+  }
+
+  &:active {
+    background-color: ${uiColors.gray};
+    border-color: ${uiColors.yellow};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+`;

package/src/components/Shortcuts/useShortcutCooldown.ts

@@ -1,24 +1,24 @@
-import { useEffect, useRef, useState } from "react";
-
-export const useShortcutCooldown = (onShortcutCast: (index: number) => void) => {
-  const [shortcutCooldown, setShortcutCooldown] = useState(0);
-  const cooldownTimeout = useRef<NodeJS.Timeout | null>(null);
-
-  const handleShortcutCast = (index: number) => {
-    console.log(shortcutCooldown);
-    if (shortcutCooldown <= 0) setShortcutCooldown(1.5);
-    onShortcutCast(index);
-  };
-
-  useEffect(() => {
-    if (cooldownTimeout.current) clearTimeout(cooldownTimeout.current);
-
-    if (shortcutCooldown > 0) {
-      cooldownTimeout.current = setTimeout(() => {
-        setShortcutCooldown(shortcutCooldown - 0.1);
-      }, 100);
-    }
-  }, [shortcutCooldown]);
-
-  return { shortcutCooldown, handleShortcutCast };
+import { useEffect, useRef, useState } from "react";
+
+export const useShortcutCooldown = (onShortcutCast: (index: number) => void) => {
+  const [shortcutCooldown, setShortcutCooldown] = useState(0);
+  const cooldownTimeout = useRef<NodeJS.Timeout | null>(null);
+
+  const handleShortcutCast = (index: number) => {
+    console.log(shortcutCooldown);
+    if (shortcutCooldown <= 0) setShortcutCooldown(1.5);
+    onShortcutCast(index);
+  };
+
+  useEffect(() => {
+    if (cooldownTimeout.current) clearTimeout(cooldownTimeout.current);
+
+    if (shortcutCooldown > 0) {
+      cooldownTimeout.current = setTimeout(() => {
+        setShortcutCooldown(shortcutCooldown - 0.1);
+      }, 100);
+    }
+  }, [shortcutCooldown]);
+
+  return { shortcutCooldown, handleShortcutCast };
 };

package/src/components/SimpleProgressBar.tsx

@@ -1,62 +1,62 @@
-import React from 'react';
-import styled from 'styled-components';
-
-export interface ISimpleProgressBarProps {
-  value: number;
-  bgColor?: string;
-  margin?: number;
-}
-
-export const SimpleProgressBar: React.FC<ISimpleProgressBarProps> = ({
-  value,
-  bgColor = 'red',
-  margin = 20,
-}) => {
-  return (
-    <Container className="simple-progress-bar">
-      <ProgressBarContainer margin={margin}>
-        <BackgroundBar>
-          <Progress value={value} bgColor={bgColor} />
-        </BackgroundBar>
-      </ProgressBarContainer>
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-`;
-
-const BackgroundBar = styled.span`
-  background-color: rgba(0, 0, 0, 0.075);
-`;
-
-interface ISimpleProgressBarThemeProps {
-  value: number;
-  bgColor: string;
-}
-
-const Progress = styled.span`
-  background-color: ${(props: ISimpleProgressBarThemeProps) => props.bgColor};
-  width: ${(props: ISimpleProgressBarThemeProps) => props.value}%;
-`;
-
-interface ISimpleProgressBarTheme2Props {
-  margin: number;
-}
-
-const ProgressBarContainer = styled.div`
-  border-radius: 60px;
-  border: 1px solid #282424;
-  overflow: hidden;
-  width: 100%;
-  span {
-    display: block;
-    height: 100%;
-  }
-  height: 8px;
-  margin-left: ${(props: ISimpleProgressBarTheme2Props) => props.margin}px;
-`;
+import React from 'react';
+import styled from 'styled-components';
+
+export interface ISimpleProgressBarProps {
+  value: number;
+  bgColor?: string;
+  margin?: number;
+}
+
+export const SimpleProgressBar: React.FC<ISimpleProgressBarProps> = ({
+  value,
+  bgColor = 'red',
+  margin = 20,
+}) => {
+  return (
+    <Container className="simple-progress-bar">
+      <ProgressBarContainer margin={margin}>
+        <BackgroundBar>
+          <Progress value={value} bgColor={bgColor} />
+        </BackgroundBar>
+      </ProgressBarContainer>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+`;
+
+const BackgroundBar = styled.span`
+  background-color: rgba(0, 0, 0, 0.075);
+`;
+
+interface ISimpleProgressBarThemeProps {
+  value: number;
+  bgColor: string;
+}
+
+const Progress = styled.span`
+  background-color: ${(props: ISimpleProgressBarThemeProps) => props.bgColor};
+  width: ${(props: ISimpleProgressBarThemeProps) => props.value}%;
+`;
+
+interface ISimpleProgressBarTheme2Props {
+  margin: number;
+}
+
+const ProgressBarContainer = styled.div`
+  border-radius: 60px;
+  border: 1px solid #282424;
+  overflow: hidden;
+  width: 100%;
+  span {
+    display: block;
+    height: 100%;
+  }
+  height: 8px;
+  margin-left: ${(props: ISimpleProgressBarTheme2Props) => props.margin}px;
+`;

package/src/components/SkillProgressBar.tsx

@@ -1,133 +1,198 @@
-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 { uiColors } from '../constants/uiColors';
+import { ErrorBoundary } from './Item/Inventory/ErrorBoundary';
+import { SimpleProgressBar } from './SimpleProgressBar';
+import { SpriteFromAtlas } from './shared/SpriteFromAtlas';
+
+export interface ISkillProgressBarProps {
+  skillName: string;
+  bgColor: string;
+  level: number;
+  skillPoints: number;
+  skillPointsToNextLevel?: number;
+  texturePath: string;
+  showSkillPoints?: boolean;
+  atlasJSON: any;
+  atlasIMG: any;
+  buffAndDebuff?: number;
+}
+
+export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
+  bgColor,
+  skillName,
+  level,
+  skillPoints,
+  skillPointsToNextLevel,
+  texturePath,
+  showSkillPoints = true,
+  atlasIMG,
+  atlasJSON,
+  buffAndDebuff,
+}) => {
+  if (!skillPointsToNextLevel) {
+    skillPointsToNextLevel = getSPForLevel(level + 1);
+  }
+
+  const nextLevelSPWillbe = skillPoints + skillPointsToNextLevel;
+
+  const ratio = (skillPoints / nextLevelSPWillbe) * 100;
+
+  const skillsBuffsCalc = () => {
+    if (buffAndDebuff) {
+      return 1 + buffAndDebuff / 100;
+    }
+    return;
+  };
+
+  return (
+    <>
+      <ProgressTitle>
+        {buffAndDebuff !== undefined && (
+          <>
+            {buffAndDebuff > 0 ? (
+              <BuffAndDebuffContainer>
+                <TitleNameContainer>
+                  <TitleNameBuff>{skillName}</TitleNameBuff>
+                  <TitleNameBuff>
+                    lv {level} ({skillsBuffsCalc()})
+                  </TitleNameBuff>
+                </TitleNameContainer>
+                <TitleNameBuffContainer>
+                  <TitleNameBuff>(+{buffAndDebuff}%)</TitleNameBuff>
+                </TitleNameBuffContainer>
+              </BuffAndDebuffContainer>
+            ) : buffAndDebuff < 0 ? (
+              <>
+                <TitleNameContainer>
+                  <TitleNameDebuff>{skillName}</TitleNameDebuff>
+                  <TitleNameDebuff>
+                    lv {level} ({skillsBuffsCalc()})
+                  </TitleNameDebuff>
+                </TitleNameContainer>
+                <div>
+                  <TitleNameDebuff>({buffAndDebuff}%)</TitleNameDebuff>
+                </div>
+              </>
+            ) : (
+              <TitleName>{skillName}</TitleName>
+            )}
+          </>
+        )}
+        {!buffAndDebuff && (
+          <TitleNameContainer>
+            <TitleName>{skillName}</TitleName>
+            <ValueDisplay>lv {level}</ValueDisplay>
+          </TitleNameContainer>
+        )}
+      </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 TitleNameBuff = styled.span`
+  margin-left: 5px;
+  color: ${uiColors.lightGreen} !important;
+`;
+
+const TitleNameDebuff = styled.span`
+  margin-left: 5px;
+  color: ${uiColors.red} !important;
+`;
+
+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: column;
+  justify-content: space-between;
+  span {
+    font-size: 0.6rem;
+  }
+`;
+
+const BuffAndDebuffContainer = styled.div``;
+
+const TitleNameBuffContainer = styled.div``;
+
+const TitleNameContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;