Use mission list component where possible

Also adds the mission separator and task tooltips to the mission list component.

src/app/gui/mission-list/mission-list.component.css

@@ -10,3 +10,9 @@ ul.mission-list {
 ul.mission-list li {
     display: inline-block;
 }
+
+.mission-separator {
+    flex-basis: 100%;
+    height: 2rem;
+    order: 0;
+}

src/app/gui/mission-list/mission-list.component.html

@@ -1,9 +1,10 @@
 <ul class="mission-list" *ngIf="$missions | async; let missions">
     <ng-container *ngFor="let mission of missions">
         <li *luxVar="mission.$table | async; let m" [style.order]="mission.$sortOrder | async">
-            <lux-mission [id]="mission.id" [isMission]="m ? m.isMission : false" [iconID]="mission.$missionIcon | async"
-                [title]="(mission.$loc | async)?.name"
-                [tooltip]="((m && !m.isMission) ? 'Achievement' : 'Mission') + ' #' + mission.id"></lux-mission>
+            <lux-mission [id]="mission.id" [isMission]="m ? m.isMission : true" [iconID]="mission.$missionIcon | async"
+                [title]="(mission.$loc | async)?.name | default:'&NewLine;&NewLine;'"
+                [tooltip]="(m && !m.isMission) ? ((mission.$locText | async)?.description | default:'Achievement #'+mission.id) : ((mission.$locText | async)?.in_progress | default:'Mission #'+mission.id)"></lux-mission>
         </li>
     </ng-container>
-</ul>
+    <li class="mission-separator"></li>
+</ul>

src/app/gui/mission-list/mission-list.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { Observable, of, ReplaySubject } from 'rxjs';
 import { map, shareReplay, switchMap } from 'rxjs/operators';
 import { DB_Icons, DB_MissionTasks } from '../../../defs/cdclient';
-import { Locale_Missions } from '../../../defs/locale';
+import { Locale_Missions, Locale_MissionText } from '../../../defs/locale';
 import { mapRec, mapToDict, mapToMultiDict, pick, recToSet, values } from '../../../defs/rx';
 import { LuCoreDataService } from '../../services';
 
@@ -38,10 +38,11 @@ class Mission {
     public $table: Observable<DB_Missions_Ref | undefined>,
     public $missionIcon: Observable<DB_Icons | undefined>,
     public $loc: Observable<Locale_Missions>,
+    public $locText: Observable<Locale_MissionText>,
   ) { }
 
   get $sortOrder(): Observable<number> {
-    return this.$table.pipe(map(m => m ? -m.isMission * 10000 + m.UISortOrder : 0))
+    return this.$table.pipe(map(m => m ? -m.isMission * 10000 + m.UISortOrder + 1 : 0))
   }
 }
 
@@ -72,6 +73,10 @@ export class MissionListComponent implements OnInit {
       cd.queryLocaleNum$("Missions", ["name"]),
       shareReplay(1),
     );
+    let $missionTextLocale = this.$missionIds.pipe(
+      cd.queryLocaleNum$("MissionText", ["in_progress", "description"]),
+      shareReplay(1),
+    );
     let $missionIcons = $missionsTable.pipe(
       values(),
       map(data => Array.from(data, d => d.missionIconID).filter(v => v)),
@@ -109,7 +114,8 @@ export class MissionListComponent implements OnInit {
         let $table = $missionsTable.pipe(pick(id), shareReplay(1));
         let $missionIcon = $table.pipe(switchMap(iconForMission));
         let $loc = $missionsLocale.pipe(pick(id), shareReplay(1));
-        return new Mission(id, $table, $missionIcon, $loc);
+        let $locText = $missionTextLocale.pipe(pick(id), shareReplay(1));
+        return new Mission(id, $table, $missionIcon, $loc, $locText);
       }))
     );
   }

src/app/gui/mission/mission.component.css

@@ -92,4 +92,5 @@ a {
     color: #ccc;
     font-weight: 600;
     text-align: center;
+    white-space: pre-wrap;
 }

src/app/missions/by-subtype/by-subtype.component.css

@@ -1,5 +0,0 @@
-.mission-separator {
-    flex-basis: 100%;
-    height: 2rem;
-    order: 0;
-}

src/app/missions/by-subtype/by-subtype.component.html

@@ -8,8 +8,7 @@
   <app-group-icon [name]="d.type"></app-group-icon>
   <h2>Missions <small>{{d.type}} - {{d.subtype}}</small></h2>
 
-  <div class="mission-list" *ngIf="$typeData | async; let data">
-    <div class="mission-separator"></div>
-    <lux-mission [luxFetch]="mission_id" *ngFor="let mission_id of data.mission_ids"></lux-mission>
-  </div>
-</section>
+  <ng-container *ngIf="$typeData | async; let data">
+    <lux-mission-list [ids]="data.mission_ids"></lux-mission-list>
+  </ng-container>
+</section>

src/app/missions/by-type/by-type.component.css

@@ -1,12 +0,0 @@
-.mission-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 4px;
-}
-
-.mission-separator {
-    break-before: always;
-    break-after: always;
-    height: 2rem;
-    order: 0;
-}

src/app/missions/by-type/by-type.component.html

@@ -22,10 +22,7 @@ <h3>Subtypes</h3>
     <section *ngIf="data.mission_ids">
       <h3>Missions</h3>
 
-      <div class="mission-list">
-        <div class="mission-separator"></div>
-        <lux-mission [luxFetch]="mission_id" *ngFor="let mission_id of data.mission_ids"></lux-mission>
-      </div>
+      <lux-mission-list [ids]="data.mission_ids"></lux-mission-list>
     </section>
   </ng-container>
-</section>
+</section>

src/app/missions/detail/detail.component.html

@@ -57,9 +57,7 @@ <h3>Prerequisites</h3>
   <ng-container *ngIf="$rev | async; let rev">
     <section id="prereq-for" *ngIf="rev.missions && rev.missions.prereq_for; let list">
       <h3>Prerequisite For</h3>
-      <div class="mission-list">
-        <lux-mission *ngFor="let id of list" [luxFetch]="id"></lux-mission>
-      </div>
+      <lux-mission-list [ids]="list"></lux-mission-list>
     </section>
   </ng-container>
 
@@ -315,4 +313,4 @@ <h4>Details</h4>
   <h3>Details</h3>
 
   <app-data-table *ngIf="$mission | async; let mission" [table]="mission"></app-data-table>
-</ng-container>
+</ng-container>

src/app/missions/tasks/mission-task/mission-task.component.html

@@ -2,10 +2,7 @@ <h4>{{task.uid}}: MissionComplete Task (16)</h4>
 The player needs to complete
 <ng-container *ngIf="task.targetGroup; else singleMission">
   any <b luxTooltip="targetValue">{{task.targetValue}}</b> of the following missions:
-  <a routerLink="/missions/{{task.target}}">{{task.target}}</a><!--
-  --><ng-container *ngFor="let target of task.targetGroup ? task.targetGroup.split(',') : []"><!--
-  -->, <a routerLink="/missions/{{target}}">{{target}}</a>
-  </ng-container>.
+  <lux-mission-list [ids]="missionList"></lux-mission-list>
 </ng-container>
 <ng-template #singleMission>
 the mission <br><lux-mission [luxFetch]="task.target"></lux-mission>

src/app/missions/tasks/mission-task/mission-task.component.ts

@@ -9,10 +9,13 @@ import { DB_MissionTasks } from '../../../../defs/cdclient';
 export class MissionTaskComponent implements OnInit {
 
   @Input() task: DB_MissionTasks;
+  missionList: number[] = [];
 
   constructor() { }
 
   ngOnInit() {
+    this.missionList = this.task.targetGroup ? this.task.targetGroup.split(',').map(Number) : [];
+    this.missionList.push(this.task.target);
   }
 
 }

src/app/missions/tasks/racing-task/racing-task.component.html

@@ -15,19 +15,11 @@ <h4>{{task.uid}}: Racing Task (23)</h4>
   </span>
   <span *ngSwitchCase="4">
     complete <b luxTooltip="targetValue">any {{task.targetValue}}</b> of the following missions:
-    <ul class="inline-ul">
-      <li *ngFor="let target of task.targetGroup ? task.targetGroup.split(',') : []">
-        <a routerLink="/missions/{{target}}">{{target}}</a>
-      </li>
-    </ul>
+    <lux-mission-list [ids]="targetList"></lux-mission-list>
   </span>
   <span *ngSwitchCase="5">
     complete <b luxTooltip="targetValue">any {{task.targetValue}}</b> of the following missions:
-    <ul class="inline-ul">
-      <li *ngFor="let target of task.targetGroup ? task.targetGroup.split(',') : []">
-        <a routerLink="/missions/{{target}}">{{target}}</a>
-      </li>
-    </ul>
+    <lux-mission-list [ids]="targetList"></lux-mission-list>
   </span>
   <span *ngSwitchCase="6">
     swap out every module on their car in a single modular build session (excluding chassis).

src/app/missions/tasks/racing-task/racing-task.component.ts

@@ -9,10 +9,12 @@ import { DB_MissionTasks } from '../../../../defs/cdclient';
 export class RacingTaskComponent implements OnInit {
 
   @Input() task: DB_MissionTasks;
+  targetList: number[] = [];
 
   constructor() { }
 
   ngOnInit() {
+    this.targetList = this.task.targetGroup ? this.task.targetGroup.split(',').map(Number) : [];
   }
 
 }

src/app/objects/components/collectible-component/collectible-component.component.html

@@ -1,11 +1,11 @@
 <h3>Collectible Component ({{id}})</h3>
 <ng-container *ngIf="component | async; else loading; let collectible">
-  <p>This object is a collectible for the mission
-    <a routerLink="/missions/{{collectible.requirement_mission}}">{{collectible.requirement_mission}}</a>
+  <p>This object is a collectible for the mission<br>
+    <lux-mission [luxFetch]="collectible.requirement_mission"></lux-mission>
   </p>
   <h4>Details</h4>
   <app-data-table [table]="collectible"></app-data-table>
 </ng-container>
 <ng-template #loading>
   Loading...
-</ng-template>
+</ng-template>

src/app/objects/components/used-by/used-by.component.html

@@ -39,12 +39,7 @@ <h4>Item Sets</h4>
         <section *ngIf="it.length > 0">
             <h4>Missions</h4>
             <h5>Reward Items for</h5>
-            <ul>
-                <li *ngFor="let id of it">
-                    <a [routerLink]="['/missions', id]">Mission #{{id}}
-                        <span *ngIf="id | loc:'Missions' | async; let l">({{l['name']}})</span></a>
-                </li>
-            </ul>
+            <lux-mission-list [ids]="it"></lux-mission-list>
         </section>
     </ng-container>
-</ng-container>
+</ng-container>

src/app/skills/skill/skill.component.html

@@ -54,7 +54,7 @@ <h4>UseSkill MissionTasks</h4>
     <dl>
       <ng-container *ngFor="let task_id of rev_skill.mission_tasks">
         <ng-container *ngIf="rev_skill._embedded.MissionTasks| elem: task_id.toString(); let task">
-          <dt>Mission <a routerLink="/missions/{{task.id}}">#{{task.id}}</a>:</dt>
+          <dt><lux-mission [luxFetch]="task.id"></lux-mission></dt>
           <dd><app-task-detail [task]="task"></app-task-detail></dd>
         </ng-container>
       </ng-container>
@@ -78,4 +78,4 @@ <h3>Details</h3>
 </section>-->
 <ng-template #loading>
   Loading...
-</ng-template>
+</ng-template>

src/defs/locale.ts

@@ -68,6 +68,7 @@ export interface Locale_PropertyTemplate {
 export interface Locale {
     ItemSets: Record<number, Locale_ItemSets>,
     Missions: Record<number, Locale_Missions>,
+    MissionText: Record<number, Locale_MissionText>,
     Preconditions: Record<number, Locale_Preconditions>,
     PropertyTemplate: Record<number, Locale_PropertyTemplate>,
     RewardCodes: Record<number, Locale_RewardCodes>,