Merge pull request #21 from jedmund/hovercard

Implement Hovercard

components/BottomHeader/index.tsx

@@ -67,9 +67,9 @@ const BottomHeader = () => {
     const leftNav = () => {
         if (router.pathname === '/p/[party]' || router.pathname === '/new') {
             if (app.party.detailsVisible) {
-                return (<Button icon="edit" active={true} click={toggleDetails}>Hide info</Button>)
+                return (<Button icon="edit" active={true} onClick={toggleDetails}>Hide info</Button>)
             } else {
-                return (<Button icon="edit" click={toggleDetails}>Edit info</Button>)
+                return (<Button icon="edit" onClick={toggleDetails}>Edit info</Button>)
             }
         } else {
             return (<div />)

components/Button/index.scss

@@ -134,6 +134,71 @@
             color: #bababa;
         }
     }
+
+    &.null {
+        background: $grey-90;
+        color: $grey-50;
+
+        &:hover {
+            background: $grey-70;
+            color: $grey-00;
+        }
+    }
+
+    &.wind {
+        background: $wind-bg-light;
+        color: $wind-text-dark;
+
+        &:hover {
+            background: darken($wind-bg-light, 10);
+        }
+    }
+
+    &.fire {
+        background: $fire-bg-light;
+        color: $fire-text-dark;
+
+        &:hover {
+            background: darken($fire-bg-light, 10);
+        }
+    }
+
+    &.water {
+        background: $water-bg-light;
+        color: $water-text-dark;
+
+        &:hover {
+            background: darken($water-bg-light, 10);
+        }
+    }
+
+    &.earth {
+        background: $earth-bg-light;
+        color: $earth-text-dark;
+
+        &:hover {
+            background: darken($earth-bg-light, 10);
+        }
+    }
+
+    &.dark {
+        background: $dark-bg-light;
+        color: $dark-text-dark;
+
+        &:hover {
+            background: darken($dark-bg-light, 10);
+        }
+    }
+
+
+    &.light {
+        background: $light-bg-light;
+        color: $light-text-dark;
+
+        &:hover {
+            background: darken($light-bg-light, 10);
+        }
+    }
     
     .text {
         color: inherit;

components/Button/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import classNames from 'classnames'
 
 import Link from 'next/link'
@@ -16,80 +16,118 @@ import './index.scss'
 import { ButtonType } from '~utils/enums'
 
 interface Props {
-    active: boolean
+    active?: boolean
-    disabled: boolean
+    disabled?: boolean
-    icon: string | null
+    classes?: string[],
-    type: ButtonType
+    icon?: string
-    click: any
+    type?: ButtonType
+    children?: React.ReactNode
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void
 }
 
-interface State {
+const Button = (props: Props) => {
-    isPressed: boolean
+    // States
-}
+    const [active, setActive] = useState(false)
+    const [disabled, setDisabled] = useState(false)
+    const [pressed, setPressed] = useState(false)
+    const [buttonType, setButtonType] = useState(ButtonType.Base)
 
-class Button extends React.Component<Props, State> {
+    const classes = classNames({
-    static defaultProps: Props = {
+        Button: true,
-        active: false,
+        'Active': active,
-        disabled: false,
+        'btn-pressed': pressed,
-        icon: null,
+        'btn-disabled': disabled,
-        type: ButtonType.Base,
+        'save': props.icon === 'save',
-        click: () => {}
+        'destructive': props.type == ButtonType.Destructive
-    }
+    }, props.classes)
 
-    constructor(props: Props) {
+    useEffect(() => {
-        super(props)
+        if (props.active) setActive(props.active)
-        this.state = {
+        if (props.disabled) setDisabled(props.disabled)
-            isPressed: false,
+        if (props.type) setButtonType(props.type)
-        }
+    }, [props.active, props.disabled, props.type])
-    }
 
-    render() {
+    const addIcon = (
-        let icon
+        <span className='icon'>
-        if (this.props.icon === 'new') {
+            <AddIcon />
-            icon = <span className='icon'>
+        </span>
-                <AddIcon />
+    )
-            </span>
+
-        } else if (this.props.icon === 'menu') {
+    const menuIcon = (
-            icon = <span className='icon'>
+        <span className='icon'>
-                <MenuIcon />
+            <MenuIcon />
-            </span>
+        </span>
-        } else if (this.props.icon === 'link') {
+    )
-            icon = <span className='icon stroke'>
+
-                <LinkIcon />
+    const linkIcon = (
-            </span>
+        <span className='icon stroke'>
-        } else if (this.props.icon === 'cross') {
+            <LinkIcon />
-            icon = <span className='icon'>
+        </span>
-                <CrossIcon />
+    )
-            </span>
+
-        } else if (this.props.icon === 'edit') {
+    const crossIcon = (
-            icon = <span className='icon'>
+        <span className='icon'>
-                <EditIcon />
+            <CrossIcon />
-            </span>
+        </span>
-        } else if (this.props.icon === 'save') {
+    )
-            icon = <span className='icon stroke'>
+
-                <SaveIcon />
+    const editIcon = (
-            </span>
+        <span className='icon'>
-        } else if (this.props.icon === 'settings') {
+            <EditIcon />
-            icon = <span className='icon settings'>
+        </span>
-                <SettingsIcon />
+    )
-            </span>
+
+    const saveIcon = (
+        <span className='icon stroke'>
+            <SaveIcon />
+        </span>
+    )
+
+    const settingsIcon = (
+        <span className='icon settings'>
+            <SettingsIcon />
+        </span>
+    )
+
+    function getIcon() {
+        let icon: React.ReactNode
+        
+        switch(props.icon) {
+            case 'new':      icon = addIcon; break
+            case 'menu':     icon = menuIcon; break
+            case 'link':     icon = linkIcon; break
+            case 'cross':    icon = crossIcon; break
+            case 'edit':     icon = editIcon; break
+            case 'save':     icon = saveIcon; break
+            case 'settings': icon = settingsIcon; break
         }
 
-        const classes = classNames({
+        return icon
-            Button: true,
+    }
-            'Active': this.props.active,
-            'btn-pressed': this.state.isPressed,
-            'btn-disabled': this.props.disabled,
-            'save': this.props.icon === 'save',
-            'destructive': this.props.type == ButtonType.Destructive
-        })
 
-        return <button className={classes} disabled={this.props.disabled} onClick={this.props.click}>
+    function handleMouseDown() {
-            {icon}
+        setPressed(true)
-            { (this.props.type != ButtonType.IconOnly) ? 
+    }
-                <span className='text'>{this.props.children}</span> : '' }
+
+    function handleMouseUp() {
+        setPressed(false)
+    }
+    return (
+        <button 
+            className={classes} 
+            disabled={disabled} 
+            onMouseDown={handleMouseDown}
+            onMouseUp={handleMouseUp}
+            onClick={props.onClick}>
+                { getIcon() }
+
+                { (props.type != ButtonType.IconOnly) ? 
+                    <span className='text'>
+                        { props.children }
+                    </span> : '' 
+                }
         </button>
-    }
+    )  
 }
 
 export default Button

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/GridRep/index.tsx

@@ -115,7 +115,7 @@ const GridRep = (props: Props) => {
                         active={props.favorited} 
                         icon="save" 
                         type={ButtonType.IconOnly} 
-                        click={sendSaveData} 
+                        onClick={sendSaveData} 
                     /> : ''}
             </div>
             <div className="bottom">

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 (
+    const unitContent = (
-        <div className={classes}>
+        <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/TopHeader/index.tsx

@@ -107,9 +107,9 @@ const TopHeader = () => {
 
     const saveButton = () => {
         if (party.favorited)
-            return (<Button icon="save" active={true} click={toggleFavorite}>Saved</Button>)
+            return (<Button icon="save" active={true} onClick={toggleFavorite}>Saved</Button>)
         else
-            return (<Button icon="save" click={toggleFavorite}>Save</Button>)
+            return (<Button icon="save" onClick={toggleFavorite}>Save</Button>)
     }
 
     const rightNav = () => {
@@ -119,9 +119,9 @@ const TopHeader = () => {
                     saveButton() : ''
                 }
                 { (router.route === '/p/[party]') ? 
-                    <Button icon="link" click={copyToClipboard}>Copy link</Button> : ''
+                    <Button icon="link" onClick={copyToClipboard}>Copy link</Button> : ''
                 }
-                <Button icon="new" click={newParty}>New</Button>
+                <Button icon="new" onClick={newParty}>New</Button>
             </div>
         )
     }

components/WeaponHovercard/index.scss

@@ -0,0 +1,41 @@
+.Weapon.Hovercard {
+    .skills {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        padding-right: $unit * 2;
+
+        .axSkill {
+            align-items: center;
+            display: flex;
+            flex-direction: row;
+
+            &.primary img {
+                height: 64px;
+                width: 64px;
+            }
+
+            &.secondary {
+                gap: $unit * 1.5;
+
+                img {
+                    height: 36px;
+                    width: 36px;
+                }
+            }
+
+            span {
+                font-size: $font-small;
+                font-weight: $medium;
+                text-align: center;
+            }
+        }
+    }
+
+    .weaponKeys {
+        display: flex;
+        flex-direction: column;
+        font-size: $normal;
+        gap: $unit / 2;
+    }
+}

components/WeaponHovercard/index.tsx

@@ -0,0 +1,160 @@
+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 {
+    gridWeapon: GridWeapon
+    children: React.ReactNode
+}
+
+interface KeyNames {
+    [key: string]: {
+        en: string,
+        jp: string
+    }
+}
+
+const WeaponHovercard = (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 WeaponKeyNames: KeyNames = {
+        '2': {
+            en: 'Pendulum',
+            jp: ''
+        },
+        '3': {
+            en: 'Teluma',
+            jp: ''
+        },
+        '17': {
+            en: 'Gauph Key',
+            jp: ''
+        },
+        '22': {
+            en: 'Emblem',
+            jp: ''
+        }
+    }
+
+    const tintElement = (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(' ', '_')}`
+
+    const createPrimaryAxSkillString = () => {
+        const primaryAxSkills = axData[props.gridWeapon.object.ax - 1]
+
+        if (props.gridWeapon.ax) {
+            const simpleAxSkill = props.gridWeapon.ax[0]
+            const axSkill = primaryAxSkills.find(skill => skill.id == simpleAxSkill.modifier)
+            
+            return `${axSkill?.name.en} +${simpleAxSkill.strength}${ (axSkill?.suffix) ? axSkill.suffix : '' }`
+        }
+
+        return ''
+    }
+
+    const createSecondaryAxSkillString = () => {
+        const primaryAxSkills = axData[props.gridWeapon.object.ax - 1]
+
+        if (props.gridWeapon.ax) {
+            const primarySimpleAxSkill = props.gridWeapon.ax[0]
+            const secondarySimpleAxSkill = props.gridWeapon.ax[1]
+
+            const primaryAxSkill = primaryAxSkills.find(skill => skill.id == primarySimpleAxSkill.modifier)
+
+            if (primaryAxSkill && primaryAxSkill.secondary) {
+                const secondaryAxSkill = primaryAxSkill.secondary.find(skill => skill.id == secondarySimpleAxSkill.modifier)
+                return `${secondaryAxSkill?.name.en} +${secondarySimpleAxSkill.strength}${ (secondaryAxSkill?.suffix) ? secondaryAxSkill.suffix : '' }`
+            }
+        }
+
+        return ''
+    }
+
+    function weaponImage() {
+        const weapon = props.gridWeapon.object
+
+        if (props.gridWeapon.object.element == 0 && props.gridWeapon.element)
+            return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}_${props.gridWeapon.element}.jpg`
+        else
+            return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`
+    }
+
+    const keysSection = (
+        <section className="weaponKeys">
+            { (WeaponKeyNames[props.gridWeapon.object.series]) ?
+                <h5 className={tintElement}>{ WeaponKeyNames[props.gridWeapon.object.series].en }s</h5> : '' 
+            }
+
+            { (props.gridWeapon.weapon_keys) ?
+                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>
+                        </div>
+                    )
+                }) : '' }
+        </section>
+    )
+
+    const axSection = (
+        <section className="axSkills">
+            <h5 className={tintElement}>AX Skills</h5>
+            <div className="skills">
+                <div className="primary axSkill">
+                    <img src={`/icons/ax/primary_${ (props.gridWeapon.ax) ? props.gridWeapon.ax[0].modifier : '' }.png`} />
+                    <span>{createPrimaryAxSkillString()}</span>
+                </div>
+
+                { (props.gridWeapon.ax && props.gridWeapon.ax[1].modifier && props.gridWeapon.ax[1].strength) ?
+                    <div className="secondary axSkill">
+                        <img src={`/icons/ax/secondary_${ (props.gridWeapon.ax) ? props.gridWeapon.ax[1].modifier : '' }.png`} />
+                        <span>{createSecondaryAxSkillString()}</span>
+                    </div> : ''}
+            </div>
+        </section>
+    )
+
+    return (
+        <HoverCard.Root>
+            <HoverCard.Trigger>
+                { props.children }
+            </HoverCard.Trigger>
+            <HoverCard.Content className="Weapon Hovercard">
+                <div className="top">
+                    <div className="title">
+                        <h4>{ props.gridWeapon.object.name.en }</h4>
+                        <img alt={props.gridWeapon.object.name.en} src={weaponImage()} />
+                    </div>
+                    <div className="subInfo">
+                        <div className="icons">
+                            { (props.gridWeapon.object.element !== 0 || (props.gridWeapon.object.element === 0 && props.gridWeapon.element != null)) ? 
+                                <WeaponLabelIcon labelType={ (props.gridWeapon.object.element === 0 && props.gridWeapon.element !== 0) ? Element[props.gridWeapon.element] : Element[props.gridWeapon.object.element] } />
+                                : '' }
+                            <WeaponLabelIcon labelType={ Proficiency[props.gridWeapon.object.proficiency] } />
+                        </div>
+                        <UncapIndicator 
+                            type="weapon"
+                            ulb={props.gridWeapon.object.uncap.ulb || false} 
+                            flb={props.gridWeapon.object.uncap.flb || false}
+                            special={false}
+                        />
+                    </div>
+                </div>
+
+                { (props.gridWeapon.object.ax > 0 && 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 : '' }
+                <a className={`Button ${tintElement}`} href={wikiUrl} target="_new">View more on gbf.wiki</a>
+                <HoverCard.Arrow />
+            </HoverCard.Content>
+        </HoverCard.Root>
+    )
+}
+
+export default WeaponHovercard
+

components/WeaponModal/index.tsx

@@ -14,7 +14,6 @@ import { appState } from '~utils/appState'
 import CrossIcon from '~public/icons/Cross.svg'
 import './index.scss'
 
-
 interface GridWeaponObject {
     weapon: {
         element?: number

components/WeaponUnit/index.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import SearchModal from '~components/SearchModal'
 import WeaponModal from '~components/WeaponModal'
+import WeaponHovercard from '~components/WeaponHovercard'
 import UncapIndicator from '~components/UncapIndicator'
 import Button from '~components/Button'
 
@@ -79,39 +80,47 @@ const WeaponUnit = (props: Props) => {
     )
 
     const editableImage = (
-        <div className="WeaponImage">
+        <SearchModal 
-            <SearchModal 
+            placeholderText="Search for a weapon..." 
-                placeholderText="Search for a weapon..." 
+            fromPosition={props.position} 
-                fromPosition={props.position} 
+            object="weapons"
-                object="weapons"
+            send={props.updateObject}>
-                send={props.updateObject}>
+                {image}
-                    {image}
+        </SearchModal>
-            </SearchModal>
+    )
+
+    const unitContent = (
+        <div>
+            { (props.editable && gridWeapon && canBeModified(gridWeapon)) ? 
+            <WeaponModal gridWeapon={gridWeapon}>
+                <div>
+                    <Button icon="settings" type={ButtonType.IconOnly}/> 
+                </div>
+            </WeaponModal>: '' }
+            { (props.editable) ? editableImage : image }
+            { (gridWeapon) ? 
+                <UncapIndicator 
+                    type="weapon"
+                    ulb={gridWeapon.object.uncap.ulb || false} 
+                    flb={gridWeapon.object.uncap.flb || false}
+                    uncapLevel={gridWeapon.uncap_level}
+                    updateUncap={passUncapData}
+                    special={false}
+                /> : ''
+            }
+            <h3 className="WeaponName">{weapon?.name.en}</h3>
         </div>
     )
 
+    const withHovercard = (
+        <WeaponHovercard gridWeapon={gridWeapon!}>
+            {unitContent}
+        </WeaponHovercard>
+    )
+
     return (
-        <div>
+        <div className={classes}>
-            <div className={classes}>
+            { (gridWeapon) ? withHovercard : unitContent }
-                { (props.editable && gridWeapon && canBeModified(gridWeapon)) ? 
-                    <WeaponModal gridWeapon={gridWeapon}>
-                        <div>
-                            <Button icon="settings" type={ButtonType.IconOnly}/> 
-                        </div>
-                    </WeaponModal>: '' }
-                { (props.editable) ? editableImage : image }
-                { (gridWeapon) ? 
-                    <UncapIndicator 
-                        type="weapon"
-                        ulb={gridWeapon.object.uncap.ulb || false} 
-                        flb={gridWeapon.object.uncap.flb || false}
-                        uncapLevel={gridWeapon.uncap_level}
-                        updateUncap={passUncapData}
-                        special={false}
-                    /> : ''
-                }
-                <h3 className="WeaponName">{weapon?.name.en}</h3>
-            </div>
         </div>
     )
 }

package-lock.json

@@ -9,7 +9,7 @@
         "@radix-ui/react-alert-dialog": "^0.1.5",
         "@radix-ui/react-dialog": "^0.1.5",
         "@radix-ui/react-dropdown-menu": "^0.1.4",
-        "@radix-ui/react-hover-card": "^0.1.3",
+        "@radix-ui/react-hover-card": "^0.1.5",
         "@radix-ui/react-label": "^0.1.4",
         "@radix-ui/react-switch": "^0.1.4",
         "@radix-ui/react-toggle-group": "^0.1.5",
@@ -2447,19 +2447,19 @@
       }
     },
     "node_modules/@radix-ui/react-hover-card": {
-      "version": "0.1.3",
+      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-0.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-0.1.5.tgz",
-      "integrity": "sha512-nHcH1Q4OaeontN4Elfc7MlYs4oHMLeE16JDu5SLA1Tch4US4K6s6Qri47dvIkNSsCeGVNggGBQAis70fZO1l8A==",
+      "integrity": "sha512-9eeBUZGalPbKL2dDZTbGUoAQR77PpL0IgQ27mKyj1tXnvhRcUPOSonM1KjqcCKOq2SS+G5gq7xhKHsf0v9XmTg==",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@radix-ui/primitive": "0.1.0",
         "@radix-ui/react-compose-refs": "0.1.0",
         "@radix-ui/react-context": "0.1.1",
-        "@radix-ui/react-dismissable-layer": "0.1.3",
+        "@radix-ui/react-dismissable-layer": "0.1.5",
-        "@radix-ui/react-popper": "0.1.3",
+        "@radix-ui/react-popper": "0.1.4",
-        "@radix-ui/react-portal": "0.1.3",
+        "@radix-ui/react-portal": "0.1.4",
-        "@radix-ui/react-presence": "0.1.1",
+        "@radix-ui/react-presence": "0.1.2",
-        "@radix-ui/react-primitive": "0.1.3",
+        "@radix-ui/react-primitive": "0.1.4",
         "@radix-ui/react-use-controllable-state": "0.1.0"
       },
       "peerDependencies": {
@@ -2467,6 +2467,116 @@
         "react-dom": "^16.8 || ^17.0"
       }
     },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-arrow": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-0.1.4.tgz",
+      "integrity": "sha512-BB6XzAb7Ml7+wwpFdYVtZpK1BlMgqyafSQNGzhIpSZ4uXvXOHPlR5GP8M449JkeQzgQjv9Mp1AsJxFC0KuOtuA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "0.1.4"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0"
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-0.1.5.tgz",
+      "integrity": "sha512-J+fYWijkX4M4QKwf9dtu1oC0U6e6CEl8WhBp3Ad23yz2Hia0XCo6Pk/mp5CAFy4QBtQedTSkhW05AdtSOEoajQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "0.1.0",
+        "@radix-ui/react-compose-refs": "0.1.0",
+        "@radix-ui/react-primitive": "0.1.4",
+        "@radix-ui/react-use-body-pointer-events": "0.1.1",
+        "@radix-ui/react-use-callback-ref": "0.1.0",
+        "@radix-ui/react-use-escape-keydown": "0.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0"
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-popper": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-0.1.4.tgz",
+      "integrity": "sha512-18gDYof97t8UQa7zwklG1Dr8jIdj3u+rVOQLzPi9f5i1YQak/pVGkaqw8aY+iDUknKKuZniTk/7jbAJUYlKyOw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/popper": "0.1.0",
+        "@radix-ui/react-arrow": "0.1.4",
+        "@radix-ui/react-compose-refs": "0.1.0",
+        "@radix-ui/react-context": "0.1.1",
+        "@radix-ui/react-primitive": "0.1.4",
+        "@radix-ui/react-use-rect": "0.1.1",
+        "@radix-ui/react-use-size": "0.1.1",
+        "@radix-ui/rect": "0.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0"
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-portal": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-0.1.4.tgz",
+      "integrity": "sha512-MO0wRy2eYRTZ/CyOri9NANCAtAtq89DEtg90gicaTlkCfdqCLEBsLb+/q66BZQTr3xX/Vq01nnVfc/TkCqoqvw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "0.1.4",
+        "@radix-ui/react-use-layout-effect": "0.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0",
+        "react-dom": "^16.8 || ^17.0"
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-presence": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-0.1.2.tgz",
+      "integrity": "sha512-3BRlFZraooIUfRlyN+b/Xs5hq1lanOOo/+3h6Pwu2GMFjkGKKa4Rd51fcqGqnVlbr3jYg+WLuGyAV4KlgqwrQw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "0.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-primitive": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-0.1.4.tgz",
+      "integrity": "sha512-6gSl2IidySupIMJFjYnDIkIWRyQdbu/AHK7rbICPani+LW4b0XdxBXc46og/iZvuwW8pjCS8I2SadIerv84xYA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "0.1.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0"
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-use-body-pointer-events": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-body-pointer-events/-/react-use-body-pointer-events-0.1.1.tgz",
+      "integrity": "sha512-R8leV2AWmJokTmERM8cMXFHWSiv/fzOLhG/JLmRBhLTAzOj37EQizssq4oW0Z29VcZy2tODMi9Pk/htxwb+xpA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "0.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0"
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card/node_modules/@radix-ui/react-use-size": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-0.1.1.tgz",
+      "integrity": "sha512-pTgWM5qKBu6C7kfKxrKPoBI2zZYZmp2cSXzpUiGM3qEBQlMLtYhaY2JXdXUCxz+XmD1YEjc8oRwvyfsD4AG4WA==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0"
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-0.1.4.tgz",
@@ -8614,20 +8724,107 @@
       }
     },
     "@radix-ui/react-hover-card": {
-      "version": "0.1.3",
+      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-0.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-0.1.5.tgz",
-      "integrity": "sha512-nHcH1Q4OaeontN4Elfc7MlYs4oHMLeE16JDu5SLA1Tch4US4K6s6Qri47dvIkNSsCeGVNggGBQAis70fZO1l8A==",
+      "integrity": "sha512-9eeBUZGalPbKL2dDZTbGUoAQR77PpL0IgQ27mKyj1tXnvhRcUPOSonM1KjqcCKOq2SS+G5gq7xhKHsf0v9XmTg==",
       "requires": {
         "@babel/runtime": "^7.13.10",
         "@radix-ui/primitive": "0.1.0",
         "@radix-ui/react-compose-refs": "0.1.0",
         "@radix-ui/react-context": "0.1.1",
-        "@radix-ui/react-dismissable-layer": "0.1.3",
+        "@radix-ui/react-dismissable-layer": "0.1.5",
-        "@radix-ui/react-popper": "0.1.3",
+        "@radix-ui/react-popper": "0.1.4",
-        "@radix-ui/react-portal": "0.1.3",
+        "@radix-ui/react-portal": "0.1.4",
-        "@radix-ui/react-presence": "0.1.1",
+        "@radix-ui/react-presence": "0.1.2",
-        "@radix-ui/react-primitive": "0.1.3",
+        "@radix-ui/react-primitive": "0.1.4",
         "@radix-ui/react-use-controllable-state": "0.1.0"
+      },
+      "dependencies": {
+        "@radix-ui/react-arrow": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-0.1.4.tgz",
+          "integrity": "sha512-BB6XzAb7Ml7+wwpFdYVtZpK1BlMgqyafSQNGzhIpSZ4uXvXOHPlR5GP8M449JkeQzgQjv9Mp1AsJxFC0KuOtuA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-primitive": "0.1.4"
+          }
+        },
+        "@radix-ui/react-dismissable-layer": {
+          "version": "0.1.5",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-0.1.5.tgz",
+          "integrity": "sha512-J+fYWijkX4M4QKwf9dtu1oC0U6e6CEl8WhBp3Ad23yz2Hia0XCo6Pk/mp5CAFy4QBtQedTSkhW05AdtSOEoajQ==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/primitive": "0.1.0",
+            "@radix-ui/react-compose-refs": "0.1.0",
+            "@radix-ui/react-primitive": "0.1.4",
+            "@radix-ui/react-use-body-pointer-events": "0.1.1",
+            "@radix-ui/react-use-callback-ref": "0.1.0",
+            "@radix-ui/react-use-escape-keydown": "0.1.0"
+          }
+        },
+        "@radix-ui/react-popper": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-0.1.4.tgz",
+          "integrity": "sha512-18gDYof97t8UQa7zwklG1Dr8jIdj3u+rVOQLzPi9f5i1YQak/pVGkaqw8aY+iDUknKKuZniTk/7jbAJUYlKyOw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/popper": "0.1.0",
+            "@radix-ui/react-arrow": "0.1.4",
+            "@radix-ui/react-compose-refs": "0.1.0",
+            "@radix-ui/react-context": "0.1.1",
+            "@radix-ui/react-primitive": "0.1.4",
+            "@radix-ui/react-use-rect": "0.1.1",
+            "@radix-ui/react-use-size": "0.1.1",
+            "@radix-ui/rect": "0.1.1"
+          }
+        },
+        "@radix-ui/react-portal": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-0.1.4.tgz",
+          "integrity": "sha512-MO0wRy2eYRTZ/CyOri9NANCAtAtq89DEtg90gicaTlkCfdqCLEBsLb+/q66BZQTr3xX/Vq01nnVfc/TkCqoqvw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-primitive": "0.1.4",
+            "@radix-ui/react-use-layout-effect": "0.1.0"
+          }
+        },
+        "@radix-ui/react-presence": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-0.1.2.tgz",
+          "integrity": "sha512-3BRlFZraooIUfRlyN+b/Xs5hq1lanOOo/+3h6Pwu2GMFjkGKKa4Rd51fcqGqnVlbr3jYg+WLuGyAV4KlgqwrQw==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-compose-refs": "0.1.0",
+            "@radix-ui/react-use-layout-effect": "0.1.0"
+          }
+        },
+        "@radix-ui/react-primitive": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-0.1.4.tgz",
+          "integrity": "sha512-6gSl2IidySupIMJFjYnDIkIWRyQdbu/AHK7rbICPani+LW4b0XdxBXc46og/iZvuwW8pjCS8I2SadIerv84xYA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-slot": "0.1.2"
+          }
+        },
+        "@radix-ui/react-use-body-pointer-events": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-body-pointer-events/-/react-use-body-pointer-events-0.1.1.tgz",
+          "integrity": "sha512-R8leV2AWmJokTmERM8cMXFHWSiv/fzOLhG/JLmRBhLTAzOj37EQizssq4oW0Z29VcZy2tODMi9Pk/htxwb+xpA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10",
+            "@radix-ui/react-use-layout-effect": "0.1.0"
+          }
+        },
+        "@radix-ui/react-use-size": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-0.1.1.tgz",
+          "integrity": "sha512-pTgWM5qKBu6C7kfKxrKPoBI2zZYZmp2cSXzpUiGM3qEBQlMLtYhaY2JXdXUCxz+XmD1YEjc8oRwvyfsD4AG4WA==",
+          "requires": {
+            "@babel/runtime": "^7.13.10"
+          }
+        }
       }
     },
     "@radix-ui/react-id": {

package.json

@@ -14,7 +14,7 @@
     "@radix-ui/react-alert-dialog": "^0.1.5",
     "@radix-ui/react-dialog": "^0.1.5",
     "@radix-ui/react-dropdown-menu": "^0.1.4",
-    "@radix-ui/react-hover-card": "^0.1.3",
+    "@radix-ui/react-hover-card": "^0.1.5",
     "@radix-ui/react-label": "^0.1.4",
     "@radix-ui/react-switch": "^0.1.4",
     "@radix-ui/react-toggle-group": "^0.1.5",

styles/globals.scss

@@ -175,6 +175,99 @@ select {
     }
 }
 
+.Hovercard {
+    background: #222;
+    border-radius: $unit;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    gap: $unit * 2;
+    padding: $unit * 2;
+    min-width: 300px;
+
+    .top {
+        display: flex;
+        flex-direction: column;
+        gap: $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-light;
+            }
+        
+            &.fire {
+                color: $fire-bg-light;
+            }
+        
+            &.water {
+                color: $water-bg-light;
+            }
+        
+            &.earth {
+                color: $earth-bg-light;
+            }
+        
+            &.dark {
+                color: $dark-bg-light;
+            }
+        
+        
+            &.light {
+                color: $light-bg-light;
+            }
+        }
+    }
+
+    a.Button {
+        display: block;
+        padding: $unit * 1.5;
+        text-align: center;
+    }
+}
+
 #Teams, #Profile {
     display: flex;
     height: 100%;