improve game && start sound creating

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

@@ -1,4 +1,9 @@
 @import 'https://fonts.googleapis.com/css?family=Open+Sans:700';
+@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css';
+
+.clear {
+    clear: both
+}
 
 #mine-wrapper,
 #mine-wrapper * {
@@ -6,6 +11,556 @@
     box-sizing: border-box;
 }
 
+#mine-wrapper {
+    background: #000;
+    display: table;
+    width: 842px;
+    padding: 10px;
+    margin: 0 auto;
+
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+}
+
+#mine-wrapper .game-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+}
+
+#mine-wrapper .game-wrapper .users {
+    width: 200px;
+    padding: 0 10px 0 0;
+}
+
+#mine-wrapper .game-wrapper .users .user-container {
+    background: #FFFFFF;
+    height: 40%;
+    font-family: 'Open Sans', sans-serif;
+    padding: 5px;
+    margin: 5px;
+
+    z-index: 99;
+
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+}
+
+#mine-wrapper .game-wrapper .users .user-container.user-blue {
+    background: rgb(35, 111, 135);
+    background: -moz-linear-gradient(top, rgba(35, 111, 135, 1) 0%, rgba(149, 207, 245, 1) 100%);
+    background: -webkit-linear-gradient(top, rgba(35, 111, 135, 1) 0%, rgba(149, 207, 245, 1) 100%);
+    background: linear-gradient(to bottom, rgba(35, 111, 135, 1) 0%, rgba(149, 207, 245, 1) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#236f87', endColorstr='#95cff5', GradientType=0);
+}
+
+#mine-wrapper .game-wrapper .users .user-container.user-red {
+    background: rgb(173, 10, 5);
+    background: -moz-linear-gradient(top, rgba(173, 10, 5, 1) 0%, rgba(246, 125, 82, 1) 100%);
+    background: -webkit-linear-gradient(top, rgba(173, 10, 5, 1) 0%, rgba(246, 125, 82, 1) 100%);
+    background: linear-gradient(to bottom, rgba(173, 10, 5, 1) 0%, rgba(246, 125, 82, 1) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ad0a05', endColorstr='#f67d52', GradientType=0);
+}
+
+#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%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00000000', GradientType=0);
+    position: relative;
+    font-weight: bolder;
+    font-size: 25px;
+    text-transform: uppercase;
+    text-align: center;
+    padding: 5px 5px 25px 5px;
+    margin-bottom: 50px;
+
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+}
+
+#mine-wrapper .game-wrapper .users .user-container.user-blue .user-header {
+    color: #236f87;
+}
+
+#mine-wrapper .game-wrapper .users .user-container.user-red .user-header {
+    color: #AD0A05;
+}
+
+#mine-wrapper .game-wrapper .users .user-container .user-header > img {
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    width: 40%;
+    margin-left: -20%;
+    margin-bottom: -25%;
+}
+
+#mine-wrapper .game-wrapper .users .user-container .user-header > img.user-cursor {
+    display: block;
+    width: 30%;
+    top: 20px;
+    left: 10px;
+    margin-left: 0;
+
+    -webkit-animation: cursorJumping 1.2s cubic-bezier(.36, .07, .19, .97) infinite;
+    animation: cursorJumping 1.2s cubic-bezier(.36, .07, .19, .97) infinite;
+
+}
+
+#mine-wrapper .game-wrapper .users .user-container .user-header > img.user-cursor::after {
+    content: '';
+    width: 50px;
+    height: 50px;
+    background: #1A6844;
+    animation: animate .5s linear infinite;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 3px;
+}
+
+@keyframes cursorJumping {
+    0% {
+        top: 15px;
+    }
+    50% {
+        top: 25px;
+    }
+    100% {
+        top: 15px;
+    }
+}
+
+#mine-wrapper .game-wrapper .users .user-container .user-name {
+    font-weight: normal;
+    text-align: center;
+    padding: 3px 0;
+    margin: 0 5px;
+}
+
+#mine-wrapper .game-wrapper .users .user-container.user-blue .user-name {
+    color: #0b3776;
+    border-top: 1px dashed #0b3776;
+    border-bottom: 1px dashed #0b3776;
+}
+
+#mine-wrapper .game-wrapper .users .user-container.user-red .user-name {
+    color: #fdf612;
+    border-top: 1px dashed #fdf612;
+    border-bottom: 1px dashed #fdf612;
+}
+
+#mine-wrapper .game-wrapper .users .user-container .user-caret {
+    font-size: 35px;
+    text-align: center;
+}
+
+#mine-wrapper .game-wrapper .users .user-container.user-blue .user-caret > i {
+    color: #0b3776;
+}
+
+#mine-wrapper .game-wrapper .users .user-container.user-red .user-caret > i {
+    color: #fdf612;
+}
+
+#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%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#007db9e8', GradientType=1);
+    position: relative;
+    padding: 5px;
+
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+}
+
+#mine-wrapper .game-wrapper .users .user-container .user-control > img {
+    position: absolute;
+    width: 55px;
+    left: -5px;
+    bottom: 10px;
+
+    -ms-transform: rotate(-15deg);
+    -webkit-transform: rotate(-15deg);
+    transform: rotate(-15deg);
+}
+
+#mine-wrapper .game-wrapper .users .user-container .user-control .user-control-mines {
+    display: inline-block;
+    background: #FFFFFF;
+    font-size: 25px;
+    text-align: center;
+    width: 50px;
+    height: 35px;
+    margin-left: 25px;
+    margin-top: 5px;
+
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+}
+
+#mine-wrapper .game-wrapper .users .user-container.user-blue .user-control .user-control-mines {
+    color: #1a3955;
+}
+
+#mine-wrapper .game-wrapper .users .user-container.user-red .user-control .user-control-mines {
+    color: #b10000;
+}
+
+#mine-wrapper .game-wrapper .users .user-container .user-control .bomb-container {
+    display: inline-block;
+    float: right;
+    width: 75px;
+    height: 45px;
+    border: 1px solid #000;
+
+    -webkit-border-radius: 7px;
+    border-radius: 7px;
+    -webkit-border-radius: 7px;
+    border-radius: 7px;
+    -webkit-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -moz-osx-font-smoothing: grayscale;
+    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+}
+
+#mine-wrapper .game-wrapper .users .user-container .user-control .bomb-container:hover {
+    -webkit-animation-name: hvr-buzz-out;
+    animation-name: hvr-buzz-out;
+    -webkit-animation-duration: 0.75s;
+    animation-duration: 0.75s;
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+    -webkit-animation-iteration-count: 1;
+    animation-iteration-count: 1;
+}
+
+@-webkit-keyframes hvr-buzz-out {
+    10% {
+        -webkit-transform: translateX(3px) rotate(2deg);
+        transform: translateX(3px) rotate(2deg);
+    }
+    20% {
+        -webkit-transform: translateX(-3px) rotate(-2deg);
+        transform: translateX(-3px) rotate(-2deg);
+    }
+    30% {
+        -webkit-transform: translateX(3px) rotate(2deg);
+        transform: translateX(3px) rotate(2deg);
+    }
+    40% {
+        -webkit-transform: translateX(-3px) rotate(-2deg);
+        transform: translateX(-3px) rotate(-2deg);
+    }
+    50% {
+        -webkit-transform: translateX(2px) rotate(1deg);
+        transform: translateX(2px) rotate(1deg);
+    }
+    60% {
+        -webkit-transform: translateX(-2px) rotate(-1deg);
+        transform: translateX(-2px) rotate(-1deg);
+    }
+    70% {
+        -webkit-transform: translateX(2px) rotate(1deg);
+        transform: translateX(2px) rotate(1deg);
+    }
+    80% {
+        -webkit-transform: translateX(-2px) rotate(-1deg);
+        transform: translateX(-2px) rotate(-1deg);
+    }
+    90% {
+        -webkit-transform: translateX(1px) rotate(0);
+        transform: translateX(1px) rotate(0);
+    }
+    100% {
+        -webkit-transform: translateX(-1px) rotate(0);
+        transform: translateX(-1px) rotate(0);
+    }
+}
+
+@keyframes hvr-buzz-out {
+    10% {
+        -webkit-transform: translateX(3px) rotate(2deg);
+        transform: translateX(3px) rotate(2deg);
+    }
+    20% {
+        -webkit-transform: translateX(-3px) rotate(-2deg);
+        transform: translateX(-3px) rotate(-2deg);
+    }
+    30% {
+        -webkit-transform: translateX(3px) rotate(2deg);
+        transform: translateX(3px) rotate(2deg);
+    }
+    40% {
+        -webkit-transform: translateX(-3px) rotate(-2deg);
+        transform: translateX(-3px) rotate(-2deg);
+    }
+    50% {
+        -webkit-transform: translateX(2px) rotate(1deg);
+        transform: translateX(2px) rotate(1deg);
+    }
+    60% {
+        -webkit-transform: translateX(-2px) rotate(-1deg);
+        transform: translateX(-2px) rotate(-1deg);
+    }
+    70% {
+        -webkit-transform: translateX(2px) rotate(1deg);
+        transform: translateX(2px) rotate(1deg);
+    }
+    80% {
+        -webkit-transform: translateX(-2px) rotate(-1deg);
+        transform: translateX(-2px) rotate(-1deg);
+    }
+    90% {
+        -webkit-transform: translateX(1px) rotate(0);
+        transform: translateX(1px) rotate(0);
+    }
+    100% {
+        -webkit-transform: translateX(-1px) rotate(0);
+        transform: translateX(-1px) rotate(0);
+    }
+}
+
+#mine-wrapper .game-wrapper .users .user-container .user-control .bomb-container .bomb {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    cursor: pointer;
+}
+
+#mine-wrapper .game-wrapper .users .user-container .user-control .bomb-container .bomb img {
+    display: inline-block;
+    height: 100%;
+}
+
+#mine-wrapper .game-wrapper .users .resign {
+    background: rgba(70, 73, 66, 1);
+    background: -moz-linear-gradient(top, rgba(70, 73, 66, 1) 0%, rgba(140, 138, 139, 1) 69%, rgba(96, 89, 97, 1) 100%);
+    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(70, 73, 66, 1)), color-stop(69%, rgba(140, 138, 139, 1)), color-stop(100%, rgba(96, 89, 97, 1)));
+    background: -webkit-linear-gradient(top, rgba(70, 73, 66, 1) 0%, rgba(140, 138, 139, 1) 69%, rgba(96, 89, 97, 1) 100%);
+    background: -o-linear-gradient(top, rgba(70, 73, 66, 1) 0%, rgba(140, 138, 139, 1) 69%, rgba(96, 89, 97, 1) 100%);
+    background: -ms-linear-gradient(top, rgba(70, 73, 66, 1) 0%, rgba(140, 138, 139, 1) 69%, rgba(96, 89, 97, 1) 100%);
+    background: linear-gradient(to bottom, rgba(70, 73, 66, 1) 0%, rgba(140, 138, 139, 1) 69%, rgba(96, 89, 97, 1) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#464942', endColorstr='#605961', GradientType=0);
+    position: relative;
+    width: 95%;
+    height: 70px;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: bold;
+    font-size: 22px;
+    text-transform: uppercase;
+    text-align: center;
+    line-height: 65px;
+    border: 3px solid #484742;
+    color: #FFFFFF;
+    margin: 10px auto 0 auto;
+
+    cursor: pointer;
+
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    -webkit-transition: all 250ms ease-in-out;
+    -moz-transition: all 250ms ease-in-out;
+    -o-transition: all 250ms ease-in-out;
+    transition: all 250ms ease-in-out;
+}
+
+#mine-wrapper .game-wrapper .users .resign:hover {
+    background: rgba(70, 73, 66, 1);
+    color: #FFFFFF;
+
+    -webkit-transition: all 250ms ease-in-out;
+    -moz-transition: all 250ms ease-in-out;
+    -o-transition: all 250ms ease-in-out;
+    transition: all 250ms ease-in-out;
+}
+
+#mine-wrapper .game-wrapper .users .resign.disabled {
+    background: rgba(70, 73, 66, 1);
+    color: #848484;
+
+    cursor: default;
+}
+
+#mine-wrapper .game-wrapper .users .resign.disabled:hover {
+    background: rgba(70, 73, 66, 1);
+    color: #848484;
+}
+
+#mine-wrapper .game-wrapper .users .resign .resign-shine {
+    background: rgba(255, 255, 255, 1);
+    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%);
+    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(0, 0, 0, 0)));
+    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%);
+    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%);
+    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%);
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000', GradientType=0);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 33%;
+
+    opacity: 0.7;
+
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    -webkit-transition: all 250ms ease-in-out;
+    -moz-transition: all 250ms ease-in-out;
+    -o-transition: all 250ms ease-in-out;
+    transition: all 250ms ease-in-out;
+}
+
+#mine-wrapper .game-wrapper .users .resign:hover .resign-shine,
+#mine-wrapper .game-wrapper .users .resign.disabled .resign-shine {
+    display: none;
+
+    -webkit-transition: all 250ms ease-in-out;
+    -moz-transition: all 250ms ease-in-out;
+    -o-transition: all 250ms ease-in-out;
+    transition: all 250ms ease-in-out;
+}
+
+#mine-wrapper .game-wrapper .users .user-container .user-control .bomb-container:hover .bomb img {
+    -webkit-animation-name: hvr-buzz;
+    animation-name: hvr-buzz;
+    -webkit-animation-duration: 0.15s;
+    animation-duration: 0.15s;
+    -webkit-animation-timing-function: linear;
+    animation-timing-function: linear;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+}
+
+#mine-wrapper .game-wrapper .users .user-container .user-control .bomb-container .bomb {
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+}
+
+#mine-wrapper .game-wrapper .users .user-container.user-blue .user-control .bomb-container .bomb {
+    background: rgb(131, 194, 245);
+    background: -moz-linear-gradient(top, rgba(131, 194, 245, 1) 0%, rgba(108, 190, 230, 1) 39%, rgba(221, 255, 252, 1) 100%);
+    background: -webkit-linear-gradient(top, rgba(131, 194, 245, 1) 0%, rgba(108, 190, 230, 1) 39%, rgba(221, 255, 252, 1) 100%);
+    background: linear-gradient(to bottom, rgba(131, 194, 245, 1) 0%, rgba(108, 190, 230, 1) 39%, rgba(221, 255, 252, 1) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#83c2f5', endColorstr='#ddfffc', GradientType=0);
+    border: 3px solid #0b538e;
+}
+
+#mine-wrapper .game-wrapper .users .user-container.user-red .user-control .bomb-container .bomb {
+    background: rgb(255, 175, 159);
+    background: -moz-linear-gradient(top, rgba(255, 175, 159, 1) 0%, rgba(231, 113, 7, 1) 54%, rgba(231, 113, 7, 1) 54%, rgba(237, 172, 16, 1) 100%);
+    background: -webkit-linear-gradient(top, rgba(255, 175, 159, 1) 0%, rgba(231, 113, 7, 1) 54%, rgba(231, 113, 7, 1) 54%, rgba(237, 172, 16, 1) 100%);
+    background: linear-gradient(to bottom, rgba(255, 175, 159, 1) 0%, rgba(231, 113, 7, 1) 54%, rgba(231, 113, 7, 1) 54%, rgba(237, 172, 16, 1) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffaf9f', endColorstr='#edac10', GradientType=0);
+    border: 3px solid #c9221c;
+}
+
+#mine-wrapper .game-wrapper .users .active-mines-container {
+    background: -moz-radial-gradient(center, ellipse cover, rgba(255, 252, 252, 1) 0%, rgba(255, 252, 252, 0.99) 1%, rgba(106, 106, 106, 0.39) 61%, rgba(106, 106, 106, 0) 100%);
+    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 252, 252, 1) 0%, rgba(255, 252, 252, 0.99) 1%, rgba(106, 106, 106, 0.39) 61%, rgba(106, 106, 106, 0) 100%);
+    background: radial-gradient(ellipse at center, rgba(255, 252, 252, 1) 0%, rgba(255, 252, 252, 0.99) 1%, rgba(106, 106, 106, 0.39) 61%, rgba(106, 106, 106, 0) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcfc', endColorstr='#006a6a6a', GradientType=1);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 85% 100%;
+    position: relative;
+    height: 30px;
+}
+
+#mine-wrapper .game-wrapper .users .active-mines-container i {
+    font-size: 35px;
+    color: #b1b1b3;
+
+    text-shadow: 0 0 3px #000000;
+}
+
+#mine-wrapper .game-wrapper .users .active-mines-container i:first-child {
+    float: left;
+    margin-left: 25px;
+}
+
+#mine-wrapper .game-wrapper .users .active-mines-container i:last-child {
+    float: right;
+    margin-right: 25px;
+}
+
+#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%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3e3f41', endColorstr='#878883', GradientType=0);
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    top: -7.5px;
+    left: 50%;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 25px;
+    line-height: 39px;
+    text-align: center;
+    color: #FFFFFF;
+    border: 5px solid #38383a;
+    margin-left: -25px;
+
+    z-index: 100;
+
+    -webkit-border-radius: 50%;
+    border-radius: 50%;
+}
+
+#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;
+}
+
+@keyframes bubbleLeftMine {
+    0% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+    50% {
+        -webkit-transform: scale(2);
+        transform: scale(2);
+    }
+    100% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+}
+
+#mine-wrapper .game-wrapper .users .active-mines-container .active-mines .active-mines-shine {
+    background: -moz-linear-gradient(top, rgba(213, 214, 216, 1) 0%, rgba(106, 106, 106, 1) 100%);
+    background: -webkit-linear-gradient(top, rgba(213, 214, 216, 1) 0%, rgba(106, 106, 106, 1) 100%);
+    background: linear-gradient(to bottom, rgba(213, 214, 216, 1) 0%, rgba(106, 106, 106, 1) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d5d6d8', endColorstr='#6a6a6a', GradientType=0);
+    position: absolute;
+    top: 0;
+    left: 50%;
+    width: 25px;
+    height: 20px;
+    margin-left: -12.5px;
+
+    z-index: 101;
+
+    -webkit-border-radius: 50%;
+    border-radius: 50%;
+}
+
+#mine-wrapper .game-wrapper .users .active-mines-container .active-mines .active-mines-nbr {
+    position: absolute;
+    top: 0;
+    width: 100%;
+
+    z-index: 102;
+}
+
+/** game grid */
+
 #mine-wrapper .grid {
     display: flex;
     flex-direction: row;
@@ -13,8 +568,7 @@
     align-items: center;
     justify-content: center;
     width: 642px;
-    border: 1px solid #51c2fe;
-    margin: 0 auto;
+    border: 1px solid #cac3e5;
 
     cursor: none;
 }
@@ -29,6 +583,7 @@
     width: 45px;
     top: -2.5px;
     left: -2.5px;
+
     z-index: 100;
 }
 
@@ -36,6 +591,17 @@
     display: block;
 }
 
+/** width = 4 x .field */
+#mine-wrapper .grid .field-wrapper > img.field-bomb-target {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    width: 100%;
+
+    z-index: 100;
+}
+
 #mine-wrapper .grid .field-wrapper > img.field-blue-last,
 #mine-wrapper .grid .field-wrapper > img.field-red-last {
     position: absolute;
@@ -124,12 +690,11 @@
 }
 
 #mine-wrapper .grid .field-wrapper .field.active .flag-mine > img {
-    width: 65%;
+    width: 75%;
     margin-left: 15px;
-    margin-bottom: 5px;
 
-    -ms-transform: rotate(7deg); /* IE 9 */
-    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
+    -ms-transform: rotate(7deg);
+    -webkit-transform: rotate(7deg);
     transform: rotate(7deg);
     -webkit-animation: mineFlagLoad 500ms cubic-bezier(.36, .07, .19, .97) both;
     animation: mineFlagLoad 500ms cubic-bezier(.36, .07, .19, .97) both;
@@ -140,8 +705,8 @@
         margin-bottom: 0;
         margin-left: 15px;
 
-        -ms-transform: rotate(9deg); /* IE 9 */
-        -webkit-transform: rotate(9deg); /* Chrome, Safari, Opera */
+        -ms-transform: rotate(9deg);
+        -webkit-transform: rotate(9deg);
         transform: rotate(9deg);
     }
     50% {
@@ -152,8 +717,8 @@
         margin-bottom: 3px;
         margin-left: 0;
 
-        -ms-transform: rotate(-9deg); /* IE 9 */
-        -webkit-transform: rotate(-9deg); /* Chrome, Safari, Opera */
+        -ms-transform: rotate(-9deg);
+        -webkit-transform: rotate(-9deg);
         transform: rotate(-9deg);
     }
 }
@@ -185,11 +750,6 @@
     }
 }
 
-/*#mine-wrapper .grid .field-wrapper .field.active .field-corner {*/
-    /*-webkit-transform: scale(1);*/
-    /*transform: scale(1);*/
-/*}*/
-
 #mine-wrapper .grid .field-wrapper .field.active.mine {
     background: #61defa;
     background: -moz-linear-gradient(left, #61defa 0%, #119dec 100%);

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import Sound from 'react-sound';
 import Grid from './grid';
 import GridField from './grid-field';
 import UserControl from '../user/user-control';
@@ -12,6 +13,9 @@ class GridControl extends React.Component {
         this.state = {
             grid: grid.state.grid,
             updatedFieldCache: [],
+            bombFieldCache: [],
+            foundUserMineCache: 0,
+            playBomb: false,
             lastClicked: {
                 red: null,
                 blue: null
@@ -27,6 +31,37 @@ class GridControl extends React.Component {
         return typeof field[i] !== 'undefined' && typeof field[i][j] !== 'undefined' && field[i][j] !== 'm';
     }
 
+    getBombRadius(row, col) {
+        var isBombTargetCenter = row > 1 && row < this.state.grid.length - 2 && col > 1 && col < this.state.grid[row].length - 2;
+
+        /** if the (5x5) target not fits the grid */
+        if (!isBombTargetCenter) {
+            if (col < 2) {
+                col = 2;
+            }
+
+            if (row < 2) {
+                row = 2;
+            }
+
+            if (row > this.state.grid.length - 3) {
+                row = this.state.grid.length - 3;
+            }
+
+            if (col > this.state.grid[0].length - 3) {
+                col = this.state.grid[0].length - 3;
+            }
+        }
+
+        return [
+            [row, col], [row - 2, col - 2], [row - 2, col], [row - 2, col + 2], [row, col - 2], [row, col + 2],
+            [row + 2, col - 2], [row + 2, col], [row + 2, col + 2], [row - 2, col + 1], [row - 2, col - 1],
+            [row - 1, col - 2], [row - 1, col - 1], [row - 1, col], [row - 1, col + 1], [row - 1, col + 2],
+            [row, col - 1], [row, col + 1], [row + 1, col - 2], [row + 1, col - 1], [row + 1, col],
+            [row + 1, col + 1], [row + 1, col + 2], [row + 2, col - 1], [row + 2, col + 1]
+        ];
+    }
+
     checkNeighbourItem(row, col) {
         if (this.checkMine(this.state.grid, row, col)) {
             var currentField = this.refs[this.refString(row, col)];
@@ -95,47 +130,92 @@ class GridControl extends React.Component {
         }
     }
 
+    bombClear() {
+        if (this.state.bombFieldCache.length) {
+            for (var i = 0, j = this.state.bombFieldCache.length; i < j; i++) {
+                var cacheItem = this.state.bombFieldCache[i];
+                this.refs[this.refString(cacheItem[0], cacheItem[1])]
+                    .setState({bombTargetArea: null});
+            }
+            this.state.bombFieldCache = [];
+        }
+    }
+
+    bombCreate(row, col) {
+        var bombFieldSymbols = [
+                [null, null], [0, 0], [1, 0], [2, 0], [0, 1], [2, 1], [0, 2], [1, 2], [2, 2],
+                [null, null], [null, null], [null, null], [null, null], [null, null], [null, null], [null, null],
+                [null, null], [null, null], [null, null], [null, null], [null, null], [null, null], [null, null],
+                [null, null], [null, null]
+            ],
+            bombFields = this.getBombRadius(row, col);
+
+        for (var i = 0, j = bombFields.length; i < j; i++) {
+            this.state.bombFieldCache.push(bombFields[i]);
+
+            this.refs[this.refString(bombFields[i][0], bombFields[i][1])]
+                .setState({bombTargetArea: bombFieldSymbols[i]});
+        }
+    }
+
     /**
      * Player control method
-     * @param currentObject
-     * @param x
-     * @param y
+     *
+     * @param currentObject {int|string} Current object from Grid class
+     * @param x {int}
+     * @param y {int}
+     * @param justOnFirstIteration {int} When bomb is being used check the whole explosion area
      */
-    handleGridField(currentObject, x, y) {
+    handleGridField(currentObject, x, y, justOnFirstIteration = 0) {
         var userControl = this.refs.userControl,
             gridFieldControl = this.refs[this.refString(x, y)],
-            activePlayer = userControl.state.activePlayer ? 'blue' : 'red';
+            activePlayer = userControl.state.activePlayer ? 'blue' : 'red',
+            inactivePlayer = userControl.state.activePlayer ? 'red' : 'blue';
 
         /** update last cliked grid field */
+        if (!justOnFirstIteration) {
             if (this.state.lastClicked[activePlayer] !== null) {
                 this.refs[this.refString(this.state.lastClicked[activePlayer][0], this.state.lastClicked[activePlayer][1])].setState({
                     lastClickedRed: false,
                     lastClickedBlue: false
                 });
             }
+        }
 
+        /** if the clicked field is NEVER CLICKED */
         if (!gridFieldControl.state.active) {
             this.state.lastClicked[activePlayer] = [x, y];
 
-            /** If you found mine */
+            /** if you found mine */
             if (currentObject === 'm') {
-                userControl.setState({
-                    mines: userControl.state.mines - 1
-                });
-
-                userControl.refs[activePlayer].setState({
-                    mines: userControl.refs[activePlayer].state.mines + 1
-                });
+                this.state.foundUserMineCache++;
 
+                if (!justOnFirstIteration) {
+                    /** set last clicked field w/ color */
                     this.state.lastClicked[activePlayer] = [x, y];
+                }
 
+                /** set current image in field */
                 gridFieldControl.setState({
                     currentImage: gridFieldControl.state.icons.root + gridFieldControl.state.icons.flag[activePlayer]
                 });
             } else {
-                userControl.state.activePlayer = userControl.state.activePlayer ? 0 : 1;
+                if (!justOnFirstIteration) {
+                    /** set ACTIVE player */
+                    userControl.setState({
+                        activePlayer: userControl.state.activePlayer ? 0 : 1
+                    });
 
-                /** It is a number */
+                    userControl.refs[activePlayer].setState({
+                        active: false
+                    });
+
+                    userControl.refs[inactivePlayer].setState({
+                        active: true
+                    });
+                }
+
+                /** set current image in field - WHEN it is a number */
                 if (!isNaN(currentObject)) {
                     gridFieldControl.setState({
                         currentImage: currentObject
@@ -143,22 +223,126 @@ class GridControl extends React.Component {
                 }
             }
 
+            /**
+             * set bombs status - we must add one mine (currentObject === 'm' ? 1 : 0) to current mine
+             * when it found NOW because the status is not refreshed unless the handleGridField() ends
+             */
+            userControl.refs[activePlayer].setState({
+                enabledBomb: userControl.refs[activePlayer].state.mines + (currentObject === 'm' ? 1 : 0) <= userControl.refs[inactivePlayer].state.mines
+            });
+
+            userControl.refs[inactivePlayer].setState({
+                enabledBomb: userControl.refs[activePlayer].state.mines + (currentObject === 'm' ? 1 : 0) >= userControl.refs[inactivePlayer].state.mines
+            });
+
             /** set-up last clicked */
+            if (!justOnFirstIteration) {
                 gridFieldControl.setState({
                     lastClickedRed: activePlayer === 'red',
                     lastClickedBlue: activePlayer === 'blue'
                 });
             }
         }
+    }
 
     /**
      * Most important event!!
      * @param coords
      */
     onClick(coords) {
-        var currentField = this.refs[this.refString(coords[0], coords[1])];
-        this.showAppropriateFields(currentField, coords[0], coords[1]);
-        this.handleGridField(this.state.grid[coords[0]][coords[1]], coords[0], coords[1]);
+        var activePlayer = this.refs.userControl.state.activePlayer ? 'blue' : 'red';
+        this.state.foundUserMineCache = 0;
+
+        this.state.playBomb = true;
+
+        console.log(
+            this.state.playBomb
+        );
+
+        if (this.refs.userControl.state.bombSelected) {
+            var radius = this.getBombRadius(coords[0], coords[1]);
+
+            for (var i = 0, j = radius.length; i < j; i++) {
+                this.showAppropriateFields(
+                    this.refs[this.refString(radius[i][0], radius[i][1])],
+                    radius[i][0],
+                    radius[i][1]
+                );
+
+                this.handleGridField(
+                    this.state.grid[radius[i][0]][radius[i][1]],
+                    radius[i][0],
+                    radius[i][1],
+                    i
+                );
+            }
+
+            this.refs.userControl.refs[activePlayer].setState({
+                haveBomb: false
+            });
+        } else {
+            this.showAppropriateFields(
+                this.refs[this.refString(coords[0], coords[1])],
+                coords[0],
+                coords[1]
+            );
+
+            this.handleGridField(
+                this.state.grid[coords[0]][coords[1]],
+                coords[0],
+                coords[1],
+                0
+            );
+        }
+
+        if (this.state.foundUserMineCache) {
+            /** remove ONE mine from global */
+            this.refs.userControl.setState({
+                mines: this.refs.userControl.state.mines - this.state.foundUserMineCache,
+                foundMines: true
+            });
+
+            setTimeout(function () {
+                this.refs.userControl.setState({foundMines: false})
+            }.bind(this), 500);
+
+            /** add ONE mine to active Player */
+            this.refs.userControl.refs[activePlayer].setState({
+                mines: this.refs.userControl.refs[activePlayer].state.mines + this.state.foundUserMineCache
+            });
+        }
+
+        if (this.refs.userControl.state.bombSelected) {
+            /** reset bomb selected status */
+            this.refs.userControl.setState({bombSelected: false});
+
+            /** clear cache, reset symbols */
+            this.bombClear();
+        }
+    }
+
+    /**
+     * On Hover when you want to drop BOMB
+     * @param coords
+     */
+    onHoverWithBomb(coords) {
+        if (this.refs.userControl.state.bombSelected) {
+            /** clear cache, reset symbols */
+            this.bombClear();
+
+            /** new cache && field activate */
+            this.bombCreate(coords[0], coords[1]);
+        }
+    }
+
+    playingBomb() {
+        return this.state.playBomb
+            ? Sound.status.PLAYING
+            : Sound.status.STOPPED;
+    }
+
+    componentDidMount() {
+        soundManager.setup({debugMode: false});
     }
 
     renderGridFields() {
@@ -171,6 +355,7 @@ class GridControl extends React.Component {
                                col={k}
                                ref={this.refString(i, k)}
                                key={i + k * Math.random() * 0.5}
+                               handleHoverOn={this.onHoverWithBomb.bind(this, [i, k])}
                                onClick={this.onClick.bind(this, [i, k])}
                     />
                 );
@@ -183,12 +368,18 @@ class GridControl extends React.Component {
     render() {
         return (
             <div className="game-wrapper">
-                <div className="users">
-                    <UserControl ref="userControl" blue="Olcsó János" red="Eszet Lenke"/>
-                </div>
+                <UserControl ref="userControl"
+                             blue="Olcsó János"
+                             red="Eszet Lenke"
+                             bombClear={this.bombClear.bind(this)}/>
                 <div className="grid">
                     {this.renderGridFields()}
                 </div>
+                <Sound url="sound/bomb.mp3" ref="bombSound" playStatus={this.playingBomb()}/>
+                {/*<Sound url="sound/click.mp3" playStatus={this.playStatus()}/>*/}
+                {/*<Sound url="sound/mine.mp3" playStatus={this.playStatus()}/>*/}
+                {/*<Sound url="sound/warning.mp3" playStatus={this.playStatus()}/>*/}
+                {/*<Sound url="sound/won.mp3" playStatus={this.playStatus()}/>*/}
             </div>
         );
     }

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

@@ -10,6 +10,7 @@ class GridField extends React.Component {
             active: false,
             lastClickedRed: false,
             lastClickedBlue: false,
+            bombTargetArea: null,
             icons: {
                 root: 'bundles/mineseeker/images/',
                 water: {
@@ -76,13 +77,59 @@ class GridField extends React.Component {
             : '';
     }
 
+    createBombTarget() {
+        if (this.state.bombTargetArea !== null) {
+            var vert = '', hor = '';
+
+            switch (this.state.bombTargetArea[0]) {
+                case 0:
+                    vert = 'left';
+                    break;
+                case 1:
+                    vert = 'center';
+                    break;
+                case 2:
+                    vert = 'right';
+                    break;
+                default:
+                    vert = null;
+                    break;
+            }
+
+            switch (this.state.bombTargetArea[1]) {
+                case 0:
+                    hor = 'top';
+                    break;
+                case 1:
+                    hor = 'middle';
+                    break;
+                case 2:
+                    hor = 'bottom';
+                    break;
+                default:
+                    vert = null;
+                    break;
+            }
+
+            var src = vert === null
+                ? '/bundles/mineseeker/images/bg-bomb-empty-outbg.png'
+                : '/bundles/mineseeker/images/bg-bomb-' + hor + '-' + vert + '-outbg.png';
+
+            return <img className="field-bomb-target"
+                        src={src}
+                        alt="bomb target"/>
+        }
+    }
+
     render() {
         return (
-            <div className="field-wrapper">
+            <div className="field-wrapper"
+                 onClick={this.props.onClick}
+                 onMouseEnter={this.props.handleHoverOn}>
                 <img className="field-target"
                      src="/bundles/mineseeker/images/bg-target-outbg.png"
-                     alt="target"
-                     onClick={this.props.onClick}/>
+                     alt="target"/>
+                {this.createBombTarget()}
                 {this.currentLastClicked()}
                 <div className={this.classNameWhenActive()}>
                     <div className="field-corner">

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

@@ -11,16 +11,58 @@ class UserControl extends React.Component {
          */
         this.state = {
             activePlayer: 0,
-            mines: 51
+            mines: 51,
+            bombSelected: false,
+            foundMines: false
         };
     }
 
+    onClickBombSelector(clickedPlayer) {
+        var activePlayer = this.state.activePlayer ? 'blue' : 'red';
+
+        if (
+            this.refs[activePlayer].state.haveBomb &&
+            this.refs[activePlayer].state.enabledBomb &&
+            this.state.activePlayer === clickedPlayer
+        ) {
+            this.state.bombSelected = !this.state.bombSelected;
+
+            if (!this.state.bombSelected) {
+                this.props.bombClear();
+            }
+        }
+    }
+
+    activeMines() {
+        return "active-mines" + (this.state.foundMines ? ' found-mine' : '');
+    }
+
     render() {
         return (
-            <div>
-                <User ref="blue" name={this.props.blue}/>
-                <div>Active mines: {this.state.mines} pcs</div>
-                <User ref="red" name={this.props.red}/>
+            <div className="users">
+                <User ref="blue"
+                      color="blue"
+                      name={this.props.blue}
+                      active={this.state.activePlayer === 1}
+                      onClickBombSelector={this.onClickBombSelector.bind(this, 1)}/>
+                <div className="active-mines-container">
+                    <i className="fa fa-star"></i>
+                    <div className={this.activeMines()}>
+                        <div className="active-mines-nbr">{this.state.mines}</div>
+                        <div className="active-mines-shine"></div>
+                    </div>
+                    <i className="fa fa-star"></i>
+                </div>
+                <div className="clear"></div>
+                <User ref="red"
+                      color="red"
+                      name={this.props.red}
+                      active={this.state.activePlayer === 0}
+                      onClickBombSelector={this.onClickBombSelector.bind(this, 0)}/>
+                <div className="resign">
+                    <div className="resign-shine"></div>
+                    Resign
+                </div>
             </div>
         );
     }

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

@@ -5,16 +5,69 @@ class User extends React.Component {
         super(props);
 
         this.state = {
-            name: this.props.name,
-            bomb: 1,
-            mines: 0
+            name: props.name,
+            active: props.active,
+            color: props.color === 'blue' ? 1 : 0,
+            mines: 0,
+            haveBomb: true,
+            enabledBomb: true
+        };
     }
+
+    setColor(color) {
+        return 'user-container user-' + color;
+    }
+
+    getSrc(color) {
+        return 'bundles/mineseeker/images/bg-flag-' + color + '-outbg.png';
+    }
+
+    getBomb() {
+        if (this.state.haveBomb) {
+            if (this.state.enabledBomb && this.state.active) {
+                return 'bundles/mineseeker/images/bg-bomb-outbg.png';
+            } else {
+                return 'bundles/mineseeker/images/bg-bomb-disabled-outbg.png';
+            }
+        } else {
+            return 'bundles/mineseeker/images/bg-bomb-exploded-outbg.png';
+        }
+    }
+
+    getFigure(color) {
+        return 'bundles/mineseeker/images/bg-figure-' + color + '-outbg.png';
+    }
+
+    getCursor(state, color) {
+        var cursorImg = 'bundles/mineseeker/images/bg-cursor-' + color + '-outbg.png';
+
+        return state
+            ? <img src={cursorImg} alt="cursor" className="user-cursor"/>
+            : '';
     }
 
     render() {
         return (
-            <div>
-                {this.state.name}: {this.state.mines}
+            <div className={this.setColor(this.props.color)}>
+                <div className="user-header">
+                    <div className="user-color">{this.props.color}</div>
+                    {this.getCursor(this.props.active, this.props.color)}
+                    <img src={this.getFigure(this.props.color)} alt="figure"/>
+                </div>
+                <div className="user-name"> {this.state.name} </div>
+                <div className="user-caret"><i className="fa fa-caret-down"></i></div>
+                <div className="user-control">
+                    <img src={this.getSrc(this.props.color)} alt="flag"/>
+                    <div className="user-control-mines">
+                        {this.state.mines}
+                    </div>
+                    <div className="bomb-container" onClick={this.props.onClickBombSelector}>
+                        <div className="bomb">
+                            <img src={this.getBomb()} alt="bomb"/>
+                        </div>
+                    </div>
+                    <div className="clear"></div>
+                </div>
             </div>
         );
     }