v0.2.1

.github/workflows/lint-format-build.yml

@@ -2,9 +2,9 @@ name: Lint, Format and Build
 
 on:
   push:
-    branches: [main]
+    branches: [main, canary]
   pull_request:
-    branches: [main]
+    branches: [main, canary]
 
 jobs:
   lint-format-build:

src/app/app-routing.module.ts

@@ -95,7 +95,9 @@ const routes: Routes = [
   {
     path: "mapban-fs",
     loadComponent: () =>
-      import("./overlays/mapban-fs-overlay/mapban-fs-overlay.component").then((m) => m.MapbanFsOverlayComponent),
+      import("./overlays/mapban-fs-overlay/mapban-fs-overlay.component").then(
+        (m) => m.MapbanFsOverlayComponent,
+      ),
   },
   {
     path: "playercams",

src/app/components/agent-select/player-info/player-info.component.css

@@ -20,26 +20,66 @@
 
 .edge-fade-overlay-locked-attacker {
   background:
-    linear-gradient(to bottom, rgba(var(--color-attacker-primary-rgb), 0.5) 0%, rgba(255, 255, 255, 0) 9%),
-    linear-gradient(to top, rgba(var(--color-attacker-primary-rgb), 0.5) 0%, rgba(255, 255, 255, 0) 9%),
-    linear-gradient(to right, rgba(var(--color-attacker-primary-rgb), 0.5) 0%, rgba(255, 255, 255, 0) 9%),
-    linear-gradient(to left, rgba(var(--color-attacker-primary-rgb), 0.5) 0%, rgba(255, 255, 255, 0) 9%);
+    linear-gradient(
+      to bottom,
+      rgba(var(--color-attacker-primary-rgb), 0.5) 0%,
+      rgba(255, 255, 255, 0) 9%
+    ),
+    linear-gradient(
+      to top,
+      rgba(var(--color-attacker-primary-rgb), 0.5) 0%,
+      rgba(255, 255, 255, 0) 9%
+    ),
+    linear-gradient(
+      to right,
+      rgba(var(--color-attacker-primary-rgb), 0.5) 0%,
+      rgba(255, 255, 255, 0) 9%
+    ),
+    linear-gradient(
+      to left,
+      rgba(var(--color-attacker-primary-rgb), 0.5) 0%,
+      rgba(255, 255, 255, 0) 9%
+    );
 }
 
 .bottom-fade-overlay-locked-attacker {
-  background: linear-gradient(to top, rgba(var(--color-attacker-primary-rgb), 0.5) 0%, rgba(255, 255, 255, 0) 70%);
+  background: linear-gradient(
+    to top,
+    rgba(var(--color-attacker-primary-rgb), 0.5) 0%,
+    rgba(255, 255, 255, 0) 70%
+  );
 }
 
 .edge-fade-overlay-locked-defender {
   background:
-    linear-gradient(to bottom, rgba(var(--color-defender-primary-rgb), 0.5) 0%, rgba(255, 255, 255, 0) 9%),
-    linear-gradient(to top, rgba(var(--color-defender-primary-rgb), 0.5) 0%, rgba(255, 255, 255, 0) 9%),
-    linear-gradient(to right, rgba(var(--color-defender-primary-rgb), 0.5) 0%, rgba(255, 255, 255, 0) 9%),
-    linear-gradient(to left, rgba(var(--color-defender-primary-rgb), 0.5) 0%, rgba(255, 255, 255, 0) 9%);
+    linear-gradient(
+      to bottom,
+      rgba(var(--color-defender-primary-rgb), 0.5) 0%,
+      rgba(255, 255, 255, 0) 9%
+    ),
+    linear-gradient(
+      to top,
+      rgba(var(--color-defender-primary-rgb), 0.5) 0%,
+      rgba(255, 255, 255, 0) 9%
+    ),
+    linear-gradient(
+      to right,
+      rgba(var(--color-defender-primary-rgb), 0.5) 0%,
+      rgba(255, 255, 255, 0) 9%
+    ),
+    linear-gradient(
+      to left,
+      rgba(var(--color-defender-primary-rgb), 0.5) 0%,
+      rgba(255, 255, 255, 0) 9%
+    );
 }
 
 .bottom-fade-overlay-locked-defender {
-  background: linear-gradient(to top, rgba(var(--color-defender-primary-rgb), 0.5) 0%, rgba(255, 255, 255, 0) 70%);
+  background: linear-gradient(
+    to top,
+    rgba(var(--color-defender-primary-rgb), 0.5) 0%,
+    rgba(255, 255, 255, 0) 70%
+  );
 }
 
 @keyframes switchAnimation {
@@ -71,17 +111,33 @@
 }
 
 @keyframes lockAnimationAttacker {
-  0% { opacity: 0.1; }
-  50% { opacity: 1; }
-  70% { opacity: 1; }
-  100% { opacity: 0; }
+  0% {
+    opacity: 0.1;
+  }
+  50% {
+    opacity: 1;
+  }
+  70% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 
 @keyframes lockAnimationDefender {
-  0% { opacity: 0.1; }
-  50% { opacity: 1; }
-  70% { opacity: 1; }
-  100% { opacity: 0; }
+  0% {
+    opacity: 0.1;
+  }
+  50% {
+    opacity: 1;
+  }
+  70% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 
 .animate-lock-attacker {
@@ -107,28 +163,52 @@
 }
 
 @keyframes lockAnimationBottomAttacker {
-  0% { opacity: 0; }
-  50% { opacity: 1; }
-  70% { opacity: 1; }
-  100% { opacity: 0; }
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  70% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 
 @keyframes lockAnimationBottomDefender {
-  0% { opacity: 0; }
-  50% { opacity: 1; }
-  70% { opacity: 1; }
-  100% { opacity: 0; }
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  70% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }
 
 .animate-lock-bottom-attacker {
-  background: linear-gradient(to top, rgba(var(--attacker-color-rgb), 0.5) 0%, rgba(255, 255, 255, 0) 70%);
+  background: linear-gradient(
+    to top,
+    rgba(var(--attacker-color-rgb), 0.5) 0%,
+    rgba(255, 255, 255, 0) 70%
+  );
   animation: lockAnimationBottomAttacker 1900ms ease-in-out !important;
   animation-fill-mode: both;
   will-change: opacity;
 }
 
 .animate-lock-bottom-defender {
-  background: linear-gradient(to top, rgba(var(--defender-color-rgb), 0.5) 0%, rgba(255, 255, 255, 0) 70%);
+  background: linear-gradient(
+    to top,
+    rgba(var(--defender-color-rgb), 0.5) 0%,
+    rgba(255, 255, 255, 0) 70%
+  );
   animation: lockAnimationBottomDefender 1900ms ease-in-out !important;
   animation-fill-mode: both;
   will-change: opacity;
@@ -160,7 +240,7 @@
   }
   82.3% {
     scale: 1;
-    transform : translateY(0) translateX(0);
+    transform: translateY(0) translateX(0);
   }
   82.4% {
     scale: 0.1;
@@ -189,9 +269,9 @@
   99.9% {
     opacity: 0;
   }
-    100% {
-      opacity: 1;
-    }
+  100% {
+    opacity: 1;
+  }
 }
 
 .reveal {

src/app/components/agent-select/player-info/player-info.component.html

@@ -1,52 +1,66 @@
 <div
-  class="relative h-full w-full overflow-hidden bg-[#151515] border-gray-500 border-1 rounded-[5px] [contain:layout_style_paint]"
+  class="relative h-full w-full overflow-hidden rounded-[5px] border-1 border-gray-500 bg-[#151515] [contain:layout_style_paint]"
   [class.reveal]="reveal()"
 >
-  <img class="absolute top-30 left-0 h-full w-full object-cover scale-260" src="assets/agent-portraits/{{ agent() }}Portrait.webp" />
   <img
-  class="absolute top-3 size-4 z-2"
-  [class.left-3]="!down()"
-  [class.right-3]="down()"
-  src="assets/roles/{{ getAgentRole(agent()) }}.webp">
-  <div class="edge-fade-overlay absolute inset-0 rounded-[5px] opacity-0"
-  [class.edge-fade-overlay-unlocked]="!locked()"
-  [class.animate-unlocked]="!locked()"
+    class="absolute top-30 left-0 h-full w-full scale-260 object-cover"
+    src="assets/agent-portraits/{{ agent() }}Portrait.webp"
+  />
+  <img
+    class="absolute top-3 z-2 size-4"
+    [class.left-3]="!down()"
+    [class.right-3]="down()"
+    src="assets/roles/{{ getAgentRole(agent()) }}.webp"
+  />
+  <div
+    class="edge-fade-overlay absolute inset-0 rounded-[5px] opacity-0"
+    [class.edge-fade-overlay-unlocked]="!locked()"
+    [class.animate-unlocked]="!locked()"
   ></div>
-  <div class="edge-fade-overlay absolute inset-0 rounded-[5px] opacity-0"
-  [class.animate-lock-attacker]="showLockPulse() && color() === 'attacker'"
-  [class.animate-lock-defender]="showLockPulse() && color() === 'defender'"
-  (animationend)="onLockPulseAnimationEnd()"
+  <div
+    class="edge-fade-overlay absolute inset-0 rounded-[5px] opacity-0"
+    [class.animate-lock-attacker]="showLockPulse() && color() === 'attacker'"
+    [class.animate-lock-defender]="showLockPulse() && color() === 'defender'"
+    (animationend)="onLockPulseAnimationEnd()"
   ></div>
-  <div class="bottom-fade-overlay absolute inset-x-0 bottom-0 h-1/2 rounded-b-[5px] opacity-0"
-  [class.bottom-fade-overlay-unlocked]="!locked()"
-  [class.animate-unlocked]="!locked()"
+  <div
+    class="bottom-fade-overlay absolute inset-x-0 bottom-0 h-1/2 rounded-b-[5px] opacity-0"
+    [class.bottom-fade-overlay-unlocked]="!locked()"
+    [class.animate-unlocked]="!locked()"
   ></div>
-  <div class="bottom-fade-overlay absolute inset-x-0 bottom-0 h-1/2 rounded-b-[5px] opacity-0"
-  [class.animate-lock-bottom-attacker]="showLockPulse() && color() === 'attacker'"
-  [class.animate-lock-bottom-defender]="showLockPulse() && color() === 'defender'"
-  (animationend)="onLockPulseAnimationEnd()"
+  <div
+    class="bottom-fade-overlay absolute inset-x-0 bottom-0 h-1/2 rounded-b-[5px] opacity-0"
+    [class.animate-lock-bottom-attacker]="showLockPulse() && color() === 'attacker'"
+    [class.animate-lock-bottom-defender]="showLockPulse() && color() === 'defender'"
+    (animationend)="onLockPulseAnimationEnd()"
   ></div>
-  <div 
-  class="flex flex-col absolute bottom-3.5 w-34 max-w-full font-dinnext-medium gap-1"
-  [class.left-2]="!down()"
-  [class.right-2]="down()"
-  [class.text-left]="!down()"
-  [class.text-right]="down()"
+  <div
+    class="font-dinnext-medium absolute bottom-3.5 flex w-34 max-w-full flex-col gap-1"
+    [class.left-2]="!down()"
+    [class.right-2]="down()"
+    [class.text-left]="!down()"
+    [class.text-right]="down()"
   >
-    <span class="text-lg uppercase whitespace-normal text-[#D9CD8F] [overflow-wrap:anywhere] leading-none">{{ playerName() }}</span>
-    <span class="text-[1.0625rem] uppercase whitespace-normal leading-none"
-    [class]="locked() ? 'text-white' : 'text-gray-400'"
-    >{{ getAgentName(agent()) }}</span>
+    <span
+      class="text-lg leading-none [overflow-wrap:anywhere] whitespace-normal text-[#D9CD8F] uppercase"
+      >{{ playerName() }}</span
+    >
+    <span
+      class="text-[1.0625rem] leading-none whitespace-normal uppercase"
+      [class]="locked() ? 'text-white' : 'text-gray-400'"
+      >{{ getAgentName(agent()) }}</span
+    >
   </div>
-  <div 
-  class="absolute z-10 w-full h-1.5 rounded-b-xs bottom-0 left-1/2 -translate-x-1/2"
-  [class.down]="down()"
-  [class.bg-agentselect-player-attacker]="color() === 'attacker'"
-  [class.bg-agentselect-player-defender]="color() === 'defender'"
+  <div
+    class="absolute bottom-0 left-1/2 z-10 h-1.5 w-full -translate-x-1/2 rounded-b-xs"
+    [class.down]="down()"
+    [class.bg-agentselect-player-attacker]="color() === 'attacker'"
+    [class.bg-agentselect-player-defender]="color() === 'defender'"
   ></div>
-  <div class="absolute size-60 left-1/2 -translate-x-1/2"
-  [class.bg-agentselect-player-attacker]="color() === 'attacker'"
-  [class.bg-agentselect-player-defender]="color() === 'defender'"
-  [class.coverAnimation]="coverAnimation()"
+  <div
+    class="absolute left-1/2 size-60 -translate-x-1/2"
+    [class.bg-agentselect-player-attacker]="color() === 'attacker'"
+    [class.bg-agentselect-player-defender]="color() === 'defender'"
+    [class.coverAnimation]="coverAnimation()"
   ></div>
 </div>

src/app/components/agent-select/player-info/player-info.component.ts

@@ -1,4 +1,12 @@
-import { ChangeDetectionStrategy, Component, effect, input, inject, signal, AfterViewInit } from "@angular/core";
+import {
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  input,
+  inject,
+  signal,
+  AfterViewInit,
+} from "@angular/core";
 import { AgentRoleService } from "../../../services/agentRole.service";
 import { DataModelService } from "../../../services/dataModel.service";
 import { AgentNameService } from "../../../services/agentName.service";
@@ -9,9 +17,9 @@ import { AgentNameService } from "../../../services/agentName.service";
   templateUrl: "./player-info.component.html",
   styleUrl: "./player-info.component.css",
   changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { '[style.--player-animation-delay-ms]': 'animationDelayMs()' },
+  host: { "[style.--player-animation-delay-ms]": "animationDelayMs()" },
 })
-export class AgentSelectPlayerInfoComponent {
+export class AgentSelectPlayerInfoComponent implements AfterViewInit {
   readonly dataModel = inject(DataModelService);
 
   coverAnimation = signal(false);
@@ -29,7 +37,7 @@ export class AgentSelectPlayerInfoComponent {
   prevLocked = false;
   animateSwitch = signal(false);
   showLockPulse = signal(false);
-  
+
   ngAfterViewInit(): void {
     requestAnimationFrame(() => {
       this.coverAnimation.set(true);
@@ -75,4 +83,3 @@ export class AgentSelectPlayerInfoComponent {
     return AgentNameService.getAgentName(name);
   }
 }
-