Commit a43ffe8e authored by Corentin Guillevic's avatar Corentin Guillevic
Browse files

Add PlanetComponent

parent 2401f0b7
......@@ -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%;
......
......@@ -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,
......
.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
<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>
......
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() {
......
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 : []};
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
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
#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
<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
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();
});
});
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) + '%'}
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment