Merge pull request #75 from encounter/ss

Add Skyward Sword & rework external games

src/app/games/game-summaries/game-summaries.component.html

@@ -1,4 +1,3 @@
 <div fxLayout="row wrap" fxLayoutAlign="center">
   <game-summary fxFlex="25%" fxFlex.xs="100%" fxFlex.sm="33%" *ngFor="let game of games" [data]="game"></game-summary>
-  <external-game-summary fxFlex="25%" fxFlex.xs="100%" fxFlex.sm="33%" *ngFor="let game of externalGames" [data]="game"></external-game-summary>
 </div>

src/app/games/game-summaries/game-summaries.component.scss

@@ -7,7 +7,7 @@ h2 {
   width: max-content;
 }
 
-game-summary, external-game-summary {
+game-summary {
   flex-grow: 0;
   margin-bottom: 12px;
   margin-right: 1em;

src/app/games/game-summaries/game-summaries.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { GamesService } from '../games.service';
-import { IGame, IExternalGame } from '../games.service.interface';
+import { IGame } from '../games.service.interface';
 
 /**
  * Container for all game summaries.
@@ -18,20 +18,12 @@ export class GameSummariesComponent implements OnInit {
    * List of games to use for "GameSummary" components.
    */
   games: IGame[] = [];
-  /**
-   * List of external games to use for "ExternalGameSummary" components.
-   */
-  externalGames: IExternalGame[] = [];
 
   ngOnInit(): void {
     this.gamesService.getGames().subscribe(
       res => this.games = res,
       err => console.error(err)
     )
-    this.gamesService.getExternalGames().subscribe(
-      res => this.externalGames = res,
-      err => console.error(err)
-    )
   }
 
 }

src/app/games/game-summaries/game-summary/game-summary.component.html

@@ -1,20 +1,35 @@
-<mat-card>
+<ng-template #headerContent>
+  <mat-card-header>
+    <mat-card-title>
+      {{ data.title }}
+      <fa-icon *ngIf="data.external" [icon]="external"></fa-icon>
+    </mat-card-title>
+    <mat-card-subtitle>
+      <ng-container *ngIf="total != undefined">Code decompiled: <strong>{{ total }}</strong></ng-container>
+      &nbsp;
+    </mat-card-subtitle>
+  </mat-card-header>
+</ng-template>
+<ng-template #headerExternal>
+  <a [href]="data.routingURL">
+    <ng-container *ngTemplateOutlet="headerContent"></ng-container>
+  </a>
+</ng-template>
+<ng-template #headerInternal>
   <a [routerLink]="data.routingURL">
-    <mat-card-header>
-      <mat-card-title>
-        {{ data.title }}
-      </mat-card-title>
-      <mat-card-subtitle>
-        <ng-container *ngIf="total != undefined">Code decompiled: <strong>{{ total }}</strong></ng-container>
-        &nbsp;
-      </mat-card-subtitle>
-    </mat-card-header>
+    <ng-container *ngTemplateOutlet="headerContent"></ng-container>
   </a>
+</ng-template>
+<mat-card>
+  <ng-container *ngIf="data.external; then headerExternal else headerInternal"></ng-container>
   <mat-card-actions>
     <a mat-button *ngIf="data.links.hasOwnProperty('github')" [href]="data.links.github" title="Github">
       <fa-icon [icon]="github"></fa-icon>
       <div class="caption">GitHub</div>
     </a>
+    <a mat-button *ngIf="data.links.hasOwnProperty('progress')" [href]="data.links.progress" title="Progress">
+      <fa-icon [icon]="chart"></fa-icon>
+      <div class="caption">Progress history</div>
+    </a>
   </mat-card-actions>
 </mat-card>
-

src/app/games/game-summaries/game-summary/game-summary.component.scss

@@ -11,6 +11,11 @@ mat-card-actions {
   text-align: center;
 }
 
+mat-card-title > fa-icon {
+  font-size: 16px;
+  vertical-align: center;
+}
+
 mat-card-actions fa-icon {
   vertical-align: center;
 }

src/app/games/game-summaries/game-summary/game-summary.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, OnChanges, OnInit } from '@angular/core';
 import { IGame } from '../../games.service.interface';
 import { faGithub, faTrello } from '@fortawesome/free-brands-svg-icons';
+import { faChartLine, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import { GamesService } from '../../games.service';
 
 /**
@@ -26,6 +27,8 @@ export class GameSummaryComponent implements OnChanges {
   /**
    * Icon definitions.
    */
+  chart = faChartLine;
+  external = faExternalLinkAlt;
   github = faGithub;
   trello = faTrello;
 

src/app/games/games.module.ts

@@ -5,7 +5,6 @@ import { GamesService } from './games.service';
 import { GameSummariesComponent } from './game-summaries/game-summaries.component';
 import { GameSummaryComponent } from './game-summaries/game-summary/game-summary.component';
 import { GameComponent } from './game/game.component';
-import { ExternalGameSummaryComponent } from './game-summaries/external-game-summary/external-game-summary.component'
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatGridListModule } from '@angular/material/grid-list';
@@ -52,7 +51,6 @@ export function markedOptionsFactory(): MarkedOptions {
     GameProgressComponent,
     GameChartComponent,
     GameFAQComponent,
-    ExternalGameSummaryComponent
   ],
   imports: [
     CommonModule,
@@ -78,4 +76,4 @@ export function markedOptionsFactory(): MarkedOptions {
   providers: [GamesService]
 })
 export class GamesModule {
-}
+}

src/app/games/games.service.interface.ts

@@ -40,32 +40,10 @@ export interface IGame {
    * The charts and data for each game.
    */
   progressMeta: IChart[];
-}
-
-/**
- * Game information to display and for project progress processing.
- */
-export interface IExternalGame {
-  /**
-   * The string to use to identify the game.
-   */
-  slug: string;
-  /**
-   * The game's full title.
-   */
-  title: string;
   /**
-   * The URL for the card title to link to.
+   * Whether the game is external.
    */
-  routingURL: string;
-  /**
-   * Links to display as an icon. The key defines the icon, and the value is the link href.
-   */
-  links: {[type: string]: string};
-  /**
-   * The URL of the shield json to read.
-   */
-  shieldURL: string;
+  external: boolean;
 }
 
 /**
@@ -196,11 +174,6 @@ export interface IGamesService {
    */
   getGames(): Observable<IGame[]>;
 
-  /**
-   * Get the information for all supported external games.
-   */
-  getExternalGames(): Observable<IExternalGame[]>;
-
   /**
    * Get all of the resources.
    */

src/app/games/games.service.ts

@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { IExternalGame, IGame, IGamesService, IResource, IShield } from './games.service.interface';
+import { IGame, IGamesService, IResource, IShield } from './games.service.interface';
 
 /**
  * Obtains data relating to the games.
@@ -17,10 +17,6 @@ export class GamesService implements IGamesService {
     return this.http.get<IGame[]>("/assets/json/games.json");
   }
 
-  getExternalGames(): Observable<IExternalGame[]> {
-    return this.http.get<IExternalGame[]>("/assets/json/external-games.json");
-  }
-
   getResources(): Observable<IResource[]> {
     return this.http.get<IResource[]>("/assets/json/resources.json");
   }