created basic game w/ table and animations

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

@@ -6,21 +6,71 @@ class GridField extends React.Component {
 
         this.state = {
             currentObj: 'w',
-            obj: this.props.obj,
-            active: false
+            currentImage: null,
+            active: false,
+            lastClickedRed: false,
+            lastClickedBlue: false,
+            icons: {
+                root: 'bundles/mineseeker/images/',
+                water: {
+                    1: 'bg-wave-1-outbg.png',
+                    2: 'bg-wave-1-outbg.png',
+                    3: 'bg-wave-2-outbg.png'
+                },
+                flag: {
+                    red: 'bg-flag-red-outbg.png',
+                    blue: 'bg-flag-blue-outbg.png'
+                },
+                target: {
+                    lastBlue: 'bg-last-blue-outbg.png',
+                    lastRed: 'bg-last-red-outbg.png',
+                    crosshair: 'bg-target-outbg.png',
+                    crosshairBomb: 'bg-target-bomb-outbg.png'
+                }
+            }
         };
     }
 
-    isActive() {
+    componentWillMount() {
+        var wave = Math.floor(Math.random() * 3) + 1;
+
+        this.setState({
+            currentImage: this.state.icons.root + this.state.icons.water[wave]
+        });
+    }
+
+    classNameWhenActive() {
         return 'field'
             + (this.state.active === true ? ' active' : '')
-            + (this.state.active === true && this.state.obj === 'm' ? ' mine' : '');
+            + (this.state.active === true && this.state.currentObj === 'm' ? ' mine' : '')
+            + ' color-' + this.state.currentObj;
+    }
+
+    currentImage() {
+        return isNaN(this.state.currentImage)
+            ? <div className="flag-mine"><img src={this.state.currentImage}/><div className="flag-mine-base"></div></div>
+            : this.state.currentImage ? <div className="flag-number">{this.state.currentImage}</div> : '';
+    }
+
+    lastClickedRed() {
+        return 'field-red-last' + (this.state.lastClickedRed ? ' last-clicked' : '');
+    }
+
+    lastClickedBlue() {
+        return 'field-blue-last' + (this.state.lastClickedBlue ? ' last-clicked' : '');
     }
 
     render() {
         return (
-            <div className={this.isActive()} onClick={this.props.onClick}>
-                {this.state.currentObj}
+            <div className="field-wrapper">
+                <img className="field-target" src="/bundles/mineseeker/images/bg-target-outbg.png" alt="target" onClick={this.props.onClick}/>
+                <img className={this.lastClickedRed()} src="/bundles/mineseeker/images/bg-last-red-outbg.png" alt="red last"/>
+                <img className={this.lastClickedBlue()} src="/bundles/mineseeker/images/bg-last-blue-outbg.png" alt="blue last"/>
+                <div className={this.classNameWhenActive()}>
+                    <div className="field-corner">
+                        {this.currentImage()}
+                    </div>
+                </div>
             </div>
         );
     }