Added clipboard

bower.json

@@ -25,6 +25,7 @@
     "requirejs": "2.1.15",
     "underscore": "~1.7.0",
     "jquery": "~2.1.1",
-    "sweetalert": "~1.1.3"
+    "sweetalert": "~1.1.3",
+    "clipboard": "~1.5.9"
   }
 }

client.html

@@ -2,28 +2,47 @@
 <link rel="stylesheet" type="text/css" href="/style.css">
 <script type="text/javascript" src="/lib/jquery.js"></script>
 <script type="text/javascript" src="/lib/sweetalert.js"></script>
+<script type="text/javascript" src="/lib/clipboard.js"></script>
 <script>
   function setButton(text) {
     $('#button').html(text);
     $('#button').on('click', function(e) {
       io.connect().emit('button', 'start');
       $(this).blur();
       $(this).unbind('click');
+      closeLink();
     })
   }
   function hideOverlay() {
     $('#game-div-overlay').hide();
   }
   function setOverlay(text) {
     $('#game-div-overlay').show();
-    $('#game-div-overlay').html(text);
+    $('#message').html(text);
+  }
+  function setLink(link) {
+    $('#link').val(link);
+    $('#clipboard').show();
+    window.clipLink = new Clipboard('#link-button');
+  }
+  function closeLink(link) {
+    $('#clipboard').hide();
   }
 </script>
 <button id="button" class="hidden"></button>
-<div id="game-div-overlay">Just wait Loading things.</div>
+<div id="game-div-overlay">
+  <div>
+    <div id="message">Just wait Loading things.</div>
+    <div id="clipboard" class="hidden">
+      <input id="link" value="" readonly>
+      <button id="link-button" data-clipboard-target="#link">
+          <img src="/images/clippy.svg" width="13" alt="Copy to clipboard">
+      </button>
+    </div>
+  </div>
+</div>
 <div id="game-div"></div>
 <div id="info">
   Number of players connected = <b id="player-count">1</b>
 </div>
-
 <script type="text/javascript" data-main="/main" src="/lib/require.js"></script>

src/main.js

@@ -214,7 +214,8 @@ require(['game','bomberMan','enemy','imageHandler','underscore','interproc','soc
 				var button = document.getElementById('button');
 				button.className = "";
 				setButton('START');
-				setOverlay("Press start to start the game. <br>You can restart the game with the same people in the room.");
+				setOverlay("Give the link for others to join the room");
+				setLink(link);
 				console.log(link);
 			}
 			if(~['start'].indexOf(i)) {

style.css

@@ -0,0 +1,78 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  position: relative;
+}
+
+/* Layout*/
+#game-div, #game-div-overlay, #button, #info {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+}
+
+#game-div, #game-div-overlay {
+  height: 480px;
+  width: 640px;
+  margin: -240px 0 0 -320px;
+}
+
+#button {
+  height: 50px;
+  width: 200px;
+  margin: -300px 0 0 -100px;
+}
+
+#info {
+  height: 50px;
+  width: 640px;
+  margin: 250px 0 0 -320px;
+}
+
+#game-div {
+  z-index: 1;
+}
+
+#game-div-overlay {
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Styling */
+#info {
+  text-align: center;
+}
+
+#game-div {
+  background-image: url("/images/bk..gif");
+}
+
+#game-div-overlay {
+  color: white;
+  background-color: rgba(0,0,0,0.8);
+}
+
+.hidden {
+  display: none;
+}
+
+
+#clipboard {
+  line-height: 20px;
+}
+
+#clipboard input {
+  padding: 7px 8px;
+  height: 34px;
+  width: 350px;
+}
+
+#clipboard button {
+  height: 34px;
+  width: 34px;
+  padding: 7px 8px;
+}