Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add facets #3178

Merged
merged 6 commits into from
Jun 2, 2024
Merged

Add facets #3178

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
de4ed43
WIP - add facets
builder-247 May 29, 2024
ff4c75b
dynamic margin on hero image
builder-247 May 30, 2024
1b041a6
use direct styling for dynamic margin
builder-247 May 30, 2024
53962f3
Add facet tooltips
builder-247 May 31, 2024
259ebd0
minor fixes
builder-247 Jun 1, 2024
4b19f38
bump dc
builder-247 Jun 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:builder-247/dotaconstants#facets",
builder-247 marked this conversation as resolved.
Show resolved Hide resolved
"fuzzy": "^0.1.3",
"heatmap.js": "github:muyao1987/heatmap.js",
"history": "^4.10.1",
Expand Down
1 change: 1 addition & 0 deletions src/components/Match/matchColumns.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ export default (strings) => {
: strings.general_no_hero
}
heroID={row.hero_id}
facet={row.hero_variant}
showGuide={showGuide}
guideType={guideType}
guideUrl={
Expand Down
195 changes: 195 additions & 0 deletions src/components/Visualizations/Table/HeroFacet.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Facet>
<div className={`facet ${colorClass}`} data-tip data-for={name}>
<img src={imageURL} alt="" />
<div className='hero-tooltip'>
<ReactTooltip id={name} effect='solid' place='right'>
<div
className={`facetTooltip ${colorClass}`}
style={{
height: '100%',
width: '100%'
}}>
<div className='facetHeader'>
<div style={{
padding: '10px',
background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1))'
}}>
<img src={imageURL} alt="" />
</div>
<span>{selectedFacet.title}</span>
</div>
<div className="description">
<span>{selectedFacet.description}</span>
</div>
</div>
</ReactTooltip>
</div>
</div>
</Facet>
);
}
}

export default HeroFacet;
16 changes: 9 additions & 7 deletions src/components/Visualizations/Table/HeroImage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -187,7 +186,6 @@ const Styled = styled.div`
width: 2px;
height: 29px;
position: absolute;
right: 7px;
}

.golden {
Expand Down Expand Up @@ -261,7 +259,6 @@ const HeroToolTip = styled.div`
width: 290px;
overflow: hidden;
background-color: #131519;
overflow: hidden;

.header {
height: 120px;
Expand Down Expand Up @@ -456,6 +453,7 @@ class TableHeroImage extends React.Component {
party,
heroName,
heroID,
facet,
showGuide,
guideUrl,
guideType,
Expand All @@ -476,7 +474,7 @@ class TableHeroImage extends React.Component {
this.setTooltipVisibility(false);
},
};

return (
<Styled style={expand}>
<HeroImageContainer>
Expand All @@ -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}
/>
) : (
Expand All @@ -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 && (
<span
className="abandoned"
style={{ right: facet ? '12px' : '7px' }}
data-hint={strings[`leaver_status_${leaverStatus}`]}
data-hint-position="top"
>
<img src="/assets/images/dota2/disconnect_icon.png" alt="" />
</span>
)}
<HeroFacet heroID={heroID} facet={facet} />
{playerSlot !== undefined && (
<div
className="playerSlot"
style={{ backgroundColor: playerColors[playerSlot] }}
style={{ backgroundColor: playerColors[playerSlot], right: facet ? '12px' : '7px' }}
/>
)}
</div>
Expand Down
Loading