Add agent select endpoint, add autoswitch endpoint, bump version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spectra-frontend",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --configuration development",
@@ -45,5 +45,5 @@
     "typescript": "~5.5.4",
     "typescript-eslint": "8.18.0"
   },
-  "packageManager": "yarn@4.5.1"
+  "packageManager": "yarn@4.6.0"
 }

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

@@ -0,0 +1,34 @@
+<div class="body" [@fade] *ngIf="shouldDisplay()">
+  <div class="left-team">
+    <div class="team-wrapper-left">
+      <app-select-player-info
+        *ngFor="let player of teamLeft.players; trackBy: trackByPlayerId"
+        [player]="player"
+        [color]="teamLeft.isAttacking ? 'attacker' : 'defender'"
+      />
+    </div>
+  </div>
+  <div class="team-info">
+    <div class="defender-team">
+      <app-select-team-info
+        [team]="teamLeft.isAttacking ? teamRight : teamLeft"
+        [isAttack]="false"
+      ></app-select-team-info>
+    </div>
+    <div class="attacker-team">
+      <app-select-team-info
+        [team]="teamLeft.isAttacking ? teamLeft : teamRight"
+        [isAttack]="true"
+      ></app-select-team-info>
+    </div>
+  </div>
+  <div class="right-team">
+    <div class="team-wrapper-right">
+      <app-select-player-info
+        *ngFor="let player of teamRight.players; trackBy: trackByPlayerId"
+        [player]="player"
+        [color]="teamRight.isAttacking ? 'attacker' : 'defender'"
+      />
+    </div>
+  </div>
+</div>

src/app/agent-select/agent-select.component.scss

@@ -0,0 +1,79 @@
+.body {
+  position: absolute;
+  width: 98%;
+  height: 40%;
+  bottom: 1%;
+  left: 1%;
+  background-color: #0f1923cc;
+  border-radius: 25px;
+  overflow: hidden;
+}
+
+.left-team {
+  position: absolute;
+  left: 0;
+  width: 45%;
+  height: 100%;
+}
+
+.right-team {
+  position: absolute;
+  right: 0;
+  width: 45%;
+  height: 100%;
+}
+
+.team-info {
+  position: absolute;
+  left: 45%;
+  width: 10%;
+  height: 100%;
+  background: linear-gradient(
+    180deg,
+    rgba(15, 25, 35, 0.65) 0%,
+    rgba(15, 25, 35, 0.53) 53%,
+    rgba(15, 25, 35, 0) 75%,
+    rgba(15, 25, 35, 0) 100%
+  );
+}
+
+.defender-team {
+  position: absolute;
+  width: 100%;
+  height: 50%;
+  top: 0;
+  background: linear-gradient(
+    180deg,
+    rgba(var(--defender-color-rgb), 0.9) 0%,
+    rgba(var(--defender-color-secondary-rgb), 0) 90%
+  );
+}
+
+.attacker-team {
+  position: absolute;
+  width: 100%;
+  height: 50%;
+  bottom: 0;
+  background: linear-gradient(
+    0deg,
+    rgba(var(--attacker-color-rgb), 0.9) 0%,
+    rgba(var(--attacker-color-secondary-rgb), 0) 90%
+  );
+}
+
+.team-wrapper {
+  display: flex;
+  flex-direction: row;
+  &-left {
+    @extend .team-wrapper;
+  }
+
+  &-right {
+    @extend .team-wrapper;
+  }
+}
+
+app-select-player-info {
+  width: 20%;
+  height: 100%;
+}

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

@@ -0,0 +1,100 @@
+import { AfterViewInit, Component, OnInit, ViewChild } from "@angular/core";
+import { TrackerComponent } from "../tracker/tracker.component";
+import { ActivatedRoute } from "@angular/router";
+import { SocketService } from "../services/SocketService";
+import { Config } from "../shared/config";
+import { trigger, transition, style, animate } from "@angular/animations";
+import { AutoswitchComponent } from "../autoswitch/autoswitch.component";
+
+@Component({
+  selector: "app-agent-select",
+  templateUrl: "./agent-select.component.html",
+  styleUrls: ["./agent-select.component.scss"],
+  animations: [
+    trigger("fade", [
+      transition(":enter", [style({ opacity: "0" }), animate("0.5s", style({ opacity: "1" }))]),
+
+      transition(":leave", animate("0.5s", style({ opacity: "0" }))),
+    ]),
+  ],
+})
+export class AgentSelectComponent implements OnInit, AfterViewInit {
+  @ViewChild(TrackerComponent) trackerComponent!: TrackerComponent;
+  groupCode = "UNKNOWN";
+  socketService!: SocketService;
+
+  match: any;
+  teamLeft: any;
+  teamRight: any;
+
+  constructor(
+    private route: ActivatedRoute,
+    private config: Config,
+  ) {
+    this.route.queryParams.subscribe((params) => {
+      this.groupCode = params["groupCode"]?.toUpperCase() || "UNKNOWN";
+      console.log(`Requested group code is ${this.groupCode}`);
+    });
+  }
+
+  ngOnInit(): void {
+    this.match = {
+      groupCode: "A",
+      isRanked: false,
+      isRunning: true,
+      roundNumber: 0,
+      roundPhase: "combat",
+      teams: [{ players: [] }, { players: [] }],
+      spikeState: { planted: false },
+      map: "Ascent",
+      tools: {
+        seriesInfo: {
+          needed: 1,
+          wonLeft: 0,
+          wonRight: 0,
+          mapInfo: [],
+        },
+      },
+    };
+
+    this.teamLeft = this.match.teams[0];
+    this.teamRight = this.match.teams[1];
+
+    this.socketService = SocketService.getInstance(this.config.serverEndpoint, this.groupCode);
+  }
+
+  ngAfterViewInit(): void {
+    this.socketService.subscribe((data: any) => {
+      this.updateMatch(data);
+    });
+  }
+
+  isAutoswitch(): boolean {
+    return this.route.component === AutoswitchComponent;
+  }
+
+  shouldDisplay(): boolean {
+    if (this.isAutoswitch()) {
+      if (this.match.roundPhase === "LOBBY") {
+        return true;
+      } else {
+        return false;
+      }
+    } else {
+      return true;
+    }
+  }
+
+  public updateMatch(data: any) {
+    delete data.eventNumber;
+    delete data.replayLog;
+    this.match = data;
+
+    this.teamLeft = this.match.teams[0];
+    this.teamRight = this.match.teams[1];
+  }
+
+  trackByPlayerId(index: number, player: any) {
+    return player.playerId;
+  }
+}

src/app/agent-select/select-player-info/select-player-info.component.html

@@ -0,0 +1,24 @@
+<div class="container">
+  <div class="player-agent">
+    <img
+      class="agent-image"
+      [ngClass]="player.locked ? 'locked' : ''"
+      [@lockAnimation]="player.locked"
+      [@characterSwitch]="player.agentInternal"
+      src="assets/agent-portraits/{{ player.agentInternal }}Portrait.webp"
+      alt=""
+    />
+    <div class="player-role">
+      <img
+        class="role-image"
+        [@characterSwitch]="player.agentInternal"
+        src="assets/roles/{{ getAgentRole(player.agentInternal) }}.webp"
+        alt=""
+      />
+    </div>
+    <div class="player-name">
+      {{ player.name }}
+    </div>
+    <div class="player-gradient" [ngClass]="color"></div>
+  </div>
+</div>

src/app/agent-select/select-player-info/select-player-info.component.scss

@@ -0,0 +1,76 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap");
+
+.container {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+
+.player-gradient {
+  position: absolute;
+  width: 20%;
+  height: 100%;
+  top: 0;
+  z-index: -200;
+
+  &.attacker {
+    @extend .player-gradient;
+    background: linear-gradient(
+      0deg,
+      rgba(var(--attacker-color-rgb), 1) 0%,
+      rgba(var(--attacker-color-rgb), 0.4) 75%,
+      rgba(var(--attacker-color-secondary-rgb), 0) 100%
+    );
+  }
+  &.defender {
+    @extend .player-gradient;
+    background: linear-gradient(
+      180deg,
+      rgba(var(--defender-color-rgb), 1) 0%,
+      rgba(var(--defender-color-rgb), 0.4) 75%,
+      rgba(var(--defender-color-secondary-rgb), 0) 100%
+    );
+  }
+}
+
+.agent-image {
+  display: block;
+  margin-top: -35%;
+  margin-left: -150%;
+  max-width: 400%;
+  z-index: 200;
+  filter: grayscale(1);
+
+  &.locked {
+    filter: grayscale(0);
+  }
+}
+
+.player-name {
+  position: absolute;
+  width: 20%;
+  bottom: 15%;
+  text-align: center;
+  font-size: 1.25rem;
+  font-weight: 800;
+  color: white;
+  font-family: "Montserrat", Helvetica;
+  text-shadow: 2px 2px 5px black;
+  line-break: auto;
+  overflow: hidden;
+  line-height: 90%;
+}
+
+.player-role {
+  position: absolute;
+  width: 20%;
+  bottom: 3%;
+  z-index: 100;
+}
+
+.role-image {
+  display: block;
+  margin: auto;
+  max-width: 25%;
+}

src/app/agent-select/select-player-info/select-player-info.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input } from "@angular/core";
+import { AgentRoleService } from "../../services/agentRole.service";
+import { trigger, transition, style, animate } from "@angular/animations";
+
+@Component({
+  selector: "app-select-player-info",
+  templateUrl: "./select-player-info.component.html",
+  styleUrl: "./select-player-info.component.scss",
+  animations: [
+    trigger("lockAnimation", [
+      transition("false => true, void => true", [
+        style({ filter: "grayscale(1) brightness(200%)" }),
+        animate("350ms", style({ filter: "grayscale(0) brightness(100%)" })),
+      ]),
+    ]),
+    trigger("characterSwitch", [
+      transition("* <=> *", [style({ opacity: "0" }), animate("100ms", style({ opacity: "1" }))]),
+    ]),
+  ],
+})
+export class SelectPlayerInfoComponent {
+  @Input() player: any;
+  @Input() color: "attacker" | "defender" = "attacker";
+
+  getAgentRole(agent: string) {
+    return AgentRoleService.getAgentRole(agent);
+  }
+}

src/app/agent-select/select-team-info/select-team-info.component.html

@@ -0,0 +1,9 @@
+<div class="container">
+  <div class="defender-gradient" *ngIf="!isAttack"></div>
+  <div class="team-tricode" *ngIf="isAttack">{{ team.teamTricode }}</div>
+  <div class="team-logo">
+    <img class="logo" [src]="team.teamUrl" alt="" />
+  </div>
+  <div class="team-tricode" *ngIf="!isAttack">{{ team.teamTricode }}</div>
+  <div class="attacker-gradient" *ngIf="isAttack"></div>
+</div>