@rpg-engine/long-bow 0.4.82 → 0.4.83

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

@@ -1,134 +1,134 @@
-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>
-      {maxDistanceGrid && (
-        <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};
-  }
-`;
+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>
+      {maxDistanceGrid && (
+        <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

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

@@ -1,48 +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>
-  );
-};
+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>
+  );
+};

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

@@ -1,70 +1,70 @@
-import { ISpell } from '@rpg-engine/shared';
-import React, { useEffect, useRef } from 'react';
-import styled from 'styled-components';
-import ModalPortal from '../../Abstractions/ModalPortal';
-import { SpellInfoDisplay } from './SpellInfoDisplay';
-
-export interface IMagicTooltipProps {
-  spell: ISpell;
-}
-
-const offset = 20;
-
-export const MagicTooltip: React.FC<IMagicTooltipProps> = ({ spell }) => {
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const { current } = ref;
-
-    if (current) {
-      const handleMouseMove = (event: MouseEvent) => {
-        const { clientX, clientY } = event;
-
-        // Adjust the position of the tooltip based on the mouse position
-        const rect = current.getBoundingClientRect();
-
-        const tooltipWidth = rect.width;
-        const tooltipHeight = rect.height;
-        const isOffScreenRight =
-          clientX + tooltipWidth + offset > window.innerWidth;
-        const isOffScreenBottom =
-          clientY + tooltipHeight + offset > window.innerHeight;
-        const x = isOffScreenRight
-          ? clientX - tooltipWidth - offset
-          : clientX + offset;
-        const y = isOffScreenBottom
-          ? clientY - tooltipHeight - offset
-          : clientY + offset;
-
-        current.style.transform = `translate(${x}px, ${y}px)`;
-        current.style.opacity = '1';
-      };
-
-      window.addEventListener('mousemove', handleMouseMove);
-
-      return () => {
-        window.removeEventListener('mousemove', handleMouseMove);
-      };
-    }
-
-    return;
-  }, []);
-
-  return (
-    <ModalPortal>
-      <Container ref={ref}>
-        <SpellInfoDisplay spell={spell} />
-      </Container>
-    </ModalPortal>
-  );
-};
-
-const Container = styled.div`
-  position: absolute;
-  z-index: 100;
-  pointer-events: none;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  transition: opacity 0.08s;
-`;
+import { ISpell } from '@rpg-engine/shared';
+import React, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import ModalPortal from '../../Abstractions/ModalPortal';
+import { SpellInfoDisplay } from './SpellInfoDisplay';
+
+export interface IMagicTooltipProps {
+  spell: ISpell;
+}
+
+const offset = 20;
+
+export const MagicTooltip: React.FC<IMagicTooltipProps> = ({ spell }) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const { current } = ref;
+
+    if (current) {
+      const handleMouseMove = (event: MouseEvent) => {
+        const { clientX, clientY } = event;
+
+        // Adjust the position of the tooltip based on the mouse position
+        const rect = current.getBoundingClientRect();
+
+        const tooltipWidth = rect.width;
+        const tooltipHeight = rect.height;
+        const isOffScreenRight =
+          clientX + tooltipWidth + offset > window.innerWidth;
+        const isOffScreenBottom =
+          clientY + tooltipHeight + offset > window.innerHeight;
+        const x = isOffScreenRight
+          ? clientX - tooltipWidth - offset
+          : clientX + offset;
+        const y = isOffScreenBottom
+          ? clientY - tooltipHeight - offset
+          : clientY + offset;
+
+        current.style.transform = `translate(${x}px, ${y}px)`;
+        current.style.opacity = '1';
+      };
+
+      window.addEventListener('mousemove', handleMouseMove);
+
+      return () => {
+        window.removeEventListener('mousemove', handleMouseMove);
+      };
+    }
+
+    return;
+  }, []);
+
+  return (
+    <ModalPortal>
+      <Container ref={ref}>
+        <SpellInfoDisplay spell={spell} />
+      </Container>
+    </ModalPortal>
+  );
+};
+
+const Container = styled.div`
+  position: absolute;
+  z-index: 100;
+  pointer-events: none;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  transition: opacity 0.08s;
+`;

package/src/components/Spellbook/constants.ts

@@ -1,8 +1,8 @@
-import { IShortcut, ShortcutType } from '@rpg-engine/shared';
-
-export const SHORTCUTS_STORAGE_KEY = 'shortcuts';
-
-export const defaultShortcut: IShortcut = {
-  type: ShortcutType.None,
-  payload: null,
+import { IShortcut, ShortcutType } from '@rpg-engine/shared';
+
+export const SHORTCUTS_STORAGE_KEY = 'shortcuts';
+
+export const defaultShortcut: IShortcut = {
+  type: ShortcutType.None,
+  payload: null,
 };