SplendidBear-Websites/MineSeeker
Private
Public Access
1
0
Fork 0
Code Pull Requests 1 Releases Activity

improve game graph design

Browse Source
This commit is contained in:
Root
2016-11-07 22:39:52 +01:00
parent c2e643671b
commit d797012d51
8 changed files with 65 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/Jotunheimr/UserBundle/Resources/public/images/landscape-1.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.3 MiB

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
src/Jotunheimr/UserBundle/Resources/public/images/landscape-2.jpeg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.6 MiB

After

Width:  |  Height:  |  Size: 513 KiB

BIN
src/Jotunheimr/UserBundle/Resources/public/images/landscape-3.jpeg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
src/Jotunheimr/UserBundle/Resources/public/images/landscape-4.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

83
src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css
View File

@@ -1,6 +1,12 @@
@import 'https://fonts.googleapis.com/css?family=Open+Sans:700';
/*@import 'https://fonts.googleapis.com/css?family=Open+Sans:700';*/
@import url('https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:700');
@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css';
body {
background: url("/bundles/mineseeker/images/bg-mineseeker-outbg.jpg") no-repeat center center;
background-size: cover;
}
.clear {
clear: both
}
@@ -71,7 +77,7 @@
}
#mine-wrapper .game-wrapper .users {
width: 200px;
width: 180px;
padding: 0 10px 0 0;
}
@@ -105,20 +111,22 @@
}
#mine-wrapper .game-wrapper .users .user-container .user-header {
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 39%, rgba(255, 255, 255, 0.21) 87%, rgba(0, 0, 0, 0) 100%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 39%, rgba(255, 255, 255, 0.21) 87%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 39%, rgba(255, 255, 255, 0.21) 87%, rgba(0, 0, 0, 0) 100%);
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 39%, rgba(255, 255, 255, 0.21) 87%, rgba(0, 0, 0, 0) 100%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 39%, rgba(255, 255, 255, 0.21) 87%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 39%, rgba(255, 255, 255, 0.21) 87%, rgba(0, 0, 0, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00000000', GradientType=0);
position: relative;
font-weight: bolder;
font-size: 25px;
font: bolder 25px 'Changa One', cursive;
letter-spacing: 5px;
text-transform: uppercase;
text-align: center;
padding: 5px 5px 25px 5px;
margin-bottom: 50px;
padding: 6px 5px 20px 5px;
margin-bottom: 40px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-text-shadow: 1px 1px 0 #FFF;
text-shadow: 1px 1px 0 #FFF;
}
#mine-wrapper .game-wrapper .users .user-container.user-blue .user-header {
@@ -175,6 +183,7 @@
}
#mine-wrapper .game-wrapper .users .user-container .user-name {
min-height: 30px;
font-weight: normal;
text-align: center;
white-space: nowrap;
@@ -198,8 +207,10 @@
}
#mine-wrapper .game-wrapper .users .user-container .user-caret {
height: 35px;
font-size: 35px;
text-align: center;
line-height: 15px;
}
#mine-wrapper .game-wrapper .users .user-container.user-blue .user-caret > i {
@@ -210,10 +221,14 @@
color: #fdf612;
}
#mine-wrapper .game-wrapper .users .user-container .user-desc {
height: 60px;
}
#mine-wrapper .game-wrapper .users .user-container .user-control {
background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(125, 185, 232, 0) 100%);
background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(125, 185, 232, 0) 100%);
background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(125, 185, 232, 0) 100%);
background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.5) 0%, rgba(125, 185, 232, 0) 100%);
background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.5) 0%, rgba(125, 185, 232, 0) 100%);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(125, 185, 232, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#007db9e8', GradientType=1);
position: relative;
padding: 5px;
@@ -238,7 +253,7 @@
background: #FFFFFF;
font-size: 25px;
text-align: center;
width: 50px;
width: 45px;
height: 35px;
margin-left: 25px;
margin-top: 5px;
@@ -258,7 +273,7 @@
#mine-wrapper .game-wrapper .users .user-container .user-control .bomb-container {
display: inline-block;
float: right;
width: 75px;
width: 65px;
height: 45px;
border: 1px solid #000;
@@ -394,15 +409,15 @@
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#464942', endColorstr='#605961', GradientType=0);
position: relative;
width: 95%;
height: 70px;
height: 50px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
font-size: 22px;
text-transform: uppercase;
text-align: center;
line-height: 65px;
line-height: 45px;
border: 3px solid #484742;
color: #FFFFFF;
color: #fff;
margin: 10px auto 0 auto;
cursor: pointer;
@@ -513,32 +528,33 @@
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcfc', endColorstr='#006a6a6a', GradientType=1);
background-repeat: no-repeat;
background-position: center center;
background-size: 85% 100%;
background-size: 72% 179%;
position: relative;
height: 30px;
}
#mine-wrapper .game-wrapper .users .active-mines-container i {
font-size: 35px;
font-size: 27px;
color: #b1b1b3;
margin-top: 3px;
text-shadow: 0 0 3px #000000;
}
#mine-wrapper .game-wrapper .users .active-mines-container i:first-child {
float: left;
margin-left: 25px;
margin-left: 20px;
}
#mine-wrapper .game-wrapper .users .active-mines-container i:last-child {
float: right;
margin-right: 25px;
margin-right: 20px;
}
#mine-wrapper .game-wrapper .users .active-mines-container .active-mines {
background: -moz-linear-gradient(top, rgba(62, 63, 65, 1) 0%, rgba(135, 136, 131, 1) 100%);
background: -webkit-linear-gradient(top, rgba(62, 63, 65, 1) 0%, rgba(135, 136, 131, 1) 100%);
background: linear-gradient(to bottom, rgba(62, 63, 65, 1) 0%, rgba(135, 136, 131, 1) 100%);
background: -moz-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(135, 136, 131, 1) 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(135, 136, 131, 1) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(135, 136, 131, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3e3f41', endColorstr='#878883', GradientType=0);
position: absolute;
width: 50px;
@@ -550,7 +566,7 @@
line-height: 39px;
text-align: center;
color: #FFFFFF;
border: 5px solid #38383a;
border: 5px solid #000000;
margin-left: -25px;
z-index: 100;
@@ -560,8 +576,8 @@
}
#mine-wrapper .game-wrapper .users .active-mines-container .active-mines.found-mine {
-webkit-animation: bubbleLeftMine 500ms cubic-bezier(.36, .07, .19, .97) both;
animation: bubbleLeftMine 500ms cubic-bezier(.36, .07, .19, .97) both;
-webkit-animation: bubbleLeftMine 750ms cubic-bezier(.36, .07, .19, .97) both;
animation: bubbleLeftMine 750ms cubic-bezier(.36, .07, .19, .97) both;
}
@keyframes bubbleLeftMine {
@@ -570,6 +586,7 @@
transform: scale(1);
}
50% {
border-color: #2e3337;
-webkit-transform: scale(2);
transform: scale(2);
}
@@ -587,9 +604,9 @@
position: absolute;
top: 0;
left: 50%;
width: 25px;
width: 30px;
height: 20px;
margin-left: -12.5px;
margin-left: -14.5px;
z-index: 101;
@@ -619,6 +636,14 @@
cursor: none;
}
#mine-wrapper .grid-container {
background: #4E4E4E;
padding: 15px 10px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#mine-wrapper .grid .field-wrapper {
position: relative;
}

2
src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js
View File

@@ -413,8 +413,10 @@ class GridControl extends React.Component {
</div>
<UserControl ref="userControl"
bombClear={this.bombClear.bind(this)}/>
<div className="grid-container">
<div className="grid"> {grid} </div>
</div>
</div>
);
}
}

1
src/Mine/SeekerBundle/Resources/public/js/mine-seeker/user/user.js
View File

@@ -57,6 +57,7 @@ class User extends React.Component {
</div>
<div className="user-name"> {this.state.name} </div>
<div className="user-caret"><i className="fa fa-caret-down"></i></div>
<div className="user-desc"></div>
<div className="user-control">
<img src={this.getSrc(this.props.color)} alt="flag"/>
<div className="user-control-mines">

14
src/Mine/SeekerBundle/Resources/views/Game/play.html.twig
View File

@@ -1,12 +1,5 @@
{% extends '::base.html.twig' %}
{% block stylesheets %}
{% stylesheets filter='cssrewrite'
'@MineSeekerBundle/Resources/public/css/style.mineseeker.css' %}
<link rel="stylesheet" media="screen" href="{{ asset_url }}" type="text/css"/>
{% endstylesheets %}
{% endblock %}
{% block body %}
<div id="mine-wrapper"
data-env="{{ env }}"
@@ -14,6 +7,13 @@
</div>
{% endblock %}
{% block stylesheets %}
{% stylesheets filter='cssrewrite'
'@MineSeekerBundle/Resources/public/css/style.mineseeker.css' %}
<link rel="stylesheet" media="screen" href="{{ asset_url }}" type="text/css"/>
{% endstylesheets %}
{% endblock %}
{% block javascripts %}
{{ parent() }}
{{ ws_client() }}