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

Updated setup to vite and moved to hooks instead of class

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
+26 -28
View File
@@ -1,41 +1,39 @@
import React from "react";
import { Timer } from "../MatchBar/MatchBar";
import { Player } from "csgogsi";
import * as I from "./../../assets/Icons";
import { MAX_TIMER } from "./Countdown";
interface IProps {
timer: Timer | null;
side: "right" | "left"
}
export default class Bomb extends React.Component<IProps> {
getCaption = (type: "defusing" | "planting", player: Player | null) => {
if(!player) return null;
if(type === "defusing"){
return <>
<I.Defuse height={22} width={22} fill="var(--color-new-ct)" />
<div className={'CT'}>{player.name} is defusing the bomb</div>
</>;
}
const getCaption = (type: "defusing" | "planting", player: Player | null) => {
if(!player) return null;
if(type === "defusing"){
return <>
<I.SmallBomb height={22} fill="var(--color-new-t)"/>
<div className={'T'}>{player.name} is planting the bomb</div>
<I.Defuse height={22} width={22} fill="var(--color-new-ct)" />
<div className={'CT'}>{player.name} is defusing the bomb</div>
</>;
}
render() {
const { side, timer } = this.props;
return (
<div className={`defuse_plant_container ${side} ${timer && timer.active ? 'show' :'hide'}`}>
{
timer ?
<div className={`defuse_plant_caption`}>
{this.getCaption(timer.type, timer.player)}
</div> : null
}
<div className="defuse_plant_bar" style={{ width: `${(timer && timer.width) || 0}%` }}></div>
</div>
);
}
return <>
<I.SmallBomb height={22} fill="var(--color-new-t)"/>
<div className={'T'}>{player.name} is planting the bomb</div>
</>;
}
const Bomb = ({ timer, side }: IProps) =>{
if(!timer) return null;
return (
<div className={`defuse_plant_container ${side} ${timer && timer.active ? 'show' :'hide'}`}>
{
timer ?
<div className={`defuse_plant_caption`}>
{getCaption(timer.type, timer.player)}
</div> : null
}
<div className="defuse_plant_bar" style={{ width: `${(timer.time * 100 / (timer.type === "planting" ? MAX_TIMER.planting : timer.player?.state.defusekit ? MAX_TIMER.defuse_kit : MAX_TIMER.defuse_nokit ))}%` }}></div>
</div>
);
}
export default Bomb;