feat(location): show location stats on travel screen and explore screen

closes #15 closes #20

client/src/app/components/location-stats-button/location-stats-button.component.html

@@ -0,0 +1,8 @@
+<ion-button
+  (click)="openModal()"
+  size="small"
+  class="icon-only"
+  color="tertiary"
+>
+  <ion-icon slot="icon-only" name="stats-chart"></ion-icon>
+</ion-button>

client/src/app/components/location-stats-button/location-stats-button.component.ts

@@ -0,0 +1,30 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { LocationStatsModalComponent } from '@components/modals/location-stats/location-stats.component';
+import { ModalController } from '@ionic/angular';
+import { ContentService } from '@services/content.service';
+
+@Component({
+  selector: 'app-location-stats-button',
+  templateUrl: './location-stats-button.component.html',
+  styleUrls: ['./location-stats-button.component.scss'],
+})
+export class LocationStatsButtonComponent implements OnInit {
+  @Input({ required: true }) location!: string;
+
+  constructor(
+    private modalCtrl: ModalController,
+    private contentService: ContentService,
+  ) {}
+
+  ngOnInit() {}
+
+  async openModal() {
+    const modal = await this.modalCtrl.create({
+      component: LocationStatsModalComponent,
+      componentProps: {
+        location: this.contentService.getLocation(this.location),
+      },
+    });
+    await modal.present();
+  }
+}

client/src/app/components/modals/location-stats/location-stats.component.html

@@ -0,0 +1,31 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>{{ location.name }} Stats</ion-title>
+
+    <ion-buttons slot="end">
+      <ion-button color="medium" (click)="dismiss()">Close</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-card>
+    <ion-card-content>
+      <ion-list>
+        <ion-item *ngFor="let stat of displayStats">
+          <ion-label>
+            <ion-row>
+              <ion-col>
+                {{ statNames[stat] }}
+              </ion-col>
+
+              <ion-col>
+                {{ statFormatters[stat](location.baseStats[stat]) }}
+              </ion-col>
+            </ion-row>
+          </ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

client/src/app/components/modals/location-stats/location-stats.component.ts

@@ -0,0 +1,56 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ILocation, LocationStat } from '@interfaces';
+import { ModalController } from '@ionic/angular';
+
+@Component({
+  selector: 'app-location-stats',
+  templateUrl: './location-stats.component.html',
+  styleUrls: ['./location-stats.component.scss'],
+})
+export class LocationStatsModalComponent implements OnInit {
+  @Input({ required: true }) location!: ILocation;
+
+  public readonly displayStats: LocationStat[] = [
+    LocationStat.XPGain,
+    LocationStat.CoinGain,
+    LocationStat.ExploreSpeed,
+    LocationStat.ItemFind,
+    LocationStat.Wave,
+    LocationStat.NPCEncounter,
+    LocationStat.LocationFind,
+    LocationStat.CollectibleFind,
+  ];
+
+  public readonly statNames: Record<LocationStat, string> = {
+    [LocationStat.XPGain]: 'XP Gain',
+    [LocationStat.CoinGain]: 'Coin Gain',
+    [LocationStat.ExploreSpeed]: 'Explore Speed',
+    [LocationStat.ItemFind]: 'Item Find Chance',
+    [LocationStat.Wave]: 'Wave Chance',
+    [LocationStat.NPCEncounter]: 'NPC Encounter Chance',
+    [LocationStat.LocationFind]: 'Location Find Chance',
+    [LocationStat.CollectibleFind]: 'Collectible Find Chance',
+  };
+
+  public readonly statFormatters: Record<
+    LocationStat,
+    (value: number) => string
+  > = {
+    [LocationStat.XPGain]: (value) => `${value}%`,
+    [LocationStat.CoinGain]: (value) => `${value}%`,
+    [LocationStat.ExploreSpeed]: (value) => `${value}%`,
+    [LocationStat.ItemFind]: (value) => `${value}%`,
+    [LocationStat.Wave]: (value) => `${value}%`,
+    [LocationStat.NPCEncounter]: (value) => `${value}%`,
+    [LocationStat.LocationFind]: (value) => `${value}%`,
+    [LocationStat.CollectibleFind]: (value) => `${value}%`,
+  };
+
+  constructor(private modalController: ModalController) {}
+
+  ngOnInit() {}
+
+  dismiss() {
+    this.modalController.dismiss();
+  }
+}

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

@@ -36,6 +36,12 @@
                 {{ data.location?.arrivesAt | number }} steps until {{
                 data.location?.goingTo }}!
               </ion-card-subtitle>
+
+              <ng-container *ngIf="data.location as location">
+                <app-location-stats-button
+                  [location]="location.current"
+                ></app-location-stats-button>
+              </ng-container>
             </ion-card-header>
 
             <ion-card-content>

client/src/app/pages/explore/explore.page.scss

@@ -1,6 +1,12 @@
 
 .content-card {
 
+  app-location-stats-button {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+  }
+
   ion-title {
     text-align: center;
   }

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

@@ -20,6 +20,9 @@
         <ion-card-header>
           <ion-card-title>{{ location.name }}</ion-card-title>
           <ion-card-subtitle>Level {{ location.level }}</ion-card-subtitle>
+          <app-location-stats-button
+            [location]="location.name"
+          ></app-location-stats-button>
         </ion-card-header>
 
         <app-background-art [sprite]="location.background"></app-background-art>

client/src/app/pages/travel/travel.page.scss

@@ -1,5 +1,11 @@
 
 .location-card {
+  app-location-stats-button {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+  }
+
   .description {
     min-height: 200px;
   }

client/src/app/shared.module.ts

@@ -11,8 +11,10 @@ import { ItemElementsComponent } from '@components/item-elements/item-elements.c
 import { ItemIconComponent } from '@components/item-icon/item-icon.component';
 import { ItemRarityComponent } from '@components/item-rarity/item-rarity.component';
 import { ItemStatsComponent } from '@components/item-stats/item-stats.component';
+import { LocationStatsButtonComponent } from '@components/location-stats-button/location-stats-button.component';
 import { ChooseAvatarModalComponent } from '@components/modals/choose-avatar/choose-avatar.component';
 import { CompareItemsModalComponent } from '@components/modals/compare-items/compare-items.component';
+import { LocationStatsModalComponent } from '@components/modals/location-stats/location-stats.component';
 import { StoreTextComponent } from '@components/store-text/store-text.component';
 import { RelativeTimePipe } from '@helpers/relativetime.pipe';
 import { IonicModule } from '@ionic/angular';
@@ -25,6 +27,8 @@ const components = [
   HeroComponent,
   ChooseAvatarModalComponent,
   CompareItemsModalComponent,
+  LocationStatsButtonComponent,
+  LocationStatsModalComponent,
   HeaderBarComponent,
   AvatarComponent,
   ItemIconComponent,