Added score-card

src/app/app.component.html

@@ -5,7 +5,7 @@
 </mat-toolbar>
 
 <div class="app-body">
-  <!-- score-card component -->
+  <app-score-card *ngIf="hasHatchHistory$ | async"></app-score-card>
   <ng-container *ngIf="(gameStatus$ | async) !== 'post'; else matchResults">
     <app-game-card></app-game-card>
   </ng-container>

src/app/app.component.ts

@@ -9,6 +9,7 @@ import { GameFacade } from './store/game';
 })
 export class AppComponent {
   gameStatus$ = this.gameFacade.gameStatus$;
+  hasHatchHistory$ = this.gameFacade.hasMatchHistory$;
 
   constructor(
     private readonly gameFacade: GameFacade

src/app/app.module.ts

@@ -18,6 +18,7 @@ import { DirectivesModule } from './directives/directives.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';
 
 const materialModules = [
   MatButtonModule,
@@ -31,7 +32,8 @@ const materialModules = [
   declarations: [
     AppComponent,
     GameCardComponent,
-    MatchResultsComponent
+    MatchResultsComponent,
+    ScoreCardComponent
   ],
   imports: [
     BrowserModule,

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

@@ -19,5 +19,5 @@
 }
 
 .match-visual .vs {
-  font-size: 3rem;
+  font-size: 2rem;
 }

src/app/score-card/score-card.component.css

@@ -0,0 +1,32 @@
+:host {
+  display: block;
+}
+
+.match-score {
+  margin: 1rem 0;
+  width: 420px;
+}
+
+.score-box {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+}
+
+.score-box .score {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  font-size: 1.5rem;
+  padding: .5rem;
+  width: 50%;
+}
+
+.score + .score {
+  border-left: 1px solid;
+}
+
+.score-box .score .title {
+  font-size: 1.25em;
+  margin-bottom: .5rem;
+}

src/app/score-card/score-card.component.html

@@ -0,0 +1,13 @@
+<mat-card *ngLet="scores$ | async; let scores;" class="match-score">
+  <mat-card-title>Scores</mat-card-title>
+  <mat-card-content>
+    <div class="score-box">
+      <div class="score">
+        <span class="title">YOU:</span> {{ scores?.playerScore }}
+      </div>
+      <div class="score">
+        <span class="title">CPU:</span> {{ scores?.computerScore }}
+      </div>
+    </div>
+  </mat-card-content>
+</mat-card>

src/app/score-card/score-card.component.ts

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

src/app/store/game/game.facade.ts

@@ -7,8 +7,9 @@ import * as GameQuery from './game.selectors';
 @Injectable()
 export class GameFacade {
   recentGameResults$ = this.store.pipe(select(GameQuery.selectRecentMatchResults));
-  // gameHistory$ = this.store.pipe(select(getGameHistory));
-  // scores$ = this.store.pipe(select(getScores));
+  hasMatchHistory$ = this.store.pipe(select(GameQuery.selectHasMatchHistory));
+  matchHistory$ = this.store.pipe(select(GameQuery.selectMatchHistory));
+  scores$ = this.store.pipe(select(GameQuery.selectScores));
   gameStatus$ = this.store.pipe(select(GameQuery.selectGameStatus));
 
   constructor(

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

@@ -45,6 +45,9 @@ export const reducer = createReducer(
 
 );
 
-export const getHasGameHistory = (state: State) => state.gameHistory.length > 0;
+export const getHasMatchHistory = (state: State) => state.gameHistory.length > 0;
+export const getMatchHistory = (state: State) => state.gameHistory;
 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);
+export const getComputerScore = (state: State) => state.gameHistory.reduce((acc, match) => acc += Number(match.result === 'lose'), 0);

src/app/store/game/game.selectors.ts

@@ -6,3 +6,8 @@ export const selectGameState = createFeatureSelector<fromGame.State>(
 );
 export const selectGameStatus = createSelector(selectGameState, fromGame.getGameStatus);
 export const selectRecentMatchResults = createSelector(selectGameState, fromGame.getRecentMatchHistory);
+export const selectHasMatchHistory = createSelector(selectGameState, fromGame.getHasMatchHistory);
+export const selectMatchHistory = createSelector(selectGameState, fromGame.getMatchHistory);
+export const selectPlayerScore = createSelector(selectGameState, fromGame.getPlayerScore);
+export const selectComputerScore = createSelector(selectGameState, fromGame.getComputerScore);
+export const selectScores = createSelector(selectPlayerScore, selectComputerScore, (playerScore, computerScore) => ({ playerScore, computerScore }));