New Design and Rebuild on Tailwind

* Update ng19

* Migrate to standalone components

* Update ng20

* Include tailwindcss

* Testing button styling

* Tailwind overlay/mapinfo

* Timer Rounder

* Scoreboard / Mapwins / Round Number / Watermark / Round Reasons

* Commit before update

* update ng core

* update ng cli

* update ng-eslint

* Safety commit

* Animation duration
Playercard animations

* Abilities animation

* Health effect

* Post rebase

* Animation fixes

* Make testing buttons less opaque if not hovered

* Team color swap

* Observing indicator

* Captain badge

* Fix Scoreboard abilities

* Spike indicator + blinking

* Playercard Animations V1

* Scoreboard animations V1

* Roundwin Banner

* Timeout banner
Changes to Endround banner

* Fix scoreboard color swap

* Endround card head to head animation

* Have round counter display OT number

* Death animation/HP glow

* Connection to live

* Roundreasons revamp

* Roundreason Swap Icon

* Run formatter

* Reorder tailwind classes

* Make round number one single <p>, add guards and mapban to datamodel

* HideAuxiliary
PlayerCard animations

* Prep translation, deserialize overrides in datamodel

* Fix hideAuxiliary bug

* Delete debug logs

* Minimal mode

* Agent select screen + testing

* Name Overrides

* Playercams

* Fix playercams bug

* Add translations to new components

* Reduce bottom border on rounder

* Remove old components, rename some components

Co-authored-by: Tiranthine <22277108+Tiranthine@users.noreply.github.com>

* Move mapban to css animation

* New Player Combat Cards

* FIxes for various components

* Fix minor bugs

* New top bar (pre-svg)

* New top bar (svg)

* Fix tiny gap at top of SVG

* Proper color swap on top

* Properly restrict top image size

* CSS Colors and cleanup

* Component selectors renamed

* Fix autoswitch

* Changed hardcoded tailwind values

* Agent select changes

* Fix timeout issue

* Change testing buttons positions

* Roundreasons glowup

* New scoreboard, various fixes

* Fix linting errors

* Apply Lint and Format

---------

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

Author: Tiranthine

.prettierrc.json

@@ -2,5 +2,8 @@
   "semi": true,
   "printWidth": 100,
   "tabWidth": 2,
-  "trailingComma": "all"
-}
+  "trailingComma": "all",
+  "plugins": [
+    "prettier-plugin-tailwindcss"
+  ]
+}

.vscode/settings.json

@@ -3,5 +3,14 @@
     "angular-*": {
       "externalTemplate": true
     }
+  },
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "symbols.files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+    "strings": "on"
   }
 }

README.md

@@ -63,4 +63,4 @@ After that you can start the frontend by running `docker compose up -d` and the
 
 # DISCLAIMER
 
-Spectra-Client isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot Games or anyone officially involved in producing or managing Riot Games properties. Riot Games, and all associated properties are trademarks or registered trademarks of Riot Games, Inc.
+Spectra-Frontend isn't endorsed by Riot Games and doesn't reflect the views or opinions of Riot Games or anyone officially involved in producing or managing Riot Games properties. Riot Games, and all associated properties are trademarks or registered trademarks of Riot Games, Inc.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spectra-frontend",
-  "version": "0.2.43",
+  "version": "0.3.0",
   "author": {
     "name": "Purple Shark UG (haftungsbeschränkt)",
     "url": "https://valospectra.com"
@@ -18,31 +18,33 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^20.0.3",
-    "@angular/common": "^20.0.3",
-    "@angular/compiler": "^20.0.3",
-    "@angular/core": "^20.0.3",
-    "@angular/forms": "^20.0.3",
-    "@angular/platform-browser": "^20.0.3",
-    "@angular/platform-browser-dynamic": "^20.0.3",
-    "@angular/router": "^20.0.3",
+    "@angular/animations": "^20.2.1",
+    "@angular/common": "^20.2.1",
+    "@angular/compiler": "^20.2.1",
+    "@angular/core": "^20.2.1",
+    "@angular/forms": "^20.2.1",
+    "@angular/platform-browser": "^20.2.1",
+    "@angular/platform-browser-dynamic": "^20.2.1",
+    "@angular/router": "^20.2.1",
     "@ngx-translate/core": "^17.0.0",
     "@ngx-translate/http-loader": "^17.0.0",
     "@tailwindcss/postcss": "^4.1.10",
     "animejs": "^4.0.2",
     "express": "^4.21.2",
+    "lodash": "^4.17.21",
     "rxjs": "~7.8.2",
     "socket.io-client": "4.8.1",
     "tailwindcss": "^4.1.10",
     "tslib": "^2.8.1",
     "zone.js": "^0.15.0"
   },
   "devDependencies": {
-    "@angular/build": "^20.0.2",
-    "@angular/cli": "^20.0.2",
-    "@angular/compiler-cli": "^20.0.3",
+    "@angular/build": "^20.2.0",
+    "@angular/cli": "^20.2.0",
+    "@angular/compiler-cli": "^20.2.1",
     "@types/jasmine": "~5.1.7",
-    "angular-eslint": "20.0.0",
+    "@types/lodash": "^4",
+    "angular-eslint": "20.2.0",
     "eslint": "^9.28.0",
     "eslint-config-prettier": "^9.1.0",
     "jasmine-core": "^5.6.0",
@@ -52,6 +54,7 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "prettier": "3.5.3",
+    "prettier-plugin-tailwindcss": "^0.6.14",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.33.1"
   },

public/assets/config/config.json

@@ -1,9 +1,7 @@
 {
   "serverEndpoint": "http://localhost:5200",
   "redirectUrl": "https://valospectra.com",
-  "sponsorImageUrls": [
-    "/assets/misc/logo.webp"
-  ],
+  "sponsorImageUrls": ["/assets/misc/logo.webp"],
   "sponsorImageRotateSpeed": 5000,
   "attackerColorPrimary": "#b82e3c",
   "attackerColorSecondary": "#ff4557",

public/assets/misc/crosshair.svg

@@ -10,8 +10,9 @@
   "mapinfo.live": "Jetzt: {{map}}",
   "mapinfo.decider": "Entscheider: {{map}}",
   "mapinfo.next": "Nächste: {{map}}",
-  "topinfo.watermark": "Overlay von Spectra",
+  "topinfo.watermark": "Powered by Spectra",
   "topscore.round": "RUNDE {{rounds}}",
+  "topscore.overtime": "VLG. {{otNumber}}",
   "team.attacker": "ANGREIFER",
   "team.defender": "VERTEIDIGER",
   "scoreboard.spent": "DIESE RUNDE AUSGEGEBEN",

public/assets/misc/swapIcon.svg

@@ -10,8 +10,9 @@
   "mapinfo.live": "Live: {{map}}",
   "mapinfo.decider": "Decider: {{map}}",
   "mapinfo.next": "Next: {{map}}",
-  "topinfo.watermark": "Overlay by Spectra",
+  "topinfo.watermark": "Powered by Spectra",
   "topscore.round": "ROUND {{rounds}}",
+  "topscore.overtime": "OVERTIME {{otNumber}}",
   "team.attacker": "ATTACKER",
   "team.defender": "DEFENDER",
   "scoreboard.spent": "SPENT THIS ROUND",