From 7e7d89b01d3f20f7cab5b30780599124e585a851 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 29 Jan 2023 18:30:38 -0800 Subject: [PATCH 1/8] Make custom Hovercard component and migrate --- components/CharacterHovercard/index.tsx | 91 +++++++++--------- components/CharacterUnit/index.tsx | 59 +++++++----- components/Hovercard/index.scss | 93 ++++++++++++++++++ components/Hovercard/index.tsx | 31 ++++++ components/SummonHovercard/index.tsx | 71 +++++++------- components/SummonUnit/index.tsx | 49 ++++++---- components/WeaponHovercard/index.scss | 2 +- components/WeaponHovercard/index.tsx | 122 ++++++++++++------------ components/WeaponUnit/index.tsx | 64 +++++++------ styles/globals.scss | 110 +++------------------ 10 files changed, 388 insertions(+), 304 deletions(-) create mode 100644 components/Hovercard/index.scss create mode 100644 components/Hovercard/index.tsx 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; From d9ed72827623a61c898cb3fa0b1cd08e30b41a10 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 29 Jan 2023 19:25:24 -0800 Subject: [PATCH 2/8] Add weapon awakenings to hovercard --- components/WeaponHovercard/index.scss | 24 +++++++++++++++++++-- components/WeaponHovercard/index.tsx | 30 +++++++++++++++++++++++++++ components/WeaponModal/index.tsx | 1 + 3 files changed, 53 insertions(+), 2 deletions(-) diff --git a/components/WeaponHovercard/index.scss b/components/WeaponHovercard/index.scss index 20dabbea..2dd5ba5a 100644 --- a/components/WeaponHovercard/index.scss +++ b/components/WeaponHovercard/index.scss @@ -3,7 +3,7 @@ display: flex; flex-direction: row; justify-content: space-between; - padding-right: $unit * 2; + padding-right: $unit-2x; .axSkill { align-items: center; @@ -36,6 +36,26 @@ display: flex; flex-direction: column; font-size: $normal; - gap: calc($unit / 2); + gap: $unit-half; + } + + .awakening { + display: flex; + flex-direction: column; + gap: $unit-half; + + & > div { + align-items: center; + display: flex; + gap: $unit-half; + + img { + width: $unit-4x; + } + + strong { + font-weight: $bold; + } + } } } diff --git a/components/WeaponHovercard/index.tsx b/components/WeaponHovercard/index.tsx index 39b31ab1..8f91f5d3 100644 --- a/components/WeaponHovercard/index.tsx +++ b/components/WeaponHovercard/index.tsx @@ -11,6 +11,7 @@ import WeaponLabelIcon from '~components/WeaponLabelIcon' import UncapIndicator from '~components/UncapIndicator' import ax from '~data/ax' +import { weaponAwakening } from '~data/awakening' import './index.scss' @@ -135,6 +136,33 @@ const WeaponHovercard = (props: Props) => { return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg` } + const awakeningSection = () => { + const gridAwakening = props.gridWeapon.awakening + const awakening = weaponAwakening.find( + (awakening) => awakening.id === gridAwakening?.type + ) + + if (gridAwakening && awakening) { + return ( +
+
+ {t('modals.weapon.subtitles.awakening')} +
+
+ {awakening.name[locale]} + + {`${awakening.name[locale]}`}  + {`Lv${gridAwakening.level}`} + +
+
+ ) + } + } + const keysSection = (
{WeaponKeyNames[props.gridWeapon.object.series] ? ( @@ -243,9 +271,11 @@ const WeaponHovercard = (props: Props) => { props.gridWeapon.ax[0].strength ? axSection : ''} + {awakeningSection()} {props.gridWeapon.weapon_keys && props.gridWeapon.weapon_keys.length > 0 ? keysSection : ''} + {t('buttons.wiki')} diff --git a/components/WeaponModal/index.tsx b/components/WeaponModal/index.tsx index 5cec601c..d7fcdec0 100644 --- a/components/WeaponModal/index.tsx +++ b/components/WeaponModal/index.tsx @@ -189,6 +189,7 @@ const WeaponModal = ({ if (gridWeapon.mainhand) appState.grid.weapons.mainWeapon = gridWeapon else appState.grid.weapons.allWeapons[gridWeapon.position] = gridWeapon + if (onOpenChange) onOpenChange(false) setOpen(false) } From 0495c7c8f7d60166f424727cd487d28a2a15937d Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 29 Jan 2023 21:00:25 -0800 Subject: [PATCH 3/8] Add character mod data to hovercard --- components/CharacterHovercard/index.scss | 53 +++++++++ components/CharacterHovercard/index.tsx | 143 ++++++++++++++++++++++- components/Hovercard/index.scss | 2 + data/overMastery.tsx | 51 ++++++++ 4 files changed, 245 insertions(+), 4 deletions(-) diff --git a/components/CharacterHovercard/index.scss b/components/CharacterHovercard/index.scss index e69de29b..1ab4b2bd 100644 --- a/components/CharacterHovercard/index.scss +++ b/components/CharacterHovercard/index.scss @@ -0,0 +1,53 @@ +.Character.HovercardContent { + .Mastery { + display: flex; + flex-direction: column; + gap: $unit; + + ul { + display: flex; + flex-direction: column; + gap: $unit-half; + + .ExtendedMastery { + align-items: center; + display: flex; + gap: $unit-half; + + img { + width: $unit-3x; + } + + strong { + font-weight: $bold; + } + } + } + } + + .Awakening { + display: flex; + flex-direction: column; + gap: $unit; + + & > div { + align-items: center; + display: flex; + gap: $unit-half; + + img { + width: $unit-3x; + } + + strong { + font-weight: $bold; + } + } + } + + // .Footer { + // position: sticky; + // bottom: 0; + // left: 0; + // } +} diff --git a/components/CharacterHovercard/index.tsx b/components/CharacterHovercard/index.tsx index bd2802d9..8a2989d5 100644 --- a/components/CharacterHovercard/index.tsx +++ b/components/CharacterHovercard/index.tsx @@ -10,7 +10,15 @@ import { import WeaponLabelIcon from '~components/WeaponLabelIcon' import UncapIndicator from '~components/UncapIndicator' +import { + overMastery, + aetherialMastery, + permanentMastery, +} from '~data/overMastery' +import { ExtendedMastery } from '~types' + import './index.scss' +import { characterAwakening } from '~data/awakening' interface Props { gridCharacter: GridCharacter @@ -70,6 +78,128 @@ const CharacterHovercard = (props: Props) => { return imgSrc } + function masteryElement(dictionary: ItemSkill[], mastery: ExtendedMastery) { + const canonicalMastery = dictionary.find( + (item) => item.id === mastery.modifier + ) + + if (canonicalMastery) { + return ( +
  • + {canonicalMastery.name[locale]} + + {canonicalMastery.name[locale]}  + {`+${mastery.strength}${canonicalMastery.suffix}`} + +
    • + ) + } + } + + const overMasterySection = () => { + if (props.gridCharacter && props.gridCharacter.over_mastery) { + return ( +
    +
    + {t('modals.characters.subtitles.ring')} +
    +
      + {[...Array(4)].map((e, i) => { + const ringIndex = i + 1 + const ringStat: ExtendedMastery = + props.gridCharacter.over_mastery[i] + if (ringStat && ringStat.modifier && ringStat.modifier > 0) { + if (ringIndex === 1 || ringIndex === 2) { + return masteryElement(overMastery.a, ringStat) + } else if (ringIndex === 3) { + return masteryElement(overMastery.b, ringStat) + } else { + return masteryElement(overMastery.c, ringStat) + } + } + })} +
    +
    + ) + } + } + + const aetherialMasterySection = () => { + if ( + props.gridCharacter && + props.gridCharacter.aetherial_mastery && + props.gridCharacter.aetherial_mastery.modifier > 0 + ) { + return ( +
    +
    + {t('modals.characters.subtitles.earring')} +
    +
      + {masteryElement( + aetherialMastery, + props.gridCharacter.aetherial_mastery + )} +
    +
    + ) + } + } + + const permanentMasterySection = () => { + if (props.gridCharacter && props.gridCharacter.perpetuity) { + return ( +
    +
    + {t('modals.characters.subtitles.permanent')} +
    +
      + {[...Array(4)].map((e, i) => { + return masteryElement(permanentMastery, { + modifier: i + 1, + strength: permanentMastery[i].maxValue, + }) + })} +
    +
    + ) + } + } + + const awakeningSection = () => { + const gridAwakening = props.gridCharacter.awakening + const awakening = characterAwakening.find( + (awakening) => awakening.id === gridAwakening?.type + ) + + if (gridAwakening && awakening) { + return ( +
    +
    + {t('modals.characters.subtitles.awakening')} +
    +
    + {gridAwakening.type > 1 ? ( + {awakening.name[locale]} + ) : ( + '' + )} + + {`${awakening.name[locale]}`}  + {`Lv${gridAwakening.level}`} + +
    +
    + ) + } + } + return ( @@ -116,10 +246,15 @@ const CharacterHovercard = (props: Props) => { />
    - - - {t('buttons.wiki')} - + {awakeningSection()} + {overMasterySection()} + {aetherialMasterySection()} + {permanentMasterySection()} +
    + + {t('buttons.wiki')} + +
    ) diff --git a/components/Hovercard/index.scss b/components/Hovercard/index.scss index 02f16458..8018b0c7 100644 --- a/components/Hovercard/index.scss +++ b/components/Hovercard/index.scss @@ -7,6 +7,8 @@ display: flex; flex-direction: column; gap: $unit-2x; + max-height: 30vh; + overflow-y: scroll; padding: $unit-2x; width: 300px; diff --git a/data/overMastery.tsx b/data/overMastery.tsx index 74aa353d..969dc942 100644 --- a/data/overMastery.tsx +++ b/data/overMastery.tsx @@ -330,3 +330,54 @@ export const aetherialMastery: ItemSkill[] = [ fractional: false, }, ] + +export const permanentMastery: ItemSkill[] = [ + { + name: { + en: 'Extended Mastery Star Cap', + ja: 'LB強化回数上限', + }, + id: 1, + slug: 'star-cap', + minValue: 10, + maxValue: 10, + suffix: '', + fractional: false, + }, + { + name: { + en: 'ATK', + ja: '攻撃', + }, + id: 2, + slug: 'atk', + minValue: 10, + maxValue: 10, + suffix: '%', + fractional: false, + }, + { + name: { + en: 'HP', + ja: 'HP', + }, + id: 3, + slug: 'hp', + minValue: 10, + maxValue: 10, + suffix: '', + fractional: false, + }, + { + name: { + en: 'DMG Cap', + ja: 'ダメージ上限', + }, + id: 4, + slug: 'dmg-cap', + minValue: 5, + maxValue: 5, + suffix: '%', + fractional: false, + }, +] From 3f183591a1d4334ba293e3fd4b66ba04bea04496 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 29 Jan 2023 21:00:42 -0800 Subject: [PATCH 4/8] Update .gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 1ecada63..2c6a6ada 100644 --- a/.gitignore +++ b/.gitignore @@ -54,6 +54,7 @@ public/images/job* public/images/awakening* public/images/ax* public/images/accessory* +public/images/mastery* # Typescript v1 declaration files typings/ From cefa859f4ae88aca2f0af713f1dccd2ba3fb61f5 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 29 Jan 2023 22:19:07 -0800 Subject: [PATCH 5/8] Rearrange so that hovercard clicks dont trigger search --- components/CharacterUnit/index.tsx | 24 ++++++++++++------------ components/SummonUnit/index.tsx | 21 +++++++++------------ 2 files changed, 21 insertions(+), 24 deletions(-) diff --git a/components/CharacterUnit/index.tsx b/components/CharacterUnit/index.tsx index e70061f1..f2d115b7 100644 --- a/components/CharacterUnit/index.tsx +++ b/components/CharacterUnit/index.tsx @@ -295,18 +295,7 @@ const CharacterUnit = ({ /> ) - if (gridCharacter) { - image = ( - - {image} - - ) - } - - return ( + const content = (
    ) + + return gridCharacter ? ( + + {content} + + ) : ( + content + ) } const unitContent = ( diff --git a/components/SummonUnit/index.tsx b/components/SummonUnit/index.tsx index 3ee7447f..7f939085 100644 --- a/components/SummonUnit/index.tsx +++ b/components/SummonUnit/index.tsx @@ -235,18 +235,7 @@ const SummonUnit = ({ /> ) - if (gridSummon) { - image = ( - - {image} - - ) - } - - return ( + const content = (
    {image} {editable ? ( @@ -258,6 +247,14 @@ const SummonUnit = ({ )}
    ) + + return gridSummon ? ( + + {content} + + ) : ( + content + ) } const unitContent = ( From 0a5f0458c2839f2d7b3298df40ce295240554adc Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 29 Jan 2023 22:19:15 -0800 Subject: [PATCH 6/8] Remove width on uncap stars for ULB --- components/Hovercard/index.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/components/Hovercard/index.scss b/components/Hovercard/index.scss index 8018b0c7..7e429843 100644 --- a/components/Hovercard/index.scss +++ b/components/Hovercard/index.scss @@ -48,10 +48,6 @@ flex-grow: 1; gap: $unit; } - - .UncapIndicator { - width: 100px; - } } } From 2ef1863637dec4849f7361002b20e6723025d7bc Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 29 Jan 2023 22:19:42 -0800 Subject: [PATCH 7/8] Use Buttons instead of --- components/CharacterHovercard/index.tsx | 35 ++++++++++++++++--------- components/SummonHovercard/index.tsx | 25 +++++++++++++----- components/WeaponHovercard/index.tsx | 22 +++++++++++++--- 3 files changed, 59 insertions(+), 23 deletions(-) diff --git a/components/CharacterHovercard/index.tsx b/components/CharacterHovercard/index.tsx index 8a2989d5..b4fbfd77 100644 --- a/components/CharacterHovercard/index.tsx +++ b/components/CharacterHovercard/index.tsx @@ -1,12 +1,14 @@ import React from 'react' import { useRouter } from 'next/router' import { useTranslation } from 'next-i18next' +import jconv from 'jconv' import { Hovercard, HovercardContent, HovercardTrigger, } from '~components/Hovercard' +import Button from '~components/Button' import WeaponLabelIcon from '~components/WeaponLabelIcon' import UncapIndicator from '~components/UncapIndicator' @@ -15,10 +17,10 @@ import { aetherialMastery, permanentMastery, } from '~data/overMastery' +import { characterAwakening } from '~data/awakening' import { ExtendedMastery } from '~types' import './index.scss' -import { characterAwakening } from '~data/awakening' interface Props { gridCharacter: GridCharacter @@ -55,10 +57,13 @@ const CharacterHovercard = (props: Props) => { ] const tintElement = Element[props.gridCharacter.object.element] - const wikiUrl = `https://gbf.wiki/${props.gridCharacter.object.name.en.replaceAll( - ' ', - '_' - )}` + + function goTo() { + const urlSafeName = props.gridCharacter.object.name.en.replaceAll(' ', '_') + const url = `https://gbf.wiki/${urlSafeName}` + + window.open(url, '_blank') + } function characterImage() { let imgSrc = '' @@ -85,7 +90,7 @@ const CharacterHovercard = (props: Props) => { if (canonicalMastery) { return ( -
  • +
  • {canonicalMastery.name[locale]} { } } + const wikiButton = ( +
    • + {wikiButton} {awakeningSection()} {overMasterySection()} {aetherialMasterySection()} {permanentMasterySection()} -
    - - {t('buttons.wiki')} - -
    ) diff --git a/components/SummonHovercard/index.tsx b/components/SummonHovercard/index.tsx index c68d3a72..1a7f8b4f 100644 --- a/components/SummonHovercard/index.tsx +++ b/components/SummonHovercard/index.tsx @@ -7,6 +7,7 @@ import { HovercardContent, HovercardTrigger, } from '~components/Hovercard' +import Button from '~components/Button' import WeaponLabelIcon from '~components/WeaponLabelIcon' import UncapIndicator from '~components/UncapIndicator' @@ -27,10 +28,13 @@ const SummonHovercard = (props: Props) => { const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light'] const tintElement = Element[props.gridSummon.object.element] - const wikiUrl = `https://gbf.wiki/${props.gridSummon.object.name.en.replaceAll( - ' ', - '_' - )}` + + function goTo() { + const urlSafeName = props.gridSummon.object.name.en.replaceAll(' ', '_') + const url = `https://gbf.wiki/${urlSafeName}` + + window.open(url, '_blank') + } function summonImage() { let imgSrc = '' @@ -63,6 +67,15 @@ const SummonHovercard = (props: Props) => { return imgSrc } + const wikiButton = ( +
    - - {t('buttons.wiki')} - + {wikiButton} ) diff --git a/components/WeaponHovercard/index.tsx b/components/WeaponHovercard/index.tsx index 8f91f5d3..bd025b07 100644 --- a/components/WeaponHovercard/index.tsx +++ b/components/WeaponHovercard/index.tsx @@ -7,6 +7,7 @@ import { HovercardContent, HovercardTrigger, } from '~components/Hovercard' +import Button from '~components/Button' import WeaponLabelIcon from '~components/WeaponLabelIcon' import UncapIndicator from '~components/UncapIndicator' @@ -79,6 +80,13 @@ const WeaponHovercard = (props: Props) => { '_' )}` + function goTo() { + const urlSafeName = props.gridWeapon.object.name.en.replaceAll(' ', '_') + const url = `https://gbf.wiki/${urlSafeName}` + + window.open(url, '_blank') + } + const hovercardSide = () => { if (props.gridWeapon.position == -1) return 'right' else if ([6, 7, 8, 9, 10, 11].includes(props.gridWeapon.position)) @@ -222,6 +230,15 @@ const WeaponHovercard = (props: Props) => { ) + const wikiButton = ( +