From f1d81842787a1fb1f45e7d04525e0469af3982b2 Mon Sep 17 00:00:00 2001
From: Elliptic Ellipsis <elliptic.ellipsis@gmail.com>
Date: Sun, 19 Dec 2021 12:34:17 +0000
Subject: [PATCH 01/10] Add ExternalGame component, use shields for progress on
 front page

---
 .../external-game.component.html              | 19 ++++++
 .../external-game.component.scss              | 27 ++++++++
 .../external-game.component.spec.ts           | 25 +++++++
 .../external-game/external-game.component.ts  | 48 ++++++++++++++
 .../game-summaries.component.html             |  3 +
 .../game-summaries.component.scss             |  6 ++
 .../game-summaries.component.ts               | 10 ++-
 .../game-summary/game-summary.component.html  |  5 +-
 .../game-summary/game-summary.component.ts    | 14 +---
 src/app/games/game/game.component.scss        |  1 +
 src/app/games/games.module.ts                 |  6 +-
 src/app/games/games.service.interface.ts      | 65 +++++++++++++++++++
 src/app/games/games.service.ts                | 10 ++-
 src/assets/json/external-games.json           | 12 ++++
 src/assets/json/games.json                    |  3 +
 15 files changed, 236 insertions(+), 18 deletions(-)
 create mode 100644 src/app/games/game-summaries/external-game/external-game.component.html
 create mode 100644 src/app/games/game-summaries/external-game/external-game.component.scss
 create mode 100644 src/app/games/game-summaries/external-game/external-game.component.spec.ts
 create mode 100644 src/app/games/game-summaries/external-game/external-game.component.ts
 create mode 100644 src/assets/json/external-games.json

diff --git a/src/app/games/game-summaries/external-game/external-game.component.html b/src/app/games/game-summaries/external-game/external-game.component.html
new file mode 100644
index 0000000..b270815
--- /dev/null
+++ b/src/app/games/game-summaries/external-game/external-game.component.html
@@ -0,0 +1,19 @@
+<mat-card>
+  <a [href]="data.routingURL">
+    <mat-card-header>
+      <mat-card-title>
+        <fa-icon [icon]="external"></fa-icon> {{ data.title }}
+      </mat-card-title>
+      <mat-card-subtitle>Code decompiled: <strong>{{ total }}</strong></mat-card-subtitle>
+    </mat-card-header>
+  </a>
+  <mat-card-actions>
+    <a mat-icon-button *ngIf="data.links.hasOwnProperty('github')" [href]="data.links.github" title="Github">
+      <fa-icon [icon]="github"></fa-icon>
+    </a>
+    <a mat-icon-button *ngIf="data.links.hasOwnProperty('progress')" [href]="data.links.progress" title="Progress">
+      <fa-icon [icon]="chart"></fa-icon>
+    </a>
+  </mat-card-actions>
+</mat-card>
+
diff --git a/src/app/games/game-summaries/external-game/external-game.component.scss b/src/app/games/game-summaries/external-game/external-game.component.scss
new file mode 100644
index 0000000..e279cbb
--- /dev/null
+++ b/src/app/games/game-summaries/external-game/external-game.component.scss
@@ -0,0 +1,27 @@
+mat-card > a {
+    text-decoration: none;
+  }
+  
+img[mat-card-avatar] {
+  border-radius: 0;
+  object-fit: contain;
+}
+
+mat-card-actions {
+  text-align: center;
+}
+
+mat-icon-button {
+  width: max-content;
+}
+
+mat-card-title > fa-icon {
+  font-size: 20px;
+  vertical-align: center;
+}
+
+mat-card-actions {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content:space-evenly
+}
diff --git a/src/app/games/game-summaries/external-game/external-game.component.spec.ts b/src/app/games/game-summaries/external-game/external-game.component.spec.ts
new file mode 100644
index 0000000..ebb3435
--- /dev/null
+++ b/src/app/games/game-summaries/external-game/external-game.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GameComponent } from '../../game/game.component';
+
+describe('GameComponent', () => {
+  let component: GameComponent;
+  let fixture: ComponentFixture<GameComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GameComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GameComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/games/game-summaries/external-game/external-game.component.ts b/src/app/games/game-summaries/external-game/external-game.component.ts
new file mode 100644
index 0000000..bd31f2c
--- /dev/null
+++ b/src/app/games/game-summaries/external-game/external-game.component.ts
@@ -0,0 +1,48 @@
+import { Component, Input, OnChanges } from '@angular/core';
+import { IExternalGame, IGame } from '../../games.service.interface';
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
+import { faExternalLinkAlt, faChartLine } from '@fortawesome/free-solid-svg-icons';
+import { GamesService } from '../../games.service';
+
+/**
+ * Displays a game's name, decomp progress, and links.
+ */
+@Component({
+  selector: 'external-game',
+  templateUrl: './external-game.component.html',
+  styleUrls: ['./external-game.component.scss']
+})
+export class ExternalGameComponent implements OnChanges {
+
+  constructor(private gamesService: GamesService) { }
+
+  /**
+   * The game data to use.
+   */
+  @Input() data: IExternalGame;
+  /**
+   * Shield data
+   */
+  shield: string;
+  /**
+   * The percentage to display for completion.
+   */
+  total: string;
+  /**
+   * Icon definition.
+   */
+  github = faGithub;
+  /**
+   * Icon definition.
+   */
+  external = faExternalLinkAlt;
+  chart = faChartLine;
+
+  ngOnChanges(): void {
+    this.gamesService.getGameShield(`${this.data.shieldURL}`).subscribe(
+      res => this.total = res.message,
+      err => console.error(err)
+    );
+  }
+
+}
diff --git a/src/app/games/game-summaries/game-summaries.component.html b/src/app/games/game-summaries/game-summaries.component.html
index 8a6d91d..4f99c57 100644
--- a/src/app/games/game-summaries/game-summaries.component.html
+++ b/src/app/games/game-summaries/game-summaries.component.html
@@ -1,3 +1,6 @@
 <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>
 </div>
+<div fxLayout="row wrap" fxLayoutAlign="center">
+  <external-game fxFlex="25%" fxFlex.xs="100%" fxFlex.sm="33%" *ngFor="let game of externalGames" [data]="game"></external-game>
+</div>
diff --git a/src/app/games/game-summaries/game-summaries.component.scss b/src/app/games/game-summaries/game-summaries.component.scss
index 793e7a6..f6d9cb4 100644
--- a/src/app/games/game-summaries/game-summaries.component.scss
+++ b/src/app/games/game-summaries/game-summaries.component.scss
@@ -7,3 +7,9 @@ game-summary {
   margin-bottom: 12px;
   margin-right: 1em;
 }
+
+external-game {
+  flex-grow: 0;
+  margin-bottom: 12px;
+  margin-right: 1em;
+}
diff --git a/src/app/games/game-summaries/game-summaries.component.ts b/src/app/games/game-summaries/game-summaries.component.ts
index ab0a19c..3c73382 100644
--- a/src/app/games/game-summaries/game-summaries.component.ts
+++ b/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 } from '../games.service.interface';
+import { IGame, IExternalGame } from '../games.service.interface';
 
 /**
  * Container for all game summaries.
@@ -18,12 +18,20 @@ export class GameSummariesComponent implements OnInit {
    * List of games to use for "GameSummary" components.
    */
   games: IGame[] = [];
+  /**
+   * List of external games to use for "ExternalGame" 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)
+    )
   }
 
 }
diff --git a/src/app/games/game-summaries/game-summary/game-summary.component.html b/src/app/games/game-summaries/game-summary/game-summary.component.html
index 6a53250..72b1ca8 100644
--- a/src/app/games/game-summaries/game-summary/game-summary.component.html
+++ b/src/app/games/game-summaries/game-summary/game-summary.component.html
@@ -4,16 +4,13 @@
       <mat-card-title>
         {{ data.title }}
       </mat-card-title>
-      <mat-card-subtitle>Percent completion: <strong>{{ (total * 100).toFixed(2) }}%</strong></mat-card-subtitle>
+      <mat-card-subtitle>Code decompiled: <strong>{{ total }}</strong></mat-card-subtitle>
     </mat-card-header>
   </a>
   <mat-card-actions>
     <a mat-icon-button *ngIf="data.links.hasOwnProperty('github')" [href]="data.links.github" title="Github">
       <fa-icon [icon]="github"></fa-icon>
     </a>
-    <a mat-icon-button *ngIf="data.links.hasOwnProperty('trello')" [href]="data.links.trello" title="Trello">
-      <fa-icon [icon]="trello"></fa-icon>
-    </a>
   </mat-card-actions>
 </mat-card>
 
diff --git a/src/app/games/game-summaries/game-summary/game-summary.component.ts b/src/app/games/game-summaries/game-summary/game-summary.component.ts
index 89ba924..247b4cd 100644
--- a/src/app/games/game-summaries/game-summary/game-summary.component.ts
+++ b/src/app/games/game-summaries/game-summary/game-summary.component.ts
@@ -22,7 +22,7 @@ export class GameSummaryComponent implements OnChanges {
   /**
    * The percentage to display for completion.
    */
-  total: number;
+  total: string;
   /**
    * Icon definition.
    */
@@ -33,16 +33,8 @@ export class GameSummaryComponent implements OnChanges {
   trello = faTrello;
 
   ngOnChanges(): void {
-    // Matching is second
-    this.gamesService.getGameCSV(this.data.csvs.matching).subscribe(
-      res => {
-        const points = res.split("\n").filter((line) => line != "");
-        const latestPoint = points[points.length - 1];
-        const column = latestPoint.split(",");
-
-        let i = this.data.progressMeta[0].index;
-        this.total = +column[i] / +column[i + 1];
-      },
+    this.gamesService.getGameShield(`${this.data.shieldURL}`).subscribe(
+      res => this.total = res.message,
       err => console.error(err)
     );
   }
diff --git a/src/app/games/game/game.component.scss b/src/app/games/game/game.component.scss
index 766c0c2..f832010 100644
--- a/src/app/games/game/game.component.scss
+++ b/src/app/games/game/game.component.scss
@@ -5,6 +5,7 @@ h1 {
 
 article {
     max-width: 800px;
+    // max-width: min(100%, 800px);
     margin: 1rem auto;
 }
 
diff --git a/src/app/games/games.module.ts b/src/app/games/games.module.ts
index fa0ce9b..ae5622d 100644
--- a/src/app/games/games.module.ts
+++ b/src/app/games/games.module.ts
@@ -5,6 +5,7 @@ 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 { ExternalGameComponent } from './game-summaries/external-game/external-game.component'
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatGridListModule } from '@angular/material/grid-list';
@@ -17,6 +18,8 @@ import { ChartModule } from 'angular-highcharts';
 import { GameFAQComponent } from './game/game-faq/game-faq.component';
 import { MarkdownModule, MarkedOptions, MarkedRenderer } from 'ngx-markdown';
 
+
+
 // function that returns `MarkedOptions` with renderer override
 export function markedOptionsFactory(): MarkedOptions {
   const renderer = new MarkedRenderer();
@@ -48,7 +51,8 @@ export function markedOptionsFactory(): MarkedOptions {
     GameComponent,
     GameProgressComponent,
     GameChartComponent,
-    GameFAQComponent
+    GameFAQComponent,
+    ExternalGameComponent
   ],
   imports: [
     CommonModule,
diff --git a/src/app/games/games.service.interface.ts b/src/app/games/games.service.interface.ts
index 0918ea2..b61d857 100644
--- a/src/app/games/games.service.interface.ts
+++ b/src/app/games/games.service.interface.ts
@@ -12,6 +12,10 @@ export interface IGame {
    * The game's full title.
    */
   title: string;
+  /**
+   * The URL of the shield json to read.
+   */
+  shieldURL: string;
   /**
    * The name of the "FAQ" MD to read.
    */
@@ -34,6 +38,32 @@ export interface IGame {
   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.
+   */
+  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;
+}
+
 /**
  * Resources to display within the Resources tab.
  */
@@ -133,6 +163,29 @@ export interface ISubdivision {
   description: string;
 }
 
+/**
+ * Describes a game's shield output.
+ */
+export interface IShield {
+  /**
+   * Always 1.
+   */
+  schemaVersion: number;
+  /**
+   * Static label in left half.
+   */
+  label: string;
+  /**
+   * Generally the progress number.
+   */
+  message: string;
+  /**
+   * Colour of the message background.
+   */
+  color: string;
+}
+
+
 /**
  * Functions to implement within "GamesService".
  */
@@ -143,6 +196,11 @@ export interface IGamesService {
    */
   getGames(): Observable<IGame[]>;
 
+  /**
+   * Get the information for all supported external games.
+   */
+  getExternalGames(): Observable<IExternalGame[]>;
+
   /**
    * Get all of the resources.
    */
@@ -155,6 +213,13 @@ export interface IGamesService {
    */
   getGameCSV(filename: string): Observable<string>;
 
+  /**
+   * Get the Shield data for a game.
+   *
+   * @param filename The filename of the desired CSV.
+   */
+  getGameShield(filename: string): Observable<IShield>;
+
   /**
    * Get the FAQ data for a game.
    *
diff --git a/src/app/games/games.service.ts b/src/app/games/games.service.ts
index b16125d..3649d2c 100644
--- a/src/app/games/games.service.ts
+++ b/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 { IGame, IGamesService, IResource } from './games.service.interface';
+import { IExternalGame, IGame, IGamesService, IResource, IShield } from './games.service.interface';
 
 /**
  * Obtains data relating to the games.
@@ -17,6 +17,10 @@ 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");
   }
@@ -25,6 +29,10 @@ export class GamesService implements IGamesService {
     return this.http.get(`/assets/csv/${filename}.csv`, { responseType: "text" });
   }
 
+  getGameShield(filename: string): Observable<IShield> {
+    return this.http.get<IShield>(filename);
+  }
+
   getGameFAQ(filename: string): Observable<string> {
     return this.http.get(`/assets/md/${filename}.md`, { responseType: "text" });
   }
diff --git a/src/assets/json/external-games.json b/src/assets/json/external-games.json
new file mode 100644
index 0000000..d9ad417
--- /dev/null
+++ b/src/assets/json/external-games.json
@@ -0,0 +1,12 @@
+[
+    {
+        "slug": "botw",
+        "title": "Breath of the Wild",
+        "routingURL": "https://www.github.com/zeldaret/botw",
+        "links": {
+            "github": "https://www.github.com/zeldaret/botw",
+            "progress": "https://botw.link/progress"
+        },
+        "shieldURL": "https://botw.link/badges/progress.json"
+    }
+]
\ No newline at end of file
diff --git a/src/assets/json/games.json b/src/assets/json/games.json
index 0bccd60..dfc0b2a 100644
--- a/src/assets/json/games.json
+++ b/src/assets/json/games.json
@@ -5,6 +5,7 @@
     "links": {
       "github": "https://www.github.com/zeldaret/oot"
     },
+    "shieldURL": "assets/csv/progress-oot-shield.json",
     "faq": "oot_faq",
     "csvs": {
       "matching": "progress-oot-matching",
@@ -47,6 +48,7 @@
     "links": {
       "github": "https://www.github.com/zeldaret/mm"
     },
+    "shieldURL": "assets/csv/progress-mm-shield.json",
     "faq": "mm_faq",
     "csvs": {
       "matching": "progress-mm-matching",
@@ -133,6 +135,7 @@
     "links": {
       "github": "https://www.github.com/zeldaret/mm"
     },
+    "shieldURL": "assets/csv/progress-tmc-shield.json",
     "faq": "tmc_faq",
     "csvs": {
       "matching": "progress-tmc-matching",

From 15669800686f7dcad39f9bce3487ccfe6e40b832 Mon Sep 17 00:00:00 2001
From: Elliptic Ellipsis <elliptic.ellipsis@gmail.com>
Date: Sun, 19 Dec 2021 18:39:21 +0000
Subject: [PATCH 02/10] Captions on icons, change links a bit

---
 .../external-game/external-game.component.html   | 10 +++++++---
 .../external-game/external-game.component.scss   | 16 +++++++---------
 .../external-game/external-game.component.ts     |  4 ++--
 src/assets/json/external-games.json              |  4 ++--
 4 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/app/games/game-summaries/external-game/external-game.component.html b/src/app/games/game-summaries/external-game/external-game.component.html
index b270815..f4daec6 100644
--- a/src/app/games/game-summaries/external-game/external-game.component.html
+++ b/src/app/games/game-summaries/external-game/external-game.component.html
@@ -2,17 +2,21 @@
   <a [href]="data.routingURL">
     <mat-card-header>
       <mat-card-title>
-        <fa-icon [icon]="external"></fa-icon> {{ data.title }}
+        {{ data.title }}
+        <fa-icon [icon]="external"></fa-icon>
       </mat-card-title>
       <mat-card-subtitle>Code decompiled: <strong>{{ total }}</strong></mat-card-subtitle>
     </mat-card-header>
   </a>
   <mat-card-actions>
-    <a mat-icon-button *ngIf="data.links.hasOwnProperty('github')" [href]="data.links.github" title="Github">
+    <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-icon-button *ngIf="data.links.hasOwnProperty('progress')" [href]="data.links.progress" title="Progress">
+    <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>
+      <!-- <mat-icon [svgIcon]="chart"></mat-icon> -->
     </a>
   </mat-card-actions>
 </mat-card>
diff --git a/src/app/games/game-summaries/external-game/external-game.component.scss b/src/app/games/game-summaries/external-game/external-game.component.scss
index e279cbb..ea32660 100644
--- a/src/app/games/game-summaries/external-game/external-game.component.scss
+++ b/src/app/games/game-summaries/external-game/external-game.component.scss
@@ -11,17 +11,15 @@ mat-card-actions {
   text-align: center;
 }
 
-mat-icon-button {
-  width: max-content;
-}
-
 mat-card-title > fa-icon {
-  font-size: 20px;
+  font-size: 16px;
   vertical-align: center;
 }
 
-mat-card-actions {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content:space-evenly
+mat-card-actions fa-icon {
+  vertical-align: center;
+}
+
+mat-card-actions a {
+  color: white;
 }
diff --git a/src/app/games/game-summaries/external-game/external-game.component.ts b/src/app/games/game-summaries/external-game/external-game.component.ts
index bd31f2c..67f9bb1 100644
--- a/src/app/games/game-summaries/external-game/external-game.component.ts
+++ b/src/app/games/game-summaries/external-game/external-game.component.ts
@@ -1,7 +1,7 @@
 import { Component, Input, OnChanges } from '@angular/core';
-import { IExternalGame, IGame } from '../../games.service.interface';
+import { IExternalGame } from '../../games.service.interface';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
-import { faExternalLinkAlt, faChartLine } from '@fortawesome/free-solid-svg-icons';
+import { faChartLine, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import { GamesService } from '../../games.service';
 
 /**
diff --git a/src/assets/json/external-games.json b/src/assets/json/external-games.json
index d9ad417..da1a4dc 100644
--- a/src/assets/json/external-games.json
+++ b/src/assets/json/external-games.json
@@ -2,9 +2,9 @@
     {
         "slug": "botw",
         "title": "Breath of the Wild",
-        "routingURL": "https://www.github.com/zeldaret/botw",
+        "routingURL": "https://botw.link",
         "links": {
-            "github": "https://www.github.com/zeldaret/botw",
+            "github": "https://github.com/zeldaret/botw",
             "progress": "https://botw.link/progress"
         },
         "shieldURL": "https://botw.link/badges/progress.json"

From 6871b0d306a6c1497766201d22dde1818b9d86e4 Mon Sep 17 00:00:00 2001
From: Elliptic Ellipsis <elliptic.ellipsis@gmail.com>
Date: Mon, 20 Dec 2021 14:49:46 +0000
Subject: [PATCH 03/10] Add captions to summaries too

---
 .../game-summary/game-summary.component.html              | 3 ++-
 .../game-summary/game-summary.component.scss              | 8 ++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/app/games/game-summaries/game-summary/game-summary.component.html b/src/app/games/game-summaries/game-summary/game-summary.component.html
index 72b1ca8..05e45ec 100644
--- a/src/app/games/game-summaries/game-summary/game-summary.component.html
+++ b/src/app/games/game-summaries/game-summary/game-summary.component.html
@@ -8,8 +8,9 @@
     </mat-card-header>
   </a>
   <mat-card-actions>
-    <a mat-icon-button *ngIf="data.links.hasOwnProperty('github')" [href]="data.links.github" title="Github">
+    <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>
   </mat-card-actions>
 </mat-card>
diff --git a/src/app/games/game-summaries/game-summary/game-summary.component.scss b/src/app/games/game-summaries/game-summary/game-summary.component.scss
index 0c6c651..9bb6823 100644
--- a/src/app/games/game-summaries/game-summary/game-summary.component.scss
+++ b/src/app/games/game-summaries/game-summary/game-summary.component.scss
@@ -10,3 +10,11 @@ img[mat-card-avatar] {
 mat-card-actions {
   text-align: center;
 }
+
+mat-card-actions fa-icon {
+  vertical-align: center;
+}
+
+mat-card-actions a {
+  color: white;
+}

From f44dcc8f303fbc11d884ce314ac848162cbf30e4 Mon Sep 17 00:00:00 2001
From: Elliptic Ellipsis <elliptic.ellipsis@gmail.com>
Date: Mon, 20 Dec 2021 20:34:08 +0000
Subject: [PATCH 04/10] Display subtitle row even if empty

---
 .../external-game/external-game.component.html               | 5 ++++-
 .../game-summaries/external-game/external-game.component.ts  | 2 +-
 src/app/games/game-summaries/game-summaries.component.html   | 4 ++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/app/games/game-summaries/external-game/external-game.component.html b/src/app/games/game-summaries/external-game/external-game.component.html
index f4daec6..95e5aad 100644
--- a/src/app/games/game-summaries/external-game/external-game.component.html
+++ b/src/app/games/game-summaries/external-game/external-game.component.html
@@ -5,7 +5,10 @@
         {{ data.title }}
         <fa-icon [icon]="external"></fa-icon>
       </mat-card-title>
-      <mat-card-subtitle>Code decompiled: <strong>{{ total }}</strong></mat-card-subtitle>
+      <mat-card-subtitle>
+        <ng-container *ngIf="total != undefined">Code decompiled: <strong>{{ total }}</strong></ng-container>
+        &nbsp;
+      </mat-card-subtitle>
     </mat-card-header>
   </a>
   <mat-card-actions>
diff --git a/src/app/games/game-summaries/external-game/external-game.component.ts b/src/app/games/game-summaries/external-game/external-game.component.ts
index 67f9bb1..d7fac42 100644
--- a/src/app/games/game-summaries/external-game/external-game.component.ts
+++ b/src/app/games/game-summaries/external-game/external-game.component.ts
@@ -27,7 +27,7 @@ export class ExternalGameComponent implements OnChanges {
   /**
    * The percentage to display for completion.
    */
-  total: string;
+  total?: string;
   /**
    * Icon definition.
    */
diff --git a/src/app/games/game-summaries/game-summaries.component.html b/src/app/games/game-summaries/game-summaries.component.html
index 4f99c57..97bd495 100644
--- a/src/app/games/game-summaries/game-summaries.component.html
+++ b/src/app/games/game-summaries/game-summaries.component.html
@@ -1,6 +1,6 @@
 <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>
-</div>
-<div fxLayout="row wrap" fxLayoutAlign="center">
   <external-game fxFlex="25%" fxFlex.xs="100%" fxFlex.sm="33%" *ngFor="let game of externalGames" [data]="game"></external-game>
 </div>
+<!-- <div fxLayout="row wrap" fxLayoutAlign="center">
+</div> -->

From 90b3d33e0332e54f705e4e101f9ad62bb5226b5e Mon Sep 17 00:00:00 2001
From: Elliptic Ellipsis <elliptic.ellipsis@gmail.com>
Date: Mon, 20 Dec 2021 23:26:34 +0000
Subject: [PATCH 05/10] Add centred titles

---
 src/app/common-components/n64-box/n64-box.component.scss   | 1 -
 src/app/games/game-summaries/game-summaries.component.html | 7 +++++--
 src/app/games/game-summaries/game-summaries.component.scss | 5 +++++
 src/app/games/game/game.component.scss                     | 1 -
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/app/common-components/n64-box/n64-box.component.scss b/src/app/common-components/n64-box/n64-box.component.scss
index b7062a7..386d5c4 100644
--- a/src/app/common-components/n64-box/n64-box.component.scss
+++ b/src/app/common-components/n64-box/n64-box.component.scss
@@ -16,7 +16,6 @@ section {
     $color-bg-hl 80%,
     $color-bg);
 
-  max-width: 800px;
   margin: auto;
 }
 
diff --git a/src/app/games/game-summaries/game-summaries.component.html b/src/app/games/game-summaries/game-summaries.component.html
index 97bd495..bbaf82e 100644
--- a/src/app/games/game-summaries/game-summaries.component.html
+++ b/src/app/games/game-summaries/game-summaries.component.html
@@ -1,6 +1,9 @@
+
+<h2>Games covered here</h2>
 <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>
+</div>
+<h2>Games with their own website</h2>
+<div fxLayout="row wrap" fxLayoutAlign="center">
   <external-game fxFlex="25%" fxFlex.xs="100%" fxFlex.sm="33%" *ngFor="let game of externalGames" [data]="game"></external-game>
 </div>
-<!-- <div fxLayout="row wrap" fxLayoutAlign="center">
-</div> -->
diff --git a/src/app/games/game-summaries/game-summaries.component.scss b/src/app/games/game-summaries/game-summaries.component.scss
index f6d9cb4..cdb99cc 100644
--- a/src/app/games/game-summaries/game-summaries.component.scss
+++ b/src/app/games/game-summaries/game-summaries.component.scss
@@ -2,6 +2,11 @@ div {
   margin-right: -1em;
 }
 
+h2 {
+  margin: auto;
+  width: max-content;
+}
+
 game-summary {
   flex-grow: 0;
   margin-bottom: 12px;
diff --git a/src/app/games/game/game.component.scss b/src/app/games/game/game.component.scss
index f832010..766c0c2 100644
--- a/src/app/games/game/game.component.scss
+++ b/src/app/games/game/game.component.scss
@@ -5,7 +5,6 @@ h1 {
 
 article {
     max-width: 800px;
-    // max-width: min(100%, 800px);
     margin: 1rem auto;
 }
 

From 752e7d48d2e6e395eae7d870e7e21184286ee372 Mon Sep 17 00:00:00 2001
From: Elliptic Ellipsis <elliptic.ellipsis@gmail.com>
Date: Thu, 30 Dec 2021 22:55:17 +0000
Subject: [PATCH 06/10] Review

---
 .../game-summaries/external-game/external-game.component.ts  | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/app/games/game-summaries/external-game/external-game.component.ts b/src/app/games/game-summaries/external-game/external-game.component.ts
index d7fac42..c347766 100644
--- a/src/app/games/game-summaries/external-game/external-game.component.ts
+++ b/src/app/games/game-summaries/external-game/external-game.component.ts
@@ -29,12 +29,9 @@ export class ExternalGameComponent implements OnChanges {
    */
   total?: string;
   /**
-   * Icon definition.
+   * Icon definitions.
    */
   github = faGithub;
-  /**
-   * Icon definition.
-   */
   external = faExternalLinkAlt;
   chart = faChartLine;
 

From b40e3ad5db0fa54ef04e4fafaa8825bc3b357b0d Mon Sep 17 00:00:00 2001
From: Elliptic Ellipsis <elliptic.ellipsis@gmail.com>
Date: Thu, 30 Dec 2021 22:55:46 +0000
Subject: [PATCH 07/10] .

---
 .../game-summaries/external-game/external-game.component.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/games/game-summaries/external-game/external-game.component.ts b/src/app/games/game-summaries/external-game/external-game.component.ts
index c347766..dd02a4a 100644
--- a/src/app/games/game-summaries/external-game/external-game.component.ts
+++ b/src/app/games/game-summaries/external-game/external-game.component.ts
@@ -21,7 +21,7 @@ export class ExternalGameComponent implements OnChanges {
    */
   @Input() data: IExternalGame;
   /**
-   * Shield data
+   * Shield data.
    */
   shield: string;
   /**

From 945af1be1a9db33fc06d51de424569fb59d06172 Mon Sep 17 00:00:00 2001
From: Elliptic Ellipsis <elliptic.ellipsis@gmail.com>
Date: Fri, 31 Dec 2021 01:33:33 +0000
Subject: [PATCH 08/10] Put all games in the same section

---
 src/app/games/game-summaries/game-summaries.component.html | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/app/games/game-summaries/game-summaries.component.html b/src/app/games/game-summaries/game-summaries.component.html
index bbaf82e..7aa4298 100644
--- a/src/app/games/game-summaries/game-summaries.component.html
+++ b/src/app/games/game-summaries/game-summaries.component.html
@@ -1,9 +1,4 @@
-
-<h2>Games covered here</h2>
 <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>
-</div>
-<h2>Games with their own website</h2>
-<div fxLayout="row wrap" fxLayoutAlign="center">
   <external-game fxFlex="25%" fxFlex.xs="100%" fxFlex.sm="33%" *ngFor="let game of externalGames" [data]="game"></external-game>
 </div>

From cfb65c808ab5abd860c0a50d5d052d11d88e3b9b Mon Sep 17 00:00:00 2001
From: Elliptic Ellipsis <elliptic.ellipsis@gmail.com>
Date: Fri, 31 Dec 2021 03:02:25 +0000
Subject: [PATCH 09/10] Review changes, check files should exist before GET

---
 .../external-game-summary.component.html}     |  0
 .../external-game-summary.component.scss}     |  0
 .../external-game-summary.component.spec.ts}  |  0
 .../external-game-summary.component.ts}       | 21 +++++++++++--------
 .../game-summaries.component.html             |  2 +-
 .../game-summaries.component.scss             |  8 +------
 .../game-summaries.component.ts               |  2 +-
 .../game-summary/game-summary.component.ts    | 15 +++++++------
 src/app/games/game/game.component.ts          | 16 +++++++-------
 src/app/games/games.module.ts                 |  4 ++--
 src/app/games/games.service.interface.ts      |  4 ----
 11 files changed, 33 insertions(+), 39 deletions(-)
 rename src/app/games/game-summaries/{external-game/external-game.component.html => external-game-summary/external-game-summary.component.html} (100%)
 rename src/app/games/game-summaries/{external-game/external-game.component.scss => external-game-summary/external-game-summary.component.scss} (100%)
 rename src/app/games/game-summaries/{external-game/external-game.component.spec.ts => external-game-summary/external-game-summary.component.spec.ts} (100%)
 rename src/app/games/game-summaries/{external-game/external-game.component.ts => external-game-summary/external-game-summary.component.ts} (60%)

diff --git a/src/app/games/game-summaries/external-game/external-game.component.html b/src/app/games/game-summaries/external-game-summary/external-game-summary.component.html
similarity index 100%
rename from src/app/games/game-summaries/external-game/external-game.component.html
rename to src/app/games/game-summaries/external-game-summary/external-game-summary.component.html
diff --git a/src/app/games/game-summaries/external-game/external-game.component.scss b/src/app/games/game-summaries/external-game-summary/external-game-summary.component.scss
similarity index 100%
rename from src/app/games/game-summaries/external-game/external-game.component.scss
rename to src/app/games/game-summaries/external-game-summary/external-game-summary.component.scss
diff --git a/src/app/games/game-summaries/external-game/external-game.component.spec.ts b/src/app/games/game-summaries/external-game-summary/external-game-summary.component.spec.ts
similarity index 100%
rename from src/app/games/game-summaries/external-game/external-game.component.spec.ts
rename to src/app/games/game-summaries/external-game-summary/external-game-summary.component.spec.ts
diff --git a/src/app/games/game-summaries/external-game/external-game.component.ts b/src/app/games/game-summaries/external-game-summary/external-game-summary.component.ts
similarity index 60%
rename from src/app/games/game-summaries/external-game/external-game.component.ts
rename to src/app/games/game-summaries/external-game-summary/external-game-summary.component.ts
index dd02a4a..af5c34f 100644
--- a/src/app/games/game-summaries/external-game/external-game.component.ts
+++ b/src/app/games/game-summaries/external-game-summary/external-game-summary.component.ts
@@ -5,14 +5,14 @@ import { faChartLine, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icon
 import { GamesService } from '../../games.service';
 
 /**
- * Displays a game's name, decomp progress, and links.
+ * Displays an externally-linked game's name, decomp progress, and links.
  */
 @Component({
-  selector: 'external-game',
-  templateUrl: './external-game.component.html',
-  styleUrls: ['./external-game.component.scss']
+  selector: 'external-game-summary',
+  templateUrl: './external-game-summary.component.html',
+  styleUrls: ['./external-game-summary.component.scss']
 })
-export class ExternalGameComponent implements OnChanges {
+export class ExternalGameSummaryComponent implements OnChanges {
 
   constructor(private gamesService: GamesService) { }
 
@@ -36,10 +36,13 @@ export class ExternalGameComponent implements OnChanges {
   chart = faChartLine;
 
   ngOnChanges(): void {
-    this.gamesService.getGameShield(`${this.data.shieldURL}`).subscribe(
-      res => this.total = res.message,
-      err => console.error(err)
-    );
+    
+    if (this.data.shieldURL) {
+      this.gamesService.getGameShield(`${this.data.shieldURL}`).subscribe(
+        res => this.total = res.message,
+        err => console.error(err)
+      );
+    }
   }
 
 }
diff --git a/src/app/games/game-summaries/game-summaries.component.html b/src/app/games/game-summaries/game-summaries.component.html
index 7aa4298..546f1f5 100644
--- a/src/app/games/game-summaries/game-summaries.component.html
+++ b/src/app/games/game-summaries/game-summaries.component.html
@@ -1,4 +1,4 @@
 <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 fxFlex="25%" fxFlex.xs="100%" fxFlex.sm="33%" *ngFor="let game of externalGames" [data]="game"></external-game>
+  <external-game-summary fxFlex="25%" fxFlex.xs="100%" fxFlex.sm="33%" *ngFor="let game of externalGames" [data]="game"></external-game-summary>
 </div>
diff --git a/src/app/games/game-summaries/game-summaries.component.scss b/src/app/games/game-summaries/game-summaries.component.scss
index cdb99cc..06eb588 100644
--- a/src/app/games/game-summaries/game-summaries.component.scss
+++ b/src/app/games/game-summaries/game-summaries.component.scss
@@ -7,13 +7,7 @@ h2 {
   width: max-content;
 }
 
-game-summary {
-  flex-grow: 0;
-  margin-bottom: 12px;
-  margin-right: 1em;
-}
-
-external-game {
+game-summary, external-game-summary {
   flex-grow: 0;
   margin-bottom: 12px;
   margin-right: 1em;
diff --git a/src/app/games/game-summaries/game-summaries.component.ts b/src/app/games/game-summaries/game-summaries.component.ts
index 3c73382..18bad9f 100644
--- a/src/app/games/game-summaries/game-summaries.component.ts
+++ b/src/app/games/game-summaries/game-summaries.component.ts
@@ -19,7 +19,7 @@ export class GameSummariesComponent implements OnInit {
    */
   games: IGame[] = [];
   /**
-   * List of external games to use for "ExternalGame" components.
+   * List of external games to use for "ExternalGameSummary" components.
    */
   externalGames: IExternalGame[] = [];
 
diff --git a/src/app/games/game-summaries/game-summary/game-summary.component.ts b/src/app/games/game-summaries/game-summary/game-summary.component.ts
index 3cf5d61..36bb79a 100644
--- a/src/app/games/game-summaries/game-summary/game-summary.component.ts
+++ b/src/app/games/game-summaries/game-summary/game-summary.component.ts
@@ -24,19 +24,18 @@ export class GameSummaryComponent implements OnChanges {
    */
   total?: string;
   /**
-   * Icon definition.
+   * Icon definitions.
    */
   github = faGithub;
-  /**
-   * Icon definition.
-   */
   trello = faTrello;
 
   ngOnChanges(): void {
-    this.gamesService.getGameShield(`${this.data.shieldURL}`).subscribe(
-      res => this.total = res.message,
-      err => console.error(err)
-    );
+    if (this.data.shieldURL) {
+      this.gamesService.getGameShield(`${this.data.shieldURL}`).subscribe(
+        res => this.total = res.message,
+        err => console.error(err)
+      );
+    }
   }
 
 }
diff --git a/src/app/games/game/game.component.ts b/src/app/games/game/game.component.ts
index 8cb1f55..726613c 100644
--- a/src/app/games/game/game.component.ts
+++ b/src/app/games/game/game.component.ts
@@ -39,13 +39,15 @@ export class GameComponent implements OnInit {
             }
             else {
               this.game = res[index];
-              forkJoin([
-                this.gamesService.getGameCSV(this.game.csvs.nonmatching),
-                this.gamesService.getGameCSV(this.game.csvs.matching)
-              ]).subscribe(
-                res => this.csvData = res,
-                err => console.error(err)
-              );
+              if (this.game.progressMeta.length > 0) {
+                forkJoin([
+                  this.gamesService.getGameCSV(this.game.csvs.nonmatching),
+                  this.gamesService.getGameCSV(this.game.csvs.matching)
+                ]).subscribe(
+                  res => this.csvData = res,
+                  err => console.error(err)
+                );
+              }
             }
           },
           err => {
diff --git a/src/app/games/games.module.ts b/src/app/games/games.module.ts
index ae5622d..b4120fa 100644
--- a/src/app/games/games.module.ts
+++ b/src/app/games/games.module.ts
@@ -5,7 +5,7 @@ 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 { ExternalGameComponent } from './game-summaries/external-game/external-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 +52,7 @@ export function markedOptionsFactory(): MarkedOptions {
     GameProgressComponent,
     GameChartComponent,
     GameFAQComponent,
-    ExternalGameComponent
+    ExternalGameSummaryComponent
   ],
   imports: [
     CommonModule,
diff --git a/src/app/games/games.service.interface.ts b/src/app/games/games.service.interface.ts
index b61d857..05c40f9 100644
--- a/src/app/games/games.service.interface.ts
+++ b/src/app/games/games.service.interface.ts
@@ -167,10 +167,6 @@ export interface ISubdivision {
  * Describes a game's shield output.
  */
 export interface IShield {
-  /**
-   * Always 1.
-   */
-  schemaVersion: number;
   /**
    * Static label in left half.
    */

From 28e78fc149c47de369765f7f1a8f7884c357ee88 Mon Sep 17 00:00:00 2001
From: Elliptic Ellipsis <elliptic.ellipsis@gmail.com>
Date: Sat, 1 Jan 2022 17:09:01 +0000
Subject: [PATCH 10/10] Add routingURLs to internal games

---
 .../game-summaries/game-summary/game-summary.component.html   | 2 +-
 src/app/games/games.service.interface.ts                      | 4 ++++
 src/assets/json/games.json                                    | 4 ++++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/app/games/game-summaries/game-summary/game-summary.component.html b/src/app/games/game-summaries/game-summary/game-summary.component.html
index e7eb675..31e6931 100644
--- a/src/app/games/game-summaries/game-summary/game-summary.component.html
+++ b/src/app/games/game-summaries/game-summary/game-summary.component.html
@@ -1,5 +1,5 @@
 <mat-card>
-  <a [routerLink]="'/games/' + data.slug">
+  <a [routerLink]="data.routingURL">
     <mat-card-header>
       <mat-card-title>
         {{ data.title }}
diff --git a/src/app/games/games.service.interface.ts b/src/app/games/games.service.interface.ts
index 05c40f9..1379595 100644
--- a/src/app/games/games.service.interface.ts
+++ b/src/app/games/games.service.interface.ts
@@ -12,6 +12,10 @@ export interface IGame {
    * The game's full title.
    */
   title: string;
+  /**
+   * The URL for the card title to link to.
+   */
+  routingURL: string;
   /**
    * The URL of the shield json to read.
    */
diff --git a/src/assets/json/games.json b/src/assets/json/games.json
index b443437..707693d 100644
--- a/src/assets/json/games.json
+++ b/src/assets/json/games.json
@@ -2,6 +2,7 @@
   {
     "slug": "oot",
     "title": "Ocarina of Time",
+    "routingURL": "games/oot",
     "links": {
       "github": "https://www.github.com/zeldaret/oot"
     },
@@ -45,6 +46,7 @@
   {
     "slug": "mm",
     "title": "Majora's Mask",
+    "routingURL": "games/mm",
     "links": {
       "github": "https://www.github.com/zeldaret/mm"
     },
@@ -132,6 +134,7 @@
   {
     "slug": "tmc",
     "title": "The Minish Cap",
+    "routingURL": "games/tmc",
     "links": {
       "github": "https://www.github.com/zeldaret/tmc"
     },
@@ -178,6 +181,7 @@
   {
     "slug": "tp",
     "title": "Twilight Princess",
+    "routingURL": "games/tp",
     "links": {
       "github": "https://www.github.com/zeldaret/tp"
     },