From d51c917559a957eca1146217cd83c2383c98b9b3 Mon Sep 17 00:00:00 2001
From: Dunkel <7890309+DarkView@users.noreply.github.com>
Date: Thu, 16 Jan 2025 19:00:48 +0100
Subject: [PATCH] Display upcoming rounds

---
 .../roundreasons/roundreasons.component.html  | 25 +++++--------------
 .../roundreasons/roundreasons.component.scss  | 17 ++++++++++++-
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/app/scoreboard/roundreasons/roundreasons.component.html b/src/app/scoreboard/roundreasons/roundreasons.component.html
index 6a70d7f..24d254e 100644
--- a/src/app/scoreboard/roundreasons/roundreasons.component.html
+++ b/src/app/scoreboard/roundreasons/roundreasons.component.html
@@ -14,7 +14,7 @@
 
         <div
           [class]="'reason-color top ' + (record.wasAttack ? 'attacker' : 'defender')"
-          *ngIf="record.type !== 'lost'"
+          *ngIf="record.type !== 'lost' && record.type !== 'upcoming'"
         >
           <div class="image-container">
             <img class="image" src="{{ assets }}/roundWinReason/{{ record.type }}.webp" />
@@ -24,6 +24,10 @@
         <div class="reason-color lost" *ngIf="record.type === 'lost'">
           <div class="round-number">{{ record.round }}</div>
         </div>
+
+        <div class="reason-color lost" *ngIf="record.type === 'upcoming'">
+          <div class="round-number-upcoming">{{ record.round }}</div>
+        </div>
       </div>
     </div>
   </div>
@@ -43,7 +47,7 @@
 
         <div
           [class]="'reason-color bottom ' + (record.wasAttack ? 'attacker' : 'defender')"
-          *ngIf="record.type !== 'lost'"
+          *ngIf="record.type !== 'lost' && record.type !== 'upcoming'"
         >
           <div class="image-container">
             <img class="image" src="{{ assets }}/roundWinReason/{{ record.type }}.webp" />
@@ -56,21 +60,4 @@
       </div>
     </div>
   </div>
-
-  <!-- <div class="reason-color top red">
-    <div class="image-container"><img class="image" src="../../assets/roundWinReason/kills.webp" /></div>
-  </div>
-  <div class="reason-color bottom green">
-    <div class="image-container"><img class="image" src="../../assets/roundWinReason/detonated.webp" /></div>
-  </div>
-  <div class="divider">
-    <img class="line" src="../../assets/roundWinReason/divider-line.svg" /> <img class="line"
-      src="../../assets/roundWinReason/divider-line.svg" />
-  </div>
-  <div class="reason-color bottom red">
-    <div class="image-container"><img class="image" src="../../assets/roundWinReason/defused.webp" /></div>
-  </div>
-  <div class="reason-color top green">
-    <div class="image-container"><img class="image" src="../../assets/roundWinReason/defused.webp" /></div>
-  </div> -->
 </div>
diff --git a/src/app/scoreboard/roundreasons/roundreasons.component.scss b/src/app/scoreboard/roundreasons/roundreasons.component.scss
index 53194ec..5134540 100644
--- a/src/app/scoreboard/roundreasons/roundreasons.component.scss
+++ b/src/app/scoreboard/roundreasons/roundreasons.component.scss
@@ -69,13 +69,28 @@
   line-height: 40px;
 
   text-align: center;
-  color: white;
+  color: rgba(255, 255, 255, 0.8);
 
   font-size: 16px;
   font-weight: 800;
   font-family: "Unbounded", Helvetica;
 }
 
+.round-number-upcoming {
+  position: absolute;
+  left: 0;
+  top: 24px;
+  width: 40px;
+
+  line-height: 40px;
+  text-align: center;
+  color: white;
+
+  font-size: 20px;
+  font-weight: 800;
+  font-family: "Unbounded", Helvetica;
+}
+
 .reason-color {
   display: inline-flex;
   flex-direction: column;