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

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

@@ -23,11 +23,53 @@
 }
 
 #mine-wrapper .game-wrapper {
+    position: relative;
     display: flex;
     flex-direction: row;
     align-items: flex-start;
 }
 
+#mine-wrapper .game-wrapper .game-overlay {
+    background: rgba(255, 255, 255, 0.2);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+
+    z-index: 200;
+}
+
+#mine-wrapper .game-wrapper .game-overlay.hide {
+    display: none;
+}
+
+#mine-wrapper .game-wrapper .game-overlay .game-overlay-window {
+    background: rgba(204, 204, 204, 0.8);
+    border: 5px solid rgba(255, 255, 255, 0.5);
+    font-family: 'Open Sans', sans-serif;
+    text-align: center;
+    color: #354d6a;
+    width: 300px;
+    padding: 10px;
+
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+}
+
+#mine-wrapper .game-wrapper .game-overlay .game-overlay-window h1 {
+    font-weight: bold;
+    font-size: 32px;
+}
+
+#mine-wrapper .game-wrapper .game-overlay .game-overlay-window h2 {
+    font-size: 18px;
+}
+
 #mine-wrapper .game-wrapper .users {
     width: 200px;
     padding: 0 10px 0 0;

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>