add overlay && game do not start until the opponent came

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

@@ -65,7 +65,9 @@ class MineSeeker extends React.Component {
                         this.refs.gridControl.setState({
                             grid: this.state.gameInherited ? JSON.parse(Base64.decode(gridServer)) : gridClient,
                             session: this.state.session,
-                            channel: this.state.channel
+                            channel: this.state.channel,
+                            overlay: true,
+                            overlayTitle: "We are waiting for your opponent..."
                         });
 
                         /** setup the web player && save player name */
@@ -84,6 +86,8 @@ class MineSeeker extends React.Component {
                             this.state.channel,
                             (uri, payload, log) => {
 
+                                var isNotUnsubscribe = typeof payload.msg === 'undefined';
+
                                 if (typeof payload.data !== 'undefined') {
                                     console.warn(payload.user + " has been stepped to coords: " + payload.data.coords[0] + ', ' + payload.data.coords[1]);
 
@@ -99,6 +103,11 @@ class MineSeeker extends React.Component {
                                         (typeof payload.user !== 'undefined' ? payload.user : 'user') + " has been subscribed to the channel!"
                                     );
 
+                                    /** remove overlay when every user has been came */
+                                    if (isNotUnsubscribe) {
+                                        this.refs.gridControl.setState({overlay: payload.userCnt < 2});
+                                    }
+
                                     // /** Save the opponent's player name */
                                     // if (this.state.gameInherited) {
                                     //     this.refs.gridControl.refs.userControl.refs.blue.setState({name: payload.user});

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

@@ -20,6 +20,9 @@ class GridControl extends React.Component {
             bombFieldCache: [],
             foundUserMineCache: 0,
             playBomb: false,
+            overlay: false,
+            overlayTitle: "",
+            overlaySubTitle: "",
             sound: {
                 click: click,
                 bomb: bomb,
@@ -366,6 +369,14 @@ class GridControl extends React.Component {
         }
     }
 
+    overlayClass() {
+        return 'game-overlay' + (
+                this.state.overlay
+                    ? ''
+                    : ' hide'
+            );
+    }
+
     render() {
         var grid = [];
 
@@ -386,6 +397,12 @@ class GridControl extends React.Component {
 
         return (
             <div className="game-wrapper">
+                <div className={this.overlayClass()}>
+                    <div className="game-overlay-window">
+                        <h1>{this.state.overlayTitle}</h1>
+                        <h2>{this.state.overlaySubTitle}</h2>
+                    </div>
+                </div>
                 <UserControl ref="userControl"
                              bombClear={this.bombClear.bind(this)}/>
                 <div className="grid"> {grid} </div>