Add Summon and Character hovercards

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 (
+        <HoverCard.Root>
+            <HoverCard.Trigger>
+                { props.children }
+            </HoverCard.Trigger>
+            <HoverCard.Content className="Weapon Hovercard">
+                <div className="top">
+                    <div className="title">
+                        <h4>{ props.gridCharacter.object.name.en }</h4>
+                        <img alt={props.gridCharacter.object.name.en} src={characterImage()} />
+                    </div>
+                    <div className="subInfo">
+                        <div className="icons">
+                            <WeaponLabelIcon labelType={Element[props.gridCharacter.object.element]} />
+                            <WeaponLabelIcon labelType={ Proficiency[props.gridCharacter.object.proficiency.proficiency1] } />
+                            { (props.gridCharacter.object.proficiency.proficiency2) ? 
+                                <WeaponLabelIcon labelType={ Proficiency[props.gridCharacter.object.proficiency.proficiency2] } />
+                            : ''}
+                        </div>
+                        <UncapIndicator 
+                            type="character"
+                            ulb={props.gridCharacter.object.uncap.ulb || false} 
+                            flb={props.gridCharacter.object.uncap.flb || false}
+                            special={false}
+                        />
+                    </div>
+                </div>
+
+                <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">View more on gbf.wiki</a>
+                <HoverCard.Arrow />
+            </HoverCard.Content>
+        </HoverCard.Root>
+    )
+}
+
+export default CharacterHovercard
+

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) => {
         </SearchModal>
     )
 
-    return (
+    const unitContent = (
         <div>
             <div className={classes}>
                 { (props.editable) ? editableImage : image }
@@ -92,6 +93,18 @@ const CharacterUnit = (props: Props) => {
             </div>
         </div>
     )
+
+    const withHovercard = (
+        <CharacterHovercard gridCharacter={gridCharacter!}>
+            {unitContent}
+        </CharacterHovercard>
+    )
+
+    return (
+        <div className={classes}>
+            { (gridCharacter) ? withHovercard : unitContent }
+        </div>
+    )
 }
 
 export default CharacterUnit

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 (
+        <HoverCard.Root>
+            <HoverCard.Trigger>
+                { props.children }
+            </HoverCard.Trigger>
+            <HoverCard.Content className="Weapon Hovercard">
+                <div className="top">
+                    <div className="title">
+                        <h4>{ props.gridSummon.object.name.en }</h4>
+                        <img alt={props.gridSummon.object.name.en} src={summonImage()} />
+                    </div>
+                    <div className="subInfo">
+                        <div className="icons">
+                            <WeaponLabelIcon labelType={Element[props.gridSummon.object.element]}/>
+                        </div>
+                        <UncapIndicator 
+                            type="summon"
+                            ulb={props.gridSummon.object.uncap.ulb || false} 
+                            flb={props.gridSummon.object.uncap.flb || false}
+                            special={false}
+                        />
+                    </div>
+                </div>
+                <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">View more on gbf.wiki</a>
+                <HoverCard.Arrow />
+            </HoverCard.Content>
+        </HoverCard.Root>
+    )
+}
+
+export default SummonHovercard
+

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) => {
         </SearchModal>
     )
 
-    return (
-        <div className={classes}>
+    const unitContent = (
+        <div>
             { (props.editable) ? editableImage : image }
             { (gridSummon) ? 
                 <UncapIndicator 
@@ -97,6 +98,18 @@ const SummonUnit = (props: Props) => {
             <h3 className="SummonName">{summon?.name.en}</h3>
         </div>
     )
+
+    const withHovercard = (
+        <SummonHovercard gridSummon={gridSummon!}>
+            {unitContent}
+        </SummonHovercard>
+    )
+
+    return (
+        <div className={classes}>
+            { (gridSummon) ? withHovercard : unitContent }
+        </div>
+    )
 }
 
 export default SummonUnit

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 (
                         <div className="weaponKey" key={props.gridWeapon.weapon_keys![i].id}>
-                            <span>{props.gridWeapon.weapon_keys![i].name.en}</span>
+                        <span>{props.gridWeapon.weapon_keys![i].name.en}</span>
                         </div>
                     )
                 }) : '' }