-
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 3f586bc..92fa3fb 100644
--- a/src/app/app.component.ts
+++ b/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
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 467dd0b..2d051c8 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/match-results/match-results.component.css b/src/app/match-results/match-results.component.css
index e74500e..549374b 100644
--- a/src/app/match-results/match-results.component.css
+++ b/src/app/match-results/match-results.component.css
@@ -19,5 +19,5 @@
}
.match-visual .vs {
- font-size: 3rem;
+ font-size: 2rem;
}
\ No newline at end of file
diff --git a/src/app/score-card/score-card.component.css b/src/app/score-card/score-card.component.css
new file mode 100644
index 0000000..c236c5f
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/app/score-card/score-card.component.html b/src/app/score-card/score-card.component.html
new file mode 100644
index 0000000..810aaad
--- /dev/null
+++ b/src/app/score-card/score-card.component.html
@@ -0,0 +1,13 @@
+
+ Scores
+
+
+
+ YOU: {{ scores?.playerScore }}
+
+
+ CPU: {{ scores?.computerScore }}
+
+
\ No newline at end of file
diff --git a/src/app/score-card/score-card.component.ts b/src/app/score-card/score-card.component.ts
new file mode 100644
index 0000000..86b7b68
--- /dev/null
+++ b/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
+ ) { }
+
+}
diff --git a/src/app/store/game/game.facade.ts b/src/app/store/game/game.facade.ts
index 7b21cbe..2b8545a 100644
--- a/src/app/store/game/game.facade.ts
+++ b/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(
diff --git a/src/app/store/game/game.reducer.ts b/src/app/store/game/game.reducer.ts
index 9df3e14..1a1a8b2 100644
--- a/src/app/store/game/game.reducer.ts
+++ b/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();
\ No newline at end of file
+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);
\ No newline at end of file
diff --git a/src/app/store/game/game.selectors.ts b/src/app/store/game/game.selectors.ts
index 029389b..76af919 100644
--- a/src/app/store/game/game.selectors.ts
+++ b/src/app/store/game/game.selectors.ts
@@ -5,4 +5,9 @@ export const selectGameState = createFeatureSelector
(
fromGame.gameFeatureKey
);
export const selectGameStatus = createSelector(selectGameState, fromGame.getGameStatus);
-export const selectRecentMatchResults = createSelector(selectGameState, fromGame.getRecentMatchHistory);
\ No newline at end of file
+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 }));
\ No newline at end of file