Merge branch 'develop'

javiersantossanchez · Jun 1, 2020 · 8a6249c · 8a6249c
2 parents fad8b44 + 3e577a7
commit 8a6249c
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 22 deletions.
diff --git a/minesweeper-app/src/app/components/board-score/board-score.component.html b/minesweeper-app/src/app/components/board-score/board-score.component.html
@@ -1,5 +1,17 @@
-<p *ngIf="gameStatusWinObservable |async" >You Win</p>
-<p *ngIf="gameStatusLoseObservable |async" >You Lose</p>
-<countdown #cd [config]="{leftTime: 30, notify: [2, 5]}" (event)="handleCountdownEvent($event)"></countdown>
-<br>
-<fa-icon [icon]="faPlayCircle" size="4x" [styles]="{'color': '#8AEB97'}" (click)="handlerRestartEvent()"></fa-icon>
+<div class="board-score-content" *ngLet="(boardScoreStateObservable |async) as boardScore">
+  <fa-icon [icon]="faPlayCircle" size="4x" [styles]="{'color': '#8AEB97'}" (click)="handlerRestartEvent()"></fa-icon>
+  <countdown #cd [config]="prettyConfig" (event)="handleCountdownEvent($event)" class="custom-style"></countdown>
+  <p *ngIf="boardScore.win" >You Win</p>
+  <p *ngIf="boardScore.lose" >You Lose</p>
+  <div class="style-to-define-content">
+    <div class="style-to-define">
+      <p>number of flags available</p>
+      <label>{{boardScore.availableMarks}}</label>
+    </div>
+
+    <div class="style-to-define">
+      <p>number of mines</p>
+      <label>{{boardScore.installedMines}}</label>
+    </div>
+  </div>
+</div>
diff --git a/minesweeper-app/src/app/components/board-score/board-score.component.sass b/minesweeper-app/src/app/components/board-score/board-score.component.sass
@@ -0,0 +1,17 @@
+.custom-style
+  width:10px
+  > ::ng-deep span > ::ng-deep.test-class
+    color : #375E3C
+    font-size: xxx-large
+
+
+.board-score-content
+  display: flex
+  flex-direction:   column
+
+.style-to-define
+  text-align: center
+  margin-right: 30px
+
+.style-to-define-content
+  display: flex
diff --git a/minesweeper-app/src/app/components/board-score/board-score.component.ts b/minesweeper-app/src/app/components/board-score/board-score.component.ts
@@ -1,11 +1,12 @@
-import { timeOutAction, generateGameBoardAction } from "./../../actions/index";
-import { gameStatus } from "./../../selectors/index";
-import { Component, OnInit, ViewChild } from "@angular/core";
-import { GameState, GAME_STATUS } from "src/app/dtos/game-state";
-import { Store } from "@ngrx/store";
-import { Observable } from "rxjs";
-import { CountdownEvent, CountdownComponent } from "ngx-countdown";
+import { timeOutAction, generateGameBoardAction } from './../../actions/index';
+import { gameStatus, boardScoreStatus } from './../../selectors/index';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { GameState, GAME_STATUS } from 'src/app/dtos/game-state';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs';
+import { CountdownEvent, CountdownComponent, CountdownConfig } from 'ngx-countdown';
 import { faPlayCircle } from '@fortawesome/free-solid-svg-icons';
+import { BoardScoreState } from 'src/app/dtos/board-score-state';
 
 @Component({
   selector: 'app-board-score',
@@ -20,19 +21,25 @@ export class BoardScoreComponent implements OnInit {
 
   gameStatusWinObservable: Observable<boolean>;
 
+  boardScoreStateObservable: Observable<BoardScoreState>;
+
   faPlayCircle = faPlayCircle;
 
+  prettyConfig: CountdownConfig = {
+    notify: [2, 5],
+    leftTime: 30,
+    format: 'HH:mm:ss',
+    prettyText: (text) => `<span class="test-class">${text}</span>`,
+  };
+
   constructor(private store: Store<GameState>) {}
 
   ngOnInit() {
-     this.gameStatusLoseObservable = this.store.select(gameStatus, {
-      status: GAME_STATUS.LOSE
-    });
-    this.gameStatusWinObservable = this.store.select(gameStatus, {
-      status: GAME_STATUS.WIN
-    });
-
-    this.store.select(gameStatus, {status: GAME_STATUS.PLAYING}).subscribe( isPlaying => { if (!isPlaying) { this.countdown.pause();} });
+
+     this.boardScoreStateObservable = this.store.select(boardScoreStatus);
+     this.store.select(gameStatus, {status: GAME_STATUS.PLAYING}).subscribe( isPlaying => { if (!isPlaying) { this.countdown.pause(); } });
+
+
   }
 
   handleCountdownEvent(e: CountdownEvent) {

diff --git a/minesweeper-app/src/app/dtos/board-score-state.ts b/minesweeper-app/src/app/dtos/board-score-state.ts
@@ -0,0 +1,13 @@
+export interface BoardScoreState {
+  availableMarks: number;
+
+  installedMines: number;
+
+  numberOfOpenMines: number;
+
+  playing: boolean;
+
+  lose: boolean;
+
+  win: boolean;
+}
diff --git a/minesweeper-app/src/app/selectors/index.ts b/minesweeper-app/src/app/selectors/index.ts
@@ -1,7 +1,8 @@
 import { SquareState } from './../dtos/square-state-dto';
 import { createSelector } from '@ngrx/store';
-import { GameState, } from '../dtos/game-state';
+import { GameState, GAME_STATUS, } from '../dtos/game-state';
 import { Square } from '../entities/square';
+import { BoardScoreState } from '../dtos/board-score-state';
 
 export const getBoardGame = createSelector(
   (state: any) => state.rootState,
@@ -28,5 +29,19 @@ export const squareStatusSelector = createSelector(
 
 export const gameStatus = createSelector(
   (state: any) => state.rootState,
-  (state: GameState, props): boolean =>state.gameStatus === props.status
+  (state: GameState, props): boolean =>  state.gameStatus === props.status
+);
+
+export const boardScoreStatus = createSelector(
+  (state: any) => state.rootState,
+  (state: GameState): BoardScoreState => {
+                          return {
+                            availableMarks: state.availableMarks,
+                            installedMines: state.installedMines,
+                            numberOfOpenMines: state.numberOfOpenMines,
+                            lose:  state.gameStatus === GAME_STATUS.LOSE,
+                            win: state.gameStatus === GAME_STATUS.WIN,
+                            playing: state.gameStatus === GAME_STATUS.PLAYING,
+                          };
+            }
 );