@rpg-engine/long-bow 0.4.2 → 0.4.4

package/src/components/Shortcuts/Shortcuts.tsx

@@ -1,193 +1,193 @@
-import {
-  getItemTextureKeyPath,
-  IItem,
-  IItemContainer,
-  IRawSpell,
-  IShortcut,
-  ShortcutType,
-} from '@rpg-engine/shared';
-import React, { useEffect, useRef } from 'react';
-import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
-import { countItemFromInventory } from '../../libs/itemCounter';
-import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
-import { SingleShortcut } from './SingleShortcut';
-import { useShortcutCooldown } from './useShortcutCooldown';
-
-export type ShortcutsProps = {
-  shortcuts: IShortcut[];
-  onShortcutCast: (index: number) => void;
-  mana: number;
-  isBlockedCastingByKeyboard?: boolean;
-  inventory?: IItemContainer | null;
-  atlasJSON: any;
-  atlasIMG: any;
-  spellCooldowns?: Record<string, number>;
-};
-
-export const Shortcuts: React.FC<ShortcutsProps> = ({
-  shortcuts,
-  onShortcutCast,
-  mana,
-  isBlockedCastingByKeyboard = false,
-  atlasJSON,
-  atlasIMG,
-  inventory,
-  spellCooldowns,
-}) => {
-  const shortcutsRefs = useRef<HTMLButtonElement[]>([]);
-
-  const { handleShortcutCast, shortcutCooldown } = useShortcutCooldown(
-    onShortcutCast
-  );
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (isBlockedCastingByKeyboard) return;
-
-      const shortcutIndex = Number(e.key) - 1;
-      if (shortcutIndex >= 0 && shortcutIndex <= 5) {
-        handleShortcutCast(shortcutIndex);
-        shortcutsRefs.current[shortcutIndex]?.classList.add('active');
-        setTimeout(() => {
-          shortcutsRefs.current[shortcutIndex]?.classList.remove('active');
-        }, 150);
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [shortcuts, isBlockedCastingByKeyboard, shortcutCooldown]);
-
-  return (
-    <List>
-      {Array.from({ length: 6 }).map((_, i) => {
-        const buildClassName = (classBase: string, isOnCooldown: boolean) => {
-          return `${classBase} ${isOnCooldown ? 'onCooldown' : ''}`;
-        };
-
-        const isOnShortcutCooldown = shortcutCooldown > 0;
-
-        if (shortcuts && shortcuts[i]?.type === ShortcutType.Item) {
-          const payload = shortcuts[i]?.payload as IItem | undefined;
-
-          let itemsFromEquipment: (IItem | undefined | null)[] = [];
-
-          if (inventory) {
-            Object.keys(inventory.slots).forEach(i => {
-              const index = parseInt(i);
-
-              if (inventory.slots[index]?.key === payload?.key) {
-                itemsFromEquipment.push(inventory.slots[index]);
-              }
-            });
-          }
-
-          const totalQty =
-            payload && inventory
-              ? countItemFromInventory(payload.key, inventory)
-              : 0;
-
-          return (
-            <StyledShortcut
-              key={i}
-              onPointerDown={handleShortcutCast.bind(null, i)}
-              disabled={false}
-              ref={el => {
-                if (el) shortcutsRefs.current[i] = el;
-              }}
-            >
-              {isOnShortcutCooldown && (
-                <span className="cooldown">{shortcutCooldown.toFixed(1)}</span>
-              )}
-              {payload && (
-                <SpriteFromAtlas
-                  atlasIMG={atlasIMG}
-                  atlasJSON={atlasJSON}
-                  spriteKey={getItemTextureKeyPath(
-                    {
-                      key: payload.texturePath,
-                      texturePath: payload.texturePath,
-                      stackQty: payload.stackQty || 1,
-                      isStackable: payload.isStackable,
-                    },
-                    atlasJSON
-                  )}
-                  width={32}
-                  height={32}
-                />
-              )}
-              <span className={buildClassName('qty', isOnShortcutCooldown)}>
-                {totalQty}
-              </span>
-              <span
-                className={buildClassName('keyboard', isOnShortcutCooldown)}
-              >
-                {i + 1}
-              </span>
-            </StyledShortcut>
-          );
-        }
-
-        const payload =
-          shortcuts && (shortcuts[i]?.payload as IRawSpell | undefined); //check if shortcuts exists before using the ? operator.
-
-        const spellCooldown = !payload
-          ? 0
-          : spellCooldowns?.[payload.magicWords.replaceAll(' ', '_')] ??
-            shortcutCooldown;
-        const cooldown =
-          spellCooldown > shortcutCooldown ? spellCooldown : shortcutCooldown;
-        const isOnCooldown = cooldown > 0 && !!payload;
-
-        return (
-          <StyledShortcut
-            key={i}
-            onPointerDown={handleShortcutCast.bind(null, i)}
-            disabled={mana < (payload?.manaCost ?? 0)}
-            ref={el => {
-              if (el) shortcutsRefs.current[i] = el;
-            }}
-          >
-            {isOnCooldown && (
-              <span className="cooldown">
-                {cooldown.toFixed(cooldown < 10 ? 1 : 0)}
-              </span>
-            )}
-            <span className={buildClassName('mana', isOnCooldown)}>
-              {payload && payload.manaCost}
-            </span>
-            <span className="magicWords">
-              {payload?.magicWords.split(' ').map(word => word[0])}
-            </span>
-            <span className={buildClassName('keyboard', isOnCooldown)}>
-              {i + 1}
-            </span>
-          </StyledShortcut>
-        );
-      })}
-    </List>
-  );
-};
-
-const StyledShortcut = styled(SingleShortcut)`
-  transition: all 0.15s;
-
-  &.active {
-    background-color: ${uiColors.gray};
-    border-color: ${uiColors.yellow};
-  }
-`;
-
-const List = styled.p`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  box-sizing: border-box;
-  margin: 0 !important;
-`;
+import {
+  getItemTextureKeyPath,
+  IItem,
+  IItemContainer,
+  IRawSpell,
+  IShortcut,
+  ShortcutType,
+} from '@rpg-engine/shared';
+import React, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { countItemFromInventory } from '../../libs/itemCounter';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { SingleShortcut } from './SingleShortcut';
+import { useShortcutCooldown } from './useShortcutCooldown';
+
+export type ShortcutsProps = {
+  shortcuts: IShortcut[];
+  onShortcutCast: (index: number) => void;
+  mana: number;
+  isBlockedCastingByKeyboard?: boolean;
+  inventory?: IItemContainer | null;
+  atlasJSON: any;
+  atlasIMG: any;
+  spellCooldowns?: Record<string, number>;
+};
+
+export const Shortcuts: React.FC<ShortcutsProps> = ({
+  shortcuts,
+  onShortcutCast,
+  mana,
+  isBlockedCastingByKeyboard = false,
+  atlasJSON,
+  atlasIMG,
+  inventory,
+  spellCooldowns,
+}) => {
+  const shortcutsRefs = useRef<HTMLButtonElement[]>([]);
+
+  const { handleShortcutCast, shortcutCooldown } = useShortcutCooldown(
+    onShortcutCast
+  );
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (isBlockedCastingByKeyboard) return;
+
+      const shortcutIndex = Number(e.key) - 1;
+      if (shortcutIndex >= 0 && shortcutIndex <= 5) {
+        handleShortcutCast(shortcutIndex);
+        shortcutsRefs.current[shortcutIndex]?.classList.add('active');
+        setTimeout(() => {
+          shortcutsRefs.current[shortcutIndex]?.classList.remove('active');
+        }, 150);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [shortcuts, isBlockedCastingByKeyboard, shortcutCooldown]);
+
+  return (
+    <List>
+      {Array.from({ length: 6 }).map((_, i) => {
+        const buildClassName = (classBase: string, isOnCooldown: boolean) => {
+          return `${classBase} ${isOnCooldown ? 'onCooldown' : ''}`;
+        };
+
+        const isOnShortcutCooldown = shortcutCooldown > 0;
+
+        if (shortcuts && shortcuts[i]?.type === ShortcutType.Item) {
+          const payload = shortcuts[i]?.payload as IItem | undefined;
+
+          let itemsFromEquipment: (IItem | undefined | null)[] = [];
+
+          if (inventory) {
+            Object.keys(inventory.slots).forEach(i => {
+              const index = parseInt(i);
+
+              if (inventory.slots[index]?.key === payload?.key) {
+                itemsFromEquipment.push(inventory.slots[index]);
+              }
+            });
+          }
+
+          const totalQty =
+            payload && inventory
+              ? countItemFromInventory(payload.key, inventory)
+              : 0;
+
+          return (
+            <StyledShortcut
+              key={i}
+              onPointerDown={handleShortcutCast.bind(null, i)}
+              disabled={false}
+              ref={el => {
+                if (el) shortcutsRefs.current[i] = el;
+              }}
+            >
+              {isOnShortcutCooldown && (
+                <span className="cooldown">{shortcutCooldown.toFixed(1)}</span>
+              )}
+              {payload && (
+                <SpriteFromAtlas
+                  atlasIMG={atlasIMG}
+                  atlasJSON={atlasJSON}
+                  spriteKey={getItemTextureKeyPath(
+                    {
+                      key: payload.texturePath,
+                      texturePath: payload.texturePath,
+                      stackQty: payload.stackQty || 1,
+                      isStackable: payload.isStackable,
+                    },
+                    atlasJSON
+                  )}
+                  width={32}
+                  height={32}
+                />
+              )}
+              <span className={buildClassName('qty', isOnShortcutCooldown)}>
+                {totalQty}
+              </span>
+              <span
+                className={buildClassName('keyboard', isOnShortcutCooldown)}
+              >
+                {i + 1}
+              </span>
+            </StyledShortcut>
+          );
+        }
+
+        const payload =
+          shortcuts && (shortcuts[i]?.payload as IRawSpell | undefined); //check if shortcuts exists before using the ? operator.
+
+        const spellCooldown = !payload
+          ? 0
+          : spellCooldowns?.[payload.magicWords.replaceAll(' ', '_')] ??
+            shortcutCooldown;
+        const cooldown =
+          spellCooldown > shortcutCooldown ? spellCooldown : shortcutCooldown;
+        const isOnCooldown = cooldown > 0 && !!payload;
+
+        return (
+          <StyledShortcut
+            key={i}
+            onPointerDown={handleShortcutCast.bind(null, i)}
+            disabled={mana < (payload?.manaCost ?? 0)}
+            ref={el => {
+              if (el) shortcutsRefs.current[i] = el;
+            }}
+          >
+            {isOnCooldown && (
+              <span className="cooldown">
+                {cooldown.toFixed(cooldown < 10 ? 1 : 0)}
+              </span>
+            )}
+            <span className={buildClassName('mana', isOnCooldown)}>
+              {payload && payload.manaCost}
+            </span>
+            <span className="magicWords">
+              {payload?.magicWords.split(' ').map(word => word[0])}
+            </span>
+            <span className={buildClassName('keyboard', isOnCooldown)}>
+              {i + 1}
+            </span>
+          </StyledShortcut>
+        );
+      })}
+    </List>
+  );
+};
+
+const StyledShortcut = styled(SingleShortcut)`
+  transition: all 0.15s;
+
+  &.active {
+    background-color: ${uiColors.gray};
+    border-color: ${uiColors.yellow};
+  }
+`;
+
+const List = styled.p`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  box-sizing: border-box;
+  margin: 0 !important;
+`;

package/src/components/Shortcuts/ShortcutsSetter.tsx

@@ -1,139 +1,139 @@
-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,
-              isStackable: payload.isStackable,
-            },
-            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={() => {
-              if (settingShortcutIndex !== -1) setSettingShortcutIndex(-1);
-
-              removeShortcut(i);
-              if (
-                settingShortcutIndex === -1 &&
-                (!shortcuts[i] || shortcuts[i].type === ShortcutType.None)
-              )
-                setSettingShortcutIndex(i);
-            }}
-            disabled={settingShortcutIndex !== -1 && settingShortcutIndex !== i}
-            isBeingSet={settingShortcutIndex === i}
-            id={`shortcutSetter_${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,
+              isStackable: payload.isStackable,
+            },
+            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={() => {
+              if (settingShortcutIndex !== -1) setSettingShortcutIndex(-1);
+
+              removeShortcut(i);
+              if (
+                settingShortcutIndex === -1 &&
+                (!shortcuts[i] || shortcuts[i].type === ShortcutType.None)
+              )
+                setSettingShortcutIndex(i);
+            }}
+            disabled={settingShortcutIndex !== -1 && settingShortcutIndex !== i}
+            isBeingSet={settingShortcutIndex === i}
+            id={`shortcutSetter_${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;
+`;