Add colors to config, add rotating sponsor block (#9)

* added support for rotating sponsor images

* started working on customizable colors using css variables

* started configuring the svg colors

* migrated to using separate component for shields

* added default values in case they're not specified in the json config

* set correct color values in roundreasons

* updated README

* ran prettier and linting

* add configurable light colors

* added primary, secondary and credit colors as separate configuration

* equalized gradients as much as possible

* updated README to current configuration values and changed border color

* Load config with defaults instead of only set values, add shield-currency-rgb

* Get the colors a bit closer to the current colors

---------

Co-authored-by: Dunkel <7890309+DarkView@users.noreply.github.com>

README.md

@@ -4,24 +4,27 @@ Spectra is your all-in-one solution for an amazing looking Valorant Tournament O
 To learn more and see a live demo, visit [valospectra.com](https://www.valospectra.com/).
 
 It is comprised of three parts:
- - [The Spectra Client](https://github.com/ValoSpectra/Spectra-Client)
-   - Running this software on a single in-game observer provides the Spectra Server with all data currently provided by Overwolf.
- - [The Spectra Server](https://github.com/ValoSpectra/Spectra-Server)
-   - Ingests data from the Observer Client to reproduce the games state, allowing us to have an accurate representation of the game for further use.
- - [The Spectra Frontend](https://github.com/ValoSpectra/Spectra-Frontend)
-   - Receives the game state from the Server every 100 milliseconds, presenting it in a beautiful manner for viewers to enjoy.
+
+- [The Spectra Client](https://github.com/ValoSpectra/Spectra-Client)
+  - Running this software on a single in-game observer provides the Spectra Server with all data currently provided by Overwolf.
+- [The Spectra Server](https://github.com/ValoSpectra/Spectra-Server)
+  - Ingests data from the Observer Client to reproduce the games state, allowing us to have an accurate representation of the game for further use.
+- [The Spectra Frontend](https://github.com/ValoSpectra/Spectra-Frontend)
+  - Receives the game state from the Server every 100 milliseconds, presenting it in a beautiful manner for viewers to enjoy.
 
 Further updates for new features, as well as a detailed setup guide and an easy to host docker container are in the pipeline!
 
 # Docker Compose tutorial:
 
-First, create a seperate folder in your working directory and create a folder ``` config``` inside it:
+First, create a seperate folder in your working directory and create a folder ` config` inside it:
+
 ```
 mkdir -p spectra-frontend/config
 cd spectra-frontend
 ```
 
-Create a file named ```docker-compose.yml``` as follow:
+Create a file named `docker-compose.yml` as follow:
+
 ```
 ---
 services:
@@ -32,17 +35,30 @@ services:
     volumes:
       - ./config:/usr/share/nginx/html/assets/config/
 ```
-You can change ```3000``` to a different port which you want the frontend accessible outside the container to.
 
-Inside ``` config``` folder, create a file named ```config.json``` with the following content: 
+You can change `3000` to a different port which you want the frontend accessible outside the container to.
+
+Inside `config` folder, create a file named `config.json` with the following content:
+
 ```
 {
-    "serverEndpoint": "https://localhost:5200"
+  "serverEndpoint": "http://localhost:5200",
+  "sponsorImageUrls": ["/assets/misc/logo.webp"],
+  "sponsorImageRotateSpeed": 5000,
+  "attackerColorPrimary": "#932530",
+  "attackerColorSecondary": "#a30010",
+  "attackerColorShieldCurrency": "#ff838f",
+  "defenderColorPrimary": "#1e8a61",
+  "defenderColorSecondary": "#138c69",
+  "defenderColorShieldCurrency": "#61eab6"
 }
 ```
-Replace ``` https://localhost:5200``` with your Spectra Server address and outcoming port (default is 5200).
 
-After that you can start the frontend by running ```docker compose up -d``` and the frontend are accessible at port ```3000``` by default.
+For the most up to date version of the available configuration values, check out the `config.ts` file in the `src/app/shared/config.ts` file.
+
+Replace `https://localhost:5200` with your Spectra Server address and outcoming port (default is 5200).
+
+After that you can start the frontend by running `docker compose up -d` and the frontend are accessible at port `3000` by default.
 
 # DISCLAIMER
 

public/assets/config/config.json

@@ -1,3 +1,11 @@
 {
-  "serverEndpoint": "http://localhost:5200"
+  "serverEndpoint": "http://localhost:5200",
+  "sponsorImageUrls": ["/assets/misc/logo.webp"],
+  "sponsorImageRotateSpeed": 5000,
+  "attackerColorPrimary": "#b82e3c",
+  "attackerColorSecondary": "#ff4557",
+  "attackerColorShieldCurrency": "#ff838f",
+  "defenderColorPrimary": "#25ac79",
+  "defenderColorSecondary": "#61eab6",
+  "defenderColorShieldCurrency": "#61eab6"
 }