Add End-of-round

.github/workflows/build-and-publish.yml

@@ -41,4 +41,4 @@ jobs:
             ghcr.io/valospectra/overlay:${{ env.RELEASE_TAG }}
 
 
-
+

src/app/app.module.ts

@@ -18,6 +18,7 @@ import { InhouseTrackerPlayercardComponent } from "./combat/playercard/playercar
 import { OverlayComponent } from "./overlay/overlay.component";
 import { PlayerControllerComponent } from "./testing/player-controller/player-controller.component";
 import { TeamControllerComponent } from "./testing/team-controller/team-controller.component";
+import { EndroundComponent } from "./endround/endround.component";
 import { ShieldIconComponent } from "./combat/playercard/shield-icon/shield-icon.component";
 import { MapinfoComponent } from "./topscore/topinfo/mapinfo/mapinfo.component";
 import { JsonPipe } from "@angular/common";
@@ -42,6 +43,7 @@ import { RedirectComponent } from "./redirect/redirect.component";
     OverlayComponent,
     PlayerControllerComponent,
     TeamControllerComponent,
+    EndroundComponent,
     ShieldIconComponent,
     MapinfoComponent,
     AgentSelectComponent,

src/app/endround/endround.component.html

@@ -0,0 +1,26 @@
+<div *ngIf="match.roundPhase === 'end'">
+  <div class="intro-box">
+    <div class="intro-box-content" [style.background-image]="setTournamentBackgroundImage()">
+      <div class="intro-info-box">
+        <img class="intro-info-image" src="{{ tournamentUrl }}" />
+        <div class="intro-round-text">ROUND WIN</div>
+      </div>
+    </div>
+  </div>
+  <div class="endround">
+    <div class="endround-box" [style.background-image]="setTournamentBackgroundImage()">
+      <div class="win-side">
+        <div class="win-side-image-box">
+          <img class="win-side-image" src="{{ match.teams[teamWon].teamUrl }}" />
+        </div>
+        <div class="win-side-text">{{ match.attackersWon ? "ATTACKER" : "DEFENDER" }} WIN</div>
+      </div>
+      <div class="info-box">
+        <div class="info-image-box">
+          <img class="info-image" src="{{ tournamentUrl }}" />
+        </div>
+        <div class="round-number">ROUND {{ match.roundNumber }}</div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/endround/endround.component.scss

@@ -0,0 +1,205 @@
+.intro-box {
+  position: absolute;
+  left: 26.23%;
+  top: 40.5%;
+  width: 875px;
+  height: 200px;
+  overflow: hidden;
+  animation-name: fly-down;
+  animation-duration: 4s;
+  animation-fill-mode: both;
+}
+
+.intro-box-content {
+  position: relative;
+  width: 875px;
+  height: 200px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  animation-name: slide-in;
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  transition-timing-function: ease-in-out;
+}
+
+.intro-info-box {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  width: 50%;
+  height: 100%;
+}
+
+.intro-info-image {
+  position: relative;
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.intro-round-text {
+  position: relative;
+  width: fit-content;
+  text-shadow: 0px 1.21px 4.83px rgba(0, 0, 0, 0.12);
+  font-family: "Unbounded", Helvetica;
+  font-weight: 700;
+  color: #ffffff;
+  font-size: 30px;
+  font-style: normal;
+  text-align: center;
+  line-height: normal;
+}
+
+.endround {
+  position: absolute;
+  left: 26%;
+  top: 100%;
+  width: 875px;
+  height: 200px;
+  overflow: hidden;
+  animation-name: slide-up;
+  animation-duration: 3.95s;
+  animation-fill-mode: both;
+}
+
+.endround-box {
+  position: relative;
+  width: 875px;
+  height: 200px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: stretch;
+}
+
+.win-side {
+  position: relative;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  width: 30%;
+  height: 100%;
+}
+
+.win-side-image-box {
+  display: flex;
+  height: 70%;
+  align-items: center;
+  justify-content: center;
+  scale: 0.9;
+}
+
+.win-side-image {
+  position: relative;
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.win-side-text {
+  position: relative;
+  width: fit-content;
+  text-shadow: 0px 1.21px 4.83px rgba(0, 0, 0, 0.12);
+  font-family: "Montserrat", Helvetica;
+  font-weight: 700;
+  color: #ffffff;
+  font-size: 30px;
+  font-style: normal;
+  text-align: center;
+  line-height: normal;
+}
+
+.info-box {
+  position: relative;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  width: 50%;
+  height: 100%;
+}
+
+.info-image-box {
+  display: flex;
+  height: 70%;
+  align-items: center;
+  justify-content: center;
+  scale: 0.9;
+}
+
+.info-image {
+  position: relative;
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.round-number {
+  position: relative;
+  width: fit-content;
+  text-shadow: 0px 1.21px 4.83px rgba(0, 0, 0, 0.12);
+  font-family: "Montserrat", Helvetica;
+  font-weight: 700;
+  color: #ffffff;
+  font-size: 30px;
+  font-style: normal;
+  text-align: center;
+  line-height: normal;
+}
+
+@keyframes fly-down {
+  0% {
+    top: 40.5%;
+  }
+  90% {
+    top: 40.5%;
+  }
+  100% {
+    top: 150%;
+  }
+}
+
+@keyframes slide-up {
+  0% {
+    top: 100%;
+  }
+  25% {
+    top: 100%;
+  }
+  90% {
+    top: 100%;
+  }
+  100% {
+    top: 82%;
+  }
+}
+
+@keyframes slide-in {
+  0% {
+    left: -102%;
+  }
+  75% {
+    left: -102%;
+  }
+  100% {
+    left: 0%;
+  }
+}

src/app/endround/endround.component.ts

@@ -0,0 +1,46 @@
+import { Component, Input, OnChanges, SimpleChanges, OnInit } from "@angular/core";
+@Component({
+  selector: "app-endround",
+  templateUrl: "./endround.component.html",
+  styleUrls: ["./endround.component.scss"],
+})
+export class EndroundComponent implements OnChanges, OnInit {
+  @Input() match!: any;
+  tournamentUrl = "../../assets/misc/logo.webp";
+
+  tournamentBackgroundUrl = "../../assets/misc/backdrop.webp";
+
+  teamWon = 0;
+  ngOnInit(): void {
+    this.tournamentUrl =
+      this.match?.tools?.tournamentInfo?.logoUrl && this.match.tools.tournamentInfo.logoUrl !== ""
+        ? this.match.tools.tournamentInfo.logoUrl
+        : "../../assets/misc/logo.webp";
+
+    this.tournamentBackgroundUrl =
+      this.match?.tools?.tournamentInfo?.backdropUrl &&
+      this.match.tools.tournamentInfo.backdropUrl !== ""
+        ? this.match.tools.tournamentInfo.backdropUrl
+        : "../../assets/misc/backdrop.webp";
+
+    this.preloadImage(this.tournamentUrl);
+    this.preloadImage(this.tournamentBackgroundUrl);
+  }
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes["match"]) {
+      const match = changes["match"].currentValue;
+      if (match.attackersWon) {
+        this.teamWon = match.teams[0].isAttacking ? 0 : 1;
+      } else {
+        this.teamWon = match.teams[0].isAttacking ? 1 : 0;
+      }
+    }
+  }
+  private preloadImage(url: string): void {
+    const img = new Image();
+    img.src = url;
+  }
+  setTournamentBackgroundImage(): string {
+    return `url(${this.tournamentBackgroundUrl})`;
+  }
+}

src/app/testing/player-controller/player-controller.component.ts

@@ -17,14 +17,21 @@ export class PlayerControllerComponent implements OnDestroy {
 
   inCombat = true;
   inShopping = false;
+  inEnd = false;
   @Input()
   set gamePhase(v: string) {
     if (v == "combat") {
       this.inCombat = true;
       this.inShopping = false;
-    } else {
+      this.inEnd = false;
+    } else if (v == "shopping") {
       this.inCombat = false;
       this.inShopping = true;
+      this.inEnd = false;
+    } else {
+      this.inCombat = false;
+      this.inShopping = false;
+      this.inEnd = true;
     }
   }
 

src/app/testing/team-controller/team-controller.component.ts

@@ -26,9 +26,9 @@ export class TeamControllerComponent {
   @Input() teamName!: string;
   @Input() teamCode!: string;
 
-  _roundPhase: "shopping" | "combat" = "combat";
+  _roundPhase: "shopping" | "combat" | "end" = "combat";
   @Input()
-  set roundPhase(s: "shopping" | "combat") {
+  set roundPhase(s: "shopping" | "combat" | "end") {
     this._roundPhase = s;
     this.propagateRoundPhase(s);
   }
@@ -136,7 +136,7 @@ export class TeamControllerComponent {
     }
   }
 
-  propagateRoundPhase(phase: "shopping" | "combat") {
+  propagateRoundPhase(phase: "shopping" | "combat" | "end") {
     for (const playerController of this.playerControllers) {
       playerController.instance.gamePhase = phase;
     }

src/app/testing/testing.component.ts

@@ -18,7 +18,7 @@ export class TestingComponent implements AfterViewInit {
 
   matchData: any;
   isSpikePlanted = false;
-  roundPhase: "shopping" | "combat" = "combat";
+  roundPhase: "shopping" | "combat" | "end" = "combat";
 
   showInterface = true;
   showBackground = true;
@@ -122,6 +122,10 @@ export class TestingComponent implements AfterViewInit {
   changeRoundPhase(): void {
     if (this.matchData.roundPhase == "shopping") {
       this.matchData.roundPhase = "combat";
+    } else if (this.matchData.roundPhase == "combat") {
+      this.matchData.roundPhase = "end";
+    } else if (this.matchData.roundPhase == "LOBBY") {
+      this.matchData.roundPhase = "end";
     } else {
       this.matchData.roundPhase = "shopping";
     }

src/app/tracker/tracker.component.html

@@ -1,6 +1,7 @@
 <div *ngIf="shouldDisplay()">
   <app-topinfo [match]="match" />
   <app-topscore [match]="match" />
+  <app-endround *ngIf="match.roundPhase !== 'shopping'" [match]="match" [@fadeFast] />
   <app-combat *ngIf="match.roundPhase !== 'shopping'" [match]="match" [@fade] />
   <app-scoreboard *ngIf="match.roundPhase === 'shopping'" [match]="match" [@fade] />
 </div>

src/app/tracker/tracker.component.ts

@@ -10,9 +10,9 @@ import { AutoswitchComponent } from "../autoswitch/autoswitch.component";
   animations: [
     trigger("fade", [
       transition(":enter", [style({ opacity: "0" }), animate("0.5s", style({ opacity: "1" }))]),
-
       transition(":leave", animate("0.5s", style({ opacity: "0" }))),
     ]),
+    trigger("fadeFast", [transition(":leave", animate("0.25s ease-out", style({ opacity: "0" })))]),
   ],
 })
 export class TrackerComponent implements OnInit {