clipboard - not working #8

package.json

@@ -10,6 +10,7 @@
     "babel-loader": "^6.2.5",
     "babel-preset-es2015": "^6.14.0",
     "babel-preset-react": "^6.11.1",
+    "clipboard": "^1.5.15",
     "howler": "^2.0.1",
     "js-base64": "^2.1.9",
     "react": "^15.3.2",

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

@@ -103,6 +103,66 @@ main {
     font-size: 18px;
 }
 
+#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .clippy {
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+#mine-wrapper .game-wrapper .game-overlay .game-overlay-window .clippy input {
+    border: 0;
+    height: 40px;
+    width: 90%;
+    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-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: table;
+    text-decoration: none;
+    color: #126aa2;
+    padding: 10px 50px;
+    margin: 0 auto;
+
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -webkit-transition: all 250ms ease-in-out;
+    transition: all 250ms ease-in-out;
+}
+
+#mine-wrapper .game-wrapper .game-overlay .game-overlay-window a:hover {
+    background: #a4afb6;
+    color: #ffffff;
+
+    -webkit-transition: all 250ms ease-in-out;
+    transition: all 250ms ease-in-out;
+}
+
 #mine-wrapper .game-wrapper .users {
     width: 180px;
     padding: 0 10px 0 0;

src/Mine/SeekerBundle/Resources/public/images/clippy.svg

@@ -0,0 +1,3 @@
+<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
+  <path d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
+</svg>

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

@@ -85,7 +85,17 @@ class MineSeeker extends React.Component {
                             overlay: true,
                             overlayTitle: "We are waiting for your opponent...",
                             overlaySubTitle: this.state.gameAssoc
-                                ? <a href={"/play/" + this.state.gameAssoc} target="_blank">Play w/ me!</a>
+                                ?
+                                <div>
+                                    <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>
+                                    <a href={"/play/" + this.state.gameAssoc} target="_blank">Play w/ me!</a>
+                                </div>
                                 : '',
                             renderGridFields: this.state.gameAssoc
                         });

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

@@ -21,6 +21,7 @@
     {{ ws_client() }}
 
     <script type="text/javascript" src="{{ asset('node/howler/dist/howler.min.js') }}"></script>
+    <script type="text/javascript" src="{{ asset('node/clipboard/dist/clipboard.min.js') }}"></script>
     <script type="text/javascript" src="{{ asset('node/js-base64/base64.min.js') }}"></script>
     <script type="text/javascript" src="{{ asset('js/index.js') }}"></script>
 {% endblock %}