Commit 6e9d81c0 authored by Corentin Guillevic's avatar Corentin Guillevic
Browse files

Add component Hand

parent 5c074531
......@@ -15,6 +15,7 @@ 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';
import { HandComponent } from './hand/hand.component';
@NgModule({
declarations: [
......@@ -30,7 +31,8 @@ import { ReserveComponent } from './reserve/reserve.component';
SurvivalCardComponent,
BoardComponent,
PlanetComponent,
ReserveComponent
ReserveComponent,
HandComponent
],
imports: [
BrowserModule,
......
<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>
<app-card [card]="cards[2]"></app-card>
</div>
<app-hand [hand]="hand"></app-hand>
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import { Card } from '../card';
import { ANGOISSE, ANTRE, PLANET_MOCK, RESERVE_MOCK, RESISTANCE } from '../mock-card';
import { Hand } from '../hand';
import { ANGOISSE, ANTRE, HAND_CREATURE_MOCK, HAND_TRAQUE_MOCK, PLANET_MOCK, RESERVE_MOCK, RESISTANCE } from '../mock-card';
import { Planet } from '../planet';
import { Reserve } from '../reserve';
import { Score } from '../score';
......@@ -15,12 +16,15 @@ export class GameComponent implements OnInit {
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;
}
ngOnInit() {
......
import { Card } from "./card";
export interface Hand {
placecards : Card[],
survivalcards : Card[],
trackingcards : Card[],
pawnWillingness : number,
jetons : String[]
}
\ No newline at end of file
#hand {
position: fixed;
width: 90%;
height: 22%;
left: 50%;
transform: translateX(-50%);
bottom: 0;
}
#hand .objects-container{
position: absolute;
bottom: 0;
left: 0;
width: 10%;
height: 100%;
}
#hand .cards-container {
position: absolute;
bottom: 0;
display: grid;
/*grid-auto-flow: column;*/
width: 90%;
max-height: 100%;
overflow: auto;
right: 0;
grid-template-columns: repeat(auto-fill, minmax(12%, 1fr));
grid-row-gap: 5%;
}
#hand .carte{
margin-bottom: 0;
}
#hand .carte .pouvoir {
/*display: none;*/
}
#hand .carte .nom,
#hand .carte .phase,
#hand .carte .numero {
font-size: 0.8em;
}
#hand .carte .jetons span{
width: 3vh;
height: 3vh;
}
#hand .objects-container ul{
position: relative;
width: 100%;
height: 100%;
list-style: none;
}
#hand .objects-container .jeton.artemia, #hand .objects-container .pawn1{
top: 30%;
left: 50%;
}
#hand .objects-container .jeton.cible, #hand .objects-container .pawn2{
top: 65%;
left: 25%;
}
#hand .objects-container .jeton.creature, #hand .objects-container .pawn3{
top: 65%;
left: 75%;
}
#hand .objects-container li{
position: absolute;
width: 30%;
padding-bottom: 30%;
transform: translate(-50%, -50%);
}
#hand .objects-container .jeton{
background-color: white;
border: 2px solid black;
border-radius: 100%;
}
#hand .objects-container .jeton span{
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
width: 80%;
height: 80%;
}
#hand .objects-container .jeton.artemia span{
background-image: url(../../assets/img/jetons/jeton-planete.svg);
}
#hand .objects-container .jeton.jeton.creature span{
background-image: url(../../assets/img/jetons/jeton-creature.svg);
}
#hand .objects-container .jeton.cible span{
background-image: url(../../assets/img/jetons/jeton-cible.svg);
}
#hand .objects-container .willingness li{
background-color: #EA2027;
}
\ No newline at end of file
<div id="hand">
<div class="objects-container">
<ul *ngIf="hand.pawnWillingness > -1" class="willingness">
<li *ngFor="let item of [].constructor(hand.pawnWillingness);let number = index" [class] = "'pawn'+(number+1)"></li>
</ul>
<ul *ngIf="hand.pawnWillingness < 1" class="jetons">
<li *ngFor="let jeton of hand.jetons" [class] = "'jeton ' + jeton"><span></span></li>
</ul>
</div>
<div class="cards-container">
<app-card *ngFor="let card of hand.placecards" [card]="card"></app-card>
<app-card *ngFor="let card of hand.survivalcards" [card]="card"></app-card>
<app-card *ngFor="let card of hand.trackingcards" [card]="card"></app-card>
</div>
</div>
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HandComponent } from './hand.component';
describe('HandComponent', () => {
let component: HandComponent;
let fixture: ComponentFixture<HandComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HandComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HandComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { Hand } from '../hand';
@Component({
selector: 'app-hand',
templateUrl: './hand.component.html',
styleUrls: ['./hand.component.css'],
encapsulation: ViewEncapsulation.None // Use to disable CSS Encapsulation for this component
})
export class HandComponent implements OnInit {
@Input() hand : Hand;
constructor() { }
ngOnInit() {
}
}
import {Card} from './card';
import { Hand } from './hand';
import { Planet } from './planet';
import { Reserve } from './reserve';
......@@ -27,6 +28,9 @@ export const HIDDEN_PLACE : Card = {name : "", type : "PLACE", description : "",
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 MAGNETISME : Card = {name : "Magnétisme", type : "TRACKING", description : "Lorem ipsum", number : -1, color : "", url : "", phase : "Phase 2", symbols : ["cible"]};
export const UBIQUITE : Card = {name : "Ubiquité", type : "TRACKING", description : "Lorem ipsum", number : -1, color : "", url : "", phase : "Phase 2", symbols : ["artemia", "cible"]};
export const RESISTANCE : Card = {name : "Résistance", type : "SURVIVAL", description : "Lorem ipsum", number : -1, color : "", url : "", phase : "Phase 1", symbols : []};
......@@ -48,4 +52,20 @@ export const RESERVE_MOCK : Reserve = {
{card : SOURCE, number : 0},
{card : ARTEFACT, number : 3},
]
}
export const HAND_TRAQUE_MOCK : Hand = {
placecards : [ANTRE, JUNGLE, RIVIERE, PLAGE, ROVER, MARAIS, ABRI, EPAVE, SOURCE, ARTEFACT],
survivalcards : [RESISTANCE],
trackingcards : [],
pawnWillingness : 3,
jetons : []
}
export const HAND_CREATURE_MOCK : Hand = {
placecards : [],
survivalcards : [],
trackingcards : [UBIQUITE, MAGNETISME, ACHARNEMENT],
pawnWillingness : -1,
jetons : ["artemia", "cible", "creature"]
}
\ No newline at end of file
......@@ -31,4 +31,8 @@
#reserve .carte .nom {
font-size: 0.8em;
}
#reserve .carte .numero {
font-size: 0.8em;
}
\ No newline at end of file
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