Added pause & timeout messages

src/HUD/Layout/Layout.tsx

@@ -15,6 +15,8 @@ import Killfeed from "../Killfeed/Killfeed";
 import MapSeries from "./../MatchBar/MapSeries";
 import Overview from "../Overview/Overview";
 import Tournament from "../Tournament/Tournament";
+import Pause from "../PauseTimeout/Pause";
+import Timeout from "../PauseTimeout/Timeout";
 
 interface Props {
   game: CSGO,
@@ -88,7 +90,8 @@ export default class Layout extends React.Component<Props, State> {
         <Overview match={match} map={game.map} players={game.players || []} />
         <RadarMaps match={match} map={game.map} game={game} />
         <MatchBar map={game.map} phase={game.phase_countdowns} bomb={game.bomb} match={match} />
-
+        <Pause  phase={game.phase_countdowns}/>
+        <Timeout map={game.map} phase={game.phase_countdowns} />
         <SeriesBox map={game.map} phase={game.phase_countdowns} match={match} />
 
         <Tournament />

src/HUD/PauseTimeout/Pause.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { PhaseRaw } from "csgogsi-socket";
+
+interface IProps {
+    phase: PhaseRaw | null
+}
+
+export default class Pause extends React.Component<IProps> {
+    render() {
+        const { phase } = this.props;
+        return (
+            <div id={`pause`} className={phase && phase.phase === "paused" ? 'show' : ''}>
+                PAUSE
+            </div>
+        );
+    }
+}

src/HUD/PauseTimeout/Timeout.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Map, PhaseRaw } from "csgogsi-socket";
+
+function stringToClock(time: string | number, pad = true) {
+    if (typeof time === "string") {
+        time = parseFloat(time);
+    }
+    const countdown = Math.abs(Math.ceil(time));
+    const minutes = Math.floor(countdown / 60);
+    const seconds = countdown - minutes * 60;
+    if (pad && seconds < 10) {
+        return `${minutes}:0${seconds}`;
+    }
+    return `${minutes}:${seconds}`;
+}
+
+interface IProps {
+    phase: PhaseRaw | null,
+    map: Map
+}
+
+export default class Timeout extends React.Component<IProps> {
+    render() {
+        const { phase, map } = this.props;
+        const time = phase && Math.abs(Math.ceil(parseFloat(phase.phase_ends_in)));
+        const team = phase && phase.phase === "timeout_t" ? map.team_t : map.team_ct;
+
+        return (
+            <div id={`timeout`} className={`${time && time > 2 && phase && (phase.phase === "timeout_t" || phase.phase === "timeout_ct") ? 'show' : ''} ${phase && (phase.phase === "timeout_t" || phase.phase === "timeout_ct") ? phase.phase.substr(8): ''}`}>
+                { team.name } TIMEOUT
+            </div>
+        );
+    }
+}

src/HUD/Styles/match.css

@@ -97,3 +97,32 @@
     justify-content: center;
 }
 
+#timeout, #pause {
+    text-transform: uppercase;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 150px;
+    background-color: var(--sub-panel-color);
+    width: 600px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100px;
+    font-size: 35px;
+    transition: opacity 1.5s;
+    opacity: 0;
+}
+#pause {
+
+    color: white;
+}
+#timeout.show, #pause.show {
+    opacity: 1;
+}
+#timeout.t {
+    color: var(--color-new-t);
+}
+#timeout.ct {
+    color: var(--color-new-ct);
+}