Add ReserveComponent

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

@@ -14,6 +14,7 @@ import { TraqueCardComponent } from './traque-card/traque-card.component';
 import { SurvivalCardComponent } from './survival-card/survival-card.component';
 import { BoardComponent } from './board/board.component';
 import { PlanetComponent } from './planet/planet.component';
+import { ReserveComponent } from './reserve/reserve.component';
 
 @NgModule({
   declarations: [
@@ -28,7 +29,8 @@ import { PlanetComponent } from './planet/planet.component';
     TraqueCardComponent,
     SurvivalCardComponent,
     BoardComponent,
-    PlanetComponent
+    PlanetComponent,
+    ReserveComponent
   ],
   imports: [
     BrowserModule,

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

-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
 import { Card } from '../card';
 
 @Component({

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

 <app-board [score]="score"></app-board>
 <app-planet [planet]="planet"></app-planet>
+<app-reserve [reserve]="reserve"></app-reserve>
 <div class="card-container">
   <app-card [card]="cards[0]"></app-card>
   <app-card [card]="cards[1]"></app-card>

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

 import { Component, OnInit } from '@angular/core';
 import { Card } from '../card';
-import { ANGOISSE, ANTRE, PLANET_MOCK, RESISTANCE } from '../mock-card';
+import { ANGOISSE, ANTRE, PLANET_MOCK, RESERVE_MOCK, RESISTANCE } from '../mock-card';
 import { Planet } from '../planet';
+import { Reserve } from '../reserve';
 import { Score } from '../score';
 @Component({
   selector: 'app-game',
@@ -13,11 +14,13 @@ export class GameComponent implements OnInit {
   cards : Card[];
   score : Score;
   planet : Planet;
+  reserve : Reserve;
 
   constructor() { 
     this.cards = [ANTRE, ANGOISSE, RESISTANCE];
     this.score = {traque : 18, creature : 2, disposition : "FRONT"}
     this.planet = PLANET_MOCK;
+    this.reserve = RESERVE_MOCK;
   }
 
   ngOnInit() {

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

 import {Card} from './card';
 import { Planet } from './planet';
+import { Reserve } from './reserve';
 
 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 : []};
@@ -37,4 +38,14 @@ export const PLANET_MOCK : Planet =
     places : [ANTRE, JUNGLE, RIVIERE, PLAGE, ROVER, MARAIS, ABRI, EPAVE, SOURCE, ARTEFACT],
     jetons : [{places : [1, 2], jeton : "cible"}, {places : [1, 2], jeton : "artemia"}, {places : [1, 2], jeton : "creature"}, {places : [7, 2], jeton : "cible"}, {places : [7, 2], jeton : "artemia"}, {places : [7, 2], jeton : "creature"},{places : [3], jeton : "cible"}, {places : [6], jeton : "creature"}, {places : [6], jeton : "artemia"}, {places : [6], jeton : "cible"}, {places : [5], jeton : "creature"}, {places : [5], jeton : "artemia"}, {places : [5], jeton : "cible"}, {places : [4,9], jeton : "cible"}],
     planetPawn : {type : "BEACON", place : "ASIDE"}
+}
+
+export const RESERVE_MOCK : Reserve = {
+    cards : [
+        {card : MARAIS, number : 3}, 
+        {card : ABRI, number : 2}, 
+        {card : EPAVE, number : 1}, 
+        {card : SOURCE, number : 0}, 
+        {card : ARTEFACT, number : 3}, 
+    ]
 }
\ No newline at end of file

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

+import { Card } from "./card";
+
+export interface Reserve {
+    cards : ReserveCard[]
+}
+
+export interface ReserveCard {
+    card : Card,
+    number : number
+}
\ No newline at end of file

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

+#reserve {
+    position: fixed;
+    width: 12%;
+    height: 80%;
+    right: 0;
+    top: 10%;
+}
+
+#reserve .card-set{
+    position: relative;
+    height: 20%;
+    width: 100%;
+}
+
+#reserve .card-set ul{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    list-style: none;
+}
+
+#reserve .card-set li{
+    position: absolute;
+    height: 100%;
+    width: 60%;;
+}
+
+#reserve .carte .pouvoir {
+    display: none;
+}
+
+#reserve .carte .nom {
+    font-size: 0.8em;
+}
\ No newline at end of file

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

+<div id="reserve">
+  <div *ngFor="let reserveCard of reserve.cards" class="card-set" [ngStyle]="reserveCard.number > 0 ? '' : {'display' : 'none'}">
+    <ul>
+      <li *ngFor="let item of [].constructor(reserveCard.number);let number = index" [ngStyle] = "{'right' : (number*8)+'%'}">
+        <app-card [card]="reserveCard.card"></app-card>
+      </li>
+    </ul>
+  </div>
+</div>
\ No newline at end of file

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

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

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

+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { Reserve } from '../reserve';
+
+@Component({
+  selector: 'app-reserve',
+  templateUrl: './reserve.component.html',
+  styleUrls: ['./reserve.component.css'],
+  encapsulation: ViewEncapsulation.None // Use to disable CSS Encapsulation for this component
+})
+export class ReserveComponent implements OnInit {
+
+  @Input() reserve : Reserve;
+  constructor() {}
+
+  ngOnInit() {
+  }
+
+}