diff --git a/src/Jotunheimr/UserBundle/Resources/public/images/landscape-1.jpg b/src/Jotunheimr/UserBundle/Resources/public/images/landscape-1.jpg index 636648e..4e6ee1c 100644 Binary files a/src/Jotunheimr/UserBundle/Resources/public/images/landscape-1.jpg and b/src/Jotunheimr/UserBundle/Resources/public/images/landscape-1.jpg differ diff --git a/src/Jotunheimr/UserBundle/Resources/public/images/landscape-2.jpeg b/src/Jotunheimr/UserBundle/Resources/public/images/landscape-2.jpeg index 0355ea4..b6b7122 100644 Binary files a/src/Jotunheimr/UserBundle/Resources/public/images/landscape-2.jpeg and b/src/Jotunheimr/UserBundle/Resources/public/images/landscape-2.jpeg differ diff --git a/src/Jotunheimr/UserBundle/Resources/public/images/landscape-3.jpeg b/src/Jotunheimr/UserBundle/Resources/public/images/landscape-3.jpeg index 4fb7075..4c53e61 100644 Binary files a/src/Jotunheimr/UserBundle/Resources/public/images/landscape-3.jpeg and b/src/Jotunheimr/UserBundle/Resources/public/images/landscape-3.jpeg differ diff --git a/src/Jotunheimr/UserBundle/Resources/public/images/landscape-4.jpg b/src/Jotunheimr/UserBundle/Resources/public/images/landscape-4.jpg index 2a35e39..d15ed2c 100644 Binary files a/src/Jotunheimr/UserBundle/Resources/public/images/landscape-4.jpg and b/src/Jotunheimr/UserBundle/Resources/public/images/landscape-4.jpg differ diff --git a/src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css b/src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css index f6fd510..785362f 100644 --- a/src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css +++ b/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: -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; } diff --git a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js index c88e296..39c7ca7 100644 --- a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js +++ b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js @@ -413,7 +413,9 @@ class GridControl extends React.Component { -
{grid}
+
+
{grid}
+
); } diff --git a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/user/user.js b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/user/user.js index 6a1d82b..385fe9a 100644 --- a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/user/user.js +++ b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/user/user.js @@ -57,6 +57,7 @@ class User extends React.Component {
{this.state.name}
+
flag
diff --git a/src/Mine/SeekerBundle/Resources/views/Game/play.html.twig b/src/Mine/SeekerBundle/Resources/views/Game/play.html.twig index c69e827..d67dcea 100644 --- a/src/Mine/SeekerBundle/Resources/views/Game/play.html.twig +++ b/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' %} - - {% endstylesheets %} -{% endblock %} - {% block body %}
{% endblock %} +{% block stylesheets %} + {% stylesheets filter='cssrewrite' + '@MineSeekerBundle/Resources/public/css/style.mineseeker.css' %} + + {% endstylesheets %} +{% endblock %} + {% block javascripts %} {{ parent() }} {{ ws_client() }}