improve game && start sound creating

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