Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Corentin GUILLEVIC
Not Alone
Commits
957c14ce
Commit
957c14ce
authored
Dec 14, 2020
by
Corentin Guillevic
Browse files
Add component card, place-card, survival-card, traque-card and board
parent
463334e4
Changes
30
Expand all
Hide whitespace changes
Inline
Side-by-side
not-alone-web/src/app/app.component.css
View file @
957c14ce
...
...
@@ -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%
,
1
fr
));
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
not-alone-web/src/app/app.module.ts
View file @
957c14ce
...
...
@@ -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
,
...
...
not-alone-web/src/app/board/board.component.css
0 → 100644
View file @
957c14ce
#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
;
}
not-alone-web/src/app/board/board.component.html
0 → 100644
View file @
957c14ce
This diff is collapsed.
Click to expand it.
not-alone-web/src/app/board/board.component.spec.ts
0 → 100644
View file @
957c14ce
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
();
});
});
not-alone-web/src/app/board/board.component.ts
0 → 100644
View file @
957c14ce
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
;
}
}
not-alone-web/src/app/card.ts
0 → 100644
View file @
957c14ce
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
not-alone-web/src/app/card/card.component.css
0 → 100644
View file @
957c14ce
.carte_container
{
position
:
relative
;
width
:
100%
;
height
:
100%
;
}
\ No newline at end of file
not-alone-web/src/app/card/card.component.html
0 → 100644
View file @
957c14ce
<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
not-alone-web/src/app/card/card.component.spec.ts
0 → 100644
View file @
957c14ce
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
();
});
});
not-alone-web/src/app/card/card.component.ts
0 → 100644
View file @
957c14ce
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
()
{
}
}
not-alone-web/src/app/game/game.component.css
View file @
957c14ce
.card-container
{
position
:
fixed
;
width
:
50%
;
height
:
50%
;
left
:
50%
;
top
:
50%
;
transform
:
translate
(
-50%
,
-50%
);
display
:
grid
;
grid-template-columns
:
repeat
(
3
,
1
fr
);
}
\ No newline at end of file
not-alone-web/src/app/game/game.component.html
View file @
957c14ce
<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>
not-alone-web/src/app/game/game.component.ts
View file @
957c14ce
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
()
{
}
}
not-alone-web/src/app/mock-card.ts
0 → 100644
View file @
957c14ce
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
not-alone-web/src/app/place-card/place-card.component.css
0 → 100644
View file @
957c14ce
not-alone-web/src/app/place-card/place-card.component.html
0 → 100644
View file @
957c14ce
<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
not-alone-web/src/app/place-card/place-card.component.spec.ts
0 → 100644
View file @
957c14ce
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
();
});
});
not-alone-web/src/app/place-card/place-card.component.ts
0 → 100644
View file @
957c14ce
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
{
@
Input
()
card
:
Card
;
constructor
()
{
}
ngOnInit
()
{
}
}
not-alone-web/src/app/room/room.component.css
View file @
957c14ce
#room
{
width
:
100%
;