Commit 67ae7602 authored by Corentin Guillevic's avatar Corentin Guillevic
Browse files

Add PlayerService (service) ; Add Status and PlayersInformation component

parent 4758f342
......@@ -17,6 +17,7 @@ import { PlanetComponent } from './planet/planet.component';
import { ReserveComponent } from './reserve/reserve.component';
import { HandComponent } from './hand/hand.component';
import { StatusComponent } from './status/status.component';
import { PlayersInformationComponent } from './players-information/players-information.component';
@NgModule({
declarations: [
......@@ -34,7 +35,8 @@ import { StatusComponent } from './status/status.component';
PlanetComponent,
ReserveComponent,
HandComponent,
StatusComponent
StatusComponent,
PlayersInformationComponent
],
imports: [
BrowserModule,
......
......@@ -13,9 +13,7 @@ export class BoardComponent implements OnInit {
constructor() {
}
ngOnInit() {
console.log(this.score);
}
ngOnInit() { }
setScore(score : Score) : void{
this.score = score;
......
......@@ -7,4 +7,19 @@
transform: translateX(-50%);
display: grid;
grid-template-columns: repeat(3, 1fr);
}
#open-players-information{
position: fixed;
top: 60%;
left: 0%;
width: 10%;
border: 2px solid white;
text-align: center;
padding: 1% 2%;
}
#open-players-information:hover{
cursor: pointer;
}
\ No newline at end of file
......@@ -2,4 +2,8 @@
<app-planet [planet]="planet"></app-planet>
<app-reserve [reserve]="reserve"></app-reserve>
<app-hand [hand]="hand"></app-hand>
<app-status [phase]="'2'" [responses]="['Ok', 'KO']"></app-status>
\ No newline at end of file
<app-status [phase]="phase" [responses]="messages"></app-status>
<app-players-information *ngIf="playersInformationOpen" [playersInformation]="playersInformation" [closeFunction]="closePlayersInformation()"></app-players-information>
<div id="open-players-information" (click)="openPlayersInformation()">
<p>See players information</p>
</div>
\ No newline at end of file
import { Component, OnInit } from '@angular/core';
import { Card } from '../card';
import { Hand } from '../hand';
import { ANGOISSE, ANTRE, HAND_CREATURE_MOCK, HAND_TRAQUE_MOCK, PLANET_MOCK, RESERVE_MOCK, RESISTANCE, SCORE_MOCK } from '../mock-card';
import { ANGOISSE, ANTRE, HAND_CREATURE_MOCK, HAND_TRAQUE_MOCK, PLANET_MOCK, PLAYERS_INFORMATION_MOCK, RESERVE_MOCK, RESISTANCE, SCORE_MOCK } from '../mock-card';
import { Planet } from '../planet';
import { PlayerService } from '../player.service';
import { PlayerInformation } from '../players-information';
import { Reserve } from '../reserve';
import { Score } from '../score';
@Component({
......@@ -17,30 +18,54 @@ export class GameComponent implements OnInit {
planet : Planet;
reserve : Reserve;
hand : Hand;
phase : string;
messages : string[];
playersInformation : PlayerInformation;
playersInformationOpen : boolean;
constructor(private playerService : PlayerService) { }
ngOnInit() {
console.log(this.playerService);
this.getScore();
this.getPlanet();
this.getReserve();
this.getHand();
this.getPhase();
this.getMessages();
this.playersInformationOpen = false;
this.playersInformation = PLAYERS_INFORMATION_MOCK;
}
getScore() : void {
this.score = this.playerService.getScore();
this.playerService.getScore().subscribe(score => this.score = score);
}
getPlanet() : void {
this.planet = this.playerService.getPlanet();
this.playerService.getPlanet().subscribe(planet => this.planet = planet);
}
getReserve() : void {
this.reserve = this.playerService.getReserve();
this.playerService.getReserve().subscribe(reserve => this.reserve = reserve);
}
getHand() : void {
this.hand = this.playerService.getHand();
this.playerService.getHand().subscribe(hand => this.hand = hand);
}
}
getPhase() : void {
this.playerService.getPhase().subscribe(phase => this.phase = phase);
}
getMessages() : void {
this.playerService.getMessages().subscribe(messages => this.messages = messages);
}
closePlayersInformation() : void {
this.playersInformationOpen = false;
}
openPlayersInformation() : void {
this.playersInformationOpen = true;
}
}
import {Card} from './card';
import { Hand } from './hand';
import { Planet } from './planet';
import { PlayerInformation } from './players-information';
import { Reserve } from './reserve';
import { Score } from './score';
......@@ -71,4 +72,17 @@ export const HAND_CREATURE_MOCK : Hand = {
jetons : ["artemia", "cible", "creature"]
}
export const SCORE_MOCK : Score = {traque : 18, creature : 2, disposition : "FRONT"}
\ No newline at end of file
export const SCORE_MOCK : Score = {traque : 18, creature : 2, disposition : "FRONT"}
export const PLAYERS_INFORMATION_MOCK : PlayerInformation = {
creature : {name : 'Bill', visibleCards : [UBIQUITE], hiddenTrackingCardNumber : 2, jetons : ['artemia', 'cible', 'creature']},
traques : [
{name : 'Jean', visibleCards : [ANTRE], hiddenPlaceCardNumber : 3, defausse : [PLAGE], hiddenSurvivalCardNumber : 1, numberPionVolonte : 3},
{name : 'Pierre', visibleCards : [PLAGE], hiddenPlaceCardNumber : 3, defausse : [PLAGE], hiddenSurvivalCardNumber : 1, numberPionVolonte : 3},
{name : 'Paul', visibleCards : [ROVER], hiddenPlaceCardNumber : 3, defausse : [PLAGE], hiddenSurvivalCardNumber : 1, numberPionVolonte : 3},
{name : 'Jacques', visibleCards : [ANTRE, RESISTANCE], hiddenPlaceCardNumber : 3, defausse : [PLAGE], hiddenSurvivalCardNumber : 0, numberPionVolonte : 2},
{name : 'Mireille', visibleCards : [ARTEFACT], hiddenPlaceCardNumber : 3, defausse : [PLAGE], hiddenSurvivalCardNumber : 1, numberPionVolonte : 1},
{name : 'Mathilde', visibleCards : [ANTRE], hiddenPlaceCardNumber : 1, defausse : [JUNGLE, RIVIERE, PLAGE], hiddenSurvivalCardNumber : 1, numberPionVolonte : 3},
]
}
\ No newline at end of file
......@@ -10,11 +10,17 @@ nav {
top: 0;
right: 0;
z-index: 500;
-webkit-transition : all 0.3s;
transition : all 0.3s;
}
nav.close {
transform: translateX(100%);
}
/*Button*/
nav .button{
#nav-button{
position: fixed;
top: 2%;
right: 2%;
......@@ -25,15 +31,15 @@ nav .button{
transition : all 0.3s;
}
nav .button.close{
#nav-button.close{
right: 10%;
}
nav .button:hover{
#nav-button:hover{
cursor: pointer;
}
nav .button span{
#nav-button span{
position: absolute;
top: 50%;
transform: translateY(-50%);
......@@ -44,7 +50,7 @@ nav .button span{
transition : all 0.3s;
}
nav .button span::before, nav .button span::after{
#nav-button span::before, #nav-button span::after{
content: "";
display: block;
position: absolute;
......@@ -55,37 +61,37 @@ nav .button span::before, nav .button span::after{
transition : all 0.3s;
}
nav .button span::before{
#nav-button span::before{
bottom: -180%;
}
nav .button span::after{
#nav-button span::after{
top: -180%;
}
nav .button:hover span::before{
#nav-button:hover span::before{
bottom: -220%;
}
nav .button:hover span::after{
#nav-button:hover span::after{
top: -220%;
}
nav .button.close span {
#nav-button.close span {
background-color: rgba(0,0,0,0);
}
nav .button.close span::before {
#nav-button.close span::before {
transform: rotate(-45deg);
bottom: 0;
}
nav .button.close span::after {
#nav-button.close span::after {
transform: rotate(45deg);
top: 0;
}
nav .button.close:hover span::before, nav .button.close:hover span::after{
#nav-button.close:hover span::before, #nav-button.close:hover span::after{
background-color: #d63031;
}
......@@ -99,9 +105,6 @@ nav .menu{
-webkit-transition : all 0.3s;
transition : all 0.3s;
}
nav .menu.close {
transform: translateX(100%);
}
nav .menu ul{
position: absolute;
......
<nav>
<div [className]="open ? 'button close' : 'button'" (click)="click()">
<span></span>
</div>
<div [className]="open ? 'menu' : 'menu close'" >
<div id="nav-button" [className]="open ? 'button close' : 'button'" (click)="click()">
<span></span>
</div>
<nav [className]="open ? '' : 'close'">
<div class="menu" >
<ul>
<li routerLink=""><p>Home</p></li>
<li routerLink="/room"><p>Room</p></li>
......
......@@ -17,15 +17,23 @@ export class PlayerService {
return of(SCORE_MOCK);
}
getPlanet() : Planet {
return PLANET_MOCK;
getPlanet() : Observable<Planet> {
return of(PLANET_MOCK);
}
getReserve() : Reserve {
return RESERVE_MOCK;
getReserve() : Observable<Reserve> {
return of(RESERVE_MOCK);
}
getHand() : Hand {
return HAND_TRAQUE_MOCK;
}
getHand() : Observable<Hand> {
return of(HAND_TRAQUE_MOCK);
}
getPhase() : Observable<string> {
return of('Phase 2');
}
getMessages() : Observable<string[]> {
return of(['ok', 'ko']);
}
}
import { Card } from "./card";
export interface TraqueInformation {
name : string;
visibleCards : Card[];
hiddenPlaceCardNumber : number;
defausse : Card[];
hiddenSurvivalCardNumber : number;
numberPionVolonte : number;
}
export interface CreatureInformation {
name : string,
visibleCards : Card[],
hiddenTrackingCardNumber : number,
jetons : string[]
}
export interface PlayerInformation{
creature : CreatureInformation,
traques : TraqueInformation[]
}
\ No newline at end of file
#players-information {
position: fixed;
width: 80%;
height: 80%;
background-color: rgba(60, 62, 80, 0.7);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 500;
}
#players-information .close-button{
position: absolute;
width: 8%;
padding-bottom: 8%;
background-color: red;
}
#players-information .content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
height: 90%;
}
#players-information .traques-ul{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
}
\ No newline at end of file
<div id="players-information">
<span class="close-button" (click)="close()"></span>
<div class="content">
<div class="traques">
<p>Traqués</p>
<ul class="traques-ul">
<li class="traque" *ngFor="let traque of playersInformation.traques">
<p>{{traque.name}}</p>
<ul class="visible-cards">
Visible cards :
<li *ngFor="let card of traque.visibleCards">{{card.name}}</li>
</ul>
<ul class="defausse-cards">
Defausse :
<li *ngFor="let card of traque.defausse">{{card.name}}</li>
</ul>
<p>Hidden place cards : {{traque.hiddenPlaceCardNumber}}</p>
<p>Hidden survival cards : {{traque.hiddenSurvivalCardNumber}}</p>
<p>Number pawn Willingness: {{traque.numberPionVolonte}}</p>
</li>
</ul>
</div>
<div class="creature">
<p>Créature</p>
<p>{{playersInformation.creature.name}}</p>
<p>Hidden tracking cards : {{playersInformation.creature.hiddenTrackingCardNumber}}</p>
<ul class="visible-cards">
<li *ngFor="let card of playersInformation.creature.visibleCards">{{card.name}}</li>
</ul>
<ul class="jetons">
<li *ngFor="let jeton of playersInformation.creature.jetons">{{jeton}}</li>
</ul>
</div>
</div>
</div>
\ No newline at end of file
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PlayersInformationComponent } from './players-information.component';
describe('PlayersInformationComponent', () => {
let component: PlayersInformationComponent;
let fixture: ComponentFixture<PlayersInformationComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PlayersInformationComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PlayersInformationComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, Input, OnInit, Output } from '@angular/core';
import { EventEmitter } from 'events';
import { PlayerInformation } from '../players-information';
@Component({
selector: 'app-players-information',
templateUrl: './players-information.component.html',
styleUrls: ['./players-information.component.css']
})
export class PlayersInformationComponent implements OnInit {
@Input()playersInformation : PlayerInformation;
@Input('closeFunction') closeFunction;
constructor() { }
ngOnInit() {
}
close() {
this.closeFunction();
}
}
<div id="status">
<p class="phase">Phase {{phase}}</p>
<p class="phase">{{phase}}</p>
<div class="message-container">
<ul>
<li *ngFor="let response of responses">{{response}}</li>
......
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