Tailwind introduction

.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/langs/de.json

@@ -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/langs/en.json

@@ -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",

public/langs/es.json

@@ -10,7 +10,7 @@
   "mapinfo.live": "En vivo: {{map}}",
   "mapinfo.decider": "Desempate: {{map}}",
   "mapinfo.next": "Siguiente: {{map}}",
-  "topinfo.watermark": "Overlay por Spectra",
+  "topinfo.watermark": "Powered by Spectra",
   "topscore.round": "RONDAS {{rounds}}",
   "team.attacker": "ATACANTES",
   "team.defender": "DEFENSORES",

public/langs/fr.json

@@ -10,7 +10,7 @@
   "mapinfo.live": "En cours: {{map}}",
   "mapinfo.decider": "Décisive: {{map}}",
   "mapinfo.next": "Prochaine: {{map}}",
-  "topinfo.watermark": "Overlay par Spectra",
+  "topinfo.watermark": "Powered by Spectra",
   "topscore.round": "Manches {{rounds}}",
   "team.attacker": "Attaquant",
   "team.defender": "Défenseur",

public/langs/ja.json

@@ -10,7 +10,7 @@
   "mapinfo.live": "Now: {{map}}",
   "mapinfo.decider": "Decider: {{map}}",
   "mapinfo.next": "Next: {{map}}",
-  "topinfo.watermark": "Spectra Overlay",
+  "topinfo.watermark": "Powered by Spectra",
   "topscore.round": "ラウンド {{rounds}}",
   "team.attacker": "アタッカー",
   "team.defender": "ディフェンダー",

public/langs/ms.json

@@ -1,7 +1,7 @@
 {
-  "playercard.kills": "Kills", 
-  "playercard.deaths": "Deaths", 
-  "playercard.assists": "Assists", 
+  "playercard.kills": "Kills",
+  "playercard.deaths": "Deaths",
+  "playercard.assists": "Assists",
   "endround.round_win": "PEMENANG PUSINGAN",
   "endround.win": "PASUKAN {{team}} MENANG",
   "endround.attacker": "PENYERANG",
@@ -10,14 +10,14 @@
   "mapinfo.live": "Sedang Berlaku: {{map}}",
   "mapinfo.decider": "Penentu: {{map}}",
   "mapinfo.next": "Seterusnya: {{map}}",
-  "topinfo.watermark": "Overlay oleh Spectra",
+  "topinfo.watermark": "Powered by Spectra",
   "topscore.round": "PUSINGAN {{rounds}}",
   "team.attacker": "PENYERANG",
   "team.defender": "PERTAHAN",
   "scoreboard.spent": "DIBELANJAKAN PUSINGAN INI",
-  "scoreboard.kills": "Kills", 
-  "scoreboard.deaths": "Deaths", 
-  "scoreboard.assists": "Assists", 
+  "scoreboard.kills": "Kills",
+  "scoreboard.deaths": "Deaths",
+  "scoreboard.assists": "Assists",
   "timeout.technical_pause": "JEDA TEKNIKAL",
   "timeout.tactical_timeout": "Jeda Taktikal {{teamName}}"
-}
+}

public/langs/tr.json

@@ -10,7 +10,7 @@
   "mapinfo.live": "Oynanan: {{map}}",
   "mapinfo.decider": "Decider: {{map}}",
   "mapinfo.next": "Sonraki: {{map}}",
-  "topinfo.watermark": "Overlay by Spectra",
+  "topinfo.watermark": "Powered by Spectra",
   "topscore.round": "TUR {{rounds}}",
   "team.attacker": "SALDIRI",
   "team.defender": "SAVUNMA",
@@ -20,4 +20,4 @@
   "scoreboard.assists": "Asist",
   "timeout.technical_pause": "TEKNİK DURAKLATMA",
   "timeout.tactical_timeout": "{{teamName}} Taktik Duraklatma"
-}
+}

public/langs/vn.json

@@ -10,7 +10,7 @@
   "mapinfo.live": "Hiện tại: {{map}}",
   "mapinfo.decider": "Quyết định: {{map}}",
   "mapinfo.next": "Kế tiếp: {{map}}",
-  "topinfo.watermark": "HUD Phát Triển Bởi Spectra",
+  "topinfo.watermark": "Powered by Spectra",
   "topscore.round": "HIỆP {{rounds}}",
   "team.attacker": "PHE TẤN CÔNG",
   "team.defender": "PHE PHÒNG THỦ",

public/langs/zh_HANS.json

@@ -10,7 +10,7 @@
   "mapinfo.live": "当前场次: {{map}}",
   "mapinfo.decider": "决胜场次: {{map}}",
   "mapinfo.next": "下一场: {{map}}",
-  "topinfo.watermark": "由 Spectra 提供技术支持",
+  "topinfo.watermark": "Powered by Spectra",
   "topscore.round": "第 {{rounds}} 回合",
   "team.attacker": "攻方",
   "team.defender": "守方",

public/langs/zh_HANT.json

@@ -10,7 +10,7 @@
   "mapinfo.live": "進行中: {{map}}",
   "mapinfo.decider": "決勝圖: {{map}}",
   "mapinfo.next": "下張地圖: {{map}}",
-  "topinfo.watermark": "由 Spectra 提供技術支援",
+  "topinfo.watermark": "Powered by Spectra",
   "topscore.round": "第 {{rounds}} 回合",
   "team.attacker": "進攻方",
   "team.defender": "防守方",

src/animations.css

@@ -0,0 +1,44 @@
+@theme {
+  --animate-fade-in: fade-in 0.5s ease-in;
+  --animate-fade-out: fade-in 0.5s ease-in reverse;
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  --animate-collapse-center-in: collapse-center 0.15s reverse;
+  --animate-collapse-center-out: collapse-center 0.15s;
+  @keyframes collapse-center {
+    0% {
+      opacity: 1;
+      transform: scale(1, 1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(0, 1.5);
+    }
+  }
+}
+
+@utility animate-duration-* {
+  animation-duration: calc(--value(integer) * 1ms) !important;
+}
+
+@utility animate-delay-* {
+  animation-delay: calc(--value(integer) * 1ms) !important;
+}
+@source inline("animate-delay-{0..2000..50}");
+
+@utility animate-style-keep {
+  animation-fill-mode: forwards !important;
+}
+@utility animate-style-early {
+  animation-fill-mode: backwards !important;
+}
+@utility animate-style-both {
+  animation-fill-mode: both !important;
+}