diff --git a/README.md b/README.md index cbd6e81..73fc8f3 100644 --- a/README.md +++ b/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 diff --git a/public/assets/config/config.json b/public/assets/config/config.json index e8ae04b..9898def 100644 --- a/public/assets/config/config.json +++ b/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" } diff --git a/public/assets/shields/HeavyGreen.svg b/public/assets/shields/HeavyGreen.svg deleted file mode 100644 index 7968ea4..0000000 --- a/public/assets/shields/HeavyGreen.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/public/assets/shields/HeavyRed.svg b/public/assets/shields/HeavyRed.svg deleted file mode 100644 index 99d573c..0000000 --- a/public/assets/shields/HeavyRed.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/public/assets/shields/LightGreen.svg b/public/assets/shields/LightGreen.svg deleted file mode 100644 index 3cc8763..0000000 --- a/public/assets/shields/LightGreen.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/public/assets/shields/LightRed.svg b/public/assets/shields/LightRed.svg deleted file mode 100644 index c1c360b..0000000 --- a/public/assets/shields/LightRed.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/public/assets/shields/NoneGreen.svg b/public/assets/shields/NoneGreen.svg deleted file mode 100644 index ee41798..0000000 --- a/public/assets/shields/NoneGreen.svg +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/public/assets/shields/NoneRed.svg b/public/assets/shields/NoneRed.svg deleted file mode 100644 index ee41798..0000000 --- a/public/assets/shields/NoneRed.svg +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/public/assets/shields/RegenGreen.svg b/public/assets/shields/RegenGreen.svg deleted file mode 100644 index b4f552b..0000000 --- a/public/assets/shields/RegenGreen.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/public/assets/shields/RegenRed.svg b/public/assets/shields/RegenRed.svg deleted file mode 100644 index 5467d78..0000000 --- a/public/assets/shields/RegenRed.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 3b24e6a..de4fc3a 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,10 +1,74 @@ -import { Component } from "@angular/core"; +import { Component, OnInit } from "@angular/core"; +import { Config } from "./shared/config"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.scss"], }) -export class AppComponent { +export class AppComponent implements OnInit { title = "SpectraFrontend"; + + constructor(private config: Config) {} + + ngOnInit(): void { + document.documentElement.style.setProperty( + "--defender-color", + this.config.defenderColorPrimary, + ); + document.documentElement.style.setProperty( + "--defender-color-rgb", + this.hexToRgb(this.config.defenderColorPrimary).join(", "), + ); + document.documentElement.style.setProperty( + "--attacker-color", + this.config.attackerColorPrimary, + ); + document.documentElement.style.setProperty( + "--attacker-color-rgb", + this.hexToRgb(this.config.attackerColorPrimary).join(", "), + ); + document.documentElement.style.setProperty( + "--defender-color-secondary", + this.config.defenderColorSecondary, + ); + document.documentElement.style.setProperty( + "--defender-color-secondary-rgb", + this.hexToRgb(this.config.defenderColorSecondary).join(", "), + ); + document.documentElement.style.setProperty( + "--attacker-color-secondary", + this.config.attackerColorSecondary, + ); + document.documentElement.style.setProperty( + "--attacker-color-secondary-rgb", + this.hexToRgb(this.config.attackerColorSecondary).join(", "), + ); + document.documentElement.style.setProperty( + "--defender-color-shield-currency", + this.config.defenderColorShieldCurrency, + ); + document.documentElement.style.setProperty( + "--defender-color-shield-currency-rgb", + this.hexToRgb(this.config.defenderColorShieldCurrency).join(", "), + ); + document.documentElement.style.setProperty( + "--attacker-color-shield-currency", + this.config.attackerColorShieldCurrency, + ); + document.documentElement.style.setProperty( + "--attacker-color-shield-currency-rgb", + this.hexToRgb(this.config.attackerColorShieldCurrency).join(", "), + ); + } + + hexToRgb(hex: string): number[] { + hex = hex.replace(/^#/, ""); + + const r = parseInt(hex.substring(0, 2), 16); + const g = parseInt(hex.substring(2, 4), 16); + const b = parseInt(hex.substring(4, 6), 16); + + return [r, g, b]; + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 085449a..aa3d1b5 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -18,6 +18,7 @@ import { InhouseTrackerPlayercardComponent } from "./combat/playercard/playercar import { OverlayComponent } from "./overlay/overlay.component"; import { PlayerControllerComponent } from "./testing/player-controller/player-controller.component"; import { TeamControllerComponent } from "./testing/team-controller/team-controller.component"; +import { ShieldIconComponent } from "./combat/playercard/shield-icon/shield-icon.component"; @NgModule({ declarations: [ @@ -34,6 +35,7 @@ import { TeamControllerComponent } from "./testing/team-controller/team-controll OverlayComponent, PlayerControllerComponent, TeamControllerComponent, + ShieldIconComponent, ], exports: [], bootstrap: [AppComponent], diff --git a/src/app/combat/combat.component.html b/src/app/combat/combat.component.html index c092747..9b08889 100644 --- a/src/app/combat/combat.component.html +++ b/src/app/combat/combat.component.html @@ -4,7 +4,7 @@ *ngFor="let player of match.teams[0].players; trackBy: trackByPlayerId" [match]="match" [player]="player" - [color]="match.teams[0].isAttacking ? 'red' : 'green'" + [color]="match.teams[0].isAttacking ? 'attacker' : 'defender'" side="left" /> @@ -13,7 +13,7 @@ *ngFor="let player of match.teams[1].players; trackBy: trackByPlayerId" [match]="match" [player]="player" - [color]="match.teams[1].isAttacking ? 'red' : 'green'" + [color]="match.teams[1].isAttacking ? 'attacker' : 'defender'" side="right" /> diff --git a/src/app/combat/playercard/playercard.component.html b/src/app/combat/playercard/playercard.component.html index 17115ea..5a8d96b 100644 --- a/src/app/combat/playercard/playercard.component.html +++ b/src/app/combat/playercard/playercard.component.html @@ -25,15 +25,22 @@
- +
- + + +
{{ player.money }}
diff --git a/src/app/combat/playercard/playercard.component.scss b/src/app/combat/playercard/playercard.component.scss index e9723f6..c6a142a 100644 --- a/src/app/combat/playercard/playercard.component.scss +++ b/src/app/combat/playercard/playercard.component.scss @@ -48,24 +48,24 @@ position: relative; border: 0px none; - &.red { + &.attacker { @extend .utility-container; background: linear-gradient( 90deg, - rgba(255, 69, 87, 0.52) 0%, - rgba(255, 69, 87, 0.3) 58.5%, - rgba(26.56, 7.42, 9.27, 0.09) 90.5%, - rgba(10.63, 3.05, 3.79, 0) 100% + rgba(var(--attacker-color-secondary-rgb), 0.5) 0%, + rgba(var(--attacker-color-rgb), 0.3) 58.5%, + rgba(var(--attacker-color-rgb), 0.01) 90.5%, + rgba(0, 0, 0, 0) 100% ); } - &.green { + &.defender { @extend .utility-container; background: linear-gradient( 90deg, - rgba(97, 234, 182, 0.52) 0%, - rgba(56.26, 135.72, 105.56, 0.3) 58.5%, - rgba(17.62, 42.51, 33.07, 0.09) 90.5%, + rgba(var(--defender-color-shield-currency-rgb), 0.5) 0%, + rgba(var(--defender-color-rgb), 0.2) 58.5%, + rgba(var(--defender-color-rgb), 0.01) 90.5%, rgba(0, 0, 0, 0) 100% ); } @@ -180,17 +180,25 @@ border-bottom-style: solid; overflow: hidden; - &.green { + &.defender { @extend .player-info; - border-color: #61eab6; - background: linear-gradient(90deg, rgba(31, 122, 88, 0.4) 0%, rgba(31, 122, 88, 0) 100%), + border-color: var(--defender-color-shield-currency); + background: linear-gradient( + 90deg, + rgba(var(--defender-color-rgb), 0.3) 0%, + rgba(var(--defender-color-rgb), 0) 100% + ), rgba(15, 25, 35, 0.6); } - &.red { + &.attacker { @extend .player-info; - border-color: #ff4557; - background: linear-gradient(90deg, rgba(255, 69, 87, 0.3) 0%, rgba(31, 122, 88, 0) 100%), + border-color: var(--attacker-color-shield-currency); + background: linear-gradient( + 90deg, + rgba(var(--attacker-color-rgb), 0.5) 0%, + rgba(var(--attacker-color-rgb), 0) 100% + ), rgba(15, 25, 35, 0.6); } @@ -244,13 +252,6 @@ position: relative; } -.shield-icon { - height: 22px; - width: 22px; - position: relative; - flex: 0 0 auto; -} - .captain-icon { height: 17px; width: 17px; @@ -270,6 +271,16 @@ position: relative; width: 8px; height: 8px; + + &.attacker { + @extend .valorant-credits; + fill: var(--attacker-color-shield-currency); + } + + &.defender { + @extend .valorant-credits; + fill: var(--defender-color-shield-currency); + } } .currency-title { @@ -285,14 +296,14 @@ line-height: normal; white-space: nowrap; - &.red { + &.attacker { @extend .currency-title; - color: #ff838f; + color: var(--attacker-color-shield-currency); } - &.green { + &.defender { @extend .currency-title; - color: #61eab6; + color: var(--defender-color-shield-currency); } } diff --git a/src/app/combat/playercard/playercard.component.ts b/src/app/combat/playercard/playercard.component.ts index ec0e77c..365b101 100644 --- a/src/app/combat/playercard/playercard.component.ts +++ b/src/app/combat/playercard/playercard.component.ts @@ -1,5 +1,6 @@ import { trigger, transition, style, animate } from "@angular/animations"; import { Component, Input } from "@angular/core"; +import { Config } from "../../shared/config"; @Component({ selector: "app-playercard", @@ -42,11 +43,13 @@ export class InhouseTrackerPlayercardComponent { public readonly assets: string = "../../../assets"; @Input() match!: any; - @Input() color!: "red" | "green"; + @Input() color!: "attacker" | "defender"; @Input() side!: "left" | "right"; private _player: any; + constructor(private config: Config) {} + @Input() set player(player: any) { this._player = player; @@ -56,6 +59,12 @@ export class InhouseTrackerPlayercardComponent { return this._player; } + get colorHex() { + return this.color == "attacker" + ? this.config.attackerColorShieldCurrency + : this.config.defenderColorShieldCurrency; + } + numSequence(n: number): number[] { return Array(n); } diff --git a/src/app/combat/playercard/shield-icon/shield-icon.component.html b/src/app/combat/playercard/shield-icon/shield-icon.component.html new file mode 100644 index 0000000..8208d8e --- /dev/null +++ b/src/app/combat/playercard/shield-icon/shield-icon.component.html @@ -0,0 +1,48 @@ + + + + + + + + + + + diff --git a/src/app/combat/playercard/shield-icon/shield-icon.component.scss b/src/app/combat/playercard/shield-icon/shield-icon.component.scss new file mode 100644 index 0000000..0e5b22b --- /dev/null +++ b/src/app/combat/playercard/shield-icon/shield-icon.component.scss @@ -0,0 +1,6 @@ +svg { + height: 22px; + width: 22px; + position: relative; + flex: 0 0 auto; +} diff --git a/src/app/combat/playercard/shield-icon/shield-icon.component.ts b/src/app/combat/playercard/shield-icon/shield-icon.component.ts new file mode 100644 index 0000000..0fd63e9 --- /dev/null +++ b/src/app/combat/playercard/shield-icon/shield-icon.component.ts @@ -0,0 +1,20 @@ +import { Component, Input } from "@angular/core"; +import { Config } from "../../../shared/config"; + +@Component({ + selector: "app-shield-icon", + templateUrl: "./shield-icon.component.html", + styleUrl: "./shield-icon.component.scss", +}) +export class ShieldIconComponent { + @Input({ required: true }) type!: "Heavy" | "Regen" | "Light" | "None"; + @Input({ required: true }) side!: "attacker" | "defender"; + + constructor(private config: Config) {} + + get color() { + return this.side == "attacker" + ? this.config.attackerColorShieldCurrency + : this.config.defenderColorShieldCurrency; + } +} diff --git a/src/app/scoreboard/playerscore/playerscore.component.scss b/src/app/scoreboard/playerscore/playerscore.component.scss index 3e598ce..e9c2e53 100644 --- a/src/app/scoreboard/playerscore/playerscore.component.scss +++ b/src/app/scoreboard/playerscore/playerscore.component.scss @@ -15,23 +15,23 @@ position: relative; flex: 0 0 auto; - &.green { + &.defender { background: linear-gradient( 90deg, - rgba(31, 122, 88, 0) 3.74%, - #1f7a58 5.57%, - rgba(31, 122, 88, 0.45) 22.42%, - rgba(31, 122, 88, 0) 37.11% + rgba(var(--defender-color-rgb), 0) 3.74%, + rgba(var(--defender-color-rgb), 0.65) 5.57%, + rgba(var(--defender-color-rgb), 0.3) 22.42%, + rgba(var(--defender-color-rgb), 0) 37.11% ); } - &.red { + &.attacker { background: linear-gradient( 90deg, - rgba(165, 68, 77, 0) 4.69%, - #a5444d 6.5%, - rgba(165, 68, 77, 0.45) 23.1%, - rgba(165, 68, 77, 0) 37.57% + rgba(var(--attacker-color-rgb), 0) 4.69%, + rgba(var(--attacker-color-rgb), 0.65) 6.5%, + rgba(var(--attacker-color-rgb), 0.3) 23.1%, + rgba(var(--attacker-color-rgb), 0) 37.57% ); } } diff --git a/src/app/scoreboard/playerscore/playerscore.component.ts b/src/app/scoreboard/playerscore/playerscore.component.ts index 60b4016..57d7ed9 100644 --- a/src/app/scoreboard/playerscore/playerscore.component.ts +++ b/src/app/scoreboard/playerscore/playerscore.component.ts @@ -10,7 +10,7 @@ export class PlayerscoreComponent { @Input() match!: any; @Input() player!: any; - @Input() color!: "red" | "green"; + @Input() color!: "attacker" | "defender"; @Input() side!: "left" | "right"; numSequence(n: number): number[] { diff --git a/src/app/scoreboard/roundreasons/roundreasons.component.html b/src/app/scoreboard/roundreasons/roundreasons.component.html index ada0895..6a70d7f 100644 --- a/src/app/scoreboard/roundreasons/roundreasons.component.html +++ b/src/app/scoreboard/roundreasons/roundreasons.component.html @@ -13,7 +13,7 @@
@@ -42,7 +42,7 @@
diff --git a/src/app/scoreboard/roundreasons/roundreasons.component.scss b/src/app/scoreboard/roundreasons/roundreasons.component.scss index 60dff80..53194ec 100644 --- a/src/app/scoreboard/roundreasons/roundreasons.component.scss +++ b/src/app/scoreboard/roundreasons/roundreasons.component.scss @@ -94,16 +94,24 @@ border-top-style: solid; // Colors need to be in top and bottom because the gradient is shifts direction - &.red { + &.attacker { @extend .top; - border-color: #ff4557; - background: linear-gradient(180deg, rgba(255, 69, 87, 0.28) 0%, rgba(255, 69, 87, 0) 100%); + border-color: var(--attacker-color-secondary); + background: linear-gradient( + 180deg, + rgba(var(--attacker-color-secondary-rgb), 0.28) 0%, + rgba(var(--attacker-color-secondary-rgb), 0) 100% + ); } - &.green { + &.defender { @extend .top; - border-color: #61eab6; - background: linear-gradient(180deg, rgba(97, 234, 182, 0.28) 0%, rgba(97, 234, 182, 0) 100%); + border-color: var(--defender-color-shield-currency); + background: linear-gradient( + 180deg, + rgba(var(--defender-color-shield-currency-rgb), 0.28) 0%, + rgba(var(--defender-color-shield-currency-rgb), 0) 100% + ); } } @@ -112,16 +120,24 @@ border-bottom-width: 2px; border-bottom-style: solid; - &.red { + &.attacker { @extend .bottom; - border-color: #ff4557; - background: linear-gradient(180deg, rgba(255, 69, 87, 0) 0%, rgba(255, 69, 87, 0.28) 100%); + border-color: var(--attacker-color-secondary); + background: linear-gradient( + 180deg, + rgba(var(--attacker-color-secondary-rgb), 0) 0%, + rgba(var(--attacker-color-secondary-rgb), 0.28) 100% + ); } - &.green { + &.defender { @extend .bottom; - border-color: #61eab6; - background: linear-gradient(180deg, rgba(97, 234, 182, 0) 0%, rgba(97, 234, 182, 0.28) 100%); + border-color: var(--defender-color-shield-currency); + background: linear-gradient( + 180deg, + rgba(var(--defender-color-shield-currency-rgb), 0) 0%, + rgba(var(--defender-color-shield-currency-rgb), 0.28) 100% + ); } } } diff --git a/src/app/scoreboard/scoreboard.component.html b/src/app/scoreboard/scoreboard.component.html index fc56582..63a5131 100644 --- a/src/app/scoreboard/scoreboard.component.html +++ b/src/app/scoreboard/scoreboard.component.html @@ -34,7 +34,7 @@ *ngFor="let player of match.teams[0].players; trackBy: trackByPlayerId" [match]="match" [player]="player" - [color]="match.teams[0].isAttacking ? 'red' : 'green'" + [color]="match.teams[0].isAttacking ? 'attacker' : 'defender'" side="left" />
@@ -43,7 +43,7 @@ *ngFor="let player of match.teams[1].players; trackBy: trackByPlayerId" [match]="match" [player]="player" - [color]="match.teams[1].isAttacking ? 'red' : 'green'" + [color]="match.teams[1].isAttacking ? 'attacker' : 'defender'" side="right" />
diff --git a/src/app/shared/config.ts b/src/app/shared/config.ts index 959f03c..a1b0e3c 100644 --- a/src/app/shared/config.ts +++ b/src/app/shared/config.ts @@ -1,3 +1,17 @@ export class Config { - serverEndpoint!: string; + serverEndpoint = "http://localhost:5200"; + sponsorImageUrls: string[] = []; + sponsorImageRotateSpeed = 5000; // in milliseconds + + attackerColorPrimary = "#b82e3c"; + attackerColorSecondary = "#ff4557"; + attackerColorShieldCurrency = "#ff838f"; + + defenderColorPrimary = "#25ac79"; + defenderColorSecondary = "#61eab6"; + defenderColorShieldCurrency = "#61eab6"; + + public constructor(init?: Partial) { + Object.assign(this, init); + } } diff --git a/src/app/topscore/topinfo/topinfo.component.html b/src/app/topscore/topinfo/topinfo.component.html index 7105ad9..22cfff5 100644 --- a/src/app/topscore/topinfo/topinfo.component.html +++ b/src/app/topscore/topinfo/topinfo.component.html @@ -16,8 +16,16 @@
valospectra.com
-
- + diff --git a/src/app/topscore/topinfo/topinfo.component.scss b/src/app/topscore/topinfo/topinfo.component.scss index 20602ec..81fdb56 100644 --- a/src/app/topscore/topinfo/topinfo.component.scss +++ b/src/app/topscore/topinfo/topinfo.component.scss @@ -49,7 +49,7 @@ white-space: nowrap; } -.topinfo-ad-display { +.sponsor-container { position: absolute; width: 240px; height: 88px; @@ -58,13 +58,14 @@ background: rgba(0, 0, 0, 0.6); } -.UP-onlylogo { +.sponsor-logo { position: absolute; width: 156px; height: 71px; top: 11px; left: 42px; - object-fit: cover; + object-fit: contain; + transition: opacity 1s ease-in-out; } .spectra-logo { diff --git a/src/app/topscore/topinfo/topinfo.component.ts b/src/app/topscore/topinfo/topinfo.component.ts index c1e29e8..5a5312c 100644 --- a/src/app/topscore/topinfo/topinfo.component.ts +++ b/src/app/topscore/topinfo/topinfo.component.ts @@ -1,8 +1,37 @@ -import { Component } from "@angular/core"; +import { Component, OnInit } from "@angular/core"; +import { Config } from "../../shared/config"; +import { animate, style, transition, trigger } from "@angular/animations"; @Component({ selector: "app-topinfo", templateUrl: "./topinfo.component.html", styleUrls: ["./topinfo.component.scss"], + animations: [ + trigger("fadeInOut", [ + transition(":enter", [style({ opacity: 0 }), animate("1s", style({ opacity: 1 }))]), + transition(":leave", [animate("1s", style({ opacity: 0 }))]), + ]), + ], }) -export class TopinfoComponent {} +export class TopinfoComponent implements OnInit { + sponsorsAvailable = false; + sponsorImages: string[] = []; + currentSponsorIndex = 0; + + constructor(private config: Config) {} + + ngOnInit() { + this.sponsorsAvailable = this.config.sponsorImageUrls.length > 0; + if (this.sponsorsAvailable) { + this.sponsorImages = this.config.sponsorImageUrls; + this.currentSponsorIndex = 0; + if (this.config.sponsorImageUrls.length > 1) { + setInterval(() => this.nextSponsor(), this.config.sponsorImageRotateSpeed); + } + } + } + + nextSponsor() { + this.currentSponsorIndex = (this.currentSponsorIndex + 1) % this.config.sponsorImageUrls.length; + } +} diff --git a/src/app/topscore/topscore.component.html b/src/app/topscore/topscore.component.html index 6fe154a..e17257f 100644 --- a/src/app/topscore/topscore.component.html +++ b/src/app/topscore/topscore.component.html @@ -7,8 +7,11 @@
{{ match.teams[0].teamTricode }}
-
-
+
+
{{ match.teams[0].roundsWon }}
@@ -20,10 +23,13 @@
-
+
{{ match.teams[1].roundsWon }}
-
+
{{ match.teams[1].teamTricode }}
diff --git a/src/app/topscore/topscore.component.scss b/src/app/topscore/topscore.component.scss index 68fea98..291749a 100644 --- a/src/app/topscore/topscore.component.scss +++ b/src/app/topscore/topscore.component.scss @@ -72,13 +72,13 @@ position: relative; align-self: stretch; width: 3.62px; - &.green { + &.defender { @extend .divider; - background-color: #61eab6; + background-color: var(--defender-color-secondary); } - &.red { + &.attacker { @extend .divider; - background-color: #ff4557; + background-color: var(--attacker-color-secondary); } } @@ -100,13 +100,13 @@ @extend .scoreblock; border-radius: 4px 0px 0px 4px; } - &.green { + &.defender { @extend .scoreblock; - background-color: #25ac79; + background-color: var(--defender-color); } - &.red { + &.attacker { @extend .scoreblock; - background-color: #b82e3c; + background-color: var(--attacker-color); } } diff --git a/src/main.ts b/src/main.ts index 79110c5..3d0d90d 100644 --- a/src/main.ts +++ b/src/main.ts @@ -6,7 +6,7 @@ import { environment } from "./environments/environment"; import { Config } from "./app/shared/config"; fetch("/assets/config/config.json").then(async (res) => { - const configuration: Config = await res.json(); + const configuration: Config = new Config(await res.json()); if (environment.production) { enableProdMode();