feat(ui): add background-art component to make it easier to update wh…

…en it happens

client/src/app/components/background-art/background-art.component.html

@@ -0,0 +1,3 @@
+<ion-img
+  [src]="'https://assets.ateoat.com/assets/backgrounds/' + sprite + '.webp'"
+></ion-img>

client/src/app/components/background-art/background-art.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-background-art',
+  templateUrl: './background-art.component.html',
+  styleUrls: ['./background-art.component.scss'],
+})
+export class BackgroundArtComponent implements OnInit {
+  @Input({ required: true }) sprite!: string;
+
+  constructor() {}
+
+  ngOnInit() {}
+}

client/src/app/pages/collections/collections.page.html

@@ -134,10 +134,10 @@
         class="collect-col"
         *ngFor="let background of allBackgrounds; trackBy: trackBy"
       >
-        <ion-img
+        <app-background-art
           [class.uncollected]="!discoveries.backgrounds?.[background]"
-          [src]="'https://assets.ateoat.com/assets/backgrounds/' + background.toString().padStart(4, '0') + '.webp'"
-        ></ion-img>
+          [sprite]="background.toString().padStart(4, '0')"
+        ></app-background-art>
       </ion-col>
     </ion-row>
   </div>

client/src/app/pages/town/town.page.html

@@ -30,9 +30,9 @@
 
         <ion-card class="location-card" *ngIf="locationInfo">
           <div class="image-container">
-            <ion-img
-              [src]="'https://assets.ateoat.com/assets/backgrounds/' + locationInfo.background + '.webp'"
-            ></ion-img>
+            <app-background-art
+              [sprite]="locationInfo.background"
+            ></app-background-art>
           </div>
 
           <ion-card-content>

client/src/app/shared.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { AvatarComponent } from '@components/avatar/avatar.component';
+import { BackgroundArtComponent } from '@components/background-art/background-art.component';
 import { CardOnlineUsersComponent } from '@components/card-online-users/card-online-users.component';
 import { HeaderBarComponent } from '@components/header-bar/header-bar.component';
 import { HeroComponent } from '@components/hero/hero.component';
@@ -28,6 +29,7 @@ const components = [
   ItemRarityComponent,
   ItemStatsComponent,
   ItemElementsComponent,
+  BackgroundArtComponent,
   RelativeTimePipe,
 ];