diff --git a/package-lock.json b/package-lock.json index 211ed8fb08..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": "^8.7.0", + "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": "https://registry.npmjs.org/dotaconstants/-/dotaconstants-8.7.0.tgz", - "integrity": "sha512-Vl/mm15VgfPC16OAh3qLc0UAUDMTs+mAIW5SE+pZ8TPYX6hmJLGHhxSNQhmoisjS5aQI6f1KcI9EDdJ0qbSkSw==" + "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,9 +17285,9 @@ "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": "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 1c0713a606..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": "^8.7.0", + "dotaconstants": "^8.8.0", "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/HeroFacet.jsx b/src/components/Visualizations/Table/HeroFacet.jsx new file mode 100644 index 0000000000..6cfb08c533 --- /dev/null +++ b/src/components/Visualizations/Table/HeroFacet.jsx @@ -0,0 +1,195 @@ +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: 10; + border-radius: 1px; + + & img { + position: static; + height: 12px; + width: 12px; + padding: 3px; + } + } + + .facetTooltip { + display: flex; + flex-direction: column; + z-index: 10; + 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; + + 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`; + 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 0a04fa2ee1..4eef95b04a 100644 --- a/src/components/Visualizations/Table/HeroImage.jsx +++ b/src/components/Visualizations/Table/HeroImage.jsx @@ -22,6 +22,7 @@ import AttrIntelligent from '../../Icons/AttrIntelligent'; import AttrAgility from '../../Icons/AttrAgility'; import AttrUniversal from '../../Icons/AttrUniversal'; import HeroImage from '../HeroImage'; +import HeroFacet from './HeroFacet'; // hero to use as background image in tooltip const backgroundMapping = { @@ -78,15 +79,13 @@ const Styled = styled.div` } .image { - margin-right: 7px; position: relative; height: 29px; box-shadow: 0 0 5px ${constants.defaultPrimaryColor}; } - + .abandoned { position: absolute; - right: 7px; bottom: 8px; height: 15px; @@ -187,7 +186,6 @@ const Styled = styled.div` width: 2px; height: 29px; position: absolute; - right: 7px; } .golden { @@ -261,7 +259,6 @@ const HeroToolTip = styled.div` width: 290px; overflow: hidden; background-color: #131519; - overflow: hidden; .header { height: 120px; @@ -456,6 +453,7 @@ class TableHeroImage extends React.Component { party, heroName, heroID, + facet, showGuide, guideUrl, guideType, @@ -476,7 +474,7 @@ class TableHeroImage extends React.Component { this.setTooltipVisibility(false); }, }; - + return ( @@ -498,6 +496,7 @@ class TableHeroImage extends React.Component { className="image" data-tip={hero.id === undefined && null} data-for={heroName} + style={{ marginRight: facet ? '12px': '7px' }} {...heroImageEventProps} /> ) : ( @@ -506,22 +505,25 @@ class TableHeroImage extends React.Component { className="image" data-tip={hero.id === undefined && null} data-for={heroName !== undefined && heroName} + style={{ marginRight: facet ? '12px': '7px' }} heroImageEventProps={heroImageEventProps} /> )} {leaverStatus !== undefined && leaverStatus > 1 && ( )} + {playerSlot !== undefined && (
)}