Add customization to the scoreboard

[J4yTr1n1ty]

This pull request is adding some features I've wanted to use myself and/or that had been asked if it was possible in the discord channels.

Main Additions

• Customizable Colors for attack and defense to suit branding
• Customizable Sponsor Images and making it rotate properly

Customizable Colors

Here I am thinking of two different functionalities, one is being able to set defaults in the JSON configuration file already existing in the previous version since #4. Additionally, the user of the HUD should be able to customize their HUD using query parameters, like the group code already does.

The colors are applied to the following elements:

• Background of Top Info
• Background of Buy Phase Scoreboard
• Background Gradient Start of Agent Pictures
• Background of Shield icon and text
• Background of Weapon Icons

Customizable Sponsor Images

Since this is already working with a single image, I have already expanded this (in 68cbd2d) to add multiple images in the config, since this is most likely only used in self-hosted scenarios. If there's enough need for it, I might add this to query parameters too, however this would make them very crowded which is not great for readability of links.

Considerations/Ideas for the future

Due to how dependent on users these configurations are, it would be possible to make them be passed by the client. However, I would refrain from doing that since the client already handles a lot for "only" being an observer client. In my opinion, an Admin Panel or similar should be added in the future to customize the HUD before observers can simply launch their client, type in their authentication data and launch the game. A tournament admin, or in some cases also the same person, can then submit all the information that's needed for the HUD to be customized correctly beforehand. This could be temporarily stored in something like a Redis database or even memory (scalability would be a problem here though), so it can easily be retrieved.

[J4yTr1n1ty]

Some in between results of how the colors are going to be changed. Currently working on getting the SVGs colored by the css variables. You can also see the sponsors that can be added in the config file.

[b4iterdev]

Great works !

[DarkView]

Heads up, in 3ffb160 we changed the naming of our logo a bit - icon will refer to the 1:1 image of the specter, while logo refers to the icon with text

[J4yTr1n1ty]

Thank you, rebased and updated the logos to match.

Meanwhile, I've been hitting some issues with how the SVG coloring is going to work. Currently, what I'm doing is updating the SVG with a function and replacing the fill color.

Spectra-Frontend/src/app/combat/playercard/playercard.component.ts

Lines 99 to 112 in b889f2e

	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),
	);
	});
	}

However, this has some issues because currently, the Input for the component will not trigger change detection and therefore not re-trigger the updateSvg method in, for example, the testing component. This would have to be changed to a BehaviorSubject so we can track the changes. If there's any other ideas you have to solve this, I'm very open to suggestions as I don't want to just rewrite a lot of the main functionality of the application without your opinions first @DarkView @Tiranthine.

[DarkView]

Yeah we tried changing the color with CSS and the like too, so we don't have to have different files for each color.
However, as you can tell by the presence of different files for each color, we couldn't figure it out sadly.
We'll just have to try different things out too, as using a script to replace the colors is... suboptimal.

[J4yTr1n1ty]

as using a script to replace the colors is... suboptimal.

Definitely true, the simple other option is to just have a separate component for the Shield where the SVGs are inside the template. That would solve the problem without having to rewrite everything to use Subjects. I'll try to implement it that way and then you can see if that's something that makes sense to you. I haven't found any other way to change the pictures other than using something like an SVG overlay over a white version of the graphic or a calculated filter.

[DarkView]

Yeah that was the only way we found too.
It's definitely weird.

[J4yTr1n1ty]

Doing everything in a separate component will work. So technically we can leave it like this for now. Definitely would have to think of changing the architecture a bit to better make use of BehaviorSubjects or signals.

[J4yTr1n1ty]

Since it's probably rarely gonna happen that changes need to be made to the Shield Icons such as recently, I think this option will hold out for a long time while keeping it all working with custom colors.

[J4yTr1n1ty]

A final screenshot of the Scoreboard as well

[J4yTr1n1ty]

Successfully rebased everything onto the current main branch and ran formatting as needed.

[J4yTr1n1ty]

This currently changes the default color in the config file here

Spectra-Frontend/public/assets/config/config.json

Line 6 in 06e9cd2

"defenderColor": "#3c82b8"

for easy review if everything is still recolored as it should. This should be changed before merging or immediately after so people that don't want the custom color don't get forced onto it.

I am also considering if I should add an optional query parameter for the colors, so people can use the official HUD without having to selfhost it to customize the colors. I would say this is up to @DarkView @Tiranthine depending on how something like an admin panel is coming along.

[DarkView]

Looking at the colors side by side, sadly the calculation approach to lightening the colors seems to produce results that are noticeably off from the original.
We could have users provide the lightened color as well and leave the whole color theory thing to them.
We could also re-introduce the multi-step-gradient by having users optionally provide all the needed steps themselves.

[J4yTr1n1ty]

Now it's pretty close. Gonna be seeing if I can get the gradient to be closer without having to add a fourth value per side :)

[J4yTr1n1ty]

Alright, so the reason the gradient doesn't look the same on this is because it's made inconsistently, where the secondary color is used for the red gradient but the primary for the green gradient. If you really want @DarkView I could add a fourth and fifth color option stating which color each gradient should use. But I think making the red a bit less potent is not that bad, but that's up to you. It's your project in the end.

Edit: now that I think about it, this would also mean adding a separate configuration option for the gradients in the round reasons and player score components

[DarkView]

Looks good to me otherwise!
We'll merge this in alongside #11 for a larger update after the holidays :)

[J4yTr1n1ty]

Applied the requested changes. Happy holidays!