Add PlanetComponent

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

@@ -106,7 +106,7 @@ Cartes Lieu
 }
 
 .carte.carte_lieu  .zone_texte .nom{
-  font-size: 1.5em;
+  font-size: 1em;
   margin: 0;
   text-align: center;
   text-transform: uppercase; 
@@ -114,7 +114,7 @@ Cartes Lieu
 }
 
 .carte.carte_lieu  .zone_texte .pouvoir{
-  font-size: 0.9em;
+  font-size: 0.7em;
   text-align: justify;
   width: 90%;
   margin: 4% 5%;

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

@@ -13,6 +13,7 @@ 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';
+import { PlanetComponent } from './planet/planet.component';
 
 @NgModule({
   declarations: [
@@ -26,7 +27,8 @@ import { BoardComponent } from './board/board.component';
     PlaceCardComponent,
     TraqueCardComponent,
     SurvivalCardComponent,
-    BoardComponent
+    BoardComponent,
+    PlanetComponent
   ],
   imports: [
     BrowserModule,

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

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

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

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

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 { ANGOISSE, ANTRE, PLANET_MOCK, RESISTANCE } from '../mock-card';
+import { Planet } from '../planet';
 import { Score } from '../score';
 @Component({
   selector: 'app-game',
@@ -11,10 +12,12 @@ export class GameComponent implements OnInit {
 
   cards : Card[];
   score : Score;
+  planet : Planet;
 
   constructor() { 
     this.cards = [ANTRE, ANGOISSE, RESISTANCE];
     this.score = {traque : 18, creature : 2, disposition : "FRONT"}
+    this.planet = PLANET_MOCK;
   }
 
   ngOnInit() {

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

 import {Card} from './card';
+import { Planet } from './planet';
 
 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 : []};
+export const RIVIERE : Card = {name : "La rivière", type : "PLACE", description : "Lorem ipsum", number : 3, color : "bleu", url : "/assets/img/cartes-lieu/riviere.jpg", phase : "", symbols : []};
+export const PLAGE : Card = {name : "La plage", type : "PLACE", description : "Lorem ipsum", number : 4, color : "jaune", url : "/assets/img/cartes-lieu/plage.jpg", phase : "", symbols : []};
+export const ROVER : Card = {name : "Le rover", type : "PLACE", description : "Lorem ipsum", number : 5, color : "sombre", url : "/assets/img/cartes-lieu/rover.jpg", phase : "", symbols : []};
+export const MARAIS : Card = {name : "Le marais", type : "PLACE", description : "Lorem ipsum", number : 6, color : "violet", url : "/assets/img/cartes-lieu/marais.jpg", phase : "", symbols : []};
+export const ABRI : Card = {name : "L'abri", type : "PLACE", description : "Lorem ipsum", number : 7, color : "rouge", url : "/assets/img/cartes-lieu/abri.jpg", phase : "", symbols : []};
+export const EPAVE : Card = {name : "L'épave", type : "PLACE", description : "Lorem ipsum", number : 8, color : "sombre", url : "/assets/img/cartes-lieu/epave.jpg", phase : "", symbols : []};
+export const SOURCE : Card = {name : "La source", type : "PLACE", description : "Lorem ipsum", number : 9, color : "rouge", url : "/assets/img/cartes-lieu/source.jpg", phase : "", symbols : []};
+export const ARTEFACT : Card = {name : "L'artefact", type : "PLACE", description : "Lorem ipsum", number : 10, color : "bleu", url : "/assets/img/cartes-lieu/artefact.jpg", phase : "", symbols : []};
+export const NEXUS : Card = {name : "Le nexus", type : "PLACE", description : "Lorem ipsum", number : 1, color : "sombre", url : "/assets/img/cartes-lieu/nexus.jpg", phase : "", symbols : []};
+export const OASIS : Card = {name : "L'oasis", type : "PLACE", description : "Lorem ipsum", number : 2, color : "jaune", url : "/assets/img/cartes-lieu/oasis.jpg", phase : "", symbols : []};
+export const FJORD : Card = {name : "Les fjord", type : "PLACE", description : "Lorem ipsum", number : 3, color : "jaune", url : "/assets/img/cartes-lieu/fjord.jpg", phase : "", symbols : []};
+export const DOME : Card = {name : "Le dôme", type : "PLACE", description : "Lorem ipsum", number : 4, color : "violet", url : "/assets/img/cartes-lieu/dome.jpg", phase : "", symbols : []};
+export const LABYRINTHE : Card = {name : "Le labyrinthe", type : "PLACE", description : "Lorem ipsum", number : 5, color : "jaune", url : "/assets/img/cartes-lieu/labyrinthe.jpg", phase : "", symbols : []};
+export const MANGROVE : Card = {name : "La mangrove", type : "PLACE", description : "Lorem ipsum", number : 6, color : "vert", url : "/assets/img/cartes-lieu/mangrove.jpg", phase : "", symbols : []};
+export const ARCHIPEL : Card = {name : "L'archipel", type : "PLACE", description : "Lorem ipsum", number : 7, color : "jaune", url : "/assets/img/cartes-lieu/archipel.jpg", phase : "", symbols : []};
+export const POLE : Card = {name : "Le pôle", type : "PLACE", description : "Lorem ipsum", number : 8, color : "bleu", url : "/assets/img/cartes-lieu/pole.jpg", phase : "", symbols : []};
+export const FUNGI : Card = {name : "Les fungi", type : "PLACE", description : "Lorem ipsum", number : 9, color : "violet", url : "/assets/img/cartes-lieu/fungi.jpg", phase : "", symbols : []};
+export const PORTAIL : Card = {name : "Le portail", type : "PLACE", description : "Lorem ipsum", number : 10, color : "orange", url : "/assets/img/cartes-lieu/portail.jpg", phase : "", symbols : []};
+export const HIDDEN_PLACE : Card = {name : "", type : "PLACE", description : "", number : -1, color : "", url : "", 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
+export const RESISTANCE : Card = {name : "Résistance", type : "SURVIVAL", description : "Lorem ipsum", number : -1, color : "", url : "", phase : "Phase 1", symbols : []};
+
+
+
+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"}
+}
\ No newline at end of file

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

+import { Card } from "./card";
+
+export interface Planet {
+    places : Card[],
+    jetons : PlacedJeton[],
+    planetPawn : PlanetPawn
+}
+
+export interface PlacedJeton {
+    places : number[],
+    jeton : string
+}
+
+export interface PlanetPawn {
+    type : string,
+    place : string 
+}
\ No newline at end of file

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

+#planet {
+    position: fixed;
+    width: 60%;
+    height: 50%;
+    top: 20%;
+    left: 20%;
+}
+
+#planet .cards-container{
+    position: relative;
+    width: 100%;
+    height: 100;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+}
+
+#planet .jeton {
+    position: absolute;
+    width: 5%;
+    padding-top: 5%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    border: 1px solid black;
+    border-radius: 100%;
+}
+
+#planet .jeton .symbol{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80%;
+    height: 80%;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+#planet .jeton .symbol.artemia{
+    background-image: url(../../assets/img/jetons/jeton-planete.svg);
+}
+
+#planet .jeton .symbol.cible{
+    background-image: url(../../assets/img/jetons/jeton-cible.svg);
+}
+
+#planet .jeton .symbol.creature{
+    background-image: url(../../assets/img/jetons/jeton-creature.svg);
+}
+
+#planet .planet-pawn {
+    position: absolute;
+    width: 5%;
+    padding-top: 5%;
+    transform: translate(-50%, -50%);
+    background-color: rgb(238, 163, 0);
+    border-radius: 100%;
+}
\ No newline at end of file

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

+<div id="planet">
+  <div class="cards-container">
+    <div *ngFor="let place of planet.places" class="place">
+      <app-card [card]="place"></app-card>
+    </div>
+    <div *ngFor="let jeton of planet.jetons" [ngStyle]="computeJetonStyle(jeton)" class="jeton">
+      <span *ngIf="jeton.jeton=='artemia'" class="symbol artemia"></span>
+      <span *ngIf="jeton.jeton=='cible'" class="symbol cible"></span>
+      <span *ngIf="jeton.jeton=='creature'" class="symbol creature"></span>
+    </div>
+    <div class="planet-pawn" [ngStyle]="computePlanetPawnStyle()"></div>
+  </div>
+</div>
\ No newline at end of file

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

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

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

+import { Component, Input, OnInit } from '@angular/core';
+import { PlacedJeton, Planet } from '../planet';
+
+@Component({
+  selector: 'app-planet',
+  templateUrl: './planet.component.html',
+  styleUrls: ['./planet.component.css']
+})
+export class PlanetComponent implements OnInit {
+
+  @Input() planet : Planet;
+
+  leftBase : number;
+  leftIncrement : number;
+
+  constructor() {
+    this.leftBase = 10;
+    this.leftIncrement = 10;
+  }
+
+  ngOnInit() {
+  }
+
+  computeJetonStyle(jeton : PlacedJeton){
+    let top : number = this.computeTopJeton(jeton.places) + this.computeDeltaTopJeton(jeton);
+    let left : number = this.computeLeftJeton(jeton.places) + this.computeDeltaLeftJeton(jeton);
+
+    return {'top': top + '%', 'left' : left + '%'};
+  }
+
+  computeDeltaTopJeton(jeton : PlacedJeton) {
+    let index = this.getIndexJeton(jeton);
+    if(this.computeJetonNumber(jeton.places) == 1 || index == 0) {
+      return 0;
+    }
+    if(jeton.places.length == 2) {
+      if((jeton.places[0] <= 5 && jeton.places[1] <= 5)
+      || (jeton.places[0] > 5 && jeton.places[1] > 5)) {
+        if(index == 1) {
+          return -12;
+        }
+        else {
+          return 12;
+        }
+      }
+      else {
+        return 0;
+      }
+    }
+    else{
+      if(jeton.places[0] <= 5) {
+        return -10;
+      }
+      else {
+        return 10;
+      }
+    }
+  }
+
+  computeTopJeton(places : number[]) {
+    if(places.length == 2) {
+      return this.computeTopJetonTwoPlaces(places[0], places[1]);
+    }
+    else {
+      return this.computeTopJetonOnePlace(places[0]);
+    }
+  }
+
+  computeTopJetonTwoPlaces(place1 : number, place2 : number) {
+      if(place1 <= 5 && place2 <= 5) {
+        return 25;
+      }
+      else if(place1 > 5 && place2 > 5) {
+        return 75;
+      }
+      else {
+        return 50;
+      }
+  }
+
+  computeTopJetonOnePlace(place : number) {
+    if(place <= 5) {
+      return 25;
+    }
+    else {
+      return 65;
+    }
+  }
+
+  computeDeltaLeftJeton(jeton : PlacedJeton) {
+    let index = this.getIndexJeton(jeton);
+    if(this.computeJetonNumber(jeton.places) == 1 || index == 0) {
+      return 0;
+    }
+    else if(index == 1){
+      if(jeton.places.length == 2 && 
+        ((jeton.places[0] <= 5 && jeton.places[1] <= 5) || (jeton.places[0] > 5 && jeton.places[1] > 5))) {
+          return 0;
+      }
+      else {
+          return -5;
+      }
+    }
+    else {
+      if(jeton.places.length == 2 && 
+        ((jeton.places[0] <= 5 && jeton.places[1] <= 5) || (jeton.places[0] > 5 && jeton.places[1] > 5))) {
+          return 0;
+      }
+      else {
+          return 5;
+      }
+    }
+  }
+
+  computeLeftJeton(places : number[]) {
+    if(places.length == 2) {
+      return this.computeLeftJetonOnTwoPlaces(places[0], places[1]);
+    }
+    else {
+      return this.computeLeftJetonOnOnePlace(places[0]);
+    }
+  }
+
+  computeLeftJetonOnTwoPlaces(place1 : number, place2 : number) {
+      if(place1 > 5) {
+        place1 -= 5;
+      }
+      if(place2 > 5) {
+        place2 -= 5;
+      }
+      --place1;
+      --place2;
+      let min = place1 < place2 ? place1 : place2;
+      if(place1 != place2){
+        return this.leftBase + min * this.leftIncrement * 2 + this.leftIncrement;
+      }
+      else {
+        return this.leftBase + min * this.leftIncrement * 2;
+      }
+  }
+
+  computeLeftJetonOnOnePlace(place : number) {
+    if(place > 5) {
+      place -= 5;
+    }
+    --place;
+    return this.leftBase + place * this.leftIncrement * 2;
+  }
+
+  //Compute the number of jetons on this places
+  computeJetonNumber(places : number[]) {
+    let number : number = 0;
+    for(var j of this.planet.jetons) {
+        if(j.places.length == places.length) {
+          if(places.length == 1 && j.places[0] == places[0]) {
+            ++number;
+          } 
+          else if(places.length == 2) {
+            if((j.places[0] == places[0] && j.places[1] == places[1])
+            ||(j.places[0] == places[1] && j.places[0] == places[1])) {
+              ++number;
+            }
+          } 
+        }
+    }
+    return number;
+  }
+
+  //Get the index of the jeton in the array
+  getIndexJeton(jeton : PlacedJeton) {
+    let indice : number = 0;
+    for(var j of this.planet.jetons) {
+        if(j.jeton == jeton.jeton) {
+          return indice;
+        }
+        ++indice;
+    }
+  }
+
+  computePlanetPawnStyle() {
+    if(this.planet.planetPawn.type=="BEACON") {
+      return this.computeBeaconPawnStyle();
+    }
+    else{
+      return this.computeShieldPawnStyle();
+    }
+  }
+
+  computeBeaconPawnStyle() {
+      if(this.planet.planetPawn.place == "ASIDE") {
+        return {'top' : '-7%', 'left' : (this.leftBase + 3*2*this.leftIncrement) + '%'}
+      }
+      else {
+        return {'top' : '7%', 'left' : (this.leftBase + 3*2*this.leftIncrement) + '%'}
+      }
+  }
+
+  computeShieldPawnStyle() {
+    let delta = 0;
+    if(this.planet.planetPawn.place == "PLACE_2") {
+      delta = 1;
+    }
+    else if(this.planet.planetPawn.place == "PLACE_3") {
+      delta = 2;
+    }
+    else if(this.planet.planetPawn.place == "PLACE_4") {
+      delta = 3;
+    }
+    return {'top' : '7%', 'left' : (this.leftBase + delta*2*this.leftIncrement) + '%'}
+  }
+}