diff --git a/components/CharacterHovercard/index.tsx b/components/CharacterHovercard/index.tsx index 0f9d16ac..bd2802d9 100644 --- a/components/CharacterHovercard/index.tsx +++ b/components/CharacterHovercard/index.tsx @@ -2,8 +2,11 @@ import React from 'react' import { useRouter } from 'next/router' import { useTranslation } from 'next-i18next' -import * as HoverCard from '@radix-ui/react-hover-card' - +import { + Hovercard, + HovercardContent, + HovercardTrigger, +} from '~components/Hovercard' import WeaponLabelIcon from '~components/WeaponLabelIcon' import UncapIndicator from '~components/UncapIndicator' @@ -12,6 +15,7 @@ import './index.scss' interface Props { gridCharacter: GridCharacter children: React.ReactNode + onTriggerClick: () => void } interface KeyNames { @@ -67,58 +71,57 @@ const CharacterHovercard = (props: Props) => { } return ( - - {props.children} - - -
-
-

{props.gridCharacter.object.name[locale]}

- {props.gridCharacter.object.name[locale]} + + {props.children} + + +
+
+

{props.gridCharacter.object.name[locale]}

+ {props.gridCharacter.object.name[locale]} +
+
+
+ -
-
-
- + + {props.gridCharacter.object.proficiency.proficiency2 ? ( - {props.gridCharacter.object.proficiency.proficiency2 ? ( - - ) : ( - '' - )} -
- + ) : ( + '' + )}
+
+
- - {t('buttons.wiki')} - - - - - + + {t('buttons.wiki')} + + + ) } diff --git a/components/CharacterUnit/index.tsx b/components/CharacterUnit/index.tsx index c9479a95..e70061f1 100644 --- a/components/CharacterUnit/index.tsx +++ b/components/CharacterUnit/index.tsx @@ -95,7 +95,7 @@ const CharacterUnit = ({ setDetailsModalOpen(true) } - function openSearchModal(event: MouseEvent) { + function openSearchModal() { if (editable) setSearchModalOpen(true) } @@ -286,33 +286,50 @@ const CharacterUnit = ({ } } - const image = ( -
+ const image = () => { + let image = ( {character?.name[locale]} - {editable ? ( - - - - ) : ( - '' - )} -
- ) + ) + + if (gridCharacter) { + image = ( + + {image} + + ) + } + + return ( +
+ {image} + {editable ? ( + + + + ) : ( + '' + )} +
+ ) + } const unitContent = ( <>
{contextMenu()} {perpetuity()} - {image} + {image()} {gridCharacter && character ? ( ) - const unitContentWithHovercard = ( - - {unitContent} - - ) - - return gridCharacter && !editable ? unitContentWithHovercard : unitContent + return unitContent } export default CharacterUnit diff --git a/components/Hovercard/index.scss b/components/Hovercard/index.scss new file mode 100644 index 00000000..02f16458 --- /dev/null +++ b/components/Hovercard/index.scss @@ -0,0 +1,93 @@ +.HovercardContent { + animation: scaleIn $duration-zoom ease-out; + transform-origin: var(--radix-hover-card-content-transform-origin); + background: var(--dialog-bg); + border-radius: $card-corner; + color: var(--text-primary); + display: flex; + flex-direction: column; + gap: $unit-2x; + padding: $unit-2x; + width: 300px; + + .top { + display: flex; + flex-direction: column; + gap: calc($unit / 2); + + .title { + align-items: center; + display: flex; + flex-direction: row; + gap: $unit * 2; + + h4 { + flex-grow: 1; + font-size: $font-medium; + line-height: 1.2; + min-width: 140px; + } + + img { + height: auto; + width: 100px; + } + } + + .subInfo { + align-items: center; + display: flex; + flex-direction: row; + gap: $unit * 2; + + .icons { + display: flex; + flex-direction: row; + flex-grow: 1; + gap: $unit; + } + + .UncapIndicator { + width: 100px; + } + } + } + + section { + h5 { + font-size: $font-small; + font-weight: $medium; + opacity: 0.7; + + &.wind { + color: $wind-bg-20; + } + + &.fire { + color: $fire-bg-20; + } + + &.water { + color: $water-bg-20; + } + + &.earth { + color: $earth-bg-20; + } + + &.dark { + color: $dark-bg-10; + } + + &.light { + color: $light-bg-20; + } + } + } + + a.Button { + display: block; + padding: $unit * 1.5; + text-align: center; + } +} diff --git a/components/Hovercard/index.tsx b/components/Hovercard/index.tsx new file mode 100644 index 00000000..3531d059 --- /dev/null +++ b/components/Hovercard/index.tsx @@ -0,0 +1,31 @@ +import React, { PropsWithChildren } from 'react' +import classNames from 'classnames' + +import * as HoverCardPrimitive from '@radix-ui/react-hover-card' +import './index.scss' + +interface Props extends HoverCardPrimitive.HoverCardContentProps {} + +export const Hovercard = HoverCardPrimitive.Root +export const HovercardTrigger = HoverCardPrimitive.Trigger + +export const HovercardContent = ({ + children, + ...props +}: PropsWithChildren) => { + const classes = classNames(props.className, { + HovercardContent: true, + }) + return ( + + + {children} + + + ) +} diff --git a/components/SummonHovercard/index.tsx b/components/SummonHovercard/index.tsx index 5a603cc9..c68d3a72 100644 --- a/components/SummonHovercard/index.tsx +++ b/components/SummonHovercard/index.tsx @@ -2,8 +2,11 @@ import React from 'react' import { useRouter } from 'next/router' import { useTranslation } from 'next-i18next' -import * as HoverCard from '@radix-ui/react-hover-card' - +import { + Hovercard, + HovercardContent, + HovercardTrigger, +} from '~components/Hovercard' import WeaponLabelIcon from '~components/WeaponLabelIcon' import UncapIndicator from '~components/UncapIndicator' @@ -12,6 +15,7 @@ import './index.scss' interface Props { gridSummon: GridSummon children: React.ReactNode + onTriggerClick: () => void } const SummonHovercard = (props: Props) => { @@ -60,39 +64,38 @@ const SummonHovercard = (props: Props) => { } return ( - - {props.children} - - -
-
-

{props.gridSummon.object.name[locale]}

- {props.gridSummon.object.name[locale]} -
-
-
- -
- -
+ + + {props.children} + + +
+
+

{props.gridSummon.object.name[locale]}

+ {props.gridSummon.object.name[locale]}
- - {t('buttons.wiki')} - - - - - +
+
+ +
+ +
+
+ + {t('buttons.wiki')} + + + ) } diff --git a/components/SummonUnit/index.tsx b/components/SummonUnit/index.tsx index db93958d..3ee7447f 100644 --- a/components/SummonUnit/index.tsx +++ b/components/SummonUnit/index.tsx @@ -80,7 +80,7 @@ const SummonUnit = ({ }) // Methods: Open layer - function openSearchModal(event: MouseEvent) { + function openSearchModal() { if (editable) setSearchModalOpen(true) } @@ -223,8 +223,8 @@ const SummonUnit = ({ } // Methods: Core element rendering - const image = ( -
+ const image = () => { + let image = ( {summon?.name[locale]} - {editable ? ( - - - - ) : ( - '' - )} -
- ) + ) + + if (gridSummon) { + image = ( + + {image} + + ) + } + + return ( +
+ {image} + {editable ? ( + + + + ) : ( + '' + )} +
+ ) + } const unitContent = ( <>
{contextMenu()} - {image} + {image()} {gridSummon ? ( ) - const unitContentWithHovercard = ( - {unitContent} - ) - - return gridSummon && !editable ? unitContentWithHovercard : unitContent + return unitContent } export default SummonUnit diff --git a/components/WeaponHovercard/index.scss b/components/WeaponHovercard/index.scss index a9f5bd57..20dabbea 100644 --- a/components/WeaponHovercard/index.scss +++ b/components/WeaponHovercard/index.scss @@ -1,4 +1,4 @@ -.Weapon.Hovercard { +.Weapon.HovercardContent { .skills { display: flex; flex-direction: row; diff --git a/components/WeaponHovercard/index.tsx b/components/WeaponHovercard/index.tsx index 02a373e2..39b31ab1 100644 --- a/components/WeaponHovercard/index.tsx +++ b/components/WeaponHovercard/index.tsx @@ -2,8 +2,11 @@ import React from 'react' import { useRouter } from 'next/router' import { useTranslation } from 'next-i18next' -import * as HoverCard from '@radix-ui/react-hover-card' - +import { + Hovercard, + HovercardContent, + HovercardTrigger, +} from '~components/Hovercard' import WeaponLabelIcon from '~components/WeaponLabelIcon' import UncapIndicator from '~components/UncapIndicator' @@ -14,6 +17,7 @@ import './index.scss' interface Props { gridWeapon: GridWeapon children: React.ReactNode + onTriggerClick: () => void } interface KeyNames { @@ -26,10 +30,11 @@ interface KeyNames { const WeaponHovercard = (props: Props) => { const router = useRouter() - const { t } = useTranslation('common') const locale = router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' + const { t } = useTranslation('common') + const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light'] const Proficiency = [ 'none', @@ -67,6 +72,7 @@ const WeaponHovercard = (props: Props) => { props.gridWeapon.object.element == 0 && props.gridWeapon.element ? Element[props.gridWeapon.element] : Element[props.gridWeapon.object.element] + const wikiUrl = `https://gbf.wiki/${props.gridWeapon.object.name.en.replaceAll( ' ', '_' @@ -189,64 +195,62 @@ const WeaponHovercard = (props: Props) => { ) return ( - - {props.children} - - -
-
-

{props.gridWeapon.object.name[locale]}

- {props.gridWeapon.object.name[locale]} -
-
-
- {props.gridWeapon.object.element !== 0 || - (props.gridWeapon.object.element === 0 && - props.gridWeapon.element != null) ? ( - - ) : ( - '' - )} - -
- -
+ + + {props.children} + + +
+
+

{props.gridWeapon.object.name[locale]}

+ {props.gridWeapon.object.name[locale]}
+
+
+ {props.gridWeapon.object.element !== 0 || + (props.gridWeapon.object.element === 0 && + props.gridWeapon.element != null) ? ( + + ) : ( + '' + )} + +
+ +
+
- {props.gridWeapon.object.ax && - props.gridWeapon.ax && - props.gridWeapon.ax[0].modifier && - props.gridWeapon.ax[0].strength - ? axSection - : ''} - {props.gridWeapon.weapon_keys && - props.gridWeapon.weapon_keys.length > 0 - ? keysSection - : ''} - - {t('buttons.wiki')} - - - - - + {props.gridWeapon.object.ax && + props.gridWeapon.ax && + props.gridWeapon.ax[0].modifier && + props.gridWeapon.ax[0].strength + ? axSection + : ''} + {props.gridWeapon.weapon_keys && props.gridWeapon.weapon_keys.length > 0 + ? keysSection + : ''} + + {t('buttons.wiki')} + + + ) } diff --git a/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx index f3b78f93..3f018207 100644 --- a/components/WeaponUnit/index.tsx +++ b/components/WeaponUnit/index.tsx @@ -98,7 +98,7 @@ const WeaponUnit = ({ setDetailsModalOpen(true) } - function openSearchModal(event: MouseEvent) { + function openSearchModal() { if (editable) setSearchModalOpen(true) } @@ -509,17 +509,8 @@ const WeaponUnit = ({ } // Methods: Core element rendering - const image = ( -
-
- {awakeningImage()} -
- {axImages()} - {telumaImages()} - {opusImages()} - {ultimaImages()} -
-
+ const image = () => { + const image = ( {weapon?.name[locale]} - {editable ? ( - - - - ) : ( - '' - )} -
- ) + ) + + const content = ( +
+
+ {awakeningImage()} +
+ {axImages()} + {telumaImages()} + {opusImages()} + {ultimaImages()} +
+
+ {image} + {editable ? ( + + + + ) : ( + '' + )} +
+ ) + + return gridWeapon ? ( + + {content} + + ) : ( + content + ) + } const unitContent = ( <>
{contextMenu()} - {image} + {image()} {gridWeapon && weapon ? ( ) - const unitContentWithHovercard = ( - {unitContent} - ) - - return gridWeapon && !editable ? unitContentWithHovercard : unitContent + return unitContent } export default WeaponUnit diff --git a/styles/globals.scss b/styles/globals.scss index d9d12f8a..63539203 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -200,98 +200,6 @@ select { } } -.Hovercard { - background: #222; - border-radius: $unit; - color: $grey-100; - display: flex; - flex-direction: column; - gap: $unit * 2; - padding: $unit * 2; - width: 300px; - - .top { - display: flex; - flex-direction: column; - gap: calc($unit / 2); - - .title { - align-items: center; - display: flex; - flex-direction: row; - gap: $unit * 2; - - h4 { - flex-grow: 1; - font-size: $font-medium; - line-height: 1.2; - min-width: 140px; - } - - img { - height: auto; - width: 100px; - } - } - - .subInfo { - align-items: center; - display: flex; - flex-direction: row; - gap: $unit * 2; - - .icons { - display: flex; - flex-direction: row; - flex-grow: 1; - gap: $unit; - } - - .UncapIndicator { - width: 100px; - } - } - } - - section { - h5 { - font-size: $font-small; - font-weight: $medium; - opacity: 0.7; - - &.wind { - color: $wind-bg-20; - } - - &.fire { - color: $fire-bg-20; - } - - &.water { - color: $water-bg-20; - } - - &.earth { - color: $earth-bg-20; - } - - &.dark { - color: $dark-bg-10; - } - - &.light { - color: $light-bg-20; - } - } - } - - a.Button { - display: block; - padding: $unit * 1.5; - text-align: center; - } -} - #Teams, #Profile { display: flex; @@ -447,17 +355,25 @@ i.tag { opacity: 0.6; transform: scale(1); } - 70% { - opacity: 0.8; + 65% { + opacity: 0.65; transform: scale(1.1); } + 70% { + opacity: 0.7; + transform: scale(1); + } + 75% { + opacity: 0.75; + transform: scale(0.98); + } 80% { opacity: 0.8; - transform: scale(1); + transform: scale(1.02); } 90% { - opacity: 0.8; - transform: scale(0.95); + opacity: 0.9; + transform: scale(0.96); } 100% { opacity: 1;