started configuring the svg colors

public/assets/config/config.json

@@ -1,10 +1,7 @@
 {
   "serverEndpoint": "http://localhost:5200",
-  "sponsorImageUrls": [
-    "/assets/misc/logo.webp",
-    "https://projectchaos.ch/wp-content/plugins/maintenance-mode-master/assets/images/logo.png"
-  ],
+  "sponsorImageUrls": ["/assets/misc/logo.webp"],
   "sponsorImageRotateSpeed": 5000,
   "attackerColor": "#b82e3c",
-  "defenderColor": "#2e3cb8"
+  "defenderColor": "#25ac79"
 }

src/app/combat/playercard/playercard.component.html

@@ -3,52 +3,96 @@
         <img class="rank-icon" [class]="side" src="{{assets}}/ranks/{{match.ranksByName[player.name]}}_Rank.webp" />
     </div> -->
   <div class="agent-icon-container">
-    <img class="agent-icon" [class]="player.isAlive ? '' : 'dead'"
-      src="{{ assets }}/agents/{{ player.agentInternal }}Icon.webp" />
+    <img
+      class="agent-icon"
+      [class]="player.isAlive ? '' : 'dead'"
+      src="{{ assets }}/agents/{{ player.agentInternal }}Icon.webp"
+    />
   </div>
   <div class="player-card">
-    <div class="player-info" [class]="
+    <div
+      class="player-info"
+      [class]="
         color +
         ' ' +
         (player.isAlive ? 'alive' : 'dead') +
         ' ' +
         (player.isObserved ? 'observed' : '')
-      ">
+      "
+    >
       <div class="spectator-icon-container" *ngIf="player.isObserved">
         <img class="spectator-icon" src="{{ assets }}/misc/ObserverEye.svg" />
       </div>
       <div class="info-container">
         <div class="shields-currency">
-          <img class="shield-icon" [class]="color" src="{{ assets }}/shields/{{ player.armorName }}Green.svg" />
-          <!--TODO: dynamically change shield color -->
+          <img class="shield-icon" [src]="shieldImage" />
           <div class="currency-container" [class]="side">
-            <img class="valorant-credits" [class]="color" src="{{ assets }}/misc/ValorantCreditsWhite.svg" />
+            <img
+              class="valorant-credits"
+              [class]="color"
+              src="{{ assets }}/misc/ValorantCreditsWhite.svg"
+            />
             <!--TODO: dynamically change currency color-->
             <div class="currency-title" [class]="color">{{ player.money }}</div>
           </div>
         </div>
         <div class="username-container">
           <div class="username-title" [class]="side">{{ player.name }}</div>
-          <img class="captain-icon" *ngIf="player.isCaptain" src="{{ assets }}/misc/TeamCaptain.svg" />
+          <img
+            class="captain-icon"
+            *ngIf="player.isCaptain"
+            src="{{ assets }}/misc/TeamCaptain.svg"
+          />
         </div>
       </div>
     </div>
-    <div class="utility-container" [class]="color" *ngIf="player.isAlive" [@deathAnimation]="player.isAlive">
+    <div
+      class="utility-container"
+      [class]="color"
+      *ngIf="player.isAlive"
+      [@deathAnimation]="player.isAlive"
+    >
       <div class="weapon-icon-wrapper">
-        <img class="weapon-icon" src="{{ assets }}/weapons/{{ player.highestWeapon }}Killfeed.webp" />
+        <img
+          class="weapon-icon"
+          src="{{ assets }}/weapons/{{ player.highestWeapon }}Killfeed.webp"
+        />
       </div>
       <div class="ultimate-tracker-container">
-        <div class="ultimate-tracker" [class]="side" *ngIf="!player.ultReady" [@ultPipAnimation]>
-          <div class="pip-ultimate-full" *ngFor="let i of numSequence(player.currUltPoints)"></div>
-          <div class="pip-ultimate" *ngFor="
+        <div
+          class="ultimate-tracker"
+          [class]="side"
+          *ngIf="!player.ultReady"
+          [@ultPipAnimation]
+        >
+          <div
+            class="pip-ultimate-full"
+            *ngFor="let i of numSequence(player.currUltPoints)"
+          ></div>
+          <div
+            class="pip-ultimate"
+            *ngFor="
               let i of numSequence(player.maxUltPoints - player.currUltPoints)
-            "></div>
+            "
+          ></div>
         </div>
-        <div class="ultimate-tracker" [class]="side" *ngIf="player.ultReady" [@ultImageAnimation]>
-          <img class="ultimate-full-image" src="{{ assets }}/ultimates/{{ player.agentInternal }}Ultimate.webp" />
+        <div
+          class="ultimate-tracker"
+          [class]="side"
+          *ngIf="player.ultReady"
+          [@ultImageAnimation]
+        >
+          <img
+            class="ultimate-full-image"
+            src="{{ assets }}/ultimates/{{ player.agentInternal }}Ultimate.webp"
+          />
         </div>
         <div class="spike-icon-wrapper">
-          <img class="spike-icon" *ngIf="player.hasSpike" src="{{ assets }}/misc/Spike_Icon.svg" />
+          <img
+            class="spike-icon"
+            *ngIf="player.hasSpike"
+            src="{{ assets }}/misc/Spike_Icon.svg"
+          />
         </div>
       </div>
     </div>

src/app/combat/playercard/playercard.component.ts

@@ -1,5 +1,14 @@
 import { trigger, transition, style, animate } from "@angular/animations";
-import { Component, Input } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import {
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from "@angular/core";
+import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
+import { Config } from "../../shared/config";
 
 @Component({
   selector: "app-playercard",
@@ -44,7 +53,7 @@ import { Component, Input } from "@angular/core";
     ]),
   ],
 })
-export class InhouseTrackerPlayercardComponent {
+export class InhouseTrackerPlayercardComponent implements OnInit, OnChanges {
   public readonly assets: String = "../../../assets";
 
   @Input() match!: any;
@@ -53,7 +62,13 @@ export class InhouseTrackerPlayercardComponent {
 
   private _player: any;
 
-  constructor() { }
+  public shieldImage: SafeHtml = "";
+
+  constructor(
+    private http: HttpClient,
+    private sanitizer: DomSanitizer,
+    private config: Config,
+  ) { }
 
   @Input()
   set player(player: any) {
@@ -64,11 +79,35 @@ export class InhouseTrackerPlayercardComponent {
     return this._player;
   }
 
+  ngOnInit(): void {
+    this.updateSvg();
+  }
+
+  ngOnChanges(): void {
+    console.log("onChanges: " + this.player.armorName);
+    this.updateSvg();
+  }
+
   numSequence(n: number): Array<number> {
     return Array(n);
   }
 
   capitalizeColor(s: string) {
     return s[0].toUpperCase() + s.substring(1);
   }
+
+  updateSvg() {
+    console.log(this.player.armorName);
+    let svgUrl = this.assets + "/shields/" + this.player.armorName + ".svg";
+    let color =
+      this.color == "attacker"
+        ? this.config.attackerColor
+        : this.config.defenderColor;
+    this.http.get(svgUrl, { responseType: "text" }).subscribe((svg) => {
+      const modifiedSvg = svg.replace(/fill="[^"]*"/g, `fill="${color}"`);
+      this.shieldImage = this.sanitizer.bypassSecurityTrustUrl(
+        "data:image/svg+xml;base64," + btoa(modifiedSvg),
+      );
+    });
+  }
 }

src/app/topscore/topinfo/topinfo.component.ts

@@ -21,17 +21,19 @@ export class TopinfoComponent {
   sponsorImages: string[] = [];
   currentSponsorIndex = 0;
 
-  constructor(private config: Config) {}
+  constructor(private config: Config) { }
 
   ngOnInit() {
     this.sponsorsAvailable = this.config.sponsorImageUrls.length > 0;
     if (this.sponsorsAvailable) {
       this.sponsorImages = this.config.sponsorImageUrls;
       this.currentSponsorIndex = 0;
-      setInterval(
-        () => this.nextSponsor(),
-        this.config.sponsorImageRotateSpeed,
-      );
+      if (this.config.sponsorImageUrls.length > 1) {
+        setInterval(
+          () => this.nextSponsor(),
+          this.config.sponsorImageRotateSpeed,
+        );
+      }
     }
   }