initial commit

src/HUD/Timers/BombTimer.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+import { GSI } from "./../../App";
+import BombTimer from "./Countdown";
+import { C4 } from "./../../assets/Icons";
+
+export default class Bomb extends React.Component<any, { height: number; show: boolean }> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      height: 0,
+      show: false
+    };
+  }
+  hide = () => {
+    this.setState({ show: false, height: 100 });
+  };
+  componentDidMount() {
+    const bomb = new BombTimer(time => {
+      let height = time > 40 ? 4000 : time * 100;
+      this.setState({ height: height / 40 });
+    });
+    bomb.onReset(this.hide);
+    GSI.on("data", data => {
+      if (data.bomb && data.bomb.countdown) {
+        if (data.bomb.state === "planted") {
+          this.setState({ show: true });
+          return bomb.go(data.bomb.countdown);
+        }
+        if (data.bomb.state !== "defusing") {
+          this.hide();
+        }
+      } else {
+        this.hide();
+      }
+    });
+  }
+
+  render() {
+    return (
+      <div id={`bomb_container`}>
+        <div className={`bomb_timer ${this.state.show ? "show" : "hide"}`} style={{ height: `${this.state.height}%` }}></div>
+        <div className={`bomb_icon ${this.state.show ? "show" : "hide"}`}>
+          <C4 fill="white" />
+        </div>
+      </div>
+    );
+  }
+}

src/HUD/Timers/Countdown.ts

@@ -0,0 +1,46 @@
+export default class Countdown {
+    last: number;
+    time: number;
+    step: (time: number) => void;
+    on: boolean;
+    resetFunc?: Function;
+
+    constructor(step: (time: number) => void){
+        this.last = 0;
+        this.time = 0;
+        this.on = false;
+        this.step = step;
+    }
+    onReset(func: Function) {
+        this.resetFunc = func;
+    }
+    stepWrapper = (time: number) =>{
+        if(this.time < 0) return this.reset();
+        if(!this.on) return this.reset();
+        if(!this.last) this.last = time;
+        if(this.time !== Number((this.time - (time - this.last)/1000))){
+            this.time = Number((this.time - (time - this.last)/1000));
+            this.step(this.time);
+        }
+        this.last =time;
+
+
+        if(this.last) requestAnimationFrame(this.stepWrapper)
+    }
+
+    go(duration: string | number){
+        //console.log("STARTED WITH ", duration);
+        if(typeof duration === "string") duration = Number(duration);
+        if(Math.abs(duration - this.time) > 2) this.time = duration;
+        this.on = true;
+        if(!this.last ) requestAnimationFrame(this.stepWrapper);
+
+    }
+
+    reset(){
+        this.last = 0;
+        this.time = 0;
+        this.on = false;
+        if(this.resetFunc) this.resetFunc();
+    }
+}

src/HUD/Timers/PlantDefuse.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+import { Timer } from "../MatchBar/MatchBar";
+import { Player } from "csgogsi";
+import * as I from "./../../assets/Icons";
+
+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>
+      </>;
+    }
+    return <>
+      <I.SmallBomb height={22} fill="var(--color-new-t)"/>
+      <div className={'T'}>{player.name} is planting 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>
+    );
+  }
+}