@rpg-engine/long-bow 0.3.97 → 0.3.98

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

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

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

package/src/components/Spellbook/mockSpells.ts

@@ -1,60 +1,85 @@
-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 { AnimationEffectKeys, ISpell, SpellCastingType, SpellsBlueprint } from '@rpg-engine/shared';
+
+
+export const mockSpells: ISpell[] = [
+  {
+    key: SpellsBlueprint.ArrowCreationSpell,
+    name: 'Arrow Creation Spell',
+    description: 'A spell that creates arrow in your inventory.',
+    magicWords: 'iquar elandi',
+    manaCost: 10,
+    minMagicLevelRequired: 3,
+    castingType: SpellCastingType.RangedCasting,
+    minLevelRequired: 1,
+    cooldown: 20,
+    maxDistanceGrid: 2,
+    castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
+    targetHitAnimationKey: AnimationEffectKeys.Rooted,
+    projectileAnimationKey: AnimationEffectKeys.Energy,
+    usableEffect: () => {}
+    },
+    {
+      key: SpellsBlueprint.ArrowCreationSpell,
+      name: 'Arrow Creation Spell',
+      description: 'A spell that creates arrow in your inventory.',
+      magicWords: 'iquar elandi',
+      manaCost: 10,
+      minMagicLevelRequired: 3,
+      castingType: SpellCastingType.RangedCasting,
+      minLevelRequired: 1,
+      cooldown: 20,
+      maxDistanceGrid: 2,
+      castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
+      targetHitAnimationKey: AnimationEffectKeys.Rooted,
+      projectileAnimationKey: AnimationEffectKeys.Energy,
+      usableEffect: () => {}
+      },
+      {
+        key: SpellsBlueprint.ArrowCreationSpell,
+        name: 'Arrow Creation Spell',
+        description: 'A spell that creates arrow in your inventory.',
+        magicWords: 'iquar elandi',
+        manaCost: 10,
+        minMagicLevelRequired: 3,
+        castingType: SpellCastingType.RangedCasting,
+        minLevelRequired: 1,
+        cooldown: 20,
+        maxDistanceGrid: 2,
+        castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
+        targetHitAnimationKey: AnimationEffectKeys.Rooted,
+        projectileAnimationKey: AnimationEffectKeys.Energy,
+        usableEffect: () => {}
+        },
+        {
+          key: SpellsBlueprint.ArrowCreationSpell,
+          name: 'Arrow Creation Spell',
+          description: 'A spell that creates arrow in your inventory.',
+          magicWords: 'iquar elandi',
+          manaCost: 10,
+          minMagicLevelRequired: 3,
+          castingType: SpellCastingType.RangedCasting,
+          minLevelRequired: 1,
+          cooldown: 20,
+          maxDistanceGrid: 2,
+          castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
+          targetHitAnimationKey: AnimationEffectKeys.Rooted,
+          projectileAnimationKey: AnimationEffectKeys.Energy,
+          usableEffect: () => {}
+          },
+          {
+            key: SpellsBlueprint.ArrowCreationSpell,
+            name: 'Arrow Creation Spell',
+            description: 'A spell that creates arrow in your inventory.',
+            magicWords: 'iquar elandi',
+            manaCost: 10,
+            minMagicLevelRequired: 3,
+            castingType: SpellCastingType.RangedCasting,
+            minLevelRequired: 1,
+            cooldown: 20,
+            maxDistanceGrid: 2,
+            castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
+            targetHitAnimationKey: AnimationEffectKeys.Rooted,
+            projectileAnimationKey: AnimationEffectKeys.Energy,
+            usableEffect: () => {}
+            },
+];

package/src/components/StaticBook/StaticBook.tsx

@@ -1,103 +1,103 @@
-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 onPointerDown={onClose}>X</CloseButton>
-        <ColumnBook isLastPage={currentIndex === bookLength}>
-          {getCurrentContentSlice()}
-        </ColumnBook>
-
-        <ArrowContainer>
-          {currentIndex >= 1 && (
-            <SelectArrow
-              direction="left"
-              onPointerDown={onLeftClick}
-            ></SelectArrow>
-          )}
-          {currentIndex !== bookLength && (
-            <SelectArrow
-              direction="right"
-              onPointerDown={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 onPointerDown={onClose}>X</CloseButton>
+        <ColumnBook isLastPage={currentIndex === bookLength}>
+          {getCurrentContentSlice()}
+        </ColumnBook>
+
+        <ArrowContainer>
+          {currentIndex >= 1 && (
+            <SelectArrow
+              direction="left"
+              onPointerDown={onLeftClick}
+            ></SelectArrow>
+          )}
+          {currentIndex !== bookLength && (
+            <SelectArrow
+              direction="right"
+              onPointerDown={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;
+`;

package/src/components/TextArea.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-
-export interface ITextArea
-  extends React.DetailedHTMLProps<
-    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-    HTMLTextAreaElement
-  > {}
-
-export const TextArea: React.FC<ITextArea> = ({ ...props }) => {
-  return <textarea {...props} />;
-};
+import React from 'react';
+
+export interface ITextArea
+  extends React.DetailedHTMLProps<
+    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    HTMLTextAreaElement
+  > {}
+
+export const TextArea: React.FC<ITextArea> = ({ ...props }) => {
+  return <textarea {...props} />;
+};

package/src/components/TimeWidget/DayNightPeriod/DayNightPeriod.tsx

@@ -1,35 +1,35 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { PeriodOfDay } from '@rpg-engine/shared';
-import AfternoonGif from './gif/afternoon.gif';
-import MorningGif from './gif/morning.gif';
-import NightGif from './gif/night.gif';
-
-export interface IPeriodOfDayDisplayProps {
-  periodOfDay: PeriodOfDay;
-}
-
-export const DayNightPeriod: React.FC<IPeriodOfDayDisplayProps> = ({
-  periodOfDay,
-}) => {
-  const periodOfDaySrcFiles = {
-    [PeriodOfDay.Morning]: MorningGif,
-    [PeriodOfDay.Afternoon]: AfternoonGif,
-    [PeriodOfDay.Night]: NightGif,
-  };
-
-  return (
-    <GifContainer>
-      <img src={periodOfDaySrcFiles[periodOfDay]} />
-    </GifContainer>
-  );
-};
-
-const GifContainer = styled.div`
-  width: 100%;
-
-  img {
-    width: 67%;
-  }
-`;
+import React from 'react';
+import styled from 'styled-components';
+
+import { PeriodOfDay } from '@rpg-engine/shared';
+import AfternoonGif from './gif/afternoon.gif';
+import MorningGif from './gif/morning.gif';
+import NightGif from './gif/night.gif';
+
+export interface IPeriodOfDayDisplayProps {
+  periodOfDay: PeriodOfDay;
+}
+
+export const DayNightPeriod: React.FC<IPeriodOfDayDisplayProps> = ({
+  periodOfDay,
+}) => {
+  const periodOfDaySrcFiles = {
+    [PeriodOfDay.Morning]: MorningGif,
+    [PeriodOfDay.Afternoon]: AfternoonGif,
+    [PeriodOfDay.Night]: NightGif,
+  };
+
+  return (
+    <GifContainer>
+      <img src={periodOfDaySrcFiles[periodOfDay]} />
+    </GifContainer>
+  );
+};
+
+const GifContainer = styled.div`
+  width: 100%;
+
+  img {
+    width: 67%;
+  }
+`;

package/src/components/TimeWidget/TimeWidget.tsx

@@ -1,65 +1,65 @@
-import { PeriodOfDay } from '@rpg-engine/shared';
-import React from 'react';
-import Draggable from 'react-draggable';
-import styled from 'styled-components';
-import { uiFonts } from '../../constants/uiFonts';
-import { DayNightPeriod } from './DayNightPeriod/DayNightPeriod';
-
-import ClockWidgetImg from './img/clockwidget.png';
-
-export interface IClockWidgetProps {
-  onClose?: () => void;
-  TimeClock: string;
-  periodOfDay: PeriodOfDay;
-  scale?: number;
-}
-
-export const TimeWidget: React.FC<IClockWidgetProps> = ({
-  onClose,
-  TimeClock,
-  periodOfDay,
-  scale,
-}) => {
-  return (
-    <Draggable scale={scale}>
-      <WidgetContainer>
-        <CloseButton onPointerDown={onClose}>X</CloseButton>
-        <DayNightContainer>
-          <DayNightPeriod periodOfDay={periodOfDay} />
-        </DayNightContainer>
-        <Time>{TimeClock}</Time>
-      </WidgetContainer>
-    </Draggable>
-  );
-};
-
-const WidgetContainer = styled.div`
-  background-image: url(${ClockWidgetImg});
-  background-size: 10rem;
-  background-repeat: no-repeat;
-  width: 10rem;
-  position: absolute;
-  height: 100px;
-`;
-
-const Time = styled.div`
-  top: 0.75rem;
-  right: 0.5rem;
-  position: absolute;
-  font-size: ${uiFonts.size.small};
-  color: white;
-`;
-
-const CloseButton = styled.p`
-  position: absolute;
-  top: -0.5rem;
-  margin: 0;
-  right: -0.2rem;
-  font-size: ${uiFonts.size.small} !important;
-  z-index: 1;
-`;
-
-const DayNightContainer = styled.div`
-  margin-top: -0.3rem;
-  margin-left: -0.3rem;
-`;
+import { PeriodOfDay } from '@rpg-engine/shared';
+import React from 'react';
+import Draggable from 'react-draggable';
+import styled from 'styled-components';
+import { uiFonts } from '../../constants/uiFonts';
+import { DayNightPeriod } from './DayNightPeriod/DayNightPeriod';
+
+import ClockWidgetImg from './img/clockwidget.png';
+
+export interface IClockWidgetProps {
+  onClose?: () => void;
+  TimeClock: string;
+  periodOfDay: PeriodOfDay;
+  scale?: number;
+}
+
+export const TimeWidget: React.FC<IClockWidgetProps> = ({
+  onClose,
+  TimeClock,
+  periodOfDay,
+  scale,
+}) => {
+  return (
+    <Draggable scale={scale}>
+      <WidgetContainer>
+        <CloseButton onPointerDown={onClose}>X</CloseButton>
+        <DayNightContainer>
+          <DayNightPeriod periodOfDay={periodOfDay} />
+        </DayNightContainer>
+        <Time>{TimeClock}</Time>
+      </WidgetContainer>
+    </Draggable>
+  );
+};
+
+const WidgetContainer = styled.div`
+  background-image: url(${ClockWidgetImg});
+  background-size: 10rem;
+  background-repeat: no-repeat;
+  width: 10rem;
+  position: absolute;
+  height: 100px;
+`;
+
+const Time = styled.div`
+  top: 0.75rem;
+  right: 0.5rem;
+  position: absolute;
+  font-size: ${uiFonts.size.small};
+  color: white;
+`;
+
+const CloseButton = styled.p`
+  position: absolute;
+  top: -0.5rem;
+  margin: 0;
+  right: -0.2rem;
+  font-size: ${uiFonts.size.small} !important;
+  z-index: 1;
+`;
+
+const DayNightContainer = styled.div`
+  margin-top: -0.3rem;
+  margin-left: -0.3rem;
+`;