@rpg-engine/long-bow 0.3.51 → 0.3.53

package/src/stories/Spellbook.stories.tsx

@@ -1,12 +1,15 @@
+import { IShortcut, ShortcutType } from '@rpg-engine/shared';
 import { Meta, Story } from '@storybook/react';
 import React, { useEffect, useState } from 'react';
 import { RPGUIRoot } from '../components/RPGUIRoot';
 import {
-  defaultSpellShortcut,
-  SPELL_SHORTCUTS_STORAGE_KEY,
+  defaultShortcut,
+  SHORTCUTS_STORAGE_KEY,
 } from '../components/Spellbook/constants';
 import { mockSpells } from '../components/Spellbook/mockSpells';
 import { ISpellbookProps, Spellbook } from '../components/Spellbook/Spellbook';
+import atlasJSON from '../mocks/atlas/items/items.json';
+import atlasIMG from '../mocks/atlas/items/items.png';
 
 const meta: Meta = {
   title: 'Spellbook',
@@ -16,66 +19,58 @@ const meta: Meta = {
 export default meta;
 
 const Template: Story<ISpellbookProps> = args => {
-  const [spellShortcuts, setSpellShortcuts] = useState([]);
+  const [shortcuts, setShortcuts] = useState<IShortcut[]>([]);
 
   useEffect(() => {
-    const shortcuts = localStorage.getItem(SPELL_SHORTCUTS_STORAGE_KEY);
+    const shortcuts = localStorage.getItem(SHORTCUTS_STORAGE_KEY);
     if (shortcuts) {
-      setSpellShortcuts(JSON.parse(shortcuts));
+      setShortcuts(JSON.parse(shortcuts));
     }
   }, []);
 
   const setSpellShortcut = (key: string, index: number) => {
-    const spellShortcuts = JSON.parse(
-      localStorage.getItem(SPELL_SHORTCUTS_STORAGE_KEY) as string
-    );
+    const shortcuts = JSON.parse(
+      localStorage.getItem(SHORTCUTS_STORAGE_KEY) as string
+    ) as IShortcut[];
 
     const spell = mockSpells.find(s => s.key === key);
     if (!spell) {
       return;
     }
 
-    if (!spellShortcuts) {
-      const newSpellShortcuts = [
-        defaultSpellShortcut,
-        defaultSpellShortcut,
-        defaultSpellShortcut,
-        defaultSpellShortcut,
-      ];
+    if (!shortcuts) {
+      const newShortcuts: IShortcut[] = Array(6).fill(defaultShortcut);
 
-      newSpellShortcuts[index] = spell;
+      newShortcuts[index] = {
+        type: ShortcutType.Spell,
+        payload: spell,
+      };
 
-      localStorage.setItem(
-        SPELL_SHORTCUTS_STORAGE_KEY,
-        JSON.stringify(newSpellShortcuts)
-      );
+      localStorage.setItem(SHORTCUTS_STORAGE_KEY, JSON.stringify(newShortcuts));
     } else {
-      spellShortcuts[index] = spell;
+      shortcuts[index] = {
+        type: ShortcutType.Spell,
+        payload: spell,
+      };
 
-      localStorage.setItem(
-        SPELL_SHORTCUTS_STORAGE_KEY,
-        JSON.stringify(spellShortcuts)
-      );
+      localStorage.setItem(SHORTCUTS_STORAGE_KEY, JSON.stringify(shortcuts));
     }
 
-    setSpellShortcuts(spellShortcuts);
+    setShortcuts(shortcuts);
   };
 
-  const removeSpellShortcut = (index: number) => {
-    const spellShortcuts = JSON.parse(
-      localStorage.getItem(SPELL_SHORTCUTS_STORAGE_KEY) as string
+  const removeShortcut = (index: number) => {
+    const shortcuts = JSON.parse(
+      localStorage.getItem(SHORTCUTS_STORAGE_KEY) as string
     );
 
-    if (!spellShortcuts) return;
+    if (!shortcuts) return;
 
-    spellShortcuts[index] = defaultSpellShortcut;
+    shortcuts[index] = defaultShortcut;
 
-    localStorage.setItem(
-      SPELL_SHORTCUTS_STORAGE_KEY,
-      JSON.stringify(spellShortcuts)
-    );
+    localStorage.setItem(SHORTCUTS_STORAGE_KEY, JSON.stringify(shortcuts));
 
-    setSpellShortcuts(spellShortcuts);
+    setShortcuts(shortcuts);
   };
 
   return (
@@ -89,8 +84,8 @@ const Template: Story<ISpellbookProps> = args => {
         <Spellbook
           {...args}
           setSpellShortcut={setSpellShortcut}
-          removeSpellShortcut={removeSpellShortcut}
-          spellShortcuts={spellShortcuts}
+          removeShortcut={removeShortcut}
+          shortcuts={shortcuts}
         />
       </div>
     </RPGUIRoot>
@@ -104,4 +99,6 @@ Default.args = {
   spells: mockSpells,
   magicLevel: 3,
   mana: 5,
+  atlasIMG,
+  atlasJSON,
 };

package/dist/components/Spellbook/QuickSpells.d.ts

@@ -1,10 +0,0 @@
-import { IRawSpell } from '@rpg-engine/shared';
-import React from 'react';
-export declare type QuickSpellsProps = {
-    quickSpells: IRawSpell[];
-    onSpellCast: (spellKey: string) => void;
-    mana: number;
-    isBlockedCastingByKeyboard?: boolean;
-};
-export declare const QuickSpells: React.FC<QuickSpellsProps>;
-export declare const SpellShortcut: import("styled-components").StyledComponent<"button", any, {}, never>;

package/dist/components/Spellbook/SpellbookShortcuts.d.ts

@@ -1,10 +0,0 @@
-import { IRawSpell } from '@rpg-engine/shared';
-import React from 'react';
-declare type Props = {
-    setSettingShortcutIndex: (index: number) => void;
-    settingShortcutIndex: number;
-    shortcuts: IRawSpell[];
-    removeShortcut: (index: number) => void;
-};
-export declare const SpellbookShortcuts: React.FC<Props>;
-export {};

package/src/components/Spellbook/QuickSpells.tsx

@@ -1,120 +0,0 @@
-import { IRawSpell } from '@rpg-engine/shared';
-import React, { useEffect } from 'react';
-import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
-
-export type QuickSpellsProps = {
-  quickSpells: IRawSpell[];
-  onSpellCast: (spellKey: string) => void;
-  mana: number;
-  isBlockedCastingByKeyboard?: boolean;
-};
-
-export const QuickSpells: React.FC<QuickSpellsProps> = ({
-  quickSpells,
-  onSpellCast,
-  mana,
-  isBlockedCastingByKeyboard = false,
-}) => {
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (isBlockedCastingByKeyboard) return;
-
-      const shortcutIndex = Number(e.key) - 1;
-      if (shortcutIndex >= 0 && shortcutIndex <= 3) {
-        const shortcut = quickSpells[shortcutIndex];
-        if (shortcut?.key && mana >= shortcut?.manaCost) {
-          onSpellCast(shortcut.key);
-        }
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [quickSpells, isBlockedCastingByKeyboard]);
-
-  return (
-    <List>
-      {Array.from({ length: 4 }).map((_, i) => (
-        <SpellShortcut
-          key={i}
-          onClick={onSpellCast.bind(null, quickSpells[i]?.key)}
-          disabled={mana < quickSpells[i]?.manaCost}
-        >
-          <span className="mana">
-            {quickSpells[i]?.key && quickSpells[i]?.manaCost}
-          </span>
-          <span className="magicWords">
-            {quickSpells[i]?.magicWords.split(' ').map(word => word[0])}
-          </span>
-          <span className="keyboard">{i + 1}</span>
-        </SpellShortcut>
-      ))}
-    </List>
-  );
-};
-
-export const SpellShortcut = 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};
-  }
-
-  .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};
-  }
-
-  &:disabled {
-    opacity: 0.5;
-  }
-`;
-
-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/Spellbook/SpellbookShortcuts.tsx

@@ -1,77 +0,0 @@
-import { IRawSpell } from '@rpg-engine/shared';
-import React from 'react';
-import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
-
-type Props = {
-  setSettingShortcutIndex: (index: number) => void;
-  settingShortcutIndex: number;
-  shortcuts: IRawSpell[];
-  removeShortcut: (index: number) => void;
-};
-
-export const SpellbookShortcuts: React.FC<Props> = ({
-  setSettingShortcutIndex,
-  settingShortcutIndex,
-  shortcuts,
-  removeShortcut,
-}) => (
-  <List id="shortcuts_list">
-    Spells shortcuts:
-    {Array.from({ length: 4 }).map((_, i) => (
-      <SpellShortcut
-        key={i}
-        onClick={() => {
-          removeShortcut(i);
-          if (!shortcuts[i]?.key) setSettingShortcutIndex(i);
-        }}
-        disabled={settingShortcutIndex !== -1 && settingShortcutIndex !== i}
-        isBeingSet={settingShortcutIndex === i}
-      >
-        <span>{shortcuts[i]?.magicWords.split(' ').map(word => word[0])}</span>
-      </SpellShortcut>
-    ))}
-  </List>
-);
-const SpellShortcut = 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.p`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  padding: 0.5rem;
-  box-sizing: border-box;
-  margin: 0 !important;
-`;

package/src/stories/QuickSpells.stories.tsx

@@ -1,38 +0,0 @@
-import { Meta, Story } from '@storybook/react';
-import React from 'react';
-import { RPGUIRoot } from '../components/RPGUIRoot';
-import { SPELL_SHORTCUTS_STORAGE_KEY } from '../components/Spellbook/constants';
-import {
-  QuickSpells,
-  QuickSpellsProps,
-} from '../components/Spellbook/QuickSpells';
-
-const meta: Meta = {
-  title: 'QuickSpells',
-  component: QuickSpells,
-};
-
-export default meta;
-
-const Template: Story<QuickSpellsProps> = args => {
-  return (
-    <RPGUIRoot>
-      <div
-        style={{
-          width: '100%',
-        }}
-      >
-        <QuickSpells {...args} />
-      </div>
-    </RPGUIRoot>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  onSpellCast: spellKey => console.log(spellKey),
-  quickSpells: JSON.parse(
-    localStorage.getItem(SPELL_SHORTCUTS_STORAGE_KEY) as string
-  ),
-  mana: 100,
-};