From d5ac0ba6d745cbe6641fc901481d4c0ea0471583 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Fri, 4 Mar 2022 00:33:21 -0800 Subject: [PATCH] Add Summon and Character hovercards --- components/CharacterHovercard/index.scss | 0 components/CharacterHovercard/index.tsx | 87 ++++++++++++++++++++++++ components/CharacterUnit/index.tsx | 15 +++- components/SummonHovercard/index.scss | 0 components/SummonHovercard/index.tsx | 83 ++++++++++++++++++++++ components/SummonUnit/index.tsx | 17 ++++- components/WeaponHovercard/index.tsx | 3 +- 7 files changed, 200 insertions(+), 5 deletions(-) create mode 100644 components/CharacterHovercard/index.scss create mode 100644 components/CharacterHovercard/index.tsx create mode 100644 components/SummonHovercard/index.scss create mode 100644 components/SummonHovercard/index.tsx diff --git a/components/CharacterHovercard/index.scss b/components/CharacterHovercard/index.scss new file mode 100644 index 00000000..e69de29b diff --git a/components/CharacterHovercard/index.tsx b/components/CharacterHovercard/index.tsx new file mode 100644 index 00000000..73dada07 --- /dev/null +++ b/components/CharacterHovercard/index.tsx @@ -0,0 +1,87 @@ +import React from 'react' +import * as HoverCard from '@radix-ui/react-hover-card' + +import WeaponLabelIcon from '~components/WeaponLabelIcon' +import UncapIndicator from '~components/UncapIndicator' + +import { axData } from '~utils/axData' + +import './index.scss' + +interface Props { + gridCharacter: GridCharacter + children: React.ReactNode +} + +interface KeyNames { + [key: string]: { + en: string, + jp: string + } +} + +const CharacterHovercard = (props: Props) => { + const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light'] + const Proficiency = ['none', 'sword', 'dagger', 'axe', 'spear', 'bow', 'staff', 'fist', 'harp', 'gun', 'katana'] + + const tintElement = Element[props.gridCharacter.object.element] + const wikiUrl = `https://gbf.wiki/${props.gridCharacter.object.name.en.replaceAll(' ', '_')}` + + function characterImage() { + let imgSrc = "" + + if (props.gridCharacter) { + const character = props.gridCharacter.object + + // Change the image based on the uncap level + let suffix = '01' + if (props.gridCharacter.uncap_level == 6) + suffix = '04' + else if (props.gridCharacter.uncap_level == 5) + suffix = '03' + else if (props.gridCharacter.uncap_level > 2) + suffix = '02' + + imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-grid/${character.granblue_id}_${suffix}.jpg` + } + + return imgSrc + } + + return ( + + + { props.children } + + +
+
+

{ props.gridCharacter.object.name.en }

+ {props.gridCharacter.object.name.en} +
+
+
+ + + { (props.gridCharacter.object.proficiency.proficiency2) ? + + : ''} +
+ +
+
+ + View more on gbf.wiki + + + + ) +} + +export default CharacterHovercard + diff --git a/components/CharacterUnit/index.tsx b/components/CharacterUnit/index.tsx index e35beda9..243eb530 100644 --- a/components/CharacterUnit/index.tsx +++ b/components/CharacterUnit/index.tsx @@ -7,6 +7,7 @@ import PlusIcon from '~public/icons/Add.svg' import './index.scss' import { omit } from 'lodash' +import CharacterHovercard from '~components/CharacterHovercard' interface Props { gridCharacter: GridCharacter | undefined @@ -75,7 +76,7 @@ const CharacterUnit = (props: Props) => { ) - return ( + const unitContent = (
{ (props.editable) ? editableImage : image } @@ -92,6 +93,18 @@ const CharacterUnit = (props: Props) => {
) + + const withHovercard = ( + + {unitContent} + + ) + + return ( +
+ { (gridCharacter) ? withHovercard : unitContent } +
+ ) } export default CharacterUnit diff --git a/components/SummonHovercard/index.scss b/components/SummonHovercard/index.scss new file mode 100644 index 00000000..e69de29b diff --git a/components/SummonHovercard/index.tsx b/components/SummonHovercard/index.tsx new file mode 100644 index 00000000..5db30251 --- /dev/null +++ b/components/SummonHovercard/index.tsx @@ -0,0 +1,83 @@ +import React from 'react' +import * as HoverCard from '@radix-ui/react-hover-card' + +import WeaponLabelIcon from '~components/WeaponLabelIcon' +import UncapIndicator from '~components/UncapIndicator' + +import { axData } from '~utils/axData' + +import './index.scss' + +interface Props { + gridSummon: GridSummon + children: React.ReactNode +} + +interface KeyNames { + [key: string]: { + en: string, + jp: string + } +} + +const SummonHovercard = (props: Props) => { + const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light'] + const Proficiency = ['none', 'sword', 'dagger', 'axe', 'spear', 'bow', 'staff', 'fist', 'harp', 'gun', 'katana'] + + const tintElement = Element[props.gridSummon.object.element] + const wikiUrl = `https://gbf.wiki/${props.gridSummon.object.name.en.replaceAll(' ', '_')}` + + function summonImage() { + let imgSrc = "" + + if (props.gridSummon) { + const summon = props.gridSummon.object + + const upgradedSummons = [ + '2040094000', '2040100000', '2040080000', '2040098000', + '2040090000', '2040084000', '2040003000', '2040056000' + ] + + let suffix = '' + if (upgradedSummons.indexOf(summon.granblue_id.toString()) != -1 && props.gridSummon.uncap_level == 5) + suffix = '_02' + + // Generate the correct source for the summon + imgSrc = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${summon.granblue_id}${suffix}.jpg` + } + + return imgSrc + } + + return ( + + + { props.children } + + +
+
+

{ props.gridSummon.object.name.en }

+ {props.gridSummon.object.name.en} +
+
+
+ +
+ +
+
+ View more on gbf.wiki + + + + ) +} + +export default SummonHovercard + diff --git a/components/SummonUnit/index.tsx b/components/SummonUnit/index.tsx index 63b134d7..05d3cf01 100644 --- a/components/SummonUnit/index.tsx +++ b/components/SummonUnit/index.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react' import classnames from 'classnames' import SearchModal from '~components/SearchModal' +import SummonHovercard from '~components/SummonHovercard' import UncapIndicator from '~components/UncapIndicator' import PlusIcon from '~public/icons/Add.svg' @@ -81,8 +82,8 @@ const SummonUnit = (props: Props) => { ) - return ( -
+ const unitContent = ( +
{ (props.editable) ? editableImage : image } { (gridSummon) ? {

{summon?.name.en}

) + + const withHovercard = ( + + {unitContent} + + ) + + return ( +
+ { (gridSummon) ? withHovercard : unitContent } +
+ ) } export default SummonUnit diff --git a/components/WeaponHovercard/index.tsx b/components/WeaponHovercard/index.tsx index 6126438a..07582b32 100644 --- a/components/WeaponHovercard/index.tsx +++ b/components/WeaponHovercard/index.tsx @@ -7,7 +7,6 @@ import UncapIndicator from '~components/UncapIndicator' import { axData } from '~utils/axData' import './index.scss' -import { keys } from 'lodash' interface Props { gridWeapon: GridWeapon @@ -96,7 +95,7 @@ const WeaponHovercard = (props: Props) => { Array.from(Array(props.gridWeapon.weapon_keys.length)).map((x, i) => { return (
- {props.gridWeapon.weapon_keys![i].name.en} + {props.gridWeapon.weapon_keys![i].name.en}
) }) : '' }