Added boostrap css, changed fetch in Promise and added new game / new…

… deal buttons.

my-app/.angular-cli.json

@@ -19,9 +19,12 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
+        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
+        "../node_modules/bootstrap/dist/css/bootstrap-theme.min.css",
         "styles.css"
       ],
-      "scripts": [],
+      "scripts": [
+      ],
       "environmentSource": "environments/environment.ts",
       "environments": {
         "dev": "environments/environment.ts",

my-app/package.json

@@ -21,6 +21,7 @@
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
+    "bootstrap": "^3.3.7",
     "core-js": "^2.4.1",
     "rxjs": "^5.1.0",
     "zone.js": "^0.8.4"

my-app/src/app/app.component.css

@@ -1,53 +0,0 @@
-.selected {
-    background-color: #CFD8DC !important;
-    color: white;
-}
-
-.heroes {
-    margin: 0 0 2em 0;
-    list-style-type: none;
-    padding: 0;
-    width: 15em;
-}
-
-.heroes li {
-    cursor: pointer;
-    position: relative;
-    left: 0;
-    background-color: #EEE;
-    margin: .5em;
-    padding: .3em 0;
-    height: 1.6em;
-    border-radius: 4px;
-}
-
-.heroes li.selected:hover {
-    background-color: #BBD8DC !important;
-    color: white;
-}
-
-.heroes li:hover {
-    color: #607D8B;
-    background-color: #DDD;
-    left: .1em;
-}
-
-.heroes .text {
-    position: relative;
-    top: -3px;
-}
-
-.heroes .badge {
-    display: inline-block;
-    font-size: small;
-    color: white;
-    padding: 0.8em 0.7em 0 0.7em;
-    background-color: #607D8B;
-    line-height: 1em;
-    position: relative;
-    left: -1px;
-    top: -4px;
-    height: 1.8em;
-    margin-right: .8em;
-    border-radius: 4px 0 0 4px;
-}

my-app/src/app/cards-against-humanity/cards-against-humanity.component.html

@@ -1,14 +1,23 @@
-<h1>Question</h1>
+<div class="btn-block">
+<button (click)="newGame()" class="btn btn-primary">New Game</button>
+<button (click)="newDeal()" class="btn btn-primary">New Deal</button>
+</div>
+
+
+<h1>
+    Bienvenue sur Cards Against Humanity
+</h1>
+
+<h2>Question</h2>
 
 <div *ngIf="currentQuestion">
     <app-question-card [card]="currentQuestion">
-
     </app-question-card>
 </div>
 
-<h1>
+<h2>
     Answers
-</h1>
+</h2>
 
 <div *ngIf="currentAnswers">
     <div *ngFor="let a of currentAnswers" >

my-app/src/app/cards-against-humanity/cards-against-humanity.component.ts

@@ -2,19 +2,26 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Params } from '@angular/router';
 import { Location } from '@angular/common';
 
+// Services
 import { CardsService } from '../cards.service';
 
+// Classes
 import { QuestionCard } from "app/question-card";
 import { AnswerCard } from "app/answer-card";
 
+// Components
 import { QuestionCardComponent } from '../question-card/question-card.component';
 import { AnswerCardComponent } from '../answer-card/answer-card.component';
 
 @Component({
     selector: 'app-cards-against-humanity',
     templateUrl: './cards-against-humanity.component.html',
-    styleUrls: ['./cards-against-humanity.component.css'],
-    providers: [CardsService],
+    styleUrls: [
+        './cards-against-humanity.component.css'
+    ],
+    providers: [
+        CardsService
+    ],
     entryComponents: [
         QuestionCardComponent,
         AnswerCardComponent
@@ -30,24 +37,59 @@ export class CardsAgainstHumanityComponent implements OnInit {
     private currentQuestion: QuestionCard;
     private currentAnswers: AnswerCard[];
 
+    private promiseDone: Promise<Boolean>;
+
     constructor(
         private cardsService: CardsService,
         private route: ActivatedRoute,
         private location: Location
     ) { 
-
-        this.cardsService.getQuestionCards().subscribe(res => {
-            this.questions = res;
-            this.currentQuestion = this.randomQuestion();
-        });
+        this.currentQuestion = null;
+        this.currentAnswers = null;
+
+        // Init the cards and deal when the promises are resolved
+        this.initCardsLists()
+            .then(
+            (res) => {
+                this.newDeal();
+            }
+        );
+
+    }
+
+    /**
+     * Will fetch the lists in a promise.
+     * @return a promise that is resolved when lists are reset.
+     */
+    private initCardsLists(): Promise<Boolean[]> {
+
+        // Questions promise, resolved when the result is set
+        const promiseQuestions = new Promise<Boolean>((resolve) => {
+
+            this.cardsService.getQuestionCards().subscribe(res => {
+                this.questions = res;
+                console.log("Questions set");
+                resolve(true);
+            });
 
-        this.cardsService.getAnswserCards().subscribe(res => {
-            this.answers = res;
-            this.currentAnswers = this.randomAnswers();
         });
+
+        // Answers promise, resolved when the result is set
+        const promiseAnswers = new Promise<Boolean>((resolve) => {
 
-        this.currentQuestion = null;
-        this.currentAnswers = null;
+            this.cardsService.getAnswserCards().subscribe(res => {
+                this.answers = res;
+                console.log("Answers set");
+                resolve(true);
+            });
+
+        });
+
+        // This promise is resolved after both are resolved
+        return Promise.all([
+            promiseQuestions,
+            promiseAnswers
+        ]);
 
     }
 
@@ -63,7 +105,6 @@ export class CardsAgainstHumanityComponent implements OnInit {
             ret = this.questions.splice(randNumber, 1)[0];
         }
 
-        console.log(ret);
         return ret;
     }
 
@@ -85,10 +126,29 @@ export class CardsAgainstHumanityComponent implements OnInit {
             }
         }
 
-        console.log(ret);
         return ret;
     }
 
+    public newDeal(): void {
+        console.log("New deal");
+        this.currentQuestion = this.randomQuestion();
+        this.currentAnswers = this.randomAnswers();
+
+        console.log("Remaining questions " + this.questions.length);
+        console.log("Remaining answers " + this.answers.length);
+    }
+
+    public newGame(): void {
+        console.log("New game");
+        this.initCardsLists()
+            .then((res) => {
+                console.log("Promise res : " + res);
+                this.newDeal();
+        });
+
+
+    }
+
 
     ngOnInit(): void {