Add status component and player service

not-alone-web/src/app/app.module.ts

@@ -16,6 +16,7 @@ import { BoardComponent } from './board/board.component';
 import { PlanetComponent } from './planet/planet.component';
 import { ReserveComponent } from './reserve/reserve.component';
 import { HandComponent } from './hand/hand.component';
+import { StatusComponent } from './status/status.component';
 
 @NgModule({
   declarations: [
@@ -32,7 +33,8 @@ import { HandComponent } from './hand/hand.component';
     BoardComponent,
     PlanetComponent,
     ReserveComponent,
-    HandComponent
+    HandComponent,
+    StatusComponent
   ],
   imports: [
     BrowserModule,

not-alone-web/src/app/game/game.component.html

@@ -2,3 +2,4 @@
 <app-planet [planet]="planet"></app-planet>
 <app-reserve [reserve]="reserve"></app-reserve>
 <app-hand [hand]="hand"></app-hand>
+<app-status [phase]="'2'" [responses]="['Ok', 'KO']"></app-status>
\ No newline at end of file

not-alone-web/src/app/game/game.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Card } from '../card';
 import { Hand } from '../hand';
-import { ANGOISSE, ANTRE, HAND_CREATURE_MOCK, HAND_TRAQUE_MOCK, PLANET_MOCK, RESERVE_MOCK, RESISTANCE } from '../mock-card';
+import { ANGOISSE, ANTRE, HAND_CREATURE_MOCK, HAND_TRAQUE_MOCK, PLANET_MOCK, RESERVE_MOCK, RESISTANCE, SCORE_MOCK } from '../mock-card';
 import { Planet } from '../planet';
+import { PlayerService } from '../player.service';
 import { Reserve } from '../reserve';
 import { Score } from '../score';
 @Component({
@@ -12,22 +13,34 @@ import { Score } from '../score';
 })
 export class GameComponent implements OnInit {
 
-  cards : Card[];
   score : Score;
   planet : Planet;
   reserve : Reserve;
   hand : Hand;
 
-  constructor() { 
-    this.cards = [ANTRE, ANGOISSE, RESISTANCE];
-    this.score = {traque : 18, creature : 2, disposition : "FRONT"}
-    this.planet = PLANET_MOCK;
-    this.reserve = RESERVE_MOCK;
-    this.hand = HAND_TRAQUE_MOCK;
-    //this.hand = HAND_CREATURE_MOCK;
-  }
+  constructor(private playerService : PlayerService) { }
 
   ngOnInit() {
+    console.log(this.playerService);
+    this.getScore();
+    this.getPlanet();
+    this.getReserve();
+    this.getHand();
+  }
+
+  getScore() : void {
+    this.score = this.playerService.getScore();
+  }
+
+  getPlanet() : void {
+    this.planet = this.playerService.getPlanet();
+  }
+
+  getReserve() : void {
+    this.reserve = this.playerService.getReserve();
+  }
 
+  getHand() : void {
+    this.hand = this.playerService.getHand();
   }
 }

not-alone-web/src/app/hand/hand.component.css

@@ -32,10 +32,6 @@
     margin-bottom: 0;
 }
 
-#hand .carte .pouvoir {
-    /*display: none;*/
-}
-
 #hand .carte .nom,
 #hand .carte .phase,
 #hand .carte .numero {

not-alone-web/src/app/mock-card.ts

@@ -2,6 +2,7 @@ import {Card} from './card';
 import { Hand } from './hand';
 import { Planet } from './planet';
 import { Reserve } from './reserve';
+import { Score } from './score';
 
 export const ANTRE : Card = {name : "L'antre", type : "PLACE", description : "Lorem ipsum", number : 1, color : "sombre", url : "/assets/img/cartes-lieu/antre.jpg", phase : "", symbols : []};
 export const JUNGLE : Card = {name : "La jungle", type : "PLACE", description : "Lorem ipsum", number : 2, color : "vert", url : "/assets/img/cartes-lieu/jungle.jpg", phase : "", symbols : []};
@@ -69,3 +70,5 @@ export const HAND_CREATURE_MOCK : Hand = {
     pawnWillingness : -1,
     jetons : ["artemia", "cible", "creature"]
 }
+
+export const SCORE_MOCK : Score = {traque : 18, creature : 2, disposition : "FRONT"}
\ No newline at end of file

not-alone-web/src/app/player.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { PlayerService } from './player.service';
+
+describe('PlayerService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: PlayerService = TestBed.get(PlayerService);
+    expect(service).toBeTruthy();
+  });
+});

not-alone-web/src/app/player.service.ts

+import { Injectable } from '@angular/core';
+import {Observable, of} from 'rxjs'
+import { Hand } from './hand';
+import { HAND_TRAQUE_MOCK, PLANET_MOCK, RESERVE_MOCK, SCORE_MOCK } from './mock-card';
+import { Planet } from './planet';
+import { Reserve } from './reserve';
+import { Score } from './score';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PlayerService {
+
+  constructor() { }
+
+  getScore() : Observable<Score> {
+    return of(SCORE_MOCK);
+  }
+
+  getPlanet() : Planet {
+    return PLANET_MOCK;
+  }
+
+  getReserve() : Reserve {
+    return RESERVE_MOCK;
+  }
+
+  getHand() : Hand {
+    return HAND_TRAQUE_MOCK;
+  }  
+}

not-alone-web/src/app/status/status.component.css

+#status {
+    position: fixed;
+    height: 25%;
+    width: 15%;
+    background-color: #34495e;
+    top: 20%;
+    left: 0;
+}
+
+#status .phase{
+    text-align: center;
+    font-size: 1.2em;
+    height: 10%;
+}
+
+#status .message-container{
+    width: 80%;
+    margin-left: 10%;
+    max-height: 90%;
+    overflow-y: auto;
+}
\ No newline at end of file

not-alone-web/src/app/status/status.component.html

+<div id="status">
+  <p class="phase">Phase {{phase}}</p>
+  <div class="message-container">
+    <ul>
+      <li *ngFor="let response of responses">{{response}}</li>
+    </ul>
+  </div>
+</div>
\ No newline at end of file

not-alone-web/src/app/status/status.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StatusComponent } from './status.component';
+
+describe('StatusComponent', () => {
+  let component: StatusComponent;
+  let fixture: ComponentFixture<StatusComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StatusComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StatusComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

not-alone-web/src/app/status/status.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-status',
+  templateUrl: './status.component.html',
+  styleUrls: ['./status.component.css']
+})
+export class StatusComponent implements OnInit {
+
+  @Input('phase') phase : string;
+  @Input('responses') responses : string[];
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}