Feature/workshop ngrx challenge

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

@@ -3,9 +3,9 @@ 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 { AddScore } from '../../store/actions/score.actions';
-// import { AddAttempt } from '../../store/actions/attempts.actions';
+import { ResetScore, StartPlaying, StopPlaying, ResetAttempts } from '../../store/actions';
+import { AddScore } from '../../store/actions/score.actions';
+import { AddAttempt, AddAttempts } from '../../store/actions/attempts.actions';
 import { Attempt } from './../../store/reducers/attempts.reducer';
 
 @Component({
@@ -105,7 +105,9 @@ 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.store.dispatch(new StartPlaying());
     this.startGameSound.nativeElement.play();
     setTimeout(() => this.generateRandomControl(), this.TIME_TO_START_GAME);
   }
@@ -154,6 +156,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 +182,7 @@ export class ControlContainerComponent implements OnInit {
     }
 
     // TODO #11: Dispatch the AddAttempt action here, adding as parameter the current attempt
+    this.store.dispatch(new AddAttempts(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 @@
 // Action Constants
 
-// TODO #1 : Define the ADD_ATTEMPT and RESET_ATTEMPT actions
+// DONE #1 : Define the ADD_ATTEMPT and RESET_ATTEMPT actions
+import {Attempt} from '../reducers/attempts.reducer';
+
 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
+// DONE #2 : Define the AddAttempt and ResetAttempts implementing the Action (@ngrx/store) interface
 export class ResetAttempts {
+    readonly type = RESET_ATTEMPTS;
+}
+
+export class AddAttempts {
+  readonly type = ADD_ATTEMPT;
+  constructor(public payload: Attempt) {}
 }
 
 // Action Types
-// TODO #3: Complete types for the Attempts Actions
-export type AttemptsActions = ResetAttempts;
+// DONE #3: Complete types for the Attempts Actions
+export type AttemptsActions = ResetAttempts | AddAttempts;

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

@@ -1,15 +1,21 @@
 // Action Constants
-// TODO #4 Add actions here
+// TODO #4 Add the action to add score here
 import { Action } from '@ngrx/store';
 
 export const RESET_SCORE = '[Score] Setting the score to 0';
+export const ADD_SCORE = '[Score] Add the score';
 
 // 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 points: 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

@@ -1,4 +1,7 @@
 import * as fromAttempts from '../actions/attempts.actions';
+import {RESET_ATTEMPTS} from '../actions/attempts.actions';
+import {ADD_ATTEMPT} from '../actions';
+import {AddAttempts} from '../actions/attempts.actions';
 
 // Interface
 export interface Attempt {
@@ -24,5 +27,14 @@ 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 RESET_ATTEMPTS:
+      return initialState;
+    case ADD_ATTEMPT:
+      return {
+        attempts: [...state.attempts, action.payload]
+      };
+    default: return state;
+  }
   return state;
 }

src/app/store/reducers/index.ts

@@ -8,6 +8,8 @@ import { ActionReducerMap } from '@ngrx/store';
  */
 export interface ApplicationState {
   ui: fromUi.UiState;
+  attempts: any;
+  score: any;
 }
 
 /**
@@ -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

@@ -1,4 +1,5 @@
 import * as fromScore from '../actions/score.actions';
+import {ADD_SCORE} from '../actions';
 
 // Interface
 export interface ScoreState {
@@ -8,7 +9,7 @@ export interface ScoreState {
 // Initial state definition
 // TODO #9 : Fix the initial state
 export const initialState: ScoreState = {
-  scoreValue: 9999999
+  scoreValue: 0
 };
 
 /**
@@ -25,7 +26,10 @@ export function reducer(state = initialState, action: fromScore.ScoreActions): S
       return {
         scoreValue: 0
       };
-
+    case fromScore.ADD_SCORE:
+      return {
+        scoreValue: state.scoreValue + action.points
+      };
     default:
       return state;
   }