improve game graph design

src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css

@@ -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: -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, 1) 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, 1) 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: bolder 25px 'Changa One', cursive;
-    font-size: 25px;
+    letter-spacing: 5px;
     text-transform: uppercase;
     text-align: center;
-    padding: 5px 5px 25px 5px;
+    padding: 6px 5px 20px 5px;
-    margin-bottom: 50px;
+    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: -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, 1) 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, 1) 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: -moz-linear-gradient(top, rgba(0, 0, 0, 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: -webkit-linear-gradient(top, rgba(0, 0, 0, 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: 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;
+    -webkit-animation: bubbleLeftMine 750ms cubic-bezier(.36, .07, .19, .97) both;
-    animation: bubbleLeftMine 500ms 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;
 }

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

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

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

@@ -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">

src/Mine/SeekerBundle/Resources/views/Game/play.html.twig

@@ -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() }}