request username before connect to play
request username before connect to play

file:a/index.js -> file:b/index.js
--- a/index.js
+++ b/index.js
@@ -10,33 +10,43 @@
     res.sendFile(__dirname + '/public/play.html');
 });
 
-app.use(express.static(__dirname + '/'));
+app.use(express.static(__dirname + '/public'));
+app.use(express.static(__dirname + '/bower_components'));
 
 var users = [];
 
 io.on('connection', function(socket){
-    var player;
+    var connected, player, username;
+
     socket.on('send:message', function(msg){
         io.emit('send:message', msg + ' player');
     });
-    socket.on('send:connect', function(connection){
-        player = users.length;
-        if (connection == 'player' && player < 4) {
-            users.push(socket);
-            io.emit('send:connect', 'connected users :' + users.length);
-            console.log ('connected users ' + users.length);
-            console.log ('connected player ' + player);
-        } else if (connection == 'game') {
-            // to disconnect users on refresh
+    socket.on('send:connect', function(data){
+        connected = data.type;
+        username = data.username;
+        if (connected == 'player' && users.length <= 4) {
+            users.push(username);
+            player = users.length + 1;
+            console.log ('connected players : ' + users.length);
+            socket.emit('send:connected', {username: username, users:users.length});
+            io.emit('send:connectedusers', {users:users.length});
+            if (users.length == 4) {
+                io.emit('send:startgame');
+                console.log ('start game');
+            }
+        } else if (connected == 'game') {
             users = [];
+            io.sockets.sockets.forEach(function(s) {
+                s.disconnect(true);
+            });
         }
     });
     socket.on('disconnect', function () {
-        socket.emit('send:disconnected', users.length);
-        var index = users.indexOf(socket);
-        users.splice(index, 1);
-        if (player) {
-            console.log ('disconnected player ' + player);
+        if (connected == 'player') {
+            var index = users.indexOf(username);
+            users.splice(index, 1);
+            console.log ('disconnected player : ' + username);
+            io.emit('send:disconected', {user: username, users:users.length});
         }
     });
 

--- a/public/index.html
+++ b/public/index.html
@@ -5,12 +5,13 @@
 <meta content='IE=edge' http-equiv='X-UA-Compatible'>
 <meta content='width=device-width,initial-scale=1' name='viewport'>
 <title>Pong 4</title>
-<script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
-<script type="text/javascript" src="/bower_components/socket.io-client/socket.io.js"></script>
-<script type="text/javascript" src="/public/js/pong.js"></script>
-<link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
-<link rel="stylesheet" href="/public/css/pong.css">
-<script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
+<script type="text/javascript" src="/jquery/dist/jquery.min.js"></script>
+<script type="text/javascript" src="/socket.io-client/socket.io.js"></script>
+<script type="text/javascript" src="/js/pong.js"></script>
+<link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css">
+<link rel="stylesheet" href="/css/pong.css">
+<script src="/bootstrap/dist/js/bootstrap.min.js"></script>
+
 </head>
 <body>
 
@@ -31,12 +32,14 @@
 <div class="container">
     <br /><br /><br /><br />
     <div class="row">
-        <div class="col-xs-12 col-sm-8 col-md-8">
+        <div class="col-xs-12 col-sm-12 col-md-8">
             <div class="game"></div>
         </div>
-        <div class="col-xs-12 col-sm-4 col-md-4">
+        <div class="col-xs-12 col-sm-12 col-md-4">
             <h1>Score</h1>
             <p class="score lead"></p>
+            <p>Scan to play</p>
+            <p class="play"></p>
         </div>
     </div>
 </div><!-- /.container -->
@@ -53,6 +56,7 @@
     });
     socket.on('send:move', function(msg){
         playersMove[msg.player] = msg.msg;
+        //console.log (msg);
     });
     socket.on('users', function(msg){
         console.log ('users : ' + msg);

--- a/public/js/pong.js
+++ b/public/js/pong.js
@@ -20,10 +20,10 @@
 var offset = {1:0,2:0,3:0,4:0};
 
 var graphics = {
-    ball: {src: '/public/img/ball.png', instance: null},
-    paddleL: {src: '/public/img/paddlel.png', instance: null},
-    paddleP: {src: '/public/img/paddlep.png', instance: null},
-    background: {src: '/public/img/background2.jpg', instance: null}
+    ball: {src: '/img/ball.png', instance: null},
+    paddleL: {src: '/img/paddlel.png', instance: null},
+    paddleP: {src: '/img/paddlep.png', instance: null},
+    background: {src: '/img/background2.jpg', instance: null}
 };
 for (graph in graphics) {
     graphics[graph].instance = new Image();
@@ -423,6 +423,7 @@
 //document.body.appendChild(canvas);
 $(function(){
     $('.game').html(canvas);
+    $('<img />', {src:'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=Click to play http://' + window.location.host + '/play.html'}).appendTo('.play');
 });
 animate(step);
 

--- a/public/play.html
+++ b/public/play.html
@@ -5,17 +5,37 @@
 <meta content='IE=edge' http-equiv='X-UA-Compatible'>
 <meta content='width=device-width,initial-scale=1' name='viewport'>
 <title>Pong 4</title>
+<script type="text/javascript" src="/jquery/dist/jquery.min.js"></script>
+<script type="text/javascript" src="/socket.io-client/socket.io.js"></script>
+<link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css">
+<link rel="stylesheet" href="/css/pong.css">
+<script src="/bootstrap/dist/js/bootstrap.min.js"></script>
+<script type="text/javascript">
+    var socket = io();
+    socket.on('send:connected', function(msg){
+        $('.h1').html('Welcome to Pong 4 ' + msg.username);
+        $('.username').hide();
+    });
+    socket.on('send:connectedusers', function(msg){
+        $('.h2').html('There are ' + msg.users + ' conected players right now');
+    });
+    socket.on('send:disconected', function(msg){
+        $('.h2').html('There are ' + msg.users + ' conected players right now');
+    });
+    socket.on('disconnect', function(){
+        $('.status').append('disconnect');
+    });
+    $(function(){
+        $('.save').click(function(e){
+            e.preventDefault();
+            var data = {type:'player', username:$('#username').val()};
+            console.log (data);
+            socket.emit('send:connect', data);
+        });
+    });
+</script>
 </head>
 <body>
-<script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
-<script type="text/javascript" src="/bower_components/socket.io-client/socket.io.js"></script>
-<script type="text/javascript" src="/public/js/jquery-2.2.0.min.js"></script>
-<script src="/public/js/socket.io-1.2.0.js"></script>
-<script type="text/javascript">
-    var socket = io();
-    socket.emit('send:connect', 'player');
-</script>
-
 <script type="text/javascript">
    if (window.DeviceOrientationEvent) {
         window.addEventListener("deviceorientation", function(event) {
@@ -26,5 +46,36 @@
     };
 </script>
 
+<nav class="navbar navbar-inverse navbar-fixed-top">
+  <div class="container">
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <a class="navbar-brand" href="#">Pong 4</a>
+    </div>
+  </div>
+</nav>
+
+<div class="container">
+    <br /><br /><br /><br />
+    <div class="row">
+        <div class="col-xs-12 col-sm-12 col-md-8">
+            <div class="username">
+                <p>Please enter your name</p>
+                <p>
+                    <input type="text" id="username" size="10" />
+                    <input type="button" class="save" value="Save" />
+                </p>
+            </div>
+            <h1 class="h1"></h1>
+            <h2 class="h2"></h2>
+        </div>
+    </div>
+</div><!-- /.container -->
+
 </body>
 </html>

comments