search

LRPuno / glory_brawl

Project 1 Game
1 stars 1 forks source link

add this client stuff to phaser #18

Open Jaybhatt216 opened 6 years ago

Jaybhatt216 commented 6 years ago

needs to add in socket link and the socket.on stuff 

<!DOCTYPE html>
<html>
<head>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<!-- NEW JQUERY CDN HERE -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="/socket.io/socket.io.js"></script>

<style>
    body{
        margin-top:30px;
    }
    #messageArea{
        display:none;
    }

</style>
        <title>client</title>
</head>
<body>
    <div class="container">
        <div id="userFormArea" class="row">
            <div class="col-md-12">
                <form id="userForm">
                    <div class='form-group'>
                        <label>Enter username</label>
                        <input class='form-control' id='username'/>
                        <br/>
                        <input type="submit" class='btn btn-primary' value='login'/>
                </form>

            </div>

        </div>

        <div id="messageArea" class="row">
            <div class="col-md-4">
                <div class="well">
                    <h3>Online Users</h3>
                    <ul class="list-group" id="users"></ul>
                </div>

            </div>
            <div class="col-md-8">
                <div class ="chat" id="chat"></div>
                <form id="messageForm">
                    <div class='form-group'>
                        <label>Enter message</label>
                        <textarea class='form-control' id='message'>
                        </textarea>
                        <br/>
                        <input type="submit" class='btn btn-primary' value='Send Message'/>
                </form>

            </div>
        </div>  
    </div>
<script>
    $(function(){
        var socket = io.connect();
        var $messageForm = $('#messageForm');
        var $message = $('#message');
        var $chat = $('#chat');
        var $messageArea= $('#messageArea');
        var $userFormArea = $('#userFormArea');
        var $users = $('#users');
        var $username = $('#username');
        var $userForm= $('#userForm');
        $messageForm.submit(function(e){
            e.preventDefault();
            socket.emit('send message', $message.val());
            $message.val('');
        });
        socket.on('new message', function(data){
            $chat.append('<div class="well">'+data.msg+'</div>');
        });
        $userForm.submit(function(e){
            e.preventDefault();
            socket.emit('new user', $username.val(), function(data){
                if(data){
                    $userForm.hide();
                    $messageArea.show();
                }
            });
            $username.val('');
        });
        socket.on('get users', function(data){
            var html ='';
            for(i=0;i < data.length; i++){
                html += '<li class="list-group-item">'+data[i]+'</li>';
            }
            $users.html(html);
        });
    });

</script>

</body>
</html>