@rpg-engine/long-bow 0.4.7 → 0.4.8

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