yahoo_1999/cs2-react-hud-lexogrine
Template
1
0
Fork 0
mirror of https://github.com/lexogrine/cs2-react-hud.git synced 2026-05-04 04:03:10 +02:00
Code Activity

Updated setup to vite and moved to hooks instead of class

Browse Source
This commit is contained in:
Hubert Walczak
2023-11-02 12:11:03 +01:00
parent 44f173f23c
commit f88baa5fc9
90 changed files with 7411 additions and 2706 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/HUD/MatchOverview/MatchOverview.tsx
+35 -37
View File
@@ -1,41 +1,39 @@
import React from 'react';
import * as I from '../../api/interfaces';
import TeamLogo from '../MatchBar/TeamLogo';
import * as I from "../../API/types";
import "./index.scss";
import TeamLogo from "../MatchBar/TeamLogo";
interface IProps {
match: I.Match,
show: boolean,
teams: I.Team[],
veto: I.Veto | null
match: I.Match;
show: boolean;
teams: I.Team[];
veto: I.Veto | null;
}
export default class MatchOverview extends React.Component<IProps> {
render() {
const { match, teams, show } = this.props;
const left = teams.find(team => team._id === match.left.id);
const right = teams.find(team => team._id === match.right.id);
if(!match || !left || !right) return null;
return (
<div className={`match-overview ${show ? 'show':''}`}>
<div className="match-overview-title">
Upcoming match
</div>
<div className="match-overview-teams">
<div className="match-overview-team">
<div className="match-overview-team-logo">
<TeamLogo team={left} height={40} />
</div>
<div className="match-overview-team-name">{left.name}</div>
</div>
<div className="match-overview-vs">vs</div>
<div className="match-overview-team">
<div className="match-overview-team-logo">
<TeamLogo team={right} height={40} />
</div>
<div className="match-overview-team-name">{right.name}</div>
</div>
</div>
</div>
);
}
}
const MatchOverview = ({ match, teams, show }: IProps) => {
const left = teams.find((team) => team._id === match.left.id);
const right = teams.find((team) => team._id === match.right.id);
if (!match || !left || !right) return null;
return (
<div className={`match-overview ${show ? "show" : ""}`}>
<div className="match-overview-title">
Upcoming match
</div>
<div className="match-overview-teams">
<div className="match-overview-team">
<div className="match-overview-team-logo">
<TeamLogo team={left} height={40} />
</div>
<div className="match-overview-team-name">{(left.shortName || left.name).substring(0, 4)}</div>
</div>
<div className="match-overview-vs">vs</div>
<div className="match-overview-team">
<div className="match-overview-team-logo">
<TeamLogo team={right} height={40} />
</div>
<div className="match-overview-team-name">{(right.shortName || right.name).substring(0, 4)}</div>
</div>
</div>
</div>
);
};
export default MatchOverview;