@rpg-engine/long-bow 0.3.97 → 0.3.99

package/src/components/Spellbook/Spell.tsx

@@ -1,226 +1,236 @@
-import { IRawSpell } from '@rpg-engine/shared';
-import React from 'react';
-import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
-import { uiFonts } from '../../constants/uiFonts';
-
-interface Props extends IRawSpell {
-  charMana: number;
-  charMagicLevel: number;
-  onPointerUp?: (spellKey: string) => void;
-  isSettingShortcut?: boolean;
-  spellKey: string;
-  activeCooldown?: number;
-}
-
-export const Spell: React.FC<Props> = ({
-  spellKey,
-  name,
-  description,
-  magicWords,
-  manaCost,
-  charMana,
-  charMagicLevel,
-  onPointerUp,
-  isSettingShortcut,
-  minMagicLevelRequired,
-  activeCooldown,
-}) => {
-  const disabled = isSettingShortcut
-    ? charMagicLevel < minMagicLevelRequired
-    : manaCost > charMana || charMagicLevel < minMagicLevelRequired;
-
-  return (
-    <Container
-      disabled={disabled || (activeCooldown ?? 0) > 0}
-      onPointerUp={onPointerUp?.bind(null, spellKey)}
-      isSettingShortcut={isSettingShortcut && !disabled}
-      className="spell"
-    >
-      {disabled && (
-        <Overlay>
-          {charMagicLevel < minMagicLevelRequired
-            ? 'Low magic level'
-            : manaCost > charMana && 'No mana'}
-        </Overlay>
-      )}
-      <SpellImage>
-        {activeCooldown && activeCooldown > 0 ? (
-          <span className="cooldown">
-            {activeCooldown.toFixed(activeCooldown > 10 ? 0 : 1)}
-          </span>
-        ) : null}
-        {magicWords.split(' ').map(word => word[0])}
-      </SpellImage>
-      <Info>
-        <Title>
-          <span>{name}</span>
-          <span className="spell">({magicWords})</span>
-        </Title>
-        <Description>{description}</Description>
-      </Info>
-
-      <Divider />
-      <Cost>
-        <span>Mana cost:</span>
-        <span className="mana">{manaCost}</span>
-      </Cost>
-    </Container>
-  );
-};
-
-const Container = styled.button<{ isSettingShortcut?: boolean }>`
-  display: block;
-  background: none;
-  border: 2px solid transparent;
-  border-radius: 1rem;
-  width: 100%;
-  display: flex;
-  height: 5rem;
-  gap: 1rem;
-  align-items: center;
-  padding: 0 1rem;
-  text-align: left;
-  position: relative;
-
-  animation: ${({ isSettingShortcut }) =>
-    isSettingShortcut ? 'border-color-change 1s infinite' : 'none'};
-
-  @keyframes border-color-change {
-    0% {
-      border-color: ${uiColors.yellow};
-    }
-    50% {
-      border-color: transparent;
-    }
-    100% {
-      border-color: ${uiColors.yellow};
-    }
-  }
-
-  &:hover,
-  &:focus {
-    background-color: ${uiColors.darkGray};
-  }
-
-  &:active {
-    background: none;
-  }
-`;
-
-const SpellImage = styled.div`
-  width: 4rem;
-  height: 4rem;
-  font-size: ${uiFonts.size.xLarge};
-  font-weight: bold;
-  background-color: ${uiColors.darkGray};
-  color: ${uiColors.lightGray};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-transform: uppercase;
-  position: relative;
-  overflow: hidden;
-
-  .cooldown {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0 0 0 / 20%);
-    color: ${uiColors.darkYellow};
-    font-weight: bold;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-`;
-
-const Info = styled.span`
-  width: 0;
-  flex: 1;
-`;
-
-const Title = styled.p`
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  margin-bottom: 5px;
-  margin: 0;
-
-  span {
-    font-size: ${uiFonts.size.medium} !important;
-    font-weight: bold !important;
-    color: ${uiColors.yellow} !important;
-    margin-right: 0.5rem;
-  }
-
-  .spell {
-    font-size: ${uiFonts.size.small} !important;
-    font-weight: normal !important;
-    color: ${uiColors.lightGray} !important;
-  }
-`;
-
-const Description = styled.div`
-  font-size: ${uiFonts.size.small} !important;
-  line-height: 1.1 !important;
-`;
-
-const Divider = styled.div`
-  width: 1px;
-  height: 100%;
-  margin: 0 1rem;
-  background-color: ${uiColors.lightGray};
-`;
-
-const Cost = styled.p`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  gap: 0.5rem;
-
-  div {
-    z-index: 1;
-  }
-
-  .mana {
-    position: relative;
-    font-size: ${uiFonts.size.medium};
-    font-weight: bold;
-    z-index: 1;
-
-    &::after {
-      position: absolute;
-      content: '';
-      top: 0;
-      left: 0;
-      background-color: ${uiColors.blue};
-      width: 100%;
-      height: 100%;
-      border-radius: 50%;
-      transform: scale(1.8);
-      filter: blur(10px);
-      z-index: -1;
-    }
-  }
-`;
-
-const Overlay = styled.p`
-  margin: 0 !important;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: ${uiColors.yellow};
-  font-size: ${uiFonts.size.large} !important;
-  font-weight: bold;
-  z-index: 10;
-  background-color: rgba(0 0 0 / 0.2);
-`;
+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 { SpellInfoWrapper } from './cards/SpellInfoWrapper';
+
+export interface ISpellProps {
+  charMana: number;
+  charMagicLevel: number;
+  onPointerUp?: (spellKey: string) => void;
+  isSettingShortcut?: boolean;
+  spellKey: string;
+  spell: ISpell;
+  activeCooldown?: number;
+}
+
+export const Spell: React.FC<ISpellProps> = ({
+  spellKey,
+  charMana,
+  charMagicLevel,
+  onPointerUp,
+  isSettingShortcut,
+  spell,
+  activeCooldown,
+}) => {
+  const {
+    manaCost,
+    minMagicLevelRequired,
+    magicWords,
+    name,
+    description,
+  } = spell;
+  const disabled = isSettingShortcut
+    ? charMagicLevel < minMagicLevelRequired
+    : manaCost > charMana || charMagicLevel < minMagicLevelRequired;
+
+  return (
+    <SpellInfoWrapper spell={spell}>
+      <Container
+        disabled={disabled || (activeCooldown ?? 0) > 0}
+        onPointerUp={onPointerUp?.bind(null, spellKey)}
+        isSettingShortcut={isSettingShortcut && !disabled}
+        className="spell"
+      >
+        {disabled && (
+          <Overlay>
+            {charMagicLevel < minMagicLevelRequired
+              ? 'Low magic level'
+              : manaCost > charMana && 'No mana'}
+          </Overlay>
+        )}
+        <SpellImage>
+          {activeCooldown && activeCooldown > 0 ? (
+            <span className="cooldown">
+              {activeCooldown.toFixed(activeCooldown > 10 ? 0 : 1)}
+            </span>
+          ) : null}
+          {magicWords.split(' ').map(word => word[0])}
+        </SpellImage>
+        <Info>
+          <Title>
+            <span>{name}</span>
+            <span className="spell">({magicWords})</span>
+          </Title>
+          <Description>{description}</Description>
+        </Info>
+
+        <Divider />
+        <Cost>
+          <span>Mana cost:</span>
+          <span className="mana">{manaCost}</span>
+        </Cost>
+      </Container>
+    </SpellInfoWrapper>
+  );
+};
+
+const Container = styled.button<{ isSettingShortcut?: boolean }>`
+  display: block;
+  background: none;
+  border: 2px solid transparent;
+  border-radius: 1rem;
+  width: 100%;
+  display: flex;
+
+  gap: 1rem;
+  align-items: center;
+  padding: 0 1rem;
+  text-align: left;
+  position: relative;
+
+  animation: ${({ isSettingShortcut }) =>
+    isSettingShortcut ? 'border-color-change 1s infinite' : 'none'};
+
+  @keyframes border-color-change {
+    0% {
+      border-color: ${uiColors.yellow};
+    }
+    50% {
+      border-color: transparent;
+    }
+    100% {
+      border-color: ${uiColors.yellow};
+    }
+  }
+
+  &:hover,
+  &:focus {
+    background-color: ${uiColors.darkGray};
+  }
+
+  &:active {
+    background: none;
+  }
+`;
+
+const SpellImage = styled.div`
+  width: 4rem;
+  height: 4rem;
+  font-size: ${uiFonts.size.xLarge};
+  font-weight: bold;
+  background-color: ${uiColors.darkGray};
+  color: ${uiColors.lightGray};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-transform: uppercase;
+  position: relative;
+  overflow: hidden;
+
+  .cooldown {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0 0 0 / 20%);
+    color: ${uiColors.darkYellow};
+    font-weight: bold;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+`;
+
+const Info = styled.span`
+  width: 0;
+  flex: 1;
+
+  @media (orientation: portrait) {
+    display: none;
+  }
+`;
+const Title = styled.p`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 5px;
+  margin: 0;
+
+  span {
+    font-size: ${uiFonts.size.medium} !important;
+    font-weight: bold !important;
+    color: ${uiColors.yellow} !important;
+    margin-right: 0.5rem;
+  }
+
+  .spell {
+    font-size: ${uiFonts.size.small} !important;
+    font-weight: normal !important;
+    color: ${uiColors.lightGray} !important;
+  }
+`;
+
+const Description = styled.div`
+  font-size: ${uiFonts.size.small} !important;
+  line-height: 1.1 !important;
+`;
+
+const Divider = styled.div`
+  width: 1px;
+  height: 100%;
+  margin: 0 1rem;
+  background-color: ${uiColors.lightGray};
+`;
+
+const Cost = styled.p`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  div {
+    z-index: 1;
+  }
+
+  .mana {
+    position: relative;
+    font-size: ${uiFonts.size.medium};
+    font-weight: bold;
+    z-index: 1;
+
+    &::after {
+      position: absolute;
+      content: '';
+      top: 0;
+      left: 0;
+      background-color: ${uiColors.blue};
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      transform: scale(1.8);
+      filter: blur(10px);
+      z-index: -1;
+    }
+  }
+`;
+
+const Overlay = styled.p`
+  margin: 0 !important;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${uiColors.yellow};
+  font-size: ${uiFonts.size.large} !important;
+  font-weight: bold;
+  z-index: 10;
+  background-color: rgba(0 0 0 / 0.2);
+`;