Fall2016-Voltron/client.html at master · fullstack101-alumni/Fall2016-Voltron · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!doctype html>
<html>
  <head>
    <title>Le French team endroit</title>
    <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background-color:#000;}
    #chatCont{ display:none; width: 30%; }
    #msgBox {padding: 3px; position: fixed; bottom: 0; width: 30%; }
    #chatMsg { border: 0; padding: 10px; width: 80%; margin-right: .5%; }
    #send { width: 19%; background: #ffffff; border: none; padding: 10px; }
    #messages { background: #fff; list-style-type: none;  margin: 0; padding: 0; }
    #messages li { padding: 5px 10px; font-family: Helvetica;}
    #messages li:nth-child(odd) { background: #fff; font-family: Helvetica;}
    #usersConnected{margin-left:40%; color: white; position: fixed; font-family: Helvetica;}
    #usernameWrapper{margin-top: 25%;}
    #button { width: 100px; height: 50px; border-radius: 8px; background-color:#000; color:white; border:none; font-size:16px;}
    #username {height: 50px; font-size:16px; background-color:#000; border: none; color: white; border-bottom-color:white;}
    #usernameSameErr{color:#fff; font-family:Helvetica;}
    </style>
  </head>
  <body>
<center>
    <div id="usernameWrapper">
      <form id="setUsername">
        <p id ="usernameSameErr"></p>
          <input type="text" id ="username"  size="40" placeholder ="Please enter username.">
          <button id="button">Enter</button>
      </form>
    </div>

    <div id="chatCont">
      <ul id="messages"></ul>
      <form action="" id="msgBox">
          <input id="chatMsg" autocomplete="off" /><button id="send">Send</button>
      </form>
      <div id = "usersConnected"> </div>
    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script>

    var socket = io();
     $('#setUsername').submit(function(event){
        event.preventDefault(); //functioned used to prevent the default action of event
        socket.emit('new user connected', $('#username').val(), function(data){  //pass data to the server
          if(data){ //if data is true hide the username div and show the chat div
          $('#usernameWrapper').hide('slow');
          $('#chatCont').show('slow');
        } else {
          $('#usernameSameErr').html('The username has already been taken. Please choose another one.'); //if data returned from the serve is false show error
        }
        });
        $('#username').val('');
      });

      socket.on('usernames', function(data){ //display users in the users div next to the chat div
        var usersCon = '';
        for(i=0; i<data.length; i++){
          usersCon += data[i] + '</br>'
        }
        $('#usersConnected').html(usersCon);
      });

    $('#msgBox').submit(function(event){  //send messages
      event.preventDefault(); //preventDefault for the event loop to go properly
      socket.emit('chat message', $('#chatMsg').val()); //send the message to server
      $('#chatMsg').val('');
      return false;
    });
    socket.on('chat message', function(msg){ //show the message in the client
      $('#messages').append($('<li>').text(msg.usr +':'+ msg.line));
    });

    </script>
  </body>
</html>