feat(asset): support actually selecting different qualities of assets. …

…closes #6
After-the-End-of-All-Things · Jun 27, 2023 · 4b50d8f · 4b50d8f
1 parent b539704
commit 4b50d8f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 8 deletions.
diff --git a/client/src/app/components/icon/icon.component.ts b/client/src/app/components/icon/icon.component.ts
@@ -1,4 +1,15 @@
-import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import {
+  Component,
+  DestroyRef,
+  Input,
+  OnChanges,
+  OnInit,
+  inject,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Select } from '@ngxs/store';
+import { OptionsStore } from '@stores';
+import { Observable } from 'rxjs';
 import { ImageService } from '../../services/image.service';
 
 @Component({
@@ -7,26 +18,35 @@ import { ImageService } from '../../services/image.service';
   styleUrls: ['./icon.component.scss'],
 })
 export class IconComponent implements OnInit, OnChanges {
+  private destroyRef = inject(DestroyRef);
+
+  @Select(OptionsStore.quality) quality$!: Observable<string>;
+
   @Input({ required: true }) spritesheet!: string;
   @Input({ required: true }) sprite!: number;
-  @Input() quality = 'medium';
   @Input() size: 'small' | 'normal' = 'normal';
 
+  private quality = 'medium';
+
   public spritesheetUrl!: any;
   public assetLocation = '-0px -0px';
 
   constructor(private imageService: ImageService) {}
 
   async ngOnInit() {
-    this.spritesheetUrl = await this.imageService.getImageUrl(
-      this.spritesheet,
-      this.quality,
-    );
-
-    this.assetLocation = this.getSpriteLocation();
+    this.quality$
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((res: any) => {
+        this.quality = res;
+        this.updateSprite();
+      });
   }
 
   async ngOnChanges() {
+    this.updateSprite();
+  }
+
+  private async updateSprite() {
     this.spritesheetUrl = await this.imageService.getImageUrl(
       this.spritesheet,
       this.quality,

diff --git a/client/src/stores/options/options.store.ts b/client/src/stores/options/options.store.ts
@@ -27,4 +27,9 @@ export class OptionsStore {
   static options(state: IOptionsStore) {
     return state.options;
   }
+
+  @Selector()
+  static quality(state: IOptionsStore) {
+    return state.options.assetQuality;
+  }
 }