From de4ed43b41116d764470ee10924429b91147ca11 Mon Sep 17 00:00:00 2001 From: builder_247 <14019974+builder-247@users.noreply.github.com> Date: Thu, 30 May 2024 01:37:55 +0300 Subject: [PATCH 1/6] WIP - add facets --- package-lock.json | 11 +- package.json | 2 +- src/components/Match/matchColumns.jsx | 1 + .../Visualizations/Table/HeroImage.jsx | 131 +++++++++++++++++- 4 files changed, 135 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 211ed8fb08..a8df45135d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "ace-builds": "^1.4.7", "core-js": "^3.6.4", "dota2-emoticons": "^1.0.3", - "dotaconstants": "^8.7.0", + "dotaconstants": "github:odota/dotaconstants", "fuzzy": "^0.1.3", "heatmap.js": "github:muyao1987/heatmap.js", "history": "^4.10.1", @@ -5881,8 +5881,8 @@ }, "node_modules/dotaconstants": { "version": "8.7.0", - "resolved": "https://registry.npmjs.org/dotaconstants/-/dotaconstants-8.7.0.tgz", - "integrity": "sha512-Vl/mm15VgfPC16OAh3qLc0UAUDMTs+mAIW5SE+pZ8TPYX6hmJLGHhxSNQhmoisjS5aQI6f1KcI9EDdJ0qbSkSw==" + "resolved": "git+ssh://git@github.com/odota/dotaconstants.git#1d05c38da07e6593620306572ff0d52817e1ee6c", + "license": "MIT" }, "node_modules/ecdsa-sig-formatter": { "version": "1.0.11", @@ -17285,9 +17285,8 @@ "integrity": "sha512-arwwgkRRsbTnfkHJWCIkSijmd5BcVwNrBCU2I1QXN1bQ557+/Ikmgs9d6HZnA1QvIlkM6M79SdermOvg9Z01Hw==" }, "dotaconstants": { - "version": "8.7.0", - "resolved": "https://registry.npmjs.org/dotaconstants/-/dotaconstants-8.7.0.tgz", - "integrity": "sha512-Vl/mm15VgfPC16OAh3qLc0UAUDMTs+mAIW5SE+pZ8TPYX6hmJLGHhxSNQhmoisjS5aQI6f1KcI9EDdJ0qbSkSw==" + "version": "git+ssh://git@github.com/odota/dotaconstants.git#1d05c38da07e6593620306572ff0d52817e1ee6c", + "from": "dotaconstants@odota/dotaconstants" }, "ecdsa-sig-formatter": { "version": "1.0.11", diff --git a/package.json b/package.json index 1c0713a606..60fa439039 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "ace-builds": "^1.4.7", "core-js": "^3.6.4", "dota2-emoticons": "^1.0.3", - "dotaconstants": "^8.7.0", + "dotaconstants": "github:odota/dotaconstants", "fuzzy": "^0.1.3", "heatmap.js": "github:muyao1987/heatmap.js", "history": "^4.10.1", diff --git a/src/components/Match/matchColumns.jsx b/src/components/Match/matchColumns.jsx index 90c2677c71..05b7896149 100644 --- a/src/components/Match/matchColumns.jsx +++ b/src/components/Match/matchColumns.jsx @@ -87,6 +87,7 @@ export default (strings) => { : strings.general_no_hero } heroID={row.hero_id} + facet={row.hero_variant} showGuide={showGuide} guideType={guideType} guideUrl={ diff --git a/src/components/Visualizations/Table/HeroImage.jsx b/src/components/Visualizations/Table/HeroImage.jsx index 0a04fa2ee1..caa8dd76f3 100644 --- a/src/components/Visualizations/Table/HeroImage.jsx +++ b/src/components/Visualizations/Table/HeroImage.jsx @@ -5,6 +5,8 @@ import ReactTooltip from 'react-tooltip'; import { Tooltip } from '@material-ui/core'; import ActionDoneAll from 'material-ui/svg-icons/action/done-all'; import playerColors from 'dotaconstants/build/player_colors.json'; +import heroes from 'dotaconstants/build/heroes.json'; +import heroAbilities from 'dotaconstants/build/hero_abilities.json'; import SocialPerson from 'material-ui/svg-icons/social/person'; import NotificationSync from 'material-ui/svg-icons/notification/sync'; import styled from 'styled-components'; @@ -78,12 +80,121 @@ const Styled = styled.div` } .image { - margin-right: 7px; + margin-right: 9px; position: relative; height: 29px; box-shadow: 0 0 5px ${constants.defaultPrimaryColor}; } + .facet { + width: 18px; + height: 18px; + position: absolute; + bottom: -4px; + right: 3px; + z-index: 2; + border-radius: 1px; + + & img { + position: static; + height: 12px; + width: 12px; + padding: 3px; + } + } + + .color_Red_0 { + background: linear-gradient(to right, #9F3C3C, #4A2040); + } + + .color_Red_1 { + background: linear-gradient(to right, #954533, #452732); + } + + .color_Red_2 { + background: linear-gradient(to right, #A3735E, #4F2A25); + } + + .color_Yellow_0 { + background: linear-gradient(to right, #C8A45C, #6F3D21); + } + + .color_Yellow_1 { + background: linear-gradient(to right, #C6A158, #604928); + } + + .color_Yellow_2 { + background: linear-gradient(to right, #CAC194, #433828); + } + + .color_Yellow_3 { + background: linear-gradient(to right, #C3A99A, #4D352B); + } + + .color_Purple_0 { + background: linear-gradient(to right, #B57789, #412755); + } + + .color_Purple_1 { + background: linear-gradient(to right, #9C70A4, #282752); + } + + .color_Purple_2 { + background: linear-gradient(to right, #675CAE, #261C44); + } + + .color_Blue_0 { + background: linear-gradient(to right, #727CB2, #342D5B); + } + + .color_Blue_1 { + background: linear-gradient(to right, #547EA6, #2A385E); + } + + .color_Blue_2 { + background: linear-gradient(to right, #6BAEBC, #135459); + } + + .color_Blue_3 { + background: linear-gradient(to right, #94B5BA, #385B59); + } + + .color_Green_0 { + background: linear-gradient(to right, #A2B23E, #2D5A18); + } + + .color_Green_1 { + background: linear-gradient(to right, #7EC2B2, #29493A); + } + + .color_Green_2 { + background: linear-gradient(to right, #A2B23E, #2D5A18); + } + + .color_Green_3 { + background: linear-gradient(to right, #9A9F6A, #223824); + } + + .color_Green_4 { + background: linear-gradient(to right, #9FAD8E, #3F4129); + } + + .color_Gray_0 { + background: linear-gradient(to right, #565C61, #1B1B21); + } + + .color_Gray_1 { + background: linear-gradient(to right, #6A6D73, #29272C); + } + + .color_Gray_2 { + background: linear-gradient(to right, #95A9B1, #3E464F); + } + + .color_Gray_3 { + background: linear-gradient(to right, #ADB6BE, #4E5557); + } + .abandoned { position: absolute; right: 7px; @@ -456,6 +567,7 @@ class TableHeroImage extends React.Component { party, heroName, heroID, + facet = 2, // TODO - remove default showGuide, guideUrl, guideType, @@ -476,7 +588,13 @@ class TableHeroImage extends React.Component { this.setTooltipVisibility(false); }, }; - + + let selectedFacet; + + if (heroID && facet) { + selectedFacet = heroAbilities[heroes[heroID].name]?.facets[facet - 1]; + } + return ( @@ -518,9 +636,16 @@ class TableHeroImage extends React.Component { )} + { + (heroID && facet) &&
+ +
+ } {playerSlot !== undefined && (
)} From ff4c75b7bec2f1852cc4b83bcec458cc5873ced8 Mon Sep 17 00:00:00 2001 From: builder_247 <14019974+builder-247@users.noreply.github.com> Date: Thu, 30 May 2024 12:53:19 +0300 Subject: [PATCH 2/6] dynamic margin on hero image Increase margin if facet is displayed --- .../Visualizations/Table/HeroImage.jsx | 31 ++++++++++++------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/src/components/Visualizations/Table/HeroImage.jsx b/src/components/Visualizations/Table/HeroImage.jsx index caa8dd76f3..e413458513 100644 --- a/src/components/Visualizations/Table/HeroImage.jsx +++ b/src/components/Visualizations/Table/HeroImage.jsx @@ -24,6 +24,7 @@ import AttrIntelligent from '../../Icons/AttrIntelligent'; import AttrAgility from '../../Icons/AttrAgility'; import AttrUniversal from '../../Icons/AttrUniversal'; import HeroImage from '../HeroImage'; +import config from '../../../config'; // hero to use as background image in tooltip const backgroundMapping = { @@ -80,7 +81,12 @@ const Styled = styled.div` } .image { - margin-right: 9px; + &[data-facet="true"] { + margin-right: 12px; + } + &[data-facet="false"] { + margin-right: 7px; + } position: relative; height: 29px; box-shadow: 0 0 5px ${constants.defaultPrimaryColor}; @@ -91,7 +97,7 @@ const Styled = styled.div` height: 18px; position: absolute; bottom: -4px; - right: 3px; + right: 8px; z-index: 2; border-radius: 1px; @@ -298,7 +304,7 @@ const Styled = styled.div` width: 2px; height: 29px; position: absolute; - right: 7px; + right: 12px; } .golden { @@ -616,6 +622,7 @@ class TableHeroImage extends React.Component { className="image" data-tip={hero.id === undefined && null} data-for={heroName} + data-facet={facet !== undefined} {...heroImageEventProps} /> ) : ( @@ -624,6 +631,7 @@ class TableHeroImage extends React.Component { className="image" data-tip={hero.id === undefined && null} data-for={heroName !== undefined && heroName} + data-facet={facet !== undefined} heroImageEventProps={heroImageEventProps} /> )} @@ -636,16 +644,17 @@ class TableHeroImage extends React.Component { )} - { - (heroID && facet) &&
- -
- } + {(heroID && facet) && (
+ +
+ )} {playerSlot !== undefined && (
)} From 1b041a63a177f7e977e480036e3bbd5ab41e9959 Mon Sep 17 00:00:00 2001 From: builder_247 <14019974+builder-247@users.noreply.github.com> Date: Thu, 30 May 2024 13:06:28 +0300 Subject: [PATCH 3/6] use direct styling for dynamic margin Also change playerSlot location dynamically --- src/components/Visualizations/Table/HeroImage.jsx | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/src/components/Visualizations/Table/HeroImage.jsx b/src/components/Visualizations/Table/HeroImage.jsx index e413458513..ee8f21ad55 100644 --- a/src/components/Visualizations/Table/HeroImage.jsx +++ b/src/components/Visualizations/Table/HeroImage.jsx @@ -81,12 +81,6 @@ const Styled = styled.div` } .image { - &[data-facet="true"] { - margin-right: 12px; - } - &[data-facet="false"] { - margin-right: 7px; - } position: relative; height: 29px; box-shadow: 0 0 5px ${constants.defaultPrimaryColor}; @@ -304,7 +298,6 @@ const Styled = styled.div` width: 2px; height: 29px; position: absolute; - right: 12px; } .golden { @@ -622,7 +615,7 @@ class TableHeroImage extends React.Component { className="image" data-tip={hero.id === undefined && null} data-for={heroName} - data-facet={facet !== undefined} + style={{ marginRight: facet ? '12px': '7px' }} {...heroImageEventProps} /> ) : ( @@ -631,7 +624,7 @@ class TableHeroImage extends React.Component { className="image" data-tip={hero.id === undefined && null} data-for={heroName !== undefined && heroName} - data-facet={facet !== undefined} + style={{ marginRight: facet ? '12px': '7px' }} heroImageEventProps={heroImageEventProps} /> )} @@ -655,7 +648,7 @@ class TableHeroImage extends React.Component { {playerSlot !== undefined && (
)}
From 53962f34eb849f022fe3cb72f0371eae35026111 Mon Sep 17 00:00:00 2001 From: builder_247 <14019974+builder-247@users.noreply.github.com> Date: Fri, 31 May 2024 14:06:31 +0300 Subject: [PATCH 4/6] Add facet tooltips --- package-lock.json | 8 +- package.json | 2 +- .../Visualizations/Table/HeroFacet.jsx | 201 ++++++++++++++++++ .../Visualizations/Table/HeroImage.jsx | 129 +---------- 4 files changed, 208 insertions(+), 132 deletions(-) create mode 100644 src/components/Visualizations/Table/HeroFacet.jsx diff --git a/package-lock.json b/package-lock.json index a8df45135d..cf6c7e3d1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "ace-builds": "^1.4.7", "core-js": "^3.6.4", "dota2-emoticons": "^1.0.3", - "dotaconstants": "github:odota/dotaconstants", + "dotaconstants": "github:builder-247/dotaconstants#facets", "fuzzy": "^0.1.3", "heatmap.js": "github:muyao1987/heatmap.js", "history": "^4.10.1", @@ -5881,7 +5881,7 @@ }, "node_modules/dotaconstants": { "version": "8.7.0", - "resolved": "git+ssh://git@github.com/odota/dotaconstants.git#1d05c38da07e6593620306572ff0d52817e1ee6c", + "resolved": "git+ssh://git@github.com/builder-247/dotaconstants.git#e9e5329896f3b8429583423bbc637dfccf296587", "license": "MIT" }, "node_modules/ecdsa-sig-formatter": { @@ -17285,8 +17285,8 @@ "integrity": "sha512-arwwgkRRsbTnfkHJWCIkSijmd5BcVwNrBCU2I1QXN1bQ557+/Ikmgs9d6HZnA1QvIlkM6M79SdermOvg9Z01Hw==" }, "dotaconstants": { - "version": "git+ssh://git@github.com/odota/dotaconstants.git#1d05c38da07e6593620306572ff0d52817e1ee6c", - "from": "dotaconstants@odota/dotaconstants" + "version": "git+ssh://git@github.com/builder-247/dotaconstants.git#e9e5329896f3b8429583423bbc637dfccf296587", + "from": "dotaconstants@builder-247/dotaconstants#facets" }, "ecdsa-sig-formatter": { "version": "1.0.11", diff --git a/package.json b/package.json index 60fa439039..d2ef21b361 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "ace-builds": "^1.4.7", "core-js": "^3.6.4", "dota2-emoticons": "^1.0.3", - "dotaconstants": "github:odota/dotaconstants", + "dotaconstants": "github:builder-247/dotaconstants#facets", "fuzzy": "^0.1.3", "heatmap.js": "github:muyao1987/heatmap.js", "history": "^4.10.1", diff --git a/src/components/Visualizations/Table/HeroFacet.jsx b/src/components/Visualizations/Table/HeroFacet.jsx new file mode 100644 index 0000000000..285d9aa2a0 --- /dev/null +++ b/src/components/Visualizations/Table/HeroFacet.jsx @@ -0,0 +1,201 @@ +import React from 'react'; +import ReactTooltip from 'react-tooltip'; +import styled from 'styled-components'; +import heroes from 'dotaconstants/build/heroes.json'; +import heroAbilities from 'dotaconstants/build/hero_abilities.json'; +import config from '../../../config'; + +const Facet = styled.div` + .facet { + width: 18px; + height: 18px; + position: absolute; + bottom: -4px; + right: 8px; + z-index: 2; + border-radius: 1px; + + & img { + position: static; + height: 12px; + width: 12px; + padding: 3px; + } + } + + .facetTooltip { + display: flex; + flex-direction: column; + max-width: 400px; + + & .facetHeader { + display: flex; + flex-direction: row; + font-size: x-large; + text-align: center; + max-height: 68px; + & span { + padding: 15px; + } + } + + & .description { + padding: 15px; + background-color: #10171D; + } + + & img { + width: 42px; + height: 42px; + } + } + + .color_Red_0 { + background: linear-gradient(to right, #9F3C3C, #4A2040); + } + + .color_Red_1 { + background: linear-gradient(to right, #954533, #452732); + } + + .color_Red_2 { + background: linear-gradient(to right, #A3735E, #4F2A25); + } + + .color_Yellow_0 { + background: linear-gradient(to right, #C8A45C, #6F3D21); + } + + .color_Yellow_1 { + background: linear-gradient(to right, #C6A158, #604928); + } + + .color_Yellow_2 { + background: linear-gradient(to right, #CAC194, #433828); + } + + .color_Yellow_3 { + background: linear-gradient(to right, #C3A99A, #4D352B); + } + + .color_Purple_0 { + background: linear-gradient(to right, #B57789, #412755); + } + + .color_Purple_1 { + background: linear-gradient(to right, #9C70A4, #282752); + } + + .color_Purple_2 { + background: linear-gradient(to right, #675CAE, #261C44); + } + + .color_Blue_0 { + background: linear-gradient(to right, #727CB2, #342D5B); + } + + .color_Blue_1 { + background: linear-gradient(to right, #547EA6, #2A385E); + } + + .color_Blue_2 { + background: linear-gradient(to right, #6BAEBC, #135459); + } + + .color_Blue_3 { + background: linear-gradient(to right, #94B5BA, #385B59); + } + + .color_Green_0 { + background: linear-gradient(to right, #A2B23E, #2D5A18); + } + + .color_Green_1 { + background: linear-gradient(to right, #7EC2B2, #29493A); + } + + .color_Green_2 { + background: linear-gradient(to right, #A2B23E, #2D5A18); + } + + .color_Green_3 { + background: linear-gradient(to right, #9A9F6A, #223824); + } + + .color_Green_4 { + background: linear-gradient(to right, #9FAD8E, #3F4129); + } + + .color_Gray_0 { + background: linear-gradient(to right, #565C61, #1B1B21); + } + + .color_Gray_1 { + background: linear-gradient(to right, #6A6D73, #29272C); + } + + .color_Gray_2 { + background: linear-gradient(to right, #95A9B1, #3E464F); + } + + .color_Gray_3 { + background: linear-gradient(to right, #ADB6BE, #4E5557); + } +`; + +class HeroFacet extends React.Component { + render() { + const { + heroID, + facet + } = this.props; + + let selectedFacet = {}; + + if (heroID && facet) { + selectedFacet = heroAbilities[heroes[heroID].name]?.facets[facet - 1]; + } + + const { color, gradient_id, icon, name } = selectedFacet; + + const imageURL = `${config.VITE_IMAGE_CDN}/apps/dota2/images/dota_react/icons/facets/${icon}.png`; + const colorClass = `color_${color}_${gradient_id}`; + + return ( + +
+ +
+ +
+
+
+ +
+ {selectedFacet.title} +
+
+ {selectedFacet.description} +
+
+ +
+
+ + ); + } +} + +export default HeroFacet; diff --git a/src/components/Visualizations/Table/HeroImage.jsx b/src/components/Visualizations/Table/HeroImage.jsx index ee8f21ad55..2fb9742ccc 100644 --- a/src/components/Visualizations/Table/HeroImage.jsx +++ b/src/components/Visualizations/Table/HeroImage.jsx @@ -5,8 +5,6 @@ import ReactTooltip from 'react-tooltip'; import { Tooltip } from '@material-ui/core'; import ActionDoneAll from 'material-ui/svg-icons/action/done-all'; import playerColors from 'dotaconstants/build/player_colors.json'; -import heroes from 'dotaconstants/build/heroes.json'; -import heroAbilities from 'dotaconstants/build/hero_abilities.json'; import SocialPerson from 'material-ui/svg-icons/social/person'; import NotificationSync from 'material-ui/svg-icons/notification/sync'; import styled from 'styled-components'; @@ -24,7 +22,7 @@ import AttrIntelligent from '../../Icons/AttrIntelligent'; import AttrAgility from '../../Icons/AttrAgility'; import AttrUniversal from '../../Icons/AttrUniversal'; import HeroImage from '../HeroImage'; -import config from '../../../config'; +import HeroFacet from './HeroFacet'; // hero to use as background image in tooltip const backgroundMapping = { @@ -85,115 +83,6 @@ const Styled = styled.div` height: 29px; box-shadow: 0 0 5px ${constants.defaultPrimaryColor}; } - - .facet { - width: 18px; - height: 18px; - position: absolute; - bottom: -4px; - right: 8px; - z-index: 2; - border-radius: 1px; - - & img { - position: static; - height: 12px; - width: 12px; - padding: 3px; - } - } - - .color_Red_0 { - background: linear-gradient(to right, #9F3C3C, #4A2040); - } - - .color_Red_1 { - background: linear-gradient(to right, #954533, #452732); - } - - .color_Red_2 { - background: linear-gradient(to right, #A3735E, #4F2A25); - } - - .color_Yellow_0 { - background: linear-gradient(to right, #C8A45C, #6F3D21); - } - - .color_Yellow_1 { - background: linear-gradient(to right, #C6A158, #604928); - } - - .color_Yellow_2 { - background: linear-gradient(to right, #CAC194, #433828); - } - - .color_Yellow_3 { - background: linear-gradient(to right, #C3A99A, #4D352B); - } - - .color_Purple_0 { - background: linear-gradient(to right, #B57789, #412755); - } - - .color_Purple_1 { - background: linear-gradient(to right, #9C70A4, #282752); - } - - .color_Purple_2 { - background: linear-gradient(to right, #675CAE, #261C44); - } - - .color_Blue_0 { - background: linear-gradient(to right, #727CB2, #342D5B); - } - - .color_Blue_1 { - background: linear-gradient(to right, #547EA6, #2A385E); - } - - .color_Blue_2 { - background: linear-gradient(to right, #6BAEBC, #135459); - } - - .color_Blue_3 { - background: linear-gradient(to right, #94B5BA, #385B59); - } - - .color_Green_0 { - background: linear-gradient(to right, #A2B23E, #2D5A18); - } - - .color_Green_1 { - background: linear-gradient(to right, #7EC2B2, #29493A); - } - - .color_Green_2 { - background: linear-gradient(to right, #A2B23E, #2D5A18); - } - - .color_Green_3 { - background: linear-gradient(to right, #9A9F6A, #223824); - } - - .color_Green_4 { - background: linear-gradient(to right, #9FAD8E, #3F4129); - } - - .color_Gray_0 { - background: linear-gradient(to right, #565C61, #1B1B21); - } - - .color_Gray_1 { - background: linear-gradient(to right, #6A6D73, #29272C); - } - - .color_Gray_2 { - background: linear-gradient(to right, #95A9B1, #3E464F); - } - - .color_Gray_3 { - background: linear-gradient(to right, #ADB6BE, #4E5557); - } .abandoned { position: absolute; @@ -371,7 +260,6 @@ const HeroToolTip = styled.div` width: 290px; overflow: hidden; background-color: #131519; - overflow: hidden; .header { height: 120px; @@ -588,12 +476,6 @@ class TableHeroImage extends React.Component { }, }; - let selectedFacet; - - if (heroID && facet) { - selectedFacet = heroAbilities[heroes[heroID].name]?.facets[facet - 1]; - } - return ( @@ -637,14 +519,7 @@ class TableHeroImage extends React.Component { )} - {(heroID && facet) && (
- -
- )} + {(heroID && facet) && } {playerSlot !== undefined && (
Date: Sat, 1 Jun 2024 22:06:40 +0300 Subject: [PATCH 5/6] minor fixes --- package-lock.json | 4 ++-- .../Visualizations/Table/HeroFacet.jsx | 18 ++++++------------ .../Visualizations/Table/HeroImage.jsx | 6 +++--- 3 files changed, 11 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index cf6c7e3d1e..232fe70262 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5881,7 +5881,7 @@ }, "node_modules/dotaconstants": { "version": "8.7.0", - "resolved": "git+ssh://git@github.com/builder-247/dotaconstants.git#e9e5329896f3b8429583423bbc637dfccf296587", + "resolved": "git+ssh://git@github.com/builder-247/dotaconstants.git#8ea494017c5e43c96a7c296ba9aa419a02e402f3", "license": "MIT" }, "node_modules/ecdsa-sig-formatter": { @@ -17285,7 +17285,7 @@ "integrity": "sha512-arwwgkRRsbTnfkHJWCIkSijmd5BcVwNrBCU2I1QXN1bQ557+/Ikmgs9d6HZnA1QvIlkM6M79SdermOvg9Z01Hw==" }, "dotaconstants": { - "version": "git+ssh://git@github.com/builder-247/dotaconstants.git#e9e5329896f3b8429583423bbc637dfccf296587", + "version": "git+ssh://git@github.com/builder-247/dotaconstants.git#8ea494017c5e43c96a7c296ba9aa419a02e402f3", "from": "dotaconstants@builder-247/dotaconstants#facets" }, "ecdsa-sig-formatter": { diff --git a/src/components/Visualizations/Table/HeroFacet.jsx b/src/components/Visualizations/Table/HeroFacet.jsx index 285d9aa2a0..6cfb08c533 100644 --- a/src/components/Visualizations/Table/HeroFacet.jsx +++ b/src/components/Visualizations/Table/HeroFacet.jsx @@ -12,7 +12,7 @@ const Facet = styled.div` position: absolute; bottom: -4px; right: 8px; - z-index: 2; + z-index: 10; border-radius: 1px; & img { @@ -26,6 +26,7 @@ const Facet = styled.div` .facetTooltip { display: flex; flex-direction: column; + z-index: 10; max-width: 400px; & .facetHeader { @@ -150,12 +151,9 @@ class HeroFacet extends React.Component { facet } = this.props; - let selectedFacet = {}; - - if (heroID && facet) { - selectedFacet = heroAbilities[heroes[heroID].name]?.facets[facet - 1]; - } + if (!(heroID && facet)) return null; + const selectedFacet = heroAbilities[heroes[heroID].name]?.facets[facet - 1]; const { color, gradient_id, icon, name } = selectedFacet; const imageURL = `${config.VITE_IMAGE_CDN}/apps/dota2/images/dota_react/icons/facets/${icon}.png`; @@ -164,13 +162,9 @@ class HeroFacet extends React.Component { return (
- +
- +
1 && ( )} - {(heroID && facet) && } + {playerSlot !== undefined && (
Date: Sun, 2 Jun 2024 11:01:54 +0300 Subject: [PATCH 6/6] bump dc --- package-lock.json | 13 +++++++------ package.json | 2 +- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 232fe70262..3029b67108 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "ace-builds": "^1.4.7", "core-js": "^3.6.4", "dota2-emoticons": "^1.0.3", - "dotaconstants": "github:builder-247/dotaconstants#facets", + "dotaconstants": "^8.8.0", "fuzzy": "^0.1.3", "heatmap.js": "github:muyao1987/heatmap.js", "history": "^4.10.1", @@ -5880,9 +5880,9 @@ "integrity": "sha512-arwwgkRRsbTnfkHJWCIkSijmd5BcVwNrBCU2I1QXN1bQ557+/Ikmgs9d6HZnA1QvIlkM6M79SdermOvg9Z01Hw==" }, "node_modules/dotaconstants": { - "version": "8.7.0", - "resolved": "git+ssh://git@github.com/builder-247/dotaconstants.git#8ea494017c5e43c96a7c296ba9aa419a02e402f3", - "license": "MIT" + "version": "8.8.0", + "resolved": "https://registry.npmjs.org/dotaconstants/-/dotaconstants-8.8.0.tgz", + "integrity": "sha512-S+jMGAITrb6kN3RNdjGJRwWjnTDdPGhx8MppGOP2nTd02OCgiChljG8ULCqP8zwBzBWWPI0PWTXY31a2ImXKSw==" }, "node_modules/ecdsa-sig-formatter": { "version": "1.0.11", @@ -17285,8 +17285,9 @@ "integrity": "sha512-arwwgkRRsbTnfkHJWCIkSijmd5BcVwNrBCU2I1QXN1bQ557+/Ikmgs9d6HZnA1QvIlkM6M79SdermOvg9Z01Hw==" }, "dotaconstants": { - "version": "git+ssh://git@github.com/builder-247/dotaconstants.git#8ea494017c5e43c96a7c296ba9aa419a02e402f3", - "from": "dotaconstants@builder-247/dotaconstants#facets" + "version": "8.8.0", + "resolved": "https://registry.npmjs.org/dotaconstants/-/dotaconstants-8.8.0.tgz", + "integrity": "sha512-S+jMGAITrb6kN3RNdjGJRwWjnTDdPGhx8MppGOP2nTd02OCgiChljG8ULCqP8zwBzBWWPI0PWTXY31a2ImXKSw==" }, "ecdsa-sig-formatter": { "version": "1.0.11", diff --git a/package.json b/package.json index d2ef21b361..baba9ec768 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "ace-builds": "^1.4.7", "core-js": "^3.6.4", "dota2-emoticons": "^1.0.3", - "dotaconstants": "github:builder-247/dotaconstants#facets", + "dotaconstants": "^8.8.0", "fuzzy": "^0.1.3", "heatmap.js": "github:muyao1987/heatmap.js", "history": "^4.10.1",