@rpg-engine/long-bow 0.3.33 → 0.3.35

package/src/stories/QuickSpells.stories.tsx

@@ -0,0 +1,38 @@
+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,
+};

package/src/stories/Spellbook.stories.tsx

@@ -0,0 +1,107 @@
+import { Meta, Story } from '@storybook/react';
+import React, { useEffect, useState } from 'react';
+import { RPGUIRoot } from '../components/RPGUIRoot';
+import {
+  defaultSpellShortcut,
+  SPELL_SHORTCUTS_STORAGE_KEY,
+} from '../components/Spellbook/constants';
+import { mockSpells } from '../components/Spellbook/mockSpells';
+import { ISpellbookProps, Spellbook } from '../components/Spellbook/Spellbook';
+
+const meta: Meta = {
+  title: 'Spellbook',
+  component: Spellbook,
+};
+
+export default meta;
+
+const Template: Story<ISpellbookProps> = args => {
+  const [spellShortcuts, setSpellShortcuts] = useState([]);
+
+  useEffect(() => {
+    const shortcuts = localStorage.getItem(SPELL_SHORTCUTS_STORAGE_KEY);
+    if (shortcuts) {
+      setSpellShortcuts(JSON.parse(shortcuts));
+    }
+  }, []);
+
+  const setSpellShortcut = (key: string, index: number) => {
+    const spellShortcuts = JSON.parse(
+      localStorage.getItem(SPELL_SHORTCUTS_STORAGE_KEY) as string
+    );
+
+    const spell = mockSpells.find(s => s.key === key);
+    if (!spell) {
+      return;
+    }
+
+    if (!spellShortcuts) {
+      const newSpellShortcuts = [
+        defaultSpellShortcut,
+        defaultSpellShortcut,
+        defaultSpellShortcut,
+        defaultSpellShortcut,
+      ];
+
+      newSpellShortcuts[index] = spell;
+
+      localStorage.setItem(
+        SPELL_SHORTCUTS_STORAGE_KEY,
+        JSON.stringify(newSpellShortcuts)
+      );
+    } else {
+      spellShortcuts[index] = spell;
+
+      localStorage.setItem(
+        SPELL_SHORTCUTS_STORAGE_KEY,
+        JSON.stringify(spellShortcuts)
+      );
+    }
+
+    setSpellShortcuts(spellShortcuts);
+  };
+
+  const removeSpellShortcut = (index: number) => {
+    const spellShortcuts = JSON.parse(
+      localStorage.getItem(SPELL_SHORTCUTS_STORAGE_KEY) as string
+    );
+
+    if (!spellShortcuts) return;
+
+    spellShortcuts[index] = defaultSpellShortcut;
+
+    localStorage.setItem(
+      SPELL_SHORTCUTS_STORAGE_KEY,
+      JSON.stringify(spellShortcuts)
+    );
+
+    setSpellShortcuts(spellShortcuts);
+  };
+
+  return (
+    <RPGUIRoot>
+      <div
+        style={{
+          width: '50%',
+          height: '75%',
+        }}
+      >
+        <Spellbook
+          {...args}
+          setSpellShortcut={setSpellShortcut}
+          removeSpellShortcut={removeSpellShortcut}
+          spellShortcuts={spellShortcuts}
+        />
+      </div>
+    </RPGUIRoot>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  onClose: () => console.log('close'),
+  onSpellClick: spellKey => console.log(spellKey),
+  spells: mockSpells,
+  magicLevel: 3,
+  mana: 5,
+};