add google analytics and facebook scripts && improve url share method w/ fb && enforce https in prod

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

@@ -96,51 +96,37 @@ main {
 
 #mine-wrapper .game-wrapper .game-overlay .game-overlay-window h1 {
     font-weight: bold;
-    font-size: 32px;
+    font-size: 26px;
 }
 
 #mine-wrapper .game-wrapper .game-overlay .game-overlay-window h2 {
     font-size: 18px;
 }
 
+#mine-wrapper .game-wrapper .game-overlay .game-overlay-window h3 {
+    font-size: 16px;
+    color: #386e8c;
+}
+
 #mine-wrapper .game-wrapper .game-overlay .game-overlay-window .clippy {
     display: flex;
     align-items: center;
     width: 100%;
+    margin-bottom: 10px;
 }
 
 #mine-wrapper .game-wrapper .game-overlay .game-overlay-window .clippy input {
     border: 0;
     height: 40px;
-    width: 90%;
+    width: 100%;
     padding: 0 20px;
 
-    -webkit-border-top-left-radius: 3px;
-    border-top-left-radius: 3px;
-    -webkit-border-bottom-left-radius: 3px;
-    border-bottom-left-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
     -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
 }
 
-#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .clippy button {
-    border: 0;
-    width: 10%;
-    height: 40px;
-
-    cursor: pointer;
-
-    -webkit-border-top-right-radius: 3px;
-    border-top-right-radius: 3px;
-    -webkit-border-bottom-right-radius: 3px;
-    border-bottom-right-radius: 3px;
-}
-
-#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .clippy button img {
-    width: 15px;
-    height: 15px;
-}
-
 #mine-wrapper .game-wrapper .game-overlay .game-overlay-window a {
     background: #d8e3ea;
     display: inline-table;

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

@@ -160,6 +160,27 @@ class MineSeeker extends React.Component {
         }
     }
 
+    /**
+     * @see https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus
+     * @see https://developers.facebook.com/docs/sharing/reference/send-dialog
+     * @see https://developers.facebook.com/docs/plugins/share-button/
+     */
+    clickFBShare() {
+        let display = 'popup';
+
+        FB.getLoginStatus(function (response) {
+            display = response.status === 'connected'
+                ? 'dialog'
+                : 'popup';
+        });
+
+        FB.ui({
+            method: 'send',
+            display: display,
+            link: window.location.href + '/' + this.state.gameAssoc,
+        });
+    }
+
     wInit(session, data, gridClient) {
         this.setState({session: session});
 
@@ -184,14 +205,17 @@ class MineSeeker extends React.Component {
             overlaySubTitle: this.state.gameAssoc
                 ?
                 <div>
+                    <h3>Share this unique link w/ your opponent</h3>
                     <div className="clippy">
                         <input id="foo"
                                defaultValue={window.location.href + '/' + this.state.gameAssoc}/>
-                        <button className="btn">
-                            <img src="/bundles/mineseeker/images/clippy.svg" alt="Copy to clipboard"/>
-                        </button>
                     </div>
+                    {this.state.env !== 'dev' &&
+                    <a onClick={this.clickFBShare.bind(this)}>Share in Facebook message</a>
+                    }
+                    {this.state.env === 'dev' &&
                     <a href={"/play/" + this.state.gameAssoc} target="_blank">Play w/ me!</a>
+                    }
                 </div>
                 : '',
             renderGridFields: this.state.gameAssoc
@@ -349,7 +373,7 @@ class MineSeeker extends React.Component {
 
     /** After rendering */
     componentDidMount() {
-
+        this.connectWithWebsocket();
     }
 
     /**

src/Mine/SeekerBundle/Resources/views/Game/index.html.twig

@@ -12,7 +12,7 @@
             <a href="{{ path('MineSeekerBundle_gamePlay') }}">Most játszom egyet!</a>
             <a href="{{ path('fos_user_registration_register') }}" class="small">Regisztrálok</a> &middot;
             <a href="{{ path('fos_user_security_login') }}" class="small">Belépek</a>
-            <h3>version 0.16.11 (beta2) &middot; MineSeeker&copy; &middot; <a href="http://www.laszlolang.com">www.laszlolang.com</a>
+            <h3>version 0.18.11 (beta2) &middot; MineSeeker&copy; &middot; <a href="http://www.laszlolang.com">www.laszlolang.com</a>
             </h3>
         </div>
         <img src="{{ asset('bundles/mineseeker/images/mine-logo-logo.png') }}" alt="MineSeeker Logo" border="0"/>

src/Mine/SeekerBundle/Resources/views/Game/play.html.twig

@@ -1,5 +1,13 @@
 {% extends '::base.html.twig' %}
 
+{% block metas %}
+    {#<meta property="og:url"           content="http://www.your-domain.com/your-page.html" />#}
+    {#<meta property="og:type"          content="website" />#}
+    {#<meta property="og:title"         content="Your Website Title" />#}
+    {#<meta property="og:description"   content="Your description" />#}
+    {#<meta property="og:image"         content="http://www.your-domain.com/path/image.jpg" />#}
+{% endblock %}
+
 {% block body %}
     <div class="mine-container">
         <div id="mine-wrapper"