@rpg-engine/long-bow 0.3.58 → 0.3.60

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}
-          onPointerDown={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}
-        onPointerDown={() => {
-          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,
-};