Impaczus/2048
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add win condition

Browse Source
This commit is contained in:
Gabriele Cirulli
2014-03-09 23:43:56 +01:00
parent 4b3055fcd0
commit e65111f13b
4 changed files with 48 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style/main.css
+8 -3
View File
@@ -53,7 +53,7 @@ h1.title {
position: relative;
float: right;
background: #bbada0;
padding: 15px 30px;
padding: 15px 20px;
font-size: 25px;
height: 25px;
line-height: 47px;
@@ -143,13 +143,12 @@ hr {
width: 500px;
height: 500px;
box-sizing: border-box; }
.game-container.game-over:after {
.game-container.game-over:after, .game-container.game-won:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "Game over!";
display: block;
background: rgba(238, 228, 218, 0.5);
text-align: center;
@@ -162,6 +161,12 @@ hr {
-moz-animation: fade-in 800ms ease 1200ms;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both; }
.game-container.game-over:after {
content: "Game over!"; }
.game-container.game-won:after {
content: "You win!";
background: rgba(237, 194, 46, 0.5);
color: #f9f6f2; }
.grid-container {
position: absolute;
style/main.scss
+29 -18
View File
@@ -64,7 +64,7 @@ h1.title {
position: relative;
float: right;
background: $game-container-background;
padding: 15px 30px;
padding: 15px 20px;
font-size: $height;
height: $height;
line-height: $height + 22px;
@@ -156,24 +156,35 @@ hr {
height: $field-width;
box-sizing: border-box;
&.game-over:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "Game over!";
display: block;
background: rgba($tile-color, .5);
text-align: center;
height: $field-width;
line-height: $field-width;
z-index: 100;
font-size: 60px;
font-weight: bold;
&.game-over, &.game-won {
&:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
background: rgba($tile-color, .5);
text-align: center;
height: $field-width;
line-height: $field-width;
z-index: 100;
font-size: 60px;
font-weight: bold;
@include animation(fade-in 800ms ease $transition-speed * 12);
@include animation-fill-mode(both);
@include animation(fade-in 800ms ease $transition-speed * 12);
@include animation-fill-mode(both);
}
}
&.game-over:after {
content: "Game over!";
}
&.game-won:after {
content: "You win!";
background: rgba($tile-gold-color, .5);
color: $bright-text-color;
}
}