Add agentSelectActive types to dataModel and make agent select component conditional

src/app/components/agent-select/agent-select.component.html

@@ -1,39 +1,41 @@
-<div class="flex h-full w-full rotate-3 -skew-3 flex-row overflow-clip">
-  @for (team of dataModel.teams(); track $index; let teamIndex = $index) {
-    <div
-      class="bg-background h-4/5 w-1/2 translate-y-75/432"
-      [class.translate-y-0!]="teamIndex === 0"
-    >
+@if (dataModel.match().tools.agentSelectActive) {
+  <div class="flex h-full w-full rotate-3 -skew-3 flex-row overflow-clip">
+    @for (team of dataModel.teams(); track $index; let teamIndex = $index) {
       <div
-        class="flex h-full w-full flex-col"
-        [class]="
-          teamIndex === 0 ? 'bg-agent-select-defender-skew' : 'bg-agent-select-attacker-skew'
-        "
-        [class.flex-col-reverse!]="teamIndex === 1"
+        class="bg-background h-4/5 w-1/2 translate-y-75/432"
+        [class.translate-y-0!]="teamIndex === 0"
       >
         <div
-          class="font-montserrat box-border flex h-1/5 w-full items-center justify-center text-4xl font-extrabold text-white uppercase"
-          [class]="[
-            teamIndex === 0 ? 'border-b-4!' : 'border-t-3!',
-            teamIndex === 0 ? 'border-defender-secondary' : 'border-attacker-secondary',
-          ]"
+          class="flex h-full w-full flex-col"
+          [class]="
+            teamIndex === 0 ? 'bg-agent-select-defender-skew' : 'bg-agent-select-attacker-skew'
+          "
+          [class.flex-col-reverse!]="teamIndex === 1"
         >
-          {{ team.teamName }}
+          <div
+            class="font-montserrat box-border flex h-1/5 w-full items-center justify-center text-4xl font-extrabold text-white uppercase"
+            [class]="[
+              teamIndex === 0 ? 'border-b-4!' : 'border-t-3!',
+              teamIndex === 0 ? 'border-defender-secondary' : 'border-attacker-secondary',
+            ]"
+          >
+            {{ team.teamName }}
+          </div>
+          <div class="relative flex h-full w-full">
+            @for (player of team.players; track $index) {
+              <app-agent-select-player-info
+                class="h-full w-1/5"
+                [agent]="player.agentInternal"
+                [locked]="player.locked"
+                [playerName]="player.name"
+                [color]="team.isAttacking ? 'attacker' : 'defender'"
+                [down]="teamIndex === 1"
+              ></app-agent-select-player-info>
+            }
+          </div>
+          <!-- <div class="flex h-1/5 w-full "></div> -->
         </div>
-        <div class="relative flex h-full w-full">
-          @for (player of team.players; track $index) {
-            <app-agent-select-player-info
-              class="h-full w-1/5"
-              [agent]="player.agentInternal"
-              [locked]="player.locked"
-              [playerName]="player.name"
-              [color]="team.isAttacking ? 'attacker' : 'defender'"
-              [down]="teamIndex === 1"
-            ></app-agent-select-player-info>
-          }
-        </div>
-        <!-- <div class="flex h-1/5 w-full "></div> -->
       </div>
-    </div>
-  }
-</div>
+    }
+  </div>
+}

src/app/components/top/match/spike-planted/spike-planted.component.ts

@@ -27,7 +27,7 @@ export class SpikePlantedComponent {
     }
   });
 
-  blinkTimerRef?: NodeJS.Timeout;
+  blinkTimerRef?: ReturnType<typeof setTimeout>;
   blinkState = true;
   isBlinking = false;
   blinkStartTime = 0;

src/app/overlays/testing-agent-select/testing-agent-select.component.ts

@@ -89,6 +89,7 @@ export class TestingAgentSelectComponent implements OnInit {
           type: "tournamentInfo",
           sponsors: [],
         },
+        agentSelectActive: true,
       },
       toastInfo: {
         active: false,

src/app/overlays/testing/testing.component.ts

@@ -99,6 +99,7 @@ export class TestingComponent implements OnInit {
           type: "tournamentInfo",
           sponsors: [],
         },
+        agentSelectActive: false,
       },
       toastInfo: {
         active: false,
@@ -605,7 +606,7 @@ export class TestingComponent implements OnInit {
     });
   }
 
-  spikeTimer?: NodeJS.Timeout;
+  spikeTimer?: ReturnType<typeof setTimeout>;
 
   plantSpike() {
     this.dataModel.match.update((v) => {
@@ -800,7 +801,7 @@ export class TestingComponent implements OnInit {
   }
   //#endregion
 
-  timeoutTimerRef?: NodeJS.Timeout;
+  timeoutTimerRef?: ReturnType<typeof setInterval>;
   startTimeoutTimer() {
     this.timeoutTimerRef = setInterval(() => {
       this.dataModel.match.update((v) => {

src/app/services/Types.ts

@@ -108,6 +108,7 @@ export interface IToolsData {
   playercamsInfo: IPlayercamsInfo;
   nameOverrides: INameOverrides;
   roundWinBox: IRoundWinBox;
+  agentSelectActive: boolean;
 }
 
 export interface ISeriesInfo {

src/app/services/dataModel.service.ts

@@ -195,6 +195,7 @@ export const initialMatchData: IMatchData = {
       type: "disabled",
       sponsors: [],
     },
+    agentSelectActive: false,
   },
   toastInfo: {
     active: false,