Added match history UI card & array reverse pipe

src/app/app.component.html

@@ -12,5 +12,5 @@
   <ng-template #matchResults>
     <app-match-results></app-match-results>
   </ng-template>
-  <!-- game-history component -->
+  <app-match-history *ngIf="hasHatchHistory$ | async"></app-match-history>
 </div>

src/app/app.module.ts

@@ -9,21 +9,25 @@ import { EffectsModule } from '@ngrx/effects';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
+import { MatListModule } from '@angular/material/list';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatToolbarModule } from '@angular/material/toolbar';
 
 import { AppComponent } from './app.component';
 import { GameStoreModule } from './store';
 import { DirectivesModule } from './directives/directives.module';
+import { PipesModule } from './pipes/pipes.module';
 
 import { GameCardComponent } from './game-card/game-card.component';
 import { MatchResultsComponent } from './match-results/match-results.component';
 import { ScoreCardComponent } from './score-card/score-card.component';
+import { MatchHistoryComponent } from './match-history/match-history.component';
 
 const materialModules = [
   MatButtonModule,
   MatCardModule,
   MatIconModule,
+  MatListModule,
   MatRadioModule,
   MatToolbarModule
 ];
@@ -33,7 +37,8 @@ const materialModules = [
     AppComponent,
     GameCardComponent,
     MatchResultsComponent,
-    ScoreCardComponent
+    ScoreCardComponent,
+    MatchHistoryComponent
   ],
   imports: [
     BrowserModule,
@@ -44,6 +49,7 @@ const materialModules = [
     StoreModule.forRoot({}, {}),
     EffectsModule.forRoot([]),
     DirectivesModule,
+    PipesModule,
     GameStoreModule
   ],
   providers: [],

src/app/match-history/match-history.component.css

@@ -0,0 +1,40 @@
+:host {
+  display: block;
+  margin-top: 1rem;
+}
+
+.match-history-card {
+  width: var(--card-width);
+}
+
+.match-list-item {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.match-visual {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.match-visual > * {
+  margin-right: 1rem;
+}
+
+.match-visual img {
+  width: 25px;
+  height: auto;
+}
+
+.result {
+  font-size: 1.2rem;
+  font-weight: 500;
+}
+
+.match-visual .vs {
+  font-size: 1.2rem;
+  font-weight: 500;
+}

src/app/match-history/match-history.component.html

@@ -0,0 +1,17 @@
+<mat-card class="match-history-card">
+  <mat-card-title>Match History</mat-card-title>
+  <mat-card-content>
+    <mat-list *ngLet="matchHistory$ | async; let matchHistory;" class="match-history-list">
+      <mat-list-item *ngFor="let item of matchHistory | reverseArray">
+        <div class="match-list-item">
+          <div class="match-visual">
+            <img src="./assets/{{ item.playerChoice }}-50.png" [alt]="item.playerChoice">
+            <span class="vs">vs</span>
+            <img src="./assets/{{ item.computerChoice }}-50.png" [alt]="item.computerChoice">
+          </div>
+          <span class="result">{{ item.result }}</span>
+        </div>
+      </mat-list-item>
+    </mat-list>
+  </mat-card-content>
+</mat-card>

src/app/match-history/match-history.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+import { GameFacade } from '../store/game';
+
+@Component({
+  selector: 'app-match-history',
+  templateUrl: './match-history.component.html',
+  styleUrls: ['./match-history.component.css']
+})
+export class MatchHistoryComponent {
+  matchHistory$ = this.gameFacade.matchHistory$;
+
+  constructor(
+    private readonly gameFacade: GameFacade
+  ) { }
+
+}

src/app/match-results/match-results.component.html

@@ -1,6 +1,5 @@
 <mat-card *ngLet="results$ | async; let results;" class="match-results">
   <mat-card-title>Match Results</mat-card-title>
-  <!-- {"playerChoice":"rock","computerChoice":"scissors","result":"win"} -->
   <mat-card-content>
     <div class="match-results-text">You {{ results.result }}!</div>
     <div class="match-visual">

src/app/pipes/pipes.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+
+import { ReverseArrayPipe } from './reverse-array.pipe';
+
+const exportedPipes = [
+  ReverseArrayPipe
+];
+
+@NgModule({
+  declarations: [
+    ...exportedPipes,
+  ],
+  providers: [
+    ...exportedPipes
+  ],
+  exports: [
+    ...exportedPipes
+  ]
+})
+export class PipesModule { }

src/app/pipes/reverse-array.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'reverseArray'
+})
+export class ReverseArrayPipe implements PipeTransform {
+
+  transform(input: any[]): any[] {
+    return Array.isArray(input) ? input.slice().reverse() : input
+  }
+
+}

src/app/store/game/game.reducer.ts

@@ -46,7 +46,7 @@ export const reducer = createReducer(
 );
 
 export const getHasMatchHistory = (state: State) => state.gameHistory.length > 0;
-export const getMatchHistory = (state: State) => state.gameHistory;
+export const getMatchHistory = (state: State) => state.gameHistory.filter(h => h.result !== 'error');
 export const getGameStatus = (state: State) => state.gameStatus;
 export const getRecentMatchHistory = (state: State) => state.gameHistory.slice(-1).pop();
 export const getPlayerScore = (state: State) => state.gameHistory.reduce((acc, match) => acc += Number(match.result === 'win'), 0);