@rpg-engine/long-bow 0.3.50 → 0.3.52

package/src/components/Spellbook/Spellbook.tsx

@@ -1,144 +1,151 @@
-import { IRawSpell } from '@rpg-engine/shared';
-import React, { Fragment, useEffect, useMemo, useState } from 'react';
-import styled from 'styled-components';
-import { uiFonts } from '../../constants/uiFonts';
-import { DraggableContainer } from '../DraggableContainer';
-import { Input } from '../Input';
-import { RPGUIContainerTypes } from '../RPGUIContainer';
-import { Spell } from './Spell';
-import { SpellbookShortcuts } from './SpellbookShortcuts';
-
-export interface ISpellbookProps {
-  onClose?: () => void;
-  onInputFocus?: () => void;
-  onInputBlur?: () => void;
-  spells: IRawSpell[];
-  magicLevel: number;
-  mana: number;
-  onSpellClick: (spellKey: string) => void;
-  setSpellShortcut: (key: string, index: number) => void;
-  spellShortcuts: IRawSpell[];
-  removeSpellShortcut: (index: number) => void;
-}
-
-export const Spellbook: React.FC<ISpellbookProps> = ({
-  onClose,
-  onInputFocus,
-  onInputBlur,
-  spells,
-  magicLevel,
-  mana,
-  onSpellClick,
-  setSpellShortcut,
-  spellShortcuts,
-  removeSpellShortcut,
-}) => {
-  const [search, setSearch] = useState('');
-  const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
-
-  useEffect(() => {
-    const handleEscapeClose = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose?.();
-      }
-    };
-
-    document.addEventListener('keydown', handleEscapeClose);
-
-    return () => {
-      document.removeEventListener('keydown', handleEscapeClose);
-    };
-  }, [onClose]);
-
-  const spellsToDisplay = useMemo(() => {
-    return spells
-      .sort((a, b) => {
-        if (a.minMagicLevelRequired > b.minMagicLevelRequired) return 1;
-        if (a.minMagicLevelRequired < b.minMagicLevelRequired) return -1;
-        return 0;
-      })
-      .filter(
-        spell =>
-          spell.name.toLocaleLowerCase().includes(search.toLocaleLowerCase()) ||
-          spell.magicWords
-            .toLocaleLowerCase()
-            .includes(search.toLocaleLowerCase())
-      );
-  }, [search, spells]);
-
-  const setShortcut = (spellKey: string) => {
-    setSpellShortcut?.(spellKey, settingShortcutIndex);
-    setSettingShortcutIndex(-1);
-  };
-
-  return (
-    <DraggableContainer
-      type={RPGUIContainerTypes.Framed}
-      onCloseButton={onClose}
-      width="inherit"
-      height="inherit"
-      cancelDrag="#spellbook-search, #shortcuts_list, .spell"
-    >
-      <Container>
-        <Title>Learned Spells</Title>
-
-        <SpellbookShortcuts
-          setSettingShortcutIndex={setSettingShortcutIndex}
-          settingShortcutIndex={settingShortcutIndex}
-          shortcuts={spellShortcuts}
-          removeShortcut={removeSpellShortcut}
-        />
-
-        <Input
-          placeholder="Search for spell"
-          value={search}
-          onChange={e => setSearch(e.target.value)}
-          onFocus={onInputFocus}
-          onBlur={onInputBlur}
-          id="spellbook-search"
-        />
-
-        <SpellList>
-          {spellsToDisplay.map(spell => (
-            <Fragment key={spell.key}>
-              <Spell
-                charMana={mana}
-                charMagicLevel={magicLevel}
-                onClick={
-                  settingShortcutIndex !== -1 ? setShortcut : onSpellClick
-                }
-                spellKey={spell.key}
-                isSettingShortcut={settingShortcutIndex !== -1}
-                {...spell}
-              />
-            </Fragment>
-          ))}
-        </SpellList>
-      </Container>
-    </DraggableContainer>
-  );
-};
-
-const Title = styled.h1`
-  font-size: ${uiFonts.size.large} !important;
-  margin-bottom: 0 !important;
-`;
-
-const Container = styled.div`
-  width: 100%;
-  height: 100%;
-  color: white;
-  display: flex;
-  flex-direction: column;
-`;
-
-const SpellList = styled.div`
-  width: 100%;
-  min-height: 0;
-  flex: 1;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  margin-top: 1rem;
-`;
+import { IRawSpell } from '@rpg-engine/shared';
+import React, { Fragment, useEffect, useMemo, useState } from 'react';
+import styled from 'styled-components';
+import { uiFonts } from '../../constants/uiFonts';
+import { DraggableContainer } from '../DraggableContainer';
+import { Input } from '../Input';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { IShortcut } from '../Shortcuts/Shortcuts';
+import { ShortcutsSetter } from '../Shortcuts/ShortcutsSetter';
+import { Spell } from './Spell';
+
+export interface ISpellbookProps {
+  onClose?: () => void;
+  onInputFocus?: () => void;
+  onInputBlur?: () => void;
+  spells: IRawSpell[];
+  magicLevel: number;
+  mana: number;
+  onSpellClick: (spellKey: string) => void;
+  setSpellShortcut: (key: string, index: number) => void;
+  shortcuts: IShortcut[];
+  removeShortcut: (index: number) => void;
+  atlasIMG: any;
+  atlasJSON: any;
+}
+
+export const Spellbook: React.FC<ISpellbookProps> = ({
+  onClose,
+  onInputFocus,
+  onInputBlur,
+  spells,
+  magicLevel,
+  mana,
+  onSpellClick,
+  setSpellShortcut,
+  shortcuts,
+  removeShortcut,
+  atlasIMG,
+  atlasJSON,
+}) => {
+  const [search, setSearch] = useState('');
+  const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
+
+  useEffect(() => {
+    const handleEscapeClose = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose?.();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscapeClose);
+
+    return () => {
+      document.removeEventListener('keydown', handleEscapeClose);
+    };
+  }, [onClose]);
+
+  const spellsToDisplay = useMemo(() => {
+    return spells
+      .sort((a, b) => {
+        if (a.minMagicLevelRequired > b.minMagicLevelRequired) return 1;
+        if (a.minMagicLevelRequired < b.minMagicLevelRequired) return -1;
+        return 0;
+      })
+      .filter(
+        spell =>
+          spell.name.toLocaleLowerCase().includes(search.toLocaleLowerCase()) ||
+          spell.magicWords
+            .toLocaleLowerCase()
+            .includes(search.toLocaleLowerCase())
+      );
+  }, [search, spells]);
+
+  const setShortcut = (spellKey: string) => {
+    setSpellShortcut?.(spellKey, settingShortcutIndex);
+    setSettingShortcutIndex(-1);
+  };
+
+  return (
+    <DraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      onCloseButton={onClose}
+      width="inherit"
+      height="inherit"
+      cancelDrag="#spellbook-search, #shortcuts_list, .spell"
+    >
+      <Container>
+        <Title>Learned Spells</Title>
+
+        <ShortcutsSetter
+          setSettingShortcutIndex={setSettingShortcutIndex}
+          settingShortcutIndex={settingShortcutIndex}
+          shortcuts={shortcuts}
+          removeShortcut={removeShortcut}
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+        />
+
+        <Input
+          placeholder="Search for spell"
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          onFocus={onInputFocus}
+          onBlur={onInputBlur}
+          id="spellbook-search"
+        />
+
+        <SpellList>
+          {spellsToDisplay.map(spell => (
+            <Fragment key={spell.key}>
+              <Spell
+                charMana={mana}
+                charMagicLevel={magicLevel}
+                onClick={
+                  settingShortcutIndex !== -1 ? setShortcut : onSpellClick
+                }
+                spellKey={spell.key}
+                isSettingShortcut={settingShortcutIndex !== -1}
+                {...spell}
+              />
+            </Fragment>
+          ))}
+        </SpellList>
+      </Container>
+    </DraggableContainer>
+  );
+};
+
+const Title = styled.h1`
+  font-size: ${uiFonts.size.large} !important;
+  margin-bottom: 0 !important;
+`;
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  color: white;
+  display: flex;
+  flex-direction: column;
+`;
+
+const SpellList = styled.div`
+  width: 100%;
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  margin-top: 1rem;
+`;

package/src/components/Spellbook/constants.ts

@@ -1,12 +1,8 @@
-import { IRawSpell } from '@rpg-engine/shared';
-
-export const SPELL_SHORTCUTS_STORAGE_KEY = 'spellShortcuts';
-
-export const defaultSpellShortcut: IRawSpell = {
-  key: '',
-  manaCost: 0,
-  magicWords: '',
-  name: '',
-  description: '',
-  minMagicLevelRequired: 0,
-};
+import { IShortcut, ShortcutType } from '../Shortcuts/Shortcuts';
+
+export const SHORTCUTS_STORAGE_KEY = 'shortcuts';
+
+export const defaultShortcut: IShortcut = {
+  type: ShortcutType.None,
+  payload: null,
+};

package/src/components/Spellbook/mockSpells.ts

@@ -1,60 +1,60 @@
-import { IRawSpell } from '@rpg-engine/shared';
-
-enum SpellsBlueprint {
-  SelfHealingSpell = 'self-healing-spell',
-  FoodCreationSpell = 'food-creation-spell',
-  ArrowCreationSpell = 'arrow-creation-spell',
-  BoltCreationSpell = 'bolt-creation-spell',
-  BlankRuneCreationSpell = 'blank-rune-creation-spell',
-  SelfHasteSpell = 'self-haste-spell',
-  FireRuneCreationSpell = 'fire-rune-creation-spell',
-  HealRuneCreationSpell = 'healing-rune-creation-spell',
-  PoisonRuneCreationSpell = 'poison-rune-creation-spell',
-  DarkRuneCreationSpell = 'dark-rune-creation-spell',
-  GreaterHealingSpell = 'greater-healing-spell',
-  EnergyBoltCreationSpell = 'energy-bolt-creation-spell',
-  FireBoltCreationSpell = 'fire-bolt-creation-spell',
-}
-
-export const mockSpells: IRawSpell[] = [
-  {
-    key: SpellsBlueprint.ArrowCreationSpell,
-    name: 'Arrow Creation Spell',
-    description: 'A spell that creates arrow in your inventory.',
-    magicWords: 'iquar elandi',
-    manaCost: 10,
-    minMagicLevelRequired: 3,
-  },
-  {
-    key: SpellsBlueprint.BlankRuneCreationSpell,
-    name: 'Blank Rune Creation Spell',
-    description: 'A spell that creates a blank rune in your inventory.',
-    magicWords: 'iquar ansr ki',
-    manaCost: 5,
-    minMagicLevelRequired: 3,
-  },
-  {
-    key: SpellsBlueprint.BoltCreationSpell,
-    name: 'Bolt Creation Spell',
-    description: 'A spell that creates bolt in your inventory.',
-    magicWords: 'iquar lyn',
-    manaCost: 15,
-    minMagicLevelRequired: 3,
-  },
-  {
-    key: SpellsBlueprint.SelfHasteSpell,
-    name: 'Self Haste Spell',
-    description: 'A self haste spell.',
-    magicWords: 'talas hiz',
-    manaCost: 40,
-    minMagicLevelRequired: 5,
-  },
-  {
-    key: SpellsBlueprint.SelfHealingSpell,
-    name: 'Self Healing Spell',
-    description: 'A self healing spell.',
-    magicWords: 'talas faenya',
-    manaCost: 10,
-    minMagicLevelRequired: 1,
-  },
-];
+import { IRawSpell } from '@rpg-engine/shared';
+
+enum SpellsBlueprint {
+  SelfHealingSpell = 'self-healing-spell',
+  FoodCreationSpell = 'food-creation-spell',
+  ArrowCreationSpell = 'arrow-creation-spell',
+  BoltCreationSpell = 'bolt-creation-spell',
+  BlankRuneCreationSpell = 'blank-rune-creation-spell',
+  SelfHasteSpell = 'self-haste-spell',
+  FireRuneCreationSpell = 'fire-rune-creation-spell',
+  HealRuneCreationSpell = 'healing-rune-creation-spell',
+  PoisonRuneCreationSpell = 'poison-rune-creation-spell',
+  DarkRuneCreationSpell = 'dark-rune-creation-spell',
+  GreaterHealingSpell = 'greater-healing-spell',
+  EnergyBoltCreationSpell = 'energy-bolt-creation-spell',
+  FireBoltCreationSpell = 'fire-bolt-creation-spell',
+}
+
+export const mockSpells: IRawSpell[] = [
+  {
+    key: SpellsBlueprint.ArrowCreationSpell,
+    name: 'Arrow Creation Spell',
+    description: 'A spell that creates arrow in your inventory.',
+    magicWords: 'iquar elandi',
+    manaCost: 10,
+    minMagicLevelRequired: 3,
+  },
+  {
+    key: SpellsBlueprint.BlankRuneCreationSpell,
+    name: 'Blank Rune Creation Spell',
+    description: 'A spell that creates a blank rune in your inventory.',
+    magicWords: 'iquar ansr ki',
+    manaCost: 5,
+    minMagicLevelRequired: 3,
+  },
+  {
+    key: SpellsBlueprint.BoltCreationSpell,
+    name: 'Bolt Creation Spell',
+    description: 'A spell that creates bolt in your inventory.',
+    magicWords: 'iquar lyn',
+    manaCost: 15,
+    minMagicLevelRequired: 3,
+  },
+  {
+    key: SpellsBlueprint.SelfHasteSpell,
+    name: 'Self Haste Spell',
+    description: 'A self haste spell.',
+    magicWords: 'talas hiz',
+    manaCost: 40,
+    minMagicLevelRequired: 5,
+  },
+  {
+    key: SpellsBlueprint.SelfHealingSpell,
+    name: 'Self Healing Spell',
+    description: 'A self healing spell.',
+    magicWords: 'talas faenya',
+    manaCost: 10,
+    minMagicLevelRequired: 1,
+  },
+];

package/src/components/StaticBook/StaticBook.tsx

@@ -1,105 +1,105 @@
-import React, { useEffect, useState } from 'react';
-import Draggable from 'react-draggable';
-import styled from 'styled-components';
-import { uiFonts } from '../../constants/uiFonts';
-import SelectArrow from '../Arrow/SelectArrow';
-import Book from './img/0.png';
-
-export interface IStaticBookProps {
-  content: string;
-  onChange?: (slice: string) => void;
-  onClose?: () => void;
-}
-
-export const StaticBook: React.FC<IStaticBookProps> = ({
-  content,
-  onChange,
-  onClose,
-}) => {
-  const [currentIndex, setCurrentIndex] = useState(0);
-
-  // create slicedContent with string sliced every 550 characters
-  const slicedContent = content.match(/.{1,550}/g) || [];
-
-  useEffect(() => {
-    if (onChange) onChange(slicedContent[currentIndex]);
-  }, [currentIndex]);
-
-  const bookLength = slicedContent.length - 1;
-
-  const onLeftClick = () => {
-    if (currentIndex === 0) setCurrentIndex(bookLength);
-    else setCurrentIndex(index => index - 1);
-  };
-  const onRightClick = () => {
-    if (currentIndex === bookLength) setCurrentIndex(0);
-    else setCurrentIndex(index => index + 1);
-  };
-
-  const getCurrentContentSlice = () => {
-    return slicedContent[currentIndex];
-  };
-
-  return (
-    <Draggable>
-      <Container>
-        <CloseButton onClick={onClose}>X</CloseButton>
-        <ColumnBook isLastPage={currentIndex === bookLength}>
-          {getCurrentContentSlice()}
-        </ColumnBook>
-
-        <ArrowContainer>
-          {currentIndex >= 1 && (
-            <SelectArrow
-              direction="left"
-              onClick={onLeftClick}
-              onTouchStart={onLeftClick}
-            ></SelectArrow>
-          )}
-          {currentIndex !== bookLength && (
-            <SelectArrow
-              direction="right"
-              onClick={onRightClick}
-              onTouchStart={onRightClick}
-            ></SelectArrow>
-          )}
-        </ArrowContainer>
-      </Container>
-    </Draggable>
-  );
-};
-
-const Container = styled.div`
-  background-image: url(${Book});
-  background-repeat: no-repeat;
-  position: relative;
-  width: 778px;
-  height: 463px;
-  background-position-y: -1rem;
-`;
-
-const CloseButton = styled.p`
-  position: absolute;
-  top: 1.9rem;
-  right: 5rem;
-  font-size: ${uiFonts.size.large} !important;
-`;
-
-interface IColumnBook {
-  isLastPage: boolean;
-}
-
-const ColumnBook = styled.span<IColumnBook>`
-  position: absolute;
-  left: 5.2rem;
-  top: 3.8rem;
-  width: ${({ isLastPage }) => (!isLastPage ? '77%' : '37%')};
-  column-count: ${({ isLastPage }) => (isLastPage ? 1 : 2)};
-  grid-gap: 56px;
-  min-height: 340px;
-`;
-const ArrowContainer = styled.span`
-  display: flex;
-  height: 100%;
-  align-items: center;
-`;
+import React, { useEffect, useState } from 'react';
+import Draggable from 'react-draggable';
+import styled from 'styled-components';
+import { uiFonts } from '../../constants/uiFonts';
+import SelectArrow from '../Arrow/SelectArrow';
+import Book from './img/0.png';
+
+export interface IStaticBookProps {
+  content: string;
+  onChange?: (slice: string) => void;
+  onClose?: () => void;
+}
+
+export const StaticBook: React.FC<IStaticBookProps> = ({
+  content,
+  onChange,
+  onClose,
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  // create slicedContent with string sliced every 550 characters
+  const slicedContent = content.match(/.{1,550}/g) || [];
+
+  useEffect(() => {
+    if (onChange) onChange(slicedContent[currentIndex]);
+  }, [currentIndex]);
+
+  const bookLength = slicedContent.length - 1;
+
+  const onLeftClick = () => {
+    if (currentIndex === 0) setCurrentIndex(bookLength);
+    else setCurrentIndex(index => index - 1);
+  };
+  const onRightClick = () => {
+    if (currentIndex === bookLength) setCurrentIndex(0);
+    else setCurrentIndex(index => index + 1);
+  };
+
+  const getCurrentContentSlice = () => {
+    return slicedContent[currentIndex];
+  };
+
+  return (
+    <Draggable>
+      <Container>
+        <CloseButton onClick={onClose}>X</CloseButton>
+        <ColumnBook isLastPage={currentIndex === bookLength}>
+          {getCurrentContentSlice()}
+        </ColumnBook>
+
+        <ArrowContainer>
+          {currentIndex >= 1 && (
+            <SelectArrow
+              direction="left"
+              onClick={onLeftClick}
+              onTouchStart={onLeftClick}
+            ></SelectArrow>
+          )}
+          {currentIndex !== bookLength && (
+            <SelectArrow
+              direction="right"
+              onClick={onRightClick}
+              onTouchStart={onRightClick}
+            ></SelectArrow>
+          )}
+        </ArrowContainer>
+      </Container>
+    </Draggable>
+  );
+};
+
+const Container = styled.div`
+  background-image: url(${Book});
+  background-repeat: no-repeat;
+  position: relative;
+  width: 778px;
+  height: 463px;
+  background-position-y: -1rem;
+`;
+
+const CloseButton = styled.p`
+  position: absolute;
+  top: 1.9rem;
+  right: 5rem;
+  font-size: ${uiFonts.size.large} !important;
+`;
+
+interface IColumnBook {
+  isLastPage: boolean;
+}
+
+const ColumnBook = styled.span<IColumnBook>`
+  position: absolute;
+  left: 5.2rem;
+  top: 3.8rem;
+  width: ${({ isLastPage }) => (!isLastPage ? '77%' : '37%')};
+  column-count: ${({ isLastPage }) => (isLastPage ? 1 : 2)};
+  grid-gap: 56px;
+  min-height: 340px;
+`;
+const ArrowContainer = styled.span`
+  display: flex;
+  height: 100%;
+  align-items: center;
+`;