diff --git a/components/BottomHeader/index.tsx b/components/BottomHeader/index.tsx index b57243c8..683e85b0 100644 --- a/components/BottomHeader/index.tsx +++ b/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 () + return () } else { - return () + return () } } else { return (
) diff --git a/components/Button/index.scss b/components/Button/index.scss index 4f363ce5..9c60cd60 100644 --- a/components/Button/index.scss +++ b/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; diff --git a/components/Button/index.tsx b/components/Button/index.tsx index 4d670555..3476e473 100644 --- a/components/Button/index.tsx +++ b/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 - disabled: boolean - icon: string | null - type: ButtonType - click: any + active?: boolean + disabled?: boolean + classes?: string[], + icon?: string + type?: ButtonType + children?: React.ReactNode + onClick?: (event: React.MouseEvent) => void } -interface State { - isPressed: boolean -} +const Button = (props: Props) => { + // 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 { - static defaultProps: Props = { - active: false, - disabled: false, - icon: null, - type: ButtonType.Base, - click: () => {} - } + const classes = classNames({ + Button: true, + 'Active': active, + 'btn-pressed': pressed, + 'btn-disabled': disabled, + 'save': props.icon === 'save', + 'destructive': props.type == ButtonType.Destructive + }, props.classes) - constructor(props: Props) { - super(props) - this.state = { - isPressed: false, - } - } + useEffect(() => { + if (props.active) setActive(props.active) + if (props.disabled) setDisabled(props.disabled) + if (props.type) setButtonType(props.type) + }, [props.active, props.disabled, props.type]) - render() { - let icon - if (this.props.icon === 'new') { - icon = - - - } else if (this.props.icon === 'menu') { - icon = - - - } else if (this.props.icon === 'link') { - icon = - - - } else if (this.props.icon === 'cross') { - icon = - - - } else if (this.props.icon === 'edit') { - icon = - - - } else if (this.props.icon === 'save') { - icon = - - - } else if (this.props.icon === 'settings') { - icon = - - + const addIcon = ( + + + + ) + + const menuIcon = ( + + + + ) + + const linkIcon = ( + + + + ) + + const crossIcon = ( + + + + ) + + const editIcon = ( + + + + ) + + const saveIcon = ( + + + + ) + + const settingsIcon = ( + + + + ) + + 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({ - 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 icon + } - return - } + ) } export default Button \ No newline at end of file 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/GridRep/index.tsx b/components/GridRep/index.tsx index 9aa1df52..8268104f 100644 --- a/components/GridRep/index.tsx +++ b/components/GridRep/index.tsx @@ -115,7 +115,7 @@ const GridRep = (props: Props) => { active={props.favorited} icon="save" type={ButtonType.IconOnly} - click={sendSaveData} + onClick={sendSaveData} /> : ''}
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/TopHeader/index.tsx b/components/TopHeader/index.tsx index eed02d45..b54c9433 100644 --- a/components/TopHeader/index.tsx +++ b/components/TopHeader/index.tsx @@ -107,9 +107,9 @@ const TopHeader = () => { const saveButton = () => { if (party.favorited) - return () + return () else - return () + return () } const rightNav = () => { @@ -119,9 +119,9 @@ const TopHeader = () => { saveButton() : '' } { (router.route === '/p/[party]') ? - : '' + : '' } - +
) } diff --git a/components/WeaponHovercard/index.scss b/components/WeaponHovercard/index.scss new file mode 100644 index 00000000..4e540a09 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/components/WeaponHovercard/index.tsx b/components/WeaponHovercard/index.tsx new file mode 100644 index 00000000..07582b32 --- /dev/null +++ b/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 = ( +
+ { (WeaponKeyNames[props.gridWeapon.object.series]) ? +
{ WeaponKeyNames[props.gridWeapon.object.series].en }s
: '' + } + + { (props.gridWeapon.weapon_keys) ? + Array.from(Array(props.gridWeapon.weapon_keys.length)).map((x, i) => { + return ( +
+ {props.gridWeapon.weapon_keys![i].name.en} +
+ ) + }) : '' } +
+ ) + + const axSection = ( +
+
AX Skills
+
+
+ + {createPrimaryAxSkillString()} +
+ + { (props.gridWeapon.ax && props.gridWeapon.ax[1].modifier && props.gridWeapon.ax[1].strength) ? +
+ + {createSecondaryAxSkillString()} +
: ''} +
+
+ ) + + return ( + + + { props.children } + + +
+
+

{ props.gridWeapon.object.name.en }

+ {props.gridWeapon.object.name.en} +
+
+
+ { (props.gridWeapon.object.element !== 0 || (props.gridWeapon.object.element === 0 && props.gridWeapon.element != null)) ? + + : '' } + +
+ +
+
+ + { (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 : '' } + View more on gbf.wiki + + + + ) +} + +export default WeaponHovercard + diff --git a/components/WeaponModal/index.tsx b/components/WeaponModal/index.tsx index 6241e935..2feda738 100644 --- a/components/WeaponModal/index.tsx +++ b/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 diff --git a/components/WeaponUnit/index.tsx b/components/WeaponUnit/index.tsx index 21df410e..67a8f7a8 100644 --- a/components/WeaponUnit/index.tsx +++ b/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 = ( -
- - {image} - + + {image} + + ) + + const unitContent = ( +
+ { (props.editable && gridWeapon && canBeModified(gridWeapon)) ? + +
+
+ : '' } + { (props.editable) ? editableImage : image } + { (gridWeapon) ? + : '' + } +

{weapon?.name.en}

) + const withHovercard = ( + + {unitContent} + + ) + return ( -
-
- { (props.editable && gridWeapon && canBeModified(gridWeapon)) ? - -
-
- : '' } - { (props.editable) ? editableImage : image } - { (gridWeapon) ? - : '' - } -

{weapon?.name.en}

-
+
+ { (gridWeapon) ? withHovercard : unitContent }
) } diff --git a/package-lock.json b/package-lock.json index 025a9370..9a3fbcb3 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-0.1.3.tgz", - "integrity": "sha512-nHcH1Q4OaeontN4Elfc7MlYs4oHMLeE16JDu5SLA1Tch4US4K6s6Qri47dvIkNSsCeGVNggGBQAis70fZO1l8A==", + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-0.1.5.tgz", + "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-popper": "0.1.3", - "@radix-ui/react-portal": "0.1.3", - "@radix-ui/react-presence": "0.1.1", - "@radix-ui/react-primitive": "0.1.3", + "@radix-ui/react-dismissable-layer": "0.1.5", + "@radix-ui/react-popper": "0.1.4", + "@radix-ui/react-portal": "0.1.4", + "@radix-ui/react-presence": "0.1.2", + "@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", - "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-0.1.3.tgz", - "integrity": "sha512-nHcH1Q4OaeontN4Elfc7MlYs4oHMLeE16JDu5SLA1Tch4US4K6s6Qri47dvIkNSsCeGVNggGBQAis70fZO1l8A==", + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-0.1.5.tgz", + "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-popper": "0.1.3", - "@radix-ui/react-portal": "0.1.3", - "@radix-ui/react-presence": "0.1.1", - "@radix-ui/react-primitive": "0.1.3", + "@radix-ui/react-dismissable-layer": "0.1.5", + "@radix-ui/react-popper": "0.1.4", + "@radix-ui/react-portal": "0.1.4", + "@radix-ui/react-presence": "0.1.2", + "@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": { diff --git a/package.json b/package.json index c800aaa3..5114fe26 100644 --- a/package.json +++ b/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", diff --git a/public/icons/ax/primary_0.png b/public/icons/ax/primary_0.png new file mode 100644 index 00000000..34e0867d Binary files /dev/null and b/public/icons/ax/primary_0.png differ diff --git a/public/icons/ax/primary_1.png b/public/icons/ax/primary_1.png new file mode 100644 index 00000000..44baf1e7 Binary files /dev/null and b/public/icons/ax/primary_1.png differ diff --git a/public/icons/ax/primary_2.png b/public/icons/ax/primary_2.png new file mode 100644 index 00000000..8398271a Binary files /dev/null and b/public/icons/ax/primary_2.png differ diff --git a/public/icons/ax/primary_3.png b/public/icons/ax/primary_3.png new file mode 100644 index 00000000..41513f86 Binary files /dev/null and b/public/icons/ax/primary_3.png differ diff --git a/public/icons/ax/primary_4.png b/public/icons/ax/primary_4.png new file mode 100644 index 00000000..97c220f3 Binary files /dev/null and b/public/icons/ax/primary_4.png differ diff --git a/public/icons/ax/secondary_0.png b/public/icons/ax/secondary_0.png new file mode 100644 index 00000000..3b6f3b9d Binary files /dev/null and b/public/icons/ax/secondary_0.png differ diff --git a/public/icons/ax/secondary_1.png b/public/icons/ax/secondary_1.png new file mode 100644 index 00000000..7883c1b4 Binary files /dev/null and b/public/icons/ax/secondary_1.png differ diff --git a/public/icons/ax/secondary_10.png b/public/icons/ax/secondary_10.png new file mode 100644 index 00000000..2f162a4b Binary files /dev/null and b/public/icons/ax/secondary_10.png differ diff --git a/public/icons/ax/secondary_11.png b/public/icons/ax/secondary_11.png new file mode 100644 index 00000000..cf2f9213 Binary files /dev/null and b/public/icons/ax/secondary_11.png differ diff --git a/public/icons/ax/secondary_12.png b/public/icons/ax/secondary_12.png new file mode 100644 index 00000000..519256b4 Binary files /dev/null and b/public/icons/ax/secondary_12.png differ diff --git a/public/icons/ax/secondary_13.png b/public/icons/ax/secondary_13.png new file mode 100644 index 00000000..cdb41676 Binary files /dev/null and b/public/icons/ax/secondary_13.png differ diff --git a/public/icons/ax/secondary_14.png b/public/icons/ax/secondary_14.png new file mode 100644 index 00000000..ea37d0af Binary files /dev/null and b/public/icons/ax/secondary_14.png differ diff --git a/public/icons/ax/secondary_15.png b/public/icons/ax/secondary_15.png new file mode 100644 index 00000000..a2537b11 Binary files /dev/null and b/public/icons/ax/secondary_15.png differ diff --git a/public/icons/ax/secondary_16.png b/public/icons/ax/secondary_16.png new file mode 100644 index 00000000..4e7fdb0b Binary files /dev/null and b/public/icons/ax/secondary_16.png differ diff --git a/public/icons/ax/secondary_17.png b/public/icons/ax/secondary_17.png new file mode 100644 index 00000000..e53d4acd Binary files /dev/null and b/public/icons/ax/secondary_17.png differ diff --git a/public/icons/ax/secondary_18.png b/public/icons/ax/secondary_18.png new file mode 100644 index 00000000..57bfdcd6 Binary files /dev/null and b/public/icons/ax/secondary_18.png differ diff --git a/public/icons/ax/secondary_19.png b/public/icons/ax/secondary_19.png new file mode 100644 index 00000000..5d58693a Binary files /dev/null and b/public/icons/ax/secondary_19.png differ diff --git a/public/icons/ax/secondary_2.png b/public/icons/ax/secondary_2.png new file mode 100644 index 00000000..7215fe56 Binary files /dev/null and b/public/icons/ax/secondary_2.png differ diff --git a/public/icons/ax/secondary_3.png b/public/icons/ax/secondary_3.png new file mode 100644 index 00000000..aaf76be0 Binary files /dev/null and b/public/icons/ax/secondary_3.png differ diff --git a/public/icons/ax/secondary_4.png b/public/icons/ax/secondary_4.png new file mode 100644 index 00000000..53425a15 Binary files /dev/null and b/public/icons/ax/secondary_4.png differ diff --git a/public/icons/ax/secondary_5.png b/public/icons/ax/secondary_5.png new file mode 100644 index 00000000..639e7235 Binary files /dev/null and b/public/icons/ax/secondary_5.png differ diff --git a/public/icons/ax/secondary_6.png b/public/icons/ax/secondary_6.png new file mode 100644 index 00000000..53425a15 Binary files /dev/null and b/public/icons/ax/secondary_6.png differ diff --git a/public/icons/ax/secondary_7.png b/public/icons/ax/secondary_7.png new file mode 100644 index 00000000..af453763 Binary files /dev/null and b/public/icons/ax/secondary_7.png differ diff --git a/public/icons/ax/secondary_8.png b/public/icons/ax/secondary_8.png new file mode 100644 index 00000000..b5943f01 Binary files /dev/null and b/public/icons/ax/secondary_8.png differ diff --git a/public/icons/ax/secondary_9.png b/public/icons/ax/secondary_9.png new file mode 100644 index 00000000..87cfd606 Binary files /dev/null and b/public/icons/ax/secondary_9.png differ diff --git a/styles/globals.scss b/styles/globals.scss index 4f26f3f7..46393f74 100644 --- a/styles/globals.scss +++ b/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%;