From 1a0dccc891703d69e6895e8ba8a6aecd76e1b10d Mon Sep 17 00:00:00 2001 From: BBS007 Date: Sat, 20 May 2017 11:23:05 +0200 Subject: [PATCH] Added boostrap css, changed fetch in Promise and added new game / new deal buttons. --- my-app/.angular-cli.json | 5 +- my-app/package.json | 1 + my-app/src/app/app.component.css | 53 ----------- my-app/src/app/app.component.spec.ts | 32 ------- .../cards-against-humanity.component.html | 17 +++- .../cards-against-humanity.component.ts | 88 ++++++++++++++++--- my-app/src/app/cards.service.spec.ts | 15 ---- 7 files changed, 92 insertions(+), 119 deletions(-) delete mode 100644 my-app/src/app/app.component.spec.ts delete mode 100644 my-app/src/app/cards.service.spec.ts diff --git a/my-app/.angular-cli.json b/my-app/.angular-cli.json index f907d73..8121b0b 100644 --- a/my-app/.angular-cli.json +++ b/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", diff --git a/my-app/package.json b/my-app/package.json index 418e765..145492c 100644 --- a/my-app/package.json +++ b/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" diff --git a/my-app/src/app/app.component.css b/my-app/src/app/app.component.css index 7a7d38a..e69de29 100644 --- a/my-app/src/app/app.component.css +++ b/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; -} diff --git a/my-app/src/app/app.component.spec.ts b/my-app/src/app/app.component.spec.ts deleted file mode 100644 index c740bcd..0000000 --- a/my-app/src/app/app.component.spec.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { TestBed, async } from '@angular/core/testing'; - -import { AppComponent } from './app.component'; - -describe('AppComponent', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ - AppComponent - ], - }).compileComponents(); - })); - - it('should create the app', async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app).toBeTruthy(); - })); - - it(`should have as title 'app works!'`, async(() => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.debugElement.componentInstance; - expect(app.title).toEqual('app works!'); - })); - - it('should render title in a h1 tag', async(() => { - const fixture = TestBed.createComponent(AppComponent); - fixture.detectChanges(); - const compiled = fixture.debugElement.nativeElement; - expect(compiled.querySelector('h1').textContent).toContain('app works!'); - })); -}); diff --git a/my-app/src/app/cards-against-humanity/cards-against-humanity.component.html b/my-app/src/app/cards-against-humanity/cards-against-humanity.component.html index a06e8fa..c9c04d6 100644 --- a/my-app/src/app/cards-against-humanity/cards-against-humanity.component.html +++ b/my-app/src/app/cards-against-humanity/cards-against-humanity.component.html @@ -1,14 +1,23 @@ -

Question

+
+ + +
+ + +

+ Bienvenue sur Cards Against Humanity +

+ +

Question

-
-

+

Answers -

+
diff --git a/my-app/src/app/cards-against-humanity/cards-against-humanity.component.ts b/my-app/src/app/cards-against-humanity/cards-against-humanity.component.ts index 99ea13e..071e433 100644 --- a/my-app/src/app/cards-against-humanity/cards-against-humanity.component.ts +++ b/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; + 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 { + + // Questions promise, resolved when the result is set + const promiseQuestions = new Promise((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((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 { diff --git a/my-app/src/app/cards.service.spec.ts b/my-app/src/app/cards.service.spec.ts deleted file mode 100644 index 5ad75cd..0000000 --- a/my-app/src/app/cards.service.spec.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { TestBed, inject } from '@angular/core/testing'; - -import { CardsService } from './cards.service'; - -describe('CardsService', () => { - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [CardsService] - }); - }); - - it('should ...', inject([CardsService], (service: CardsService) => { - expect(service).toBeTruthy(); - })); -});