feat: add alternate timeline option

src/app/aliens/alien.service.ts

@@ -2,19 +2,21 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map, retry, shareReplay } from 'rxjs/operators';
-import { Alien, GameSelection, SetupLevel, SetupType } from '../types';
+import { Alien, AlienDescriptor, Game, GameSelection, SetupLevel, SetupType } from '../types';
 
 @Injectable({ providedIn: 'root' })
 export class AlienService {
   /** Promise that returns once data is fetched */
   public init$: Observable<string[]>;
   /** Get alien from name */
-  public get: (name: string) => Alien;
+  public get: (name: string, games?: GameSelection) => Alien;
   /** Get names that match given properties */
   public getMatchingNames: (levels: boolean[], games: GameSelection, exclude?: string[], setup?: SetupLevel) => string[];
 
+  normalizeAlien: (alien: AlienDescriptor, games: GameSelection) => Alien;
+
   public constructor(http: HttpClient) {
-    const aliens: Record<string, Alien> = {};
+    const aliens: Record<string, AlienDescriptor> = {};
     const names: string[] = [];
 
     this.init$ = http.get<Alien.Data>('data/aliens2.json').pipe(
@@ -30,15 +32,39 @@ export class AlienService {
       shareReplay(),
     );
 
-    this.get = name => aliens[name];
+    this.get = (name: string, games?: GameSelection) => {
+      return this.normalizeAlien(aliens[name], games || {});
+    };
+
     this.getMatchingNames = (levels, games, exclude, setup) => names.filter(name => {
-      const alien = aliens[name];
+      // Normalize the alien based on the game selection
+      const alien = this.normalizeAlien(aliens[name], games);
       // Matches level and game
-      return levels[alien.level] && games[alien.game] &&
+      return levels[alien.level] && (games[alien.game] || (games[Game.OdysseyAlternate] && alien.alternate)) &&
         // No exclude by name, or not in exclude list
         (!exclude || !exclude.length || exclude.indexOf(name) < 0) &&
         // No setup restriction or no alien setup or (only restrict color and alien setup is not color)
         (!setup || !alien.setup || (setup === SetupLevel.RequiresExtraColor && alien.setup !== SetupType.RequiresExtraColor));
     });
+
+    this.normalizeAlien = (alien, games) => {
+      // Normalize the alien based on the game selection
+      const { powers, ...rest } = alien;
+      let normalized: Alien;
+      if(games[Game.OdysseyAlternate] && powers.length > 1) {
+        normalized = {
+          ...rest,
+          ...powers[1],
+          alternate: true,
+        };
+      } else {
+        normalized = {
+          ...rest,
+          ...powers[0],
+        };
+      }
+
+      return normalized;
+    };
   }
 }

src/app/aliens/grid/grid.component.html

@@ -7,7 +7,7 @@
 				</button>
 			</div>
 			<mat-card-title class="alien-fg">{{alien.name}}</mat-card-title>
-			<mat-card-subtitle>{{alien.power}}</mat-card-subtitle>
+			<mat-card-subtitle class="alien-power" [ngClass]="{ 'alien-alternate': alien.alternate }">{{alien.summary}}</mat-card-subtitle>
 		</mat-card-header>
 		<mat-card-footer>
 			<div class="bar alien-bg">
@@ -29,4 +29,4 @@
 			</div>
 		</mat-card-footer>
 	</mat-card>
-</div>
+</div>

src/app/generator/page/page.component.ts

@@ -9,7 +9,7 @@ const STORAGE_PREFIX = 'cosmic.alien-gen';
 type Actions = 'draw' | 'hide' | 'show' | 'redo' | 'reset';
 
 /** Generator settings */
-interface ISettings {
+export interface ISettings {
   levels: boolean[];
   games: GameSelection;
   namesExcluded: string[];
@@ -97,7 +97,7 @@ export class AlienGeneratorPageComponent implements OnInit {
 
       // if current choice has any restrictions, remove them from pool as well
       if(preventConflicts) {
-        const alien = Aliens.get(name);
+        const alien = Aliens.get(name, this.settings.games);
         if(alien.restriction) {
           for(const restriction of alien.restriction.split(',')) {
             const index = pool.indexOf(restriction);
@@ -262,7 +262,7 @@ export class AlienGeneratorPageComponent implements OnInit {
    */
   private setState(aliens: string[], message: string, limit?: number) {
     this.state = message;
-    this.aliensToShow = aliens.map(e => this.Aliens.get(e));
+    this.aliensToShow = aliens.map(e => this.Aliens.get(e, this.settings.games));
     if(limit) { this.settings.numToChoose = limit; }
     this.status = this.getStatus();
     this.disabled = this.getDisabledActions(this.settings.numToChoose, this.aliensToShow.length);

src/app/options/games/games.component.html

@@ -2,7 +2,14 @@
 	<mat-card-title>Games to include</mat-card-title>
 	<mat-list>
 		<mat-list-item *ngFor="let game of names">
-			<mat-checkbox class="mat-primary" (change)="select()" [(ngModel)]="games[game]">{{game}}</mat-checkbox>
+			<mat-checkbox
+				class="mat-primary"
+				[(ngModel)]="games[game]"
+				[disabled]="game === GameEnum.OdysseyAlternate && !games[GameEnum.Odyssey]"
+				(change)="select()"
+			>
+				{{game}}
+			</mat-checkbox>
 		</mat-list-item>
 	</mat-list>
-</mat-card>
+</mat-card>

src/app/options/games/games.component.ts

@@ -8,13 +8,21 @@ import { GameSelection, Game } from '../../types';
 export class GameOptionsComponent {
   @Output() public change = new EventEmitter<GameSelection>();
   @Input() public games: GameSelection = {};
+  readonly GameEnum = Game;
   public names: Game[] = [
     Game.Encounter, Game.Alliance,
     Game.Conflict, Game.Dominion,
     Game.Eons, Game.Incursion,
     Game.Storm, Game.Odyssey,
+    Game.OdysseyAlternate,
   ];
 
-  public select() { this.change.emit(this.games); }
+  public select() {
+    // Deselect the alternate timeline if Odyssey is not selected
+    if(!this.games[Game.Odyssey]) {
+      this.games[Game.OdysseyAlternate] = false;
+    }
+    this.change.emit(this.games);
+  }
 
 }

src/app/reference/page/page.component.ts

@@ -44,6 +44,6 @@ export class AlienReferencePageComponent implements OnInit {
 
   /** Refresh shown aliens based on settings */
   private refresh() {
-    this.groups = groupItems(this.Aliens.getMatchingNames(this.levels, this.games).map(this.Aliens.get), ['game', 'level'], ['name']);
+    this.groups = groupItems(this.Aliens.getMatchingNames(this.levels, this.games).map((value) => this.Aliens.get(value, this.games)), ['game', 'level'], ['name']);
   }
 }

src/app/types.ts

@@ -1,5 +1,5 @@
 /** Game names */
-export const enum Game {
+export enum Game {
   Encounter = 'Encounter',
   Alliance = 'Alliance',
   Conflict = 'Conflict',
@@ -8,6 +8,7 @@ export const enum Game {
   Storm = 'Storm',
   Eons = 'Eons',
   Odyssey = 'Odyssey',
+  OdysseyAlternate = 'Odyssey (Alternate Timeline)',
 }
 
 /** What kind of setup to filter */
@@ -36,36 +37,39 @@ export const enum Requirement {
 }
 
 /** Details that I've transcribed for all aliens */
-type BasicAlien = Readonly<{
+export type AlienDescriptor = Readonly<{
   name: string;
   game: Game;
-  power: string;
   level: 0 | 1 | 2;
-  description: string;
-  setup: SetupType;
+  powers: AlienPower[]
 }>;
 
-/** All details about an alien */
-export type Alien = BasicAlien & Readonly<{
+type AlienPower = Readonly<{
+  summary: string;
+  description: string;
+  setup: SetupType;
   restriction?: string;
   player?: string;
   mandatory?: Requirement;
   phases?: string;
+  alternate?: boolean;
 }>;
 
+export type Alien = Omit<AlienDescriptor, 'powers'> & AlienPower;
+
 /** Whether games are selected */
 export type GameSelection = Partial<Record<Game, boolean>>;
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace Alien {
   /** Properties that all aliens have */
-  export type MandatoryProperties = (keyof BasicAlien)[];
+  export type MandatoryProperties = (keyof Omit<AlienDescriptor, 'powers'>)[];
 
   /** Properties that I've only transcribed for some aliens */
   export type Properties = (keyof Alien)[];
 
   /** JSON format of alien data file */
   export interface Data {
-    list: Alien[];
+    list: AlienDescriptor[];
   }
 }

src/styles.scss

@@ -51,17 +51,9 @@ alien-grid {
   }
   .mat-card-title {
     font-weight: bold;
-    margin: {
-      left: -$margin;
-      right: -$margin;
-    }
   }
   .mat-card-subtitle {
     font-weight: normal;
-    margin: {
-      left: -$margin;
-      right: -$margin;
-    }
   }
   .mat-icon {
     width: 2*$margin;
@@ -105,4 +97,4 @@ alien-grid {
 
 @import './styles/home.scss';
 @import './styles/generator.scss';
-@import './styles/reference.scss';
+@import './styles/reference.scss';

src/styles/theme.scss

@@ -45,4 +45,13 @@ $alien-2-theme: mat.define-light-theme($cosmic-primary, $alien-2-palette);
   .alien-fg { color: $level2; }
   @include mat.button-theme($alien-2-theme);
   @include mat.checkbox-theme($alien-2-theme);
-}
+}
+.alien-power {
+  padding: 4px;
+  border-radius: 4px;
+  margin-left: -4px;
+}
+.alien-alternate {
+  background-color: #333;
+  color: #fff;
+}