From b889f2ee8b09cd9aca380b8d48f440e290c7942d Mon Sep 17 00:00:00 2001 From: Jay Date: Tue, 26 Nov 2024 12:34:08 +0100 Subject: [PATCH] started configuring the svg colors --- public/assets/config/config.json | 7 +- public/assets/shields/Heavy.svg | 3 + public/assets/shields/Light.svg | 3 + public/assets/shields/None.svg | 2 + public/assets/shields/Regen.svg | 3 + .../playercard/playercard.component.html | 78 +++++++++++++++---- .../combat/playercard/playercard.component.ts | 45 ++++++++++- src/app/topscore/topinfo/topinfo.component.ts | 12 +-- 8 files changed, 123 insertions(+), 30 deletions(-) create mode 100644 public/assets/shields/Heavy.svg create mode 100644 public/assets/shields/Light.svg create mode 100644 public/assets/shields/None.svg create mode 100644 public/assets/shields/Regen.svg diff --git a/public/assets/config/config.json b/public/assets/config/config.json index c3d957f..a82c068 100644 --- a/public/assets/config/config.json +++ b/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" } diff --git a/public/assets/shields/Heavy.svg b/public/assets/shields/Heavy.svg new file mode 100644 index 0000000..7968ea4 --- /dev/null +++ b/public/assets/shields/Heavy.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/assets/shields/Light.svg b/public/assets/shields/Light.svg new file mode 100644 index 0000000..3cc8763 --- /dev/null +++ b/public/assets/shields/Light.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/assets/shields/None.svg b/public/assets/shields/None.svg new file mode 100644 index 0000000..ee41798 --- /dev/null +++ b/public/assets/shields/None.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/public/assets/shields/Regen.svg b/public/assets/shields/Regen.svg new file mode 100644 index 0000000..b4f552b --- /dev/null +++ b/public/assets/shields/Regen.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/app/combat/playercard/playercard.component.html b/src/app/combat/playercard/playercard.component.html index 49725aa..cfcc619 100644 --- a/src/app/combat/playercard/playercard.component.html +++ b/src/app/combat/playercard/playercard.component.html @@ -3,52 +3,96 @@ -->
- +
-
+ " + >
- - +
- +
{{ player.money }}
{{ player.name }}
- +
-
+
- +
-
-
-
+
+
+ " + >
-
- +
+
- +
diff --git a/src/app/combat/playercard/playercard.component.ts b/src/app/combat/playercard/playercard.component.ts index 69b475c..6d07f4f 100644 --- a/src/app/combat/playercard/playercard.component.ts +++ b/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,6 +79,15 @@ export class InhouseTrackerPlayercardComponent { return this._player; } + ngOnInit(): void { + this.updateSvg(); + } + + ngOnChanges(): void { + console.log("onChanges: " + this.player.armorName); + this.updateSvg(); + } + numSequence(n: number): Array { return Array(n); } @@ -71,4 +95,19 @@ export class InhouseTrackerPlayercardComponent { 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), + ); + }); + } } diff --git a/src/app/topscore/topinfo/topinfo.component.ts b/src/app/topscore/topinfo/topinfo.component.ts index a336111..0ce0dd9 100644 --- a/src/app/topscore/topinfo/topinfo.component.ts +++ b/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, + ); + } } }