Lexogrine/dota2-react-hud
Template
1
0
Fork 0
mirror of https://github.com/lexogrine/dota2-react-hud.git synced 2026-05-04 20:43:10 +02:00
Code Releases Activity

HUD Overhaul

Browse Source
This commit is contained in:
Hubert Walczak
2021-09-27 18:37:25 +02:00
parent 01729977e7
commit e759e43425
316 changed files with 3828 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/HUD/Picker/Pick.tsx
+58
View File
@@ -0,0 +1,58 @@
import React from 'react';
import { Draft, DraftEntry, Faction, TeamDraft } from 'dotagsi';
import Snow from "./snowflake.png";
const PlayerPick = ({ entry, type, active }: { entry: DraftEntry, type: Faction, active: boolean }) => {
const order = entry.order + 1;
let lastPart = 'th';
if (order === 1) {
lastPart = 'st';
} else if (order === 2) {
lastPart = 'nd';
} else if (order === 3) {
lastPart = 'rd';
}
let text = `${order}${lastPart} PICK`;
if (!entry.class) {
text = '';
}
if (active) {
text = 'PICKING...';
}
return <div className={`player_draft ${type} ${active ? 'active' : ''}`}>
<div className="player_preview">
<div className="background-imgs">
</div>
{entry.class ? <video muted={true} autoPlay={true} loop={true} width="123">
<source src={`./heroes/animated/npc_dota_hero_${entry.class}.webm`}
type="video/webm" />
Sorry, your browser doesn't support embedded videos.
</video> : null}
</div>
<div className={`draft_status ${!text ? 'hidden' : ''}`}>
{text}
</div>
</div>
}
export const PlayerBan = ({ entry, type, active }: { entry: DraftEntry, type: Faction, active: boolean }) => {
const order = entry.order + 1;
if (!entry.class) {
return <div className={`player_ban ${type} ${active ? 'active' : ''}`}>
<div className="player_preview" style={{backgroundColor:'#0E0018'}}>
</div>
</div>
}
return <div className={`player_ban ${entry.order} ${type} ${active ? 'active' : ''}`}>
<div className="player_preview">
<img src={`./heroes/${entry.class}.png`} />
</div>
</div>
}
export default PlayerPick;
src/HUD/Picker/Picker.tsx
+49
View File
@@ -0,0 +1,49 @@
import React from 'react';
import { Draft, Faction, TeamDraft } from 'dotagsi';
import PlayerPick, { PlayerBan } from './Pick';
const TeamPicker = ({ draft, type, active }: { draft?: TeamDraft, type: Faction, active: boolean }) => {
if (!draft) {
return <div className="team_draft">
<div className={`players_draft ${type}`}>
</div>
<div className="team_draft_info">
</div>
</div>
}
const picks = draft.picks.filter(pick => pick.type === 'pick').sort((a, b) => a.order - b.order);
const smallestNotPickedOrder = Math.min(...picks.filter(entry => !entry.class).map(entry => entry.order));
return <div className="team_draft">
<div className={`players_draft ${type}`}>
{
picks.map(pick => <PlayerPick entry={pick} type={type} active={active && smallestNotPickedOrder === pick.order} />)
}
</div>
<div className="team_draft_info">
</div>
</div>
}
export const TeamBaner = ({ draft, type, active }: { draft?: TeamDraft, type: Faction, active: boolean }) => {
if (!draft) {
return <div className={`team_draft_ban ${type}`}>
<div className={`players_draft_ban ${type}`}>
</div>
</div>
}
const picks = draft.picks.filter(pick => pick.type === 'ban').sort((a, b) => a.order - b.order);
const smallestNotPickedOrder = Math.min(...picks.filter(entry => !entry.class).map(entry => entry.order));
return <div className={`team_draft_ban ${type}`}>
<div className={`players_draft_ban ${type}`}>
{
picks.map(pick => <PlayerBan entry={pick} type={type} active={active && smallestNotPickedOrder === pick.order} />)
}
</div>
</div>
}
export default TeamPicker;
src/HUD/Picker/TeamInfo.tsx
+24
View File
@@ -0,0 +1,24 @@
import React from 'react';
import { Draft, Team, Faction, Player, TeamDraft } from 'dotagsi';
import { TeamBaner } from './Picker';
const TeamInfo = ({ draft, type, players, team }: { draft: Draft, type: Faction, players: Player[], team: Team, }) => {
return <div className={`team_info ${type}`}>
<div className="team_info_score">
{team.map_score}
</div>
<div className="team_squad">
<div className="top_bar">
<div className="name">
{team.name}
</div>
<TeamBaner draft={draft[type]} type={type} active={false}/>
</div>
<div className="bottom_bar">
{players.map(player => player.name).join(' / ')}
</div>
</div>
</div>
}
export default TeamInfo;
src/HUD/Picker/Vector.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

src/HUD/Picker/activePick.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

src/HUD/Picker/leftPick.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

src/HUD/Picker/leftPickActive.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

src/HUD/Picker/nonActivePick.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

src/HUD/Picker/player.scss
+233
View File
@@ -0,0 +1,233 @@
.background {
position: absolute;
background-color: rgba(27, 30, 69, 0.9);
width: 100%;
height: 100%;
transition: opacity 1s;
opacity:1;
&.hide {
opacity: 0;
}
}
.draft-screen-container {
transition: opacity 1s;
opacity:1;
&.hide {
opacity: 0;
}
}
.draft-container {
display: flex;
position: fixed;
margin-left:50%;
transform: translateX(-50%);
bottom: 104px;
}
.tournament_info {
width: 139px;
height: 145px;
display: flex;
flex-direction: column;
justify-content: space-between;
.bo {
height: 33px;
width: 100%;
background-color: rgba(19, 0, 23, 0.9);
color: white;
display: flex;
align-items: center;
font-weight: 700;
justify-content: center;
text-transform: uppercase;
}
.picker_and_logo {
display: flex;
flex: 1;
background-color: rgba(19, 0, 23, 0.9);
background-repeat: no-repeat;
background-position: center;
justify-content: space-between;
background-size: cover;
.side_pick{
display: flex;
flex: 1;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-position: center;
max-width: 45px;
&.left {
background-image: url('./leftPick.png');
&.active {
background-image: url('./leftPickActive.png');
}
}
&.right {
background-image: url('./rightPick.png');
&.active {
background-image: url('./rightPickActive.png');
}
}
}
}
}
.players_draft {
display: flex;
&.radiant {
flex-direction: row-reverse;
}
}
.players_draft_ban {
display: flex;
&.radiant {
flex-direction: row-reverse;
}
}
.team_draft_ban {
position: absolute;
&.radiant {
right: 0;
}
&.dire {
left: 0;
}
top: 4px;
}
.player_ban {
margin: 0 2px;
.player_preview {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
width: 36px;
height: 36px;
img {
height: 36px;
}
}
}
.player_draft {
width:123px;
height:145px;
display:flex;
flex-direction: column;
margin:0 1.5px;
&.dire {
.draft_status {
background-color: #BD1313;
}
}
&.radiant {
.draft_status {
background-color: #16349E;
}
}
.player_preview {
flex: 1;
background-color:rgba(19, 0, 23, 0.9);
display: flex;
background-position: center;
background-repeat: no-repeat;
.background-imgs {
flex:1;
opacity:0.3;
background-position: center;
background-repeat: no-repeat;
}
}
.draft_status {
width:100%;
height:21px;
color: white;
text-align: center;
font-weight: 700;
font-size: 15px;
&.active {
}
&.hidden {
height: 7px;
}
}
}
.team_info_container {
display: flex;
height: 76px;
width: 1390px;
background-color: rgba(19, 0, 23, 0.9);
color: white;
position: fixed;
margin-left:50%;
transform: translateX(-50%);
bottom: 24px;
.timer {
width: 139px;
height: 100%;
background-color: #0E0018;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.label {
font-size: 15px;
text-transform: uppercase;
opacity: 0.7;
font-weight: 700;
letter-spacing: 0.1em;
}
.timer-time {
font-weight: 700;
font-size: 22px;
}
}
.team_info {
flex:1;
display: flex;
position: relative;
.team_info_score {
width: 60px;
display:flex;
align-items: center;
justify-content: center;
font-size: 38px;
font-weight: 700;
}
.team_squad {
display: flex;
flex-direction: column;
.top_bar {
font-size: 24px;
}
.bottom_bar {
font-size: 15px;
}
> div {
flex: 1;
display: flex;
align-items: center;
}
}
&.radiant {
.team_info_score {
background-color: #16349E;
margin-right: 8px;
}
}
&.dire {
flex-direction: row-reverse;
.team_info_score {
background-color: #BD1313;
margin-left: 8px;
}
.team_squad {
align-items: flex-end;
}
}
}
}
src/HUD/Picker/rightPick.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 341 B

src/HUD/Picker/rightPickActive.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

src/HUD/Picker/snowflake.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

src/HUD/Picker/tournament.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB