better grid

src/app/pages/interactions/interactions.component.ts

@@ -1,4 +1,4 @@
-import { Component, computed, effect, inject, input, InputSignal, signal, Signal, WritableSignal } from '@angular/core';
+import { Component, computed, effect, inject, input, InputSignal, OnDestroy, signal, Signal, WritableSignal } from '@angular/core';
 import { HeaderComponent } from "../../components/ui-elements/header/header.component";
 import { ERouteKey } from '../../types/route-key';
 import { Chibi, ChibiId } from '../../types/chibi/chibi';
@@ -12,7 +12,7 @@ import { IBrain } from '../../logic/chibi-behaviour/brain';
 import { BRAIN_MAP } from '../../logic/chibi-behaviour/brain-map';
 import { TranslateableComponent } from '../../components/translateable.component';
 import { Food } from '../../types/food';
-import { interval } from 'rxjs';
+import { interval, Subscribable, Subscription } from 'rxjs';
 import { RandomService } from '../../logic/random.service';
 import { ChibiInteraction } from '../../logic/chibi-behaviour/brains/aperio.brain';
 
@@ -29,7 +29,7 @@ const THINKING_INTERVAL: number = 2000;
   imports: [HeaderComponent, InteractionCanvasComponent, FoodPantryComponent, InventoryComponent, ButtonComponent],
   templateUrl: './interactions.component.html',
 })
-export class InteractionsComponent extends TranslateableComponent {
+export class InteractionsComponent extends TranslateableComponent implements OnDestroy {
   public readonly chibiId: InputSignal<ChibiId> = input.required<ChibiId>();
 
   private readonly chibiStore: ChibiStore = inject(ChibiStore);
@@ -46,6 +46,8 @@ export class InteractionsComponent extends TranslateableComponent {
 
   private brain!: IBrain;
 
+  private sub: Subscription = new Subscription();
+
   constructor() {
     super();
     effect(() => {
@@ -54,9 +56,13 @@ export class InteractionsComponent extends TranslateableComponent {
         this.brain.init(this.chibi(), this.randomService);
       }
     })
-    interval(THINKING_INTERVAL).subscribe(() => {
+    this.sub.add(interval(THINKING_INTERVAL).subscribe(() => {
       this.brain.exist();
-    })
+    }));
+  }
+
+  ngOnDestroy() {
+    this.sub.unsubscribe();
   }
 
   public interact(interaction: EChibiInteraction, item?: Food): void {