added SP support

src/HUD/Layout/Layout.tsx

@@ -17,6 +17,7 @@ import Timeout from "../PauseTimeout/Timeout";
 import { CSGO } from "csgogsi";
 import { Match } from "../../API/types";
 import { useAction } from "../../API/contexts/actions";
+import { Scout } from "../Scout";
 
 interface Props {
   game: CSGO,
@@ -73,7 +74,7 @@ const Layout = ({game,match}: Props) => {
       <TeamBox team={right} players={rightPlayers} side="right" current={game.player} />
 
       <Trivia />
-
+      <Scout left={left.side} right={right.side} />
       <MapSeries teams={[left, right]} match={match} isFreezetime={isFreezetime} map={game.map} />
       <div className={"boxes left"}>
         <UtilityLevel side={left.side} players={game.players} show={isFreezetime && !forceHide} />

src/HUD/Scout/index.scss

@@ -0,0 +1,63 @@
+#scout {
+    width: 512.5px;
+    background-color: var(--sub-panel-color);
+    padding: 10px;
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
+    color: white;
+    top: 126px;
+    opacity: 0;
+    transition: opacity 0.5s;
+
+    &.show {
+        opacity: 1;
+    }
+    .bar-container {
+        position: relative;
+        width: 100%;
+        height: 29px;
+        display: flex;
+
+        .bar {
+            position: relative;
+            width: 100%;
+            z-index: 0;
+            height: 100%;
+            .team-prediction {
+                position: absolute;
+                height: 100%;
+                width: 100%;
+            }
+            .left {
+                z-index: 0;
+
+            }
+            .right {
+                margin-left: auto;
+                width: 50%;
+                z-index: 2;
+                right: 0;
+            }
+            .team-CT {
+                background-color: var(--color-new-ct);
+            }
+            .team-T {
+                background-color: var(--color-new-t);
+            }
+        }
+        .overlay {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            justify-content: space-between;
+            z-index: 2;
+            align-items: center;
+            .team-prediction-value {
+                margin: 0 10px;
+                text-shadow: 1px 1px 0px black;
+            }
+        }
+    }
+}

src/HUD/Scout/index.tsx

@@ -0,0 +1,17 @@
+import { Side } from "csgogsi";
+import "./index.scss";
+
+export const Scout = ({ left, right }: { left: Side, right: Side }) => {
+    return <div id="scout">
+        <div className="bar-container">
+            <div className="overlay">
+                <div className={`team-prediction-value left ${left}`}>50%</div>
+                <div className={`team-prediction-value right ${right}`}>50%</div>
+            </div>
+            <div className="bar">
+                <div className={`team-prediction team-${left} left`} />
+                <div className={`team-prediction team-${right} right`} />
+            </div>
+        </div>
+    </div>
+}