Add component card, place-card, survival-card, traque-card and board

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

@@ -20,4 +20,277 @@ html, body{
 body{
     background-color: #2c3e50;
     color: #ededed;
+}
+
+/*******************
+Common
+*******************/
+
+/*Card*/
+
+.carte{
+  position: relative;
+  width: 75%;
+  padding-bottom: 100%;
+  margin-left: 12.5%;
+  margin-bottom: 3%;
+  border: 10px solid black;
+  color: black;
+  box-sizing: border-box;
+  border-radius: 15px;
+  background-position: center;
+  background-size: cover;
+  font-family: Arial;
+  transition: all 0.3s;
+  -webkit-transition: all 0.3s;
+  perspective: 1000px;
+  transform-style: preserve-3d;
+  -webkit-user-select: none; /* Safari */        
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+/Edge */
+  user-select: none; /* Standard */
+}
+
+.carte:hover{
+  cursor: pointer;
+}
+
+.carte.carte_retournee{
+  transform: rotate3D(0,1,0,180deg);
+}
+
+/************************
+Cartes Lieu
+************************/
+
+.carte.carte_lieu::before{
+  content: "";
+  height: 101%;
+  width: 100%;
+  background-image: url("../assets/img/cartes-lieu/dos-lieu.jpg");
+  background-size: cover;
+  background-position: center;
+  position: absolute;
+  transform: translateZ(-0.1px);
+}
+
+.carte.carte_lieu .zone_numero{
+  position: absolute;
+  width: 20%;
+  padding-bottom: 20%;
+  background-color: black;
+  border-radius: 0 0 40px 0;
+  color: white;
+  transform: translateZ(0px);
+}
+
+.carte.carte_lieu  .numero{
+  position: absolute;
+  top: 40%;
+  left: 30%;
+  transform: translate(-50%,-50%);
+  margin: 0;
+  font-weight: bold;
+  font-size: 1.5em;
+}
+
+.carte.carte_lieu  .zone_texte{
+  position: absolute;
+  width: 100%;
+  transform: translateZ(0px);
+  /*! min-height: 35%; */
+  left: 0;
+  bottom: 0;
+  background: linear-gradient(to bottom, rgba(256,256,256,0.55),rgba(256,256,256,0.8));
+  padding: 4% 0;
+}
+
+.carte.carte_lieu  .zone_texte .nom{
+  font-size: 1.5em;
+  margin: 0;
+  text-align: center;
+  text-transform: uppercase; 
+  font-weight: bold;
+}
+
+.carte.carte_lieu  .zone_texte .pouvoir{
+  font-size: 0.9em;
+  text-align: justify;
+  width: 90%;
+  margin: 4% 5%;
+}
+
+.carte.carte_lieu  .zone_texte .container_decoration.sombre{
+  fill: #303952;
+}
+
+.carte.carte_lieu  .zone_texte .container_decoration.orange{
+  fill: #e15f41;
+}
+
+.carte.carte_lieu  .zone_texte .container_decoration.violet{
+  fill: #786fa6;
+}
+
+.carte.carte_lieu  .zone_texte .container_decoration.bleu{
+  fill: #3dc1d3;
+}
+
+.carte.carte_lieu  .zone_texte .container_decoration.jaune{
+  fill: #f5cd79;
+}
+
+.carte.carte_lieu  .zone_texte .container_decoration.rouge{
+  fill: #c44569;
+}
+
+.carte.carte_lieu  .zone_texte .container_decoration.vert{
+  fill: #3ae374;
+} 
+
+.carte.carte_lieu  .zone_texte .svg_bottom_card{
+  width: 100%;
+  position: absolute;
+  bottom: -1px;
+}
+
+.carte.carte_lieu  .zone_texte .svg_top_card{
+  width: 100%;
+  position: absolute;
+  top: -1px;
+  transform: rotate(-180deg);
+}
+
+/************************
+Cartes Traque
+************************/
+
+.carte_traque{
+  background-image: url("../assets/img/cartes-traque/face-traque.jpg");
+}
+
+.carte_traque::before{
+  content: "";
+  height: 101%;
+  width: 100%;
+  background-image: url("../assets/img/cartes-traque/dos-traque.jpg");
+  background-size: cover;
+  background-position: center;
+  position: absolute;
+  transform: translateZ(-0.1px);
+}
+
+.carte_traque .nom{
+  font-size: 1.5em;
+  text-transform: uppercase;
+  font-weight: bold;
+  position: absolute;
+  top: 2%;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+
+.carte_traque .phase{
+  font-size: 1.2em;
+  text-transform: uppercase;
+  font-weight: bold;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 2%;
+}
+
+.carte_traque .pouvoir{
+  font-size: 0.9em;
+  position: absolute;
+  width: 90%;
+  left: 5%;
+  bottom: 10%;
+  text-align: justify;
+}
+
+.carte_traque .jetons{
+  width: 60%;
+  position: absolute;
+  top: 15%;
+  left: 20%;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
+  padding-bottom: 60%;
+  justify-items: center;
+}
+
+.carte_traque .jetons span{
+  height: 7vh;
+  width: 7vh;
+  display: block;
+  background-position: center;
+  background-size: 80%;
+  background-repeat: no-repeat;
+  border: 1px solid black;
+  background-color: #ededed;
+  border-radius: 50%; 
+}
+
+.carte_traque .jetons .artemia {
+  background-image: url("../assets/img/jetons/jeton-planete.svg");
+}
+
+.carte_traque .jetons .cible {
+  background-image: url("../assets/img/jetons/jeton-cible.svg");
+}
+
+.carte_traque .jetons .creature {
+  background-image: url("../assets/img/jetons/jeton-creature.svg");
+}
+
+/************************
+Cartes Survie
+************************/
+
+.carte_survie{
+  /*background-image: url("../assets/img/cartes-traque/face-traque.jpg");*/
+  background-color: #ededed;
+}
+
+.carte_survie::before{
+  content: "";
+  height: 101%;
+  width: 100%;
+  /*background-image: url("../assets/img/cartes-traque/dos-traque.jpg");*/
+  background-size: cover;
+  background-position: center;
+  position: absolute;
+  transform: translateZ(-0.1px);
+}
+
+.carte_survie .nom{
+  font-size: 1.5em;
+  text-transform: uppercase;
+  font-weight: bold;
+  position: absolute;
+  top: 2%;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+}
+
+.carte_survie .phase{
+  font-size: 1.2em;
+  text-transform: uppercase;
+  font-weight: bold;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 2%;
+}
+
+.carte_survie .pouvoir{
+  font-size: 0.9em;
+  position: absolute;
+  width: 90%;
+  left: 5%;
+  bottom: 10%;
+  text-align: justify;
 }
\ No newline at end of file

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

@@ -8,6 +8,11 @@ import { HelpComponent } from './help/help.component';
 import { NavbarComponent } from './navbar/navbar.component';
 import { HomeComponent } from './home/home.component';
 import { GameComponent } from './game/game.component';
+import { CardComponent } from './card/card.component';
+import { PlaceCardComponent } from './place-card/place-card.component';
+import { TraqueCardComponent } from './traque-card/traque-card.component';
+import { SurvivalCardComponent } from './survival-card/survival-card.component';
+import { BoardComponent } from './board/board.component';
 
 @NgModule({
   declarations: [
@@ -16,7 +21,12 @@ import { GameComponent } from './game/game.component';
     HelpComponent,
     NavbarComponent,
     HomeComponent,
-    GameComponent
+    GameComponent,
+    CardComponent,
+    PlaceCardComponent,
+    TraqueCardComponent,
+    SurvivalCardComponent,
+    BoardComponent
   ],
   imports: [
     BrowserModule,

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

+#board {
+    position: fixed;
+    width: 50%;
+    
+}
+
+#board .case_victoire{
+    fill:none;
+    stroke:#F8A54A;
+    stroke-width:2;
+    stroke-miterlimit:10;
+}
+
+#board .case-assimilation{
+    fill:none;
+    stroke:#FF0000;
+    stroke-width:2;
+    stroke-miterlimit:10;
+}
+
+#board .pion_assimilation{
+    fill:#FF0000;
+    transition : all 0.3s;
+    -webkit-transition : all 0.3s;
+}
+
+#board .case-secours{
+    fill:none;
+    stroke:#1853A3;
+    stroke-width:2;
+    stroke-miterlimit:10;
+}
+
+#board .pion_secours{
+    fill:#40A629;
+    transition : all 0.3s;
+    -webkit-transition : all 0.3s;
+}
+
+#board .artemia{
+    fill:#1853A3;
+}

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

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

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

+import { Component, Input, OnInit } from '@angular/core';
+import { Score } from '../score';
+
+@Component({
+  selector: 'app-board',
+  templateUrl: './board.component.html',
+  styleUrls: ['./board.component.css']
+})
+export class BoardComponent implements OnInit {
+
+  @Input() score : Score;
+
+  constructor() { 
+  }
+
+  ngOnInit() {
+    console.log(this.score);
+  }
+
+  setScore(score : Score) : void{
+    this.score = score;
+  }
+}

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

+export interface Card {
+    name : string,
+    type : string,
+    description : string,
+    number : number,
+    color : string,
+    url : string,
+    phase : string,
+    symbols : string[]
+}
\ No newline at end of file

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

+.carte_container{
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+  
\ No newline at end of file

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

+<div class="carte_container">
+  <app-place-card [card]="card" *ngIf="card.type == 'PLACE'"></app-place-card>
+  <app-traque-card [card]="card" *ngIf="card.type == 'TRACKING'"></app-traque-card>
+  <app-survival-card [card]="card" *ngIf="card.type == 'SURVIVAL'"></app-survival-card>
+</div>
\ No newline at end of file

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

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

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

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

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

+.card-container {
+    position: fixed;
+    width: 50%;
+    height: 50%;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+}
\ No newline at end of file

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

-<p>
-  game works!
-</p>
+<app-board [score]="score"></app-board>
+<div (click)="test()" class="card-container">
+  <app-card [card]="cards[0]"></app-card>
+  <app-card [card]="cards[1]"></app-card>
+  <app-card [card]="cards[2]"></app-card>
+</div>

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

 import { Component, OnInit } from '@angular/core';
+import { Card } from '../card';
+import { ANGOISSE, ANTRE, RESISTANCE } from '../mock-card';
+import { Score } from '../score';
 @Component({
   selector: 'app-game',
   templateUrl: './game.component.html',
@@ -6,10 +9,15 @@ import { Component, OnInit } from '@angular/core';
 })
 export class GameComponent implements OnInit {
 
-  constructor() { }
+  cards : Card[];
+  score : Score;
 
-  ngOnInit() {
+  constructor() { 
+    this.cards = [ANTRE, ANGOISSE, RESISTANCE];
+    this.score = {traque : 18, creature : 2, disposition : "FRONT"}
   }
 
-
+  ngOnInit() {
+    
+  }
 }

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

+import {Card} from './card';
+
+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 ACHARNEMENT : Card = {name : "Acharnement", type : "TRACKING", description : "Lorem ipsum", number : -1, color : "", url : "", phase : "Phase 2", symbols : []};
+export const ANGOISSE : Card = {name : "Angoisse", type : "TRACKING", description : "Lorem ipsum", number : -1, color : "", url : "", phase : "Phase 1", symbols : ["artemia"]};
+
+
+export const RESISTANCE : Card = {name : "Résistance", type : "SURVIVAL", description : "Lorem ipsum", number : -1, color : "", url : "", phase : "Phase 1", symbols : []};
\ No newline at end of file

not-alone-web/src/app/place-card/place-card.component.html

+<div class="carte carte_lieu" [ngStyle]="{'background-image': 'url(' + card.url + ')'}">
+  <div class="zone_numero">
+    <p class="numero">{{card.number}}</p>
+  </div>
+  <div class="zone_texte">
+    <p class="nom">{{card.name}}</p>
+    <p class="pouvoir">{{card.description}}</p>
+    <div [className]="card.color + ' container_decoration'">
+      <svg class="svg_bottom_card" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179 11.2">
+        <polygon class="bottom_card" points="179 0 179 11.2 0 11.2 0 0 38.1 0 51.2 6 127.8 6 140.9 0 179 0"></polygon>
+      </svg>
+      <svg class="svg_top_card" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 179 11.2">
+        <polygon class="bottom_card" points="179 0 179 11.2 0 11.2 0 0 38.1 0 51.2 6 127.8 6 140.9 0 179 0"></polygon>
+      </svg>
+    </div>
+  </div>
+</div>
\ No newline at end of file

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

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

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

+import { Component, Input, OnInit } from '@angular/core';
+import { Card } from '../card';
+
+@Component({
+  selector: 'app-place-card',
+  templateUrl: './place-card.component.html',
+  styleUrls: ['./place-card.component.css']
+})
+export class PlaceCardComponent implements OnInit {
+  
+  @Input() card : Card;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+}