A bit of cleanup

ValoSpectra · Jan 26, 2025 · 9e49344 · 9e49344
1 parent 4f5a538
commit 9e49344
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 103 deletions.
diff --git a/src/app/endround/endround.component.html b/src/app/endround/endround.component.html
@@ -1,9 +1,9 @@
 <div *ngIf="match.roundPhase === 'end'">
   <div class="intro-box">
     <div class="intro-box-content" [style.background-image]="setTournamentBackgroundImage()">
-      <div class="info-box">
-        <img class="info-image" src="{{ tournamentUrl }}" />
-        <div class="round-number">ROUND WIN</div>
+      <div class="intro-info-box">
+        <img class="intro-info-image" src="{{ tournamentUrl }}" />
+        <div class="intro-round-text">ROUND WIN</div>
       </div>
     </div>
   </div>

diff --git a/src/app/endround/endround.component.scss b/src/app/endround/endround.component.scss
@@ -1,3 +1,63 @@
+.intro-box {
+  position: absolute;
+  left: 26.23%;
+  top: 40.5%;
+  width: 875px;
+  height: 200px;
+  overflow: hidden;
+  animation-name: changepos-1;
+  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%;
@@ -10,33 +70,6 @@
   animation-fill-mode: both;
 }
 
-@keyframes changepos-1 {
-  0% {
-    top: 40.5%;
-  }
-  90% {
-    top: 40.5%;
-  }
-  100% {
-    top: 150%;
-  }
-}
-
-@keyframes changepos-2 {
-  0% {
-    top: 100%;
-  }
-  25% {
-    top: 100%;
-  }
-  90% {
-    top: 100%;
-  }
-  100% {
-    top: 82%;
-  }
-}
-
 .endround-box {
   position: relative;
   width: 875px;
@@ -50,58 +83,45 @@
   flex-wrap: nowrap;
   justify-content: center;
   align-items: stretch;
-  // margin: 10px;
-  // animation-name: slide-in;
-  // animation-duration: 1s;
-  // animation-fill-mode: both;
-  // transition-timing-function: ease-in-out;
-}
-
-@keyframes slide-in {
-  0% {
-    left: -102%;
-  }
-  75% {
-    left: -102%;
-  }
-  100% {
-    left: 0%;
-  }
 }
 
-.win-side-image {
-  position: relative;
-  max-height: 120px;
-}
-.win-side-image-box {
-  display: flex;
-  height: 140px;
-  align-items: center;
-  scale: 0.9;
-}
 .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;
-  flex-grow: 2;
-  margin-top: 10px;
   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: 25px;
+  font-size: 30px;
   font-style: normal;
   text-align: center;
-  // letter-spacing: 1.2px;
   line-height: normal;
 }
 
@@ -115,57 +135,71 @@
   align-items: center;
   overflow: hidden;
   width: 50%;
+  height: 100%;
 }
-.info-image {
-  position: relative;
-  max-height: 120px;
-  max-width: 400px;
-}
+
 .info-image-box {
   display: flex;
-  height: 130px;
+  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: 25px;
+  font-size: 30px;
   font-style: normal;
   text-align: center;
-  // letter-spacing: 1.2px;
   line-height: normal;
 }
 
-.intro-box {
-  position: absolute;
-  left: 26.23%;
-  top: 40.5%;
-  width: 875px;
-  height: 200px;
-  overflow: hidden;
-  animation-name: changepos-1;
-  animation-duration: 4s;
-  animation-fill-mode: both;
+@keyframes changepos-1 {
+  0% {
+    top: 40.5%;
+  }
+  90% {
+    top: 40.5%;
+  }
+  100% {
+    top: 150%;
+  }
 }
 
-.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;
+@keyframes changepos-2 {
+  0% {
+    top: 100%;
+  }
+  25% {
+    top: 100%;
+  }
+  90% {
+    top: 100%;
+  }
+  100% {
+    top: 82%;
+  }
+}
+
+@keyframes slide-in {
+  0% {
+    left: -102%;
+  }
+  75% {
+    left: -102%;
+  }
+  100% {
+    left: 0%;
+  }
 }
diff --git a/src/app/endround/endround.component.ts b/src/app/endround/endround.component.ts
@@ -10,16 +10,23 @@ import { trigger, transition, style, animate } from "@angular/animations";
 })
 export class EndroundComponent implements OnChanges, OnInit {
   @Input() match!: any;
-  tournamentUrl: string =
-    this.match?.tournamentUrl && this.match.tournamentUrl !== ""
-      ? this.match.tournamentUrl
-      : "../../assets/misc/logo.webp";
-  tournamentBackgroundUrl: string =
-    this.match?.tournamentBackgroundUrl && this.match.tournamentBackgroundUrl !== ""
-      ? this.match.tournamentBackgroundUrl
-      : "../../assets/misc/backdrop.webp";
+  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);
   }

diff --git a/src/app/tracker/tracker.component.html b/src/app/tracker/tracker.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="shouldDisplay()">
   <app-topinfo [match]="match" />
   <app-topscore [match]="match" />
-  <app-endround [match]="match" />
+  <app-endround *ngIf="match.roundPhase !== 'shopping'" [match]="match" />
   <app-combat *ngIf="match.roundPhase !== 'shopping'" [match]="match" [@fade] />
   <app-scoreboard *ngIf="match.roundPhase === 'shopping'" [match]="match" [@fade] />
 </div>