feat: add synchronised multi-badge

src/app/common/unit-code/unit-code.component.ts

@@ -1,6 +1,7 @@
 import {trigger, state, style, animate, transition} from '@angular/animations';
 import {Component, Input, OnDestroy, OnInit} from '@angular/core';
-import {Subscription, interval} from 'rxjs';
+import {Subscription} from 'rxjs';
+import {UnitCodeService} from './unit-code.service';
 
 @Component({
   selector: 'f-unit-code',
@@ -29,6 +30,8 @@ export class UnitCodeComponent implements OnInit, OnDestroy {
   showState = 'in'; // Animation state
   subscription: Subscription;
 
+  constructor(private unitCodeService: UnitCodeService) {}
+
   get isDualBadge() {
     return this.unit_code?.includes('/');
   }
@@ -42,18 +45,17 @@ export class UnitCodeComponent implements OnInit, OnDestroy {
       this.width += 24;
     }
 
-    this.startFlipping();
+    this.subscription = this.unitCodeService.getInterval().subscribe(() => {
+      this.flip();
+    });
   }
 
-  startFlipping() {
-    const source = interval(3000);
-    this.subscription = source.subscribe(() => {
-      this.showState = 'out'; // Trigger animation out
-      setTimeout(() => {
-        this.currentIndex = (this.currentIndex + 1) % this.unitCodeParts.length;
-        this.showState = 'in'; // Trigger animation in after a delay
-      }, 200); // Delay to match the animation duration
-    });
+  flip() {
+    this.showState = 'out'; // Trigger animation out
+    setTimeout(() => {
+      this.currentIndex = (this.currentIndex + 1) % this.unitCodeParts.length;
+      this.showState = 'in'; // Trigger animation in after a delay
+    }, 200); // Delay to match the animation duration
   }
 
   ngOnDestroy() {

src/app/common/unit-code/unit-code.service.ts

@@ -0,0 +1,20 @@
+import {Injectable} from '@angular/core';
+import {Observable, interval, shareReplay} from 'rxjs';
+
+// we have a service so that we can share the same interval observable among multiple subscribers
+// simply, all unitCodes will tick over at the same time
+@Injectable({
+  providedIn: 'root',
+})
+export class UnitCodeService {
+  private readonly interval$: Observable<number>;
+
+  constructor() {
+    // we use shareReplay to share the same interval observable among multiple subscribers
+    this.interval$ = interval(3000).pipe(shareReplay({bufferSize: 1, refCount: true}));
+  }
+
+  getInterval(): Observable<number> {
+    return this.interval$;
+  }
+}