From 85a52dbcac28e14642b3e08ed5371bb3769ad947 Mon Sep 17 00:00:00 2001
From: Kyle Kemp <kyle@seiyria.com>
Date: Sun, 25 Jun 2023 16:53:12 -0500
Subject: [PATCH] feat(ui): add background-art component to make it easier to
 update when it happens

---
 .../background-art/background-art.component.html   |  3 +++
 .../background-art/background-art.component.scss   |  0
 .../background-art/background-art.component.ts     | 14 ++++++++++++++
 .../app/pages/collections/collections.page.html    |  6 +++---
 client/src/app/pages/town/town.page.html           |  6 +++---
 client/src/app/shared.module.ts                    |  2 ++
 6 files changed, 25 insertions(+), 6 deletions(-)
 create mode 100644 client/src/app/components/background-art/background-art.component.html
 create mode 100644 client/src/app/components/background-art/background-art.component.scss
 create mode 100644 client/src/app/components/background-art/background-art.component.ts

diff --git a/client/src/app/components/background-art/background-art.component.html b/client/src/app/components/background-art/background-art.component.html
new file mode 100644
index 0000000..58cec22
--- /dev/null
+++ b/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>
diff --git a/client/src/app/components/background-art/background-art.component.scss b/client/src/app/components/background-art/background-art.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/client/src/app/components/background-art/background-art.component.ts b/client/src/app/components/background-art/background-art.component.ts
new file mode 100644
index 0000000..6149683
--- /dev/null
+++ b/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() {}
+}
diff --git a/client/src/app/pages/collections/collections.page.html b/client/src/app/pages/collections/collections.page.html
index 1e122cd..d04c659 100644
--- a/client/src/app/pages/collections/collections.page.html
+++ b/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>
diff --git a/client/src/app/pages/town/town.page.html b/client/src/app/pages/town/town.page.html
index b49c305..bea103a 100644
--- a/client/src/app/pages/town/town.page.html
+++ b/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>
diff --git a/client/src/app/shared.module.ts b/client/src/app/shared.module.ts
index 127c3a5..8816708 100644
--- a/client/src/app/shared.module.ts
+++ b/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,
 ];