added SP support

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>
+}