Make logo component 100% reactive

src/app/components/logo/logo.component.html

@@ -1,4 +1,4 @@
 <div class="logo">
-    <div [ngClass]="['bg dragon', className]"></div>
+    <div [ngClass]="dragonNgClass$ | async"></div>
     <p>Press Space to start</p>
-</div>
+</div>

src/app/components/logo/logo.component.ts

@@ -1,54 +1,41 @@
-import { NgClass } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { concat, Observable, timer } from 'rxjs';
-import { delay, finalize, map, repeat, startWith, takeWhile, tap } from 'rxjs/operators';
+import { CommonModule, NgClass } from '@angular/common';
+import { Component } from '@angular/core';
+import { UntilDestroy } from '@ngneat/until-destroy';
+import { concat, timer } from 'rxjs';
+import { delay, map, repeat, startWith, takeWhile, tap } from 'rxjs/operators';
 
 @UntilDestroy()
 @Component({
   selector: 't-logo',
   standalone: true,
-  imports: [NgClass],
+  imports: [NgClass, CommonModule],
   templateUrl: './logo.component.html',
   styleUrls: ['./logo.component.scss']
 })
-export class LogoComponent implements OnInit {
-  className = '';
+export class LogoComponent {
+  blinkingEyesClass$ = timer(0, 500).pipe(
+    startWith(0),
+    map((x) => x + 1),
+    takeWhile((x) => x < 6),
+    map((x) => `l${x % 2 === 0 ? 1 : 2}`)
+  );
 
-  ngOnInit(): void {
-    concat(this.run(), this.eyes())
-      .pipe(delay(5000), repeat(1000), untilDestroyed(this))
-      .subscribe();
-  }
+  runningClass$ = timer(0, 100).pipe(
+    startWith(0),
+    map((x) => x + 1),
+    takeWhile((x) => x <= 40),
+    map((x) => {
+      const range = Math.ceil(x / 10);
+      const side = range % 2 === 0 ? 'l' : 'r';
+      const runningLegState = x % 2 === 0 ? 3 : 4;
+      const legState = x === 40 ? 1 : runningLegState;
+      return `${side}${legState}`;
+    })
+  );
 
-  eyes() {
-    return timer(0, 500).pipe(
-      startWith(0),
-      map((x) => x + 1),
-      takeWhile((x) => x < 6),
-      tap((x) => {
-        const state = x % 2 === 0 ? 1 : 2;
-        this.className = `l${state}`;
-      })
-    );
-  }
-
-  run(): Observable<number> {
-    let side = 'r';
-    return timer(0, 100).pipe(
-      startWith(0),
-      map((x) => x + 1),
-      takeWhile((x) => x <= 40),
-      tap((x) => {
-        if (x === 10 || x === 20 || x === 30) {
-          side = side === 'r' ? 'l' : 'r';
-        }
-        const state = x % 2 === 0 ? 3 : 4;
-        this.className = `${side}${state}`;
-      }),
-      finalize(() => {
-        this.className = `${side}1`;
-      })
-    );
-  }
+  dragonNgClass$ = concat(this.blinkingEyesClass$, this.runningClass$).pipe(
+    delay(5000),
+    repeat(1000),
+    map((className) => ['bg dragon', className])
+  );
 }