diff --git a/src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css b/src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css index 567cfd3..07ea085 100644 --- a/src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css +++ b/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%); diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-bottom-center-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-bottom-center-outbg.png new file mode 100644 index 0000000..53c2935 Binary files /dev/null and b/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-bottom-center-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-bottom-left-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-bottom-left-outbg.png new file mode 100644 index 0000000..601df99 Binary files /dev/null and b/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-bottom-left-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-bottom-right-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-bottom-right-outbg.png new file mode 100644 index 0000000..75f726f Binary files /dev/null and b/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-bottom-right-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-empty-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-empty-outbg.png new file mode 100644 index 0000000..939be66 Binary files /dev/null and b/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-empty-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-exploded-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-exploded-outbg.png index 6b76a90..3ecc7c4 100644 Binary files a/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-exploded-outbg.png and b/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-exploded-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-middle-left-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-middle-left-outbg.png new file mode 100644 index 0000000..ad64a90 Binary files /dev/null and b/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-middle-left-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-middle-right-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-middle-right-outbg.png new file mode 100644 index 0000000..0938334 Binary files /dev/null and b/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-middle-right-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-top-center-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-top-center-outbg.png new file mode 100644 index 0000000..b6cf4fa Binary files /dev/null and b/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-top-center-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-top-left-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-top-left-outbg.png new file mode 100644 index 0000000..d8dca03 Binary files /dev/null and b/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-top-left-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-top-right-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-top-right-outbg.png new file mode 100644 index 0000000..d17a438 Binary files /dev/null and b/src/Mine/SeekerBundle/Resources/public/images/bg-bomb-top-right-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-cursor-blue-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-cursor-blue-outbg.png new file mode 100644 index 0000000..d8fcbec Binary files /dev/null and b/src/Mine/SeekerBundle/Resources/public/images/bg-cursor-blue-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-cursor-red-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-cursor-red-outbg.png new file mode 100644 index 0000000..a52c18e Binary files /dev/null and b/src/Mine/SeekerBundle/Resources/public/images/bg-cursor-red-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-figure-blue-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-figure-blue-outbg.png new file mode 100644 index 0000000..4eed96e Binary files /dev/null and b/src/Mine/SeekerBundle/Resources/public/images/bg-figure-blue-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-figure-red-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-figure-red-outbg.png new file mode 100644 index 0000000..3126971 Binary files /dev/null and b/src/Mine/SeekerBundle/Resources/public/images/bg-figure-red-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-flag-blue-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-flag-blue-outbg.png index 733e37f..dbdf42d 100644 Binary files a/src/Mine/SeekerBundle/Resources/public/images/bg-flag-blue-outbg.png and b/src/Mine/SeekerBundle/Resources/public/images/bg-flag-blue-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-flag-red-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-flag-red-outbg.png index 3178c8b..be88ca6 100644 Binary files a/src/Mine/SeekerBundle/Resources/public/images/bg-flag-red-outbg.png and b/src/Mine/SeekerBundle/Resources/public/images/bg-flag-red-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-last-blue-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-last-blue-outbg.png index 66a26ff..8693a23 100644 Binary files a/src/Mine/SeekerBundle/Resources/public/images/bg-last-blue-outbg.png and b/src/Mine/SeekerBundle/Resources/public/images/bg-last-blue-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-last-red-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-last-red-outbg.png index 8538565..0396a0f 100644 Binary files a/src/Mine/SeekerBundle/Resources/public/images/bg-last-red-outbg.png and b/src/Mine/SeekerBundle/Resources/public/images/bg-last-red-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-target-bomb-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-target-bomb-outbg.png index 972d1de..ba19fb1 100644 Binary files a/src/Mine/SeekerBundle/Resources/public/images/bg-target-bomb-outbg.png and b/src/Mine/SeekerBundle/Resources/public/images/bg-target-bomb-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-target-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-target-outbg.png index ee3a60e..85bebe8 100644 Binary files a/src/Mine/SeekerBundle/Resources/public/images/bg-target-outbg.png and b/src/Mine/SeekerBundle/Resources/public/images/bg-target-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-wave-1-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-wave-1-outbg.png index fe4621f..21dbd67 100644 Binary files a/src/Mine/SeekerBundle/Resources/public/images/bg-wave-1-outbg.png and b/src/Mine/SeekerBundle/Resources/public/images/bg-wave-1-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-wave-2-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-wave-2-outbg.png index 0e56749..d090230 100644 Binary files a/src/Mine/SeekerBundle/Resources/public/images/bg-wave-2-outbg.png and b/src/Mine/SeekerBundle/Resources/public/images/bg-wave-2-outbg.png differ diff --git a/src/Mine/SeekerBundle/Resources/public/images/bg-wave-3-outbg.png b/src/Mine/SeekerBundle/Resources/public/images/bg-wave-3-outbg.png index dccad8b..7f45165 100644 Binary files a/src/Mine/SeekerBundle/Resources/public/images/bg-wave-3-outbg.png and b/src/Mine/SeekerBundle/Resources/public/images/bg-wave-3-outbg.png differ 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 448dd10..360a1c8 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 @@ -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 (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 (!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 - }); + this.state.foundUserMineCache++; - userControl.refs[activePlayer].setState({ - mines: userControl.refs[activePlayer].state.mines + 1 - }); - - this.state.lastClicked[activePlayer] = [x, y]; + 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,11 +223,25 @@ class GridControl extends React.Component { } } - /** set-up last clicked */ - gridFieldControl.setState({ - lastClickedRed: activePlayer === 'red', - lastClickedBlue: activePlayer === 'blue' + /** + * 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' + }); + } } } @@ -156,9 +250,99 @@ class GridControl extends React.Component { * @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 (
-
- -
+
{this.renderGridFields()}
+ + {/**/} + {/**/} + {/**/} + {/**/}
); } diff --git a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-field.js b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-field.js index 5bbfa4a..cdc957a 100644 --- a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-field.js +++ b/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 bomb target + } + } + render() { return ( -
+
target + alt="target"/> + {this.createBombTarget()} {this.currentLastClicked()}
diff --git a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/user/user-control.js b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/user/user-control.js index 9a18f67..9d66342 100644 --- a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/user/user-control.js +++ b/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 ( -
- -
Active mines: {this.state.mines} pcs
- +
+ +
+ +
+
{this.state.mines}
+
+
+ +
+
+ +
+
+ Resign +
); } 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 dded393..7ae8f4c 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 @@ -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 + ? cursor + : ''; + } + render() { return ( -
- {this.state.name}: {this.state.mines} +
+
+
{this.props.color}
+ {this.getCursor(this.props.active, this.props.color)} + figure +
+
{this.state.name}
+
+
+ flag +
+ {this.state.mines} +
+
+
+ bomb +
+
+
+
); } diff --git a/web/sound/bomb.mp3 b/web/sound/bomb.mp3 new file mode 100644 index 0000000..13a5793 Binary files /dev/null and b/web/sound/bomb.mp3 differ diff --git a/web/sound/click.mp3 b/web/sound/click.mp3 new file mode 100644 index 0000000..ba5ad0b Binary files /dev/null and b/web/sound/click.mp3 differ diff --git a/web/sound/mine.mp3 b/web/sound/mine.mp3 new file mode 100644 index 0000000..e5958a0 Binary files /dev/null and b/web/sound/mine.mp3 differ diff --git a/web/sound/warning.mp3 b/web/sound/warning.mp3 new file mode 100644 index 0000000..6b5133a Binary files /dev/null and b/web/sound/warning.mp3 differ diff --git a/web/sound/won.mp3 b/web/sound/won.mp3 new file mode 100644 index 0000000..2592aac Binary files /dev/null and b/web/sound/won.mp3 differ