Feature/workshop ngrx challenge

package.json

@@ -17,7 +17,7 @@
     "@angular/common": "^5.2.0",
     "@angular/compiler": "^5.2.0",
     "@angular/core": "^5.2.0",
-    "@angular/flex-layout": "^2.0.0-beta.12",
+    "@angular/flex-layout": "2.0.0-beta.12",
     "@angular/forms": "^5.2.0",
     "@angular/http": "^5.2.0",
     "@angular/material": "^5.2.1",

src/app/board/control-container/control-container.component.ts

@@ -3,7 +3,7 @@ import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/Observable';
 import { map } from 'rxjs/operators';
 import * as fromStore from '../../store';
-import { ResetScore, StartPlaying, StopPlaying } from '../../store/actions';
+import { ResetScore, StartPlaying, StopPlaying, ResetAttempts, AddAttempt, AddScore } from '../../store/actions';
 // import { AddScore } from '../../store/actions/score.actions';
 // import { AddAttempt } from '../../store/actions/attempts.actions';
 import { Attempt } from './../../store/reducers/attempts.reducer';
@@ -105,6 +105,7 @@ export class ControlContainerComponent implements OnInit {
   private startGame() {
     this.store.dispatch(new StartPlaying());
     this.store.dispatch(new ResetScore());
+    this.store.dispatch(new ResetAttempts());
     // TODO #10 dispatch the Action for reset the attempts here
     this.startGameSound.nativeElement.play();
     setTimeout(() => this.generateRandomControl(), this.TIME_TO_START_GAME);
@@ -132,9 +133,9 @@ export class ControlContainerComponent implements OnInit {
   }
 
   private pressButtonEffect(button: ElementRef,
-                            colorClassName: string,
-                            timeDelay: number,
-                            isPressedByUser = false) {
+    colorClassName: string,
+    timeDelay: number,
+    isPressedByUser = false) {
     const dom = button.nativeElement.querySelector('button');
     dom.click();
     dom.classList.add(colorClassName);
@@ -154,6 +155,7 @@ export class ControlContainerComponent implements OnInit {
     if (this.currentArrow === arrowPressed) {
       this.sayGood();
       // TODO #12: Dispatch the AddScore action here adding as parameter 20 points :D
+      this.store.dispatch(new AddScore(20));
       this.registerAttempt(arrowPressed, true);
     } else {
       this.registerAttempt(arrowPressed, false);
@@ -179,6 +181,7 @@ export class ControlContainerComponent implements OnInit {
     }
 
     // TODO #11: Dispatch the AddAttempt action here, adding as parameter the current attempt
+    this.store.dispatch(new AddAttempt(attempt));
   }
 
   private sayGameOver() {

src/app/score/count-down/count-down.component.ts

@@ -16,7 +16,7 @@ export class CountDownComponent implements OnInit {
   runningCountDown: boolean;
   // Constants
   // TODO #14: Update the count down to 10 seconds
-  TIME_COUNT_DOWN = 3;
+  TIME_COUNT_DOWN = 10;
 
   constructor(private store: Store<fromStore.ApplicationState>) {
   }

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

@@ -18,6 +18,6 @@ export class ScoreDisplayComponent implements OnInit {
 
   ngOnInit() {
     // TODO #13: If you want to show the current score, remove the next comment.
-    // this.score$ = this.store.pipe(map(state => state.score.scoreValue));
+    this.score$ = this.store.pipe(map(state => state.score.scoreValue));
   }
 }

src/app/store/actions/attempts.actions.ts

@@ -1,13 +1,22 @@
+import { Action } from '@ngrx/store';
+import { Attempt } from '../reducers/attempts.reducer';
 // Action Constants
 
 // TODO #1 : Define the ADD_ATTEMPT and RESET_ATTEMPT actions
 export const RESET_ATTEMPTS = '[Attempts] Reset Attempts';
+export const ADD_ATTEMPT = '[Attempts] Add Attempt';
 
 // Action Creators
 // TODO #2 : Define the AddAttempt and ResetAttempts implementing the Action (@ngrx/store) interface
-export class ResetAttempts {
+export class ResetAttempts implements Action {
+    readonly type = RESET_ATTEMPTS;
+}
+
+export class AddAttempt implements Action {
+    readonly type = ADD_ATTEMPT;
+    constructor(public payload: Attempt) { }
 }
 
 // Action Types
 // TODO #3: Complete types for the Attempts Actions
-export type AttemptsActions = ResetAttempts;
+export type AttemptsActions = ResetAttempts | AddAttempt;

src/app/store/actions/score.actions.ts

@@ -1,15 +1,22 @@
 // Action Constants
-// TODO #4 Add actions here
+// TODO #4 Add the action to add score here
 import { Action } from '@ngrx/store';
+import { ScoreState } from '../reducers/score.reducer';
 
 export const RESET_SCORE = '[Score] Setting the score to 0';
+export const ADD_SCORE = '[Score] Adding score in 1 point';
 
 // Action Creators
-// TODO #5 Implement action creators here
+// TODO #5 Implement action creators to add the score here
 export class ResetScore implements Action {
   readonly type = RESET_SCORE;
 }
 
+export class AddScore implements Action {
+  readonly type = ADD_SCORE;
+  constructor(public payload: number) { }
+}
+
 // Action Types
-// TODO #6 Implement action types here. Do not forget export your things.
-export type ScoreActions = ResetScore;
+// TODO #6 Implement action types remaining here. Do not forget export your things.
+export type ScoreActions = ResetScore | AddScore;

src/app/store/reducers/attempts.reducer.ts

@@ -24,5 +24,18 @@ export const initialState: AttemptsState = {
  */
 export function reducer(state = initialState, action: fromAttempts.AttemptsActions): AttemptsState {
   // TODO #7 : Implement the reducer for the actions created
+  switch (action.type) {
+    case fromAttempts.RESET_ATTEMPTS: {
+      return {
+        attempts: []
+      };
+    }
+    case fromAttempts.ADD_ATTEMPT: {
+      const newAttemps = [...state.attempts, action.payload];
+      return {
+        attempts: newAttemps
+      };
+    }
+  }
   return state;
 }

src/app/store/reducers/index.ts

@@ -8,6 +8,8 @@ import { ActionReducerMap } from '@ngrx/store';
  */
 export interface ApplicationState {
   ui: fromUi.UiState;
+  attempts: fromAttempts.AttemptsState;
+  score: fromScore.ScoreState;
 }
 
 /**
@@ -16,4 +18,6 @@ export interface ApplicationState {
  */
 export const reducers: ActionReducerMap<ApplicationState> = {
   ui: fromUi.reducer,
+  attempts: fromAttempts.reducer,
+  score: fromScore.reducer
 };

src/app/store/reducers/score.reducer.ts

@@ -8,7 +8,7 @@ export interface ScoreState {
 // Initial state definition
 // TODO #9 : Fix the initial state
 export const initialState: ScoreState = {
-  scoreValue: 9999999
+  scoreValue: 0
 };
 
 /**
@@ -26,6 +26,13 @@ export function reducer(state = initialState, action: fromScore.ScoreActions): S
         scoreValue: 0
       };
 
+    case fromScore.ADD_SCORE: {
+      const newScore = state.scoreValue + action.payload;
+      return {
+        scoreValue: newScore
+      };
+    }
+
     default:
       return state;
   }

yarn.lock

@@ -129,7 +129,7 @@
   dependencies:
     tslib "^1.7.1"
 
-"@angular/flex-layout@^2.0.0-beta.12":
+"@angular/[email protected]":
   version "2.0.0-beta.12"
   resolved "https://registry.yarnpkg.com/@angular/flex-layout/-/flex-layout-2.0.0-beta.12.tgz#80970dc1d60f27fa41537659926f3238f759f343"
   dependencies: