@rpg-engine/long-bow 0.4.2 → 0.4.4

package/src/components/Spellbook/Spellbook.tsx

@@ -1,161 +1,161 @@
-import { IShortcut, ISpell } 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 { ShortcutsSetter } from '../Shortcuts/ShortcutsSetter';
-import { Spell } from './Spell';
-
-export interface ISpellbookProps {
-  onClose?: () => void;
-  onInputFocus?: () => void;
-  onInputBlur?: () => void;
-  spells: ISpell[];
-  magicLevel: number;
-  mana: number;
-  onSpellClick: (spellKey: string) => void;
-  setSpellShortcut: (key: string, index: number) => void;
-  shortcuts: IShortcut[];
-  removeShortcut: (index: number) => void;
-  atlasIMG: any;
-  atlasJSON: any;
-  scale?: number;
-  spellCooldowns?: Record<string, number>;
-}
-
-export const Spellbook: React.FC<ISpellbookProps> = ({
-  onClose,
-  onInputFocus,
-  onInputBlur,
-  spells,
-  magicLevel,
-  mana,
-  onSpellClick,
-  setSpellShortcut,
-  shortcuts,
-  removeShortcut,
-  atlasIMG,
-  atlasJSON,
-  scale,
-  spellCooldowns,
-}) => {
-  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"
-      scale={scale}
-    >
-      <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}
-                onPointerUp={
-                  settingShortcutIndex !== -1 ? setShortcut : onSpellClick
-                }
-                spellKey={spell.key}
-                isSettingShortcut={settingShortcutIndex !== -1}
-                spell={spell}
-                activeCooldown={
-                  spellCooldowns?.[spell.magicWords.replaceAll(' ', '_')]
-                }
-                {...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 { IShortcut, ISpell } 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 { ShortcutsSetter } from '../Shortcuts/ShortcutsSetter';
+import { Spell } from './Spell';
+
+export interface ISpellbookProps {
+  onClose?: () => void;
+  onInputFocus?: () => void;
+  onInputBlur?: () => void;
+  spells: ISpell[];
+  magicLevel: number;
+  mana: number;
+  onSpellClick: (spellKey: string) => void;
+  setSpellShortcut: (key: string, index: number) => void;
+  shortcuts: IShortcut[];
+  removeShortcut: (index: number) => void;
+  atlasIMG: any;
+  atlasJSON: any;
+  scale?: number;
+  spellCooldowns?: Record<string, number>;
+}
+
+export const Spellbook: React.FC<ISpellbookProps> = ({
+  onClose,
+  onInputFocus,
+  onInputBlur,
+  spells,
+  magicLevel,
+  mana,
+  onSpellClick,
+  setSpellShortcut,
+  shortcuts,
+  removeShortcut,
+  atlasIMG,
+  atlasJSON,
+  scale,
+  spellCooldowns,
+}) => {
+  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"
+      scale={scale}
+    >
+      <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}
+                onPointerUp={
+                  settingShortcutIndex !== -1 ? setShortcut : onSpellClick
+                }
+                spellKey={spell.key}
+                isSettingShortcut={settingShortcutIndex !== -1}
+                spell={spell}
+                activeCooldown={
+                  spellCooldowns?.[spell.magicWords.replaceAll(' ', '_')]
+                }
+                {...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/cards/MobileSpellTooltip.tsx

@@ -1,137 +1,137 @@
-import { ISpell } from '@rpg-engine/shared';
-import React, { useRef } from 'react';
-import styled from 'styled-components';
-import ModalPortal from '../../Abstractions/ModalPortal';
-import { SpellInfoDisplay } from './SpellInfoDisplay';
-
-interface IListMenuOption {
-  id: string;
-  text: string;
-}
-
-export interface MobileSpellTooltipProps {
-  spell: ISpell;
-  closeTooltip: () => void;
-  scale?: number;
-  options?: IListMenuOption[];
-  onSelected?: (selectedOptionId: string) => void;
-}
-
-export const MobileSpellTooltip: React.FC<MobileSpellTooltipProps> = ({
-  spell,
-  closeTooltip,
-  scale = 1,
-  options,
-  onSelected,
-}) => {
-  const ref = useRef<HTMLDivElement>(null);
-
-  const handleFadeOut = () => {
-    ref.current?.classList.add('fadeOut');
-  };
-
-  return (
-    <ModalPortal>
-      <Container
-        ref={ref}
-        onTouchEnd={() => {
-          handleFadeOut();
-          setTimeout(() => {
-            closeTooltip();
-          }, 100);
-        }}
-        scale={scale}
-      >
-        <SpellInfoDisplay spell={spell} isMobile />
-        <OptionsContainer>
-          {options?.map(option => (
-            <Option
-              key={option.id}
-              onTouchEnd={() => {
-                handleFadeOut();
-                setTimeout(() => {
-                  onSelected?.(option.id);
-                  closeTooltip();
-                }, 100);
-              }}
-            >
-              {option.text}
-            </Option>
-          ))}
-        </OptionsContainer>
-      </Container>
-    </ModalPortal>
-  );
-};
-
-const Container = styled.div<{ scale: number }>`
-  position: absolute;
-  z-index: 100;
-  left: 0;
-  top: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(0 0 0 / 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-  transition: opacity 0.08s;
-  animation: fadeIn 0.1s forwards;
-
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 0.92;
-    }
-  }
-
-  @keyframes fadeOut {
-    0% {
-      opacity: 0.92;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-
-  &.fadeOut {
-    animation: fadeOut 0.1s forwards;
-  }
-
-  @media (max-width: 580px) {
-    flex-direction: column;
-  }
-`;
-
-const OptionsContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-
-  @media (max-width: 580px) {
-    flex-direction: row;
-    justify-content: center;
-  }
-`;
-
-const Option = styled.button`
-  padding: 1rem;
-  background-color: #333;
-  color: white;
-  border: none;
-  border-radius: 3px;
-  width: 8rem;
-  transition: background-color 0.1s;
-
-  &:hover {
-    background-color: #555;
-  }
-
-  @media (max-width: 580px) {
-    padding: 1rem 0.5rem;
-  }
-`;
+import { ISpell } from '@rpg-engine/shared';
+import React, { useRef } from 'react';
+import styled from 'styled-components';
+import ModalPortal from '../../Abstractions/ModalPortal';
+import { SpellInfoDisplay } from './SpellInfoDisplay';
+
+interface IListMenuOption {
+  id: string;
+  text: string;
+}
+
+export interface MobileSpellTooltipProps {
+  spell: ISpell;
+  closeTooltip: () => void;
+  scale?: number;
+  options?: IListMenuOption[];
+  onSelected?: (selectedOptionId: string) => void;
+}
+
+export const MobileSpellTooltip: React.FC<MobileSpellTooltipProps> = ({
+  spell,
+  closeTooltip,
+  scale = 1,
+  options,
+  onSelected,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const handleFadeOut = () => {
+    ref.current?.classList.add('fadeOut');
+  };
+
+  return (
+    <ModalPortal>
+      <Container
+        ref={ref}
+        onTouchEnd={() => {
+          handleFadeOut();
+          setTimeout(() => {
+            closeTooltip();
+          }, 100);
+        }}
+        scale={scale}
+      >
+        <SpellInfoDisplay spell={spell} isMobile />
+        <OptionsContainer>
+          {options?.map(option => (
+            <Option
+              key={option.id}
+              onTouchEnd={() => {
+                handleFadeOut();
+                setTimeout(() => {
+                  onSelected?.(option.id);
+                  closeTooltip();
+                }, 100);
+              }}
+            >
+              {option.text}
+            </Option>
+          ))}
+        </OptionsContainer>
+      </Container>
+    </ModalPortal>
+  );
+};
+
+const Container = styled.div<{ scale: number }>`
+  position: absolute;
+  z-index: 100;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0 0 0 / 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  transition: opacity 0.08s;
+  animation: fadeIn 0.1s forwards;
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 0.92;
+    }
+  }
+
+  @keyframes fadeOut {
+    0% {
+      opacity: 0.92;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  &.fadeOut {
+    animation: fadeOut 0.1s forwards;
+  }
+
+  @media (max-width: 580px) {
+    flex-direction: column;
+  }
+`;
+
+const OptionsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+
+  @media (max-width: 580px) {
+    flex-direction: row;
+    justify-content: center;
+  }
+`;
+
+const Option = styled.button`
+  padding: 1rem;
+  background-color: #333;
+  color: white;
+  border: none;
+  border-radius: 3px;
+  width: 8rem;
+  transition: background-color 0.1s;
+
+  &:hover {
+    background-color: #555;
+  }
+
+  @media (max-width: 580px) {
+    padding: 1rem 0.5rem;
+  }
+`;