Commit 957c14ce authored by Corentin Guillevic's avatar Corentin Guillevic
Browse files

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

parent 463334e4
......@@ -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
......@@ -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,
......
#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;
}
This diff is collapsed.
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();
});
});
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;
}
}
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
.carte_container{
position: relative;
width: 100%;
height: 100%;
}
\ No newline at end of file
<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
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();
});
});
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() {
}
}
.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
<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>
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() {
}
}
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
<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
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();
});
});
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 {