@rpg-engine/long-bow 0.3.97 → 0.3.98

package/src/components/Spellbook/Spellbook.tsx

@@ -1,158 +1,159 @@
-import { IRawSpell, IShortcut } 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: 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;
-  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}
-                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

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

package/src/components/Spellbook/cards/SpellInfo.tsx

@@ -0,0 +1,132 @@
+import { ISpell } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+import { uiFonts } from '../../../constants/uiFonts';
+import { formatSpellCastingType } from '../../../libs/CastingTypeHelper';
+
+interface ISpellInfoProps {
+  spell: ISpell;
+}
+
+export const SpellInfo: React.FC<ISpellInfoProps> = ({ spell }) => {
+  const {
+    magicWords,
+    name,
+    manaCost,
+    requiredItem,
+    description,
+    castingType,
+    cooldown,
+    maxDistanceGrid,
+  } = spell;
+  return (
+    <Container>
+      <Header>
+        <div>
+          <Title>{name}</Title>
+          <Type>{magicWords}</Type>
+        </div>
+      </Header>
+      <Statistic>
+        <div className="label">Casting Type:</div>
+        <div className="value">{formatSpellCastingType(castingType)}</div>
+      </Statistic>
+      <Statistic>
+        <div className="label">Magic words:</div>
+        <div className="value">{magicWords}</div>
+      </Statistic>
+      <Statistic>
+        <div className="label">Mana cost:</div>
+        <div className="value">{manaCost}</div>
+      </Statistic>
+      <Statistic>
+        <div className="label">Cooldown:</div>
+        <div className="value">{cooldown}</div>
+      </Statistic>
+      <Statistic>
+        <div className="label">Max Distance Grid:</div>
+        <div className="value">{maxDistanceGrid}</div>
+      </Statistic>
+      <Statistic>
+        {requiredItem && (
+          <>
+            <div className="label">Required Item:</div>
+            <div className="value">{requiredItem}</div>
+          </>
+        )}
+      </Statistic>
+      <Description>{description}</Description>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  color: white;
+  background-color: #222;
+  border-radius: 5px;
+  padding: 0.5rem;
+  font-size: ${uiFonts.size.small};
+  border: 3px solid ${uiColors.lightGray};
+  height: max-content;
+  width: 30rem;
+
+  @media (max-width: 580px) {
+    width: 80vw;
+  }
+`;
+
+const Title = styled.div`
+  font-size: ${uiFonts.size.medium};
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  margin: 0;
+`;
+
+const Type = styled.div`
+  font-size: ${uiFonts.size.small};
+  margin-top: 0.2rem;
+  color: ${uiColors.lightGray};
+`;
+
+const Description = styled.div`
+  margin-top: 1.5rem;
+  font-size: ${uiFonts.size.small};
+  color: ${uiColors.lightGray};
+  font-style: italic;
+`;
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+`;
+
+const Statistic = styled.div`
+  margin-bottom: 0.4rem;
+  width: max-content;
+
+  .label {
+    display: inline-block;
+    margin-right: 0.5rem;
+    color: inherit;
+  }
+
+  .value {
+    display: inline-block;
+    color: inherit;
+  }
+
+  &.better,
+  .better {
+    color: ${uiColors.lightGreen};
+  }
+
+  &.worse,
+  .worse {
+    color: ${uiColors.cardinal};
+  }
+`;

package/src/components/Spellbook/cards/SpellInfoDisplay.tsx

@@ -0,0 +1,31 @@
+import { ISpell } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { SpellInfo } from './SpellInfo';
+
+export interface ISpellInfoDisplayProps {
+  spell: ISpell;
+  isMobile?: boolean;
+}
+
+export const SpellInfoDisplay: React.FC<ISpellInfoDisplayProps> = ({
+  spell,
+  isMobile,
+}) => {
+  return (
+    <Flex $isMobile={isMobile}>
+      <SpellInfo spell={spell} />
+    </Flex>
+  );
+};
+
+const Flex = styled.div<{ $isMobile?: boolean }>`
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: ${({ $isMobile }) => ($isMobile ? 'row-reverse' : 'row')};
+
+  @media (max-width: 580px) {
+    flex-direction: column-reverse;
+    align-items: center;
+  }
+`;

package/src/components/Spellbook/cards/SpellInfoWrapper.tsx

@@ -0,0 +1,48 @@
+import { ISpell } from '@rpg-engine/shared';
+import React, { useState } from 'react';
+import { MobileSpellTooltip } from './MobileSpellTooltip';
+import { MagicTooltip } from './SpellTooltip';
+
+interface ISpellInfoWrapperProps {
+  spell: ISpell;
+  children: React.ReactNode;
+  scale?: number;
+}
+
+export const SpellInfoWrapper: React.FC<ISpellInfoWrapperProps> = ({
+  children,
+  spell,
+  scale,
+}) => {
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+  const [isTooltipMobileVisible, setIsTooltipMobileVisible] = useState(false);
+
+  return (
+    <div
+      onMouseEnter={() => {
+        if (!isTooltipMobileVisible) setIsTooltipVisible(true);
+      }}
+      onMouseLeave={setIsTooltipVisible.bind(null, false)}
+      onTouchEnd={() => {
+        setIsTooltipMobileVisible(true);
+        setIsTooltipVisible(false);
+      }}
+    >
+      {children}
+
+      {isTooltipVisible && !isTooltipMobileVisible && (
+        <MagicTooltip spell={spell} />
+      )}
+      {isTooltipMobileVisible && (
+        <MobileSpellTooltip
+          closeTooltip={() => {
+            setIsTooltipMobileVisible(false);
+            console.log('close');
+          }}
+          spell={spell}
+          scale={scale}
+        />
+      )}
+    </div>
+  );
+};