@rpg-engine/long-bow 0.3.86 → 0.3.87

package/src/components/Shortcuts/ShortcutsSetter.tsx

@@ -1,132 +1,132 @@
-import {
-  getItemTextureKeyPath,
-  IItem,
-  IRawSpell,
-  IShortcut,
-  ShortcutType,
-} from '@rpg-engine/shared';
-import React from 'react';
-import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
-import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
-
-type ShortcutsSetterProps = {
-  setSettingShortcutIndex: (index: number) => void;
-  settingShortcutIndex: number;
-  shortcuts: IShortcut[];
-  removeShortcut: (index: number) => void;
-  atlasJSON: any;
-  atlasIMG: any;
-};
-
-export const ShortcutsSetter: React.FC<ShortcutsSetterProps> = ({
-  setSettingShortcutIndex,
-  settingShortcutIndex,
-  shortcuts,
-  removeShortcut,
-  atlasJSON,
-  atlasIMG,
-}) => {
-  const getContent = (index: number) => {
-    if (shortcuts[index]?.type === ShortcutType.Item) {
-      const payload = shortcuts[index]?.payload as IItem | undefined;
-
-      if (!payload) return null;
-
-      return (
-        <SpriteFromAtlas
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          spriteKey={getItemTextureKeyPath(
-            {
-              key: payload.texturePath,
-              texturePath: payload.texturePath,
-              stackQty: payload.stackQty || 1,
-            },
-            atlasJSON
-          )}
-          width={32}
-          height={32}
-          imgScale={1.6}
-          imgStyle={{ left: '5px' }}
-        />
-      );
-    }
-
-    const payload = shortcuts[index]?.payload as IRawSpell | undefined;
-
-    return <span>{payload?.magicWords.split(' ').map(word => word[0])}</span>;
-  };
-
-  return (
-    <Container>
-      <p>Shortcuts:</p>
-      <List id="shortcuts_list">
-        {Array.from({ length: 6 }).map((_, i) => (
-          <Shortcut
-            key={i}
-            onPointerDown={() => {
-              removeShortcut(i);
-              if (!shortcuts[i] || shortcuts[i].type === ShortcutType.None)
-                setSettingShortcutIndex(i);
-            }}
-            disabled={settingShortcutIndex !== -1 && settingShortcutIndex !== i}
-            isBeingSet={settingShortcutIndex === i}
-          >
-            {getContent(i)}
-          </Shortcut>
-        ))}
-      </List>
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  p {
-    margin: 0;
-    margin-left: 0.5rem;
-  }
-`;
-
-const Shortcut = styled.button<{ isBeingSet?: boolean }>`
-  width: 2.6rem;
-  height: 2.6rem;
-  background-color: ${uiColors.lightGray};
-  border: 2px solid
-    ${({ isBeingSet }) => (isBeingSet ? uiColors.yellow : uiColors.darkGray)};
-  border-radius: 50%;
-  text-transform: uppercase;
-  font-size: 0.7rem;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  span {
-    margin-top: 4px;
-  }
-
-  &:hover,
-  &:focus {
-    background-color: ${uiColors.darkGray};
-  }
-
-  &:active {
-    background-color: ${uiColors.gray};
-  }
-
-  &:disabled {
-    opacity: 0.5;
-  }
-`;
-
-const List = styled.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0.5rem;
-  box-sizing: border-box;
-  margin: 0 !important;
-`;
+import {
+  getItemTextureKeyPath,
+  IItem,
+  IRawSpell,
+  IShortcut,
+  ShortcutType,
+} from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+type ShortcutsSetterProps = {
+  setSettingShortcutIndex: (index: number) => void;
+  settingShortcutIndex: number;
+  shortcuts: IShortcut[];
+  removeShortcut: (index: number) => void;
+  atlasJSON: any;
+  atlasIMG: any;
+};
+
+export const ShortcutsSetter: React.FC<ShortcutsSetterProps> = ({
+  setSettingShortcutIndex,
+  settingShortcutIndex,
+  shortcuts,
+  removeShortcut,
+  atlasJSON,
+  atlasIMG,
+}) => {
+  const getContent = (index: number) => {
+    if (shortcuts[index]?.type === ShortcutType.Item) {
+      const payload = shortcuts[index]?.payload as IItem | undefined;
+
+      if (!payload) return null;
+
+      return (
+        <SpriteFromAtlas
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          spriteKey={getItemTextureKeyPath(
+            {
+              key: payload.texturePath,
+              texturePath: payload.texturePath,
+              stackQty: payload.stackQty || 1,
+            },
+            atlasJSON
+          )}
+          width={32}
+          height={32}
+          imgScale={1.6}
+          imgStyle={{ left: '5px' }}
+        />
+      );
+    }
+
+    const payload = shortcuts[index]?.payload as IRawSpell | undefined;
+
+    return <span>{payload?.magicWords.split(' ').map(word => word[0])}</span>;
+  };
+
+  return (
+    <Container>
+      <p>Shortcuts:</p>
+      <List id="shortcuts_list">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Shortcut
+            key={i}
+            onPointerDown={() => {
+              removeShortcut(i);
+              if (!shortcuts[i] || shortcuts[i].type === ShortcutType.None)
+                setSettingShortcutIndex(i);
+            }}
+            disabled={settingShortcutIndex !== -1 && settingShortcutIndex !== i}
+            isBeingSet={settingShortcutIndex === i}
+          >
+            {getContent(i)}
+          </Shortcut>
+        ))}
+      </List>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  p {
+    margin: 0;
+    margin-left: 0.5rem;
+  }
+`;
+
+const Shortcut = styled.button<{ isBeingSet?: boolean }>`
+  width: 2.6rem;
+  height: 2.6rem;
+  background-color: ${uiColors.lightGray};
+  border: 2px solid
+    ${({ isBeingSet }) => (isBeingSet ? uiColors.yellow : uiColors.darkGray)};
+  border-radius: 50%;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    margin-top: 4px;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: ${uiColors.darkGray};
+  }
+
+  &:active {
+    background-color: ${uiColors.gray};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+`;
+
+const List = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.5rem;
+  box-sizing: border-box;
+  margin: 0 !important;
+`;

package/src/components/Shortcuts/SingleShortcut.ts

@@ -1,62 +1,62 @@
-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};
-  }
-
-  &: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};
+  }
+
+  &:hover,
+  &:focus {
+    background-color: ${uiColors.darkGray};
+  }
+
+  &:active {
+    background-color: ${uiColors.gray};
+    border-color: ${uiColors.yellow};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+`;

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